/* ═══════════════════════════════════════════════════════════════
   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.)

   The ::before selector and its `{` had been lost, so these declarations
   sat at the top level and the sweep never rendered. Restored, with the
   hover state that actually moves it — without that second rule the
   sheen would sit frozen off-screen forever. */
.pc-btn::before,.btn-sm::before{
  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;
}
.pc-btn:hover::before,.btn-sm:hover::before{transform:translateX(160%) skewX(-18deg);}
@media(prefers-reduced-motion:reduce){
  .pc-btn::before,.btn-sm::before{display: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.
   The selector had been lost, leaving the declaration orphaned after the
   comment with no rule to belong to — so the glow never rendered and the
   stray `}` unbalanced what followed. .svc2-check is the ✦ bullet inside
   .svc2-card, which is what the comment describes. */
.svc2-card:hover .svc2-check{
  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){
  /* 1ms, not the conventional .001ms: clean-css turns the leading-dot
     sub-millisecond form into the invalid value `NaNs`, which the CSS
     parser then drops — so the shipped bundle carried a reduced-motion
     block that did nothing, and visitors who had asked for less motion
     got all of it. 0.001ms survives as 0s and would work too; 1ms is
     just as instant to a human and needs no minifier trivia to read. */
  *,*::before,*::after{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    scroll-behavior:auto!important;
  }
}