/* ═══════════════════════════════════════════════════════
   VISION STUDIO — CINEMATIC DESIGN SYSTEM v3
   Premium Video Production Agency — Budapest
   ═══════════════════════════════════════════════════════ */

/* Fonts are loaded via <link> in each HTML file — no @import needed here */

:root {
  --c-black:   #030303;
  --c-dark:    #080808;
  --c-dark2:   #0e0e0e;
  --c-dark3:   #141414;
  --c-grey1:   #1e1e1e;
  --c-grey2:   #2a2a2a;
  --c-grey3:   #444;
  --c-mid:     #777;
  --c-light:   #bbb;
  --c-white:   #f2f0eb;
  --c-gold:    #c8a85a;
  --c-gold2:   #e4c878;
  --c-gold3:   #f0dfa0;
  --c-goldDim: rgba(200,168,90,0.15);
  --ff-display:'Cormorant Garamond',serif;
  --ff-ui:     'Syne',sans-serif;
  --ff-mono:   'Space Mono',monospace;
  --ease-film: cubic-bezier(0.76,0,0.24,1);
  --ease-out:  cubic-bezier(0.16,1,0.3,1);
  --ease-soft: cubic-bezier(0.25,0.46,0.45,0.94);
  --nav-h:76px; --gutter:clamp(20px,4vw,60px); --section-y:clamp(80px,11vw,160px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
body{background:var(--c-black);color:var(--c-white);font-family:var(--ff-ui);font-size:16px;line-height:1.6;overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{background:none;border:none;cursor:none}
::selection{background:var(--c-gold);color:var(--c-black)}

/* Skip link */
.skip-link{position:fixed;top:-100%;left:50%;transform:translateX(-50%);background:var(--c-gold);color:var(--c-black);font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;padding:12px 24px;z-index:999999;transition:top .3s}
.skip-link:focus{top:12px}

/* Performance hints */
.pf-card,.srv-card,.blog-img-inner,.hero-video-wrapper iframe{will-change:transform}
.loader-fill{will-change:width}
#cur-dot,#cur-ring{will-change:left,top}

/* ── CURSOR ── */
#cur-dot{position:fixed;inset:auto;width:8px;height:8px;background:var(--c-gold);border-radius:50%;pointer-events:none;z-index:99999;transform:translate(-50%,-50%);transition:width .25s var(--ease-out),height .25s var(--ease-out),background .3s;mix-blend-mode:difference}
#cur-ring{position:fixed;inset:auto;width:36px;height:36px;border:1px solid rgba(200,168,90,.5);border-radius:50%;pointer-events:none;z-index:99998;transform:translate(-50%,-50%);transition:width .5s var(--ease-out),height .5s var(--ease-out),opacity .3s,border-color .3s}
@media(hover:hover){
  body.cur-hover #cur-dot{width:48px;height:48px;background:transparent;border:1px solid var(--c-gold);mix-blend-mode:normal}
  body.cur-hover #cur-ring{opacity:0}
  body.cur-video #cur-dot{width:80px;height:80px;background:var(--c-gold);mix-blend-mode:normal}
  body.cur-video #cur-dot::after{content:'PLAY';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--ff-mono);font-size:9px;letter-spacing:.2em;color:var(--c-black)}
}

/* ── GRAIN ── */
#noise{position:fixed;inset:0;z-index:99990;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 6s steps(12) infinite}
@keyframes grain{0%,100%{background-position:0 0}20%{background-position:-40px 20px}40%{background-position:20px -40px}60%{background-position:-20px 40px}80%{background-position:40px -20px}}

/* ── LOADER ── */
#loader{position:fixed;inset:0;z-index:99997;background:var(--c-black);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.loader-strips{position:absolute;top:0;height:100%;width:48px;display:flex;flex-direction:column;gap:8px;padding:8px 10px;border-right:1px solid rgba(255,255,255,.04)}
.loader-strips--r{right:0;left:auto;border-right:none;border-left:1px solid rgba(255,255,255,.04)}
.strip-hole{flex-shrink:0;width:100%;aspect-ratio:1;border:1px solid var(--c-grey2);border-radius:2px}
.loader-logo{font-family:var(--ff-display);font-size:clamp(28px,5vw,52px);font-weight:300;letter-spacing:.35em;color:var(--c-white);margin-bottom:12px;overflow:hidden}
.loader-logo span{display:inline-block;transform:translateY(100%)}
.loader-sub{font-family:var(--ff-mono);font-size:9px;letter-spacing:.45em;color:var(--c-gold);text-transform:uppercase;margin-bottom:44px;opacity:0}
.loader-track{width:min(280px,55vw);height:1px;background:var(--c-grey2);margin:0 auto 16px;position:relative}
.loader-fill{height:100%;background:var(--c-gold);width:0;transition:width .08s linear}
.loader-fill::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;background:var(--c-gold);border-radius:50%}
.loader-pct{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;color:var(--c-mid)}
.loader-glow{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(200,168,90,.07),transparent 70%);border-radius:50%;pointer-events:none;animation:glow-pulse 3s ease-in-out infinite}
@keyframes glow-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.25);opacity:1}}

/* ── NAV ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:9000;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);transition:background .5s var(--ease-film),backdrop-filter .5s,transform .45s var(--ease-out)}
#nav.solid{background:rgba(3,3,3,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(200,168,90,.08)}
.nav-logo{display:flex;align-items:center;gap:12px;font-family:var(--ff-display);font-size:20px;font-weight:400;letter-spacing:.18em;color:var(--c-white)}
.nav-gem{width:28px;height:28px;border:1px solid var(--c-gold);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-gem::before{content:'';width:8px;height:8px;background:var(--c-gold);transform:rotate(-45deg)}
.nav-menu{display:flex;gap:36px;list-style:none}
.nav-menu a{font-family:var(--ff-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-light);position:relative;transition:color .3s}
.nav-menu a::after{content:'';position:absolute;bottom:-4px;left:0;right:100%;height:1px;background:var(--c-gold);transition:right .4s var(--ease-out)}
.nav-menu a:hover,.nav-menu a.active{color:var(--c-gold)}
.nav-menu a:hover::after,.nav-menu a.active::after{right:0}
.nav-btn{font-family:var(--ff-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-black);background:var(--c-gold);padding:10px 26px;clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);transition:background .3s,transform .3s}
.nav-btn:hover{background:var(--c-gold2);transform:translateY(-1px)}

/* Burger — animates to X when open */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:6px;padding:8px;width:40px;height:40px;position:relative;z-index:9001}
.nav-burger span{display:block;height:1px;background:var(--c-white);transition:transform .45s var(--ease-out),opacity .3s,width .3s;transform-origin:center}
.nav-burger span:nth-child(1){width:28px}
.nav-burger span:nth-child(2){width:20px}
.nav-burger span:nth-child(3){width:28px}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);width:28px}
.nav-burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:28px}

/* Mobile menu overlay */
.nav-menu.nav-open{display:flex!important;flex-direction:column;position:fixed;inset:0;background:rgba(3,3,3,.97);z-index:8999;justify-content:center;align-items:center;gap:32px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.nav-menu.nav-open li a{font-size:16px;letter-spacing:.3em}

/* ── HERO ── */
#hero{position:relative;width:100%;height:100vh;min-height:640px;overflow:hidden;display:flex;align-items:center}
.hero-video-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none}
.hero-video-wrapper iframe{position:absolute;top:50%;left:50%;width:177.77vh;height:100vh;min-width:100%;min-height:56.25vw;transform:translate(-50%,-50%);pointer-events:none;border:0}
/* Ken Burns slow zoom on the wrapper (not the iframe — avoids GSAP parallax conflict) */
.hero-video-wrapper {
  animation: hero-ken-burns 30s ease-in-out infinite alternate;
}
@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video-wrapper { animation: none !important; }
}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.65) 40%,rgba(0,0,0,.35) 70%,rgba(0,0,0,.94) 100%);z-index:1}
.hero-overlay::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.55) 100%);pointer-events:none}
.hero-scan{position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.018) 2px,rgba(0,0,0,.018) 4px);opacity:.35}
.hero-body{position:relative;z-index:3;padding:0 var(--gutter);max-width:920px}
.hero-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:28px;overflow:hidden}
.eyebrow-line{width:36px;height:1px;background:var(--c-gold);transform:scaleX(0);transform-origin:left}
.eyebrow-txt{font-family:var(--ff-mono);font-size:10px;letter-spacing:.42em;color:var(--c-gold);text-transform:uppercase;opacity:0;transform:translateX(-16px)}
.hero-h1{font-family:var(--ff-display);font-size:clamp(48px,7.5vw,115px);font-weight:300;line-height:1;letter-spacing:-.01em;margin-bottom:24px}
.hero-h1 .line{display:block;overflow:hidden}
.hero-h1 .word{display:inline-block;transform:translateY(105%)}
.hero-h1 em{font-style:italic;color:var(--c-gold)}
.hero-sub{font-size:clamp(14px,1.5vw,17px);color:var(--c-light);line-height:1.75;max-width:460px;margin-bottom:48px;opacity:0;transform:translateY(18px)}
.hero-ctas{display:flex;gap:18px;align-items:center;flex-wrap:wrap;opacity:0;transform:translateY(18px)}
.hero-scroll{position:absolute;bottom:44px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transition:opacity .8s}
.hero-scroll.vis{opacity:1}
.scroll-line{width:1px;height:52px;background:linear-gradient(to bottom,var(--c-gold),transparent);animation:scroll-anim 2s ease-in-out infinite}
@keyframes scroll-anim{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.scroll-txt{font-family:var(--ff-mono);font-size:8px;letter-spacing:.4em;color:var(--c-mid);writing-mode:vertical-rl}
.hero-stats{position:absolute;bottom:0;right:0;z-index:3;display:flex;border-top:1px solid rgba(255,255,255,.05);border-left:1px solid rgba(255,255,255,.05)}
.h-stat{padding:20px 36px;border-right:1px solid rgba(255,255,255,.05)}
.h-stat-n{font-family:var(--ff-display);font-size:28px;font-weight:300;color:var(--c-gold);line-height:1;margin-bottom:4px}
.h-stat-l{font-family:var(--ff-mono);font-size:8px;letter-spacing:.3em;color:var(--c-mid);text-transform:uppercase}

/* ── DISCIPLINE BLOCK (replaces marquee) ── */
.discipline-block{background:var(--c-dark);border-top:1px solid var(--c-grey1);border-bottom:1px solid var(--c-grey1);padding:clamp(36px,5vw,72px) var(--gutter)}
.discipline-inner{max-width:1400px;margin:0 auto}
.discipline-label{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.discipline-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--c-grey1)}
.discipline-item{background:var(--c-dark);padding:32px 28px 28px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:background .5s var(--ease-film)}
.discipline-item::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--c-gold);transition:width .6s var(--ease-out)}
.discipline-item:hover{background:var(--c-dark2)}
.discipline-item:hover::after{width:100%}
.discipline-num{font-family:var(--ff-mono);font-size:9px;letter-spacing:.32em;color:rgba(200,168,90,.45);line-height:1}
.discipline-name{font-family:var(--ff-display);font-size:clamp(22px,2.4vw,36px);font-weight:300;font-style:italic;color:var(--c-white);line-height:1.1;transition:color .3s}
.discipline-item:hover .discipline-name{color:var(--c-gold2)}
@media(max-width:860px){.discipline-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.discipline-grid{grid-template-columns:repeat(2,1fr)}}

/* ── SECTION COMMONS ── */
/* Ultra-wide guard: content inside .sec never exceeds 1400px.
   Full-bleed backgrounds still stretch to 100vw via padding on the element itself. */
.sec{padding:var(--section-y) var(--gutter)}
.sec > .sec-inner{max-width:1400px;margin-inline:auto}
/* Shorthand: direct children that are text/title blocks get auto-constrained */
@media(min-width:1500px){
  .sec > .sec-label,
  .sec > .sec-title,
  .sec > .sec-sub,
  .sec > .about-grid,
  .sec > .proc-grid,
  .sec > .stats-row,
  .sec > .testi-grid,
  .sec > .blog-grid{max-width:1400px;margin-inline:auto}
}
.sec-label{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sec-label-bar{width:28px;height:1px;background:var(--c-gold)}
.sec-label-txt{font-family:var(--ff-mono);font-size:9px;letter-spacing:.42em;color:var(--c-gold);text-transform:uppercase}
.sec-title{font-family:var(--ff-display);font-size:clamp(38px,5.5vw,76px);font-weight:300;line-height:1.05;letter-spacing:-.01em}
.sec-title em{font-style:italic;color:var(--c-gold)}
.sec-sub{font-size:clamp(14px,1.4vw,17px);color:var(--c-mid);line-height:1.8;max-width:520px}

/* ── BUTTONS ── */
.btn-gold{display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#0a0a0a;background:var(--c-gold);padding:15px 34px;position:relative;overflow:hidden;transition:transform .3s}
.btn-gold::before{content:'';position:absolute;inset:0;background:var(--c-gold2);transform:translateX(-101%);transition:transform .4s var(--ease-film)}
.btn-gold:hover::before{transform:translateX(0)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-gold>*{position:relative;z-index:1}
.btn-ghost{display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-white);padding:15px 0;border-bottom:1px solid rgba(255,255,255,.2);transition:color .3s,border-color .3s}
.btn-ghost:hover{color:var(--c-gold);border-color:var(--c-gold)}
.play-circle{width:38px;height:38px;border:1px solid rgba(255,255,255,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .3s,transform .3s,background .3s}
.btn-ghost:hover .play-circle{border-color:var(--c-gold);background:rgba(200,168,90,.1);transform:scale(1.08)}

/* ── SERVICES GRID ── */
.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-grey1);margin-top:72px}
.srv-card{background:var(--c-dark2);padding:48px 40px;position:relative;overflow:hidden;transition:background .5s var(--ease-film)}
.srv-card::before{content:'';position:absolute;bottom:0;left:0;width:100%;height:0;background:linear-gradient(to top,rgba(200,168,90,.07),transparent);transition:height .6s var(--ease-film)}
/* Light sweep on hover */
.srv-card::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent 0%,rgba(200,168,90,.06) 40%,rgba(220,195,120,.16) 55%,rgba(200,168,90,.06) 70%,transparent 100%);transform:skewX(-12deg);pointer-events:none;z-index:1;opacity:0;transition:opacity .1s}
@media(hover:hover){
  .srv-card:hover{background:var(--c-dark3)}
  .srv-card:hover::before{height:100%}
  .srv-card:hover::after{animation:srv-sweep .65s var(--ease-out) forwards}
  .srv-card:hover .srv-icon{opacity:1;transform:scale(1.1)}
  .srv-card:hover .srv-title{color:var(--c-gold2)}
  .srv-card:hover .srv-num{color:rgba(200,168,90,.8)}
}
@keyframes srv-sweep{
  0%{left:-80%;opacity:1}
  100%{left:130%;opacity:1}
}
.srv-num{font-family:var(--ff-mono);font-size:10px;letter-spacing:.32em;color:rgba(200,168,90,.4);margin-bottom:28px;transition:color .4s}
.srv-icon{width:44px;height:44px;margin-bottom:24px;opacity:.65;transition:opacity .3s,transform .5s var(--ease-out);position:relative;z-index:2}
.srv-title{font-family:var(--ff-display);font-size:clamp(22px,2vw,30px);font-weight:400;margin-bottom:14px;transition:color .4s;position:relative;z-index:2}
.srv-desc{font-size:13px;color:var(--c-mid);line-height:1.75;margin-bottom:28px;position:relative;z-index:2}
.srv-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:9px;letter-spacing:.3em;color:var(--c-gold);text-transform:uppercase;transition:gap .3s;position:relative;z-index:2}
.srv-link:hover{gap:16px}
.srv-tag{position:absolute;top:24px;right:28px;font-family:var(--ff-mono);font-size:9px;letter-spacing:.25em;color:rgba(200,168,90,.2);z-index:2}

/* ── PORTFOLIO ── */
/* Centered section header — single title, no duplication */
.pf-section-header {
  padding: var(--section-y) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.pf-main-title {
  text-align: center;
  margin-bottom: 20px;
}
.pf-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.pf-filter{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:0 var(--gutter) 40px}
.pf-pill{font-family:var(--ff-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-mid);border:1px solid var(--c-grey1);padding:8px 20px;transition:all .3s;position:relative;overflow:hidden;cursor:pointer}
.pf-pill::before{content:'';position:absolute;inset:0;background:var(--c-gold);transform:translateY(101%);transition:transform .35s var(--ease-film)}
.pf-pill span{position:relative;z-index:1;transition:color .3s}
.pf-pill:hover,.pf-pill.on{border-color:var(--c-gold)}
.pf-pill.on::before,.pf-pill:hover::before{transform:translateY(0)}
.pf-pill.on span,.pf-pill:hover span{color:var(--c-black)}
.pf-count{font-family:var(--ff-mono);font-size:9px;letter-spacing:.2em;color:var(--c-grey3);margin-left:auto}

/* Netflix-style uniform 16:9 grid */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 3px 3px}
.pf-item{aspect-ratio:16/9;position:relative}
.pf-card{position:relative;width:100%;height:100%;overflow:hidden;background:var(--c-dark3);cursor:pointer}
.pf-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-thumb-svg{position:absolute;inset:0;width:100%;height:100%}
.pf-card::after{content:'';position:absolute;inset:0;z-index:4;background:linear-gradient(to top,rgba(3,3,3,.85) 0%,rgba(3,3,3,.2) 50%,transparent 80%);opacity:0;transition:opacity .5s var(--ease-film);pointer-events:none}
.pf-thumb-img{position:absolute;inset:0;width:100%;height:100%;transition:transform .8s var(--ease-film),filter .5s;filter:saturate(.5) brightness(.55);overflow:hidden;z-index:1}
@media(hover:hover){
  /* ::after gradient fades IN on hover (helps pf-info readability over video) */
  .pf-card:hover::after{opacity:1}
  /* Thumbnail dims further as video takes over */
  .pf-card:hover .pf-thumb-img{transform:scale(1.04);filter:saturate(.3) brightness(.35)}
}
.pf-scanline{position:absolute;top:0;left:0;right:0;height:1px;z-index:4;background:linear-gradient(to right,transparent,var(--c-gold),transparent);opacity:0;pointer-events:none}
@media(hover:hover){.pf-card:hover .pf-scanline{opacity:1;animation:scan-drop 1.4s var(--ease-soft) forwards infinite}}
@keyframes scan-drop{0%{top:0;opacity:1}80%{top:100%;opacity:1}100%{top:100%;opacity:0}}
.pf-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;transform:translateY(-100%);opacity:0;transition:transform .45s var(--ease-out) .05s,opacity .4s .05s}
@media(hover:hover){.pf-card:hover .pf-top{transform:translateY(0);opacity:1}}
.pf-tag{font-family:var(--ff-mono);font-size:8px;letter-spacing:.35em;color:var(--c-gold);text-transform:uppercase;background:rgba(3,3,3,.75);backdrop-filter:blur(10px);border:1px solid rgba(200,168,90,.25);padding:5px 12px}
.pf-dur{font-family:var(--ff-mono);font-size:8px;letter-spacing:.2em;color:var(--c-light);background:rgba(3,3,3,.7);backdrop-filter:blur(10px);padding:5px 10px}
.pf-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.55);opacity:0;z-index:4;transition:transform .5s var(--ease-out),opacity .4s}
@media(hover:hover){.pf-card:hover .pf-play-btn{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media(hover:none){.pf-play-btn{transform:translate(-50%,-50%) scale(.85);opacity:.85}}
.play-ring-lg{width:68px;height:68px;border:1.5px solid rgba(255,255,255,.75);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transition:border-color .3s}
.pf-card:hover .play-ring-lg{border-color:var(--c-gold)}
.play-ring-lg::before{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(200,168,90,.3);animation:ring-pulse 2.2s ease-in-out infinite;opacity:0}
.pf-card:hover .play-ring-lg::before{opacity:1}
@keyframes ring-pulse{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.2);opacity:0}}
.tri{width:0;height:0;border-style:solid;border-width:10px 0 10px 18px;border-color:transparent transparent transparent white;margin-left:4px;transition:border-color .3s}
.pf-card:hover .tri{border-color:transparent transparent transparent var(--c-gold)}
.pf-info{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:22px 24px;transform:translateY(16px);opacity:0;transition:transform .45s var(--ease-out) .1s,opacity .4s .1s}
@media(hover:hover){.pf-card:hover .pf-info{transform:translateY(0);opacity:1}}
@media(hover:none){.pf-info{transform:translateY(0);opacity:1}}
.pf-client{font-family:var(--ff-mono);font-size:8px;letter-spacing:.32em;color:rgba(200,168,90,.7);text-transform:uppercase;margin-bottom:6px}
.pf-title{font-family:var(--ff-display);font-size:clamp(14px,1.8vw,22px);font-weight:300;line-height:1.2;margin-bottom:12px;
  background:linear-gradient(120deg,#c8a85a 0%,#e4c878 35%,#f0dfa0 55%,#d4a870 80%,#c8a85a 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-shadow:none;filter:drop-shadow(0 1px 8px rgba(200,168,90,.18))}
.pf-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:8px;letter-spacing:.3em;color:var(--c-gold);text-transform:uppercase;transition:gap .3s}
.pf-cta:hover{gap:14px}

/* ── LOGOS SECTION ── */
.logos-section{background:var(--c-black);padding:var(--section-y) var(--gutter);border-top:none;border-bottom:none}/* spacing/borders handled by vs-final.css */
.logos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-grey1);margin-top:56px}
.logo-cell{background:var(--c-dark);padding:32px 40px;display:flex;align-items:center;justify-content:center;min-height:100px;position:relative;overflow:hidden;transition:background .4s var(--ease-film)}
.logo-cell::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(200,168,90,.06),transparent 70%);opacity:0;transition:opacity .4s}
.logo-cell:hover{background:var(--c-dark2)}
.logo-cell:hover::before{opacity:1}
.logo-cell img{max-height:44px;max-width:140px;width:auto;height:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.45;transition:opacity .4s var(--ease-out),filter .4s var(--ease-out),transform .4s var(--ease-out)}
.logo-cell:hover img{opacity:.85;filter:brightness(0) invert(1) sepia(1) saturate(0);transform:scale(1.06)}

/* ── VIDEO MODAL ── */
#modal{position:fixed;inset:0;z-index:99995;opacity:0;pointer-events:none;transition:opacity .5s var(--ease-film)}
#modal.open{opacity:1;pointer-events:all}
.modal-back{position:absolute;inset:0;background:rgba(3,3,3,.97);backdrop-filter:blur(22px)}
.modal-box{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px)}
.modal-inner{width:100%;max-width:1180px;transform:scale(.9) translateY(30px);transition:transform .6s var(--ease-out)}
#modal.open .modal-inner{transform:scale(1) translateY(0)}
.modal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;padding:0 4px}
.modal-project-tag{font-family:var(--ff-mono);font-size:9px;letter-spacing:.4em;color:var(--c-gold);text-transform:uppercase}
.modal-title{font-family:var(--ff-display);font-size:clamp(20px,3vw,34px);font-weight:300;margin-top:6px;color:var(--c-white)}
.modal-x{width:46px;height:46px;border:1px solid rgba(255,255,255,.12);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .3s,transform .4s;cursor:pointer}
.modal-x:hover{border-color:var(--c-gold);transform:rotate(90deg)}
.modal-video{position:relative;width:100%;padding-bottom:56.25%;background:#000;overflow:hidden}
.modal-bar{position:absolute;left:0;right:0;height:36px;background:var(--c-black);z-index:2;transition:height .6s var(--ease-film) .3s}
.modal-bar--t{top:0}.modal-bar--b{bottom:0}
#modal.open .modal-bar{height:0}
.modal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-grey1);margin-top:3px}
.modal-stat{background:rgba(8,8,8,.95);backdrop-filter:blur(20px);padding:18px 22px}
.modal-stat-l{font-family:var(--ff-mono);font-size:8px;letter-spacing:.32em;color:var(--c-gold);text-transform:uppercase;margin-bottom:5px}
.modal-stat-v{font-family:var(--ff-display);font-size:15px;font-weight:300;color:var(--c-white)}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-visual{position:relative;aspect-ratio:4/5}
.about-frame{position:absolute;inset:-14px;border:1px solid rgba(200,168,90,.18);pointer-events:none;transition:inset .5s var(--ease-out)}
.about-visual:hover .about-frame{inset:-22px}
.about-accent{position:absolute;bottom:-20px;right:-20px;width:140px;height:140px;background:var(--c-gold);opacity:.1;z-index:-1}
.about-quote{font-family:var(--ff-display);font-size:clamp(18px,2.2vw,26px);font-weight:300;font-style:italic;line-height:1.55;padding:24px 0;margin:28px 0;border-top:1px solid var(--c-grey1);border-bottom:1px solid var(--c-grey1)}
.about-quote::before{content:'\201C';font-size:52px;color:var(--c-gold);line-height:0;vertical-align:-.36em;margin-right:6px}
.about-body{font-size:15px;color:var(--c-mid);line-height:1.9;margin-bottom:18px}

/* ── PROCESS ── */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-grey1);margin-top:72px}
.proc-step{background:var(--c-black);padding:44px 32px;position:relative;overflow:hidden}
.proc-step-n{font-family:var(--ff-display);font-size:72px;font-weight:300;color:var(--c-grey1);line-height:1;margin-bottom:20px;transition:color .4s}
.proc-step:hover .proc-step-n{color:rgba(200,168,90,.12)}
.proc-step-t{font-family:var(--ff-display);font-size:20px;font-weight:400;margin-bottom:12px}
.proc-step-d{font-size:13px;color:var(--c-mid);line-height:1.75}
.proc-step-bar{position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--c-gold);transition:width .6s var(--ease-out)}
.proc-step:hover .proc-step-bar{width:100%}

/* ── STATS ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-grey1)}
.stat-cell{background:var(--c-dark2);padding:56px 44px;text-align:center}
.stat-n{font-family:var(--ff-display);font-size:clamp(44px,5.5vw,72px);font-weight:300;color:var(--c-gold);line-height:1;margin-bottom:10px}
.stat-l{font-family:var(--ff-mono);font-size:9px;letter-spacing:.3em;color:var(--c-mid);text-transform:uppercase}

/* ── TESTIMONIALS ── */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-grey1);margin-top:72px;align-items:start}
.testi-card{background:var(--c-dark2);padding:44px 36px;position:relative;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(200,168,90,.1);transition:background .45s ease,border-color .45s ease,transform .45s cubic-bezier(0.16,1,0.3,1)}
.testi-card::before{content:'\201C';position:absolute;top:8px;right:20px;font-family:var(--ff-display);font-size:110px;font-weight:300;line-height:1;color:rgba(200,168,90,.06);pointer-events:none;user-select:none;z-index:0}
.testi-card::after{content:'';position:absolute;left:0;bottom:0;width:2px;height:0;background:linear-gradient(to top,var(--c-gold),transparent);transition:height .5s var(--ease-film)}
.testi-card:hover{background:var(--c-dark3);border-color:rgba(200,168,90,.28)}
.testi-card:hover::after{height:100%}
.testi-stars{display:flex;gap:4px;margin-bottom:20px}
.testi-star{width:14px;height:14px;background:var(--c-gold);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.testi-text{font-family:var(--ff-display);font-size:clamp(15px,1.5vw,18px);font-weight:300;font-style:italic;line-height:1.7;color:var(--c-white);margin-bottom:28px;flex:1}
.testi-author{display:flex;align-items:center;gap:14px}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--c-grey1);border:1px solid rgba(200,168,90,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--ff-display);font-size:16px;color:var(--c-gold);font-weight:300}
.testi-name{font-family:var(--ff-ui);font-size:13px;font-weight:600;color:var(--c-white);margin-bottom:2px}
.testi-role{font-family:var(--ff-mono);font-size:9px;letter-spacing:.22em;color:var(--c-gold);text-transform:uppercase}
.testi-badge{position:absolute;bottom:24px;right:28px;font-family:var(--ff-mono);font-size:8px;letter-spacing:.3em;color:rgba(200,168,90,.3);text-transform:uppercase}
/* Source verification link — shown once real LinkedIn/Clutch links are added */
.testi-source{display:inline-block;margin-top:5px;font-family:var(--ff-mono);font-size:8px;letter-spacing:.18em;color:rgba(200,168,90,.55);text-transform:uppercase;text-decoration:none;transition:color .3s ease}
.testi-source:hover{color:var(--c-gold)}
/* Photo avatar — replaces the initial-letter div when real photo is available */
.testi-avatar--photo{border-radius:50%;object-fit:cover;width:44px;height:44px;border:1px solid rgba(200,168,90,.2)}

/* ── BLOG PREVIEW ── */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;                        /* hairline divider: 1px is crisper than 2px on all DPIs */
  background:rgba(255,255,255,0.06); /* very subtle separator colour — was too contrasty */
  align-items:stretch;            /* force equal row heights (CSS grid default, made explicit) */
}
/* Cards must fill full grid cell height so rows stay perfectly even */
.blog-card{background:var(--c-dark);display:flex;flex-direction:column;overflow:hidden}
.blog-img{aspect-ratio:16/10;overflow:hidden}
.blog-img-inner{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-film),filter .5s;filter:saturate(.5)}
@media(hover:hover){
  .blog-card:hover .blog-img-inner{transform:scale(1.05);filter:saturate(.85)}
  .blog-card:hover .blog-title{color:var(--c-gold)}
}
.blog-body{padding:28px 28px 36px;flex:1;display:flex;flex-direction:column}
.blog-cat{font-family:var(--ff-mono);font-size:8px;letter-spacing:.38em;color:var(--c-gold);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.blog-cat::before{content:'';width:16px;height:1px;background:var(--c-gold)}
.blog-title{font-family:var(--ff-display);font-size:clamp(17px,1.9vw,22px);font-weight:400;line-height:1.3;margin-bottom:12px;transition:color .3s}
.blog-excerpt{font-size:12px;color:var(--c-mid);line-height:1.75;margin-bottom:20px;flex:1}
.blog-meta{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:8px;letter-spacing:.2em;color:var(--c-grey3);text-transform:uppercase;padding-top:16px;border-top:1px solid var(--c-grey1);margin-top:auto}

/* ── CTA BAND ── */
.cta-band{text-align:center;padding:calc(var(--section-y)*1.4) var(--gutter);position:relative;overflow:hidden}
.cta-bg-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;font-family:var(--ff-display);font-size:clamp(100px,16vw,210px);font-weight:300;color:transparent;-webkit-text-stroke:1px rgba(200,168,90,.05);letter-spacing:.2em;white-space:nowrap}
.cta-title{font-family:var(--ff-display);font-size:clamp(36px,5.5vw,80px);font-weight:300;line-height:1.1;margin-bottom:20px}
.cta-title em{font-style:italic;color:var(--c-gold)}
.cta-sub{font-size:15px;color:var(--c-mid);margin-bottom:44px;max-width:460px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
footer{background:var(--c-black);border-top:1px solid var(--c-grey1)}
.ft-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:52px;padding:72px var(--gutter) 60px}
.ft-brand-desc{font-size:12px;color:var(--c-mid);line-height:1.75;margin:16px 0 24px;max-width:260px}
.ft-social{display:flex;gap:10px}
.ft-social a{width:34px;height:34px;border:1px solid var(--c-grey2);display:flex;align-items:center;justify-content:center;color:var(--c-mid);transition:border-color .3s,color .3s}
.ft-social a:hover{border-color:var(--c-gold);color:var(--c-gold)}
.ft-col-h{font-family:var(--ff-mono);font-size:9px;letter-spacing:.32em;color:var(--c-gold);text-transform:uppercase;margin-bottom:20px}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-links a{font-size:12px;color:var(--c-mid);transition:color .3s,padding-left .3s;display:block}
.ft-links a:hover{color:var(--c-white);padding-left:8px}
.ft-contact-item{margin-bottom:14px}
.ft-contact-l{font-family:var(--ff-mono);font-size:8px;letter-spacing:.3em;color:var(--c-grey3);text-transform:uppercase;margin-bottom:3px}
.ft-contact-v{font-size:12px;color:var(--c-mid);transition:color .3s}
a.ft-contact-v:hover{color:var(--c-gold)}
.ft-bottom{border-top:1px solid var(--c-grey1);padding:18px var(--gutter);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.ft-copy{font-family:var(--ff-mono);font-size:9px;letter-spacing:.18em;color:var(--c-grey3)}

/* ── PAGE WIPE ── */
/* #wipe panels disabled — page transition system removed to eliminate black flash */
#wipe{display:none!important;visibility:hidden!important;pointer-events:none}
.wipe-p{flex:1;background:var(--c-black);transform:scaleY(0);transform-origin:top;position:relative;will-change:transform}
/* Rose-gold leading edge — bottom of each panel, visible as the wipe sweeps down */
.wipe-p::after{
  content:'';
  position:absolute;
  bottom:0;left:-1px;right:-1px;
  height:1px;
  background:linear-gradient(
    to right,
    transparent 0%,
    rgba(200,168,90,.35) 20%,
    rgba(228,200,120,.7) 40%,
    rgba(232,205,128,.9) 50%,
    rgba(228,200,120,.7) 60%,
    rgba(200,168,90,.35) 80%,
    transparent 100%
  );
  box-shadow:0 0 6px 1px rgba(200,168,90,.18);
  pointer-events:none;
}

/* ── SCROLL REVEAL ── */
[data-reveal]{opacity:0;transform:translateY(40px)}
[data-reveal="left"]{transform:translateX(-36px)}
[data-reveal].in{opacity:1!important;transform:none!important;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}

/* ── LANDING PAGES ── */
.landing-hero{padding:calc(var(--nav-h) + 80px) var(--gutter) 72px;background:var(--c-dark2);position:relative;overflow:hidden;min-height:55vh;display:flex;align-items:flex-end}
.landing-art{position:absolute;inset:0;pointer-events:none}
.landing-body{position:relative;z-index:1}
.landing-content{max-width:900px;margin:0 auto;padding:72px var(--gutter)}
.breadcrumb{display:flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:9px;letter-spacing:.28em;color:var(--c-grey3);text-transform:uppercase;margin-bottom:24px}
.breadcrumb a{color:var(--c-mid);transition:color .3s}
.breadcrumb a:hover{color:var(--c-gold)}
.breadcrumb span{color:var(--c-gold)}
.breadcrumb-sep{color:var(--c-grey2)}
.lc-h2{font-family:var(--ff-display);font-size:clamp(26px,3.5vw,44px);font-weight:300;margin:44px 0 20px;line-height:1.2}
.lc-h2 em{font-style:italic;color:var(--c-gold)}
.lc-h3{font-family:var(--ff-display);font-size:clamp(20px,2.4vw,30px);font-weight:400;margin:32px 0 14px}
.lc-p{font-size:15px;color:var(--c-mid);line-height:1.9;margin-bottom:18px}
.lc-ul{list-style:none;margin:20px 0 28px}
.lc-ul li{font-size:14px;color:var(--c-mid);padding:12px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;align-items:flex-start;gap:12px}
.lc-ul li::before{content:'';width:18px;height:1px;background:var(--c-gold);flex-shrink:0;margin-top:10px}
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:32px 0}
.feat-box{background:var(--c-dark2);padding:28px;border-left:2px solid var(--c-gold);transition:background .3s}
.feat-box:hover{background:var(--c-dark3)}
.feat-box-t{font-family:var(--ff-display);font-size:18px;margin-bottom:8px}
.feat-box-d{font-size:12px;color:var(--c-mid);line-height:1.7}

/* Process numbered list */
.proc-list{counter-reset:proc;margin:32px 0}
.proc-list-item{display:flex;gap:24px;align-items:flex-start;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.04);counter-increment:proc}
.proc-list-item::before{content:counter(proc,decimal-leading-zero);font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;color:var(--c-gold);flex-shrink:0;padding-top:4px;min-width:24px}
.proc-list-title{font-family:var(--ff-display);font-size:18px;margin-bottom:6px}
.proc-list-desc{font-size:13px;color:var(--c-mid);line-height:1.75}

/* FAQ — smooth accordion with max-height */
.faq{margin:48px 0}
.faq-item{border-bottom:1px solid var(--c-grey1)}
.faq-q{font-family:var(--ff-display);font-size:18px;font-weight:400;padding:22px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .3s;user-select:none}
.faq-q:hover{color:var(--c-gold)}
.faq-icon{width:24px;height:24px;border:1px solid var(--c-grey2);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:border-color .3s,transform .45s var(--ease-out),background .3s;position:relative}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--c-gold);transition:transform .35s var(--ease-out),opacity .25s}
.faq-icon::before{width:10px;height:1px}
.faq-icon::after{width:1px;height:10px}
.faq-item.open .faq-icon{border-color:var(--c-gold);background:rgba(200,168,90,.08);transform:rotate(45deg)}
.faq-body{overflow:hidden;max-height:0;transition:max-height .5s var(--ease-out)}
.faq-a{font-size:14px;color:var(--c-mid);line-height:1.85;padding-bottom:24px}

.quote-block{background:var(--c-dark2);padding:40px;border-left:2px solid var(--c-gold);margin:40px 0}
.quote-block p{font-family:var(--ff-display);font-size:22px;font-weight:300;font-style:italic;line-height:1.6}
.quote-block cite{display:block;font-family:var(--ff-mono);font-size:9px;letter-spacing:.3em;color:var(--c-gold);margin-top:16px}
.cta-inline{background:var(--c-dark2);padding:48px;text-align:center;margin-top:60px;position:relative;overflow:hidden}
.cta-inline::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(200,168,90,.04) 0%,transparent 70%);pointer-events:none}
.cta-inline h3{font-family:var(--ff-display);font-size:32px;font-weight:300;margin-bottom:12px}
.cta-inline p{color:var(--c-mid);margin-bottom:28px}
.cta-inline .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.int-links{display:flex;gap:12px;flex-wrap:wrap}
.int-link{font-family:var(--ff-mono);font-size:9px;letter-spacing:.22em;color:var(--c-gold);text-transform:uppercase;padding:10px 20px;border:1px solid var(--c-grey1);transition:border-color .3s,background .3s}
.int-link:hover{border-color:var(--c-gold);background:rgba(200,168,90,.06)}

/* ── BLOG POST ── */
.post-hero{padding:calc(var(--nav-h) + 80px) var(--gutter) 60px;background:var(--c-dark2);position:relative;overflow:hidden}
.post-meta{display:flex;align-items:center;gap:20px;font-family:var(--ff-mono);font-size:9px;letter-spacing:.28em;color:var(--c-mid);text-transform:uppercase;margin-bottom:20px;flex-wrap:wrap}
.post-meta span{color:var(--c-gold)}
.post-h1{font-family:var(--ff-display);font-size:clamp(32px,5vw,68px);font-weight:300;line-height:1.1;max-width:800px}
.post-content{max-width:800px;margin:0 auto;padding:64px var(--gutter)}
.post-content h2{font-family:var(--ff-display);font-size:clamp(24px,3vw,38px);font-weight:300;margin:48px 0 18px;color:var(--c-white)}
.post-content h3{font-family:var(--ff-display);font-size:clamp(20px,2.3vw,28px);font-weight:400;margin:36px 0 14px}
.post-content p{font-size:15px;color:var(--c-mid);line-height:1.9;margin-bottom:20px}
.post-content ul{list-style:none;margin:20px 0 28px}
.post-content ul li{font-size:14px;color:var(--c-mid);padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04);display:flex;gap:12px}
.post-content ul li::before{content:'—';color:var(--c-gold);flex-shrink:0}
.post-img{width:100%;margin:36px 0;filter:saturate(.6);overflow:hidden}
.post-quote{font-family:var(--ff-display);font-size:clamp(18px,2.2vw,26px);font-style:italic;font-weight:300;padding:28px 0 28px 28px;border-left:2px solid var(--c-gold);margin:36px 0;color:var(--c-white)}
.post-cta{background:var(--c-dark2);padding:44px;text-align:center;margin-top:56px}
.post-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:48px;padding-top:32px;border-top:1px solid var(--c-grey1)}
.post-tag{font-family:var(--ff-mono);font-size:9px;letter-spacing:.2em;color:var(--c-mid);border:1px solid var(--c-grey1);padding:6px 14px;text-transform:uppercase;transition:border-color .3s,color .3s}
.post-tag:hover{border-color:var(--c-gold);color:var(--c-gold)}

/* ── VIDEO SHOWCASE (landing pages) ── */
.vid-showcase{margin:44px 0;position:relative}
.vid-showcase-frame{position:relative;background:var(--c-black);box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(200,168,90,.1)}
.vid-showcase-bars{pointer-events:none;position:absolute;inset:0;z-index:2}
.vid-bar{position:absolute;left:0;right:0;height:40px;background:var(--c-black);transition:height .7s var(--ease-film)}
.vid-bar--t{top:0;background:linear-gradient(to bottom,var(--c-black),rgba(3,3,3,.6))}
.vid-bar--b{bottom:0;background:linear-gradient(to top,var(--c-black),rgba(3,3,3,.6))}
.vid-showcase:hover .vid-bar{height:0}
.vid-showcase-screen{position:relative;width:100%;padding-bottom:56.25%;overflow:hidden;z-index:1}
.vid-showcase-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-showcase-meta{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to top,rgba(3,3,3,.8),transparent);pointer-events:none}
.vsm-tag{font-family:var(--ff-mono);font-size:8px;letter-spacing:.3em;color:rgba(200,168,90,.6);text-transform:uppercase}
.vsm-dur{font-family:var(--ff-mono);font-size:8px;letter-spacing:.2em;color:rgba(255,255,255,.4)}

/* ── ABOUT + LANDING UTILS ── */
.about-svg-wrap{position:absolute;inset:0;overflow:hidden}
.about-svg-wrap svg{width:100%;height:100%}
.landing-art-inner{position:absolute;inset:0;width:100%;height:100%}
.no-loader #loader{display:none!important}

/* ═══════════════════════════════════════════════════════
   CASE STUDY LAYOUT — reusable for HELL Energy + future campaigns
   ═══════════════════════════════════════════════════════ */

/* Hero */
.cs-hero{position:relative;min-height:90vh;display:flex;align-items:flex-end;overflow:hidden;padding:0 var(--gutter) clamp(56px,8vw,120px)}
.cs-hero-video{position:absolute;inset:0;z-index:0}
.cs-hero-video iframe,.cs-hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.cs-hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(3,3,3,.92) 0%,rgba(3,3,3,.5) 45%,rgba(3,3,3,.2) 100%)}
.cs-hero-body{position:relative;z-index:2;max-width:900px}
.cs-hero-client{font-family:var(--ff-mono);font-size:9px;letter-spacing:.42em;color:var(--c-gold);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.cs-hero-client::before{content:'';width:28px;height:1px;background:var(--c-gold)}
.cs-hero-title{font-family:var(--ff-display);font-size:clamp(36px,6vw,96px);font-weight:300;line-height:1;letter-spacing:-.01em;margin-bottom:24px}
.cs-hero-title em{font-style:italic;color:var(--c-gold)}
.cs-hero-meta{display:flex;gap:32px;flex-wrap:wrap}
.cs-hero-stat{display:flex;flex-direction:column;gap:4px}
.cs-hero-stat-n{font-family:var(--ff-display);font-size:28px;font-weight:300;color:var(--c-gold);line-height:1}
.cs-hero-stat-l{font-family:var(--ff-mono);font-size:8px;letter-spacing:.28em;color:rgba(255,255,255,.45);text-transform:uppercase}

/* Layout body */
.cs-body{max-width:1100px;margin:0 auto;padding:clamp(56px,8vw,120px) var(--gutter)}
.cs-section{margin-bottom:clamp(56px,8vw,100px)}
.cs-section-label{font-family:var(--ff-mono);font-size:9px;letter-spacing:.42em;color:var(--c-gold);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:14px}
.cs-section-label::before{content:'';width:22px;height:1px;background:var(--c-gold)}
.cs-section-title{font-family:var(--ff-display);font-size:clamp(26px,3.5vw,44px);font-weight:300;margin-bottom:20px;line-height:1.1}
.cs-section-title em{font-style:italic;color:var(--c-gold)}
.cs-p{font-size:15px;color:var(--c-mid);line-height:1.9;margin-bottom:16px;max-width:680px}

/* Two-column text block */
.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:768px){.cs-cols{grid-template-columns:1fr}}

/* Challenge block */
.cs-challenge{background:var(--c-dark2);border-left:2px solid var(--c-gold);padding:36px 40px;margin:32px 0}
.cs-challenge-q{font-family:var(--ff-display);font-size:clamp(18px,2.2vw,26px);font-style:italic;font-weight:300;color:var(--c-white);line-height:1.55}

/* Production phases grid */
.cs-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-grey1);margin:32px 0}
.cs-phase{background:var(--c-dark2);padding:32px 28px;position:relative}
.cs-phase-n{font-family:var(--ff-mono);font-size:9px;letter-spacing:.28em;color:rgba(200,168,90,.5);margin-bottom:14px}
.cs-phase-t{font-family:var(--ff-display);font-size:20px;font-weight:400;margin-bottom:10px}
.cs-phase-d{font-size:13px;color:var(--c-mid);line-height:1.75}
.cs-phase::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--c-gold);transition:width .6s var(--ease-out)}
.cs-phase:hover::after{width:100%}
@media(max-width:768px){.cs-phases{grid-template-columns:1fr}}

/* Results row */
.cs-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--c-grey1);margin:32px 0}
.cs-result{background:var(--c-black);padding:40px 32px;text-align:center}
.cs-result-n{font-family:var(--ff-display);font-size:clamp(36px,4.5vw,60px);font-weight:300;line-height:1;margin-bottom:8px;
  background:linear-gradient(120deg,#c8a85a,#e4c878,#f0dfa0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cs-result-l{font-family:var(--ff-mono);font-size:9px;letter-spacing:.28em;color:var(--c-mid);text-transform:uppercase}
@media(max-width:768px){.cs-results{grid-template-columns:1fr}}

/* Inline video */
.cs-video{margin:44px 0;position:relative}
.cs-video-frame{position:relative;width:100%;padding-bottom:56.25%;background:var(--c-black);overflow:hidden}
.cs-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-video-bars{position:absolute;inset:0;pointer-events:none;z-index:2}
.cs-video-bar{position:absolute;left:0;right:0;height:36px;background:var(--c-black);transition:height .7s var(--ease-film)}
.cs-video-bar--t{top:0}.cs-video-bar--b{bottom:0}
.cs-video:hover .cs-video-bar{height:0}

/* ═══════════════════════════════════════════════════════
   NAV MOBILE — improved active state + overlay close button
   ═══════════════════════════════════════════════════════ */
.nav-menu.nav-open li a{font-size:clamp(16px,3vw,22px);letter-spacing:.28em;position:relative;transition:color .3s,letter-spacing .4s}
.nav-menu.nav-open li a:hover,.nav-menu.nav-open li a.active{color:var(--c-gold);letter-spacing:.36em}
.nav-menu.nav-open li a.active::before{content:'—';position:absolute;left:-28px;top:50%;transform:translateY(-50%);font-family:var(--ff-mono);font-size:10px;color:var(--c-gold)}
/* Subtle scanline effect in mobile overlay for cinematic feel */
.nav-menu.nav-open::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.03) 3px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:-1}
/* Nav active state on desktop */
.nav-menu a.active{color:var(--c-gold)}
.nav-menu a.active::after{right:0}

/* ── RESPONSIVE TABLET ── */
@media(max-width:1100px){
  .pf-grid{grid-template-columns:repeat(2,1fr)}
  .logos-grid{grid-template-columns:repeat(3,1fr)}
  .srv-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .ft-main{grid-template-columns:1fr 1fr;gap:40px}
  .testi-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── RESPONSIVE MOBILE ── */
@media(max-width:768px){
  #cur-dot,#cur-ring{display:none}
  body{cursor:auto}
  button{cursor:pointer}
  .nav-menu{display:none}
  .nav-btn{display:none}
  .nav-burger{display:flex}
  .hero-stats{display:none}
  .pf-grid{grid-template-columns:1fr}
  .logos-grid{grid-template-columns:repeat(2,1fr)}
  .logo-cell{padding:24px 28px;min-height:80px}
  .logo-cell img{max-height:36px}
  .srv-grid{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:1fr}
  .modal-foot{grid-template-columns:repeat(2,1fr)}
  .proc-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr;gap:12px}
  .ft-main{grid-template-columns:1fr;gap:32px}
  .cta-btns{flex-direction:column;align-items:center}
  .testi-grid{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column;align-items:flex-start}
  .modal-box{padding:12px;align-items:flex-end}
  .cta-inline{padding:32px 24px}
  .about-visual{aspect-ratio:3/2;overflow:hidden;width:100%;max-width:100%}
  .about-visual img{object-position:center 25%}
  .about-frame{inset:0}
  .about-accent{display:none}
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  #noise{animation:none}
  .loader-glow{animation:none}
  .play-ring-lg::before{animation:none}
  .discipline-item{opacity:1!important;transform:none!important}
}

/* ── Blog article inline CTA ───────────────────────────────────────────── */
.blog-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--c-dark2);
  border-left: 2px solid var(--c-gold);
  padding: 20px 24px;
  margin-bottom: 44px;
  font-size: 14px;
  color: var(--c-mid);
  line-height: 1.65;
}
.blog-cta strong {
  color: var(--c-white);
  display: block;
  margin-top: 3px;
}
.blog-cta .btn-gold {
  padding: 10px 20px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0a0a0a !important;
}
/* ── CTA button high-contrast text — post-cta and blog-cta ── */
.post-cta .btn-gold,
.blog-cta .btn-gold {
  color: #0a0a0a !important;
}
.post-cta .btn-gold > *,
.blog-cta .btn-gold > * {
  color: #0a0a0a !important;
}
/* Ensure SVG arrow inherits dark color */
.post-cta .btn-gold svg path,
.blog-cta .btn-gold svg path {
  stroke: #0a0a0a !important;
}
@media (max-width: 580px) {
  .blog-cta { flex-direction: column; align-items: flex-start; }
}

/* ── Blog coming-soon cards ─────────────────────────────────────────────── */
.blog-card.coming-soon {
  opacity: .45;
  pointer-events: none;
  cursor: default;
  position: relative;
}
.coming-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--c-gold);
  color: #030303;
  font-family: var(--ff-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 4px 10px;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════
   GSAP FALLBACK — Ensures content is always visible
   if JavaScript or GSAP fails to load/execute.
   The .gsap-ready class is added by main.js on load.
   Without it, all animated elements default to visible.
   ═══════════════════════════════════════════════════════ */

/* When JS hasn't confirmed GSAP is running, show everything */
body:not(.gsap-ready) .hero-h1 .word {
  transform: none !important;
}
body:not(.gsap-ready) .hero-sub,
body:not(.gsap-ready) .hero-ctas,
body:not(.gsap-ready) .eyebrow-txt,
body:not(.gsap-ready) .hero-scroll {
  opacity: 1 !important;
  transform: none !important;
}
body:not(.gsap-ready) .eyebrow-line {
  transform: none !important;
}
body:not(.gsap-ready) [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
/* Ensure loader is always removable */
#loader.force-hidden {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   CINEMATIC FEATURES v1 — Four new UI enhancements
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   FEATURE 1 — Gold / Rose-Gold Glow Divider
   Usage: <div class="glow-divider"></div>
   ───────────────────────────────────────────────────── */
.glow-divider {
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  flex-shrink: 0;
  /* The base gold line */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,168,90,0.08) 10%,
    rgba(200,168,90,0.55) 30%,
    rgba(232,200,120,0.9) 50%,
    rgba(200,168,90,0.55) 70%,
    rgba(200,168,90,0.08) 90%,
    transparent 100%
  );
}
/* Soft diffuse glow layer below the line */
.glow-divider::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(
    90deg,
    transparent 10%,
    rgba(200,168,90,0.12) 30%,
    rgba(232,200,120,0.3) 50%,
    rgba(200,168,90,0.12) 70%,
    transparent 90%
  );
  filter: blur(3px);
  pointer-events: none;
}
/* Moving shimmer highlight */
.glow-divider::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -55%;
  width: 55%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(240,215,160,0.0) 20%,
    rgba(255,240,190,0.95) 50%,
    rgba(240,215,160,0.0) 80%,
    transparent 100%
  );
  filter: blur(1.5px);
  animation: glow-shimmer 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: var(--shimmer-delay, 0s);
}
@keyframes glow-shimmer {
  0%   { left: -55%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
/* Rose-gold variant */
.glow-divider.rose {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180,120,100,0.08) 10%,
    rgba(210,150,120,0.55) 30%,
    rgba(240,180,150,0.9) 50%,
    rgba(210,150,120,0.55) 70%,
    rgba(180,120,100,0.08) 90%,
    transparent 100%
  );
}
.glow-divider.rose::before {
  background: linear-gradient(
    90deg,
    transparent 10%,
    rgba(210,150,120,0.12) 30%,
    rgba(240,180,150,0.25) 50%,
    rgba(210,150,120,0.12) 70%,
    transparent 90%
  );
}
.glow-divider.rose::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,200,180,0.0) 20%,
    rgba(255,220,200,0.9) 50%,
    rgba(255,200,180,0.0) 80%,
    transparent 100%
  );
}

/* ─────────────────────────────────────────────────────
   FEATURE 2 — Cinematic Text Reveal
   Usage:
     <h2 class="cinematic-reveal">
       <span class="reveal-line">Line one</span>
       <span class="reveal-line">Line two</span>
     </h2>
   ───────────────────────────────────────────────────── */
.cinematic-reveal {
  overflow: visible;
}
.cinematic-reveal .reveal-line {
  display: block;
  overflow: hidden;
  /* Each line clips its inner span during animation */
}
.cinematic-reveal .reveal-line-inner {
  display: block;
  will-change: transform, opacity;
}
/* Pre-animation state (GSAP sets these via JS, these are fallbacks) */
body:not(.gsap-ready) .cinematic-reveal .reveal-line-inner {
  opacity: 1 !important;
  transform: none !important;
}

/* ─────────────────────────────────────────────────────
   FEATURE 3 — Production Workflow Timeline
   ───────────────────────────────────────────────────── */
.workflow-timeline-sec {
  padding: var(--section-y) var(--gutter);
  overflow: hidden;
}
/* Timeline track (the horizontal line + fill) */
.wf-timeline {
  position: relative;
  margin-top: 72px;
}
.wf-track {
  position: absolute;
  top: 22px; /* align with node center */
  left: calc(var(--gutter) * 0 + 22px);
  right: calc(var(--gutter) * 0 + 22px);
  height: 1px;
  pointer-events: none;
}
.wf-line-bg {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.07);
}
.wf-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--c-gold) 0%,
    var(--c-gold2) 60%,
    var(--c-gold3) 100%
  );
  box-shadow: 0 0 10px rgba(200,168,90,0.5), 0 0 24px rgba(200,168,90,0.2);
  will-change: width;
}
/* The four steps container */
.wf-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
/* Individual step */
.wf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  position: relative;
}
/* Node: outer ring + inner dot */
.wf-node {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  flex-shrink: 0;
}
.wf-node-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(200,168,90,0.25);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.wf-node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(200,168,90,0.3);
  transition: background 0.6s ease, box-shadow 0.6s ease;
  position: relative;
  z-index: 1;
}
/* Illuminated state (added by JS) */
.wf-step.lit .wf-node-ring {
  border-color: var(--c-gold);
  box-shadow:
    0 0 0 4px rgba(200,168,90,0.08),
    0 0 18px rgba(200,168,90,0.35),
    0 0 40px rgba(200,168,90,0.12);
}
.wf-step.lit .wf-node-dot {
  background: var(--c-gold);
  box-shadow: 0 0 10px rgba(200,168,90,0.7), 0 0 22px rgba(200,168,90,0.4);
}
/* Node pulse ring animation when lit */
.wf-node::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid transparent;
  opacity: 0;
}
.wf-step.lit .wf-node::before {
  border-color: rgba(200,168,90,0.2);
  opacity: 1;
  animation: node-pulse 2.4s ease-out infinite;
}
@keyframes node-pulse {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}
/* Step text content */
.wf-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.wf-step.lit .wf-content {
  opacity: 1;
  transform: translateY(0);
}
.wf-num {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.35em;
  color: rgba(200,168,90,0.5);
  margin-bottom: 8px;
}
.wf-title {
  font-family: var(--ff-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--c-white);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.wf-desc {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--c-mid);
  line-height: 1.7;
  max-width: 160px;
  margin: 0 auto;
}
/* Responsive — stack vertically on mobile */
@media (max-width: 860px) {
  .wf-steps {
    grid-template-columns: 1fr 1fr;
    gap: 48px 0;
  }
  .wf-track {
    display: none;
  }
  .wf-timeline {
    margin-top: 48px;
  }
}
@media (max-width: 500px) {
  .wf-steps {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }
}

/* ─────────────────────────────────────────────────────
   FEATURE 4 — Cinematic Scroll Color Grading
   Fixed overlay driven by GSAP ScrollTrigger
   ───────────────────────────────────────────────────── */
#cinematic-grade {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;              /* above page content, below nav/cursor/modal */
  opacity: 0;
  background: transparent;
  will-change: opacity, background-color;
  mix-blend-mode: multiply;
  transition: none;        /* GSAP animates this, no CSS transitions */
}

/* Fallback: no overlay if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  #cinematic-grade { display: none !important; }
  .glow-divider::after { animation: none !important; }
  .wf-step.lit .wf-node::before { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   CINEMATIC UPGRADE v2 — Features 1–8
   All additive. No existing rules overwritten.
   ═══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   FEATURE 1 — Cinematic Spotlight Sweep
   A soft glowing bar drifts horizontally across target
   elements. Driven by GSAP; this CSS just defines the
   pseudo-element and its gradient shape.
   ────────────────────────────────────────────────────── */
.spotlight-host {
  position: relative;
  overflow: hidden; /* clip the sweep to the element box */
}
.spotlight-host::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 180%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(200,168,90,.04) 30%,
    rgba(220,190,110,.13) 50%,
    rgba(200,168,90,.04) 70%,
    transparent 100%
  );
  transform: skewX(-15deg);
  pointer-events: none;
  z-index: 1;
  /* GSAP will animate `left` from -60% to 130% on repeat */
  will-change: left;
}
/* Make sure text content stays above the sweep */
.spotlight-host > * {
  position: relative;
  z-index: 2;
}

/* ──────────────────────────────────────────────────────
   FEATURE 2 — Cinematic Text Reveal (line mask)
   Wraps each word/line in a clip container so the text
   slides up from behind an invisible curtain.
   ────────────────────────────────────────────────────── */
.c-reveal-wrap {
  overflow: hidden;
  display: block;
  line-height: 1.15;
}
.c-reveal-inner {
  display: block;
  /* GSAP sets initial y: 100% then animates to 0 */
  will-change: transform, opacity;
}
/* No-JS / pre-GSAP fallback: show text normally */
body:not(.gsap-ready) .c-reveal-inner {
  transform: none !important;
  opacity: 1 !important;
}

/* ──────────────────────────────────────────────────────
   FEATURE 3 — Depth Parallax Layers
   Each layer gets a will-change hint; GSAP drives the
   actual translateY values via ScrollTrigger scrub.
   ────────────────────────────────────────────────────── */
.parallax-bg   { will-change: transform; }
.parallax-mid  { will-change: transform; }
.parallax-fore { will-change: transform; }

/* Hero specific depth layers */
.hero-video-wrapper { will-change: transform; }
.hero-body          { will-change: transform; }
.hero-stats         { will-change: transform; }

/* ──────────────────────────────────────────────────────
   FEATURE 5 — Portfolio Hover Enhancement
   Light sweep + cinematic shadow + scale on .pf-card
   ────────────────────────────────────────────────────── */
.pf-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(200,168,90,.07) 45%,
    rgba(220,195,120,.18) 55%,
    rgba(200,168,90,.07) 65%,
    transparent 100%
  );
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 7;   /* FIXED: was 3 — unified with second definition; below pf-info (z:8) */
  opacity: 0;
  transition: opacity .25s ease;
  will-change: left, opacity;
}
@media (hover: hover) {
  .pf-card:hover::before {
    opacity: 1;
    /* GSAP JS also runs a one-shot sweep on mouseenter */
  }
  .pf-card:hover {
    box-shadow:
      0 0 0 1px rgba(200,168,90,.18),
      0 24px 60px rgba(0,0,0,.6),
      0 4px 20px rgba(200,168,90,.08);
    transform: scale(1.025);
    transition: transform .45s cubic-bezier(.25,.46,.45,.94),
                box-shadow .45s cubic-bezier(.25,.46,.45,.94);
  }
}
/* ──────────────────────────────────────────────────────
   FEATURE 6 — 3D Tilt REMOVED
   Replaced with flat scale + shadow hover on service cards.
   No 3D transforms, no perspective, no rotateX/Y.
   ────────────────────────────────────────────────────── */
/* Service cards: flat scale + glow shadow on hover */
@media (hover: hover) {
  .srv-card:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow:
      0 0 0 1px rgba(200,168,90,.14),
      0 20px 48px rgba(0,0,0,.55),
      0 4px 16px rgba(200,168,90,.07);
  }
}
.srv-card {
  transition:
    transform .4s cubic-bezier(.25,.46,.45,.94),
    box-shadow .4s cubic-bezier(.25,.46,.45,.94),
    background .5s var(--ease-film);
}

/* ──────────────────────────────────────────────────────
   FEATURE 7 — Cinematic Section Divider (glow line)
   Existing .glow-divider gets an enhanced shimmer.
   New class .glow-divider-v2 for extra placements.
   ────────────────────────────────────────────────────── */
.glow-divider-v2 {
  position: relative;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,168,90,.35) 20%,
    rgba(220,190,110,.7) 50%,
    rgba(200,168,90,.35) 80%,
    transparent 100%
  );
  overflow: visible;
  margin: 0;
}
.glow-divider-v2::before {
  content: '';
  position: absolute;
  inset: -3px 0;
  background: inherit;
  filter: blur(6px);
  opacity: .55;
}
.glow-divider-v2::after {
  content: '';
  position: absolute;
  top: 0;
  left: -20%;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,220,130,.9),
    transparent
  );
  animation: shimmer-v2 4s ease-in-out infinite;
  animation-delay: var(--shimmer-delay, 0s);
}
@keyframes shimmer-v2 {
  0%   { left: -30%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* Rose-gold variant */
.glow-divider-v2.rose {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180,100,80,.3) 20%,
    rgba(200,130,100,.55) 50%,
    rgba(180,100,80,.3) 80%,
    transparent 100%
  );
}
.glow-divider-v2.rose::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(220,160,130,.85),
    transparent
  );
}

/* Enhanced existing glow-divider shimmer pulse */
.glow-divider {
  transition: opacity .4s ease;
}

/* ──────────────────────────────────────────────────────
   FEATURE 8 — Cinematic Workflow Timeline v2
   This is an enhanced version that replaces/augments the
   existing .wf- classes with richer visual treatment.
   Uses a vertical layout for better cinematic feel.
   ────────────────────────────────────────────────────── */
.wf2-section {
  padding: var(--section-y) var(--gutter);
  position: relative;
  overflow: hidden;
}

/* Background film-frame texture lines */
.wf2-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(200,168,90,.025) 39px,
      rgba(200,168,90,.025) 40px
    );
  pointer-events: none;
}

.wf2-grid {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  max-width: 920px;
  margin: 72px auto 0;
  position: relative;
}

/* Central spine line */
.wf2-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.wf2-spine-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(to bottom, transparent, rgba(200,168,90,.15) 10%, rgba(200,168,90,.15) 90%, transparent);
  position: relative;
}
.wf2-spine-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, rgba(200,168,90,1), rgba(220,180,80,.75));
  box-shadow: 0 0 6px rgba(200,168,90,.7), 0 0 16px rgba(200,168,90,.35);
  will-change: height;
}

/* Step rows — alternate left/right */
.wf2-steps {
  display: contents; /* Let children participate in the grid */
}

.wf2-step-left,
.wf2-step-right {
  padding: 0 0 72px;
  opacity: 0;  /* animated in by GSAP */
  will-change: opacity, transform;
}
.wf2-step-left  { text-align: right; padding-right: 36px; }
.wf2-step-right { text-align: left;  padding-left: 36px;  }
/* Empty opposite cells */
.wf2-step-empty { padding-bottom: 72px; }

.wf2-node-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 72px;
}
.wf2-node {
  width: 20px;            /* slightly larger for visibility */
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,168,90,.35);
  background: var(--c-black);
  position: relative;
  flex-shrink: 0;
  transition: border-color .5s ease, box-shadow .5s ease, background .5s ease;
  z-index: 2;
}
.wf2-node::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(200,168,90,.15);
  transition: background .5s ease, box-shadow .5s ease;
}
.wf2-node.lit {
  border-color: var(--c-gold);
  background: rgba(200,168,90,.06);
  box-shadow:
    0 0 0 5px rgba(200,168,90,.1),
    0 0 18px rgba(200,168,90,.45),
    0 0 40px rgba(200,168,90,.2);
}
.wf2-node.lit::after {
  background: var(--c-gold);
  box-shadow: 0 0 14px rgba(200,168,90,.8), 0 0 28px rgba(200,168,90,.4);
}
/* Pulse animation on active node */
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(200,168,90,.1), 0 0 18px rgba(200,168,90,.45), 0 0 40px rgba(200,168,90,.2); }
  50%       { box-shadow: 0 0 0 8px rgba(200,168,90,.08), 0 0 28px rgba(200,168,90,.6), 0 0 55px rgba(200,168,90,.28); }
}
.wf2-node.lit {
  animation: node-pulse 2.4s ease-in-out infinite;
}

.wf2-step-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--c-gold);
  opacity: .9;          /* was .65 — increased for readability */
  margin-bottom: 12px;
}
.wf2-step-title {
  font-family: var(--ff-display);
  font-size: clamp(30px, 3.5vw, 40px);   /* was 22–32px */
  font-weight: 400;                        /* slightly bolder */
  color: #ffffff;                          /* pure white, not var(--c-white) which may be dimmed */
  line-height: 1.1;
  margin-bottom: 14px;
  text-shadow: 0 1px 12px rgba(0,0,0,.6); /* lift from dark bg */
}
.wf2-step-desc {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.5vw, 17px);   /* was 13px */
  letter-spacing: .025em;
  color: rgba(220,215,205,.85);           /* warm near-white, was grey2 */
  line-height: 1.65;                       /* was 1.7 — still excellent */
  max-width: 300px;                        /* slightly wider */
}
.wf2-step-left .wf2-step-desc {
  margin-left: auto;
}

/* Mobile: single column */
@media (max-width: 700px) {
  .wf2-grid {
    grid-template-columns: 24px 1fr;
    margin-top: 48px;
  }
  .wf2-step-left,
  .wf2-step-right,
  .wf2-step-empty {
    grid-column: 2;
    text-align: left;
    padding-left: 20px;
    padding-right: 0;
  }
  .wf2-node-col {
    grid-column: 1;
  }
  .wf2-step-left .wf2-step-desc { margin-left: 0; }
}

/* ──────────────────────────────────────────────────────
   Reduced motion — disable all new animations
   ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .spotlight-host::after,
  .glow-divider-v2::after { animation: none !important; }
  .pf-card { transition: none !important; }
  .srv-card { transition: none !important; }
  .wf2-step-left,
  .wf2-step-right { opacity: 1 !important; transform: none !important; }
  .wf2-node.lit { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   CINEMATIC UPGRADE v3
   ═══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   PORTFOLIO — Cinematic gradient headline
   ────────────────────────────────────────────────────── */
.pf-cinema-headline-wrap {
  padding: 0 var(--gutter) 20px;
  overflow: hidden;
}
.pf-cinema-headline {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(52px, 8vw, 96px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  /* rose-gold → gold → warm white gradient */
  background: linear-gradient(
    100deg,
    #c07858 0%,
    #c8a85a 30%,
    #e8d49a 58%,
    #fff8ee 75%,
    #c8a85a 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: headline-shine 6s linear infinite;
  /* subtle glow via text-shadow workaround on wrapper */
  filter: drop-shadow(0 0 28px rgba(200,168,90,.18));
  will-change: background-position;
}
@keyframes headline-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ──────────────────────────────────────────────────────
   WORKFLOW v3 — left title / right steps layout
   ────────────────────────────────────────────────────── */
.wf3-section {
  position: relative;
  overflow: hidden;
  padding: calc(var(--section-y) * 1.2) 0;
}

/* Ambient particle canvas — fills the section */
.wf3-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

/* Two-column layout */
.wf3-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  align-items: start;
}

/* LEFT sticky title */
.wf3-left {
  position: sticky;
  top: calc(var(--nav-h) + 48px);
  padding-bottom: 64px;
}
.wf3-heading {
  font-family: var(--ff-display);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--c-white);
  margin: 24px 0 20px;
}
.wf3-heading em {
  font-style: italic;
  color: var(--c-gold);
}
.wf3-left-sub {
  font-size: 14px;
  color: var(--c-grey2);
  line-height: 1.7;
  letter-spacing: .03em;
  max-width: 320px;
  opacity: .75;
}

/* RIGHT steps column */
.wf3-right {
  position: relative;
  padding: 8px 0 64px 48px;
}

/* Spine — vertical gold line */
.wf3-spine {
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 20px;
  width: 1px;
  pointer-events: none;
}
.wf3-spine-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    transparent,
    rgba(200,168,90,.18) 8%,
    rgba(200,168,90,.18) 92%,
    transparent
  );
}
.wf3-spine-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;            /* GSAP animates this */
  background: linear-gradient(to bottom,
    rgba(200,168,90,.9),
    rgba(215,175,80,.6)
  );
  box-shadow: 0 0 8px rgba(200,168,90,.7), 0 0 20px rgba(200,168,90,.3);
  will-change: height;
  border-radius: 1px;
}

/* Individual step */
.wf3-step {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 0 0 64px;
  position: relative;
  /* GSAP sets initial opacity + x */
  opacity: 0;
  transform: translateX(28px);
  will-change: opacity, transform;
}
body:not(.gsap-ready) .wf3-step {
  opacity: 1;
  transform: none;
}

/* Node */
.wf3-node {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: -12px;   /* centres on the spine line */
  margin-top: 6px;
}
.wf3-node-core {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(200,168,90,.25);
  transition: background .5s ease;
}
.wf3-node-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(200,168,90,.35);
  transition: border-color .5s ease, box-shadow .5s ease;
}
.wf3-node-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,90,.35) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

/* Lit state (added by JS) */
.wf3-step.lit .wf3-node-core {
  background: var(--c-gold);
  box-shadow: 0 0 10px rgba(200,168,90,.8), 0 0 24px rgba(200,168,90,.4);
}
.wf3-step.lit .wf3-node-ring {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(200,168,90,.12), 0 0 16px rgba(200,168,90,.4);
}
.wf3-step.lit .wf3-node-glow {
  opacity: 1;
  animation: glow-pulse 2.8s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { transform: scale(1);   opacity: .9; }
  50%       { transform: scale(1.3); opacity: .5; }
}

/* Step content */
.wf3-content { flex: 1; }
.wf3-num {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--c-gold);
  margin-bottom: 10px;
  opacity: .9;
}
.wf3-title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 14px;
  text-shadow: 0 1px 16px rgba(0,0,0,.7);
}
.wf3-desc {
  font-size: clamp(15px, 1.4vw, 17px);
  color: rgba(218,212,200,.88);
  line-height: 1.65;
  letter-spacing: .02em;
  max-width: 420px;
}

/* Divider line between steps (decorative) */
.wf3-step:not(:last-child) .wf3-content::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: rgba(200,168,90,.2);
  margin-top: 32px;
}

/* Mobile */
@media (max-width: 860px) {
  .wf3-layout {
    grid-template-columns: 1fr;
    gap: 56px 0;
  }
  .wf3-left {
    position: static;
    padding-bottom: 0;
  }
  .wf3-right {
    padding-left: 40px;
  }
}
@media (max-width: 520px) {
  .wf3-step { gap: 20px; }
  .wf3-right { padding-left: 28px; }
  .pf-cinema-headline { letter-spacing: -.03em; }
}

/* ──────────────────────────────────────────────────────
   Reduced motion overrides
   ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pf-cinema-headline { animation: none !important; }
  .wf3-step.lit .wf3-node-glow { animation: none !important; opacity: .6 !important; }
  .wf3-step { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════
   VISION STUDIO — UPGRADE v7
   Task 1–6: Clickable Cards, Title Overlay, Hover, Video Preview,
   Case Study Layout, Performance
   ═══════════════════════════════════════════════════════ */

/* ── TASK 1 — Full service card clickable ────────────── */
a.srv-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* Suppress nested link pointer cursor (srv-link becomes span) */
a.srv-card .srv-link {
  pointer-events: none;
}

/* ── TASK 2 — Cinematic title overlay ─────────────────────
   Always visible in default state. Fades on hover so pf-info
   can take over. Position: bottom-left, large gold gradient.
────────────────────────────────────────────────────────────── */
.pf-title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6;
  padding: 60px 22px 22px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(3,3,3,.96) 0%,
    rgba(3,3,3,.7) 40%,
    rgba(3,3,3,.2) 75%,
    transparent 100%
  );
  opacity: 1;
  transition: opacity .5s var(--ease-film);
}
@media (hover: hover) {
  .pf-card:hover .pf-title-overlay { opacity: 0; }
}
@media (hover: none) {
  /* Touch: keep overlay visible since pf-info is always shown */
  .pf-title-overlay { display: none; }
}

.pf-overlay-client {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: .42em;
  color: rgba(200,168,90,.65);
  text-transform: uppercase;
  margin-bottom: 7px;
}

.pf-overlay-title {
  font-family: var(--ff-display);
  font-size: clamp(20px, 2.8vw, 40px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: .01em;
  /* Cinematic gold → warm white gradient */
  background: linear-gradient(
    115deg,
    #c07858 0%,
    #c8a85a 22%,
    #e8d49a 52%,
    #fff8ee 70%,
    #c8a85a 100%
  );
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Soft cinematic glow */
  filter: drop-shadow(0 2px 24px rgba(200,168,90,.55));
  animation: cinematic-title-shine 8s linear infinite;
  will-change: background-position;
}
@keyframes cinematic-title-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 240% center; }
}
/* Glow intensifies when video is revealed */
.pf-card.preview-playing .pf-overlay-title {
  filter: drop-shadow(0 2px 32px rgba(200,168,90,.8));
}

/* ── TASK 4 — Cinematic dark veil (new) ─────────────────────
   A near-opaque dark layer that sits above the thumbnail SVG
   and Vimeo iframe. Fades out on hover to reveal the video.
────────────────────────────────────────────────────────────── */
.pf-dark-veil {
  position: absolute;
  inset: 0;
  /* Rich cinematic black — like a dark cinema screen */
  background: rgba(4,4,4,0.78);
  z-index: 2;   /* FIXED: was 3 — was always covering pf-vimeo-preview (z:2) */
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(.25,.46,.45,.94);
  will-change: opacity;
}
@media (hover: hover) {
  /* Veil fades on hover — video reveals underneath */
  .pf-card:hover .pf-dark-veil {
    opacity: 0;
  }
}

/* ── TASK 4 — Vimeo iframe preview (hover-loaded) ──────────
   Created by JS on mouseenter. Zero iframes exist at page load.
   Fills the card exactly. Vimeo background=1 makes it fill+crop.
────────────────────────────────────────────────────────────── */
.pf-vimeo-preview {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
  pointer-events: none;
  z-index: 5; /* above dark-veil(z:2), ::after gradient(z:4) — below UI overlays(z:6-8) */
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: opacity;
}
.pf-vimeo-preview.playing {
  opacity: 1;
}

/* ── TASK 4 — Light sweep on hover ─────────────────────── */
.pf-hover-sweep {
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(200,168,90,.07) 40%,
    rgba(220,195,120,.2) 55%,
    rgba(200,168,90,.07) 70%,
    transparent 100%
  );
  transform: skewX(-10deg);
  pointer-events: none;
  z-index: 7;   /* FIXED: was 9 — was covering pf-info/pf-play-btn (z:8) */
  opacity: 0;
  will-change: left, opacity;
}

/* ── TASK 4 — "▶ PREVIEW" badge ─────────────────────────── */
.pf-preview-badge {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: .32em;
  color: rgba(200,168,90,.85);
  background: rgba(3,3,3,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(200,168,90,.28);
  padding: 5px 14px;
  text-transform: uppercase;
  z-index: 10;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .pf-card:hover .pf-preview-badge.active {
    opacity: 1;
  }
}
/* Mobile tap: badge always visible when tap-previewing */
@media (hover: none) {
  .pf-card.tap-previewing .pf-preview-badge {
    opacity: 1;
  }
  .pf-card.tap-previewing .pf-preview-badge.active {
    opacity: 1;
    background: rgba(200,168,90,.18);
    border-color: rgba(200,168,90,.6);
    color: var(--c-gold);
  }
}

/* ── TASK 4 — Scanline, top bar, play btn — z-index fixes ── */
.pf-scanline   { z-index: 5; }
.pf-top        { z-index: 8; }
.pf-play-btn   { z-index: 8; }
.pf-info       { z-index: 7; }

/* ── TASK 4 — SVG thumbnail base layer ─────────────────── */
.pf-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  /* In default state, dim the placeholder art */
  filter: brightness(.55) saturate(.5);
  transition: filter .6s ease;
}
@media (hover: hover) {
  .pf-card.preview-playing .pf-thumb-img {
    filter: brightness(.3) saturate(.3);
  }
}

/* ── TASK 6 — Performance: lazy loading helpers ─────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity .6s ease;
}
img[loading="lazy"].loaded {
  opacity: 1;
}
.lazy-img-wrap {
  background: var(--c-dark2);
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════
   CINEMATIC VIDEO PREVIEW — Final Overrides
   Consolidates conflicting pf-card rules from v2/v3/v7.
   These rules take precedence by source order.
   ═══════════════════════════════════════════════════════ */

/* ── pf-card: reset all conflicting hover transforms ─── */
.pf-card {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--c-dark3);
  cursor: pointer;
  transition:
    transform .5s cubic-bezier(.25,.46,.45,.94),
    box-shadow .5s cubic-bezier(.25,.46,.45,.94);
}
@media (hover: hover) {
  .pf-card:hover {
    transform: scale(1.03);
    box-shadow:
      0 0 0 1px rgba(200,168,90,.22),
      0 28px 64px rgba(0,0,0,.72),
      0 6px 22px rgba(200,168,90,.1);
    z-index: 2;
  }
}

/* ── pf-card::before: light sweep ──────────────────────
   Used by v2 initPortfolioHoverSweep (GSAP-animated),
   reset here so it doesn't affect default state.           */
.pf-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(200,168,90,.06) 45%,
    rgba(220,195,120,.16) 55%,
    rgba(200,168,90,.06) 65%,
    transparent 100%
  );
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 7;   /* FIXED: was 10 — unified with first definition; below pf-info (z:8) */
  opacity: 0;
  transition: opacity .2s ease;
  will-change: left, opacity;
}
@media (hover: hover) {
  .pf-card:hover::before {
    opacity: 1;
  }
}

/* ── pf-card::after: readability gradient (hover only) ─
   Sits ABOVE the dark veil (z-index 4 vs veil's 3).
   Provides a bottom-to-top gradient so pf-info text
   is always readable over the playing video.               */
.pf-card::after {
  z-index: 4;
  background: linear-gradient(
    to top,
    rgba(3,3,3,.9) 0%,
    rgba(3,3,3,.5) 38%,
    rgba(3,3,3,.15) 65%,
    transparent 100%
  );
}

/* ── Z-index stack (lowest to highest) ───────────────── */
/* z:1  pf-thumb-img      — thumbnail image               */
/* z:2  pf-dark-veil      — cinematic dark overlay        */
/* z:3  (unused)                                          */
/* z:4  pf-card::after    — readability gradient on hover */
/* z:5  pf-vimeo-preview  — hover preview iframe          */
/* z:6  pf-scanline, pf-title-overlay                     */
/* z:7  pf-card::before (sweep), pf-info                  */
/* z:8  pf-top, pf-play-btn                               */
.pf-vimeo-preview  { z-index: 5; }
.pf-scanline       { z-index: 6; }
.pf-title-overlay  { z-index: 6; }
/* pf-card::before / pf-hover-sweep  z-index 7 (GSAP sweep, below UI) */

/* When a preview iframe is active: suppress the ::after gradient
   so the video is fully visible (gradient is still needed for
   the play button overlay readability, so keep it at 25% opacity) */
.pf-card.is-previewing::after {
  opacity: 0.15 !important;
  transition: opacity 0.5s ease !important;
}
/* Also suppress the dark veil (handled by JS, this is a CSS fallback) */
.pf-card.is-previewing .pf-dark-veil {
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
}

/* ── pf-top / pf-info / pf-play-btn above everything ── */
.pf-top      { z-index: 8; }
.pf-info     { z-index: 8; }
.pf-play-btn { z-index: 8; }
.pf-scanline { z-index: 5; }

/* ── Title overlay sits above veil (z-index > 3) ─────── */
.pf-title-overlay { z-index: 6; }

/* ── Ensure pf-info gradient is visible on hover video ─ */
.pf-info {
  background: transparent; /* gradient comes from ::after */
}

/* ── Reduced motion: disable preview animations ──────── */
@media (prefers-reduced-motion: reduce) {
  .pf-dark-veil         { transition: none !important; }
  .pf-vimeo-preview     { transition: none !important; }
  .pf-title-overlay     { transition: none !important; }
  .pf-overlay-title     { animation: none !important; }
  .cinematic-title-shine { animation: none !important; }
  .pf-card              { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════
   VISION STUDIO — CINEMATIC UPGRADE v8
   Tasks: Featured Case Study · Showreel · Logo Marquee
          Stats Luxury Board · Workflow Fix · Microinteractions
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   TASK 2 — FEATURED CASE STUDY SECTION
   Full-width cinematic still with gold headline + result pills
   ───────────────────────────────────────────────────── */
.featured-case {
  position: relative;
  min-height: clamp(480px, 60vw, 780px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--section-y) var(--gutter);
}

/* Cinematic multi-layer background */
.fc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fc-bg-noise {
  position: absolute;
  inset: 0;
  /* Deep amber-black gradient, evokes Hell Energy neon-noir aesthetic */
  background:
    radial-gradient(ellipse 90% 80% at 60% 40%, rgba(200,120,20,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(200,168,90,0.12) 0%, transparent 55%),
    linear-gradient(160deg, #020202 0%, #0a0805 40%, #040402 100%);
}
.fc-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(3,3,3,0.92) 0%,
    rgba(3,3,3,0.72) 45%,
    rgba(3,3,3,0.85) 100%
  );
}
.fc-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.75) 100%);
}

/* Animated scanline texture over bg */
.fc-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.025) 2px,
    rgba(0,0,0,0.025) 4px
  );
  pointer-events: none;
  opacity: 0.5;
}

/* Main content wrapper */
.fc-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
  /* Reveal: set by JS via .fc-revealed */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.fc-inner.fc-revealed {
  opacity: 1;
  transform: none;
}

/* Label row */
.fc-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 28px;
}

/* Giant headline */
.fc-title {
  font-family: var(--ff-display);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  color: var(--c-white);
}
.fc-title-brand {
  display: block;
  /* Cinematic gold → rose-gold gradient */
  background: linear-gradient(
    115deg,
    #c07040 0%,
    #c8a85a 20%,
    #f0d890 48%,
    #e8c860 65%,
    #c8a85a 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fc-title-shine 7s linear infinite;
  will-change: background-position;
  filter: drop-shadow(0 2px 32px rgba(200,168,90,0.5));
}
.fc-title em {
  font-style: italic;
  -webkit-text-fill-color: var(--c-white);
  filter: none;
  color: var(--c-white);
  opacity: 0.85;
}
@keyframes fc-title-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}

/* Story text */
.fc-story {
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--c-light);
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto 40px;
  opacity: 0.85;
}

/* Result pills row */
.fc-results {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.fc-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(200,168,90,0.08);
  border: 1px solid rgba(200,168,90,0.3);
  padding: 16px 28px;
  position: relative;
  overflow: hidden;
  transition: background 0.4s var(--ease-out), border-color 0.4s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fc-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,168,90,0.06), transparent);
}
.fc-pill:hover {
  background: rgba(200,168,90,0.14);
  border-color: rgba(200,168,90,0.6);
}
.fc-pill-n {
  font-family: var(--ff-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  line-height: 1;
  background: linear-gradient(115deg, #c8a85a, #e4c878, #f0dfa0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  z-index: 1;
}
.fc-pill-l {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 0.3em;
  color: rgba(200,168,90,0.65);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* CTA button spacing */
.fc-cta {
  margin-top: 4px;
}

/* Corner film-frame decorations */
.fc-frame-tl,
.fc-frame-br {
  position: absolute;
  z-index: 1;
  width: 60px;
  height: 60px;
  pointer-events: none;
}
.fc-frame-tl {
  top: clamp(20px, 4vw, 56px);
  left: clamp(20px, 4vw, 56px);
  border-top: 1px solid rgba(200,168,90,0.35);
  border-left: 1px solid rgba(200,168,90,0.35);
}
.fc-frame-br {
  bottom: clamp(20px, 4vw, 56px);
  right: clamp(20px, 4vw, 56px);
  border-bottom: 1px solid rgba(200,168,90,0.35);
  border-right: 1px solid rgba(200,168,90,0.35);
}
/* Animated scan bar */
.fc-scanbar {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  top: -1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,90,0.4), transparent);
  animation: fc-scan 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes fc-scan {
  0%   { top: 0;    opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (max-width: 640px) {
  .fc-results { gap: 8px; }
  .fc-pill    { padding: 12px 18px; }
}

/* ─────────────────────────────────────────────────────
   PREMIUM BRAND WALL — Cinematic moving logo marquee
   Infinite horizontal scroll, grayscale → color on hover
   ───────────────────────────────────────────────────── */

/* Section sizing — overridden by vs-final.css */
.logos-section {
  /* padding now controlled by vs-final.css !important rules */
}

/* Gold accent lines — top and bottom of marquee area */
.marquee-gold-line {
  height: 1px;
  background: rgba(212,175,55,0.4);
  margin: 0;
  position: relative;
  z-index: 3;
}
.marquee-gold-line--top {
  margin-top: clamp(40px, 5vw, 64px);
}
.marquee-gold-line--bottom {
  margin-top: 0;
}

/* Marquee viewport */
.marquee-wall {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px) 0;
  background: transparent;
}

/* Edge gradient masks — soft fade to hide scroll seam */
.marquee-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(80px, 10vw, 180px);
  z-index: 2;
  pointer-events: none;
}
.marquee-fade--l {
  left: 0;
  background: linear-gradient(to right, var(--c-black) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
}
.marquee-fade--r {
  right: 0;
  background: linear-gradient(to left, var(--c-black) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
}

/* The scrolling track — two identical sets for seamless infinite loop */
.marquee-track {
  display: flex;
  align-items: center;
  gap: 0;
  animation: marquee-scroll 32s linear infinite;
  will-change: transform;
  width: max-content;
}

/* Animation runs continuously — no hover pause */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none !important;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}

/* Seamless loop keyframes — translate by exactly half (one full set) */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* One set of logos */
.marquee-set {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-shrink: 0;
  padding: 0 30px;
}

/* Individual logo item wrapper */
.marquee-logo {
  width: 250px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: default;
  transition: background 0.3s ease;
  flex-shrink: 0;
}
.marquee-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 4px;
}
@media (hover: hover) {
  .marquee-logo:hover::before {
    opacity: 1;
  }
}

/* Logo image — white silhouette default, original color on hover */
.marquee-logo img,
.marquee-logo svg {
  max-width: 170px;
  max-height: 65px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  will-change: opacity, filter;
}

@media (hover: hover) {
  .marquee-logo:hover img,
  .marquee-logo:hover svg {
    filter: none;
    opacity: 1;
    transform: scale(1.06);
  }
}

/* ─────────────────────────────────────────────────────
   TASK 4 — CINEMATIC SHOWREEL SECTION
   Full-width video, auto-play muted on scroll enter,
   centered play button, SHOWREEL 2025 overlay label
   ───────────────────────────────────────────────────── */
.showreel-sec {
  background: var(--c-black);
  padding: clamp(48px, 8vw, 100px) 0;
}
.showreel-inner {
  padding: 0 var(--gutter);
  max-width: 1600px;
  margin: 0 auto;
}

/* Outer frame — clip and reveal on scroll */
.showreel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-dark3);
  /* Reveal clip-path animation driven by JS */
  clip-path: inset(6% 4% round 0px);
  transition: clip-path 1.2s var(--ease-film);
}
.showreel-frame.revealed {
  clip-path: inset(0% 0% round 0px);
}

/* Video element */
.showreel-video {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
  pointer-events: none;
  object-fit: cover;
}

/* Dark overlay — fades when video loads */
.showreel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(3,3,3,0.65) 0%,
    rgba(3,3,3,0.2) 40%,
    rgba(3,3,3,0.2) 60%,
    rgba(3,3,3,0.65) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

/* Subtle scanline texture */
.showreel-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.022) 2px,
    rgba(0,0,0,0.022) 4px
  );
  z-index: 3;
  pointer-events: none;
  opacity: 0.4;
}

/* Letterbox bars — cinematic feel */
.showreel-bar {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
  transition: height 0.9s var(--ease-film);
}
.showreel-bar--t {
  top: 0;
  height: 0px;
  background: var(--c-black);
}
.showreel-bar--b {
  bottom: 0;
  height: 0px;
  background: var(--c-black);
}

/* Center play button */
.showreel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  /* Hidden until bars retract */
  opacity: 0;
  transition: opacity 0.6s ease 0.4s, transform 0.5s var(--ease-out);
}
.showreel-frame.revealed .showreel-play {
  opacity: 1;
}
@media (hover: hover) {
  .showreel-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
  }
}
.showreel-play-ring {
  width: 80px;
  height: 80px;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.4s, background 0.4s;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(6px);
}
.showreel-play:hover .showreel-play-ring {
  border-color: var(--c-gold);
  background: rgba(200,168,90,0.15);
}
/* Pulse ring */
.showreel-play-ring::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(200,168,90,0.28);
  animation: play-ring-pulse 2.4s ease-in-out infinite;
}
@keyframes play-ring-pulse {
  0%,100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.22); opacity: 0; }
}

/* SHOWREEL 2025 label */
.showreel-label {
  position: absolute;
  bottom: clamp(20px, 3.5vw, 44px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.6s;
}
.showreel-frame.revealed .showreel-label {
  opacity: 1;
}
.showreel-label-txt {
  font-family: var(--ff-mono);
  font-size: clamp(9px, 1.1vw, 13px);
  letter-spacing: 0.45em;
  color: rgba(200,168,90,0.85);
  text-transform: uppercase;
}
.showreel-label-line {
  display: block;
  width: clamp(32px, 4vw, 64px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,90,0.6), transparent);
}

/* Corner markers for cinema-frame effect */
.showreel-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.3s;
}
.showreel-frame.revealed .showreel-corner { opacity: 1; }
.showreel-corner--tl { top: 16px; left: 16px; border-top: 1px solid rgba(200,168,90,0.5); border-left: 1px solid rgba(200,168,90,0.5); }
.showreel-corner--tr { top: 16px; right: 16px; border-top: 1px solid rgba(200,168,90,0.5); border-right: 1px solid rgba(200,168,90,0.5); }
.showreel-corner--bl { bottom: 16px; left: 16px; border-bottom: 1px solid rgba(200,168,90,0.5); border-left: 1px solid rgba(200,168,90,0.5); }
.showreel-corner--br { bottom: 16px; right: 16px; border-bottom: 1px solid rgba(200,168,90,0.5); border-right: 1px solid rgba(200,168,90,0.5); }

/* ─────────────────────────────────────────────────────
   TASK 5 — LUXURY STATS SECTION UPGRADE
   Film-studio stat board with dividers, glow, rose-gold numbers
   ───────────────────────────────────────────────────── */
.stats-section {
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(200,168,90,0.035) 0%, transparent 70%);
  pointer-events: none;
}
.stats-inner {
  position: relative;
}

/* Thin gold horizontal rules */
.stats-rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,168,90,0.08) 10%,
    rgba(200,168,90,0.4) 30%,
    rgba(232,200,120,0.7) 50%,
    rgba(200,168,90,0.4) 70%,
    rgba(200,168,90,0.08) 90%,
    transparent 100%
  );
}

/* Override base stats-row for luxury layout */
.stats-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 0;
  background: transparent;
  position: relative;
}

/* Vertical gold separator */
.stat-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(200,168,90,0.25) 15%,
    rgba(200,168,90,0.5) 50%,
    rgba(200,168,90,0.25) 85%,
    transparent 100%
  );
  flex-shrink: 0;
}

/* Stat cell upgrade */
.stat-cell {
  background: transparent;
  padding: clamp(44px, 6vw, 80px) clamp(28px, 4vw, 60px);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: background 0.5s var(--ease-film);
}
.stat-cell:hover {
  background: rgba(200,168,90,0.025);
}

/* Subtle radial glow behind number */
.stat-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(200,168,90,0.09) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}
.stat-cell:hover .stat-glow { opacity: 1; }

/* Number — rose-gold gradient with animated counter */
.stat-n {
  font-family: var(--ff-display);
  font-size: clamp(48px, 6vw, 82px);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  /* Rose-gold to bright gold gradient */
  background: linear-gradient(
    120deg,
    #b87848 0%,
    #c8a85a 25%,
    #e8d090 52%,
    #c8a85a 78%,
    #b87848 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(200,168,90,0.3));
  /* Slow gradient animation */
  background-size: 200% auto;
  animation: stat-shine 8s linear infinite;
}
@keyframes stat-shine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Thin gold separator line between number and label */
.stat-sep {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  margin: 14px auto 12px;
  position: relative;
  z-index: 1;
}

/* Label */
.stat-l {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.35em;
  color: var(--c-mid);
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* Responsive: hide extra dividers on mobile */
@media (max-width: 900px) {
  .stats-row {
    grid-template-columns: 1fr 1fr;
    background: var(--c-grey1);
    gap: 1px;
  }
  .stat-divider { display: none; }
  .stat-cell { background: var(--c-dark2); }
  .stat-cell:hover { background: var(--c-dark3); }
}
@media (max-width: 500px) {
  .stats-row {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────
   TASK 7 — SECTION DIVIDERS: film-strip variant
   ───────────────────────────────────────────────────── */
.film-strip-divider {
  position: relative;
  width: 100%;
  height: 24px;
  background: var(--c-black);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.film-strip-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,90,0.3) 20%, rgba(200,168,90,0.3) 80%, transparent);
}
.film-strip-divider::after {
  content: '· · · · · · · · · · · · · · · · · · · · · · ·';
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 0.6em;
  color: rgba(200,168,90,0.18);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────
   TASK 8 — MICROINTERACTIONS
   Button glow pulse · cursor pulse · link underline sweep
   ───────────────────────────────────────────────────── */

/* Gold button: add inner glow animation on hover */
.btn-gold {
  box-shadow: none;
  transition: transform 0.3s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
@media (hover: hover) {
  .btn-gold:hover {
    box-shadow:
      0 0 0 1px rgba(200,168,90,0.5),
      0 8px 24px rgba(200,168,90,0.22),
      inset 0 0 0 1px rgba(255,220,130,0.1);
  }
}

/* Ghost button: gold underline sweep animation */
.btn-ghost {
  position: relative;
}
.btn-ghost::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transition: width 0.45s var(--ease-out);
}
@media (hover: hover) {
  .btn-ghost:hover::after {
    width: 100%;
  }
}

/* Nav button hover — glow pulse */
.nav-btn {
  position: relative;
}
@media (hover: hover) {
  .nav-btn:hover {
    box-shadow: 0 0 20px rgba(200,168,90,0.35), 0 0 6px rgba(200,168,90,0.2);
  }
}

/* Cursor dot — subtle pulse animation when idle */
#cur-dot {
  animation: cursor-idle 3.5s ease-in-out infinite;
}
@keyframes cursor-idle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,168,90,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(200,168,90,0); }
}
/* Override: disable pulse on hover/video states */
body.cur-hover #cur-dot,
body.cur-video #cur-dot {
  animation: none;
}

/* Nav menu links — gold sweep underline */
.nav-menu a {
  position: relative;
  overflow: hidden;
}
/* (existing ::after handles underline expand, no change needed) */

/* Internal text links — warm underline on hover */
.post-content a,
.lc-p a,
.about-body a {
  color: var(--c-gold);
  text-decoration: none;
  position: relative;
  display: inline;
}
.post-content a::after,
.lc-p a::after,
.about-body a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--c-gold2);
  transition: width 0.4s var(--ease-out);
}
@media (hover: hover) {
  .post-content a:hover::after,
  .lc-p a:hover::after,
  .about-body a:hover::after {
    width: 100%;
  }
}

/* Footer link microinteraction — gold dot appears on hover */
.ft-links a {
  position: relative;
}
.ft-links a::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  vertical-align: middle;
  margin-right: 0;
  transition: width 0.35s var(--ease-out), margin-right 0.35s var(--ease-out);
}
@media (hover: hover) {
  .ft-links a:hover::before {
    width: 12px;
    margin-right: 8px;
  }
  .ft-links a:hover {
    padding-left: 0; /* Override old padding-left hover, replaced by ::before */
    color: var(--c-gold);
  }
}

/* Service card link arrow bounce on hover */
@media (hover: hover) {
  .srv-card:hover .srv-link svg {
    transform: translateX(5px);
    transition: transform 0.35s var(--ease-out);
  }
}
.srv-link svg {
  transition: transform 0.35s var(--ease-out);
}

/* Blog card hover: gold left border sweep */
.blog-card {
  position: relative;
}
.blog-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s var(--ease-out);
  z-index: 2;
}
@media (hover: hover) {
  .blog-card:hover::before {
    transform: scaleY(1);
  }
}

/* ─────────────────────────────────────────────────────
   TASK 5 — WF3 WORKFLOW SPINE: correct progress approach
   Override to ensure spine fill is a clean element
   ───────────────────────────────────────────────────── */
/* Ensure #wf3-spine-fill uses height for progress (not transform) */
#wf3-spine-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(
    to bottom,
    rgba(200,168,90,1) 0%,
    rgba(220,180,80,0.8) 100%
  );
  box-shadow:
    0 0 8px rgba(200,168,90,0.7),
    0 0 20px rgba(200,168,90,0.35);
  will-change: height;
  transition: none; /* Driven only by JS */
}

/* ─────────────────────────────────────────────────────
   REDUCED MOTION overrides for new sections
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fc-title-brand    { animation: none !important; }
  .fc-scanbar        { animation: none !important; }
  .stat-n            { animation: none !important; }
  .marquee-track     { animation: none !important; flex-wrap: wrap; width: 100%; justify-content: center; }
  #cur-dot           { animation: none !important; }
  .showreel-frame    { clip-path: none !important; }
  .play-ring-pulse,
  .showreel-play-ring::before { animation: none !important; }
  .fc-inner          { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════
   VISION STUDIO — v8 FINAL POLISH
   Bug fixes + premium refinements across all new sections
   ═══════════════════════════════════════════════════════ */

/* ── BUG FIX: wf3-step.lit must reveal the step itself ──
   The step has opacity:0/translateX(28px) by default.
   When our scroll-based JS adds .lit, the step must become
   visible. GSAP clearProps removes inline styles, so we
   need the CSS to take over. ────────────────────────────── */
.wf3-step {
  /* CSS-driven transitions for our scroll handler */
  transition:
    opacity  1.8s cubic-bezier(.22,.61,.36,1),
    transform 1.8s cubic-bezier(.22,.61,.36,1);
}
.wf3-step.lit {
  opacity:   1 !important;
  transform: translateX(0) !important;
}
/* Stagger each step for cinematic cascade */
.wf3-step:nth-child(2) { transition-delay: 0.18s; }
.wf3-step:nth-child(3) { transition-delay: 0.36s; }
.wf3-step:nth-child(4) { transition-delay: 0.54s; }

/* ── FEATURED CASE STUDY: depth decoration SVG ──────────
   Background SVG grid lines for the Hell Energy cinematic feel */
.fc-bg-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,168,90,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,168,90,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Pill entrance animation — stagger on reveal */
.fc-inner.fc-revealed .fc-pill:nth-child(1) { transition-delay: 0.35s; }
.fc-inner.fc-revealed .fc-pill:nth-child(2) { transition-delay: 0.50s; }
.fc-inner.fc-revealed .fc-pill:nth-child(3) { transition-delay: 0.65s; }

.fc-pill {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s var(--ease-out),
    border-color 0.4s;
}
.fc-inner.fc-revealed .fc-pill {
  opacity: 1;
  transform: translateY(0);
}
/* No-JS / reduced motion: always show */
body:not(.gsap-ready) .fc-pill {
  opacity: 1 !important;
  transform: none !important;
}

/* CTA entrance */
.fc-cta {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1) 0.8s,
              transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.8s;
}
.fc-inner.fc-revealed .fc-cta {
  opacity: 1;
  transform: translateY(0);
}

/* ── SHOWREEL: ensure iframe fills correctly ─────────────
   Vimeo background=1 player needs specific sizing to avoid
   letterboxing. We oversample by a small margin. ───────── */
.showreel-video {
  position: absolute;
  /* Slightly oversize to prevent letterbox edges */
  top:    -10%;
  left:   -5%;
  width:  110%;
  height: 120%;
  border: 0;
  pointer-events: none;
}
/* Before video loads — show a cinematic placeholder */
.showreel-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(200,168,90,0.06) 0%, transparent 60%),
    linear-gradient(160deg, #050403 0%, #080806 50%, #040403 100%);
  z-index: 0;
}

/* Dark overlay responsive — lighter at center for play btn visibility */
.showreel-overlay {
  background: radial-gradient(
    ellipse 65% 65% at 50% 50%,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.52) 60%,
    rgba(0,0,0,0.72) 100%
  );
}

/* Section label below showreel */
.showreel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter) 0;
  max-width: 1600px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 12px;
}
.showreel-meta-tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.38em;
  color: var(--c-gold);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.showreel-meta-tag::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--c-gold);
}
.showreel-meta-dur {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--c-grey3);
}

/* ── STATS SECTION: divider gradient fix ─────────────────
   On Safari, the auto column widths may collapse.
   Enforce minimum divider width. ───────────────────────── */
.stat-divider {
  min-width: 1px;
  width: 1px;
}

/* Fine-tune stat cell on wide screens */
@media (min-width: 1400px) {
  .stat-cell {
    padding: 80px 80px;
  }
  .stat-n {
    font-size: 88px;
  }
}

/* ── MARQUEE: logo sizing normalized to brand wall spec ── */
.marquee-logo img {
  max-width: 170px !important;
  max-height: 65px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
.ct-logo img {
  height: 40px !important;
  max-height: 40px !important;
  max-width: 120px !important;
  width: auto !important;
  object-fit: contain !important;
}
/* Gold lines replace old soft border */
.marquee-wall {
  border-bottom: none;
}

/* ── GLOW DIVIDER: ensure no layout gap above fc section ─ */
.featured-case + .glow-divider {
  margin: 0;
}

/* ── SECTION entry animations — unified approach ─────────
   All new sections use data-section-reveal for entrance. ─ */
[data-section-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
[data-section-reveal].in {
  opacity: 1;
  transform: none;
}
body:not(.gsap-ready) [data-section-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* ── PORTFOLIO: cinema headline refinement ───────────────
   The .pf-cinema-headline gets a subtle text-shadow glow ─ */
.pf-cinema-headline {
  display: block;
  text-align: center;
  font-family: var(--ff-display);
  font-size: clamp(48px, 9vw, 130px);
  font-weight: 300;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200,168,90, 0.12);
  pointer-events: none;
  padding: 0 var(--gutter);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

/* .testi-card consolidated at base definition — removed duplicate */

/* ── CTA BAND: bg word text enhancement ──────────────────
   The .cta-bg-word gets an animated opacity shift for depth */
.cta-bg-word {
  animation: bg-word-breathe 8s ease-in-out infinite;
}
@keyframes bg-word-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ── BUTTON REFINEMENT: .btn-gold clip-path glow ─────────
   The clipped button now also glows along its clip edges. ─ */
@media (hover: hover) {
  .btn-gold:hover {
    filter: drop-shadow(0 0 12px rgba(200,168,90,0.35));
  }
}

/* ── HERO SCROLL INDICATOR: auto-fade after 4s ───────────
   Disappears once user starts scrolling for a cleaner look */
.hero-scroll {
  animation: scroll-fade-in 1s ease 3.5s both;
}
@keyframes scroll-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── FOOTER: gold gem pulse ──────────────────────────────
   The .nav-gem in the footer gets a very subtle glow pulse */
footer .nav-gem {
  animation: gem-glow 5s ease-in-out infinite;
}
@keyframes gem-glow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 18px rgba(200,168,90,0.22), inset 0 0 8px rgba(200,168,90,0.1); }
}

/* ── REDUCED MOTION: final overrides for all new items ── */
@media (prefers-reduced-motion: reduce) {
  .wf3-step         { transition: none !important; }
  .fc-pill          { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fc-cta           { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bg-word-breathe,
  .cta-bg-word      { animation: none !important; }
  .hero-scroll      { animation: none !important; opacity: 1 !important; }
  footer .nav-gem   { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   VISION STUDIO — UPGRADE v9
   Tasks: Client Trust · Hero Grain · Featured Case ·
          Portfolio Tags · Showreel Heading · About Dividers ·
          Testimonials Borders · Blog Hover · Workflow IO Fix
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   TASK 2 — CLIENT TRUST SECTION (below hero)
   ───────────────────────────────────────────────────── */
.client-trust {
  background: var(--c-dark);
  padding: clamp(48px,6vw,80px) 0 clamp(40px,5vw,72px);
  border-top: 1px solid var(--c-grey1);
  border-bottom: 1px solid var(--c-grey1);
  overflow: hidden;
}
.client-trust-inner {
  padding: 0 var(--gutter) clamp(32px,4vw,52px);
  text-align: center;
}
.client-trust-heading {
  font-family: var(--ff-display);
  font-size: clamp(30px,4vw,56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-top: 16px;
}
.client-trust-heading em { color: var(--c-gold); font-style: italic; }

/* Marquee container */
.ct-marquee {
  position: relative;
  overflow: hidden;
  padding: 12px 0;
}
.ct-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px,8vw,130px);
  z-index: 2;
  pointer-events: none;
}
.ct-fade--l { left: 0;  background: linear-gradient(to right, var(--c-dark), transparent); }
.ct-fade--r { right: 0; background: linear-gradient(to left,  var(--c-dark), transparent); }

/* Scrolling track */
.ct-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ct-scroll 40s linear infinite;
  will-change: transform;
}
/* hover-pause removed — marquee runs continuously per spec */
@media (prefers-reduced-motion: reduce) {
  .ct-track { animation: none !important; flex-wrap: wrap; width: 100%; justify-content: center; padding: 0 var(--gutter); }
}
@keyframes ct-scroll {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.ct-set { display: flex; align-items: center; flex-shrink: 0; }

/* Individual logo */
.ct-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px clamp(24px,3vw,48px);
  border-right: 1px solid rgba(255,255,255,.04);
  position: relative;
  transition: background .4s var(--ease-film);
}
.ct-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(200,168,90,.05), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
@media (hover: hover) {
  .ct-logo:hover { background: rgba(200,168,90,.03); }
  .ct-logo:hover::before { opacity: 1; }
}
.ct-logo img {
  max-height: 40px;
  max-width: 120px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  /* Grayscale → white treatment */
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity .5s var(--ease-out), filter .5s var(--ease-out), transform .4s var(--ease-out);
  will-change: opacity, filter;
}
@media (hover: hover) {
  .ct-logo:hover img {
    opacity: 1;
    /* Gold tint on hover */
    filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.08);
    transform: scale(1.08);
  }
}

/* ─────────────────────────────────────────────────────
   TASK 3 — FEATURED CASE STUDY: stronger metrics
   ───────────────────────────────────────────────────── */
/* Larger pill numbers with glow pulse */
.fc-pill-n {
  font-size: clamp(32px,4vw,52px) !important;
  filter: drop-shadow(0 0 16px rgba(200,168,90,.6));
}
/* Add a subtle shimmer scan bar inside each pill */
.fc-pill {
  min-width: 140px;
}
/* Wider pill gap on large screens */
@media (min-width: 768px) {
  .fc-results { gap: 20px; }
}

/* ─────────────────────────────────────────────────────
   TASK 5 — PORTFOLIO: always-visible category tags
   ───────────────────────────────────────────────────── */
/* Show .pf-top by default — subtle, stronger on hover */
.pf-top {
  transform: translateY(0) !important;
  opacity: 0.8 !important;
  transition: opacity .3s ease !important;
}
.pf-card:hover .pf-top { opacity: 1 !important; }

/* Enhance the tag pill */
.pf-tag {
  background: rgba(3,3,3,.82) !important;
  border: 1px solid rgba(200,168,90,.3) !important;
  padding: 5px 13px !important;
  letter-spacing: .32em !important;
  font-size: 8px !important;
  color: var(--c-gold) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Pulsing border on card hover */
@media (hover: hover) {
  .pf-card:hover .pf-tag {
    border-color: rgba(200,168,90,.65) !important;
    box-shadow: 0 0 8px rgba(200,168,90,.2);
  }
}

/* ─────────────────────────────────────────────────────
   TASK 6 — SHOWREEL: section heading
   ───────────────────────────────────────────────────── */
.showreel-sec-heading {
  text-align: center;
  padding: 0 var(--gutter) clamp(36px,5vw,64px);
}
.showreel-main-title {
  font-family: var(--ff-display);
  font-size: clamp(36px,5.5vw,76px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-top: 16px;
  color: var(--c-white);
}
.showreel-main-title em {
  font-style: italic;
  color: var(--c-gold);
}
/* Adjust showreel top padding since heading is now inside */
.showreel-sec {
  padding-top: clamp(56px,8vw,110px);
}
.showreel-inner {
  padding-top: 0;
}

/* ─────────────────────────────────────────────────────
   TASK 7 — ABOUT SECTION: dividers + stronger heading
   ───────────────────────────────────────────────────── */
#about-heading {
  font-size: clamp(42px,5.8vw,82px) !important;
  position: relative;
}
/* Decorative divider lines flanking the about heading */
.about-grid .sec-label {
  position: relative;
}
.about-grid .sec-label::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold), rgba(200,168,90,.12) 60%, transparent);
  margin-top: 20px;
}
/* Bottom divider under the about section */
.about-grid > div:last-child {
  position: relative;
}
.about-grid > div:last-child::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,90,.18) 30%, rgba(200,168,90,.35) 50%, rgba(200,168,90,.18) 70%, transparent);
  margin-top: 48px;
}

/* TASK 9 — consolidated into base .testi-card definition */

/* ─────────────────────────────────────────────────────
   TASK 10 — BLOG: image zoom + gold border on hover
   ───────────────────────────────────────────────────── */
.blog-card {
  border: 1px solid transparent;
  transition: border-color .45s var(--ease-out);
}
@media (hover: hover) {
  .blog-card:hover {
    border-color: rgba(200,168,90,.3);
  }
  .blog-card:hover .blog-img-inner {
    transform: scale(1.07) !important;
    filter: saturate(.9) brightness(1.05) !important;
  }
}
.blog-img-inner {
  transition: transform .8s var(--ease-film), filter .6s !important;
}

/* ─────────────────────────────────────────────────────
   REDUCED MOTION overrides for v9 additions
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-vimeo { animation: none !important; }
  .ct-track   { animation: none !important; flex-wrap: wrap; width: 100%; justify-content: center; padding: 0 var(--gutter); }
  .blog-card  { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════
   VISION STUDIO — v10 REFINEMENTS
   Task 8: Portfolio card hover — zoom + gold glow + category tag
   Task 9: Showreel cinematic frame enhancements
   ═══════════════════════════════════════════════════════ */

/* ── TASK 8: Enhanced portfolio card hover ───────────── */
.pf-card {
  border: 1px solid transparent;
  transition:
    transform .55s var(--ease-film),
    box-shadow .55s var(--ease-film),
    border-color .55s var(--ease-film);
}
@media (hover: hover) {
  .pf-card:hover {
    transform: scale(1.035);
    border-color: rgba(200,168,90,.38);
    box-shadow:
      0 0 0 1px rgba(200,168,90,.18),
      0 0 32px rgba(200,168,90,.14),
      0 32px 72px rgba(0,0,0,.72);
  }
  /* Thumb zoom on hover */
  .pf-card:hover .pf-thumb-img {
    transform: scale(1.07);
    filter: saturate(.28) brightness(.3);
  }
}

/* Category tag — enhanced */
.pf-tag {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: .38em;
  color: var(--c-gold);
  background: rgba(200,168,90,.1);
  border: 1px solid rgba(200,168,90,.25);
  padding: 4px 10px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .3s, border-color .3s;
}
@media (hover: hover) {
  .pf-card:hover .pf-tag {
    background: rgba(200,168,90,.2);
    border-color: rgba(200,168,90,.55);
  }
}

/* ── TASK 9: Showreel cinematic frame ──────────────────
   Corner brackets + side vignette already exist.
   Strengthen the cinematic frame edges.
   ─────────────────────────────────────────────────────── */
.showreel-frame {
  border: 1px solid rgba(200,168,90,.12);
  box-shadow:
    0 0 0 1px rgba(200,168,90,.06),
    inset 0 0 60px rgba(0,0,0,.45),
    0 40px 100px rgba(0,0,0,.7);
  transition: box-shadow .6s var(--ease-film), border-color .6s;
}
@media (hover: hover) {
  .showreel-frame:hover {
    border-color: rgba(200,168,90,.24);
    box-shadow:
      0 0 0 1px rgba(200,168,90,.14),
      inset 0 0 60px rgba(0,0,0,.45),
      0 0 40px rgba(200,168,90,.08),
      0 40px 100px rgba(0,0,0,.75);
  }
}

/* Showreel corner markers — slightly more visible */
.showreel-corner::before,
.showreel-corner::after {
  background: rgba(200,168,90,.65);
}

/* ── Hero zoom enhancement — slightly more dramatic ─── */
@keyframes hero-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.11); }
}
.hero-video-wrapper {
  animation: hero-ken-burns 36s ease-in-out infinite alternate;
}

/* ── Film grain overlay — strengthen slightly ──────── */
#noise {
  opacity: .045;
}

/* ── nav-menu.nav-open li a hover — ensure gold ──────── */
.nav-menu.nav-open li a:hover {
  color: var(--c-gold);
  letter-spacing: .36em;
}

/* ── Reduce motion — v10 ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .showreel-frame { transition: none !important; }
  .pf-card { transition: none !important; }
  @keyframes hero-ken-burns { from { transform: scale(1); } to { transform: scale(1); } }
}

/* ═══════════════════════════════════════════════════════
   VISION STUDIO — v10 REFINEMENTS
   Container system · Contact form · Blog grid
   ═══════════════════════════════════════════════════════ */

/* ── CONSISTENT CONTAINER SYSTEM ─────────────────────────
   Used across all sections that need a constrained width.
   Applied via .vs-container wrapper or .sec-inner.
   ─────────────────────────────────────────────────────── */
.vs-container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

/* ── CONTACT PAGE — FORM + INFO LAYOUT ────────────────────
   All contact.html classes defined here, not inline.
   ─────────────────────────────────────────────────────── */

/* Contact hero / form wrapper */
.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Form structure */
.form-wrap { width: 100%; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 20px;
}

.form-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .32em;
  color: var(--c-gold);
  text-transform: uppercase;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: var(--c-dark2);
  border: 1px solid var(--c-grey2);
  color: var(--c-white);
  font-family: var(--ff-ui);
  font-size: 14px;
  padding: 13px 16px;
  outline: none;
  transition: border-color .3s var(--ease-out), background .3s;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--c-gold);
  background: var(--c-dark3);
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--c-grey3);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23c8a85a' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
/* Dark option styling */
.form-select option {
  background: var(--c-dark2);
  color: var(--c-white);
}
.form-textarea {
  min-height: 136px;
  resize: vertical;
  line-height: 1.7;
}

/* Contact info cards (right column) */
.contact-info-card {
  padding: 22px 26px;
  background: var(--c-dark2);
  border-left: 2px solid rgba(200,168,90,.25);
  margin-bottom: 3px;
  transition: background .3s var(--ease-out), border-color .3s;
}
.contact-info-card:hover {
  background: var(--c-dark3);
  border-color: var(--c-gold);
}
.contact-info-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .32em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: .75;
}
.contact-info-value {
  font-size: 15px;
  color: var(--c-white);
  line-height: 1.5;
  transition: color .3s;
  display: block;
}
a.contact-info-value:hover {
  color: var(--c-gold);
}

/* Form success message */
.success-msg {
  display: none;
  padding: 28px 32px;
  background: var(--c-dark2);
  border-left: 2px solid var(--c-gold);
  font-family: var(--ff-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 300;
  font-style: italic;
  color: var(--c-white);
  line-height: 1.55;
}

/* ── BLOG FULL GRID ────────────────────────────────────────
   Moved from blog.html inline <style> to main.css
   ─────────────────────────────────────────────────────── */
.blog-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;                         /* matches blog-grid — crisp hairlines */
  background: rgba(255,255,255,0.06);
  align-items: stretch;
}
@media (max-width: 900px) {
  .blog-full-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .blog-full-grid { grid-template-columns: 1fr; }
}

/* ── SECTION SPACING NORMALISER ──────────────────────────
   Inner pages (services, blog posts) sometimes lack padding.
   .page-body wraps the article content with consistent spacing.
   ─────────────────────────────────────────────────────── */
.page-hero {
  padding: calc(var(--nav-h) + 72px) var(--gutter) clamp(48px, 6vw, 80px);
  background: var(--c-dark2);
  position: relative;
  overflow: hidden;
}
.page-body {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 100px) var(--gutter);
}

/* ── RESPONSIVE LARGE-SCREEN GUARD ───────────────────────
   Prevent content from stretching beyond 1400px on ultra-wide.
   Applied to .sec (the main section wrapper).
   ─────────────────────────────────────────────────────── */
.sec > *:not(.pf-grid):not(.pf-filter):not(.srv-grid):not(.logos-grid):not(.stats-row):not(.testi-grid):not(.blog-grid):not(.proc-grid):not(.disc-grid) {
  max-width: 1400px;
  margin-inline: auto;
}

/* ── WIDESCREEN CONTAINER CAPS ───────────────────────────
   Explicit max-width on key full-bleed sections so they
   don't look broken on monitors wider than 1600px.
   ─────────────────────────────────────────────────────── */
@media (min-width: 1600px) {
  .hero-body            { max-width: 1100px; }
  .cta-band             { max-width: none; } /* cta-band is always full-bleed */
  .ft-main              { max-width: 1400px; margin-inline: auto; }
  .ft-bottom > *        { max-width: 1400px; margin-inline: auto; width: 100%; }
  .discipline-inner     { max-width: 1400px; }
}

/* ── REDUCED MOTION — v10 contact + blog additions ───── */
@media (prefers-reduced-motion: reduce) {
  .contact-info-card { transition: none !important; }
  .form-input,
  .form-select,
  .form-textarea { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════
   VISION STUDIO — v10 PRECISION FIXES
   D) Portfolio page layout stability
   E) Services grid first-card alignment
   F) Blog typography consistency
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   D) PORTFOLIO PAGE — pf-featured hero card
   ───────────────────────────────────────────────────── */
.pf-featured {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 360px;
  overflow: hidden;
  background: var(--c-dark3);
  cursor: pointer;
  display: flex;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .pf-featured { aspect-ratio: 16 / 9; }
}

/* Background SVG layer */
.pf-featured-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.pf-featured-bg svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vimeo preview iframe injected by JS */
.pf-feat-vimeo {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.0s var(--ease-film);
}
.pf-feat-vimeo.playing {
  opacity: 1;
}

/* Featured hero Vimeo iframe — injected by JS on hover */
.pf-feat-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  z-index: 1; /* below veil(z:2); veil fades on .video-active */
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity;
}
.pf-feat-iframe.playing {
  opacity: 1;
}

/* Dark veil — fades when video plays */
.pf-feat-veil {
  position: absolute;
  inset: 0;
  background: rgba(4,4,4,0.72);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-film);
}
.pf-featured.video-active .pf-feat-veil {
  opacity: 0;
}

/* Cinematic gradient overlay (always present) */
.pf-featured-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,3,3,0.88) 0%, rgba(3,3,3,0.55) 55%, rgba(3,3,3,0.72) 100%),
    linear-gradient(0deg, rgba(3,3,3,0.92) 0%, transparent 55%);
  z-index: 3;
  pointer-events: none;
}

/* Scanline texture */
.pf-feat-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.018) 2px, rgba(0,0,0,0.018) 4px
  );
  z-index: 4;
  pointer-events: none;
  opacity: 0.5;
}

/* Preview badge — appears when video plays */
.pf-feat-preview-badge {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: rgba(200,168,90,0.85);
  background: rgba(3,3,3,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(200,168,90,0.28);
  padding: 6px 16px;
  text-transform: uppercase;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  white-space: nowrap;
}
.pf-featured.video-active .pf-feat-preview-badge {
  opacity: 1;
}

/* Result pills (top-right) */
.pf-featured-result {
  position: absolute;
  top: 22px;
  right: var(--gutter);
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pf-res-pill {
  background: rgba(3,3,3,0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,168,90,0.22);
  padding: 10px 18px;
  text-align: center;
  min-width: 88px;
}
.pf-res-n {
  font-family: var(--ff-display);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: 3px;
}
.pf-res-l {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 0.28em;
  color: rgba(200,168,90,0.6);
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .pf-featured-result { display: none; }
}

/* Featured body text — bottom left */
.pf-feat-body {
  position: relative;
  z-index: 8;
  padding: var(--gutter);
  padding-bottom: clamp(28px, 4vw, 52px);
  max-width: 600px;
  flex-shrink: 0;
  width: 100%;
}
.pf-featured-badge {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.38em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.85;
  display: block;
}
.pf-featured-h2 {
  font-family: var(--ff-display);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  color: var(--c-white);
  margin-bottom: 24px;
}
.pf-featured-h2 em {
  font-style: italic;
  color: var(--c-gold);
}
.pf-feat-btns {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ── Portfolio page case study section ──────────────── */
.cs-section {
  padding: var(--section-y) var(--gutter);
  background: var(--c-dark2);
}
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: 48px;
}
@media (max-width: 900px) {
  .cs-grid { grid-template-columns: 1fr; }
}

/* Case study video wrapper */
.cs-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-dark3);
  cursor: pointer;
}

/* CS Vimeo preview — injected by JS */
.cs-vimeo-preview {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.cs-vimeo-preview.playing {
  opacity: 1;
}

/* CS dark veil */
.cs-vid-veil {
  position: absolute;
  inset: 0;
  background: rgba(4,4,4,0.68);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.8s var(--ease-film);
}
.cs-video.video-active .cs-vid-veil {
  opacity: 0;
}

/* CS bottom gradient for legibility */
.cs-vid-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,3,3,0.7) 0%, transparent 55%);
  z-index: 3;
  pointer-events: none;
}

/* CS play ring overlay */
.cs-vid-click {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s;
}
.cs-video.video-active .cs-vid-click {
  opacity: 0.4;
}

/* CS results row */
.cs-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-grey1);
  margin-top: 3px;
}
.cs-res-cell {
  background: var(--c-black);
  padding: 22px 20px;
  text-align: center;
}
.cs-res-n {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 300;
  line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(115deg, #c8a85a, #e4c878, #f0dfa0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cs-res-l {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 0.26em;
  color: var(--c-mid);
  text-transform: uppercase;
}

/* CS meta info box */
.cs-meta-box {
  padding-top: 8px;
}
.cs-meta-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: baseline;
}
.cs-meta-l {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  text-transform: uppercase;
  opacity: 0.75;
  flex-shrink: 0;
}
.cs-meta-v {
  font-size: 13px;
  color: var(--c-light);
  line-height: 1.5;
}

/* Portfolio cinema headline */
.pf-cinema-headline-wrap {
  overflow: hidden;
  pointer-events: none;
  position: relative;
  padding: 0 var(--gutter) 8px;
  user-select: none;
}
.pf-cinema-headline {
  display: block;
  font-family: var(--ff-display);
  font-size: clamp(56px, 9vw, 140px);
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(200,168,90,0.055);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  animation: cinema-headline-drift 18s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes cinema-headline-drift {
  0%   { transform: translateX(-2%); }
  100% { transform: translateX(2%); }
}

/* ─────────────────────────────────────────────────────
   E) SERVICES PAGE — first card alignment fix
   The grid wraps in a plain <section> with no padding.
   Ensure consistent padding top so the first card
   aligns with sibling sections.
   ───────────────────────────────────────────────────── */
.srv-grid {
  /* Ensure consistent 1px gap treatment when margin-top overridden */
  position: relative;
}
/* When margin-top is 0 (services page), section needs top padding */
section > .srv-grid[style*="margin-top:0"],
section > .srv-grid[style*="margin-top: 0"] {
  /* Compensate for removed margin with section padding instead */
  margin-top: 0 !important;
}
/* Services page section wrapper — add top padding */
.srv-grid + * {
  /* sibling spacing after grid */
}
/* Fix: on services page the section containing srv-grid needs padding */
section:has(.srv-grid[style*="margin-top:0"]) {
  padding-top: clamp(32px, 4vw, 56px);
}

/* ─────────────────────────────────────────────────────
   F) BLOG PAGE — typography and container fixes
   ───────────────────────────────────────────────────── */

/* Blog full grid — add gutters for visual breathing room */
section > .blog-full-grid {
  max-width: 1600px;
  margin-inline: auto;
}

/* Blog image wrapper — enforce consistent height via aspect-ratio
   overriding any inline height:Npx that causes layout shifts */
.blog-full-grid .blog-img {
  aspect-ratio: 16 / 9;
  height: auto !important;
  overflow: hidden;
}
.blog-full-grid .blog-img .blog-img-inner {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover;
}

/* Blog card body — fix vertical rhythm */
.blog-full-grid .blog-body {
  padding: 24px 28px 32px;
}
.blog-full-grid .blog-title {
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.35;
  margin-bottom: 10px;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}
.blog-full-grid .blog-excerpt {
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-mid);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.blog-full-grid .blog-meta {
  font-size: 9px;
  letter-spacing: 0.2em;
  padding-top: 14px;
}

/* Blog heading page — consistent spacing */
section > h1[style] {
  margin-bottom: 0 !important;
}

/* Blog section wrapper — add horizontal gutters for the grid */
section[style*="padding:var(--section-y) 0"] {
  padding-left: 0;
  padding-right: 0;
}

/* Ensure blog hero section heading has bottom breathing room */
section:has(h1 + .blog-full-grid),
section:has(.sec-label + h1) {
  padding-bottom: clamp(32px, 4vw, 56px);
}

/* ── Reduced motion — new sections ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pf-cinema-headline { animation: none !important; }
  .pf-feat-vimeo      { transition: none !important; }
  .pf-feat-veil       { transition: none !important; }
  .cs-vimeo-preview   { transition: none !important; }
  .cs-vid-veil        { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════
   MAGNETIC CURSOR
   GPU-accelerated translate on btn/card elements.
   Applied via JS — these rules handle the reset transition
   and ensure no layout shift occurs.
   ═══════════════════════════════════════════════════════ */
.btn-gold,
.btn-ghost,
.nav-btn,
#showreel-play-btn {
  /* Magnetic reset easing — slightly springy */
  --mag-reset: transform 0.55s cubic-bezier(.22,.61,.36,1);
}

.pf-card {
  --mag-reset: transform 0.65s cubic-bezier(.22,.61,.36,1);
}

/* JS adds/removes inline transform — no layout impact since
   these elements are either flex children or grid cells */

/* ══════════════════════════════════════════════════════
   BLOG ARTICLE — full post layout
   ══════════════════════════════════════════════════════ */
.blog-article { max-width: 100%; }

.blog-post-hero {
  padding: calc(var(--nav-h) + 72px) var(--gutter) 52px;
  background: var(--c-dark2);
}

.blog-lead {
  font-family: var(--ff-display);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 300;
  color: var(--c-light);
  line-height: 1.75;
  max-width: 720px;
  font-style: italic;
}

.blog-content {
  background: var(--c-black);
  padding: var(--section-y) var(--gutter);
  max-width: 1400px;
}

.blog-content h2 {
  font-family: var(--ff-display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 300;
  color: var(--c-white);
  margin: 56px 0 20px;
  line-height: 1.15;
}

.blog-content h2:first-child { margin-top: 0; }

.blog-content h3 {
  font-family: var(--ff-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-white);
  margin: 36px 0 12px;
  letter-spacing: .02em;
}

.blog-content p {
  font-size: 15px;
  color: var(--c-light);
  line-height: 1.85;
  max-width: 740px;
  margin-bottom: 20px;
}

.blog-content p strong { color: var(--c-white); }
.blog-content p em { color: var(--c-gold); font-style: italic; }

.blog-content ul {
  max-width: 700px;
}

.blog-content table {
  max-width: 900px;
}

/* ── FAQ shared component ── */
.faq-item { background: var(--c-dark2); border-left: 2px solid transparent; transition: border-color .3s; margin-bottom: 2px; }
.faq-item[open] { border-left-color: var(--c-gold); }
.faq-q { font-family: var(--ff-ui); font-size: 15px; font-weight: 600; padding: 22px 28px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--c-white); transition: color .3s; }
.faq-q:hover { color: var(--c-gold); }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: '＋'; font-family: var(--ff-mono); font-size: 18px; color: var(--c-gold); flex-shrink: 0; transition: transform .3s; }
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a { padding: 0 28px 22px; }
.faq-a p { font-size: 14px; color: var(--c-light); line-height: 1.8; max-width: 100%; }

/* ── Responsive blog ── */
@media (max-width: 768px) {
  .blog-content { padding: 60px var(--gutter); }
  .blog-post-hero { padding-bottom: 40px; }
}

/* ══ PORTFOLIO STATS BAR — #pf-stats scoped visual upgrade ══ */
#pf-stats .stats-row {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--c-dark2);
  border-top: 1px solid rgba(200,168,90,0.08);
  border-bottom: 1px solid rgba(200,168,90,0.08);
}
#pf-stats .stat-cell {
  background: var(--c-dark2);
  border-right: 1px solid rgba(200,168,90,0.15);
}
#pf-stats .stat-cell:last-child {
  border-right: none;
}
#pf-stats .stat-n {
  font-size: 64px;
  font-weight: 500;
  color: #C8A85A;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: #C8A85A;
  filter: none;
  text-shadow: 0 0 8px rgba(200,168,90,0.25), 0 0 20px rgba(200,168,90,0.15);
  animation: none;
}
#pf-stats .stat-l {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
@media (min-width: 1400px) {
  #pf-stats .stat-n { font-size: 64px; }
}


/* ═══════════════════════════════════════════════════════════════════
   VISION STUDIO — SZOLGÁLTATÁSOK CINEMATIC PAGE
   Premium Services Showcase — v18
   ═══════════════════════════════════════════════════════════════════ */

/* ── SZV HERO ── */
.szv-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--c-black);
  padding: calc(var(--nav-h) + 60px) var(--gutter) 0;
}

/* Atmospheric background */
.szv-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Cinematic letterbox bars */
.szv-frame-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,168,90,0.25) 20%, rgba(200,168,90,0.4) 50%, rgba(200,168,90,0.25) 80%, transparent 100%);
}
.szv-frame-line--top  { top: var(--nav-h); animation: szv-frame-pulse 4s ease-in-out infinite; }
.szv-frame-line--bottom { bottom: 0; animation: szv-frame-pulse 4s ease-in-out infinite reverse; }

@keyframes szv-frame-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

/* Lens flare orbs */
.szv-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(120px);
}
.szv-orb--1 {
  width: 55vw;
  height: 55vw;
  max-width: 800px;
  max-height: 800px;
  top: -15%;
  left: 55%;
  background: radial-gradient(circle, rgba(200,168,90,0.07) 0%, transparent 70%);
  animation: szv-orb-drift 18s ease-in-out infinite;
}
.szv-orb--2 {
  width: 40vw;
  height: 40vw;
  max-width: 500px;
  max-height: 500px;
  bottom: 10%;
  left: -10%;
  background: radial-gradient(circle, rgba(200,168,90,0.05) 0%, transparent 70%);
  animation: szv-orb-drift 24s ease-in-out infinite reverse;
}
@keyframes szv-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(3%, 5%) scale(1.05); }
  66%       { transform: translate(-2%, -3%) scale(0.95); }
}

/* Scanlines on hero */
.szv-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.02) 3px,
    rgba(0,0,0,0.02) 4px
  );
  opacity: 0.5;
  pointer-events: none;
}

/* Subtle grid overlay */
.szv-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(200,168,90,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,168,90,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 60% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, black 20%, transparent 70%);
}

/* Hero content */
.szv-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding-bottom: 72px;
}

.szv-breadcrumb {
  margin-bottom: 40px;
}

.szv-hero-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.szv-hero-label-code {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.35em;
  color: rgba(200,168,90,0.35);
  margin-left: auto;
}

.szv-hero-h1 {
  font-family: var(--ff-display);
  font-size: clamp(44px, 7vw, 108px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}
.szv-hero-em {
  font-style: italic;
  color: var(--c-gold);
  display: block;
}
.szv-hero-sub-word {
  display: block;
  color: var(--c-light);
  font-weight: 300;
}

.szv-hero-desc {
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--c-mid);
  line-height: 1.8;
  max-width: 580px;
  margin-bottom: 48px;
}

.szv-hero-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(200,168,90,0.1);
  width: fit-content;
}
.szv-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.szv-meta-num {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
}
.szv-meta-lbl {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 0.3em;
  color: var(--c-grey3);
  text-transform: uppercase;
}
.szv-meta-sep {
  width: 1px;
  height: 36px;
  background: rgba(200,168,90,0.15);
}

/* Film number strip at bottom of hero */
.szv-hero-strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.04);
  padding: 12px var(--gutter);
  gap: 0;
  max-width: none;
}
.szv-hero-strip span {
  flex: 1;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(200,168,90,0.2);
  text-align: center;
  padding: 4px 0;
  border-right: 1px solid rgba(255,255,255,0.04);
  transition: color 0.3s;
}
.szv-hero-strip span:last-child { border-right: none; }


/* ── SZV SECTION (grid wrapper) ── */
.szv-section {
  background: var(--c-dark);
  padding: 0;
}
.szv-section-inner {
  max-width: 1400px;
  margin: 0 auto;
}


/* ── CINEMATIC CARDS GRID ── */
.szv-cine-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: rgba(200,168,90,0.08);
}

/* Card base */
.szv-cine-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-dark2);
  text-decoration: none;
  color: var(--c-white);
  transition:
    background 0.5s var(--ease-film),
    transform 0.5s var(--ease-film);
  min-height: 460px;
  cursor: pointer;
}

/* SVG cinematic art background */
.szv-cine-card-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.szv-cine-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.8s var(--ease-film), opacity 0.5s;
  opacity: 0.7;
}

/* Gradient overlay over art */
.szv-cine-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8,8,8,0.97) 0%,
    rgba(8,8,8,0.82) 40%,
    rgba(8,8,8,0.55) 70%,
    rgba(8,8,8,0.3) 100%
  );
  z-index: 1;
  transition: background 0.5s var(--ease-film);
}

/* Glow orb — hidden until hover */
.szv-cine-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(200,168,90,0.18) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.6s var(--ease-film);
}

/* Card body */
.szv-cine-card-body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 36px 36px 40px;
  margin-top: auto;
}

/* Gold accent line */
.szv-cine-accent {
  width: 32px;
  height: 1px;
  background: var(--c-gold);
  margin-bottom: 20px;
  transform-origin: left;
  transform: scaleX(1);
  transition: width 0.4s var(--ease-out), box-shadow 0.4s;
}

/* Number badge */
.szv-cine-num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.35em;
  color: rgba(200,168,90,0.35);
  margin-bottom: 16px;
  transition: color 0.4s;
}

/* Title */
.szv-cine-title {
  font-family: var(--ff-display);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 14px;
  transition: color 0.4s;
  color: var(--c-white);
}

/* Description */
.szv-cine-desc {
  font-size: 13px;
  color: var(--c-mid);
  line-height: 1.75;
  margin-bottom: 22px;
  max-width: 320px;
  transition: color 0.4s;
}

/* Tags row */
.szv-cine-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}
.szv-cine-tags span {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(200,168,90,0.45);
  border: 1px solid rgba(200,168,90,0.15);
  padding: 4px 10px;
  transition: color 0.3s, border-color 0.3s;
}

/* Arrow */
.szv-cine-arrow {
  color: var(--c-gold);
  opacity: 0.5;
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
  transform: translateX(0);
  width: 32px;
}

/* ── HOVER STATES ── */
@media (hover: hover) {
  .szv-cine-card:hover {
    background: var(--c-dark3);
    transform: translateY(-4px);
    z-index: 2;
    box-shadow:
      0 24px 80px rgba(0,0,0,0.6),
      0 0 0 1px rgba(200,168,90,0.15);
  }

  .szv-cine-card:hover .szv-cine-art {
    transform: scale(1.04);
    opacity: 1;
  }

  .szv-cine-card:hover .szv-cine-card-bg::after {
    background: linear-gradient(
      to top,
      rgba(8,8,8,0.92) 0%,
      rgba(8,8,8,0.72) 40%,
      rgba(8,8,8,0.45) 70%,
      rgba(8,8,8,0.2) 100%
    );
  }

  .szv-cine-card:hover .szv-cine-glow {
    opacity: 1;
  }

  .szv-cine-card:hover .szv-cine-accent {
    width: 64px;
    box-shadow: 0 0 12px rgba(200,168,90,0.5);
  }

  .szv-cine-card:hover .szv-cine-title {
    color: var(--c-gold2);
  }

  .szv-cine-card:hover .szv-cine-desc {
    color: var(--c-light);
  }

  .szv-cine-card:hover .szv-cine-num {
    color: rgba(200,168,90,0.7);
  }

  .szv-cine-card:hover .szv-cine-tags span {
    color: rgba(200,168,90,0.75);
    border-color: rgba(200,168,90,0.3);
  }

  .szv-cine-card:hover .szv-cine-arrow {
    opacity: 1;
    transform: translateX(8px);
  }

  /* Sweep shimmer on hover */
  .szv-cine-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(200,168,90,0.04) 40%,
      rgba(230,200,130,0.10) 50%,
      rgba(200,168,90,0.04) 60%,
      transparent 100%
    );
    transform: skewX(-12deg);
    pointer-events: none;
    z-index: 4;
    transition: none;
  }
  .szv-cine-card:hover::before {
    animation: szv-card-sweep 0.7s var(--ease-out) forwards;
  }
}

@keyframes szv-card-sweep {
  0%   { left: -120%; opacity: 1; }
  100% { left: 140%;  opacity: 0; }
}

/* Top gold border on hover */
.szv-cine-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  z-index: 5;
}
@media (hover: hover) {
  .szv-cine-card:hover::after { opacity: 1; }
}


/* ── PROCESS STRIP ── */
.szv-process {
  background: var(--c-dark2);
  border-top: 1px solid rgba(200,168,90,0.06);
  border-bottom: 1px solid rgba(200,168,90,0.06);
  padding: clamp(60px, 8vw, 100px) var(--gutter);
}
.szv-process-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.szv-process-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 56px;
}
.szv-process-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.szv-step {
  flex: 1;
  padding: 0 32px 0 0;
}
.szv-step-line {
  width: 48px;
  flex-shrink: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(200,168,90,0.3), rgba(200,168,90,0.1));
  margin-top: 22px;
  align-self: flex-start;
}
.szv-step-num {
  font-family: var(--ff-display);
  font-size: 13px;
  font-style: italic;
  color: var(--c-gold);
  opacity: 0.6;
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}
.szv-step-title {
  font-family: var(--ff-display);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  color: var(--c-white);
  margin-bottom: 10px;
  line-height: 1.2;
}
.szv-step-desc {
  font-size: 13px;
  color: var(--c-mid);
  line-height: 1.7;
  max-width: 200px;
}


/* ── CINEMATIC CTA ── */
.szv-cta {
  position: relative;
  overflow: hidden;
  background: var(--c-black);
  padding: clamp(80px, 12vw, 160px) var(--gutter);
  text-align: center;
}
.szv-cta-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.szv-cta-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 900px;
  height: 60vw;
  max-height: 600px;
  background: radial-gradient(ellipse at center, rgba(200,168,90,0.08) 0%, transparent 65%);
  animation: szv-cta-pulse 6s ease-in-out infinite;
}
@keyframes szv-cta-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.7; }
  50%       { transform: translate(-50%, -50%) scale(1.1); opacity: 1;   }
}
.szv-cta-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.015) 3px, rgba(0,0,0,0.015) 4px);
}

.szv-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}
.szv-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  justify-content: center;
}
.szv-cta-h2 {
  font-family: var(--ff-display);
  font-size: clamp(38px, 6vw, 88px);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--c-white);
}
.szv-cta-em {
  font-style: italic;
  color: var(--c-gold);
  display: block;
}
.szv-cta-sub {
  font-size: clamp(14px, 1.5vw, 16px);
  color: var(--c-mid);
  line-height: 1.8;
  margin-bottom: 48px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.szv-cta-btns {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.szv-cta-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.25em;
  color: var(--c-grey3);
  text-transform: uppercase;
}
.szv-cta-dot {
  color: rgba(200,168,90,0.3);
}

/* Gold button glow on CTA */
.szv-cta .btn-gold {
  box-shadow: 0 0 0 0 rgba(200,168,90,0);
  transition: transform 0.3s, box-shadow 0.4s;
}
@media (hover: hover) {
  .szv-cta .btn-gold:hover {
    box-shadow: 0 0 40px rgba(200,168,90,0.25), 0 8px 32px rgba(0,0,0,0.4);
    transform: translateY(-3px);
  }
}


/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .szv-cine-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .szv-process-steps {
    flex-wrap: wrap;
    gap: 40px;
  }
  .szv-step-line {
    display: none;
  }
  .szv-step {
    flex: 0 0 calc(50% - 20px);
    padding: 0;
  }
}

@media (max-width: 768px) {
  .szv-hero {
    min-height: 60vh;
    padding-top: calc(var(--nav-h) + 40px);
  }
  .szv-hero-h1 {
    font-size: clamp(36px, 10vw, 64px);
  }
  .szv-hero-meta {
    gap: 18px;
  }
  .szv-hero-strip {
    display: none;
  }
  .szv-cine-grid {
    grid-template-columns: 1fr;
  }
  .szv-cine-card {
    min-height: 360px;
  }
  .szv-cine-card-body {
    padding: 28px 28px 32px;
  }
  .szv-process {
    padding: 60px var(--gutter);
  }
  .szv-step {
    flex: 0 0 100%;
  }
  .szv-cta-btns {
    flex-direction: column;
    align-items: center;
  }
  .szv-br { display: none; }
}

@media (max-width: 480px) {
  .szv-hero-label-code { display: none; }
  .szv-hero-meta { flex-wrap: wrap; gap: 12px; }
  .szv-cine-card { min-height: 300px; }
  .szv-cine-card-body { padding: 24px; }
  .szv-cine-title { font-size: 26px; }
  .szv-cta-meta { font-size: 8px; gap: 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .szv-orb,
  .szv-cta-orb,
  .szv-frame-line { animation: none !important; }
  .szv-cine-card,
  .szv-cine-art,
  .szv-cine-accent,
  .szv-cine-title,
  .szv-cine-arrow { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   VISION STUDIO — SERVICES CARD UPGRADE v18.1
   Enhanced 3D / tilt / sweep / bottom-line / depth interactions
   ═══════════════════════════════════════════════════════════════════ */

/* ── Card: reset transform handling for 3D tilt ── */
.szv-cine-card {
  /* GPU layer + perspective context for JS tilt */
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* Remove old translateY-only hover — JS owns transform now */
  transition:
    background   0.5s var(--ease-film),
    box-shadow   0.5s var(--ease-film);
}

/* Card inner wrapper — lets children stay flat while card tilts */
.szv-cine-card-body {
  transform-style: flat;   /* children don't inherit 3D */
}

/* ── Perspective wrapper on the grid ── */
.szv-cine-grid {
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

/* ── Gold Bottom Accent Line (new element: .szv-cine-bottom-line) ──
   Injected in HTML as a sibling to .szv-cine-card-body,
   OR we layer it via ::after override below.
   We use a dedicated element so ::before/::after stay for sweep/top-border. */

/* Bottom accent line via a real element with class .szv-cine-bottom */
.szv-cine-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}
.szv-cine-bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,168,90,0.2) 30%,
    var(--c-gold) 50%,
    rgba(200,168,90,0.2) 70%,
    transparent 100%
  );
  transform: translateX(-105%);
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) {
  .szv-cine-card:hover .szv-cine-bottom::before {
    transform: translateX(0);
  }
}

/* ── Enhanced gold sweep (replaces the ::before animation approach) ──
   We use a new inner span .szv-sweep that JS injects, so CSS
   just defines the visual. For non-JS fallback, keep existing ::before. */
.szv-sweep {
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    108deg,
    transparent            0%,
    rgba(200,168,90,0.03) 35%,
    rgba(228,200,120,0.13) 50%,
    rgba(200,168,90,0.03) 65%,
    transparent           100%
  );
  transform: skewX(-14deg);
  pointer-events: none;
  z-index: 4;
  will-change: left, opacity;
}

/* ── Depth shadow progression ── */
@media (hover: hover) {
  .szv-cine-card:hover {
    background: var(--c-dark3);
    box-shadow:
      0  4px  12px rgba(0,0,0,0.3),
      0 16px  48px rgba(0,0,0,0.55),
      0 40px 100px rgba(0,0,0,0.45),
      0  0   0 1px rgba(200,168,90,0.18);
    z-index: 4;
    /* translateY handled by JS tilt, so we only tweak shadow here */
  }
}

/* ── Number: top-left absolute placement (overrides margin flow) ── */
.szv-cine-num {
  position: absolute;
  top: 28px;
  left: 32px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.4em;
  color: rgba(200,168,90,0.3);
  margin: 0;
  z-index: 5;
  transition: color 0.45s, opacity 0.45s;
  line-height: 1;
}
@media (hover: hover) {
  .szv-cine-card:hover .szv-cine-num {
    color: rgba(200,168,90,0.75);
  }
}

/* Re-add top padding to card body to clear the absolute number */
.szv-cine-card-body {
  padding-top: 56px;
}

/* ── Subtle inner vignette that intensifies on hover ── */
.szv-cine-card-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 0%,
    transparent 40%,
    rgba(0,0,0,0.35) 100%
  );
  z-index: 1;
  opacity: 0.6;
  transition: opacity 0.5s var(--ease-film);
  pointer-events: none;
}
@media (hover: hover) {
  .szv-cine-card:hover .szv-cine-card-bg::before {
    opacity: 0.3; /* lighten on hover to reveal art */
  }
}

/* ── Art scale on hover ── */
@media (hover: hover) {
  .szv-cine-card:hover .szv-cine-art {
    transform: scale(1.06);
    opacity: 1;
  }
}

/* ── Focus-visible accessibility (keyboard nav) ── */
.szv-cine-card:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: -2px;
}

/* ── Responsive: disable 3D tilt on touch/small ── */
@media (max-width: 768px), (hover: none) {
  .szv-cine-card {
    transform: none !important;
    will-change: auto;
  }
  .szv-cine-grid {
    perspective: none;
  }
}

/* ── Reduced motion: strip all transforms and animations ── */
@media (prefers-reduced-motion: reduce) {
  .szv-cine-card,
  .szv-cine-bottom::before,
  .szv-sweep,
  .szv-cine-art {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   VISION STUDIO — ANIMATION POLISH v19
   Scroll Progress · Shiny Text · Cinematic Timeline
   Enhanced Reveal · Typography Hierarchy
   ═══════════════════════════════════════════════════════ */

/* ── SCROLL PROGRESS LINE ── */
#vs-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  z-index: 99998;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,168,90,0.4) 10%,
    var(--c-gold) 50%,
    var(--c-gold2) 80%,
    rgba(240,223,160,0.9) 100%
  );
  box-shadow:
    0 0 8px rgba(200,168,90,0.6),
    0 0 20px rgba(200,168,90,0.25);
  transform-origin: left center;
  will-change: width;
}
#vs-progress::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold2);
  box-shadow: 0 0 8px var(--c-gold), 0 0 16px rgba(200,168,90,0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
#vs-progress.active::after { opacity: 1; }

/* ── SHINY TEXT EFFECT ── */
@keyframes vs-shine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shiny-text {
  display: inline-block;
  background: linear-gradient(
    110deg,
    var(--c-gold) 0%,
    var(--c-gold) 35%,
    var(--c-gold3) 45%,
    rgba(255,245,200,0.98) 50%,
    var(--c-gold3) 55%,
    var(--c-gold) 65%,
    var(--c-gold) 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: vs-shine 4s linear infinite;
  will-change: background-position;
}

/* Pause on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shiny-text {
    animation: none;
    -webkit-text-fill-color: var(--c-gold);
    background: none;
  }
}

/* [data-reveal] — consolidated into base definition (line ~436) */

/* ── CINEMATIC PROCESS TIMELINE ── */
.szv-process {
  background: var(--c-black);
  border-top: 1px solid rgba(200,168,90,0.08);
  border-bottom: 1px solid rgba(200,168,90,0.08);
  padding: 120px var(--gutter);
  position: relative;
  overflow: hidden;
}
/* Subtle background texture */
.szv-process::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.018) 2px,
      rgba(0,0,0,0.018) 4px
    );
  opacity: 0.4;
  pointer-events: none;
}

.szv-process-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.szv-process-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 80px;
}

.szv-process-title {
  font-family: var(--ff-display);
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 300;
  color: var(--c-white);
  line-height: 1.1;
}
.szv-process-title em {
  font-style: italic;
  color: var(--c-gold);
}

.szv-process-count {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(200,168,90,0.4);
  text-transform: uppercase;
}

/* The horizontal track */
.szv-timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* Gold base line running across all steps */
.szv-timeline-track::before {
  content: '';
  position: absolute;
  top: 20px; /* aligns with dot center */
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(200,168,90,0.12);
  z-index: 0;
}

/* Animated gold progress line — fills left-to-right on scroll into view */
.szv-timeline-track::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  height: 1px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-gold), rgba(200,168,90,0.4));
  z-index: 1;
  transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 6px rgba(200,168,90,0.3);
}
.szv-timeline-track.line-animate::after {
  width: 100%;
}

/* Individual step */
.szv-timeline-step {
  position: relative;
  padding: 0 32px 0 0;
  z-index: 2;
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.szv-timeline-step.step-in {
  opacity: 1;
  transform: none;
}
.szv-timeline-step:nth-child(1) { transition-delay: 0ms; }
.szv-timeline-step:nth-child(2) { transition-delay: 150ms; }
.szv-timeline-step:nth-child(3) { transition-delay: 300ms; }
.szv-timeline-step:nth-child(4) { transition-delay: 450ms; }

/* Step dot marker */
.szv-step-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(200,168,90,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
  background: var(--c-black);
  transition:
    border-color 0.5s var(--ease-out),
    box-shadow 0.5s var(--ease-out);
}
/* Inner dot */
.szv-step-marker::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(200,168,90,0.4);
  transition: background 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.szv-timeline-step.step-in .szv-step-marker {
  border-color: rgba(200,168,90,0.6);
  box-shadow: 0 0 16px rgba(200,168,90,0.15), inset 0 0 8px rgba(200,168,90,0.05);
}
.szv-timeline-step.step-in .szv-step-marker::after {
  background: var(--c-gold);
  transform: scale(1.3);
}

/* Step number */
.szv-step-num {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.35em;
  color: rgba(200,168,90,0.45);
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
  transition: color 0.4s;
}
.szv-timeline-step.step-in .szv-step-num {
  color: rgba(200,168,90,0.8);
}

/* Step title — larger, stronger */
.szv-step-title {
  font-family: var(--ff-display);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 300;
  color: var(--c-white);
  margin-bottom: 16px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  transition: color 0.4s;
}
.szv-timeline-step.step-in .szv-step-title {
  color: var(--c-white);
}

/* Gold accent line under title */
.szv-step-accent {
  width: 24px;
  height: 1px;
  background: var(--c-gold);
  margin-bottom: 18px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              box-shadow 0.6s;
}
.szv-timeline-step.step-in .szv-step-accent {
  transform: scaleX(1);
  box-shadow: 0 0 8px rgba(200,168,90,0.4);
}

/* Step description */
.szv-step-desc {
  font-size: 13px;
  color: var(--c-mid);
  line-height: 1.8;
  max-width: 220px;
  transition: color 0.4s;
}
.szv-timeline-step.step-in .szv-step-desc {
  color: rgba(187,187,187,0.85);
}

/* Hover state — desktop only */
@media (hover: hover) {
  .szv-timeline-step:hover .szv-step-marker {
    border-color: rgba(200,168,90,0.8);
    box-shadow: 0 0 24px rgba(200,168,90,0.2);
  }
  .szv-timeline-step:hover .szv-step-marker::after {
    background: var(--c-gold2);
  }
  .szv-timeline-step:hover .szv-step-title {
    color: var(--c-gold2);
  }
}

/* Responsive — stack vertically on mobile */
@media (max-width: 768px) {
  .szv-process { padding: 80px var(--gutter); }
  .szv-process-header { flex-direction: column; gap: 12px; margin-bottom: 56px; }
  .szv-timeline-track {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .szv-timeline-track::before {
    top: 0;
    left: 20px;
    right: auto;
    width: 1px;
    height: 100%;
    background: rgba(200,168,90,0.12);
  }
  .szv-timeline-track::after {
    top: 0;
    left: 20px;
    width: 1px;
    height: 0%;
    transition: height 1.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .szv-timeline-track.line-animate::after {
    width: 1px;
    height: 100%;
  }
  .szv-timeline-step {
    padding: 0 0 48px 64px;
  }
  .szv-step-marker {
    position: absolute;
    left: 0;
    top: 0;
  }
  .szv-step-desc { max-width: none; }
}

/* ── HOVER CLEANUP — consistent easing across interactive elements ── */
.srv-card {
  transition:
    background 0.45s var(--ease-film),
    transform 0.45s var(--ease-film),
    box-shadow 0.45s var(--ease-film) !important;
}
.pf-card {
  transition:
    transform 0.45s var(--ease-film),
    box-shadow 0.45s var(--ease-film) !important;
}
.btn-gold, .btn-ghost {
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out),
    background 0.35s var(--ease-out) !important;
}
/* Remove overflow artifact on nav hover */
.nav-menu a {
  overflow: hidden;
}
.nav-menu a::after {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── LOW POWER / REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-group] > *,
  .szv-timeline-step,
  .szv-step-accent,
  .szv-step-marker,
  .szv-step-marker::after {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .szv-timeline-track::after {
    transition: none !important;
    width: 100% !important;
  }
  #vs-progress { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   PREMIUM POLISH v11 — Vision Studio
   Scroll progress bar · Enhanced service cards · Portfolio hover
   Section headings · Workflow timeline · Micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* ── SCROLL PROGRESS BAR ─────────────────────────────────────── */
#vs-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--c-gold)   0%,
    var(--c-gold2)  55%,
    var(--c-gold3)  100%
  );
  z-index: 99995;
  pointer-events: none;
  transform-origin: left center;
  transition: width 0.08s linear;
  box-shadow: 0 0 10px rgba(200,168,90,0.55), 0 0 3px rgba(200,168,90,0.9);
  will-change: width;
}
/* Small gold pulse at the leading edge */
#vs-progress::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--c-gold3);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(240,223,160,0.8);
  opacity: 0;
  transition: opacity 0.2s;
}
#vs-progress.active::after {
  opacity: 1;
}

/* ── SERVICE CARDS — premium polish ─────────────────────────────
   Layered gold border reveal, number display, icon scale        */
.srv-card {
  position: relative;
  overflow: hidden;
}
/* Gold gradient background reveal on hover */
.srv-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to top, rgba(200,168,90,0.10) 0%, transparent 100%);
  transition: height 0.55s var(--ease-film);
  z-index: 0;
  pointer-events: none;
}
.srv-card:hover::before {
  height: 100%;
}
/* Left gold accent border reveal */
.srv-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--c-gold);
  transition: height 0.6s var(--ease-film);
  z-index: 1;
}
.srv-card:hover::after {
  height: 100%;
}
/* Service title gold on hover */
.srv-title {
  transition: color 0.35s var(--ease-film);
  position: relative;
  z-index: 2;
}
.srv-card:hover .srv-title {
  color: var(--c-gold2);
}
/* Content z-index fix */
.srv-card .srv-desc,
.srv-card .srv-tags,
.srv-card .srv-icon,
.srv-card .srv-link {
  position: relative;
  z-index: 2;
}
/* Animated arrow on hover */
.srv-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  margin-top: 18px;
  position: relative;
  z-index: 2;
}
.srv-arrow::after {
  content: '\2192';
  font-family: inherit;
  font-size: 14px;
  transition: transform 0.3s var(--ease-out);
}
.srv-card:hover .srv-arrow {
  opacity: 1;
  transform: translateX(0);
}
.srv-card:hover .srv-arrow::after {
  transform: translateX(4px);
}

/* ── PORTFOLIO PLAY BUTTON — centered cinematic ──────────────── */
.pf-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(200,168,90,0.12);
  border: 1.5px solid rgba(200,168,90,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity   0.4s var(--ease-out),
    transform 0.45s var(--ease-out),
    background 0.3s,
    border-color 0.3s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 8;
  pointer-events: none;
}
.pf-play-btn::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top:    8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left:   14px solid var(--c-gold2);
  margin-left: 3px;
  flex-shrink: 0;
}
/* Pulse ring */
.pf-play-btn::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(200,168,90,0.15);
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.8s var(--ease-out), opacity 0.8s;
}
@media (hover: hover) {
  .pf-card:hover .pf-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .pf-card:hover .pf-play-btn::after {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* ── PORTFOLIO INFO PANEL — slides up on hover ───────────────── */
.pf-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 18px 20px;
  background: linear-gradient(to top, rgba(3,3,3,0.98) 0%, rgba(3,3,3,0.8) 65%, transparent 100%);
  transform: translateY(6px);
  opacity: 0;
  transition: transform 0.45s var(--ease-film), opacity 0.45s var(--ease-film);
  z-index: 7;
}
@media (hover: hover) {
  .pf-card:hover .pf-info {
    transform: translateY(0);
    opacity: 1;
  }
}
.pf-cat-tag {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: 0.34em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}
.pf-title-text {
  font-family: var(--ff-display);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 300;
  line-height: 1.2;
  color: var(--c-white);
}

/* ── BUTTON MICRO-INTERACTIONS ───────────────────────────────── */
.btn-gold:active,
.btn-ghost:active {
  transform: scale(0.97) !important;
}
.btn-gold:hover {
  box-shadow:
    0 8px 32px rgba(200,168,90,0.3),
    0 2px 8px  rgba(200,168,90,0.15) !important;
}
.btn-ghost {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.btn-ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200,168,90,0.07);
  transform: translateX(-101%);
  transition: transform 0.4s var(--ease-film);
  z-index: -1;
}
.btn-ghost:hover::before {
  transform: translateX(0);
}

/* ── CTA BAND — gold rule accents ────────────────────────────── */
.cta-band {
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,168,90,0.5) 50%, transparent 100%);
}
.cta-band::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,168,90,0.3) 50%, transparent 100%);
}

/* ── STAT COUNTER — gold shimmer while counting ──────────────── */
@keyframes stat-gold-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.stat-num.counting {
  background: linear-gradient(
    90deg,
    var(--c-gold) 0%,
    var(--c-gold2) 30%,
    var(--c-gold3) 50%,
    var(--c-gold2) 70%,
    var(--c-gold)  100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: stat-gold-shimmer 1.2s linear infinite;
  will-change: background-position;
}

/* .testi-card — consolidated into base definition */

/* ── BLOG CARDS — gold bottom rule ───────────────────────────── */
.blog-card {
  position: relative;
  overflow: hidden;
}
.blog-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.blog-card:hover::after {
  transform: scaleX(1);
}

/* ── LOGO MARQUEE — soft fade masks ─────────────────────────── */
.logos-track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* ── GLOW DIVIDERS — center bloom ───────────────────────────── */
.glow-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent     0%,
    rgba(200,168,90,0.2)  15%,
    rgba(200,168,90,0.55) 50%,
    rgba(200,168,90,0.2)  85%,
    transparent    100%
  );
  position: relative;
  margin: 0;
}
.glow-divider::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 30%;
  right: 30%;
  height: 11px;
  background: radial-gradient(ellipse at center, rgba(200,168,90,0.18), transparent 70%);
  filter: blur(4px);
}

/* ── FOOTER — top gold rule ──────────────────────────────────── */
footer {
  position: relative;
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200,168,90,0.22) 25%,
    rgba(200,168,90,0.45) 50%,
    rgba(200,168,90,0.22) 75%,
    transparent
  );
}

/* ── REVEAL GROUP STAGGER DELAYS ─────────────────────────────── */
[data-reveal-group] > *:nth-child(1)  { transition-delay: 0.00s !important; }
[data-reveal-group] > *:nth-child(2)  { transition-delay: 0.07s !important; }
[data-reveal-group] > *:nth-child(3)  { transition-delay: 0.14s !important; }
[data-reveal-group] > *:nth-child(4)  { transition-delay: 0.21s !important; }
[data-reveal-group] > *:nth-child(5)  { transition-delay: 0.28s !important; }
[data-reveal-group] > *:nth-child(6)  { transition-delay: 0.35s !important; }
[data-reveal-group] > *:nth-child(7)  { transition-delay: 0.42s !important; }
[data-reveal-group] > *:nth-child(8)  { transition-delay: 0.49s !important; }
[data-reveal-group] > *:nth-child(9)  { transition-delay: 0.56s !important; }
[data-reveal-group] > *:nth-child(10) { transition-delay: 0.63s !important; }
[data-reveal-group] > *:nth-child(11) { transition-delay: 0.70s !important; }
[data-reveal-group] > *:nth-child(12) { transition-delay: 0.77s !important; }

/* ── SECTION HEADING — gold underline reveal ─────────────────── */
.section-title-line {
  position: relative;
  display: inline-block;
}
.section-title-line::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--c-gold), transparent);
  transition: width 0.9s var(--ease-out);
}
.section-title-line.revealed::after {
  width: 100%;
}

/* ── CONTACT FORM FIELDS ─────────────────────────────────────── */
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: var(--c-dark2);
  border: 1px solid var(--c-grey1);
  color: var(--c-white);
  font-family: var(--ff-ui);
  font-size: 14px;
  padding: 14px 18px;
  width: 100%;
  transition: border-color 0.3s var(--ease-film), box-shadow 0.3s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 1px rgba(200,168,90,0.18);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--c-mid);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.contact-form label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--c-gold);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── IMAGE LAZY FADE ─────────────────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.6s var(--ease-film);
}
img[loading="lazy"].loaded {
  opacity: 1;
}

/* ── FOCUS RING — accessibility ──────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* ── MODAL — cinematic backdrop ──────────────────────────────── */
#modal {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* ── ABOUT SECTION — horizontal divider ─────────────────────── */
.about-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200,168,90,0.32) 40%,
    rgba(200,168,90,0.32) 60%,
    transparent
  );
  margin: clamp(32px,4vw,56px) 0;
}

/* ── LOW POWER MODE ─────────────────────────────────────────── */
.low-power-mode .srv-card::before,
.low-power-mode .srv-card::after,
.low-power-mode .testi-card::after,
.low-power-mode .blog-card::after,
.low-power-mode .btn-ghost::before {
  transition: none !important;
  animation: none !important;
}

/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #vs-progress { transition: none !important; }
  #vs-progress::after { display: none; }
  .srv-card::before,
  .srv-card::after,
  .srv-arrow,
  .pf-play-btn,
  .pf-info,
  .btn-ghost::before,
  .testi-card::after,
  .blog-card::after,
  .section-title-line::after { transition: none !important; }
  .stat-num.counting {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--c-gold) !important;
  }
}

/* ── PRINT ───────────────────────────────────────────────────── */
@media print {
  #vs-progress,
  #noise,
  #loader,
  #cur-dot,
  #cur-ring,
  #cinematic-grade,
  #wipe { display: none !important; }
}


/* ============================================================
   SECTION: redesign-v18.css — merged in
   Bugfixes: blog CTA grid, cursor iframe overlay,
   portfolio play button, typography, hero HUD,
   scroll progress bar, data-reveal, nav, contact, responsive
   ============================================================ */

/* ═══════════════════════════════════════════════════════
   VISION STUDIO — CINEMATIC REDESIGN v18
   Award-Level Upgrade — 3 Bug Fixes + Full Visual System
   ═══════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────
   BUG FIX 1 — BLOG CTA FRAME MISALIGNMENT
   ────────────────────────────────────────────────────── */
.blog-cta {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 14px 36px !important;
  padding: 22px 28px !important;
}
.blog-cta > *:not(.btn-gold) { grid-column: 1; }
.blog-cta .btn-gold,
.blog-cta > a.btn-gold { grid-column: 2; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  .blog-cta { grid-template-columns: 1fr !important; gap: 16px !important; }
  .blog-cta .btn-gold,
  .blog-cta > a.btn-gold { grid-column: 1; }
}
.cta-section { width: 100% !important; box-sizing: border-box !important; text-align: center !important; }
.cta-section h2, .cta-section p { max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
.cta-section .cta-links { justify-content: center !important; align-items: center !important; }

/* ──────────────────────────────────────────────────────
   BUG FIX 2 — VIDEO PLAYER CURSOR COVERAGE
   ────────────────────────────────────────────────────── */
.vid-cursor-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: auto;
  cursor: none !important;
  background: transparent;
}
.vid-cursor-overlay.dismissed { pointer-events: none; display: none; }
.pf-vimeo-preview { pointer-events: none !important; }
.modal-video .vid-cursor-overlay { display: none !important; }

/* ──────────────────────────────────────────────────────
   BUG FIX 3 — PORTFOLIO PLAY BUTTON CINEMATIC REDESIGN
   ────────────────────────────────────────────────────── */
.play-ring-lg, .tri { display: none !important; }
.pf-play-btn {
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%,-50%) scale(0.68) !important;
  opacity: 0 !important; z-index: 8 !important;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.45s cubic-bezier(0.16,1,0.3,1) !important;
  pointer-events: none;
}
@media (hover: hover) {
  .pf-card:hover .pf-play-btn { transform: translate(-50%,-50%) scale(1) !important; opacity: 1 !important; }
}
@media (hover: none) {
  .pf-play-btn { transform: translate(-50%,-50%) scale(0.88) !important; opacity: 0.85 !important; }
}
.pf-play-cinematic { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.pf-play-line-top, .pf-play-line-bottom {
  display: block; height: 1px; width: 32px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,168,90,0.5) 50%, transparent 100%);
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}
.pf-card:hover .pf-play-line-top,
.pf-card:hover .pf-play-line-bottom {
  width: 64px;
  background: linear-gradient(90deg, transparent 0%, var(--c-gold) 50%, transparent 100%);
}
.pf-play-text-wrap { display: flex; align-items: center; gap: 12px; }
.pf-play-aperture {
  width: 34px; height: 34px;
  border: 1px solid rgba(200,168,90,0.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; flex-shrink: 0;
  background: rgba(3,3,3,0.4); backdrop-filter: blur(6px);
  transition: border-color 0.4s, box-shadow 0.4s, background 0.4s;
}
.pf-card:hover .pf-play-aperture {
  border-color: var(--c-gold);
  box-shadow: 0 0 16px rgba(200,168,90,0.35), inset 0 0 8px rgba(200,168,90,0.06);
  background: rgba(200,168,90,0.08);
}
.pf-play-aperture::before {
  content: ''; width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent rgba(200,168,90,0.7);
  margin-left: 2px; transition: border-color 0.3s;
}
.pf-card:hover .pf-play-aperture::before { border-color: transparent transparent transparent var(--c-gold); }
.pf-play-aperture::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(200,168,90,0.18); opacity: 0; transition: opacity 0.35s;
}
.pf-card:hover .pf-play-aperture::after { opacity: 1; animation: aperture-pulse 2.8s ease-in-out infinite; }
@keyframes aperture-pulse {
  0%,100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.45); opacity: 0; }
}
.pf-play-word {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.48em;
  color: rgba(255,255,255,0.88); text-transform: uppercase; white-space: nowrap;
  transition: color 0.3s, text-shadow 0.3s;
  text-shadow: 0 0 16px rgba(200,168,90,0.25);
}
.pf-card:hover .pf-play-word { color: var(--c-gold2); text-shadow: 0 0 24px rgba(200,168,90,0.5); }

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY SCALE
   ══════════════════════════════════════════════════════ */
.hero-h1 { font-size: clamp(54px,9.5vw,136px) !important; line-height: 0.91 !important; letter-spacing: -0.028em !important; }
.hero-h1 em { letter-spacing: -0.03em !important; }
.hero-sub { font-size: clamp(14px,1.55vw,18px) !important; line-height: 1.82 !important; color: rgba(187,185,178,0.95) !important; }
.sec-title { font-size: clamp(44px,6.2vw,88px) !important; line-height: 1.0 !important; letter-spacing: -0.018em !important; }
.cta-title { font-size: clamp(48px,8vw,118px) !important; line-height: 0.96 !important; letter-spacing: -0.03em !important; }
.post-h1 { font-size: clamp(36px,6vw,80px) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; }

/* ══════════════════════════════════════════════════════
   HERO FILM HUD
   ══════════════════════════════════════════════════════ */
.hero-frame-counter {
  position: absolute; top: calc(var(--nav-h) + 18px); right: var(--gutter);
  z-index: 4; display: flex; align-items: center; gap: 12px;
  pointer-events: none; user-select: none;
}
.hero-frame-rec {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.28em;
  color: rgba(215,55,55,0.6); animation: rec-blink 2.4s ease-in-out infinite;
}
.hero-frame-rec::before {
  content: ''; width: 5px; height: 5px;
  background: rgba(215,55,55,0.65); border-radius: 50%; display: inline-block;
}
@keyframes rec-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
.hero-frame-num { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.25em; color: rgba(200,168,90,0.4); font-variant-numeric: tabular-nums; }
.hero-frame-label { font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.36em; color: rgba(200,168,90,0.22); text-transform: uppercase; }

/* ══════════════════════════════════════════════════════
   SERVICES GHOST NUMBERS
   ══════════════════════════════════════════════════════ */
.srv-card { isolation: isolate; }
.srv-num {
  position: absolute; top: 14px; right: 22px;
  font-family: var(--ff-display); font-size: 108px; font-weight: 300; line-height: 1;
  color: rgba(200,168,90,0.04); letter-spacing: -0.05em;
  pointer-events: none; user-select: none; z-index: 0;
  transition: color 0.7s var(--ease-film);
}
.srv-card:hover .srv-num { color: rgba(200,168,90,0.09); }
.srv-title, .srv-desc, .srv-link, .srv-icon { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════
   PORTFOLIO
   ══════════════════════════════════════════════════════ */
.pf-grid { gap: 4px !important; padding: 0 !important; }
@media (min-width: 1440px) { .pf-grid { grid-template-columns: repeat(4,1fr) !important; } }
.pf-title-overlay {
  background: linear-gradient(to top,rgba(3,3,3,0.98) 0%,rgba(3,3,3,0.72) 35%,rgba(3,3,3,0.22) 68%,transparent 100%) !important;
}
.pf-overlay-title { font-size: clamp(17px,2.5vw,32px) !important; }

/* ══════════════════════════════════════════════════════
   DISCIPLINE GRID
   ══════════════════════════════════════════════════════ */
.discipline-item { padding: 44px 34px 40px !important; }
.discipline-name { font-size: clamp(26px,3vw,46px) !important; line-height: 1.08 !important; }

/* ══════════════════════════════════════════════════════
   PROCESS STEPS
   ══════════════════════════════════════════════════════ */
.proc-step-n { font-size: 108px !important; color: rgba(200,168,90,0.05) !important; letter-spacing: -0.04em !important; }
.proc-step:hover .proc-step-n { color: rgba(200,168,90,0.13) !important; }
.proc-step-t { font-family: var(--ff-display) !important; font-size: 22px !important; font-weight: 400 !important; }

/* ══════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════ */
.testi-text { font-size: clamp(15px,1.65vw,20px) !important; line-height: 1.68 !important; }

/* ══════════════════════════════════════════════════════
   ABOUT
   ══════════════════════════════════════════════════════ */
.about-quote {
  font-size: clamp(19px,2.4vw,30px) !important; line-height: 1.5 !important;
  border-top: none !important; border-bottom: none !important;
  border-left: 2px solid var(--c-gold) !important;
  padding: 20px 0 20px 32px !important; margin: 40px 0 !important;
}
.about-quote::before { display: none !important; }

/* ══════════════════════════════════════════════════════
   BLOG CARDS
   ══════════════════════════════════════════════════════ */
.blog-title { font-size: clamp(17px,2vw,24px) !important; line-height: 1.25 !important; }
.blog-excerpt { font-size: 13px !important; line-height: 1.78 !important; }

/* ══════════════════════════════════════════════════════
   STATS
   ══════════════════════════════════════════════════════ */
.h-stat-n { font-size: clamp(26px,3.2vw,40px) !important; letter-spacing: -0.02em !important; }

/* ══════════════════════════════════════════════════════
   MARQUEE MASKS
   ══════════════════════════════════════════════════════ */
.marquee-fade--l { width: clamp(80px,12vw,180px) !important; background: linear-gradient(to right, var(--c-black) 0%, rgba(3,3,3,0.8) 40%, transparent 100%) !important; }
.marquee-fade--r { width: clamp(80px,12vw,180px) !important; background: linear-gradient(to left, var(--c-black) 0%, rgba(3,3,3,0.8) 40%, transparent 100%) !important; }

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */
.modal-inner { border: 1px solid rgba(200,168,90,0.08); box-shadow: 0 48px 120px rgba(0,0,0,0.85), 0 0 0 1px rgba(200,168,90,0.05); }

/* ── PROJEKT RÉSZLETEI — Gold CTA Button in modal ── */
.modal-detail-link {
  display: block !important;
  text-align: center;
  margin: 16px 20px 20px !important;
  padding: 18px 24px !important;
  background: var(--c-gold) !important;
  color: #000 !important;
  font-family: var(--ff-mono) !important;
  font-size: 13px !important;
  letter-spacing: .2em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(200,168,90,.45);
  border: none !important;
  transition: all .2s !important;
}

/* ══════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
   ══════════════════════════════════════════════════════ */
#vs-progress {
  position: fixed !important; top: 0 !important; left: 0 !important;
  height: 2px !important; z-index: 99999 !important; pointer-events: none !important;
  background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold2) 55%, var(--c-gold3) 100%) !important;
  box-shadow: 0 0 10px rgba(200,168,90,0.65), 0 0 24px rgba(200,168,90,0.22) !important;
  width: 0 !important;
}
#vs-progress::after {
  content: ''; position: absolute; right: -1px; top: -2px;
  width: 6px; height: 6px;
  background: var(--c-gold3); border-radius: 50%;
  box-shadow: 0 0 12px var(--c-gold), 0 0 5px var(--c-gold3);
}

/* [data-reveal] — consolidated into base definition */
body:not(.gsap-ready) [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ══════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════ */
#nav.solid { border-bottom: 1px solid rgba(200,168,90,0.10) !important; }
.nav-gem { animation: gem-idle 6s ease-in-out infinite; }
@keyframes gem-idle { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 14px rgba(200,168,90,0.18); } }

/* ══════════════════════════════════════════════════════
   INTERNAL LINKS
   ══════════════════════════════════════════════════════ */
.lc-p a, .about-body a, .post-content a { color: var(--c-gold); text-decoration: none; position: relative; }
.lc-p a::after, .about-body a::after, .post-content a::after {
  content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px;
  background: var(--c-gold2); transition: width 0.42s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover) {
  .lc-p a:hover::after, .about-body a:hover::after, .post-content a:hover::after { width: 100%; }
}

/* ══════════════════════════════════════════════════════
   CTA BG WORD
   ══════════════════════════════════════════════════════ */
.cta-bg-word {
  font-size: clamp(110px,18vw,240px) !important;
  -webkit-text-stroke: 1px rgba(200,168,90,0.055) !important;
  animation: cta-word-drift 12s ease-in-out infinite !important;
}
@keyframes cta-word-drift {
  0%,100% { transform: translateX(-1%) scale(1); opacity: 1; }
  50%      { transform: translateX(1%) scale(1.015); opacity: 0.72; }
}

/* ══════════════════════════════════════════════════════
   CONTACT FORM
   ══════════════════════════════════════════════════════ */
.contact-form input, .contact-form textarea, .contact-form select {
  background: rgba(14,14,14,0.9) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(200,168,90,0.22) !important;
  border-radius: 0 !important;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: transparent !important;
  border-bottom-color: var(--c-gold) !important;
  box-shadow: 0 2px 0 rgba(200,168,90,0.12) !important;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-frame-counter { display: none; }
  .cta-bg-word { font-size: clamp(80px,22vw,130px) !important; }
  .discipline-name { font-size: clamp(22px,5vw,34px) !important; }
  .sec-title { font-size: clamp(36px,8vw,60px) !important; }
}
@media (max-width: 480px) {
  .cta-title { font-size: clamp(40px,11vw,72px) !important; }
  .hero-h1   { font-size: clamp(44px,12vw,80px) !important; }
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero-frame-rec, .nav-gem, .cta-bg-word { animation: none !important; }
  .pf-play-btn, .pf-play-aperture, .pf-play-line-top, .pf-play-line-bottom, .pf-play-word { transition: none !important; }
  .pf-play-aperture::after { animation: none !important; }
  [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
  .vid-cursor-overlay { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════ */
@media print {
  .hero-frame-counter, .vid-cursor-overlay, #vs-progress { display: none !important; }
}


/* ============================================================
   SECTION: vs-final.css — merged in (LOADS LAST — highest precedence)
   FAQ accordion, additional overrides
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   VISION STUDIO — PRODUCTION POLISH v20
   Single authoritative stylesheet for all overrides.
   Loaded LAST — takes precedence over main.css & redesign-v18.css
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. FAQ ACCORDION — CSS grid-row approach
   NO max-height hacks. No JavaScript height measurement.
   The grid-template-rows trick: 0fr → 1fr is silky smooth,
   never breaks layout, works perfectly on mobile.
   ───────────────────────────────────────────────────────────── */

/* Reset any competing FAQ styles */
/* individual FAQ overrides below */

.faq-list,
.faq {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 1000px;
  width: 100%;
  box-sizing: border-box;
}

.faq-item {
  background: #111111;
  border-left: 2px solid transparent;
  transition: border-color 0.4s ease, background 0.4s ease;
  overflow: hidden;
  /* Prevent sub-pixel gap between items */
  margin-bottom: 0;
}

.faq-item.vs-open {
  border-left-color: #c8a85a;
  background: rgba(200,168,90,0.03);
}

/* The question trigger */
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 28px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff-ui, 'Syne', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  text-align: left;
  line-height: 1.45;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: color 0.25s ease;
  box-sizing: border-box;
}

.faq-q:focus-visible {
  outline: 2px solid rgba(200,168,90,0.5);
  outline-offset: -2px;
}

.faq-q:hover {
  color: #c8a85a;
}

/* Arrow icon — pure CSS, no SVG needed */
.faq-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(200,168,90,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.35s ease;
  background: transparent;
  pointer-events: none;
}

/* Chevron drawn with border */
.faq-arrow::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #c8a85a;
  border-bottom: 1.5px solid #c8a85a;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.35s ease;
}

.faq-item.vs-open .faq-arrow {
  border-color: #c8a85a;
  background: rgba(200,168,90,0.1);
}

.faq-item.vs-open .faq-arrow::before {
  transform: rotate(-135deg) translateY(-2px);
}

/* ── The grid-row animation — THIS IS THE KEY ── */
/* Body wraps content in a grid; rows transition 0fr → 1fr */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  /* Isolate layout so accordion doesn't reflow surrounding content */
  contain: layout style;
}

.faq-item.vs-open .faq-body {
  grid-template-rows: 1fr;
}

/* Inner content: min-height:0 is required for the grid trick */
.faq-body-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-a {
  padding: 4px 28px 24px;
  font-size: 14px;
  color: rgba(218,212,200,0.82);
  line-height: 1.85;
}

.faq-a p {
  margin: 0 0 10px;
  font-size: 14px;
  color: rgba(218,212,200,0.82);
  line-height: 1.85;
}

.faq-a p:last-child { margin-bottom: 0; }
.faq-a strong { color: #ffffff; font-weight: 600; }
.faq-a a { color: #c8a85a; text-decoration: none; border-bottom: 1px solid rgba(200,168,90,0.3); }

/* Remove ALL legacy icon styles */
.faq-icon { display: none !important; }
.faq-q::after { display: none !important; content: none !important; }
.faq-item[open] .faq-q::after { display: none !important; }

/* Remove old max-height approach entirely */
.faq-body[style*="max-height"] {
  /* strip inline max-height — our grid approach overrides it */
}

/* ─────────────────────────────────────────────────────────────
   2. SERVICE CARDS — forced 3-col desktop layout
   Maximum specificity to beat all competing rules.
   ───────────────────────────────────────────────────────────── */
.srv-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2px !important;
  background: rgba(200,168,90,0.08) !important;
  margin-top: 72px !important;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.srv-card {
  padding: 52px 44px 48px !important;
  min-height: 300px !important;
  min-width: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
  background: #111111 !important;
  transition: background 0.6s cubic-bezier(0.76,0,0.24,1) !important;
}

.srv-card:hover {
  background: #161616 !important;
}

.srv-icon {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 28px !important;
  opacity: 0.7 !important;
  flex-shrink: 0 !important;
}

.srv-title {
  font-size: clamp(22px, 2vw, 30px) !important;
  margin-bottom: 16px !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  opacity: 0.9 !important;
  color: var(--c-white) !important;
  white-space: nowrap !important;
}

.srv-card:hover .srv-title {
  opacity: 1 !important;
  color: var(--c-gold2) !important;
}

.srv-desc {
  font-size: 13.5px !important;
  line-height: 1.82 !important;
  margin-bottom: 32px !important;
  flex: 1 !important;
}

.srv-link {
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--ff-mono, 'Space Mono', monospace) !important;
  font-size: 9.5px !important;
  letter-spacing: 0.32em !important;
  color: #c8a85a !important;
  text-transform: uppercase !important;
}

/* Tablet: 2 columns */
@media (max-width: 1100px) {
  .srv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: single column */
@media (max-width: 768px) {
  .srv-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  .srv-card {
    padding: 40px 32px 36px !important;
    min-height: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   3. LOGO SECTION — cinematic brand strip (v35 final polish)
   Unified white look · premium glow · animated gold lines
   Smooth 30s infinite scroll — no hover pause, no jumps
   ───────────────────────────────────────────────────────────── */

/* ── Section: premium spacing + animated gold dividers ── */
.logos-section {
  margin: 140px 0 !important;
  padding: 50px var(--gutter) !important;
  overflow: hidden !important;
  position: relative !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* ── Gold lines removed from logos-section — moved to logo-strip ── */
.logos-section::before,
.logos-section::after {
  display: none !important;
}

/* ── Brand strip container — floats as a premium separate layer ── */
.logo-strip {
  position: relative !important;
  overflow: hidden !important;
  padding: 40px 0 !important;
  margin-top: clamp(28px, 4vw, 48px) !important;
  background: rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Animated gold lines on logo-strip top + bottom ── */
.logo-strip::before,
.logo-strip::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 200% !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212,175,55,0.9),
    transparent
  ) !important;
  animation: goldMove 6s linear infinite !important;
  box-shadow: 0 0 12px rgba(212,175,55,0.6) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

.logo-strip::before {
  top: 0 !important;
}

.logo-strip::after {
  bottom: 0 !important;
}

@keyframes goldMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Scrolling track — 30s, linear, no hover pause ── */
.logo-track {
  display: flex !important;
  width: max-content !important;
  animation: scrollLogos 30s linear infinite !important;
  will-change: transform !important;
  position: relative !important;
  z-index: 2 !important;
}

@keyframes scrollLogos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Each row of logos ── */
.logo-row {
  display: flex !important;
  gap: 48px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  padding-right: 48px !important;
}

/* ── Individual logo slot ── */
.logo-item {
  width: 160px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* ── Logo images — unified white + premium glow ── */
.logo-item img {
  height: 60px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
  display: block !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,0.15)) !important;
  opacity: 0.9 !important;
  transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease !important;
}

/* ── Hover: gold glow + scale ── */
@media (hover: hover) {
  .logo-item:hover img {
    filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(212,175,55,0.55)) !important;
    opacity: 1 !important;
    transform: scale(1.07) !important;
  }
}

/* ── Edge fade masks ── */
.logo-fade {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: clamp(80px, 10vw, 180px) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.logo-fade--l {
  left: 0 !important;
  background: linear-gradient(to right, var(--c-black, #030303) 0%, rgba(3,3,3,0.6) 60%, transparent 100%) !important;
}

.logo-fade--r {
  right: 0 !important;
  background: linear-gradient(to left, var(--c-black, #030303) 0%, rgba(3,3,3,0.6) 60%, transparent 100%) !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none !important; }
  .logos-section::before,
  .logos-section::after { animation: none !important; }
}

/* ── Kill any legacy marquee rules that might leak in ── */
.marquee-wall, .marquee-track, .marquee-logo, .marquee-set,
.marquee-gold-line, .marquee-fade { display: none !important; }

/* ─────────────────────────────────────────────────────────────
   4. PROCESS TIMELINE — smooth, no jumping
   Uses IntersectionObserver (JS). CSS provides smooth transitions.
   ───────────────────────────────────────────────────────────── */
.wf3-spine-fill {
  transition: height 1.2s cubic-bezier(0.16,1,0.3,1) !important;
  will-change: height !important;
}

.wf3-step {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1) !important;
  will-change: opacity, transform !important;
}

.wf3-step.vs-lit {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

body:not(.gsap-ready) .wf3-step {
  opacity: 1 !important;
  transform: none !important;
}

.wf3-node-core {
  transition: background 0.6s ease, box-shadow 0.6s ease !important;
}

.wf3-node-ring {
  transition: border-color 0.6s ease, box-shadow 0.6s ease !important;
}

.wf3-node-glow {
  transition: opacity 0.6s ease !important;
}

/* ─────────────────────────────────────────────────────────────
   5. WHATSAPP BUTTON — floating, minimal, premium
   ───────────────────────────────────────────────────────────── */
#vs-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 0;
}

.vs-wa-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #141414;
  border: 1px solid rgba(200,168,90,0.28);
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.55);
  transition: background 0.4s ease, border-color 0.4s ease,
              box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34,1.4,0.64,1);
  position: relative;
  overflow: hidden;
}

.vs-wa-link:hover {
  background: #1ebe5d;
  border-color: transparent;
  box-shadow: 0 6px 28px rgba(30,190,93,0.4);
  transform: translateY(-3px) scale(1.06);
}

.vs-wa-link svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Idle pulse ring */
.vs-wa-link::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(200,168,90,0.25);
  opacity: 0;
  animation: wa-ring 3.5s ease-in-out infinite;
}

@keyframes wa-ring {
  0%   { transform: scale(0.9); opacity: 0; }
  40%  { opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Tooltip label */
.vs-wa-label {
  position: absolute;
  right: 62px;
  white-space: nowrap;
  background: #141414;
  border: 1px solid rgba(200,168,90,0.2);
  color: rgba(255,255,255,0.85);
  font-family: var(--ff-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#vs-whatsapp:hover .vs-wa-label {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  #vs-whatsapp { bottom: 20px; right: 16px; }
  .vs-wa-link { width: 48px; height: 48px; }
  .vs-wa-label { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   6. GLOBAL TRANSITION POLISH — cinematic feel, no harshness
   ───────────────────────────────────────────────────────────── */

/* Buttons: slower, more luxurious */
.btn-gold {
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
              background 0.5s cubic-bezier(0.76,0,0.24,1),
              box-shadow 0.5s cubic-bezier(0.76,0,0.24,1) !important;
}

.btn-ghost {
  transition: color 0.45s cubic-bezier(0.76,0,0.24,1),
              border-color 0.45s cubic-bezier(0.76,0,0.24,1) !important;
}

/* Nav links */
.nav-menu a {
  transition: color 0.35s ease !important;
}

/* Blog cards */
.blog-card {
  transition: background 0.45s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1) !important;
}

/* .testi-card transition — consolidated into base definition */

/* Footer links hover indent */
.ft-links a {
  display: inline-block;
  transition: color 0.3s ease, padding-left 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}

@media (hover: hover) {
  .ft-links a:hover { padding-left: 6px; }
  .stat-cell:hover  { transform: translateY(-3px); }
}

.stat-cell {
  transition: transform 0.45s cubic-bezier(0.34,1.4,0.64,1) !important;
}

/* ─────────────────────────────────────────────────────────────
   7. NAV ACTIVE STATE — clean, consistent
   ───────────────────────────────────────────────────────────── */
.nav-menu a.active {
  color: #c8a85a !important;
}

.nav-menu a.active::after {
  right: 0 !important;
}

/* ─────────────────────────────────────────────────────────────
   8. CTA WORD DRIFT — slower
   ───────────────────────────────────────────────────────────── */
.cta-bg-word {
  animation: cta-word-drift 18s ease-in-out infinite !important;
}

/* ─────────────────────────────────────────────────────────────
   9. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  .marquee-wall::before, .marquee-wall::after { animation: none !important; }
  .vs-wa-link::after { animation: none !important; }
  .faq-body { transition: none !important; }
  .wf3-step { transition: none !important; }
  .cta-bg-word { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* Hide old inline SVG arrows — CSS chevron handles it */
.faq-arrow svg {
  display: none !important;
}

/* Neutralize main.css max-height approach for .faq-body */
.faq-body {
  max-height: none !important;
  overflow: visible !important;
  transition: grid-template-rows 0.35s ease !important;
}

/* The faq-body-inner handles the clip */
.faq-body-inner {
  overflow: hidden !important;
  min-height: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   VISION STUDIO — BUG FIX PATCH
   Tasks: FAQ width · FAQ layout · CTA centering · Marquee direction
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   FAQ LAYOUT — constrain width, center, no overflow stretch
   ───────────────────────────────────────────────────────────── */

/* faq.html — the .faq-inner wrapper */
.faq-inner {
  max-width: 1000px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Service / iparagak pages — .landing-content wraps FAQ naturally.
   Ensure .faq inside it also constrains itself */
.landing-content .faq,
.landing-content .faq-list {
  max-width: 100% !important; /* inherit 900px from .landing-content */
}

/* Standalone .faq sections (no .faq-inner / .landing-content parent) */
.faq-section .faq,
.faq-section .faq-list {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove any leftover overflow or width issues */
.faq-item {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ─────────────────────────────────────────────────────────────
   CTA BAND — correct centering and padding balance
   ───────────────────────────────────────────────────────────── */

.cta-band {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: clamp(80px, 10vw, 140px) !important;
  padding-bottom: clamp(80px, 10vw, 140px) !important;
  box-sizing: border-box !important;
}

.cta-band .sec-label {
  justify-content: center !important;
}

.cta-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 820px !important;
  width: 100% !important;
}

.cta-sub {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 480px !important;
}

.cta-btns {
  display: flex !important;
  gap: 18px !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   LOGO MARQUEE — legacy block removed; handled by .logo-track above
   ───────────────────────────────────────────────────────────── */

/* scrollLogos keyframe defined in logo section above */



/* ══════════════════════════════════════════════════════════════
   VISION STUDIO — CINEMATIC COLUMN WIPE  v3
   ──────────────────────────────────────────────────────────────
   5 equal-width columns, each 20% of viewport width.
   Gold glow on the RIGHT edge of each column (vertical divider).
   ONLY transform:translateY — never top/left/height changes.
   No staircase: the vertical gold edge is Y-position–agnostic.
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay container ─────────────────────────────────────── */
.vs-wipe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  pointer-events: none;
  display: flex;
  /* Default: invisible. Columns are translateY(-100%) = above screen. */
}

/* ── Individual column ─────────────────────────────────────── */
.vs-wipe-col {
  /* Each column is exactly 1/5 of the viewport width */
  flex: 1 1 20%;
  height: 100%;

  /* Pure deep black — no tint, no noise */
  background: #050505;

  /* START position: completely above the viewport */
  transform: translateY(-100%);

  /* GPU-composited only — no layout repaints */
  will-change: transform;

  /* NO box-shadow: side glow lines removed entirely.
     Columns are seamless — no visible borders or dividers. */
  box-shadow: none;

  /* Soft bottom-edge fade — eliminates the hard leading line.
     The gradient mask blends the bottom 8% into transparent,
     removing any bright/sharp horizontal edge during the wipe. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 92%,
    transparent 100%
  );
}

/* ── OUTGOING: columns drop top → bottom ──────────────────── */
.vs-wipe--out .vs-wipe-col {
  animation: vs-col-drop 400ms cubic-bezier(0.4, 0.0, 0.2, 1) both;
}

.vs-wipe--out .vs-wipe-col:nth-child(1) { animation-delay:  0ms; }
.vs-wipe--out .vs-wipe-col:nth-child(2) { animation-delay: 28ms; }
.vs-wipe--out .vs-wipe-col:nth-child(3) { animation-delay: 56ms; }
.vs-wipe--out .vs-wipe-col:nth-child(4) { animation-delay: 84ms; }
.vs-wipe--out .vs-wipe-col:nth-child(5) { animation-delay:112ms; }

@keyframes vs-col-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0%);    }
}

/* ── COVERED: instant full-cover, no animation ────────────── */
.vs-wipe--covered .vs-wipe-col {
  transform: translateY(0%);
  animation: none;
  /* Reset mask so covered state fills completely */
  -webkit-mask-image: none;
  mask-image: none;
}

/* ── INCOMING: columns already covering, rise up to reveal ── */
.vs-wipe--in .vs-wipe-col {
  animation: vs-col-rise 400ms cubic-bezier(0.4, 0.0, 0.2, 1) both;
}

.vs-wipe--in .vs-wipe-col:nth-child(1) { animation-delay:  0ms; }
.vs-wipe--in .vs-wipe-col:nth-child(2) { animation-delay: 28ms; }
.vs-wipe--in .vs-wipe-col:nth-child(3) { animation-delay: 56ms; }
.vs-wipe--in .vs-wipe-col:nth-child(4) { animation-delay: 84ms; }
.vs-wipe--in .vs-wipe-col:nth-child(5) { animation-delay:112ms; }

@keyframes vs-col-rise {
  from { transform: translateY(0%);    }
  to   { transform: translateY(-100%); }
}

/* ── Reduced motion: disable entirely ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vs-wipe { display: none !important; }
}

/* ── LOGO MARQUEE: hover pause handled by .marquee-wall:hover .marquee-track ── */


/* ── CRO FIX: CTA button text always dark and readable ── */
.btn-gold, .btn-gold:hover, .btn-gold:visited, .btn-gold:active,
a.btn-gold, button.btn-gold,
.fc-cta, .nav-btn {
  color: #030303 !important;
  font-weight: 700 !important;
}
.nav-btn {
  color: #030303 !important;
}

/* ── CONSULTATION HOOK global style ── */
.consult-hook {
  background: var(--c-dark);
  border: 1px solid var(--c-grey1);
  border-left: 3px solid var(--c-gold);
  padding: 28px 32px;
  margin: 40px 0;
}
.consult-hook p.ch-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 10px;
}
.consult-hook p.ch-title {
  font-family: var(--ff-display);
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 300;
  color: var(--c-white);
  margin-bottom: 12px;
  line-height: 1.35;
}
.consult-hook p.ch-body {
  font-size: 14px;
  color: var(--c-light);
  line-height: 1.7;
  margin-bottom: 20px;
}


/* ── VISUAL HIERARCHY: Key number/stat emphasis ── */
.kpi-inline {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: 1.35em;
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
}
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-grey1) 20%, var(--c-grey1) 80%, transparent);
  margin: 56px 0;
}
/* Increase spacing in blog/case-study bodies */
.case-body h2,
article h2 {
  margin-top: 72px !important;
}
.case-body p + h2,
article p + h2 {
  margin-top: 60px !important;
}
/* Featured section card hover */
.feat-card {
  background: var(--c-dark);
  border: 1px solid var(--c-grey1);
  padding: 28px;
  text-decoration: none;
  display: block;
  transition: border-color .25s, transform .2s;
}
.feat-card:hover {
  border-color: rgba(200,168,90,.4);
  transform: translateY(-2px);
}
/* Blog featured section label */
.blog-featured-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--c-gold);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.blog-featured-label::before,
.blog-featured-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--c-grey1);
}
/* Value CTA band upgrade */
.cta-band .cta-title em {
  color: var(--c-gold);
}
.cta-hook {
  background: var(--c-dark);
  border: 1px solid var(--c-grey1);
  border-left: 3px solid var(--c-gold);
  padding: 28px 32px;
  margin: 48px 0;
}
.cta-hook .ch-eyebrow {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 10px;
}
.cta-hook .ch-headline {
  font-family: var(--ff-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 300;
  color: var(--c-white);
  line-height: 1.35;
  margin-bottom: 12px;
}
.cta-hook .ch-body {
  font-size: 14px;
  color: var(--c-light);
  line-height: 1.7;
  margin-bottom: 22px;
}


/* ── FINAL VH ADDITIONS ── */
/* Cinematic opening statement on case study */
.case-hero .case-body p + h2 { margin-top: 80px; }

/* Key stat emphasis in body text */
strong.kpi { 
  font-family: var(--ff-display); 
  font-size: 1.2em; 
  color: var(--c-gold); 
  font-weight: 300;
  font-style: italic;
}

/* Scale grid responsive */
@media (max-width: 600px) {
  .scale-resp { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Why Vision Studio grid responsive */
@media (max-width: 700px) {
  .diff-grid { grid-template-columns: 1fr !important; }
}

/* Blog featured cards: first row larger */
.blog-featured-first {
  grid-column: span 2;
}
@media (max-width: 700px) {
  .blog-featured-first { grid-column: span 1; }
}

/* Value CTA hook universal */
.value-cta-hook {
  background: var(--c-dark);
  border: 1px solid rgba(200,168,90,.2);
  border-left: 3px solid var(--c-gold);
  padding: 28px 32px;
  margin: 40px 0;
}
.value-cta-hook .eyebrow {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 10px;
}
.value-cta-hook .headline {
  font-family: var(--ff-display);
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 300;
  color: var(--c-white);
  line-height: 1.4;
  margin-bottom: 14px;
}

/* ─────────────────────────────────────────────────────────────
   PART 4 — TYPOGRAPHY & MICRO POLISH (v35)
   Improve readability, line-height, contrast, section spacing
   ───────────────────────────────────────────────────────────── */

/* Improve paragraph readability globally */
p, .sec-sub, .srv-desc, .about-body,
.proc-step-d, .testi-text, .blog-excerpt,
.ft-brand-desc {
  line-height: 1.85 !important;
}

/* Ensure secondary text has good contrast */
.sec-sub, .srv-desc, .about-body, .proc-step-d {
  color: rgba(119,119,119,0.95) !important;
}

/* Consistent section vertical breathing room */
.sec {
  padding-top: clamp(90px, 11vw, 160px) !important;
  padding-bottom: clamp(90px, 11vw, 160px) !important;
}

/* Discipline block keeps its own compact padding */
.discipline-block {
  padding-top: clamp(48px, 5vw, 72px) !important;
  padding-bottom: clamp(48px, 5vw, 72px) !important;
}

/* ── SERVICES — force single-line titles everywhere ── */
.srv-card h3,
.srv-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 600px) {
  .srv-card h3,
  .srv-title {
    white-space: normal !important;
    font-size: clamp(15px, 3.5vw, 19px) !important;
  }
}

/* ── BLOG readability improvements ── */
.blog-excerpt {
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: rgba(119,119,119,0.92) !important;
}
.blog-title {
  font-size: clamp(17px, 1.9vw, 22px) !important;
  line-height: 1.35 !important;
}
.blog-cat {
  font-size: 9px !important;
  letter-spacing: .38em !important;
}

/* ── Blog filter bar — larger, better spaced ── */
.bfb {
  font-size: 11px !important;
  letter-spacing: .28em !important;
  padding: 26px 32px !important;
}

/* ── Prevent any cramped margin stacking ── */
.sec-label { margin-bottom: 22px !important; }
.sec-title  { margin-bottom: 20px !important; }

/* ── PART 4: Micro spacing — breathing room between sections ── */
section.sec {
  margin-top: 120px !important;
  margin-bottom: 120px !important;
}

/* ═══════════════════════════════════════════════════════════════
   THUMBNAIL FIX — Netflix-style kártyák valódi thumbnailjel
   has-thumb class → card ahol p.thumb van beállítva
   ═══════════════════════════════════════════════════════════════ */

/* 1. Ha van valódi thumbnail, a dark veil legyen átlátszó alapból */
.pf-card.has-thumb .pf-dark-veil {
  background: rgba(4,4,4,0.08) !important;
}

/* 2. A thumbnail legyen jól látható — ne dimmelje le a filter */
.pf-card.has-thumb .pf-thumb-img {
  filter: brightness(0.9) saturate(0.95) !important;
}

/* 3. Hoverre: a kép kissé sötétedik miközben a Vimeo preview bejön */
@media (hover: hover) {
  .pf-card.has-thumb:hover .pf-thumb-img {
    filter: brightness(0.35) saturate(0.3) !important;
  }
}

/* 4. A lazy-load opacity trap: ha az img nincs .loaded-del,
   force-visible a has-thumb kártyákon belül */
.pf-card.has-thumb .pf-thumb-img img {
  opacity: 1 !important;
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   HORIZONTAL FILMSTRIP — Kiemelt munkáink
   Award-level cinematic horizontal scroll section
   ═══════════════════════════════════════════════════════════════ */

.hs-section {
  background: var(--c-black);
  position: relative;
}

.hs-header {
  padding: 80px var(--gutter) 52px;
  text-align: center;
}

/* Pin wrapper — GSAP pins this to viewport top */
.hs-pin-wrap {
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: var(--c-black);
}

/* Horizontal track — all slides in a row */
.hs-track {
  display: flex;
  align-items: stretch;
  height: 100%;
  will-change: transform;
}

/* ── Individual slide ──────────────────────────────────── */
.hs-slide {
  flex: 0 0 auto;
  width: 72vw;
  height: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-right: 1px solid rgba(255,255,255,.04);
  transition: filter .7s cubic-bezier(.25,.46,.45,.94);
  outline: none;
}

.hs-slide:first-child { width: 78vw; }

/* Sibling dimming — when ANY slide is hovered, others go dark */
@media (hover: hover) {
  .hs-track:has(.hs-slide:hover) .hs-slide:not(:hover) {
    filter: brightness(.28) saturate(.4);
  }
}

/* ── Background image layer ─────────────────────────────── */
.hs-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hs-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important;
  display: block;
  transition: transform 1.4s cubic-bezier(.25,.46,.45,.94);
}

svg.hs-thumb-img {
  position: absolute;
  inset: 0;
}

@media (hover: hover) {
  .hs-slide:hover .hs-thumb-img { transform: scale(1.05); }
}

/* ── Cinematic gradient veil ─────────────────────────────── */
.hs-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.55) 35%,
      rgba(0,0,0,.18) 65%,
      rgba(0,0,0,.32) 100%
    );
  transition: opacity .6s ease;
}

/* Real thumbnails: lighter veil so photo shows */
.hs-slide.has-thumb .hs-veil {
  background:
    linear-gradient(to top,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.38) 40%,
      rgba(0,0,0,.08) 68%,
      rgba(0,0,0,.22) 100%
    );
}

/* ── Vimeo preview iframe ────────────────────────────────── */
.hs-vimeo {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  border: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.hs-vimeo--on { opacity: 1; }

/* When video playing — hide static thumb smoothly */
.hs-slide--playing .hs-thumb-img {
  opacity: 0 !important;
  transition: opacity .8s ease !important;
}

/* ── Text content ────────────────────────────────────────── */
.hs-slide-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 2.8vw, 44px) clamp(28px, 3.2vw, 52px);
  pointer-events: none;
}

/* Top row: number left, category right */
.hs-slide-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.hs-slide-num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .42em;
  color: var(--c-gold);
  opacity: .55;
  transition: opacity .4s ease;
}
@media (hover: hover) {
  .hs-slide:hover .hs-slide-num { opacity: 1; }
}

.hs-slide-tag {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}

/* Bottom row: client, title, meta */
.hs-slide-bottom { display: flex; flex-direction: column; gap: 6px; }

.hs-slide-client {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: .7;
}

.hs-slide-title {
  font-family: var(--ff-display);
  font-size: clamp(40px, 5.2vw, 84px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -.025em;
  color: var(--c-white);
  margin: 0;
}
.hs-slide-title em { font-style: italic; color: var(--c-gold); }

.hs-slide-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  opacity: .7;
  transition: opacity .4s ease;
}

.hs-slide-dur,
.hs-slide-year {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .25em;
  color: rgba(255,255,255,.4);
}

.hs-slide-watch {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-gold);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .45s ease, transform .45s ease;
}
@media (hover: hover) {
  .hs-slide:hover .hs-slide-watch {
    opacity: 1;
    transform: translateX(0);
  }
  .hs-slide:hover .hs-slide-meta { opacity: 1; }
}

/* Subtle gold corner frame on hover */
.hs-slide::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(200,168,90,0);
  z-index: 4;
  pointer-events: none;
  transition: border-color .6s ease;
}
@media (hover: hover) {
  .hs-slide:hover::before { border-color: rgba(200,168,90,.14); }
}

/* ── CTA slide ───────────────────────────────────────────── */
.hs-cta-slide {
  width: 38vw !important;
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-dark2);
  border-right: none !important;
  cursor: default;
}
.hs-cta-slide::before { display: none; }

.hs-cta-inner {
  text-align: center;
  padding: 40px 32px;
}

.hs-cta-eyebrow {
  font-family: var(--ff-mono);
  font-size: 8px;
  letter-spacing: .48em;
  text-transform: uppercase;
  color: rgba(200,168,90,.4);
  margin-bottom: 36px;
  display: block;
}

.hs-cta-big {
  font-family: var(--ff-display);
  font-size: clamp(64px, 9vw, 108px);
  font-weight: 300;
  color: var(--c-gold);
  line-height: 1;
  letter-spacing: -.03em;
  display: block;
  margin-bottom: 4px;
}

.hs-cta-label {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-mid);
  display: block;
  margin-bottom: 36px;
}

/* ── Progress bar ────────────────────────────────────────── */
.hs-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.05);
  z-index: 10;
}
.hs-progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--c-gold), rgba(200,168,90,.5));
  width: 0%;
  transition: width .08s linear;
}

/* ── Counter ─────────────────────────────────────────────── */
.hs-counter {
  position: absolute;
  bottom: 18px;
  right: var(--gutter);
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--ff-mono);
  letter-spacing: .15em;
  color: rgba(255,255,255,.25);
  font-size: 9px;
}
.hs-counter-cur {
  font-size: 15px;
  color: var(--c-gold);
  line-height: 1;
}

/* ── Scroll hint ─────────────────────────────────────────── */
.hs-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 1;
  transition: opacity .6s ease;
  pointer-events: none;
}
.hs-hint--gone { opacity: 0; }

.hs-hint-label {
  font-family: var(--ff-mono);
  font-size: 7px;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
}

.hs-hint-arrows {
  display: flex;
  gap: 3px;
}
.hs-hint-arrows span {
  font-size: 14px;
  color: rgba(200,168,90,.5);
  animation: hs-arrow-pulse 1.8s ease-in-out infinite;
}
.hs-hint-arrows span:nth-child(2) { animation-delay: .18s; }
.hs-hint-arrows span:nth-child(3) { animation-delay: .36s; }

@keyframes hs-arrow-pulse {
  0%, 100% { opacity: .25; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}

/* ── Footer CTA under filmstrip ──────────────────────────── */
.hs-footer {
  padding: 52px var(--gutter) 64px;
  text-align: center;
  background: var(--c-black);
}

/* ── Mobile: vertical fallback ───────────────────────────── */
@media (max-width: 768px) {
  .hs-pin-wrap { height: auto; overflow: visible; }
  .hs-track {
    flex-direction: column;
    transform: none !important;
    will-change: unset;
  }
  .hs-slide,
  .hs-slide:first-child {
    width: 100% !important;
    height: 56vw;
    min-height: 240px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.04);
  }
  .hs-cta-slide { display: none; }
  .hs-progress, .hs-counter, .hs-hint { display: none; }
  .hs-track:has(.hs-slide:hover) .hs-slide:not(:hover) { filter: none; }
  .hs-slide-title { font-size: clamp(32px, 7vw, 52px); }
}

/* ═══════════════════════════════════════════════════════════════
   FIXES — 2025 session patches
   ═══════════════════════════════════════════════════════════════ */

/* FIX 3: Discipline grid — prevent "Vállalati filmek" text wrap */
.discipline-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  .discipline-name { font-size: clamp(17px,2vw,28px) !important; }
}
@media (max-width: 860px) {
  /* On 3-col, wrap is OK */
  .discipline-name { white-space: normal !important; overflow: visible !important; }
}

/* FIX 5: Testimonial cards — equal height columns, baseline-aligned */
.testi-grid {
  align-items: stretch !important;  /* was: start — caused uneven bottoms */
}
.testi-card {
  height: 100%;
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════
   LOGO STRIP FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Mobile: force animation ON
   iOS Safari bug: overflow:hidden on a parent stops CSS transform animations.
   Fix: logo-strip keeps its own overflow:hidden (for clipping) but the
   logos-section parent uses clip-path instead (see mobile-fixes.css).
   The logo-strip itself uses contain:paint as an extra Safari isolation layer. */
@media (max-width: 768px) {
  .logo-strip {
    /* Remove backdrop-filter — kills animation on iOS Safari */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* contain:paint creates isolation without breaking child animations */
    contain: paint !important;
    overflow: hidden !important;
  }
  .logo-track {
    animation: scrollLogos 22s linear infinite !important;
    -webkit-animation: scrollLogos 22s linear infinite !important;
    will-change: transform !important;
    /* Promote to its own GPU compositor layer */
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    /* Ensure full width for seamless loop (Row1 + Row2) */
    width: max-content !important;
  }
  .logo-row {
    /* Tighter spacing on mobile for better logo density */
    gap: 32px !important;
    padding-right: 32px !important;
  }
  .logo-item {
    /* Slightly smaller slots on mobile */
    width: 120px !important;
    height: 64px !important;
  }
  .logo-item img {
    height: 44px !important;
    max-width: 100px !important;
  }
  @keyframes scrollLogos {
    from { transform: translateX(0) translateZ(0); }
    to   { transform: translateX(-50%) translateZ(0); }
  }
}

/* Xixo logo — bigger than the others */
.logo-item img[alt="XIXO"] {
  height: 80px !important;
  max-width: 180px !important;
  transform: scale(1.18) !important;
}
@media (hover: hover) {
  .logo-item:hover img[alt="XIXO"] {
    transform: scale(1.28) !important;
  }
}

/* Discipline block — fix Vállalati filmek single row */
.discipline-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: hidden;
}
.discipline-name {
  font-size: clamp(16px, 1.8vw, 32px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 1200px) {
  .discipline-name { font-size: clamp(14px, 1.5vw, 26px) !important; }
}
@media (max-width: 860px) {
  .discipline-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .discipline-name { white-space: normal !important; overflow: visible !important; font-size: clamp(18px, 4vw, 28px) !important; }
}