/* ═══════════════════════════════════════════════════════════════
   Noor Studio Agency — AWWWARDS REDESIGN LAYER
   Loaded last (after premium.css). Additive only.
   Adds: cinematic preloader, page-transition wipe, pinned
   horizontal "Noor Method" section, real image reveals on
   portfolio cards, masked sub-copy reveals, micro-polish.
   Brand identity (black / gold / Bodoni) untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. GLOBAL LUXE MICRO-POLISH ──────────────────────────────── */
::selection{background:rgba(212,175,55,.85);color:#050505;}
::-moz-selection{background:rgba(212,175,55,.85);color:#050505;}

/* Slimmer, brand-toned scrollbar (WebKit + Firefox). */
html{scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.35) #0a0805;}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:#0a0805;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(212,175,55,.45),rgba(184,134,11,.3));border-radius:99px;border:2px solid #0a0805;}
::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,.6);}

/* Nav — deeper glass once scrolled (refines existing .scrolled). */
.nav.scrolled{
  background:rgba(5,5,5,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid rgba(212,175,55,.12);
}

/* Masked sub-copy reveal target (JS wraps .s-sub / .hero-sub lines). */
.rd-line-mask{display:block;overflow:hidden;}
.rd-line-mask>.rd-line{display:block;}

/* ── 1. HERO INTRO (the loading screen is gone) ────────────────
   The homepage no longer opens on a loading screen. The overlay held
   every visitor for 1.1–1.9 s of counter plus ~1.6 s of exit before the
   hero could be read, on a page whose headline is otherwise painted in
   well under a second.

   The hero's entrance used to be a GSAP timeline in main.js that played
   behind that panel. Without the panel it cannot stay in JavaScript:
   the headline is painted before any script arrives, so a timeline that
   begins by hiding it would show the visitor their headline, take it
   away, and slide it back in. Same motion, same easing, same timings —
   declared here, so it starts on the frame the page first paints.

     0.05s  eyebrow fades up
     0.10s  the two headline lines rise out of their masks, 0.1s apart
     0.70s  the sub-copy and buttons rise into place
     1.00s  the scroll cue appears

   THE SUB-COPY RISES; IT DOES NOT FADE. That is the measured choice,
   not a taste one. p.hero-sub is this page's largest first-paint text
   and therefore its LCP element (~600 ms at 390 px, 4x CPU). Chrome
   does not count an opacity-0 element as a paint candidate until it
   becomes visible, so a fade that starts from opacity 0 moved LCP to
   the end of the fade: 2.3 s median against 0.6 s, with nothing else
   changed. A transform-only rise keeps the copy painted on the first
   frame — Chrome records it then, wherever it is on its way in. The
   eyebrow and scroll cue are too small to ever be the candidate, so
   they keep their fades.

   `backwards` fill, not `both`: the elements sit at their starting
   state only until their animation begins and are left in their natural
   state once it ends, so the scroll parallax in main.js, which tweens
   the scroll cue's opacity later, never has to fight a finished
   animation. Only transform and opacity are animated. Gated on
   html.rd-js, like every other reveal: with JavaScript off the hero is
   simply there. */
@keyframes rdHeroLine{from{transform:translateY(110%);}to{transform:translateY(0);}}
@keyframes rdHeroFade{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes rdHeroRise{from{transform:translateY(24px);}to{transform:translateY(0);}}
@keyframes rdHeroCue{from{opacity:0;}to{opacity:1;}}
html.rd-js .hero-eyebrow{animation:rdHeroFade .7s cubic-bezier(.16,1,.3,1) .05s backwards;}
html.rd-js .hero-h1 .ln>span{animation:rdHeroLine 1.2s cubic-bezier(.16,1,.3,1) .1s backwards;}
html.rd-js .hero-h1 .ln:nth-child(2)>span{animation-delay:.2s;}
html.rd-js .hero-bottom{animation:rdHeroRise .9s cubic-bezier(.16,1,.3,1) .7s backwards;}
html.rd-js .scroll-ind{animation:rdHeroCue .7s ease 1s backwards;}
@media (prefers-reduced-motion: reduce){
  html.rd-js .hero-eyebrow,html.rd-js .hero-h1 .ln>span,
  html.rd-js .hero-bottom,html.rd-js .scroll-ind{animation:none;}
}

/* ── 2. PAGE-TRANSITION WIPE ──────────────────────────────────── */
.rd-wipe{
  position:fixed;inset:0;z-index:1500;pointer-events:none;
  transform:translateY(101%);
  background:#050505;
  border-top:1px solid rgba(212,175,55,.45);
  box-shadow:0 -20px 60px rgba(212,175,55,.12);
  display:flex;align-items:center;justify-content:center;
}
.rd-wipe.rd-active{pointer-events:auto;}
.rd-wipe-label{
  font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-style:italic;
  font-size:clamp(1.2rem,3vw,2rem);color:var(--gold3);
  letter-spacing:.06em;opacity:0;
}

/* ── 4. PORTFOLIO — REAL IMAGE REVEALS ────────────────────────── */
.pc-img{
  position:absolute;inset:26px 0 0 0; /* below the browser chrome bar */
  overflow:hidden;z-index:1;
  clip-path:inset(0 0 100% 0); /* revealed on scroll by JS */
}
html:not(.rd-js) .pc-img{clip-path:inset(0);}
.pc-img img{
  width:100%;height:116%;object-fit:cover;display:block;
  transform:scale(1.1);
  filter:saturate(1.05);
  transition:filter .5s;
}
.port-card:hover .pc-img img{filter:saturate(1.2) brightness(1.08);}
/* Real screenshot replaces the abstract mockup lines on those cards */
.port-card.rd-has-img .pc-mockup-ui{display:none;}
.port-card.rd-has-img .pc-bg{opacity:.55;}

/* ── 5. REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .rd-wipe{display:none;}
  .pc-img,.proc-intro-img{clip-path:inset(0)!important;}
  .pc-img img,.proc-intro-img img{transform:none!important;height:100%;}
  .rd-line-mask>.rd-line{transform:none!important;}
}

/* ── 7. TRUSTED TECHNOLOGIES MARQUEE ──────────────────────────── */
.mq.mq-techbar{
  position:relative;padding:2.2rem 0 2.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.mq-eyebrow{
  text-align:center;margin-bottom:1.6rem;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9.5px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink2);
}
.mq-item.mq-tech{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:500;
  font-size:clamp(.95rem,1.3vw,1.15rem);letter-spacing:.02em;
  /* .45 computed to 3.93:1 against the #050505 page and failed WCAG AA.
     The alpha is what carries the "de-emphasised" look here, so it is
     raised only as far as it has to go: .52 lands at 5.11:1. */
  color:rgba(240,237,228,.52);
  transition:color .4s,filter .4s;
  filter:grayscale(1);
  padding:0 2.6rem;
}
.mq-logo{display:inline-flex;width:22px;height:22px;flex-shrink:0;}
.mq-logo svg{width:100%;height:100%;}
.mq-item.mq-tech:hover{
  color:var(--gold3);filter:grayscale(0);
  text-shadow:0 0 24px rgba(212,175,55,.45);
}
.mq-item.mq-tech:hover .mq-logo{filter:drop-shadow(0 0 10px rgba(212,175,55,.55));}

/* ── 8. THE NOOR METHOD — VERTICAL TIMELINE ───────────────────── */
.proc-section{
  position:relative;overflow:hidden;
  padding:clamp(5rem,10vw,9rem) max(4vw,1.5rem);
  background:radial-gradient(ellipse 60% 40% at 85% 8%,rgba(212,175,55,.05),transparent 60%),var(--bg);
}
.proc-head{max-width:1700px;margin:0 auto;}
.mt-wrap{position:relative;max-width:820px;margin:clamp(3rem,6vw,5rem) auto 0;}
.mt-rail{
  position:absolute;top:0;bottom:0;left:11px;width:1px;
  background:rgba(240,237,228,.1);
}
.mt-rail i{
  position:absolute;inset:0;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,var(--gold3),var(--gold2));
  box-shadow:0 0 14px rgba(212,175,55,.4);
}
html:not(.rd-js) .mt-rail i{transform:scaleY(1);}
.mt-list{list-style:none;display:flex;flex-direction:column;gap:clamp(2rem,4.5vw,3.4rem);margin:0;padding:0;}
.mt-step{position:relative;padding-left:clamp(3rem,6vw,4.4rem);}
.mt-node{
  position:absolute;left:4px;top:1.9rem;width:15px;height:15px;border-radius:50%;
  background:#0a0805;border:1px solid var(--gold);
  box-shadow:0 0 0 5px rgba(212,175,55,.08),0 0 16px rgba(212,175,55,.35);
}
.mt-node::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--gold3);}
.mt-card{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(160deg,rgba(240,237,228,.03),rgba(240,237,228,0) 55%),var(--bg2);
  padding:clamp(1.6rem,3vw,2.4rem);
  transition:border-color .4s,transform .4s;
}
.mt-step:hover .mt-card{border-color:rgba(212,175,55,.32);transform:translateX(6px);}
.mt-num{
  position:absolute;top:.1rem;right:1.2rem;
  font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-style:italic;font-weight:500;
  font-size:clamp(3.4rem,7vw,5.4rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(212,175,55,.25);
  pointer-events:none;user-select:none;
}
.mt-tag{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold3);margin-bottom:.7rem;
}
.mt-title{
  font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;color:var(--ink);margin-bottom:.7rem;
}
.mt-desc{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:300;
  font-size:clamp(.92rem,1.15vw,1.02rem);line-height:1.7;color:var(--ink2);max-width:52ch;
}

/* ── 9. SERVICES — GLASS CARDS ────────────────────────────────── */
.svcx-card.svcx-glass{
  background:linear-gradient(160deg,rgba(240,237,228,.05),rgba(240,237,228,.015) 60%);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(240,237,228,.09);
}
.svcx-card.svcx-glass::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(212,175,55,.1),transparent 65%);
  opacity:0;transition:opacity .4s;
}
.svcx-card.svcx-glass:hover::after{opacity:1;}
.svcx-card.svcx-glass:hover{border-color:rgba(212,175,55,.3);}
.svcx-icon-svg{display:inline-flex;width:34px;height:34px;color:var(--gold3);}
.svcx-icon-svg svg{width:100%;height:100%;}

/* ── 11. RESULTS — COUNTERS ───────────────────────────────────── */
.res-section{
  padding:clamp(5rem,9vw,8rem) max(4vw,1.5rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(212,175,55,.025),transparent 40%),var(--bg);
}
.res-inner{max-width:1700px;margin:0 auto;}
.res-grid{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
}
.res-item{border-left:1px solid rgba(212,175,55,.25);padding-left:1.6rem;}
.res-num{
  font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-weight:500;line-height:1;
  font-size:clamp(3rem,6.5vw,5.5rem);color:var(--ink);
  font-feature-settings:"tnum" 1;
}
.res-num em{font-style:italic;color:var(--gold);font-size:.5em;}
.res-lbl{
  margin-top:.8rem;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink2);
}
@media(max-width:900px){.res-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.res-grid{grid-template-columns:1fr 1fr;gap:1.4rem;}.res-item{padding-left:1rem;}}

/* ── 12. TESTIMONIALS — LUXURY CAROUSEL ───────────────────────── */
.tst-section{padding:clamp(5rem,10vw,9rem) max(4vw,1.5rem);overflow:hidden;}
.tst-head{max-width:1700px;margin:0 auto clamp(2.5rem,5vw,4rem);}
.tst-swiper{max-width:1200px;margin:0 auto;overflow:visible;}
.tst-card{
  position:relative;margin:0;height:100%;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(240,237,228,.035),rgba(240,237,228,0) 60%),var(--bg2);
  padding:clamp(1.8rem,3.4vw,2.8rem);
  transition:border-color .4s,transform .4s;
}
.swiper-slide:hover .tst-card{border-color:rgba(212,175,55,.3);transform:translateY(-4px);}
.tst-mark{
  position:absolute;top:.4rem;right:1.4rem;
  font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-size:6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(212,175,55,.3);
  pointer-events:none;
}
.tst-text{
  margin:0;font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.55;color:var(--ink);
  max-width:44ch;
}
.tst-auth{
  margin-top:1.6rem;display:flex;flex-direction:column;gap:.25rem;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold3);
}
.tst-ind{color:var(--ink2);font-size:9.5px;letter-spacing:.24em;}
.tst-nav{
  display:flex;align-items:center;justify-content:center;gap:1.4rem;
  margin-top:2.2rem;
}
.tst-prev,.tst-next{
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(212,175,55,.3);background:transparent;color:var(--gold3);
  font-size:1rem;cursor:var(--cursor-mode,auto);
  transition:background .35s,color .35s,border-color .35s;
}
.tst-prev:hover,.tst-next:hover{background:var(--gold);color:#000;border-color:var(--gold);}
.tst-pag{display:flex;gap:.5rem;}
.tst-pag .swiper-pagination-bullet{
  width:22px;height:2px;border-radius:0;background:rgba(240,237,228,.2);opacity:1;transition:background .3s;
}
.tst-pag .swiper-pagination-bullet-active{background:var(--gold3);}

@media (prefers-reduced-motion: reduce){
  .mt-rail i{transform:scaleY(1)!important;}
}

/* ── 13. IA REFINEMENTS (hero / portfolio / services / clients) ── */

/* Hero: pull the headline up out of the dead zone, keep the cinema. */
.hero{justify-content:center;padding-top:clamp(5.5rem,10vh,8rem);}
.hero-content{gap:1.6rem;}
@media(max-width:768px){
  .hero{min-height:96svh;padding-top:5.5rem;}
}

/* Cinematic drift on the ambient orbs (GSAP-driven, see redesign.js). */
.amb-orb{will-change:transform;}

/* Booking lead-in (former proposal statement) */
.prop-lead{color:var(--ink2);}

/* Selected Work — the star section: more air, larger previews, deeper zoom */
.port-grid{gap:clamp(2rem,3.4vw,3.2rem);}
.pc-preview{aspect-ratio:4/2.9;}
.port-card .pc-img img{transition:transform 1.1s cubic-bezier(.19,1,.22,1),filter .5s;}
.port-card:hover .pc-img img{transform:scale(1.07);}
.pc-body{padding:1.6rem 1.6rem 1.8rem;}
@media(max-width:768px){
  .port-grid{gap:1.6rem;}
  .pc-body{padding:1.3rem 1.2rem 1.5rem;}
}

/* Portfolio CTAs — comfortable touch targets */
.pc-btn-visit-gold,.pc-btn-cs{min-height:46px;}

/* Services — richer hover + active slide glow */
.svcx-card.svcx-glass{transition:border-color .45s,transform .45s,box-shadow .45s;}
.svcx-card.svcx-glass:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(212,175,55,.15);}
.swiper-slide-active .svcx-card.svcx-glass{
  border-color:rgba(212,175,55,.35);
  box-shadow:0 0 44px rgba(212,175,55,.12),0 18px 50px rgba(0,0,0,.4);
}
.svcx-swiper{padding:1rem 0 1.4rem;}

/* Client logos under testimonials */
.cl-row{max-width:1200px;margin:clamp(3.5rem,7vw,5.5rem) auto 0;text-align:center;}
.cl-cap{font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink2);margin-bottom:1.4rem;}
/* ═══════════════════════════════════════════════════════════════
   37. TRUSTED-BY LOGO MARQUEE — infinite, GSAP-driven
   ═══════════════════════════════════════════════════════════════ */
.cl-marquee{
  position:relative;overflow:hidden;max-width:1200px;margin:1.5rem auto 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.cl-track{display:flex;align-items:center;gap:clamp(2.4rem,5vw,4rem);width:max-content;will-change:transform;}
.cl-item{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding-bottom:1.4rem;
}
.cl-item a{display:inline-flex;color:inherit;text-decoration:none;}
.cl-item img{
  height:50px;width:auto;max-width:150px;object-fit:contain;
  filter:brightness(0) invert(1) grayscale(1);
  opacity:.8;
  transition:opacity .3s ease,transform .3s ease,filter .3s ease;
}
.cl-item:hover img{
  opacity:1;transform:scale(1.08);
  filter:brightness(0) invert(1) grayscale(0) sepia(.6) saturate(4) hue-rotate(-10deg) drop-shadow(0 0 10px rgba(212,175,55,.4));
}
.cl-item::after{
  content:attr(data-name);
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);white-space:nowrap;
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.cl-item:hover::after{opacity:1;}

@media(max-width:1023.98px){
  .cl-item img{height:42px;}
  .cl-track{gap:clamp(1.8rem,5vw,2.8rem);}
}
@media(max-width:600px){
  .cl-item img{height:38px;}
  .cl-track{gap:1.6rem;}
}
@media (prefers-reduced-motion: reduce){
  .cl-item img,.cl-item::after{transition:none!important;}
}

/* Footer — future services link */
.footer-more-min{margin:1.2rem 0 .6rem;}
.footer-more-min a{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold3);text-decoration:none;transition:color .3s;
}
.footer-more-min a:hover{color:var(--ink);}

/* Mobile vertical rhythm for the reordered flow */
@media(max-width:768px){
  .why-section{padding-top:4.5rem;padding-bottom:4.5rem;}
  .res-section,.tst-section{padding-top:4.5rem;padding-bottom:4.5rem;}
  .mt-card{padding:1.3rem 1.1rem;}
  .mt-num{font-size:2.6rem;right:.9rem;}
  .tst-card{padding:1.5rem 1.3rem;}
}

/* ═══════════════════════════════════════════════════════════════
   14. FINAL POLISH PASS — Creative Director refinements
   Driven by a measured audit: unified rhythm, radius scale,
   button system, card system, premium micro-interactions.
   ═══════════════════════════════════════════════════════════════ */

/* ── 14a. VERTICAL RHYTHM — one intentional scale ──────────────
   Standard chapters: 9rem. Compact bands (Results): 8rem.
   Audit showed arbitrary 8/9rem alternation — unified. */
.why-section,.faq-section,.booking-section{padding-top:9rem;padding-bottom:9rem;}
@media(max-width:1024px){
  .why-section,.faq-section,.booking-section,.res-section,.tst-section{padding-top:6rem;padding-bottom:6rem;}
}
@media(max-width:768px){
  section,.why-section,.port-section,.svc-section,.proc-section,
  .tst-section,.faq-section,.booking-section{padding-top:4.5rem;padding-bottom:4.5rem;}
  .res-section{padding-top:4rem;padding-bottom:4rem;}
  .hero{padding-bottom:3.5rem;}
}

/* ── 14b. RADIUS SCALE — cards 18px, compact items 14px ───────── */
.port-card,.svcx-card,.why-card,.mt-card,.tst-card{border-radius:18px;}
.faq-item{border-radius:14px;}
.pc-preview{border-radius:18px 18px 0 0;}
@media(max-width:768px){
  .port-card,.svcx-card,.why-card,.mt-card,.tst-card{border-radius:14px;}
  .pc-preview{border-radius:14px 14px 0 0;}
  .faq-item{border-radius:12px;}
}

/* ── 14c. BUTTON SYSTEM — glow, tactility, one easing ─────────── */
.btn,.pc-btn-visit-gold,.pc-btn-cs,.svcx-link,.form-submit,.tst-prev,.tst-next,.mob-cta{
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             box-shadow .45s cubic-bezier(.22,1,.36,1),
             background .35s,color .35s,border-color .35s;
}
.btn-p:hover,.form-submit:hover{box-shadow:0 6px 30px rgba(212,175,55,.35),0 0 0 1px rgba(212,175,55,.25);}
.btn-g:hover,.pc-btn-visit-gold:hover{box-shadow:0 4px 24px rgba(212,175,55,.22);}
.btn:active,.pc-btn-visit-gold:active,.pc-btn-cs:active,.svcx-link:active,
.form-submit:active,.tst-prev:active,.tst-next:active{transform:scale(.965);transition-duration:.12s;}
/* Case-study button joins the pill family (was square next to a pill) */
.pc-btn-cs{border-radius:100px;}
/* Learn More links reach a real touch target (was 34px) */
.svcx-link{min-height:44px;padding-top:.55rem;padding-bottom:.55rem;}
/* CTA arrows glide on hover */
.pc-arrow,.svcx-arw{display:inline-block;transition:transform .4s cubic-bezier(.22,1,.36,1);}
.pc-btn-visit-gold:hover .pc-arrow,.svcx-link:hover .svcx-arw{transform:translate(3px,-3px);}

/* ── 14d. CARD SYSTEM — one premium hover language ────────────── */
.why-card,.mt-card,.tst-card,.faq-item{
  transition:border-color .5s,transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s;
}
.why-card:hover,.tst-card:hover{
  transform:translateY(-5px);
  border-color:rgba(212,175,55,.32);
  box-shadow:0 18px 46px rgba(0,0,0,.42),0 0 0 1px rgba(212,175,55,.1);
}
.faq-item:hover{border-color:rgba(212,175,55,.28);}
.faq-item.open{border-color:rgba(212,175,55,.4);box-shadow:0 0 34px rgba(212,175,55,.07);}

/* ── 14e. PORTFOLIO — the strongest room in the house ─────────── */
.pc-preview{position:relative;}
.pc-preview::after{ /* cinematic vignette that deepens on hover */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,transparent 55%,rgba(5,5,5,.42));
  opacity:.5;transition:opacity .6s;
}
.port-card:hover .pc-preview::after{opacity:.85;}
.port-card{
  transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .6s;
}
.port-card:hover{
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(212,175,55,.16),
             0 0 60px rgba(212,175,55,.05);
}
/* Blur-up loading: images arrive soft, sharpen when decoded */
html.rd-js .pc-img img{filter:blur(14px) saturate(1.05);transform:scale(1.12);}
html.rd-js .pc-img img.rd-loaded{
  filter:blur(0) saturate(1.05);
  transition:filter .9s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.19,1,.22,1);
}
.port-card:hover .pc-img img.rd-loaded{filter:blur(0) saturate(1.2) brightness(1.06);}

/* ── 14f. RESULTS — quiet confidence ──────────────────────────── */
.res-item{position:relative;transition:border-color .5s;}
.res-item::after{
  content:'';position:absolute;left:-1px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--gold3),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.res-item.rd-in::after{transform:scaleY(1);}

/* ── 14g. TESTIMONIALS — breathing room, gentle motion ────────── */
.tst-swiper .swiper-slide{height:auto;display:flex;}
.tst-card{display:flex;flex-direction:column;justify-content:space-between;}
.tst-text{flex:1;}

/* ── 14h. FOCUS & KEYBOARD — visible, branded, consistent ─────── */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(212,175,55,.75)!important;
  outline-offset:3px;border-radius:4px;
}
.btn:focus-visible,.pc-btn-visit-gold:focus-visible,.pc-btn-cs:focus-visible,
.svcx-link:focus-visible,.form-submit:focus-visible{border-radius:100px;}

/* ── 14i. SECTION TRANSITIONS — hairline gold breath ──────────── */
.why-section,.svc-section,.proc-section,.tst-section,.faq-section{position:relative;}
.why-section::before,.proc-section::before,.faq-section::before{
  content:'';position:absolute;top:0;left:max(4vw,1.5rem);right:max(4vw,1.5rem);height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.16),transparent);
}

/* ── 14j. REDUCED MOTION — polish never at the cost of comfort ── */
@media (prefers-reduced-motion: reduce){
  html.rd-js .pc-img img{filter:none;transform:none;}
  .port-card:hover,.why-card:hover,.tst-card:hover{transform:none;}
  .res-item::after{transform:scaleY(1);}
}

/* ═══════════════════════════════════════════════════════════════
   15. DESKTOP HEADER NAVIGATION (≥1024px inline, <1024px burger)
   ═══════════════════════════════════════════════════════════════ */
.nav-right{display:flex;align-items:center;gap:1rem;}

@media(min-width:1024px){
  /* Premium glass bar — always on, deepens once scrolled */
  .nav{
    background:rgba(5,5,5,.42);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
    backdrop-filter:blur(14px) saturate(1.2);
    border-bottom:1px solid rgba(240,237,228,.06);
  }
  .nav.scrolled{
    background:rgba(5,5,5,.74);
    border-bottom-color:rgba(212,175,55,.14);
  }
  /* Inline links, burger gone */
  .nav-burger{display:none!important;}
  .nav-right{gap:2.2rem;}
  .nav-links{display:flex;gap:2rem;}
  .nav-links a{
    display:inline-block;
    color:var(--ink);
    padding:.4rem 0;
  }
  .nav-links a:hover,.nav-links a:focus-visible{color:var(--gold3);}
  .nav-cta:focus-visible,.lang-dropdown-trigger:focus-visible{
    outline:2px solid rgba(212,175,55,.6);outline-offset:3px;border-radius:100px;
  }
  .lang-option:focus-visible{
    outline:2px solid rgba(212,175,55,.6);outline-offset:-2px;background:rgba(200,164,93,.12);color:var(--gold3);
  }
  /* gold underline (rule exists in components.css) gets a softer origin */
  .nav-links a::after{bottom:.1rem;height:1px;}
}
@media(max-width:1023.98px){
  .nav-links{display:none;}
}

/* ═══════════════════════════════════════════════════════════════
   16. FOOTER — luxury final impression
   ═══════════════════════════════════════════════════════════════ */
#siteFooter{
  position:relative;
  padding:clamp(7rem,13vw,12rem) max(4vw,1.5rem) clamp(3rem,5vw,4.5rem);
}
/* Thin gold divider above the footer */
#siteFooter::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1100px,88vw);height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.5),transparent);
}
.footer-min{gap:clamp(2.4rem,4.5vw,3.6rem);}

/* Headline — bold white, gold-gradient "Exceptional" with a living glow */
.footer-cta{line-height:1.08;}
.ft-grad{
  font-style:normal;
  background:linear-gradient(100deg,#b8860b 0%,#d4af37 30%,#f5e18f 50%,#d4af37 70%,#b8860b 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 26px rgba(212,175,55,.35));
  animation:ftShimmer 7s ease-in-out infinite;
}
@keyframes ftShimmer{0%,100%{background-position:0% 0;}50%{background-position:100% 0;}}

/* Contact — larger, iconed, elegant hover */
.ft-contact{display:flex;flex-direction:column;align-items:center;gap:1.1rem;}
.footer-contact-min a.ft-line{
  display:inline-flex;align-items:center;gap:.9rem;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:300;
  font-size:clamp(1.15rem,2.4vw,1.7rem);letter-spacing:.01em;
  color:var(--ink);transition:color .35s;
}
.ft-ic{display:inline-flex;width:22px;height:22px;color:var(--gold3);opacity:.8;transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1);}
.ft-ic svg{width:100%;height:100%;}
.ft-txt{position:relative;}
.ft-txt::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:linear-gradient(90deg,var(--gold3),rgba(212,175,55,.2));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.footer-contact-min a.ft-line:hover{color:var(--gold3);}
.footer-contact-min a.ft-line:hover .ft-ic{opacity:1;transform:translateY(-2px);}
.footer-contact-min a.ft-line:hover .ft-txt::after{transform:scaleX(1);}

/* Socials — white, gold hover, underline left→right */
.footer-social-min.ft-social a{position:relative;color:var(--ink);transition:color .35s;padding-bottom:3px;}
.footer-social-min.ft-social a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold3);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.footer-social-min.ft-social a:hover,.footer-social-min.ft-social a:focus-visible{color:var(--gold3);}
.footer-social-min.ft-social a:hover::after,.footer-social-min.ft-social a:focus-visible::after{transform:scaleX(1);}

/* Primary CTA — gold border, black body, gold fill on hover */
.ft-cta{
  position:relative;display:inline-flex;align-items:center;gap:.8rem;
  padding:1.05rem 2.4rem;border-radius:100px;
  background:#050505;border:1px solid var(--gold);
  color:var(--gold3);font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  cursor:var(--cursor-mode,auto);overflow:hidden;
  transition:color .35s,background .45s cubic-bezier(.22,1,.36,1),
             transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s;
}
.ft-cta:hover{
  background:var(--gold);color:#050505;
  transform:scale(1.04);
  box-shadow:0 10px 44px rgba(212,175,55,.4),0 0 0 1px rgba(212,175,55,.4);
}
.ft-cta:active{transform:scale(.97);transition-duration:.12s;}
.ft-cta-arw{display:inline-block;transition:transform .45s cubic-bezier(.22,1,.36,1);}
.ft-cta:hover .ft-cta-arw{transform:translateX(6px);}

/* Bottom row — quiet, 60% opacity, gold hover */
.footer-copy-min{opacity:.6;font-size:.8rem;}
.footer-legal-min{opacity:.6;transition:opacity .35s;}
.footer-legal-min:hover{opacity:.85;}
.footer-legal-min a{transition:color .3s;}
.footer-legal-min a:hover{color:var(--gold3);}

/* Parallax layers get GPU hints */
.footer-bg-flares span,.footer-bg-glow{}

@media (prefers-reduced-motion: reduce){
  .ft-grad{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════
   17. CREATIVE DIRECTOR PASS — cursor labels, counters, portfolio,
   FAQ easing, 8px rhythm corrections
   ═══════════════════════════════════════════════════════════════ */

/* ── 17a. CONTEXT-AWARE CURSOR LABEL ──────────────────────────── */
.cur{display:flex;align-items:center;justify-content:center;}
.cur-label{
  opacity:0;transform:scale(.7);
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#050505;
  white-space:nowrap;pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.cur.has-label{background:var(--gold3);width:67px;height:67px;}
.cur.has-label .cur-label{opacity:1;transform:scale(1);}

/* ── 17b. RESULTS — glow pulse while counting ─────────────────── */
.res-num{transition:text-shadow .4s;}
.res-item.rd-counting .res-num{text-shadow:0 0 28px rgba(212,175,55,.45);}

/* ── 17c. PORTFOLIO — tech tags refined, live-preview affordance ─ */
.pc-tech{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;}
.pc-tech span{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink2);
  padding:5px 10px;border:1px solid rgba(240,237,228,.1);border-radius:100px;
  transition:border-color .35s,color .35s;
}
.port-card:hover .pc-tech span{border-color:rgba(212,175,55,.22);color:var(--ink);}

/* ── 17d. FAQ — buttery height easing (JS drives height; this backs it) ── */
.faq-body{}
.faq-body-inner{}

/* ── 17e. 8PX RHYTHM CORRECTIONS ───────────────────────────────
   Spot-audit found a few off-grid values; snapped to the 8px scale. */
.pc-tech{margin-top:16px;}                 /* was 1rem(16px) OK, gap now 8px */
.footer-contact-min,.ft-contact{gap:16px;} /* was inconsistent rem/px mix */
.mt-list{gap:clamp(32px,4.5vw,56px);}      /* was non-8 clamp values */
.res-grid{gap:32px;}
.svcx-swiper{padding-top:16px;padding-bottom:24px;}

/* ═══════════════════════════════════════════════════════════════
   18. LANGUAGE SWITCHER (FR | EN)
   ═══════════════════════════════════════════════════════════════ */
.lang-switch{
  display:flex;align-items:center;gap:.5rem;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:11px;letter-spacing:.14em;
}
.lang-switch [data-lang-btn]{
  background:none;border:none;padding:.3rem .15rem;
  color:var(--ink2);cursor:var(--cursor-mode,pointer);
  transition:color .3s;position:relative;
}
.lang-switch [data-lang-btn]::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold3);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.lang-switch [data-lang-btn]:hover{color:var(--ink);}
.lang-switch [data-lang-btn].active{color:var(--gold3);}
.lang-switch [data-lang-btn].active::after{transform:scaleX(1);}
.lang-switch [data-lang-btn]:focus-visible{outline:2px solid rgba(212,175,55,.75);outline-offset:3px;border-radius:3px;}
.lang-sep{color:var(--ink2);opacity:.4;font-size:10px;}

@media(min-width:1024px){
  .lang-switch{margin-right:.4rem;}
}
@media(max-width:1023.98px){
  /* Desktop switcher hides with the rest of .nav-links; mobile has its own instance inside the menu. */
  .nav-right>.lang-switch{display:none;}
}
.lang-switch-mob{
  justify-content:center;margin:1.4rem 0 .4rem;font-size:13px;
  order:5;
}
.lang-switch-mob [data-lang-btn]{padding:.5rem .3rem;color:var(--ink2);}
.lang-switch-mob [data-lang-btn].active{color:var(--gold3);}

/* Smooth cross-fade target used by the language-switch transition in js/i18n.js */
#main-content{}

/* ═══════════════════════════════════════════════════════════════
   19. WHY SECTION — FINAL POLISH
   Root-cause fix: .why-icon is a flex item inside a column flex
   container with no cross-axis constraint, so the bare <svg> (no
   width/height attrs, only a viewBox) was stretching to fill the
   card's full content width (~341px) — an invisible-at-a-glance but
   real oversized watermark behind every title. Fixed at the source
   with explicit, small dimensions, not just a font-size hint.
   ═══════════════════════════════════════════════════════════════ */
.why-icon.why-icon-svg{
  display:inline-flex;flex:none;width:26px;height:26px;
  color:var(--gold3);
}
.why-icon.why-icon-svg svg{width:100%;height:100%;display:block;}

.why-line{width:28px;height:1px;background:linear-gradient(90deg,var(--gold3),transparent);margin:.15rem 0 0;}

/* Gold glow on hover — layered with the existing lift/border-color. */
.why-card:hover{
  box-shadow:0 18px 46px rgba(0,0,0,.4),0 0 32px rgba(212,175,55,.14),0 0 0 1px rgba(212,175,55,.12);
}

/* Compact grid rhythm follow-through */
.why-grid{margin-top:2rem;gap:1.25rem;}

@media(max-width:768px){
  .why-card{padding:1.25rem;gap:.65rem;}
  .why-icon.why-icon-svg{width:24px;height:24px;}
}

/* Desktop nav — active section echoed in gold (scroll-spy driven). */
@media(min-width:1024px){
  .nav-links a.nav-active{color:var(--gold3);}
  .nav-links a.nav-active::after{width:100%;}
}

/* ═══════════════════════════════════════════════════════════════
   21. PORTFOLIO — living preview (Ken Burns) as a video substitute
   No video assets exist for the client sites, so a slow continuous
   pan/zoom on the static image delivers the "living preview" feel
   honestly, without fabricating media. Paused off-screen via JS.
   ═══════════════════════════════════════════════════════════════ */
.pc-img img.rd-kb{animation:pcKenBurns 14s ease-in-out infinite alternate;animation-play-state:paused;}
.pc-img img.rd-kb.rd-kb-play{animation-play-state:running;}
@keyframes pcKenBurns{from{transform:scale(1.03) translate(0,0);}to{transform:scale(1.09) translate(-1%,-1%);}}
.port-card:hover .pc-img img.rd-kb{animation-play-state:paused;} /* hover-zoom takes over, no fighting */
@media (prefers-reduced-motion: reduce){.pc-img img.rd-kb{animation:none!important;}}

/* ═══════════════════════════════════════════════════════════════
   22. MOBILE MENU — editorial, architectural, still
   ═══════════════════════════════════════════════════════════════
   One block, replacing two overlapping earlier passes that fought each
   other for the same selectors. Everything that moved on its own is gone:
   the mobGlowPulse radial that breathed behind the panel for ever, the
   mobCtaShine highlight that swept the button every six seconds, and the
   ten GSAP-driven gold particles. What is left is a black field, one thin
   gold arc, a left-aligned serif index and a single warm button.

   Motion exists only on open: the panel fades, the rows lift in sequence,
   the active rule draws itself. After that the menu holds perfectly still. */
@media(max-width:1023.98px){

  /* ── PANEL ── vertical rhythm is the design: meta at the top, the index
     in the middle taking the slack, CTA and footer anchored at the base. */
  .mob-menu{
    background:
      radial-gradient(ellipse 120% 60% at 50% 0%,rgba(212,175,55,.05),transparent 62%),
      #050505;
    display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;
    gap:clamp(1.1rem,2.4vh,2rem);
    padding:
      calc(4.9rem + env(safe-area-inset-top)) calc(1.6rem + env(safe-area-inset-right))
      calc(1.6rem + env(safe-area-inset-bottom)) calc(1.6rem + env(safe-area-inset-left));
    text-align:left;
    /* overflow-y:auto, not hidden. On a notched phone env(safe-area-inset-top)
       and -bottom add ~93px that no media query can see in advance; measured
       with a 59/34 inset the stack wants 875px inside an 844px viewport.
       Hidden would clip the signature line off the bottom with no way to
       reach it, so the panel scrolls the last few pixels instead. Contained,
       so the page behind it never takes over the gesture. */
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;
    transition:opacity .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .5s;
  }
  .mob-menu.open{
    opacity:1;visibility:visible;
    transition:opacity .5s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s;
  }

  /* Static atmosphere only: a grain sheet and an edge vignette, both fixed. */
  .mob-menu-noise{
    position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .mob-menu-vignette{
    position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(ellipse 78% 62% at 50% 42%,transparent 45%,rgba(0,0,0,.5) 100%);
  }
  .mob-menu-arc{
    position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  }
  .mob-menu-meta,.mob-menu-links,.mob-menu-foot{position:relative;z-index:1;}

  /* ── EDITORIAL DETAILS ── the small print that frames the index. */
  .mob-menu-meta{
    display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  }
  .mm-tag{max-width:9.5em;line-height:1.85;color:var(--ink2);}
  .mm-index{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;color:var(--ink2);}
  .mm-index-rule{display:block;width:56px;height:1px;background:rgba(212,175,55,.3);}
  .mm-index-num{color:rgba(240,217,134,.75);letter-spacing:.24em;}

  /* ── THE INDEX ── left-aligned, numbered, ruled. */
  .mob-menu-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    margin:clamp(.2rem,1.1vh,.9rem) 0;
  }
  .mob-menu a{
    display:grid;grid-template-columns:2.5rem 1fr;align-items:baseline;gap:.85rem;
    justify-content:start;text-align:left;
    padding:clamp(.45rem,1.35vh,.85rem) 0;min-height:0;
    font-family:'Canela','PP Editorial New','Cormorant Garamond','Cormorant Garamond Fallback',serif;
    font-weight:300;font-size:clamp(1.95rem,8.2vw,2.75rem);line-height:1.12;letter-spacing:-.015em;
    color:var(--ink);
    /* The divider: 1px at 10%, sitting just under the text. It is meant to
       be felt rather than seen — never louder than the serif above it. */
    border-bottom:1px solid rgba(240,237,228,.10);
    transition:color .35s ease;
  }
  .mob-menu a:last-child{border-bottom:0;}
  .mob-menu a:active{color:var(--gold3);}
  .mob-txt{display:inline-block;transition:none;}
  .mob-num{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:10px;font-weight:400;letter-spacing:.16em;
    color:rgba(240,237,228,.35);
    transform:translateY(-.15em);transition:color .35s ease;
  }

  /* ── ACTIVE ── gold type, a gold rule that replaces the grey one, and a
     single dot at the end of it. Drawn once on open, then still. */
  .mob-menu a::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg,rgba(212,175,55,.75),rgba(212,175,55,.15));
    transform:scaleX(0);transform-origin:left center;
    transition:transform .7s cubic-bezier(.22,1,.36,1) .35s;
  }
  .mob-menu a::before{
    content:'';position:absolute;right:0;bottom:-3.5px;width:5px;height:5px;border-radius:50%;
    background:var(--gold3);opacity:0;
    transition:opacity .4s ease .7s;
  }
  .mob-menu a.mob-active{color:var(--gold3);}
  .mob-menu a.mob-active .mob-num{color:rgba(240,217,134,.8);}
  .mob-menu.open a.mob-active::after{transform:scaleX(1);}
  .mob-menu.open a.mob-active::before{opacity:1;}

  /* ── FOOT ── CTA, then language, socials and the signature on one line. */
  .mob-menu-foot{display:flex;flex-direction:column;gap:clamp(1rem,2.6vh,1.6rem);}
  .mob-cta{
    position:relative;overflow:hidden;margin:0;width:100%;
    height:clamp(50px,6.4vh,56px);min-height:50px;padding:0 2rem;
    border:none;border-radius:100px;
    background:linear-gradient(135deg,#c8991f,#d4af37 48%,#e8cd7a 100%);
    color:#0a0805;font-weight:600;letter-spacing:.16em;
    display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
    /* Tactile, not luminous: a contact shadow and a hairline top highlight
       instead of the wide gold halo this button used to cast. */
    box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,filter .3s;
  }
  .mob-cta:active{
    transform:scale(.985);filter:brightness(.97);
    box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28);
  }
  .mob-cta-arw{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1);}
  .mob-cta:active .mob-cta-arw{transform:translate(2px,-2px);}

  .mob-menu-foot-row{
    display:flex;align-items:center;justify-content:space-between;gap:.9rem;
  }
  .lang-switch-mob{margin:0;order:0;font-size:11px;gap:.2rem;letter-spacing:.14em;}
  /* FR and EN measured 24x25 — too small to hit confidently with a thumb.
     The padding grows the target to the 38px the social circles use; the
     negative inline margin keeps the pair optically where it was. */
  .lang-switch-mob [data-lang-btn]{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:38px;min-width:38px;padding:0 .35rem;margin:0 -.3rem;
    opacity:.45;transition:opacity .3s,color .3s;
  }
  .lang-switch-mob [data-lang-btn].active{opacity:1;color:var(--gold3);}
  .lang-switch-mob .lang-sep{opacity:.22;}

  .mob-social{display:flex;align-items:center;gap:.55rem;}
  .mob-social a{
    width:38px;height:38px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(240,237,228,.13);color:var(--ink2);
    transition:border-color .3s,color .3s;
  }
  .mob-social a:active{border-color:rgba(212,175,55,.45);color:var(--gold3);}
  .mob-social svg{width:16px;height:16px;}

  .mob-menu-sig{
    font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
    font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink2);text-align:right;max-width:6.5em;line-height:1.7;
  }

  /* ── ENTRANCE ── the only motion in this menu. Rows lift in sequence when
     the panel opens; nothing repeats and nothing loops. */
  .mob-menu-meta,.mob-menu-links a,.mob-menu-foot{
    opacity:0;transform:translateY(12px);
    transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
  }
  .mob-menu.open .mob-menu-meta,
  .mob-menu.open .mob-menu-links a,
  .mob-menu.open .mob-menu-foot{opacity:1;transform:none;}
  .mob-menu.open .mob-menu-meta{transition-delay:.06s;}
  .mob-menu.open .mob-menu-links a:nth-child(1){transition-delay:.12s;}
  .mob-menu.open .mob-menu-links a:nth-child(2){transition-delay:.17s;}
  .mob-menu.open .mob-menu-links a:nth-child(3){transition-delay:.22s;}
  .mob-menu.open .mob-menu-links a:nth-child(4){transition-delay:.27s;}
  .mob-menu.open .mob-menu-links a:nth-child(5){transition-delay:.32s;}
  .mob-menu.open .mob-menu-links a:nth-child(6){transition-delay:.37s;}
  .mob-menu.open .mob-menu-links a:nth-child(7){transition-delay:.42s;}
  .mob-menu.open .mob-menu-foot{transition-delay:.48s;}

  /* ── HEADER ── logo, CTA and close share one optical line. */
  .nav-burger{
    width:42px;height:42px;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    background:transparent;border:1px solid rgba(212,175,55,.28);
    transition:border-color .35s,background .35s;
  }
  .nav.open .nav-burger{border-color:rgba(212,175,55,.45);}
  .nav-burger:active{background:rgba(212,175,55,.06);border-color:rgba(212,175,55,.5);}
  .nav-logo{padding-left:.1rem;}
  .nav-logo img{width:auto;height:32px;transition:opacity .3s;}
}

/* ── SHORT SCREENS ── an SE-class phone in landscape-ish height, or a tall
   phone with the browser chrome expanded. Seven serif rows, a button and a
   footer do not fit at full size, so the type steps down and the rows close
   up rather than letting the index scroll. Measured at 390x667. */
@media(max-width:1023.98px) and (max-height:730px){
  .mob-menu{padding-top:calc(4.1rem + env(safe-area-inset-top));gap:.7rem;}
  .mob-menu-links{margin:.2rem 0;}
  .mob-menu a{font-size:clamp(1.6rem,6.6vw,2rem);padding:.4rem 0;}
  .mob-menu-foot{gap:.85rem;}
  .mob-cta{height:48px;min-height:48px;}
  .mob-social a{width:34px;height:34px;}
  .mm-tag{line-height:1.6;}
}

@media (prefers-reduced-motion: reduce){
  .mob-menu-meta,.mob-menu-links a,.mob-menu-foot{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .mob-menu a::after,.mob-menu a::before{transition:none!important;}
}

/* ═══════════════════════════════════════════════════════════════
   23. FINAL CTA / CONTACT — ultra-premium redesign
   (Apple × Aman × Rolls-Royce reference tier)
   ═══════════════════════════════════════════════════════════════ */

/* ── Headline hierarchy ──────────────────────────────────────── */
.footer-cta{
  font-weight:900;line-height:1.02;letter-spacing:-.045em;
}
.footer-cta > span{display:inline-block;color:var(--ink);}
.ft-grad{
  font-style:italic;font-weight:500;
  background:linear-gradient(100deg,#b8860b 0%,#d4af37 30%,#f5e18f 50%,#d4af37 70%,#b8860b 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 34px rgba(212,175,55,.4));
  animation:ftShimmer 7s ease-in-out infinite;
}

/* Radial gold glow seated directly behind the headline */
.footer-cta{position:relative;}
.footer-cta::before{
  content:'';position:absolute;left:50%;top:50%;
  width:140%;height:220%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse 55% 45% at 50% 55%,rgba(212,175,55,.16),transparent 68%);
  pointer-events:none;z-index:-1;
}

/* ── Contact info → glass cards ──────────────────────────────── */
.ft-contact{gap:1rem;}
.ft-card{
  position:relative;overflow:hidden;
  padding:1.05rem 1.8rem;border-radius:18px;
  background:linear-gradient(160deg,rgba(240,237,228,.05),rgba(240,237,228,.015) 60%),rgba(8,7,5,.55);
  border:1px solid rgba(212,175,55,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:border-color .4s,box-shadow .4s,transform .4s cubic-bezier(.22,1,.36,1);
}
.ft-card:hover{
  border-color:rgba(212,175,55,.45);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 30px rgba(212,175,55,.14);
}
.ft-card .ft-ic{transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1);}
.ft-card:hover .ft-ic{transform:translateY(-2px) scale(1.08);}

/* Click ripple — a soft gold pulse expanding from the tap point */
.ft-ripple{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(212,175,55,.35),transparent 60%);
  opacity:0;transform:scale(0.6);
  transition:opacity .1s;
}
.ft-card:active .ft-ripple{opacity:1;transform:scale(1);transition:opacity .05s,transform .5s cubic-bezier(.22,1,.36,1);}

/* ── Socials → luxury pill buttons ───────────────────────────── */
.footer-social-min.ft-social{gap:.8rem;}
.footer-social-min.ft-social a.ft-pill{
  position:relative;overflow:hidden;
  padding:.65rem 1.5rem;border-radius:100px;
  border:1px solid rgba(240,237,228,.14);
  color:var(--ink);transition:border-color .4s,box-shadow .4s,transform .35s cubic-bezier(.22,1,.36,1);
}
.footer-social-min.ft-social a.ft-pill span{position:relative;}
.footer-social-min.ft-social a.ft-pill span::after{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--gold3);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.footer-social-min.ft-social a.ft-pill:hover{
  border-color:rgba(212,175,55,.55);
  box-shadow:0 0 22px rgba(212,175,55,.22);
  transform:scale(1.05);
}
.footer-social-min.ft-social a.ft-pill:hover span::after{transform:scaleX(1);}
.footer-social-min.ft-social .footer-dot{display:none;} /* dots replaced by pill spacing */

/* ── CTA button — ultra-premium ───────────────────────────────── */
.ft-cta{
  height:60px;padding:0 2.6rem;border-radius:999px;
  background:linear-gradient(135deg,#b8860b,#d4af37 45%,#f0d986 100%);
  border:1px solid rgba(240,217,134,.6);
  color:#0a0805;font-weight:600;
  box-shadow:0 14px 38px rgba(212,175,55,.3),0 0 0 1px rgba(212,175,55,.15);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.ft-cta:hover{
  background:linear-gradient(135deg,#b8860b,#d4af37 45%,#f0d986 100%);
  color:#0a0805;
  transform:translateY(-4px);
  box-shadow:0 22px 54px rgba(212,175,55,.45),0 0 0 1px rgba(212,175,55,.3);
}
.ft-cta:active{transform:translateY(-1px) scale(.97);transition-duration:.12s;}
/* Moving shine every 6s, matching the mobile CTA treatment. Defined as its
   own global keyframe because .ft-cta renders at every breakpoint, while
   the mobile menu's own highlight (since removed) lived in a mobile-only @media
   block — referencing it here would silently no-op above 1024px. */
/* `left` → `transform`, as above. This sweep is 35% of the button and
   travelled 190% of the button, which is 542.86% of itself. */
@keyframes ftCtaShine{
  0%,88%{transform:translateX(0) skewX(-18deg);}
  96%{transform:translateX(542.86%) skewX(-18deg);}
  100%{transform:translateX(542.86%) skewX(-18deg);}
}
.ft-cta::before{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:35%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:ftCtaShine 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .ft-grad{animation:none;}
  .ft-cta::before{animation:none;}
}

@media(max-width:768px){
  .ft-contact{flex-direction:column;width:100%;max-width:360px;margin:0 auto;}
  .ft-card{width:100%;justify-content:center;}
  .footer-cta::before{width:180%;height:180%;}
}

/* ═══════════════════════════════════════════════════════════════
   23. SERVICES — vertical alternating premium stack
   Replaces the vertical Swiper carousel entirely with a plain,
   scroll-revealed stack. No carousel library needed for this section.
   ═══════════════════════════════════════════════════════════════ */
.svc2-section{position:relative;overflow:hidden;padding-bottom:clamp(5rem,10vw,8rem);}
.svc2-particles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.svc2-particles span{
  position:absolute;border-radius:50%;background:rgba(240,217,134,.5);
  box-shadow:0 0 8px rgba(212,175,55,.45);
}

.svc2-stack{
  position:relative;z-index:1;max-width:1240px;margin:clamp(3rem,6vw,4.5rem) auto 0;
  padding:0 max(4vw,1.5rem);
  display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4rem);
}

/* ── Card: glass, gold border, alternating grid ── */
.svc2-card{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;
  padding:clamp(2rem,3.5vw,3rem);border-radius:28px;
  background:linear-gradient(160deg,rgba(240,237,228,.04),rgba(240,237,228,.01) 60%),rgba(8,7,5,.55);
  border:1px solid rgba(212,175,55,.16);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .5s;
}
.svc2-card:hover{
  transform:translateY(-8px);
  border-color:rgba(212,175,55,.4);
  box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 50px rgba(212,175,55,.12);
}
.svc2-card.svc2-flip{grid-template-columns:1fr 1fr;}
.svc2-card.svc2-flip .svc2-media{order:2;}
.svc2-card.svc2-flip .svc2-content{order:1;}

/* ── Media ── */
.svc2-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;}
.svc2-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(14px) saturate(1.05);transform:scale(1.12);
  transition:transform 1s cubic-bezier(.19,1,.22,1),filter .8s;
}
.svc2-media img.rd-loaded{filter:blur(0) saturate(1.05);transform:scale(1);}
.svc2-media-glow{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(5,5,5,.5));
  opacity:.6;transition:opacity .5s;
}
.svc2-card:hover .svc2-media-glow{opacity:.3;}

/* ── Content ── */
.svc2-content{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1rem;}
.svc2-num{
  font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-style:italic;font-weight:500;
  font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(212,175,55,.35);
}
.svc2-title{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em;text-transform:uppercase;
  margin-top:-.4rem;
}
.svc2-desc{color:var(--ink2);font-size:.98rem;line-height:1.65;font-weight:300;max-width:44ch;}
.svc2-features{list-style:none;margin:.3rem 0 .4rem;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.svc2-features li{display:flex;align-items:center;gap:.7rem;font-size:.92rem;color:var(--ink);font-weight:300;}
.svc2-check{color:var(--gold3);font-size:.75rem;flex-shrink:0;}
.svc2-cta{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:.4rem;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold3);border:1px solid rgba(212,175,55,.35);padding:.85rem 1.5rem;border-radius:100px;
  background:transparent;cursor:var(--cursor-mode,auto);
  transition:background .35s,color .35s,border-color .35s,transform .3s cubic-bezier(.22,1,.36,1);
}
.svc2-cta:hover{background:var(--gold);color:#050505;border-color:var(--gold);box-shadow:0 8px 28px rgba(212,175,55,.28);}
.svc2-cta:active{transform:scale(.95);}
.svc2-cta-arw{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.svc2-cta:hover .svc2-cta-arw{transform:translate(4px,-4px);}

/* ── Responsive: tablet stacks image above content, mobile single column ── */
@media(max-width:1023.98px){
  .svc2-card,.svc2-card.svc2-flip{
    grid-template-columns:1fr;
  }
  .svc2-card .svc2-media,.svc2-card.svc2-flip .svc2-media{order:1;}
  .svc2-card .svc2-content,.svc2-card.svc2-flip .svc2-content{order:2;}
  .svc2-content{align-items:center;text-align:center;}
  .svc2-features{align-items:center;}
  .svc2-features li{justify-content:center;}
  .svc2-desc{max-width:52ch;}
}
@media(max-width:767.98px){
  .svc2-stack{gap:1.75rem;}
  .svc2-card{padding:1.5rem;border-radius:20px;gap:1.4rem;}
  .svc2-media{border-radius:14px;}
  .svc2-num{font-size:2.2rem;}
}
@media (prefers-reduced-motion: reduce){
  .svc2-card,.svc2-media img{transition:none!important;}
  .svc2-card:hover{transform:none;}
}

/* ═══════════════════════════════════════════════════════════════
   24. CONTACT (FOOTER) — two-column editorial layout
   ═══════════════════════════════════════════════════════════════ */
.ft-editorial{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(3rem,6vw,6rem);
  align-items:center; /* vertical centering between the two columns */
  width:100%;max-width:1200px;margin:0 auto;
  text-align:left;
}
.ft-editorial-left{display:flex;flex-direction:column;gap:1.4rem;}
.ft-editorial-left .footer-cta{margin:0;}
.ft-editorial-desc{
  color:var(--ink2);font-size:1rem;line-height:1.7;font-weight:300;max-width:42ch;
}
.ft-editorial-right{
  display:flex;flex-direction:column;align-items:flex-start;gap:1.8rem;
}
.ft-editorial-right .ft-contact{flex-direction:column;align-items:flex-start;gap:.9rem;}
.ft-editorial-right .ft-social{justify-content:flex-start;}
.ft-editorial-right .ft-cta{align-self:flex-start;}

@media(max-width:900px){
  .ft-editorial{grid-template-columns:1fr;text-align:center;gap:2.6rem;}
  .ft-editorial-left{align-items:center;}
  .ft-editorial-desc{max-width:52ch;margin:0 auto;}
  .ft-editorial-right{align-items:center;}
  .ft-editorial-right .ft-contact{flex-direction:row;align-items:center;justify-content:center;}
  .ft-editorial-right .ft-social{justify-content:center;}
  .ft-editorial-right .ft-cta{align-self:center;}
}

/* ═══════════════════════════════════════════════════════════════
   25. PORTFOLIO — premium live showcase (iframe preview + fallback)
   ═══════════════════════════════════════════════════════════════ */
.pf3-stack{
  position:relative;z-index:1;max-width:1320px;margin:clamp(3rem,6vw,4.5rem) auto 0;
  padding:0 max(4vw,1.5rem);
  display:flex;flex-direction:column;gap:clamp(3rem,6vw,5rem);
  perspective:1200px;
}

.pf3-card{
  display:grid;grid-template-columns:65% 35%;gap:clamp(1.5rem,3vw,3rem);align-items:center;
  padding:clamp(1.5rem,2.5vw,2.2rem);border-radius:26px;
  background:linear-gradient(160deg,rgba(240,237,228,.04),rgba(240,237,228,.01) 60%),rgba(8,7,5,.55);
  border:1px solid rgba(212,175,55,.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  transition:border-color .5s,box-shadow .5s;
}
.pf3-card:hover,.pf3-card:active{
  border-color:rgba(212,175,55,.42);
  box-shadow:0 34px 76px rgba(0,0,0,.5),0 0 56px rgba(212,175,55,.14);
}
.pf3-card.pf3-flip{grid-template-columns:35% 65%;}
.pf3-card.pf3-flip .pf3-preview{order:2;}
.pf3-card.pf3-flip .pf3-content{order:1;}

/* ── Browser mockup ── */
.pf3-preview{position:relative;}
.pf3-browser{
  position:relative;border-radius:14px;overflow:hidden;
  background:#0a0906;border:1px solid rgba(240,237,228,.09);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.pf3-chrome{
  display:flex;align-items:center;gap:.5rem;padding:.65rem .9rem;
  background:linear-gradient(180deg,#161410,#0e0d0a);
  border-bottom:1px solid rgba(240,237,228,.06);
}
.pf3-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.pf3-dot-r{background:#ff5f57;} .pf3-dot-y{background:#febc2e;} .pf3-dot-g{background:#28c840;}
.pf3-url{
  margin-left:.6rem;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;color:var(--ink2);
  background:rgba(240,237,228,.05);border-radius:6px;padding:.25rem .7rem;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pf3-frame-wrap{position:relative;aspect-ratio:16/10;background:#050505;overflow:hidden;}
.pf3-static-preview{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.pf3-card:hover .pf3-static-preview{transform:scale(1.05);}
@media (prefers-reduced-motion: reduce){
  .pf3-static-preview{transition:none!important;}
}
.pf3-iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;
  opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.pf3-iframe[data-frame-ok="true"]{opacity:1;pointer-events:auto;}
.pf3-fallback-img{position:absolute;inset:0;z-index:2;transition:opacity .6s ease;}
.pf3-fallback-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(14px) saturate(1.05);transform:scale(1.1);
  transition:transform 1s cubic-bezier(.19,1,.22,1),filter .8s;
}
.pf3-fallback-img img.rd-loaded{filter:blur(0) saturate(1.05);transform:scale(1);}
.pf3-card:hover .pf3-fallback-img img.rd-loaded{transform:scale(1.05);}
/* JS toggles this class directly once an iframe is confirmed loading —
   :has() is a nice-to-have backup, not the primary mechanism. */
.pf3-frame-wrap.pf3-frame-live .pf3-fallback-img{opacity:0;pointer-events:none;}

.pf3-badge{
  position:absolute;top:1.6rem;right:1.6rem;z-index:2;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9px;letter-spacing:.15em;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);
}
.pf3-glow{
  position:absolute;inset:-1px;border-radius:14px;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 50% 0%,rgba(212,175,55,.18),transparent 65%);
  opacity:0;transition:opacity .5s;
}
.pf3-card:hover .pf3-glow{opacity:1;}

/* ── Content ── */
.pf3-content{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.85rem;padding:.5rem;}
.pf3-num{
  font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-style:italic;font-weight:500;
  font-size:clamp(2rem,4vw,2.8rem);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(212,175,55,.32);
}
.pf3-cat{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold3);
}
.pf3-title{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:700;
  font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.03em;
  margin-top:-.3rem;
}
.pf3-desc{color:var(--ink2);font-size:.94rem;line-height:1.6;font-weight:300;max-width:42ch;}
.pf3-tech{display:flex;flex-wrap:wrap;gap:8px;margin:.2rem 0;}
.pf3-tech span{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);padding:5px 10px;border:1px solid rgba(240,237,228,.1);border-radius:100px;
  transition:border-color .35s,color .35s;
}
.pf3-card:hover .pf3-tech span{border-color:rgba(212,175,55,.22);color:var(--ink);}
.pf3-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.6rem;}
.pf3-arrow{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.pf3-btn-visit:hover .pf3-arrow{transform:translate(3px,-3px);}

/* ── Responsive ── */
@media(max-width:1023.98px){
  .pf3-card,.pf3-card.pf3-flip{grid-template-columns:1fr;}
  .pf3-card .pf3-preview,.pf3-card.pf3-flip .pf3-preview{order:1;}
  .pf3-card .pf3-content,.pf3-card.pf3-flip .pf3-content{order:2;}
  .pf3-content{align-items:center;text-align:center;}
  .pf3-tech,.pf3-actions{justify-content:center;}
  .pf3-desc{max-width:52ch;}
}
@media(max-width:767.98px){
  .pf3-stack{gap:2.25rem;}
  .pf3-card{padding:1.1rem;border-radius:20px;gap:1.2rem;}
  .pf3-card:hover{transform:translateY(-4px) scale(1.01);} /* tilt disabled on touch */
  /* Gentle idle float on mobile — the card breathes even without hover. */
  .pf3-card{animation:pf3Float 6s ease-in-out infinite;}
  .pf3-card:nth-child(even){animation-delay:.6s;}
}
@keyframes pf3Float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

@media (prefers-reduced-motion: reduce){
  .pf3-card{animation:none!important;transition:none!important;}
  .pf3-card:hover{transform:none;}
}

/* ═══════════════════════════════════════════════════════════════
   26. PORTFOLIO — cinematic browsing simulation
   Honest architecture note: this animates the STATIC preview image
   (the fallback layer) since scripting a cross-origin iframe's scroll
   or injecting a cursor into its DOM is blocked by the browser's
   Same-Origin Policy — no site achieves that against a live embedded
   page. If a card's iframe DOES load (once a subdomain goes live and
   permits framing), the simulation layer sits on the fallback image
   underneath and is simply hidden by the existing crossfade.
   ═══════════════════════════════════════════════════════════════ */

.pf3-fallback-img{overflow:hidden;}
.pf3-sim-canvas{
  position:absolute;top:0;left:0;width:100%;height:180%;transform:translate3d(0,0,0);
}
.pf3-sim-canvas img{width:100%;height:100%;object-fit:cover;object-position:top;}

/* Glass reflection sheen — a soft diagonal highlight drifting across
   the frame, reinforcing the "screen" feel. */
.pf3-reflection{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);
  transform:translateX(-60%);
}

/* Subtle noise texture over the whole preview, like a real display. */
.pf3-noise{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hotspots — invisible plausible "nav item / CTA" zones the fake cursor
   visits; JS toggles .pf3-hs-active to pulse a soft ring on "hover". */
.pf3-hotspot{
  position:absolute;width:64px;height:26px;border-radius:6px;z-index:3;pointer-events:none;
  box-shadow:0 0 0 0 rgba(240,217,134,0);
  transition:box-shadow .3s ease,background .3s ease;
}
.pf3-hotspot.pf3-hs-active{
  background:rgba(240,217,134,.1);
  box-shadow:0 0 18px 4px rgba(212,175,55,.35);
}
.pf3-hs-1{top:6%;left:8%;width:120px;}
.pf3-hs-2{top:6%;right:8%;width:90px;}
.pf3-hs-3{top:38%;left:50%;transform:translateX(-50%);width:140px;height:36px;}

/* Fake cursor — purely cosmetic, lives entirely in our own DOM (never
   inside the iframe), so it's fully scriptable with GSAP. */
.pf3-fake-cursor{
  position:absolute;top:50%;left:50%;z-index:4;pointer-events:none;transform:translate3d(-50%,-50%,0);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
  opacity:0;
}
.pf3-fake-cursor.pf3-cursor-on{opacity:1;}
.pf3-cursor-ring{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid rgba(240,217,134,.8);opacity:0;transform:scale(1);
}
.pf3-cursor-ring.pf3-cursor-click{
  animation:pf3ClickRipple .5s ease-out;
}
@keyframes pf3ClickRipple{
  0%{opacity:.9;transform:scale(.4);}
  100%{opacity:0;transform:scale(2.2);}
}

/* Hero reveal on first paint — image fades/scales in before the demo
   loop begins (matches "the website loads, hero animates in"). */
.pf3-fallback-img img{transition:none;} /* JS/GSAP owns this now, not the old blur-up transition */

@media (prefers-reduced-motion: reduce){
  .pf3-sim-canvas,.pf3-fake-cursor,.pf3-reflection{animation:none!important;transform:none!important;}
  .pf3-fake-cursor{display:none;}
}

/* ═══════════════════════════════════════════════════════════════
   27. BACKGROUND UNIFICATION — one seamless canvas, no seams
   Root cause of the reported vertical split: the hero's #shader
   placeholder and the .rd-wipe transition overlay both used a
   180/150deg gradient running through #0a0805 (a distinct, warmer
   near-black) before returning to #050505 — visible as a hard color
   band at the gradient's angle. Both are now flattened to one solid
   color at the source (components.css / redesign.css §2). These
   declarations are the belt-and-braces safety net requested on top
   of that fix — every structural layer pinned to the same value.
   ═══════════════════════════════════════════════════════════════ */
html,body{background-color:#050505;}
#main-content,section,footer,.hero,.svc2-section,.pf3-stack,.why-section,
.res-section,.proc-section,.tst-section,.faq-section,.booking-section{
  background-color:#050505;
}
/* Fixed-position overlays that could otherwise show a mismatched edge */
.mob-menu,.modal-bg,.cs-modal-bg,#tyOverlay{background-color:#050505;}

/* ═══════════════════════════════════════════════════════════════
   28. SERVICES — abstract luxury motion artwork (replaces photos)
   ═══════════════════════════════════════════════════════════════ */
.svc-art{
  position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,#121212,#070707 75%);
}
.svc-art-svg{position:absolute;inset:0;width:100%;height:100%;}
.svc-art-glow{
  position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;
  animation:svcBreathe 7s ease-in-out infinite;will-change:opacity,transform;
}
.svc-glow-a{width:55%;height:55%;top:15%;left:10%;background:radial-gradient(circle,rgba(200,168,90,.28),transparent 70%);}
.svc-glow-b{width:40%;height:40%;bottom:10%;right:12%;background:radial-gradient(circle,rgba(244,210,122,.2),transparent 70%);animation-delay:2.4s;}
@keyframes svcBreathe{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:1;transform:scale(1.12);}}

/* Light sweep — a soft diagonal highlight crossing every few seconds. */
.svc-sweep{
  position:absolute;top:-20%;left:-40%;width:60%;height:140%;
  background:linear-gradient(100deg,transparent,rgba(244,210,122,.09),transparent);
  transform:translateX(-100%) rotate(8deg);
  animation:svcSweep 7s ease-in-out infinite;
}
@keyframes svcSweep{
  0%,80%{transform:translateX(-120%) rotate(8deg);}
  95%{transform:translateX(260%) rotate(8deg);}
  100%{transform:translateX(260%) rotate(8deg);}
}

/* ── Ribbons / waves (SVG paths) — slow flowing float ── */
.svc-ribbon,.svc-wave{}
.svc-ribbon-1{animation:svcFloatX 9s ease-in-out infinite;}
.svc-ribbon-2{animation:svcFloatX 11s ease-in-out infinite reverse;}
.svc-ribbon-3{animation:svcFloatX 8s ease-in-out infinite;}
.svc-wave-1{animation:svcFloatY 8.5s ease-in-out infinite;}
.svc-wave-2{animation:svcFloatY 10s ease-in-out infinite reverse;}
.svc-wave-3{animation:svcFloatY 7.5s ease-in-out infinite;}
@keyframes svcFloatX{0%,100%{transform:translate(0,0);}50%{transform:translate(6px,-4px);}}
@keyframes svcFloatY{0%,100%{transform:translate(0,0);}50%{transform:translate(-5px,5px);}}

/* ── Glass panels (Website Design / AI Automation / Custom Dev) ── */
.svc-glass{
  position:absolute;border-radius:12px;
  background:linear-gradient(160deg,rgba(240,237,228,.05),rgba(240,237,228,.01) 70%);
  border:1px solid rgba(200,168,90,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  will-change:transform;animation:svcFloatSlow 10s ease-in-out infinite;
}
.svc-glass-1{width:34%;height:26%;top:18%;left:14%;transform:rotate(-6deg);}
.svc-glass-2{width:26%;height:20%;bottom:16%;right:16%;transform:rotate(4deg);animation-delay:1.5s;}
.svc-glass-3{width:22%;height:30%;top:12%;left:8%;transform:rotate(-4deg);}
.svc-glass-4{width:20%;height:24%;top:38%;right:14%;transform:rotate(6deg);animation-delay:1.2s;}
.svc-glass-5{width:24%;height:18%;bottom:12%;left:30%;transform:rotate(-3deg);animation-delay:2.4s;}
.svc-glass-6{width:22%;height:26%;top:22%;right:10%;transform:rotate(5deg);}
@keyframes svcFloatSlow{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-8px) rotate(var(--r,0deg));}}

/* ── Sphere + rings (Brand Identity) ── */
.svc-sphere{
  position:absolute;top:50%;left:50%;width:34%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 32%,#3a3a3a,#0e0e0e 65%,#070707);
  box-shadow:0 0 60px rgba(200,168,90,.15),inset -12px -12px 30px rgba(0,0,0,.6),inset 8px 8px 20px rgba(80,80,80,.25);
  animation:svcSphereFloat 9s ease-in-out infinite;
}
@keyframes svcSphereFloat{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-10px);}}
.svc-ring{
  position:absolute;top:50%;left:50%;border-radius:50%;
  border:1px solid rgba(200,168,90,.35);
  transform:translate(-50%,-50%);
}
.svc-ring-1{width:48%;aspect-ratio:1;animation:svcRingSpin 22s linear infinite;}
.svc-ring-2{width:64%;aspect-ratio:1;border-color:rgba(244,210,122,.22);animation:svcRingSpin 30s linear infinite reverse;}
.svc-ring-3{width:80%;aspect-ratio:1;border-color:rgba(200,168,90,.12);animation:svcRingSpin 38s linear infinite;}
@keyframes svcRingSpin{from{transform:translate(-50%,-50%) rotate(0deg);}to{transform:translate(-50%,-50%) rotate(360deg);}}

/* ── Particles (E-commerce) ── */
.svc-particles{position:absolute;inset:0;}
.svc-particles span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#F4D27A;box-shadow:0 0 6px rgba(244,210,122,.7);
  animation:svcParticleFloat linear infinite;
}
.svc-particles span:nth-child(1){top:70%;left:12%;animation-duration:9s;}
.svc-particles span:nth-child(2){top:40%;left:28%;animation-duration:11s;animation-delay:1s;width:2px;height:2px;}
.svc-particles span:nth-child(3){top:80%;left:48%;animation-duration:8s;animation-delay:2s;}
.svc-particles span:nth-child(4){top:30%;left:62%;animation-duration:12s;animation-delay:.5s;width:2px;height:2px;}
.svc-particles span:nth-child(5){top:60%;left:78%;animation-duration:10s;animation-delay:1.5s;}
.svc-particles span:nth-child(6){top:20%;left:88%;animation-duration:9.5s;animation-delay:2.5s;width:2px;height:2px;}
@keyframes svcParticleFloat{
  0%{transform:translate(0,0);opacity:.2;}
  50%{opacity:.9;}
  100%{transform:translate(14px,-26px);opacity:.2;}
}

/* ── Neural lines + nodes (AI Automation) ── */
.svc-neural{stroke-dasharray:4 3;animation:svcPulseLine 3.2s linear infinite;}
.svc-neural-2{animation-delay:.6s;}
.svc-neural-3{animation-delay:1.1s;}
.svc-neural-4{animation-delay:1.7s;}
@keyframes svcPulseLine{to{stroke-dashoffset:-14;}}
.svc-node{animation:svcNodePulse 3s ease-in-out infinite;}
@keyframes svcNodePulse{0%,100%{opacity:.7;r:3;}50%{opacity:1;}}

/* Grid fragments (Custom Development) — quiet breathing presence */
.svc-grid{animation:svcBreathe 8s ease-in-out infinite;}

/* Mouse parallax — layers drift opposite the cursor on hover, subtle. */
.svc-art-glow,.svc-glass,.svc-sphere,.svc-ring{}

@media (prefers-reduced-motion: reduce){
  .svc-art *{animation:none!important;}
}

/* ═══════════════════════════════════════════════════════════════
   29. FOOTER CONTACT CARDS — desktop-only refinement (≥1024px)
   Text/icon scaled down ~12%, both cards forced to equal width,
   horizontal padding increased slightly. Mobile/tablet untouched —
   nothing here applies below 1024px.
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
  .footer-contact-min.ft-contact .ft-card.ft-line{
    width:328px;height:64px; /* fixed — guarantees both cards match exactly, single line */
    padding:0 2.1rem; /* was 1.8rem — slightly more horizontal breathing room */
    box-sizing:border-box;
    font-size:clamp(1.05rem,2.05vw,1.45rem); /* ~12% down from clamp(1.15rem,2.4vw,1.7rem) */
  }
  .footer-contact-min.ft-contact .ft-card.ft-line .ft-ic{
    width:19px;height:19px; /* proportional to the ~12% text reduction (22px → 19px) */
    flex-shrink:0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   30. FOOTER — mobile-only refinements (max-width:768px)
   Scoped to (481px–768px) for the headline so the existing ≤480px/
   ≤375px legibility boost on "Exceptional" (documented above, in
   responsive.css) is never touched — those stay exactly as they are.
   Contact font-size applies across the full ≤768px range since no
   prior override exists there to conflict with.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px) and (min-width:481px){
  /* "Exceptional" ~7% smaller than the heading's own size — a relative
     em, so it stays proportional at any width in this band rather than
     a fixed px value. Must target the same ".footer-cta em" selector as
     the base rule (components.css) — that rule uses an element selector
     or matches nothing regardless of media query. */
  .footer-cta em{font-size:.93em;}
  /* More breathing room between "LET'S BUILD" and "SOMETHING". */
  .footer-cta [data-i18n="footer.h1"]{display:inline-block;margin-bottom:.12em;}
}
@media(max-width:768px){
  .footer-contact-min a.ft-line{font-size:16px;} /* was clamp(...,1.15rem) ≈18.4px on phones — 2.4px down */
}

/* ═══════════════════════════════════════════════════════════════
   31. FINAL CINEMATIC CTA — replaces booking form + old footer
   ═══════════════════════════════════════════════════════════════ */
.final-cta{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(4rem,8vw,6rem) max(4vw,1.5rem) 0;
  background:#050505;
  text-align:center;
}
.fc-noise{
  position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fc-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 75% 65% at 50% 40%,transparent 40%,rgba(0,0,0,.6) 100%);
}
.fc-glow{
  position:absolute;top:50%;left:50%;width:min(1100px,140vw);height:700px;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(212,175,55,.16),transparent 68%);
  filter:blur(10px);will-change:transform;
  animation:fcBreathe 8s ease-in-out infinite;
}
@keyframes fcBreathe{0%,100%{opacity:.75;}50%{opacity:1;}}
.fc-particles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.fc-particles span{position:absolute;border-radius:50%;pointer-events:none;}

.fc-inner{position:relative;z-index:2;max-width:900px;display:flex;flex-direction:column;align-items:center;}

.fc-badge{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold3);margin-bottom:1.6rem;
  padding:.5rem 1.2rem;border:1px solid rgba(212,175,55,.3);border-radius:100px;
  background:rgba(212,175,55,.06);
}
.fc-headline{margin:0;line-height:1.05;}
.fc-headline .fc-line{
  display:block;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:900;
  letter-spacing:-.04em;text-transform:uppercase;color:var(--ink);
  font-size:clamp(2.6rem,7vw,7.2rem); /* ~42px mobile floor → ~115px desktop ceiling, within 80-120px spec at wide viewports */
}
.fc-headline .fc-grad{
  display:block;font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-style:italic;font-weight:500;
  font-size:clamp(2.8rem,7.6vw,7.5rem);
  background:linear-gradient(100deg,#b8860b 0%,#d4af37 30%,#f5e18f 50%,#d4af37 70%,#b8860b 100%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#D4AF37;
  filter:drop-shadow(0 0 30px rgba(212,175,55,.35));
  animation:ftShimmer 7s ease-in-out infinite;
  margin-top:.05em;
}
.fc-desc{
  margin:1.6rem auto 0;max-width:650px;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:300;
  font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.7;color:var(--ink2);
}

/* ── Stat cards ── */
.fc-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
  margin:2.75rem auto 0;width:100%;max-width:760px;
}
.fc-stat{
  position:relative;padding:1.5rem 1rem;border-radius:18px;
  background:linear-gradient(160deg,rgba(240,237,228,.05),rgba(240,237,228,.015) 60%),rgba(8,7,5,.55);
  border:1px solid rgba(212,175,55,.22);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;flex-direction:column;gap:.4rem;
  transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .4s;
}
.fc-stat:hover{
  transform:translateY(-6px);
  border-color:rgba(212,175,55,.45);
  box-shadow:0 20px 46px rgba(0,0,0,.4),0 0 34px rgba(212,175,55,.14);
}
.fc-stat-num{
  font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-weight:500;font-size:clamp(1.8rem,3vw,2.4rem);
  color:var(--gold3);font-feature-settings:"tnum" 1;line-height:1;
}
.fc-stat-lbl{
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);
}

/* ── CTA ── */
.fc-cta{
  position:relative;overflow:hidden;margin-top:2.75rem;
  display:inline-flex;align-items:center;gap:.9rem;
  padding:1.2rem 2.8rem;border-radius:100px;
  background:linear-gradient(135deg,#b8860b,#d4af37 45%,#f0d986 100%);
  color:#050505;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-weight:700;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  border:none;cursor:var(--cursor-mode,pointer);
  box-shadow:0 14px 40px rgba(212,175,55,.32),0 0 0 1px rgba(212,175,55,.3),inset 0 1px 1px rgba(255,255,255,.4);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
}
.fc-cta:hover{box-shadow:0 20px 50px rgba(212,175,55,.4),0 0 0 1px rgba(212,175,55,.4);}
.fc-cta:active{transform:scale(.96);}
.fc-cta-arw{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.fc-cta:hover .fc-cta-arw{transform:translate(5px,-5px);}

/* ── Contact pills ── */
.fc-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2.4rem;}
.fc-pill{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.7rem;
  padding:.85rem 1.6rem;border-radius:100px;
  background:rgba(240,237,228,.04);border:1px solid rgba(212,175,55,.2);
  color:var(--ink);font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:300;font-size:.95rem;
  transition:border-color .35s,color .35s,transform .35s cubic-bezier(.22,1,.36,1);
}
.fc-pill:hover{border-color:rgba(212,175,55,.45);color:var(--gold3);transform:translateY(-2px);}
.fc-pill .ft-ic{width:17px;height:17px;color:var(--gold3);flex-shrink:0;}
.fc-pill .ft-ic svg{width:100%;height:100%;}

/* ── Social buttons ── */
.fc-social{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px;margin-top:1.8rem;}
.fc-social a{
  display:inline-flex;align-items:center;justify-content:center;
  color:#D4AF37;opacity:.75;line-height:0;
  transition:opacity 250ms ease,transform 250ms ease,filter 250ms ease;
}
.fc-social a svg{width:22px;height:22px;display:block;}
.fc-social a:hover,.fc-social a:focus-visible{
  opacity:1;transform:scale(1.08);
  filter:drop-shadow(0 0 8px rgba(212,175,55,.55));
}

/* ── Bottom bar ── */
.fc-bottom{
  position:relative;z-index:2;width:100%;max-width:1300px;margin-top:clamp(3rem,7vw,5rem);
  padding:1.8rem max(4vw,1.5rem) 2.2rem;
  border-top:1px solid rgba(212,175,55,.16);
}
.fc-bottom-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--ink2);
}
.fc-legal{display:flex;gap:.5rem;align-items:center;}
.fc-legal a{color:var(--ink2);transition:color .3s;}
.fc-legal a:hover{color:var(--gold3);}
.fc-signature{
  margin:1rem 0 0;text-align:center;
  font-family:'Bodoni Moda','Bodoni Moda Fallback',serif;font-style:italic;font-size:11px;color:rgba(240,237,228,.35);
}

/* ═══ TABLET (769px–1279px) ═══ */
@media(max-width:1279.98px) and (min-width:769px){
  .fc-headline .fc-line{font-size:clamp(2.6rem,7.5vw,4.4rem);}
  .fc-headline .fc-grad{font-size:clamp(2.8rem,8vw,4.7rem);}
  .fc-stats{grid-template-columns:repeat(2,1fr);max-width:520px;}
  .fc-stat:last-child{grid-column:1/-1;max-width:250px;margin:0 auto;}
  .fc-contact,.fc-cta,.fc-social{width:auto;}
}

/* ═══ MOBILE (≤768px) — dedicated layout, not a scaled desktop ═══ */
@media(max-width:768px){
  .final-cta{
    min-height:auto;padding:clamp(4rem,12vw,5rem) 1.25rem 0;
  }
  .fc-badge{font-size:9px;margin-bottom:1.3rem;}
  .fc-headline .fc-line{font-size:48px;letter-spacing:-.03em;}
  .fc-headline .fc-grad{font-size:52px;margin-top:.08em;}
  .fc-desc{font-size:18px;max-width:90%;margin-top:1.3rem;}
  .fc-stats{
    grid-template-columns:1fr;max-width:340px;gap:1rem;margin-top:2.2rem;
  }
  .fc-stat{padding:1.4rem 1.2rem;}
  .fc-cta{
    width:100%;max-width:340px;height:58px;min-height:58px;padding:0 2rem;box-sizing:border-box;
    border-radius:100px;margin-top:2.2rem;justify-content:center;
  }
  .fc-contact{flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-top:2rem;}
  .fc-pill{width:100%;justify-content:center;}
  .fc-bottom{margin-top:3rem;padding-bottom:2.5rem;}
  .fc-bottom-row{flex-direction:column;gap:.6rem;text-align:center;}
  .fc-signature{
    font-size:10.5px;
  }
  .fc-sig-2{display:block;margin-top:.2em;} /* two lines on mobile, per spec — one line on tablet/desktop */
}

@media (prefers-reduced-motion: reduce){
  .fc-glow{animation:none!important;}
}

/* ═══════════════════════════════════════════════════════════════
   32. SERVICES — real client-preview images (replaces abstract art)
   16:9, cover, rounded, hover scale + gold glow, idle float.
   ═══════════════════════════════════════════════════════════════ */
.svc2-img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  border-radius:18px;
}

/* Soft gold glow around the image on hover — layered behind/around it. */
.svc2-media{box-shadow:0 0 0 1px rgba(212,175,55,.12);transition:box-shadow .5s;}
.svc2-card:hover .svc2-media{box-shadow:0 0 0 1px rgba(212,175,55,.35),0 0 46px rgba(212,175,55,.22);}

@media(max-width:768px){
  .svc2-media{border-radius:14px;}
  .svc2-img{border-radius:14px;}
}

/* ═══════════════════════════════════════════════════════════════
   33. LATEST NEWS — glass cards, premium hover, responsive grid
   ═══════════════════════════════════════════════════════════════ */
.news-section{position:relative;padding:clamp(5rem,10vw,7rem) 0;}
.news-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  max-width:1300px;margin:clamp(3rem,6vw,4rem) auto 0;padding:0 max(4vw,1.5rem);
}
.news-card{
  border-radius:24px;overflow:hidden;
  background:linear-gradient(160deg,rgba(240,237,228,.05),rgba(240,237,228,.015) 60%),rgba(8,7,5,.55);
  border:1px solid rgba(212,175,55,.16);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 20px 46px rgba(0,0,0,.35);
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s,box-shadow .5s;
}
.news-card:hover{
  transform:translateY(-8px);
  border-color:rgba(212,175,55,.4);
  box-shadow:0 30px 64px rgba(0,0,0,.45),0 0 46px rgba(212,175,55,.16);
}
.news-card-link{display:block;color:inherit;text-decoration:none;}

.news-card-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#050505;}
.news-card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.news-card:hover .news-card-media img{transform:scale(1.09);}
.news-badge{
  position:absolute;top:1.1rem;left:1.1rem;z-index:2;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:.4rem .85rem;border-radius:100px;background:rgba(5,5,5,.65);
  border:1px solid rgba(212,175,55,.35);color:var(--gold3);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}

.news-card-body{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.7rem;}
.news-meta{
  display:flex;align-items:center;gap:.5rem;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink2);
}
.news-meta-dot{opacity:.5;}
.news-card-title{
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
  line-height:1.35;margin:0;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.news-card-excerpt{
  font-size:.9rem;line-height:1.65;color:var(--ink2);font-weight:300;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.news-read-more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold3);
}
.news-arrow{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.news-card:hover .news-arrow{transform:translate(4px,-4px);}

.news-viewall-wrap{text-align:center;margin-top:clamp(2.5rem,5vw,3.5rem);}
.news-viewall{
  display:inline-flex;align-items:center;gap:.7rem;padding:1rem 2.4rem;border-radius:100px;
  border:1px solid rgba(212,175,55,.35);color:var(--gold3);text-decoration:none;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .35s,color .35s,transform .35s cubic-bezier(.22,1,.36,1);
}
.news-viewall:hover{background:var(--gold);color:#050505;transform:translateY(-2px);}

@media(max-width:1023.98px){
  .news-grid{grid-template-columns:1fr 1fr;}
  .news-grid .news-card:last-child{grid-column:1/-1;max-width:400px;margin:0 auto;}
}
@media(max-width:768px){
  .news-grid{grid-template-columns:1fr;gap:1.5rem;}
  .news-grid .news-card:last-child{max-width:none;}
  .news-card-body{padding:1.4rem;}
}
@media (prefers-reduced-motion: reduce){
  .news-card,.news-card-media img,.news-arrow{transition:none!important;}
  .news-card:hover{transform:none;}
}

/* ═══════════════════════════════════════════════════════════════
   34. HERO — ambient visual composition (fills the wide-viewport
   space flanking the centered text, adds depth without restructuring
   the layout — the hero-content stays exactly where it is).
   ═══════════════════════════════════════════════════════════════ */
.hero-visual-composition{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}

.hvc-panel{
  position:absolute;border-radius:16px;
  background:linear-gradient(160deg,rgba(240,237,228,.05),rgba(240,237,228,.012) 70%);
  border:1px solid rgba(212,175,55,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
/* The three panels used to drift 16px up and back on an infinite
   hvcFloat loop (9s, 11s, 10s, staggered). Behind the headline that
   read as the background never settling, so the loop is gone and each
   panel rests at the position it was designed at. Size, placement,
   rotation, gradient, border and backdrop-blur are untouched — the
   composition is identical, it just holds still. The keyframes and the
   --r custom properties that fed them went with it; nothing else used
   either. */
.hvc-panel-1{width:14vw;max-width:220px;aspect-ratio:1/1.25;top:12%;right:6%;transform:rotate(-8deg);}
.hvc-panel-2{width:9vw;max-width:150px;aspect-ratio:1;bottom:16%;right:14%;transform:rotate(10deg);}
.hvc-panel-3{width:8vw;max-width:130px;aspect-ratio:1/1.3;top:36%;left:5%;transform:rotate(6deg);}

.hvc-ray{
  position:absolute;width:1px;height:60%;top:10%;
  background:linear-gradient(180deg,transparent,rgba(212,175,55,.22),transparent);
  filter:blur(1px);
}
.hvc-ray-1{right:22%;transform:rotate(12deg);}
.hvc-ray-2{right:9%;transform:rotate(-6deg);}

.hvc-particles span{
  position:absolute;border-radius:50%;background:rgba(240,217,134,.5);
  box-shadow:0 0 8px rgba(212,175,55,.45);
}

@media(max-width:1023.98px){
  .hero-visual-composition{opacity:.5;}
  .hvc-panel-3{display:none;}
}
@media(max-width:768px){
  .hero-visual-composition{display:none;} /* keeps mobile hero exactly as it was — no ambient risk on small screens */
}
@media (prefers-reduced-motion: reduce){
  .hvc-panel{animation:none!important;}
}

/* ═══════════════════════════════════════════════════════════════
   35. NEWS SECTION — editorial refinement
   Everything below is scoped to .news-section only — .pricing-head,
   .s-title, .s-num, .s-sub are shared with Services/Portfolio/other
   sections and must never be touched globally.
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout: real horizontal padding, aligned to the site's grid ── */
.news-section{
  padding-left:clamp(1.5rem,8vw,140px);
  padding-right:clamp(1.5rem,8vw,140px);
}
.news-section .pricing-head{margin-bottom:0;} /* vertical rhythm now owned by the rule below */
.news-section .news-grid,
.news-section .news-viewall-wrap{
  padding-left:0;padding-right:0; /* the section itself now provides the edge padding */
}

/* ── Label: divider, tighter tracking, lower opacity for restraint ── */
.news-section .s-num{
  display:inline-flex;align-items:center;gap:.9rem;
  letter-spacing:.28em;opacity:.72;
}
.news-section .s-num::after{
  content:'';width:46px;height:1px;
  background:linear-gradient(90deg,var(--gold3),transparent);
}

/* ── Heading: generous line-gap, no clipping, soft gold glow behind it ── */
.news-section .pricing-head{position:relative;padding-top:clamp(3.5rem,7vw,5rem);}
.news-section .s-title{
  overflow:visible;line-height:1.08; /* was effectively 0.9 via the shared rule — too tight for two lines here */
  position:relative;text-align:left;
}
.news-section .s-title em{display:block;margin-top:.12em;}
.news-section .pricing-head::before{
  content:'';position:absolute;top:20%;left:-4%;width:60%;height:70%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(212,175,55,.1),transparent 70%);
  filter:blur(30px);pointer-events:none;
}

/* ── Description: readable editorial paragraph ── */
.news-section .s-sub{
  font-size:18px;line-height:1.8;max-width:650px;
  margin-top:1.4rem;
}

/* ── Cards: more breathing room after the heading block ── */
.news-section .news-grid{margin-top:clamp(4rem,8vw,5.5rem);}

/* ── Background: subtle gradient + cinematic low-opacity glow + particles ── */
.news-section{overflow:hidden;}
.news-section::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%,rgba(212,175,55,.05),transparent 65%),
    radial-gradient(ellipse 50% 40% at 90% 85%,rgba(240,217,134,.04),transparent 65%),
    linear-gradient(180deg,rgba(255,255,255,0),rgba(212,175,55,.015) 50%,rgba(255,255,255,0));
}
.news-section .pricing-head,.news-section .news-grid,.news-section .news-viewall-wrap{position:relative;z-index:1;}
.news-bg-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.news-bg-particles span{
  position:absolute;border-radius:50%;background:rgba(240,217,134,.4);
  box-shadow:0 0 7px rgba(212,175,55,.4);
}

@media(max-width:1023.98px){
  .news-section .pricing-head::before{display:none;}
}
@media(max-width:768px){
  .news-section .s-title,.news-section .s-num{text-align:center;}
}
@media (prefers-reduced-motion: reduce){
  .news-section .pricing-head::before{display:none;}
}

/* ═══════════════════════════════════════════════════════════════
   36. NAVIGATION — Awwwards-tier redesign
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
  .nav-right{gap:2.6rem;}
  .nav-links{gap:2.6rem;}
  .nav-links a{letter-spacing:.24em;}
}

/* ── Globe language dropdown ── */
.lang-dropdown{position:relative;}
.lang-dropdown-trigger{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink2);padding:.5rem .7rem;height:38px;border-radius:100px;
  background:transparent;border:1px solid rgba(212,175,55,.2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:color .3s,border-color .3s,background .3s;
}
.lang-dropdown-trigger:hover,.lang-dropdown.open .lang-dropdown-trigger{color:var(--gold3);border-color:rgba(212,175,55,.4);background:rgba(212,175,55,.05);}
.lang-dropdown-trigger svg{flex-shrink:0;transition:transform .4s cubic-bezier(.22,1,.36,1);}
.lang-dropdown.open .lang-dropdown-trigger svg{transform:rotate(180deg);}

@media(max-width:767.98px){
  .lang-dropdown-trigger{
    height:42px;max-height:42px;width:fit-content;
    padding:0 11px;border-radius:12px;
    background:transparent;border:1px solid rgba(212,175,55,.2);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
    font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:13px;font-weight:500;letter-spacing:.02em;text-transform:none;
    gap:.4rem;
    transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
  }
  .lang-dropdown-trigger svg{width:16px;height:16px;}
  .lang-dropdown-trigger:hover,.lang-dropdown-trigger:active,.lang-dropdown.open .lang-dropdown-trigger{
    border-color:rgba(212,175,55,.45);
    box-shadow:0 0 0 1px rgba(212,175,55,.15),0 4px 16px rgba(212,175,55,.18);
  }
}

.lang-dropdown-menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
  width:180px;max-width:180px;
  background:rgba(10,10,10,.7);border:1px solid rgba(212,175,55,.18);border-radius:14px;
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 24px 50px rgba(0,0,0,.5);
  padding:6px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
}
.lang-dropdown.open .lang-dropdown-menu{visibility:visible;pointer-events:auto;}
.lang-option{
  display:flex;align-items:center;gap:.5rem;width:100%;height:36px;padding:0 .55rem;
  border-radius:8px;text-align:left;background:transparent;
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-size:.82rem;font-weight:500;color:var(--ink);
  transition:background .2s ease,color .2s ease;
}
.lang-globe{flex-shrink:0;opacity:.7;transition:opacity .2s ease;}
.lang-code{
  flex-shrink:0;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;letter-spacing:.06em;
  color:var(--ink2);width:20px;
}
.lang-name{flex:1;}
.lang-check{
  flex-shrink:0;color:var(--gold3);opacity:0;transform:scale(.6);
  transition:opacity .2s ease,transform .2s ease;
}
.lang-option.active .lang-check{opacity:1;transform:scale(1);}
.lang-option:hover{background:rgba(212,175,55,.08);color:var(--gold3);}
.lang-option:hover .lang-globe{opacity:1;}
.lang-option:hover .lang-code{color:var(--gold3);}
.lang-option.active{color:var(--gold3);}
.lang-option.active .lang-code{color:var(--gold3);}
.lang-option-soon{cursor:default;}
.lang-option-soon .lang-name{color:var(--ink2);}
.lang-option-soon:hover{background:rgba(212,175,55,.04);}
.lang-option-soon:hover .lang-name{color:var(--ink2);}
.lang-soon-badge{
  flex-shrink:0;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:7.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink2);border:1px solid rgba(240,237,228,.12);border-radius:100px;padding:.2rem .4rem;
}

/* ── CTA: glass pill, animated gradient border, hover glow ── */
.nav-cta{
  position:relative;overflow:visible;padding:.7rem 1.5rem;border-radius:100px;
  background:rgba(240,237,228,.03);border:1px solid transparent;
  color:var(--gold3)!important;font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.6rem;
  min-height:40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
}
.nav-cta::before{
  content:'';position:absolute;inset:0;border-radius:100px;padding:1px;z-index:-1;
  background:linear-gradient(120deg,rgba(212,175,55,.15),rgba(240,217,134,.7),rgba(212,175,55,.15));
  background-size:220% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:navCtaBorder 5s linear infinite;
}
@keyframes navCtaBorder{to{background-position:220% 0;}}
.nav-cta:hover{
  box-shadow:0 10px 30px rgba(212,175,55,.22);
}
.nav-cta-arw{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1);}
.nav-cta:hover .nav-cta-arw{transform:translate(3px,-3px);}

@media (prefers-reduced-motion: reduce){
  .nav-cta::before{animation:none!important;}
  .lang-dropdown-trigger svg,.lang-dropdown-menu,.nav-cta{transition:none!important;}
}

/* ── 30. SKIP THE WORK NOBODY IS LOOKING AT ────────────────────
   The homepage is one long document, and the browser was doing style,
   layout, paint and layer work for the whole of it before showing the
   first screen — measured at 990 ms of style recalculation and 440 ms
   of layout on a throttled phone, all of it for sections several
   screens down.

   content-visibility:auto lets the browser skip that work until a
   section comes near the viewport. contain-intrinsic-size is not
   optional here: without a size estimate the scrollbar would jump as
   each section is rendered for the first time. The `auto` keyword makes
   the browser remember the real height once it has measured it, so the
   estimate only ever applies to a section that has never been seen.

   Applied to the last sections only. The ones nearer the top are inside
   ScrollTrigger's measurements from the moment the page loads, and
   deferring their layout would move the pins it computes. */
.news-section,
.final-cta,
footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* Printing and reduced-motion aside, one case must never be deferred:
   an in-page jump to a section inside one of these. Browsers force the
   layout for fragment navigation, but being explicit costs nothing and
   documents the intent. */
:target{content-visibility:visible;}

/* ── 31. THE TOP BAR HAS TO FIT THE PHONE ──────────────────────
   Measured at 390px before this: logo 44 + language pill 64 + call to
   action 232 + burger 44, plus 32px of padding, into 390px of viewport.
   The burger landed at x=388→432 — past the right edge, at 320, 360 and
   390 alike. Every navigation link on this site lives in the fullscreen
   menu, and there was no way to open it.

   responsive.css already tried to hide the call to action below 480px.
   It could not: this file loads after it and sets .nav-cta's padding,
   font-size and display unconditionally, at equal specificity, so every
   one of those overrides lost. The nav's mobile behaviour therefore has
   to be declared here, in the layer that owns the nav's appearance.

   What changes, and why each is safe to move rather than lose:
     · the language pill goes — the fullscreen menu has .lang-switch-mob;
     · the call to action shrinks, and disappears under 360px — the menu
       leads with .mob-cta, at full size;
     · the burger never shrinks. It is the only route to everything else. */
@media(max-width:768px){
  .lang-dropdown{display:none;}
  .nav-cta{
    padding:.5rem .8rem;font-size:8.5px;letter-spacing:.1em;
    white-space:nowrap;flex:0 1 auto;min-width:0;gap:.4rem;
  }
  .nav-burger{flex:0 0 auto;}
}
@media(max-width:359px){
  .nav-cta{display:none;}
}

/* ═══════════════════════════════════════════════════════════════
   31. IDLE COST — animation and compositing budget
   ═══════════════════════════════════════════════════════════════

   A trace of the homepage doing nothing (5 s, no input, 4x CPU
   throttle, scripts/profile.mjs) recorded 598 frames and ~1.25 s of
   style recalculation, paint and compositing. Eighteen CSS animations
   were running; fourteen of them on something the visitor cannot see.

   Nothing here changes how the site looks. Every animation below still
   plays, with the same easing and the same duration. They stop running
   when there is nobody to watch them, and the three that were driving
   layout or paint now drive the compositor instead.

   Rules are grouped by why they exist, because the "why" is the part
   that will not survive in a diff. */


/* ── 31.1 Closed overlays ──────────────────────────────────────────
   The four full-screen surfaces — quote modal, case-study modal,
   thank-you panel, mobile menu — hide with opacity/visibility rather
   than display:none, so their transitions can animate. A
   visibility:hidden element still owns a compositing layer, and
   backdrop-filter on that layer still costs layerization and commit
   work on every frame. At 390x844 the four of them add up to roughly
   1.3 million px2 of backdrop blur, about four viewports' worth,
   maintained permanently for surfaces nobody has opened.

   Moving the filter to the open state costs nothing visually: each
   panel sits behind a background that is 80-97% opaque, and the blur
   is only ever perceived once the panel has faded in. */
.modal-bg:not(.open) .modal-blur,
.cs-modal-bg:not(.open) .cs-modal-blur,
.ty-overlay:not(.show){
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Animations inside a closed overlay are pure waste — most visitors
   never open one. .ty-success-ring is the clearest case: it pulsed
   forever inside a panel that only appears after a form submission. */
.modal-bg:not(.open) *,
.modal-bg:not(.open) *::before,
.modal-bg:not(.open) *::after,
.cs-modal-bg:not(.open) *,
.cs-modal-bg:not(.open) *::before,
.cs-modal-bg:not(.open) *::after,
.ty-overlay:not(.show) *,
.ty-overlay:not(.show) *::before,
.ty-overlay:not(.show) *::after{
  animation-play-state:paused;
}


/* ── 31.2 Animate the compositor, not the layout ───────────────────
   Three infinite keyframes drove properties that force work on the
   main thread every frame. Same motion, same timing, composited. */

/* The .mob-cta shine that used to be compensated for here is gone — see
   section 22. The button no longer sweeps a highlight across itself, so
   there is no keyframe left to composite and nothing to pause while the
   menu is closed. */

/* .ty-success-ring pulsed an expanding box-shadow, which repaints a
   growing area each frame. A scaled, fading ring drawn on ::after is
   the same halo with none of the paint. */
@keyframes iconPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.4;}
  50%{transform:translate(-50%,-50%) scale(1.46);opacity:0;}
}
.ty-success-ring{
  animation:successPop .6s cubic-bezier(.34,1.56,.64,1) forwards;
}
.ty-success-ring::after{
  content:'';position:absolute;top:50%;left:50%;
  width:100%;height:100%;border-radius:50%;
  background:rgba(212,175,55,.4);
  pointer-events:none;z-index:-1;
  animation:iconPulse 2.5s ease 1s infinite;
}

/* .nav-cta's border sweep animates background-position, which repaints
   the ring on every frame and cannot be composited: the gradient is
   drawn through a mask-composite ring, so there is no transform-based
   rewrite that keeps the same border. Measured on its own it was the
   single most expensive thing on the settled page — 393 ms of paint and
   155 ms of raster per five idle seconds, for a 130x40 button, on every
   page, forever.

   So it keeps its shimmer but stops repeating it. Three loops greet the
   visitor on arrival, then it rests; hovering or focusing the button
   plays it again, which is where a shimmer earns its keep anyway. No
   `forwards`, so it settles back to the gradient it started on — the
   resting state is the same pixels as frame zero. */
.nav-cta::before{
  animation:navCtaBorder 5s linear 3;
}
.nav-cta:hover::before,
.nav-cta:focus-visible::before{
  animation:navCtaBorder 5s linear infinite;
}

/* The scroll cue exists to tell a first-time visitor there is more
   below. Once they have scrolled, it has said what it had to say — and
   it was the last thing keeping the compositor awake at 60 fps on a
   page nobody was touching. js/redesign.js sets .rd-scrolled on the
   first scroll; the mark is one-way, so the cue never restarts. */
html.rd-scrolled .scroll-ind::before{
  animation-play-state:paused;
}

/* ── 31.3 Motion only where it can be seen ─────────────────────────
   The floating particles, the card drift and the technology marquee
   all sit well below the fold — at 390 px the nearest particle starts
   3 110 px down, more than three viewports away. They animated from
   first paint regardless, competing with the load for the main thread
   at exactly the moment it is most contended.

   js/redesign.js observes their sections and adds .anim-live when one
   approaches the viewport. Paused is the default so that the cost is
   never paid before the markup is on screen; a visitor who never
   scrolls that far never pays it at all. Once live it stays live, so
   scrolling back up does not restart anything mid-cycle. */
.port-particle,
.pf3-card,
.mq-track{
  animation-play-state:paused;
}
.anim-live .port-particle,
.anim-live .pf3-card,
.anim-live .mq-track{
  animation-play-state:running;
}

/* No script, no observer, no pause: a browser with JavaScript off must
   still see the design move. html.rd-js is set by the inline bootstrap
   in <head>, so this only applies when scripting is genuinely absent. */
html:not(.rd-js) .port-particle,
html:not(.rd-js) .pf3-card,
html:not(.rd-js) .mq-track{
  animation-play-state:running;
}

@media(prefers-reduced-motion:reduce){
  .ty-success-ring::after{animation:none;opacity:0;}
  .pf3-card,.mq-track{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════
   33. PREMIUM HERO ART
   ═══════════════════════════════════════════════════════════════

   The slot for the commissioned hero visual. The markup is inserted by
   scripts/lib/homepage.mjs only once the artwork is in the image
   manifest, so these rules are inert until then — see insertHeroArt().

   The art sits behind everything the hero already has: the shader
   canvas, the spotlight, the panel composition and the typography. It
   deepens the frame rather than replacing any of it, which is why the
   existing composition is left in place rather than swapped out.

   It must never be what the visitor is waiting for. The headline is
   server-rendered and styled by the inlined critical CSS, so it paints
   on the first frame; this arrives afterwards and fades up. Nothing
   here reserves space or moves anything: the element is absolutely
   positioned and out of flow, so it cannot shift the layout whenever it
   lands, and its intrinsic width/height are set from the file so the
   decode is never a guess. */
.hero-art{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.hero-art-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  /* Held back from the typography: the hero's copy has to stay the
     brightest thing on the screen, and the existing gold accents have to
     stay readable over it. */
  opacity:.34;
  filter:saturate(.85) contrast(1.05);
  mix-blend-mode:screen;
}

/* NO FADE-IN, AND THAT IS THE MEASURED CHOICE.
   The obvious thing is to start the art at opacity 0 and fade it up
   once it decodes. It was built that way first, and it cost 208 ms of
   LCP: Chrome does not treat an opacity-0 element as a paint candidate,
   so the art only became one when the class flipped — after the
   deferred scripts had run. Measured at 390 px, 4x CPU, median of 5:

       hero art removed (reference)   828 ms   LCP = p.hero-sub
       art with the JS fade-in       1084 ms   LCP = the image
       art painting on decode         876 ms   LCP = the image
       art, no fade, preloaded        920 ms   LCP = the image

   Painting on decode costs 48 ms against a page with no art at all,
   with the ranges overlapping — and it removes the JavaScript that the
   fade needed. The file is 11 KB of mostly-black gradient at 34%
   opacity, so there is nothing to see popping in.

   Preloading it is worse, not better, which is the answer to the
   obvious follow-up: the preload competes with the stylesheet for the
   same early bandwidth, and the art is not what the visitor is waiting
   for. Do not add one back without re-measuring. */

/* On a phone the art competes with the copy for a much smaller screen,
   and the panel composition is already hidden there. Lighter, and
   framed on the upper third where the headline is not. */
@media(max-width:767.98px){
  .hero-art-img{
    opacity:.22;
    object-position:center 30%;
  }
  html.rd-js .hero-art-img.is-loaded{opacity:.22;}
}

/* ═══════════════════════════════════════════════════════════════
   34. FOOTER — the premium pass
   ═══════════════════════════════════════════════════════════════

   The navigation grid, headings and links live in globals.css, shared
   with the content pages. What follows is the homepage footer's own
   furniture: the two contact pills, the social row, and the rhythm
   between them and the sitemap below.

   The restraint here is deliberate. Every element is a hairline, a
   letter-spaced label, or a colour shift — no cards, no fills, no
   shadows doing the work that spacing should do. */

/* ── The two contact pills ───────────────────────────────────────
   These are the footer's only real call to action, so they get the
   size and the air. Taller than before (56 px against 46), wider
   padding, and a border that reads as drawn rather than applied.

   The hover is three small things at once — the border warms, a whisper
   of gold appears behind, the label turns gold — and none of them is
   loud on its own. A single dramatic change would look like a button;
   three quiet ones look considered. */
.fc-contact{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:clamp(2.5rem,4vw,3.25rem);
}
.fc-pill{
  position:relative;
  display:inline-flex;align-items:center;gap:.8rem;
  min-height:56px;
  padding:0 1.9rem;
  border-radius:100px;
  background:rgba(240,237,228,.025);
  border:1px solid rgba(212,175,55,.24);
  color:var(--ink);
  font-family:'Inter Tight','Inter Tight Fallback',sans-serif;
  font-weight:400;
  font-size:.9375rem;
  letter-spacing:.005em;
  white-space:nowrap;
  transition:border-color .42s cubic-bezier(.2,.8,.2,1),
             background-color .42s cubic-bezier(.2,.8,.2,1),
             color .42s cubic-bezier(.2,.8,.2,1),
             transform .42s cubic-bezier(.2,.8,.2,1);
}
.fc-pill:hover,
.fc-pill:focus-visible{
  border-color:rgba(212,175,55,.52);
  background:rgba(212,175,55,.055);
  color:var(--gold3);
  transform:translateY(-2px);
}
.fc-pill .ft-ic{
  width:16px;height:16px;flex-shrink:0;
  color:var(--gold3);
  opacity:.82;
  transition:opacity .42s;
}
.fc-pill:hover .ft-ic{opacity:1;}
.fc-pill .ft-ic svg{width:100%;height:100%;}

/* ── Social row ──────────────────────────────────────────────────
   Smaller and dimmer than the pills, because it is secondary to them.
   The old rule scaled the icon and threw a glow behind it on hover;
   opacity alone is enough at this size and does not compete with the
   pills for attention. */
.fc-social{
  display:flex;flex-wrap:wrap;
  justify-content:center;align-items:center;
  gap:26px;
  margin-top:clamp(1.75rem,3vw,2.25rem);
}
.fc-social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;           /* a real touch target around a 20px mark */
  color:var(--gold3);
  opacity:.62;
  line-height:0;
  transition:opacity .38s cubic-bezier(.2,.8,.2,1),
             transform .38s cubic-bezier(.2,.8,.2,1);
}
.fc-social a svg{width:20px;height:20px;display:block;}
.fc-social a:hover,
.fc-social a:focus-visible{
  opacity:1;
  transform:translateY(-2px);
}

/* ── Rhythm into the sitemap ─────────────────────────────────────
   The social row previously sat flush against the first column
   heading, close enough to read as a collision. The navigation carries
   its own top padding and hairline (globals.css); this is the space
   before it.

   Selected off .fc-inner, not .fc-social: the social row is the last
   child *inside* .fc-inner, so it is not the sitemap's sibling and an
   adjacent selector on it silently matches nothing. */
.fc-inner + .pg-foot-cols{margin-top:clamp(2rem,3.5vw,2.75rem);}

/* ── Bottom bar ──────────────────────────────────────────────────
   Three items on one line at desktop, centred and stacked on a phone.
   The signature keeps its serif italic — it is the one place in the
   footer where the brand is allowed to speak in its display face.

   Width and padding match .pg-foot-cols exactly. They did not before:
   the bar was 1300 px against the navigation's 1120, so its rule ran
   ~90 px wider on each side than the columns above it and nothing in
   the footer shared a vertical edge. Alignment is most of what makes a
   layout look deliberate.

   The old top margin was clamp(3rem,7vw,5rem) on top of the sitemap's
   own bottom margin, which left a stretch of empty page between the
   contact rail and the rule. One source of space, not two. */
.fc-bottom{
  width:100%;
  max-width:1120px;
  margin-top:clamp(1rem,2vw,1.75rem);
  padding:clamp(1.6rem,3vw,2rem) max(5vw,1.5rem) clamp(2rem,3.5vw,2.75rem);
  /* The rule is drawn inset, not as a border. A border-top spans the
     padding box, so it ran ~72 px wider on each side than the columns
     above and undid the alignment the shared max-width had just bought.
     Drawn this way it also picks up the same fade as the sitemap's
     hairline, so the two read as one system. */
  border-top:0;
}
.fc-bottom::before{
  content:'';position:absolute;top:0;
  left:max(5vw,1.5rem);right:max(5vw,1.5rem);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,.2) 14%,rgba(212,175,55,.2) 86%,transparent);
}
.fc-bottom-row{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(240,237,228,.42);
}
.fc-legal a{color:inherit;transition:color .35s;}
.fc-legal a:hover,.fc-legal a:focus-visible{color:var(--gold3);}
.fc-signature{
  margin-top:1.25rem;
  font-size:12px;
  color:rgba(240,237,228,.3);
  letter-spacing:.01em;
}

@media(max-width:639.98px){
  .fc-contact{
    flex-direction:column;align-items:stretch;
    width:100%;max-width:340px;margin-left:auto;margin-right:auto;
  }
  .fc-pill{justify-content:center;}
  .fc-bottom-row{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.85rem;
  }
}

/* ── 10. MOTION SYSTEM (js/motion.js) ─────────────────────────────
   Two jobs: give split headings something to be masked by, and stand the
   CSS hero keyframes down when the JS timeline takes over so the two never
   both play. The keyframes stay in the file deliberately — if motion.js
   fails to load, html.noor-motion is never set and the hero still animates. */

.noor-line{display:block;overflow:hidden;}
.noor-line-i{display:block;will-change:transform;}
.noor-w{display:inline-block;}

/* The hero timeline owns these once the motion system is running. */
html.noor-motion .hero-eyebrow,
html.noor-motion .hero-h1 .ln>span,
html.noor-motion .hero-bottom,
html.noor-motion .scroll-ind{animation:none;}

/* Cursor "VIEW" affordance over project cards. Pointer devices only — it is
   created by JS, which never runs it on coarse pointers. */
.noor-cur-view{
  position:fixed;top:0;left:0;z-index:1400;
  pointer-events:none;opacity:0;
  display:grid;place-items:center;
  width:86px;height:86px;border-radius:50%;
  background:rgba(212,175,55,.92);
  color:#0a0a0a;
  font-family:'JetBrains Mono','JetBrains Mono Fallback',monospace;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  will-change:transform;
}

@media (hover:none),(pointer:coarse){.noor-cur-view{display:none;}}

@media (prefers-reduced-motion: reduce){
  /* Nothing is split and nothing is masked in the reduced tier, but if a
     split survives a preference change mid-session the text must still be
     readable rather than clipped at translateY(105%). */
  .noor-line{overflow:visible;}
  .noor-line-i{transform:none!important;}
  .noor-cur-view{display:none;}
}

/* ── 11. PORTFOLIO — HORIZONTAL SCROLL GALLERY ────────────────────
   Default state is the vertical stack the section has always been. The
   horizontal layout only exists once js/motion.js has measured the track,
   confirmed the tier and added .is-hgallery — so no-JS, touch, narrow and
   reduced-motion visitors all get the stack, and a JS failure cannot leave
   a row of cards stranded off-screen with no way to reach them. */

.pf-track{display:grid;gap:clamp(2rem,4vw,3.5rem);}

/* ── gallery mode ── */
.pf-stage.is-hgallery{
  position:relative;          /* containing block for the progress rail */
  height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
  /* The section already clips; this keeps the track from widening the page
     during the frame between layout and the first ScrollTrigger update. */
}
.pf-stage.is-hgallery .pf-track{
  display:flex;
  grid-template-columns:none;
  align-items:center;
  gap:clamp(2rem,3vw,3rem);
  width:max-content;
  will-change:transform;
}
.pf-stage.is-hgallery .pf3-card{
  /* Narrower than the full-bleed stacked card, which is what lets the card
     height stay under the viewport once it is centred in a 100vh stage. */
  flex:0 0 min(84vw,1100px);
  margin:0;
}
/* The float idle reads as jitter once cards are travelling horizontally. */
.pf-stage.is-hgallery .pf3-card{animation:none;}

/* Progress rail — the one affordance a pinned horizontal section owes the
   visitor: how much is left. Width is driven by JS from scroll progress. */
.pf-rail{
  position:absolute;left:max(4vw,1.5rem);right:max(4vw,1.5rem);bottom:4.5vh;
  height:1px;background:rgba(212,175,55,.16);
  opacity:0;transition:opacity .5s;
}
.pf-stage.is-hgallery .pf-rail{opacity:1;}
.pf-rail-fill{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--gold3,#d4af37),var(--gold2,#b8966e));
  transform-origin:left center;
}

@media (max-width:1023px){.pf-rail{display:none;}}

@media (prefers-reduced-motion: reduce){
  /* Belt and braces: the class is never added in this tier, but if the
     preference flips mid-session the stack must come straight back. */
  .pf-stage.is-hgallery{height:auto;display:block;overflow:visible;}
  .pf-stage.is-hgallery .pf-track{display:grid;width:auto;transform:none!important;}
  .pf-stage.is-hgallery .pf3-card{flex:none;}
  .pf-rail{display:none;}
}