/* 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%);}
.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%);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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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;
}
/* The dot used to slide down this 64px rail and back for ever, on a 3.6s
   heroSocialDotFloat loop. It is the last thing in the hero that moved on
   its own, so it now rests where the reduced-motion tier already put it —
   centred on the rail at opacity .8 — and the keyframes are gone. Size,
   colour, glow, centring and the rail itself are unchanged. */
.hero-social-dot{
  position:absolute;left:50%;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;
  background:var(--gold3);transform:translateX(-50%);opacity:.8;
  box-shadow:0 0 6px 2px rgba(212,175,55,.6);
}

.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;}
/* Not opacity:0 here, and that is deliberate. The hero's eyebrow, its
   sub-headline and both calls to action were hidden in CSS and revealed
   only by a GSAP timeline. GSAP comes from a third-party CDN, so any
   visitor whose browser could not reach it — a blocked CDN, a failed
   request, a corporate proxy — got the headline and nothing else: no
   description, no "Start your project" button, no way to convert.
   The hidden state now lives in js/main.js beside the timeline that
   undoes it, so the code that hides is the code that can show. */
.hero-eyebrow{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold3);display:inline-flex;align-items:center;gap:.6rem;}
.hero-eyebrow::before{content:'';width:24px;height:1px;background:var(--gold);}
.hero-h1{font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:900;font-size:clamp(2.8rem,6vw,6rem);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;}
.hero-h1 .ln{display:block;overflow:hidden;}
.hero-h1 .ln>span{display:inline-block;}
.hero-h1 em{font-family:'Instrument Serif','Instrument Serif Fallback',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;}
.hero-sub{font-family:'Inter Tight','Inter Tight Fallback',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','JetBrains Mono Fallback',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;overflow:hidden;cursor:var(--cursor-mode,auto);}
.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','JetBrains Mono Fallback',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);}
/* The disciplines line: what the studio actually does, stated once,
   directly under the proof line. Same mono/uppercase register as
   .hero-trust-text so it reads as metadata rather than a second
   headline, one step dimmer so it sits behind the claim above it. */
.hero-disciplines{margin-top:.85rem;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);line-height:1.9;max-width:34rem;}
.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','Bodoni Moda Fallback',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','JetBrains Mono Fallback',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2);writing-mode:vertical-rl;}
.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','Inter Tight Fallback',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','JetBrains Mono Fallback',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','Inter Tight Fallback',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','Instrument Serif Fallback',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','JetBrains Mono Fallback',monospace;font-size:11px;color:var(--ink2);}
.w-name{font-family:'Inter Tight','Inter Tight Fallback',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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',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','Inter Tight Fallback',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','JetBrains Mono Fallback',monospace;letter-spacing:.1em;text-transform:uppercase;margin-top:.15rem;}








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


/* .reveal was removed: no element in any page carries the class, and
   nothing reveals it — it could only ever have hidden content for good. */

/* ===== 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;}
.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','Inter Tight Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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);}
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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',serif;font-weight:400;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;}
.pc-price{font-family:'Inter Tight','Inter Tight Fallback',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','Bodoni Moda Fallback',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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','Inter Tight Fallback',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','Inter Tight Fallback',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','JetBrains Mono Fallback',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','Inter Tight Fallback',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','Bodoni Moda Fallback',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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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;}
.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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',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','Inter Tight Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',serif;font-size:1.8rem;color:var(--gold3);line-height:1;}
.cs-result-lbl{font-family:'JetBrains Mono','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',serif;font-style:italic;font-size:1.05rem;color:var(--ink);line-height:1.5;}
.cs-quote-auth{font-family:'JetBrains Mono','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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;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) ── */
/* The selector had been lost here too, so iOS kept painting its grey tap
   flash over every button and link on the site. */
a,button,[role="button"],input,select,textarea,summary{
  -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 ──
   Both classes are written into the HTML, so the hidden state has to be
   conditional on JavaScript being able to undo it. html.rd-js is set by
   an inline script in <head>; without it the four portfolio cards that
   carry .reveal-ready would be permanently invisible to anyone browsing
   without scripts, and to any crawler that does not run them. */
html.rd-js .reveal-ready{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);}
html.rd-js .reveal-ready.in{opacity:1;transform:translateY(0);}
html.rd-js .reveal-scale{opacity:0;transform:scale(.94);transition:opacity .7s ease,transform .7s ease;}
html.rd-js .reveal-scale.in{opacity:1;transform:scale(1);}
/* Reduced motion: no reason to hold content back at all. */
@media (prefers-reduced-motion: reduce){
  html.rd-js .reveal-ready,html.rd-js .reveal-scale{opacity:1;transform:none;transition:none;}
}

/* ── 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;}

/* The badge borrows .p5-badge's pill shell and replaces its ✦ glyph with a
   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);}
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;}
.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','Inter Tight Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','Inter Tight Fallback',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 — removed ═══
   The comparison table was taken out of the markup, but its styles were
   left behind, and in a broken state: two rules had lost their selector
   lines, so a declaration block sat directly after a comment with no
   `{` to open it. Every parser recovered differently and the trailing
   `}` unbalanced the rules that followed. Nothing on the site carries a
   .comp-* class, so the whole block goes. */

/* ═══ 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','JetBrains Mono Fallback',monospace;font-size:9.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold3);margin-bottom:.6rem;}
.modal-title{font-family:'Inter Tight','Inter Tight Fallback',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','Bodoni Moda Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','Inter Tight Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','Bodoni Moda Fallback',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','JetBrains Mono Fallback',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','Inter Tight Fallback',sans-serif;font-size:1rem;font-weight:600;letter-spacing:-.02em;transition:color .3s;}
.faq-q:hover{color:var(--gold3);}
/* The markup has always been .faq-icon; .faq-arrow matched nothing in
   any page, so opening an item gave no visual feedback at all. */
.faq-icon{font-size:1.1rem;color:var(--gold3);transition:transform .4s cubic-bezier(.4,0,.2,1);flex-shrink:0;display:inline-block;}
.faq-item.open .faq-icon{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",'Bodoni Moda Fallback',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','JetBrains Mono Fallback',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;}
/* Same correction as heroSocialDotFloat: `left` is a layout property.
   The streak is 40% of its parent and used to travel from left:-40% to
   left:100%, a distance of 140% of the parent — which, since translateX
   resolves against the element's own width, is 350% of itself. */
@keyframes footerStreakSweep{
  0%{transform:translateX(0);opacity:0;}
  8%{opacity:1;}
  45%{transform:translateX(350%);opacity:1;}
  55%,100%{transform:translateX(350%);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','Inter Tight Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',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','JetBrains Mono Fallback',monospace;font-size:.85rem;letter-spacing:.05em;padding:3rem 1rem;max-width:1700px;margin:0 auto;}

/* ── FOOTER SITEMAP COLUMNS ────────────────────────────────────────
   The homepage footer reuses the column block the generated pages use.
   Its rules used to live in pages.css, which meant the homepage loaded
   that entire stylesheet — 87 rules, of which exactly these five matched
   anything — to style one block. Moved here, next to the footer they
   belong to, so pages.css can leave the homepage bundle entirely.
   The .pg-foot copies in pages.css stay where they are: both files are
   read by different pages and neither is loaded by the other. */
/* Footer navigation now lives once in globals.css, which both bundles
   share — see "FOOTER NAVIGATION" there. */