/* Noor Studio Agency — Component Styles (nav, hero, cards, modals, footer, etc.) */

img{display:block;max-width:100%;}

/* ===== GRAIN ===== */
.grain{position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

/* ===== PROGRESS ===== */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold2),var(--gold3));z-index:250;box-shadow:0 0 8px rgba(212,175,55,.5);}

/* ===== CUSTOM CURSOR ===== */
.cur{position:fixed;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.28),transparent 60%);pointer-events:none;z-index:2050;mix-blend-mode:screen;transform:translate(-50%,-50%);will-change:transform;}
.cur.lg{transform:translate(-50%,-50%) scale(2);}
.curD{position:fixed;width:5px;height:5px;border-radius:50%;background:var(--gold3);pointer-events:none;z-index:2051;transform:translate(-50%,-50%);box-shadow:0 0 10px rgba(240,217,134,.9);transition:transform .2s;}
.curD.hide{transform:translate(-50%,-50%) scale(0);}
.curT{position:fixed;top:0;left:0;border-radius:50%;background:var(--gold3);pointer-events:none;z-index:2049;transform:translate(-50%,-50%);will-change:transform;transition:opacity .25s;}
.curT.hide{opacity:0;}
#curT1{width:4px;height:4px;opacity:.5;}
#curT2{width:3px;height:3px;opacity:.32;}
#curT3{width:2px;height:2px;opacity:.18;}


/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;padding:.84rem max(4vw,1.5rem);display:flex;justify-content:space-between;align-items:center;transition:background .4s,padding .4s,border-bottom .4s;border-bottom:1px solid transparent;}
.nav.scrolled{background:rgba(5,5,5,.72);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-bottom-color:var(--line);padding-top:.55rem;padding-bottom:.55rem;}
.nav-logo{display:flex;align-items:center;}
.nav-logo img{height:62px;width:auto;filter:drop-shadow(0 0 10px rgba(212,175,55,.3));transition:height .4s;}
.nav.scrolled .nav-logo img{height:50px;}

.nav-links{display:flex;gap:2rem;align-items:center;}
.nav-links a{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;position:relative;color:var(--ink);transition:color .35s;}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold3);transition:width .4s cubic-bezier(.7,0,.3,1);}
.nav-links a:hover::after{width:100%;}
.nav-cta{padding:.5rem 1.2rem;border:1px solid var(--gold);border-radius:100px;color:var(--gold3)!important;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;transition:all .35s;display:inline-flex;align-items:center;min-height:40px;}
.nav-cta:hover{background:var(--gold);color:var(--bg)!important;}
.nav-cta::after{display:none!important;}
.nav-burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:.3rem;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;z-index:81;}
.nav-burger span{width:22px;height:1.5px;background:var(--ink);transition:.35s;display:block;}
.nav.open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav.open .nav-burger span:nth-child(2){opacity:0;}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}


/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 max(4vw,1.5rem) max(5vw,2.5rem);}
#shader{position:absolute;inset:0;width:100%;height:100%;z-index:0;background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(212,175,55,.06),transparent 60%),#050505;max-width:100%;contain:layout paint;}
.hero-spotlight{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle 500px at var(--sx,50%) var(--sy,50%),rgba(212,175,55,.12),transparent 65%);mix-blend-mode:screen;}
.hero-dots{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(circle,rgba(212,175,55,.06) 1px,transparent 1px);background-size:40px 40px;opacity:.5;}
.hero-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(5,5,5,.55) 92%),linear-gradient(180deg,rgba(5,5,5,.35) 0%,transparent 25%,transparent 65%,rgba(5,5,5,.9) 100%);z-index:2;pointer-events:none;}

/* ═══ HERO SOCIAL SIDEBAR (desktop only) ═══ */
.hero-social{
  display:none; /* re-enabled at 1024px+ below */
  position:fixed;left:60px;top:50%;
  z-index:60; /* below nav(80)/AI launcher(400) but above hero content/canvas */
  flex-direction:column;align-items:center;gap:18px;
  opacity:0;transform:translateY(-50%) translateX(-16px);
  animation:heroSocialFadeIn 1s cubic-bezier(.2,.8,.2,1) .6s forwards;
}
@keyframes heroSocialFadeIn{
  to{opacity:1;transform:translateY(-50%) translateX(0);}
}

.hero-social-line{
  position:relative;width:1px;height:64px;
  background:linear-gradient(180deg,transparent,rgba(212,175,55,.55),transparent);
  margin-bottom:4px;
}
.hero-social-dot{
  position:absolute;left:50%;top:0;width:6px;height:6px;border-radius:50%;
  background:var(--gold3);transform:translateX(-50%);
  box-shadow:0 0 6px 2px rgba(212,175,55,.6);
  animation:heroSocialDotFloat 3.6s ease-in-out infinite;
}
@keyframes heroSocialDotFloat{
  0%,100%{top:0;opacity:.4;}
  50%{top:calc(100% - 6px);opacity:1;}
}

.hero-social-btn{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(15,15,15,.85);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(212,175,55,.25);
  color:#D4AF37;
  cursor:var(--cursor-mode,auto);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s;
}
.hero-social-btn svg{width:22px;height:22px;}
.hero-social-btn:hover{
  transform:scale(1.1) translateY(-4px);
  border-color:rgba(212,175,55,.55);
  background:rgba(20,17,10,.9);
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 22px rgba(212,175,55,.35);
}
.hero-social-btn:focus-visible{outline:2px solid var(--gold3);outline-offset:3px;}

@media(min-width:1024px){
  .hero-social{display:flex;}
}

@media(prefers-reduced-motion:reduce){
  .hero-social{animation:none;opacity:1;transform:translateY(-50%) translateX(0);}
  .hero-social-dot{animation:none;top:calc(50% - 3px);opacity:.8;}
  .hero-social-btn{transition:none;}
  .hero-social-btn:hover{transform:none;}
}
.hero-content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2rem;max-width:1100px;margin:0 auto;}
.hero-bottom{display:flex;flex-direction:column;align-items:center;gap:2rem;}
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:1.6rem;}
.hero-trust{display:flex;flex-direction:column;align-items:center;gap:.7rem;}
.hero-eyebrow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold3);display:inline-flex;align-items:center;gap:.6rem;opacity:0;}
.hero-eyebrow::before{content:'';width:24px;height:1px;background:var(--gold);}
.hero-h1{font-family:'Inter Tight',sans-serif;font-weight:900;font-size:clamp(2.8rem,9vw,8.5rem);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;}
.hero-h1 .ln{display:block;overflow:hidden;}
.hero-h1 .ln>span{display:inline-block;will-change:transform;}
.hero-h1 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.04em;color:var(--gold);}
.hero-h1 .gold-line{background:linear-gradient(90deg,var(--gold3),var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;opacity:0;}
.hero-sub{font-family:'Inter Tight',sans-serif;font-weight:300;font-size:clamp(.95rem,1.3vw,1.15rem);color:#948f85;max-width:640px;line-height:1.6;}
.hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:1.5rem;}
.hero-btns{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;}
.btn{position:relative;display:inline-flex;align-items:center;gap:.8rem;padding:1rem 1.8rem;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;overflow:hidden;cursor:var(--cursor-mode,auto);will-change:transform;}
.btn-p{background:linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2));color:var(--bg);border:1px solid var(--gold);box-shadow:0 8px 28px rgba(212,175,55,.22),inset 0 1px 0 rgba(255,255,255,.3);}
.btn-p::after{content:'';position:absolute;top:0;left:-110%;width:50%;height:100%;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:skewX(-20deg);transition:left .9s cubic-bezier(.7,0,.3,1);pointer-events:none;}
.btn-p:hover::after{left:160%;}
.btn-g{background:transparent;color:var(--ink);border:1px solid var(--line2);}
.btn-g::before{content:'';position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.3,1);z-index:0;}
.btn-g:hover{color:var(--bg);border-color:var(--ink);}
.btn-g:hover::before{transform:translateY(0);}
.hero-trust{display:flex;align-items:center;gap:1rem;}
.hero-trust-text{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);}
.trust-badges{display:flex;gap:.5rem;}

.trust-badge{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--gold3),var(--gold2));display:flex;align-items:center;justify-content:center;font-family:'Bodoni Moda',serif;font-weight:400;font-size:.7rem;color:var(--bg);border:1px solid rgba(212,175,55,.3);}
.trust-badge.trust-badge-logo{background:#f4f2ec;padding:4px;overflow:hidden;}
.trust-badge.trust-badge-logo img{width:100%;height:100%;object-fit:contain;}
.trust-badge-btn{position:relative;z-index:5;margin:0;padding:0;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .3s ease,box-shadow .3s ease;}
.trust-badge-btn:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 6px 16px rgba(212,175,55,.35);}
.trust-badge-btn:active{transform:translateY(0) scale(.96);}
.trust-badge-btn:focus-visible{outline:2px solid var(--gold3);outline-offset:2px;}

.scroll-ind{position:absolute;bottom:1.5rem;right:max(4vw,1.5rem);z-index:3;display:flex;align-items:center;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);writing-mode:vertical-rl;opacity:0;}
.scroll-ind::before{content:'';width:1px;height:30px;background:linear-gradient(180deg,var(--gold),transparent);animation:sc 2s ease-in-out infinite;}



/* ===== MARQUEE ===== */
.mq{padding:1.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#000;position:relative;z-index:2;}
.mq-track{display:flex;animation:mq 27s linear infinite;width:max-content;}
.mq.mq-techbar:hover .mq-track{animation-play-state:paused;}
.mq-item{padding:0 2.5rem;display:flex;align-items:center;gap:2.5rem;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.8rem);letter-spacing:-.03em;text-transform:uppercase;color:var(--ink2);transition:color .4s;white-space:nowrap;}
.mq-item:hover{color:var(--gold3);}
.mq-item::after{content:'✦';display:inline-block;font-size:.45em;color:var(--gold);opacity:.7;vertical-align:middle;margin-left:2.5rem;}



/* ===== SECTIONS ===== */
section{position:relative;padding:9rem max(4vw,1.5rem);}
.wrap{max-width:1700px;margin:0 auto;}
.s-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:4.5rem;}
.s-num{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;}
.s-num::before{content:'';width:24px;height:1px;background:var(--gold);}
.s-title{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(2.4rem,7vw,7rem);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;}
.s-title em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.03em;color:var(--gold);}
.s-sub{max-width:380px;color:var(--ink2);font-size:.92rem;line-height:1.55;font-weight:300;}

/* ===== WORK ===== */
.work{padding-top:6rem;}
.work-list{max-width:1700px;margin:0 auto;}
.w-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink2);}
.w-name{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(1.5rem,3.5vw,3rem);line-height:1;letter-spacing:-.03em;text-transform:uppercase;}
.w-cat{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);}
.w-arr{justify-self:end;width:40px;height:40px;border:1px solid var(--line2);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .4s,border-color .35s,background .35s;}
.w-preview{position:fixed;top:50%;left:50%;width:480px;height:300px;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;z-index:75;background-size:cover;background-position:center;border-radius:8px;transition:opacity .3s;box-shadow:0 24px 80px rgba(0,0,0,.6);}

/* Project covers */
.cv-1{background:linear-gradient(135deg,#1a1208,#3d2f12 50%,#6b4c1a),radial-gradient(circle at 70% 30%,rgba(212,175,55,.4),transparent 50%);background-blend-mode:overlay;}
.cv-2{background:linear-gradient(160deg,#0e0e10,#1f1a1f 50%,#3d2030),radial-gradient(circle at 30% 70%,rgba(180,80,100,.3),transparent 60%);background-blend-mode:overlay;}
.cv-3{background:linear-gradient(120deg,#0a1014,#142028 60%,#1f3540),radial-gradient(circle at 60% 40%,rgba(80,150,180,.25),transparent 55%);background-blend-mode:overlay;}
.cv-4{background:linear-gradient(150deg,#0a0a0a,#1c1612 60%,#2e2418),radial-gradient(circle at 40% 60%,rgba(212,175,55,.3),transparent 55%);background-blend-mode:overlay;}
.cv-5{background:linear-gradient(110deg,#0c0c10,#1a1828 50%,#2a2440),radial-gradient(circle at 80% 20%,rgba(140,100,200,.2),transparent 60%);background-blend-mode:overlay;}
.cv-6{background:linear-gradient(180deg,#0d0a08,#221912 50%,#3d2818),radial-gradient(circle at 20% 80%,rgba(200,120,60,.3),transparent 60%);background-blend-mode:overlay;}

/* ===== ABOUT ===== */



.counters{display:flex;gap:4rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:3.5rem;margin-top:4rem;}
.ct{display:flex;flex-direction:column;gap:.5rem;}
.ct-num{font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(3rem,7vw,6rem);line-height:1;letter-spacing:-.04em;display:flex;align-items:baseline;gap:.1em;color:var(--gold3);}
.ct-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);}

/* ===== PROCESS ===== */













/* ===== TESTIMONIALS ===== */
.test-w{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.test-track{display:flex;gap:1.5rem;padding:.5rem 0;width:max-content;}
.tc{width:360px;flex-shrink:0;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:2rem 1.8rem;display:flex;flex-direction:column;gap:1rem;transition:transform .4s,border-color .4s,box-shadow .4s;}
.tc:hover{transform:translateY(-4px);border-color:rgba(212,175,55,.3);box-shadow:0 24px 60px rgba(0,0,0,.5);}
.tc-stars{color:var(--gold3);font-size:.9rem;letter-spacing:.2em;}
.tc-quote{font-family:'Bodoni Moda',serif;font-style:italic;font-size:1.1rem;line-height:1.5;color:var(--ink);flex:1;}
.tc-auth{display:flex;align-items:center;gap:.9rem;padding-top:1.2rem;border-top:1px solid var(--line);}
.tc-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold3),var(--gold2));display:flex;align-items:center;justify-content:center;font-family:'Inter Tight',sans-serif;font-weight:600;color:#000;font-size:.9rem;flex-shrink:0;}
.tc-name{font-size:.9rem;font-weight:500;}
.tc-role{font-size:.75rem;color:var(--ink2);font-family:'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;margin-top:.15rem;}








/* ===== FOOTER ===== */


.reveal{opacity:0;transform:translateY(40px);}

/* ===== SERVICES GRID (new) ===== */
.svc-section{padding:9rem max(4vw,1.5rem);}

/* ═══════════════════════════════════════════════════════════════
   SERVICES — PREMIUM VERTICAL SLIDER (svcx-*)
   ═══════════════════════════════════════════════════════════════ */
.svcx-section{position:relative;overflow:hidden;}
.svcx-ambient{position:absolute;top:22%;left:50%;transform:translateX(-50%);width:min(1100px,92%);height:520px;background:radial-gradient(ellipse at center,rgba(212,175,55,.11),transparent 68%);filter:blur(30px);pointer-events:none;z-index:0;}
.svcx-wrap{position:relative;z-index:1;max-width:760px;margin:3rem auto 0;padding:0 max(4vw,1.5rem);}

/* Vertical mode needs an explicit height — Swiper measures this at init to
   know how tall one "page" of slides is. Horizontal lift/glow/shadow room is
   handled by side padding instead of top/bottom now that scroll is vertical. */
.svcx-swiper{height:640px;padding:6px 18px;}
.svcx-swiper .swiper-wrapper{align-items:stretch;}
.svcx-swiper .swiper-slide{height:auto;display:flex;}

/* Fallback grid if Swiper never initialises → all six cards stay visible,
   stacked in a single column (matches the intended vertical reading order). */
.svcx-swiper:not(.swiper-initialized){height:auto;}
.svcx-swiper:not(.swiper-initialized) .swiper-wrapper{flex-direction:column;gap:1.5rem;}
.svcx-swiper:not(.swiper-initialized) .swiper-slide{max-width:100%;}

.svcx-card{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;gap:1.1rem;padding:2.4rem 2rem;border-radius:20px;
  background:rgba(14,11,8,.5);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(212,175,55,.2);box-shadow:0 16px 44px rgba(0,0,0,.4);overflow:hidden;min-height:280px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s cubic-bezier(.2,.8,.2,1),border-color .3s;will-change:transform;}
.svcx-glow{position:absolute;inset:0;border-radius:20px;background:radial-gradient(circle at 50% 0%,rgba(212,175,55,.16),transparent 62%);opacity:0;transition:opacity .3s;z-index:-1;pointer-events:none;}
.svcx-card:hover{transform:translateY(-10px);border-color:rgba(212,175,55,.5);box-shadow:0 30px 72px rgba(0,0,0,.55),0 0 46px rgba(212,175,55,.18);}
.svcx-card:hover .svcx-glow{opacity:1;}
.svcx-soon{opacity:.82;}

.svcx-icon{font-size:2.1rem;line-height:1;display:inline-block;width:fit-content;transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.svcx-card:hover .svcx-icon{transform:scale(1.18) rotate(-6deg);}

.svcx-name{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(1.2rem,2vw,1.5rem);letter-spacing:-.03em;text-transform:uppercase;}
.svcx-desc{color:var(--ink2);font-size:.88rem;line-height:1.55;font-weight:300;flex:1;}

.svcx-link{display:inline-flex;align-items:center;gap:.55rem;margin-top:auto;width:fit-content;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold3);border:1px solid rgba(212,175,55,.32);padding:.65rem 1.15rem;border-radius:100px;background:transparent;cursor:var(--cursor-mode,auto);transition:background .35s,color .35s,border-color .35s;}
.svcx-card:hover .svcx-link{background:var(--gold);color:#000;border-color:var(--gold);}
.svcx-arw{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.svcx-card:hover .svcx-arw{transform:translateX(5px);}

.svcx-badge{position:absolute;top:1.2rem;right:1.2rem;z-index:2;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;padding:.3rem .7rem;border-radius:100px;background:rgba(212,175,55,.15);border:1px solid rgba(212,175,55,.35);color:var(--gold3);}

/* Navigation arrows — top/bottom, centered, since the slider now moves
   vertically. Placed outside the card column, still inside .svcx-wrap. */
.svcx-nav{position:absolute;left:50%;transform:translateX(-50%);z-index:10;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(14,11,8,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.3);color:var(--gold3);font-size:1.2rem;
  cursor:var(--cursor-mode,auto);transition:background .3s,color .3s,border-color .3s,transform .3s,opacity .3s;}
.svcx-nav:hover{background:var(--gold);color:#000;border-color:var(--gold);transform:translateX(-50%) scale(1.06);}
.svcx-nav:focus-visible{outline:2px solid var(--gold3);outline-offset:3px;}
.svcx-prev{top:-26px;}
.svcx-prev span{transform:rotate(90deg);display:inline-block;}
.svcx-next{bottom:-26px;}
.svcx-next span{transform:rotate(90deg);display:inline-block;}
@media(max-width:768px){.svcx-nav{display:none;}}

/* Fixed slider height per breakpoint, so one "page" always shows a sensible
   number of cards without clipping (measured against min-height above). */
@media(max-width:1023px){.svcx-swiper{height:560px;}}
@media(max-width:639px){.svcx-swiper{height:400px;}}

/* Fade-up entrance — gated on html.svcx-js so content is never hidden without JS */
html.svcx-js .svcx-wrap{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
html.svcx-js .svcx-wrap.svcx-in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  html.svcx-js .svcx-wrap{opacity:1!important;transform:none!important;}
  .svcx-card,.svcx-icon,.svcx-arw{transition:none!important;}
}

/* ═══ SHARED SECTION HEAD (p5-head / p5-badge — used by Why/Booking/Future) ═══ */
.p5-head{max-width:1700px;margin:0 auto 3.5rem;}
.p5-badge{display:inline-flex;align-items:center;gap:.6rem;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold3);padding:.5rem 1.1rem;border:1px solid rgba(212,175,55,.3);border-radius:100px;background:rgba(212,175,55,.06);}
.p5-badge::before{content:'✦';font-size:.65em;}

/* .reveal-ready also sets its own `transition` shorthand for the scroll-in fade —
   same specificity would let whichever rule loads last silently win and clobber
   the other, so this compound selector explicitly merges both into one list
   (transform kept at 300ms so hover stays snappy per spec, opacity keeps its
   own timing for the entrance fade). */

/* Premium — larger + centered + elevated */





@media(max-width:1100px){
}
@media(max-width:680px){
}

/* ===== PRICING ===== */
.pricing-section{padding:9rem max(4vw,1.5rem);background:linear-gradient(180deg,var(--bg) 0%,rgba(10,8,5,1) 100%);}
.pricing-head{max-width:1700px;margin:0 auto 4.5rem;padding:0;}.pricing-head .s-sub{max-width:600px;}
.pricing-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start;}

.pc{background:rgba(10,8,5,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(212,175,55,.18);border-radius:20px;padding:2.4rem 2rem;display:flex;flex-direction:column;gap:1.4rem;position:relative;overflow:hidden;transition:border-color .4s,box-shadow .4s,transform .4s;cursor:default;}
.pc:hover{border-color:rgba(212,175,55,.4);box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 40px rgba(212,175,55,.08);transform:translateY(-4px);}
.pc.pop{border-color:rgba(212,175,55,.45);background:rgba(18,14,8,.75);box-shadow:0 0 50px rgba(212,175,55,.12);}
.pc.pop::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold3),var(--gold),transparent);}
.pc-badge{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:.35rem .8rem;border-radius:100px;background:rgba(212,175,55,.15);border:1px solid rgba(212,175,55,.35);color:var(--gold3);width:fit-content;}
.pc-name{font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;}
.pc-price{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:-.04em;background:linear-gradient(180deg,var(--gold3),var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;}
.pc-custom-label{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;font-size:clamp(1.2rem,2.5vw,1.8rem);color:var(--gold3);}
.pc-desc{color:var(--ink2);font-size:.88rem;line-height:1.55;font-weight:300;}
.pc-features{list-style:none;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.pc-features li{font-size:.85rem;color:var(--ink2);font-weight:300;display:flex;align-items:flex-start;gap:.6rem;padding:.3rem 0;border-top:1px solid var(--line);}
.pc-features li::before{content:'✦';color:var(--gold);font-size:.55em;flex-shrink:0;margin-top:.25rem;}
.pc-features li{transition:color .3s;}.pc:hover .pc-features li{color:var(--ink);}
.pc-features li.inherited{color:var(--ink2);opacity:.7;}
.pc-btn{margin-top:auto;padding:.9rem 1.5rem;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(212,175,55,.35);color:var(--gold3);background:transparent;cursor:var(--cursor-mode,auto);transition:all .4s;text-align:center;display:block;position:relative;overflow:hidden;}
.pc-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2));transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.3,1);z-index:0;}
.pc-btn span{position:relative;z-index:1;}
.pc-btn:hover{color:#000;border-color:var(--gold);}
.pc-btn:hover::before{transform:translateY(0);}
.pc.pop .pc-btn{background:linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2));color:#000;border-color:var(--gold);box-shadow:0 8px 24px rgba(212,175,55,.25);}
.pc.pop .pc-btn::before{display:none;}
.pc.pop .pc-btn:hover{transform:scale(1.02);box-shadow:0 12px 32px rgba(212,175,55,.4);}







/* ===== MODAL ===== */
/* .modal-bg/.modal consolidated into the single complete rule set further below — */
/* this duplicate block (older, incomplete: no overflow-y guard, no explicit z-index */
/* on .modal-close) was dead weight and the root cause of confusion during the X-button */
/* close-button audit. .modal-header/.modal-title kept (still used by .modal-title h2). */
.modal-title{font-family:'Bodoni Moda',serif;font-weight:400;font-style:italic;font-size:clamp(1.4rem,3vw,2rem);color:var(--ink);}
.modal-service-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;padding:.45rem .9rem;border-radius:100px;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.3);color:var(--gold3);margin-bottom:1.5rem;}
.modal-service-tag::before{content:'✦';font-size:.7em;}
.form-grid{display:flex;flex-direction:column;gap:1.1rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}

.form-group{display:flex;flex-direction:column;gap:.4rem;}
.form-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);}
.form-input,.form-textarea{background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:10px;padding:.8rem 1rem;font-family:'Inter Tight',sans-serif;font-size:max(16px,.9rem);color:var(--ink);outline:none;transition:border-color .3s,background .3s;width:100%;}
.form-input::placeholder,.form-textarea::placeholder{color:var(--ink3);}
.form-input:focus,.form-textarea:focus{border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.04);}
.form-input[readonly]{opacity:.55;cursor:default;}
.form-textarea{min-height:90px;resize:vertical;font-family:'Inter Tight',sans-serif;}

.form-submit{width:100%;padding:1.1rem;border-radius:100px;background:linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2));color:#000;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;border:none;cursor:var(--cursor-mode,auto);margin-top:.5rem;position:relative;overflow:hidden;transition:transform .35s,box-shadow .35s;}
.form-submit:hover{transform:scale(1.02);box-shadow:0 12px 32px rgba(212,175,55,.35);}
.form-submit::after{content:'';position:absolute;top:0;left:-110%;width:50%;height:100%;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:skewX(-20deg);transition:left .9s cubic-bezier(.7,0,.3,1);}
.form-submit:hover::after{left:160%;}

/* === BUDGET SELECT === */
.form-select{background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:10px;padding:.8rem 1rem;font-family:'Inter Tight',sans-serif;font-size:.9rem;color:var(--ink);outline:none;transition:border-color .3s,background .3s;width:100%;-webkit-appearance:none;appearance:none;cursor:var(--cursor-mode,auto);}
.form-select option{background:#0a0805;color:var(--ink);}
.form-select:focus{border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.04);}

/* === INLINE VALIDATION ERRORS === */
.form-input.invalid,.form-select.invalid,.form-textarea.invalid{border-color:rgba(224,85,85,.6)!important;background:rgba(224,85,85,.04)!important;}

/* === SUBMIT LOADING STATE === */
.form-submit.loading{opacity:.7;pointer-events:none;}
.form-submit.loading::after{animation:none;}
.loading-dots{display:inline-flex;gap:3px;align-items:center;justify-content:center;}
.loading-dots span{width:5px;height:5px;border-radius:50%;background:currentColor;animation:ldot .8s ease-in-out infinite;}
.loading-dots span:nth-child(2){animation-delay:.16s;}
.loading-dots span:nth-child(3){animation-delay:.32s;}


/* === SUCCESS + THANK YOU === */
.modal-success{display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 0;gap:1.5rem;}
.modal-success.show{display:flex;}
.success-ring{width:80px;height:80px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:2rem;animation:successPop .6s cubic-bezier(.34,1.56,.64,1) forwards;}

.success-title{font-family:'Bodoni Moda',serif;font-style:italic;font-size:1.8rem;color:var(--gold3);}
.success-sub{color:var(--ink2);font-size:.9rem;font-weight:300;line-height:1.55;}
.success-timer{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);}

/* === THANK YOU OVERLAY === */
.ty-overlay{position:fixed;inset:0;z-index:600;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;}
.ty-overlay.show{opacity:1;visibility:visible;}
.ty-icon{font-size:4rem;margin-bottom:1.5rem;animation:successPop .7s cubic-bezier(.34,1.56,.64,1) forwards;}
.ty-title{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;font-size:clamp(2.5rem,8vw,5.5rem);line-height:.95;letter-spacing:-.025em;color:var(--gold3);margin-bottom:1rem;}
.ty-sub{color:var(--ink2);font-size:1rem;font-weight:300;line-height:1.6;max-width:480px;margin:0 auto 2.5rem;}
.ty-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;}
.ty-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.6rem;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;transition:all .35s;cursor:pointer;border:none;}
.ty-btn-p{background:linear-gradient(135deg,var(--gold3),var(--gold));color:#000;}
.ty-btn-p:hover{transform:scale(1.03);box-shadow:0 12px 28px rgba(212,175,55,.3);}
.ty-btn-g{background:transparent;border:1px solid var(--line2);color:var(--ink);}
.ty-btn-g:hover{border-color:var(--gold3);color:var(--gold3);}
.ty-particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:0;}


/* ╔═══════════════════════════════════════════╗
   ║   PHASE 4 — PORTFOLIO & SOCIAL PROOF     ║
   ╚═══════════════════════════════════════════╝ */

/* ── PORTFOLIO HEADER ── */
.port-section{padding:9rem max(4vw,1.5rem);position:relative;overflow:hidden;}

/* Ambient floating particles + soft lighting — pure CSS keyframe
   animation (no JS loop). Purely decorative, sits behind all content. */
.port-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.port-ambient::before,.port-ambient::after{content:'';position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.06),transparent 70%);}
.port-ambient::before{top:-10%;left:-8%;}
.port-ambient::after{bottom:-15%;right:-10%;background:radial-gradient(circle,rgba(212,175,55,.05),transparent 70%);}
.port-particle{position:absolute;border-radius:50%;background:rgba(212,175,55,.5);box-shadow:0 0 8px rgba(212,175,55,.6);animation:portParticleFloat 14s ease-in-out infinite;}
@keyframes portParticleFloat{
  0%,100%{transform:translateY(0) translateX(0);opacity:.3;}
  50%{transform:translateY(-40px) translateX(12px);opacity:.8;}
}
@media(prefers-reduced-motion:reduce){.port-particle{animation:none;}}
.port-badge{display:inline-flex;align-items:center;gap:.6rem;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold3);padding:.5rem 1.1rem;border:1px solid rgba(212,175,55,.3);border-radius:100px;background:rgba(212,175,55,.06);margin-bottom:1.6rem;}
.port-badge::before{content:'✦';font-size:.65em;}
.port-head{max-width:1700px;margin:0 auto 5rem;}

/* ── PORTFOLIO STATS ── */
/* ── FILTER BUTTONS ── */
.port-filters{max-width:1700px;margin:0 auto 3.5rem;display:flex;flex-wrap:wrap;gap:.6rem;}
.pf-btn{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:.6rem 1.2rem;border:1px solid var(--line2);border-radius:100px;background:transparent;color:var(--ink2);cursor:var(--cursor-mode,auto);transition:all .35s;position:relative;overflow:hidden;}
.pf-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--gold3),var(--gold));transform:translateY(101%);transition:transform .4s cubic-bezier(.7,0,.3,1);z-index:0;}
.pf-btn span{position:relative;z-index:1;}
.pf-btn:hover{border-color:var(--gold3);}
.pf-btn.active{border-color:var(--gold);color:#000;}
.pf-btn.active::before{transform:translateY(0);}

/* ── PORTFOLIO GRID ── */
.port-grid{max-width:1700px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;}


.port-card{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;cursor:var(--cursor-mode,auto);transition:border-color .45s,box-shadow .45s,transform .45s cubic-bezier(.2,.8,.2,1);position:relative;will-change:transform;}
.port-card:hover{border-color:rgba(212,175,55,.45);box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 40px var(--pc-accent,rgba(212,175,55,.15));transform:translateY(-10px);}
.port-card[data-cat="hidden"]{display:none;}

/* card preview area */
.pc-preview{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0d0c0a;}
.pc-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s;}
.port-card:hover .pc-bg{transform:scale(1.08);filter:brightness(1.12) saturate(1.25);}

/* Suggested UI structure inside the preview — since this is placeholder
   art direction (no live screenshot embedded), these faint blocks hint at
   a real site's layout (nav row, hero headline, CTA) rather than leaving
   a flat, characterless gradient. Purely decorative, aria-hidden. */
.pc-mockup-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:2rem;opacity:.85;transition:opacity .5s,transform .9s cubic-bezier(.2,.8,.2,1);}
.port-card:hover .pc-mockup-ui{transform:scale(1.04);}
.pc-mockup-nav{position:absolute;top:38px;left:2rem;right:2rem;display:flex;gap:1.4rem;justify-content:center;}
.pc-mockup-nav span{width:32px;height:4px;border-radius:2px;background:rgba(245,234,208,.22);}
.pc-mockup-hero-line{height:10px;border-radius:3px;background:linear-gradient(90deg,rgba(245,234,208,.5),rgba(245,234,208,.18));}
.pc-mockup-hero-line-1{width:64%;}
.pc-mockup-hero-line-2{width:42%;opacity:.7;}
.pc-mockup-cta{width:96px;height:22px;border-radius:100px;background:rgba(212,175,55,.4);border:1px solid rgba(212,175,55,.6);margin-top:.3rem;}

/* browser chrome inside preview */
.pc-chrome{position:absolute;top:0;left:0;right:0;height:26px;background:rgba(12,10,7,.9);backdrop-filter:blur(6px);display:flex;align-items:center;gap:5px;padding:0 .7rem;z-index:2;}
.pc-chrome .dot{width:6px;height:6px;border-radius:50%;}
.pc-chrome .dot:nth-child(1){background:#e0594f;}.pc-chrome .dot:nth-child(2){background:#e0b34f;}.pc-chrome .dot:nth-child(3){background:#5fbf6e;}
.pc-chrome .url{margin-left:.4rem;flex:1;height:12px;border-radius:3px;background:rgba(245,234,208,.07);}

/* glass reflection sweep — a soft diagonal highlight that sweeps across
   the preview on hover, like light passing over glass */
.pc-sweep{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 45%,rgba(255,255,255,.05) 50%,transparent 65%);transform:translateX(-120%);transition:transform 0s;}
.port-card:hover .pc-sweep{transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transform:translateX(120%);}

/* gold glow overlay on hover */
.pc-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,var(--pc-accent,rgba(212,175,55,.22)),transparent 62%);opacity:0;transition:opacity .5s;z-index:1;}
.port-card:hover .pc-glow{opacity:1;}

/* category badge */
.pc-badge{position:absolute;top:.9rem;left:.9rem;z-index:3;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;padding:.3rem .7rem;border-radius:100px;background:rgba(10,8,5,.72);backdrop-filter:blur(8px);border:1px solid rgba(212,175,55,.3);color:var(--gold3);}

/* card body */
.pc-logo-row{display:flex;align-items:center;gap:.7rem;}
.pc-logo{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bodoni Moda',serif;font-style:italic;font-size:.9rem;color:var(--gold3);background:rgba(212,175,55,.08);border:1px solid rgba(212,175,55,.35);transition:border-color .4s,background .4s;}
.port-card:hover .pc-logo{border-color:rgba(212,175,55,.6);background:rgba(212,175,55,.14);}
.pc-title{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.03em;text-transform:uppercase;transition:color .35s;}
.port-card:hover .pc-title{color:var(--gold3);}
.pc-desc{font-size:.85rem;color:var(--ink2);font-weight:300;line-height:1.5;flex:1;}
.pc-tech{display:flex;flex-wrap:wrap;gap:.4rem;}
.pc-tech span{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .6rem;border:1px solid var(--line);border-radius:100px;color:var(--ink2);transition:border-color .35s,color .35s;}
.port-card:hover .pc-tech span{border-color:rgba(212,175,55,.2);color:var(--gold3);}
.pc-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:.4rem;}

/* Primary gold "Visit Live Website" button, with an arrow that nudges
   outward on hover */
.pc-btn-visit-gold{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.2rem;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;border-radius:100px;background:linear-gradient(135deg,#f0d986,var(--gold) 55%,#b8860b);color:#0a0805;font-weight:600;transition:transform .3s,box-shadow .3s,filter .3s;box-shadow:0 8px 24px rgba(212,175,55,.18);}
.pc-btn-visit-gold:hover{box-shadow:0 14px 34px rgba(212,175,55,.3);filter:brightness(1.06);}
.pc-arrow{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.pc-btn-visit-gold:hover .pc-arrow{transform:translate(3px,-3px);}

.pc-btn-cs{padding:.7rem;text-align:center;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;border:none;background:transparent;color:var(--ink2);cursor:var(--cursor-mode,auto);transition:color .35s;text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent;}
.pc-btn-cs:hover{color:var(--gold3);text-decoration-color:rgba(212,175,55,.5);}

/* ── CASE STUDY MODAL ── */
.cs-modal-bg{position:fixed;inset:0;z-index:520;display:flex;align-items:flex-start;justify-content:center;padding:1rem;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;overflow-y:auto;}
.cs-modal-bg.open{opacity:1;visibility:visible;}
.cs-modal-blur{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(16px);}
.cs-modal{position:relative;z-index:1;background:var(--bg2);border:1px solid rgba(212,175,55,.25);border-radius:20px;max-width:860px;width:100%;margin:auto;max-height:min(90vh,900px);max-height:min(90svh,900px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;outline:none;transform:translateY(30px) scale(.97);transition:transform .45s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 100px rgba(0,0,0,.7);}
.cs-modal-bg.open .cs-modal{transform:translateY(0) scale(1);}
.cs-hero{position:relative;aspect-ratio:16/7;overflow:hidden;}
.cs-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
.cs-hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,8,5,.95) 100%);}
.cs-hero-content{position:absolute;bottom:0;left:0;right:0;padding:2rem;}
.cs-client-name{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;font-size:clamp(1.8rem,4vw,3rem);color:var(--ink);line-height:1;}
.cs-industry{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold3);margin-top:.4rem;}
.cs-close{position:absolute;top:1.2rem;right:1.2rem;width:38px;height:38px;border-radius:50%;border:1px solid rgba(212,175,55,.3);background:rgba(10,8,5,.7);backdrop-filter:blur(8px);color:var(--ink2);font-size:1rem;cursor:var(--cursor-mode,auto);display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:5;}
.cs-close:hover{border-color:var(--gold);color:var(--gold3);}
.cs-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1.5rem;background:rgba(212,175,55,.04);border:1px solid rgba(212,175,55,.12);border-radius:12px;margin-bottom:1.8rem;}

.cs-meta-item{display:flex;flex-direction:column;gap:.3rem;}
.cs-meta-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);}
.cs-meta-val{font-size:.9rem;font-weight:500;color:var(--ink);}
.cs-section{margin-bottom:1.6rem;}
.cs-section-title{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold3);margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem;}
.cs-section-title::before{content:'';width:20px;height:1px;background:var(--gold);}
.cs-section-text{font-size:.88rem;color:var(--ink2);line-height:1.6;font-weight:300;}
.cs-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:.8rem 0;}

.cs-result{background:rgba(212,175,55,.06);border:1px solid rgba(212,175,55,.15);border-radius:10px;padding:1rem;text-align:center;}
.cs-result-num{font-family:'Bodoni Moda',serif;font-size:1.8rem;color:var(--gold3);line-height:1;}
.cs-result-lbl{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);margin-top:.3rem;}
.cs-tech-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;}
.cs-tech-tag{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .75rem;border:1px solid rgba(212,175,55,.25);border-radius:100px;color:var(--gold3);}
.cs-quote{background:rgba(212,175,55,.04);border-left:2px solid var(--gold);border-radius:0 10px 10px 0;padding:1.2rem 1.5rem;margin:.6rem 0;}
.cs-visit-link{display:inline-flex;align-items:center;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold3);border:1px solid rgba(212,175,55,.35);padding:.7rem 1.3rem;border-radius:100px;background:transparent;transition:background .35s,color .35s,border-color .35s;}
.cs-visit-link:hover{background:var(--gold);color:#000;border-color:var(--gold);}
.cs-quote p{font-family:'Bodoni Moda',serif;font-style:italic;font-size:1.05rem;color:var(--ink);line-height:1.5;}
.cs-quote-auth{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);margin-top:.7rem;}
.cs-footer{display:flex;gap:.8rem;padding:1.5rem 2.2rem;border-top:1px solid var(--line);background:rgba(0,0,0,.3);}

.cs-footer-btn-p{flex:1;padding:.9rem;text-align:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(135deg,var(--gold3),var(--gold));color:#000;border:none;border-radius:100px;cursor:var(--cursor-mode,auto);transition:transform .35s,box-shadow .35s;}
.cs-footer-btn-p:hover{transform:scale(1.02);box-shadow:0 10px 28px rgba(212,175,55,.35);}
.cs-footer-btn-g{flex:1;padding:.9rem;text-align:center;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--line2);border-radius:100px;cursor:var(--cursor-mode,auto);transition:all .35s;}
.cs-footer-btn-g:hover{border-color:var(--gold3);color:var(--gold3);}

/* ── TESTIMONIAL SLIDER (upgrade) ── */

.tsl-wrap{max-width:1700px;margin:0 auto;}
.tsl-slider{position:relative;overflow:hidden;}

.tsl-slide{min-width:100%;padding:0 .5rem;}




.tsl-auth{display:flex;align-items:center;gap:1rem;}


.tsl-role{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);margin-top:.2rem;}






/* ── LOGO MARQUEE (infinite) ── */
/* ═══ ACCESSIBILITY & PRODUCTION IMPROVEMENTS ═══ */


/* Focus visible for keyboard users */
*:focus-visible{outline:2px solid var(--gold3);outline-offset:3px;border-radius:4px;}
button:focus-visible,a:focus-visible,.nav-item:focus-visible{outline:2px solid var(--gold3);outline-offset:3px;}
/* Reduce motion */

/* High contrast mode support */

/* Print styles */
@media print{#introCanvas,.grain,.cur,.curD,.topbar-btn,footer,.nav-burger,.mob-menu,#tyOverlay{display:none!important;}.hero{min-height:auto;}.hero-h1{font-size:3rem;}}
/* Scroll margin for anchor links (accounts for sticky nav) */
[id]{scroll-margin-top:80px;}


/* ╔═══════════════════════════════════════════════════╗
   ║   PHASE 8 — FINAL POLISH                         ║
   ╚═══════════════════════════════════════════════════╝ */

/* ── BACK TO TOP BUTTON ── */
.btt{position:fixed;bottom:max(2rem,calc(1.2rem + env(safe-area-inset-bottom)));right:max(4vw,1.5rem);z-index:80;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--gold3),var(--gold2));border:none;cursor:var(--cursor-mode,auto);display:flex;align-items:center;justify-content:center;font-size:1rem;color:#000;box-shadow:0 8px 24px rgba(212,175,55,.3);transform:translateY(20px) scale(.85);opacity:0;transition:opacity .4s,transform .4s,box-shadow .4s;will-change:transform,opacity;pointer-events:none;}
.btt.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.btt:hover{box-shadow:0 14px 32px rgba(212,175,55,.45);transform:scale(1.08)!important;}
.btt:focus-visible{outline:2px solid var(--gold3);outline-offset:3px;}
/* Don't let the FAB sit on top of footer content once it's in view */
html.footer-in-view .btt{opacity:0!important;transform:translateY(20px) scale(.85)!important;pointer-events:none!important;}

/* ── RIPPLE EFFECT ── */

.ripple-ring{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);width:60px;height:60px;margin-top:-30px;margin-left:-30px;animation:ripple .55s ease-out forwards;pointer-events:none;z-index:0;}

/* ── ENHANCED CURSOR ── */
.cur{transition:transform .08s,width .4s,height .4s,background .4s;mix-blend-mode:screen;}
.cur.link-hover{width:60px;height:60px;background:radial-gradient(circle,rgba(212,175,55,.4),transparent 55%);}
.cur.text-hover{width:100px;height:28px;border-radius:4px;background:rgba(212,175,55,.12);}

/* ── MOBILE TOUCH TARGETS (iOS) ── */
-webkit-tap-highlight-color:transparent;


/* ── iOS INPUT ZOOM PREVENTION ── */
.form-input,.form-select,.form-textarea,.filter-input,.filter-select,.login-input{font-size:max(16px,.9rem);}

/* ── iOS MOMENTUM SCROLLING ── */

/* ── SAFARI BACKDROP FALLBACK ── */
@supports not (backdrop-filter:blur(1px)){
  .modal,.cs-modal,.nav.scrolled,.svc-card,.why-card,.lang-dd-trigger,.theme-toggle-btn{
    background:rgba(10,8,5,.97)!important;
  }
}

/* ── FIREFOX SCROLLBAR ── */
@-moz-document url-prefix(){
  * {scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.3) transparent;}
}



/* ── ENHANCED TY OVERLAY ── */
.ty-overlay{background:rgba(5,5,5,.97);backdrop-filter:blur(20px) saturate(1.4);}
.ty-glass{background:rgba(14,11,8,.7);border:1px solid rgba(212,175,55,.25);border-radius:24px;padding:3rem 2.5rem;max-width:520px;width:90%;margin:0 auto;text-align:center;box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 60px rgba(212,175,55,.08);}
.ty-glass{background:rgba(14,11,8,.7);border:1px solid rgba(212,175,55,.25);border-radius:24px;padding:3rem 2.5rem;max-width:520px;width:90%;margin:0 auto;text-align:center;box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 60px rgba(212,175,55,.08);}

.ty-success-ring{width:88px;height:88px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:2.2rem;margin:0 auto 1.8rem;animation:successPop .6s cubic-bezier(.34,1.56,.64,1) forwards,iconPulse 2.5s ease 1s infinite;}

/* ── SECTION REVEAL ENHANCEMENT ── */
.reveal-ready{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);}
.reveal-ready.in{opacity:1;transform:translateY(0);}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity .7s ease,transform .7s ease;}
.reveal-scale.in{opacity:1;transform:scale(1);}

/* ── PROGRESS BAR REFINEMENT ── */
.progress{height:2px;background:linear-gradient(90deg,var(--gold2),var(--gold3),var(--gold));transition:width .1s linear;box-shadow:0 0 6px rgba(212,175,55,.55);}

/* ── NAV TRANSITION ── */
.nav{transition:background .45s,padding .35s,border-bottom .35s,backdrop-filter .45s;}

/* ── ENHANCED CARD HOVER TRANSITIONS ── */
.svc-card,.why-card,.pc,.port-card{transition:border-color .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1);}

/* ── CTA SHINE REFINEMENT ── */
.btn-p::after{left:-110%;transition:left .8s cubic-bezier(.7,0,.3,1);}
.btn-p:hover::after{left:160%;}

/* ── ACCESSIBLE FOCUS STATES ── */
.btn:focus-visible,.svc-btn:focus-visible,.pc-btn:focus-visible,.faq-q:focus-visible,.pf-btn:focus-visible{outline:2px solid var(--gold3);outline-offset:3px;}


/* ╔═══════════════════════════════════════════════════════╗
   ║   PHASE 9 — AI ECOSYSTEM & BUSINESS EXPANSION        ║
   ╚═══════════════════════════════════════════════════════╝ */

/* ── MAINTENANCE PLANS ── */


/* ── WHAT'S COMING — PREMIUM SLIDER ── */
.fx-section{padding:9rem max(4vw,1.5rem);text-align:center;position:relative;overflow:hidden;}

   literal pulsing gold dot, matching the brief's "● COMING SOON" exactly */
.fx-badge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold3);box-shadow:0 0 6px 2px rgba(212,175,55,.6);animation:fxDotPulse 2.2s ease-in-out infinite;}
@keyframes fxDotPulse{0%,100%{opacity:.5;transform:scale(.85);}50%{opacity:1;transform:scale(1.15);}}

.fx-wrap{position:relative;z-index:1;max-width:1760px;margin:3rem auto 0;padding:0 max(3vw,1rem);}
html.fx-js .fx-wrap{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;}
html.fx-js .fx-wrap.fx-in{opacity:1;transform:none;}

.fx-swiper{padding:1rem .5rem 2.5rem;}
.fx-swiper .swiper-wrapper{align-items:stretch;}
.fx-swiper .swiper-slide{height:auto;display:flex;}
/* CSS fallback grid if Swiper never initialises — all ten cards stay visible */
.fx-swiper:not(.swiper-initialized) .swiper-wrapper{flex-wrap:wrap;gap:1.5rem;justify-content:center;}
.fx-swiper:not(.swiper-initialized) .swiper-slide{flex:1 1 260px;max-width:300px;}

.fx-card{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;text-align:left;
  padding:2.2rem 1.8rem;border-radius:24px;min-height:280px;
  background:rgba(8,7,5,.55);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(212,175,55,.22);box-shadow:0 20px 50px rgba(0,0,0,.4);overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1),border-color .35s;will-change:transform;}
.fx-card.reveal-ready{transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1),border-color .35s;}
.fx-glow{position:absolute;inset:0;border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(212,175,55,.18),transparent 62%);opacity:0;transition:opacity .35s;z-index:-1;pointer-events:none;}
.fx-card:hover{transform:translateY(-10px);border-color:rgba(212,175,55,.5);box-shadow:0 32px 76px rgba(0,0,0,.55),0 0 48px rgba(212,175,55,.2);}
.fx-card.reveal-ready.in:hover{transform:translateY(-10px);}
.fx-card:hover .fx-glow{opacity:1;}

.fx-icon{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;color:var(--gold3);filter:drop-shadow(0 0 6px rgba(212,175,55,.4));transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.fx-icon svg{width:100%;height:100%;}
.fx-card:hover .fx-icon{transform:scale(1.15) translateY(-2px);}

.fx-name{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink);}
.fx-desc{color:var(--ink2);font-size:.85rem;line-height:1.55;font-weight:300;flex:1;}

/* Prev/next navigation */
.fx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(14,11,8,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.3);color:var(--gold3);font-size:1.15rem;
  cursor:var(--cursor-mode,auto);transition:background .3s,color .3s,border-color .3s,transform .3s;}
.fx-nav:hover{background:var(--gold);color:#000;border-color:var(--gold);transform:translateY(-50%) scale(1.06);}
.fx-nav:focus-visible{outline:2px solid var(--gold3);outline-offset:3px;}
.fx-prev{left:-4px;}
.fx-next{right:-4px;}
@media(max-width:900px){.fx-nav{display:none;}}

/* Pagination dots */
.fx-pagination{position:relative;display:flex;justify-content:center;gap:.5rem;margin-top:1.5rem;}
.fx-swiper .swiper-pagination-bullet{width:7px;height:7px;border-radius:50%;background:rgba(212,175,55,.25);opacity:1;transition:all .3s;margin:0!important;}
.fx-swiper .swiper-pagination-bullet-active{background:var(--gold3);width:22px;border-radius:100px;box-shadow:0 0 8px rgba(212,175,55,.5);}

@media(max-width:700px){
  .fx-card{padding:1.7rem 1.4rem;min-height:240px;}
  .fx-icon{width:2rem;height:2rem;}
}
@media(prefers-reduced-motion:reduce){
  .fx-badge::before{animation:none;}
  .fx-card,.fx-icon{transition:none!important;}
}

/* ── SHARED CARD / BUTTON PRIMITIVES (booking, reviews) ── */
.card{background:rgba(14,11,8,.6);border:1px solid var(--line);border-radius:14px;padding:1.4rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-width:0;}
.card-title{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);margin-bottom:.8rem;}
.btn-sm{padding:.5rem 1rem;min-height:38px;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;border:none;cursor:var(--cursor-mode,auto);transition:all .3s;display:inline-flex;align-items:center;justify-content:center;}
.btn-outline{background:transparent;border:1px solid var(--line2);color:var(--ink2);}
.btn-outline:hover{border-color:var(--gold3);color:var(--gold3);}

/* ── SECTION HEAD (booking / reviews) ── */

/* ── BOOKING WIDGET ── */
.booking-section{padding:8rem max(4vw,1.5rem);}
.booking-wrap{max-width:900px;margin:2.5rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}

.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
.slot-btn{padding:.55rem .4rem;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line2);border-radius:8px;background:transparent;color:var(--ink2);cursor:var(--cursor-mode,auto);transition:all .3s;}
.slot-btn:hover{border-color:rgba(212,175,55,.4);color:var(--gold3);}
.slot-btn.selected{background:rgba(212,175,55,.12);border-color:var(--gold3);color:var(--gold3);}
.slot-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none;}
.cal-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-mini-day{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.78rem;cursor:var(--cursor-mode,auto);border:1px solid transparent;transition:all .3s;}
.cal-mini-day:hover:not(.past):not(.empty){background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.25);}
.cal-mini-day.selected{background:rgba(212,175,55,.15);border-color:var(--gold3);color:var(--gold3);font-weight:600;}
.cal-mini-day.today{color:var(--gold3);}
.cal-mini-day.past,.cal-mini-day.empty{color:var(--ink3);pointer-events:none;}
.cal-mini-label{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);text-align:center;padding-bottom:.3rem;}


/* ═══ WHY CHOOSE US ═══ */
.why-section{padding:8rem max(4vw,1.5rem);}
.why-grid{max-width:1700px;margin:2.5rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}


.why-card{background:rgba(10,8,5,.55);border:1px solid var(--line);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;transition:border-color .4s,transform .4s,box-shadow .4s;}
.why-card:hover{border-color:rgba(212,175,55,.3);transform:translateY(-3px);}
.why-icon{font-size:1.8rem;align-self:flex-start;}
.why-title{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.03em;text-transform:uppercase;margin-top:.25rem;}
.why-desc{font-size:.88rem;color:rgba(240,237,228,.72);font-weight:300;line-height:1.65;}

/* ═══ COMPARISON TABLE ═══ */

/* ═══ SINGLE TRAVELING GOLD SCAN LINE (comparison table) ═══
   Replaces the previous per-cell dot system entirely (removed: 19 row
   delays, 3 column delays, two dot keyframes, radial-gradient dots,
   box-shadow "particle" glow). Now there is exactly ONE ultra-thin (2px)
   line, positioned on a single overlay element that spans the whole
   table's scroll wrapper, sweeping top→bottom in one continuous motion —
   not confined to (or repeated per) individual cells.

   Static column dividers (the plain, non-animated background-image lines
   below) are unrelated to this effect and are kept as-is — they're just
   ordinary grid lines, not "dots/particles". */
  background-image:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05));
  background-repeat:no-repeat;background-size:1px 100%;background-position:left top;
}


/* The line itself: 2px tall, full width, soft gold glow above and below
   via box-shadow (no blur filter needed — box-shadow spread already gives
   a smooth falloff). mix-blend-mode:screen means it brightens whatever
   text/row it passes over instead of covering it, so text underneath
   stays fully legible the whole time, not just because it's thin. */
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,#D4AF37 15%,#D4AF37 85%,transparent);
  box-shadow:0 0 6px 1px rgba(212,175,55,.5),0 0 14px 3px rgba(212,175,55,.25);
  opacity:.85;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:2;
  animation:compScanLine 7s linear infinite;
  will-change:top;
}

@keyframes compScanLine{
  0%{top:0;}
  100%{top:calc(100% - 2px);}
}

@media(prefers-reduced-motion:reduce){
}


/* ═══ CONTACT / QUOTE MODAL ═══ */
.modal-bg{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;overflow:hidden;}
.modal-bg.open{opacity:1;visibility:visible;}
.modal-blur{position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.modal{position:relative;z-index:1;background:rgba(10,8,5,.97);border:1px solid rgba(212,175,55,.25);border-radius:20px;max-width:580px;width:100%;max-height:min(90vh,900px);max-height:min(90svh,900px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch;outline:none;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 60px rgba(212,175,55,.08);transform:translateY(24px) scale(.96);transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.modal-bg.open .modal{transform:translateY(0) scale(1);}
.modal-close{position:sticky;top:.8rem;margin:.8rem .8rem 0 auto;width:34px;height:34px;min-width:34px;min-height:34px;border-radius:50%;border:1px solid rgba(240,237,228,.2);background:rgba(10,8,5,.9);color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:border-color .3s,color .3s;z-index:5;flex-shrink:0;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.modal-close:hover{border-color:var(--gold3);color:var(--gold3);}
.modal-close:focus-visible{outline:2px solid var(--gold3);outline-offset:3px;}
.modal-inner{padding:.6rem 2rem 2rem;}
.modal-inner{padding:1.8rem 2rem 2rem;clear:both;}

.modal-eyebrow{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold3);margin-bottom:.6rem;}
.modal-title{font-family:'Inter Tight',sans-serif;font-weight:900;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.05em;text-transform:uppercase;line-height:.9;margin-bottom:1.2rem;}
.modal-title em{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;text-transform:none;background:linear-gradient(180deg,var(--gold3),var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.modal-service-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold3);background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.25);border-radius:100px;padding:.35rem .9rem;display:inline-block;margin-bottom:1.4rem;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}

.form-grp{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;}
.form-grp.full{margin-bottom:1rem;}
.form-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);}
.form-inp{background:rgba(255,255,255,.05);border:1px solid rgba(240,237,228,.15);border-radius:10px;padding:.75rem 1rem;font-size:max(16px,.88rem);color:var(--ink);font-family:'Inter Tight',sans-serif;outline:none;transition:border-color .3s,background .3s;width:100%;}
.form-inp:focus-visible{outline:2px solid var(--gold3);outline-offset:2px;}
.form-inp:focus{border-color:rgba(212,175,55,.5);background:rgba(212,175,55,.04);}
.form-inp.err{border-color:rgba(239,68,68,.5);}
.form-sel{appearance:none;-webkit-appearance:none;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 1l5 5 5-5' stroke='%23d4af37' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;cursor:pointer;}
.form-sel option{background:#0a0805;color:var(--ink);}
.form-ta{resize:vertical;min-height:100px;line-height:1.55;}
.form-err{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#fca5a5;min-height:1rem;}
.form-submit{width:100%;padding:1.1rem;background:linear-gradient(135deg,var(--gold3),var(--gold),var(--gold2));color:#000;border:none;border-radius:100px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:transform .35s,box-shadow .35s;position:relative;overflow:hidden;margin-top:.5rem;}
.form-submit:hover{transform:scale(1.02);box-shadow:0 10px 28px rgba(212,175,55,.35);}
.form-submit:disabled{opacity:.6;pointer-events:none;}
.form-submit.loading{opacity:.7;pointer-events:none;}
.form-privacy{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);text-align:center;margin-top:.8rem;line-height:1.5;}
/* Success state */
.modal-success{display:none;text-align:center;padding:2rem 0;}
.modal-success.show{display:block;}
.success-ring{width:72px;height:72px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 1.4rem;animation:successPop .6s cubic-bezier(.34,1.56,.64,1) forwards;}

.success-title{font-family:'Bodoni Moda',serif;font-style:italic;font-size:2rem;color:var(--gold3);margin-bottom:.8rem;}
.success-sub{color:var(--ink2);font-size:.9rem;line-height:1.6;max-width:380px;margin:0 auto 1.5rem;}
.success-sub strong{color:var(--gold3);}
.success-timer{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);margin-bottom:1.5rem;}
.success-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;}


/* ═══ FAQ ACCORDION ═══ */
.faq-section{padding:8rem max(4vw,1.5rem);}
.faq-inner{max-width:860px;margin:0 auto;}
.faq-list{display:flex;flex-direction:column;gap:.5rem;margin-top:2.5rem;}
.faq-item{background:rgba(10,8,5,.55);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .4s;}
.faq-item:hover{border-color:rgba(212,175,55,.2);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;background:transparent;border:none;cursor:pointer;text-align:left;color:var(--ink);font-family:'Inter Tight',sans-serif;font-size:1rem;font-weight:600;letter-spacing:-.02em;transition:color .3s;}
.faq-q:hover{color:var(--gold3);}
.faq-arrow{font-size:.7rem;color:var(--gold3);transition:transform .4s;flex-shrink:0;}
.faq-item.open .faq-arrow{transform:rotate(45deg);}
.faq-body-inner{padding:0 1.4rem 1.2rem;color:var(--ink2);font-size:.9rem;font-weight:300;line-height:1.7;}

/* ═══ ABOUT / STUDIO ═══ */









/* ═══ TESTIMONIALS (additions) ═══ */






/* ═══ PROCESS ═══ */




/* ═══ ABOUT COUNTERS (inline) ═══ */
.counter{text-align:center;}
.count-num{font-family:"Bodoni Moda",serif;font-weight:400;font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:-.04em;background:linear-gradient(180deg,var(--gold3),var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;}
.count-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);margin-top:.4rem;}


/* ═══ MOBILE OVERFLOW FIX ═══ */

*,*::before,*::after{max-width:100vw;}
section,div,main,footer,header,nav{max-width:100%;}
.mq{overflow:hidden;max-width:100%;width:100%;}
.hero{max-width:100%;overflow:hidden;}




/* ═══ CINEMATIC AMBIENT ORBS ═══ */
.amb-orbs{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.amb-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.14;will-change:transform;}
.amb-orb.o1{width:420px;height:420px;background:radial-gradient(circle,#d4af37,transparent 70%);top:8%;left:-8%;}
.amb-orb.o2{width:320px;height:320px;background:radial-gradient(circle,#b8860b,transparent 70%);top:55%;right:-6%;}
.amb-orb.o3{width:260px;height:260px;background:radial-gradient(circle,#f0d986,transparent 70%);top:80%;left:15%;opacity:.09;}




/* ═══ FOOTER — MINIMAL LUXURY (black/gold, Awwwards-style) ═══ */
footer{position:relative;background:#050505;padding:5.5rem max(4vw,1.5rem) 3rem;overflow:hidden;}
.footer-min{position:relative;z-index:1;max-width:1200px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2rem;}

/* ═══ FOOTER BACKGROUND SYSTEM — premium, minimal, barely-noticeable ═══
   Every layer below is purely decorative: pointer-events:none, z-index:0
   (footer-min sits at z-index:1 above all of them), and none of them
   affect the layout, size, or position of any existing text. */

.footer-bg-vignette{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);}

.footer-bg-lines{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.footer-bg-lines span{position:absolute;top:-15%;width:1px;height:130%;
  background:linear-gradient(180deg,transparent,rgba(212,175,55,.16) 35%,rgba(212,175,55,.22) 50%,rgba(212,175,55,.16) 65%,transparent);
  filter:blur(1px);}
.footer-bg-lines span:nth-child(1){left:6%;animation:footerLineDriftL 26s ease-in-out infinite;}
.footer-bg-lines span:nth-child(2){right:6%;left:auto;animation:footerLineDriftR 26s ease-in-out infinite;animation-delay:12s;}
@keyframes footerLineDriftL{
  0%,100%{transform:translateX(0) rotate(-4deg) scaleY(1);opacity:.7;}
  50%{transform:translateX(10px) rotate(-2deg) scaleY(1.06);opacity:1;}
}
@keyframes footerLineDriftR{
  0%,100%{transform:translateX(0) rotate(4deg) scaleY(1);opacity:.7;}
  50%{transform:translateX(-10px) rotate(2deg) scaleY(1.06);opacity:1;}
}

.footer-bg-particles{position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 25%,rgba(212,175,55,.5),transparent),
    radial-gradient(1.5px 1.5px at 18% 70%,rgba(240,217,134,.4),transparent),
    radial-gradient(1px 1px at 30% 15%,rgba(212,175,55,.4),transparent),
    radial-gradient(1.5px 1.5px at 45% 55%,rgba(240,217,134,.3),transparent),
    radial-gradient(1px 1px at 62% 30%,rgba(212,175,55,.35),transparent),
    radial-gradient(1.5px 1.5px at 75% 65%,rgba(240,217,134,.4),transparent),
    radial-gradient(1px 1px at 88% 20%,rgba(212,175,55,.4),transparent),
    radial-gradient(1.5px 1.5px at 92% 75%,rgba(240,217,134,.3),transparent);
  animation:footerParticlesDrift 24s ease-in-out infinite alternate;
}
@keyframes footerParticlesDrift{0%{transform:translateY(0);}100%{transform:translateY(-18px);}}

.footer-bg-flares{position:absolute;inset:0;z-index:0;pointer-events:none;}
.footer-bg-flares span{position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(240,217,134,.5),transparent 70%);
  filter:blur(2px);animation:footerFlarePulse 9s ease-in-out infinite;}
.footer-bg-flares span:nth-child(1){top:14%;left:12%;width:5px;height:5px;animation-delay:0s;}
.footer-bg-flares span:nth-child(2){top:68%;right:16%;width:4px;height:4px;animation-delay:3s;}
.footer-bg-flares span:nth-child(3){top:80%;left:22%;width:3px;height:3px;animation-delay:6s;}
@keyframes footerFlarePulse{0%,100%{opacity:.25;}50%{opacity:.85;}}

.footer-bg-glow{position:absolute;z-index:0;pointer-events:none;
  top:24%;left:50%;width:min(560px,80%);height:220px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(212,175,55,.16),transparent 72%);
  filter:blur(6px);animation:footerGlowPulse 6s ease-in-out infinite;}
@keyframes footerGlowPulse{0%,100%{opacity:.95;}50%{opacity:1;}}

.footer-bg-streak{position:absolute;z-index:0;pointer-events:none;
  top:41%;left:50%;width:min(420px,70%);height:1px;transform:translateX(-50%);
  overflow:hidden;}
.footer-bg-streak::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.7),rgba(240,217,134,.9),rgba(212,175,55,.7),transparent);
  box-shadow:0 0 8px 1px rgba(212,175,55,.4);
  animation:footerStreakSweep 12s ease-in-out infinite;}
@keyframes footerStreakSweep{
  0%{left:-40%;opacity:0;}
  8%{opacity:1;}
  45%{left:100%;opacity:1;}
  55%,100%{left:100%;opacity:0;}
}

.footer-bg-grain{position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:footerGrainBreathe 8s ease-in-out infinite;}
@keyframes footerGrainBreathe{0%,100%{opacity:.02;}50%{opacity:.045;}}

@media(max-width:480px){
  .footer-bg-glow{top:20%;height:170px;}
  .footer-bg-streak{top:33%;}
}

@media(prefers-reduced-motion:reduce){
  .footer-bg-lines span,.footer-bg-particles,.footer-bg-flares span,
  .footer-bg-glow,.footer-bg-streak::after,.footer-bg-grain{animation:none;}
  .footer-bg-glow{opacity:1;}
  .footer-bg-streak::after{opacity:0;}
}
.footer-cta{font-family:'Inter Tight',sans-serif;font-weight:900;font-size:clamp(2.4rem,7vw,4.5rem);letter-spacing:-.04em;line-height:1.2;text-transform:uppercase;color:var(--ink);max-width:18ch;padding:.15em 0;}
.footer-cta em{
  font-style:italic;font-weight:800;text-transform:none;
  font-size:clamp(2.59rem,7.56vw,4.86rem); /* +8% over the inherited parent heading size */
  color:#D4AF37; /* solid, high-contrast fallback (9.69:1 vs footer bg) —
    guarantees strong readability even if the gradient-clip enhancement
    below doesn't apply. Uses the gradient's own middle stop so the
    fallback reads as the same "average" gold tone. */
  text-shadow:0 0 4px rgba(212,175,55,.10); /* very subtle shadow only — no heavy blur/glow */
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .footer-cta em{
    background:
      linear-gradient(120deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%) no-repeat,
      linear-gradient(180deg,#F8E7A1,#D4AF37,#B8860B);
    background-size:220% 100%,100% 100%;
    background-position:-120% 0,0 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:ctaShine 8s ease-in-out infinite;
  }
}
/* Slow luxury shine sweeping across the text once every 8s — the streak
   sits off to the side for most of the cycle and sweeps through briefly,
   rather than continuously animating back and forth. */
@keyframes ctaShine{
  0%,80%,100%{background-position:-120% 0,0 0;}
  92%{background-position:220% 0,0 0;}
}
@media(prefers-reduced-motion:reduce){
  .footer-cta em{animation:none;}
}
.footer-contact-min{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem 1.8rem;}
.footer-contact-min a{position:relative;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.65);transition:color .35s;padding-bottom:2px;}
.footer-contact-min a::after{content:'';position:absolute;bottom:-2px;left:50%;width:0;height:1px;background:var(--gold3);transition:width .4s cubic-bezier(.7,0,.3,1),left .4s cubic-bezier(.7,0,.3,1);}
.footer-contact-min a:hover{color:var(--gold3);}
.footer-contact-min a:hover::after{width:100%;left:0;}
.footer-social-min{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;}
.footer-social-min a{position:relative;color:rgba(255,255,255,.55);transition:color .35s,transform .35s;padding-bottom:2px;}
.footer-social-min a::after{content:'';position:absolute;bottom:-2px;left:50%;width:0;height:1px;background:var(--gold3);transition:width .4s cubic-bezier(.7,0,.3,1),left .4s cubic-bezier(.7,0,.3,1);}
.footer-social-min a:hover{color:var(--gold3);transform:translateY(-2px);}
.footer-social-min a:hover::after{width:100%;left:0;}
.footer-social-min a:focus-visible,.footer-contact-min a:focus-visible,.footer-legal-min a:focus-visible{outline:1px solid var(--gold3);outline-offset:4px;}
.footer-dot{color:rgba(212,175,55,.4);font-size:10px;line-height:1;}
.footer-divider-min{width:100%;max-width:340px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.35),transparent);}
.footer-copy-min{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.35);}
.footer-legal-min{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;}
.footer-legal-min a{position:relative;color:rgba(255,255,255,.4);transition:color .35s;padding-bottom:2px;}
.footer-legal-min a::after{content:'';position:absolute;bottom:-2px;left:50%;width:0;height:1px;background:var(--gold3);transition:width .4s cubic-bezier(.7,0,.3,1),left .4s cubic-bezier(.7,0,.3,1);}
.footer-legal-min a:hover{color:var(--gold3);}
.footer-legal-min a:hover::after{width:100%;left:0;}

@media(max-width:480px){
  footer{padding:4rem 1.25rem 2.5rem;}
  .footer-min{gap:1.5rem;}
  .footer-cta{max-width:14ch;}
}



/* ═══ PORTFOLIO — IN-PROGRESS STATUS + PROGRESS BAR ═══ */
.pc-status-badge{position:absolute;top:.9rem;right:.9rem;z-index:3;display:flex;align-items:center;gap:.4rem;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;padding:.3rem .7rem;border-radius:100px;background:rgba(10,8,5,.75);backdrop-filter:blur(8px);border:1px solid rgba(212,175,55,.4);color:var(--gold3);}
.pc-status-dot{width:5px;height:5px;border-radius:50%;background:var(--gold3);flex-shrink:0;animation:pcStatusPulse 1.8s ease-in-out infinite;}

.pc-progress-wrap{display:flex;flex-direction:column;gap:.4rem;}
.pc-progress-top{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);}
.pc-progress-top span:last-child{color:var(--gold3);font-weight:600;}
.pc-progress-track{width:100%;height:4px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden;}
.pc-progress-fill{height:100%;width:0%;border-radius:100px;background:linear-gradient(90deg,var(--gold2),var(--gold3));}
.port-empty{text-align:center;color:var(--ink2);font-family:'JetBrains Mono',monospace;font-size:.85rem;letter-spacing:.05em;padding:3rem 1rem;max-width:1700px;margin:0 auto;}