/* ═══════════════════════════════════════════════════════════════
   Noor Studio Agency — PREMIUM REFINEMENT LAYER
   Loaded last. Additive only: refines type, motion, hover, a11y.
   Nothing here changes branding, colours, content or structure.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TYPOGRAPHY POLISH ─────────────────────────────────────── */
/* Balanced heading wraps + optical sizing for a more couture feel. */
.s-title,.pc-name,.footer-cta,.hero-h1{
  text-wrap:balance;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
}
.s-title em,.pc-name em,.footer-cta em{font-optical-sizing:auto;}
/* Slightly tighter, more even body rhythm. */
.pc-desc,.faq-body p{
  letter-spacing:.005em;
}
/* Mono eyebrows read crisper with a hair more tracking. */
.s-num,.p5-badge,.port-badge{font-feature-settings:"tnum" 1;}

/* ── 2. WHITESPACE / ALIGNMENT / ANCHORING ────────────────────── */
/* Anchor jumps land below the fixed nav instead of under it. */
html{scroll-padding-top:96px;}

/* ── 3. ACCESSIBILITY — visible keyboard focus ────────────────── */
/* The site hides the native cursor; keyboard users still need a ring. */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--gold3);
  outline-offset:3px;
  border-radius:6px;
}
/* Mouse users keep the clean look (no outline on :focus without keyboard). */
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none;}

/* ── 4. BUTTON / CTA MICRO-INTERACTIONS ───────────────────────── */
/* Tactile press feedback on every interactive control. */
.btn,.nav-cta,.pc-btn,.pc-btn-cs,.pc-btn-visit,
.form-submit,.btt,.btn-sm{
  transition:transform .28s cubic-bezier(.2,.8,.2,1),
             background .3s,color .3s,border-color .3s,box-shadow .3s;
}
.btn:active,.nav-cta:active,.pc-btn:active,
.pc-btn-cs:active,.pc-btn-visit:active,
.form-submit:active,.btn-sm:active{
  transform:translateY(1px) scale(.985);
}

/* Elegant light sheen sweeping across the Premium package CTA on hover.
   (.btn-p and .form-submit already carry a native shimmer in components.css
   — deliberately not touched here so we don't override it.) */
  content:'';position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-160%) skewX(-18deg);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}

/* ── 5. CARD HOVER CONSISTENCY & POLISH ───────────────────────── */
/* Unified, buttery lift + gold-tinted depth across every card type. */
.pc,.why-card,.faq-item{
  transition:transform .34s cubic-bezier(.2,.8,.2,1),
             box-shadow .34s cubic-bezier(.2,.8,.2,1),
             border-color .34s;
}
.why-card:hover{
  transform:translateY(-8px);
  box-shadow:0 26px 60px rgba(0,0,0,.45),0 0 40px rgba(212,175,55,.10);
  border-color:rgba(212,175,55,.32);
}

/* ── 6. ICON MICRO-INTERACTIONS ───────────────────────────────── */
.why-icon{
  display:inline-block;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.why-card:hover .why-icon{
  transform:scale(1.1) rotate(-5deg);
}

/* Feature check-marks gain a subtle gold glow on card hover. */
  text-shadow:0 0 10px rgba(212,175,55,.55);
}

/* ── 7. REDUCED MOTION — accessibility honour ─────────────────── */
/* Calms all CSS-driven ambient motion (marquees, floats, pulses, hovers)
   for users who ask for reduced motion. GSAP scroll reveals run via JS and
   are unaffected by this block, but ambient looping motion is the main
   comfort concern and is handled here. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}