/* Noor Studio Agency — Responsive Breakpoints */

@media(hover:none){body{cursor:auto;}}

@media(hover:none){.cur,.curD{display:none;}}

@media(max-width:768px){.nav-logo img{height:48px;} .nav.scrolled .nav-logo img{height:39px;}}
@media(max-width:480px){.nav-logo img{height:39px;} .nav.scrolled .nav-logo img{height:34px;}}

/* One unified navigation experience at every width: logo + persistent CTA
   + a menu trigger that opens the same fullscreen editorial menu, desktop
   included — no separate horizontal link bar. The plain anchor links
   (Portfolio/Services/Pricing/FAQ) live exclusively inside that fullscreen
   menu now, never inline in the top bar. Unconditional (no media query) —
   the same fullscreen menu, same typography, at every viewport width;
   only the clamp()'d font-size naturally scales between them. */
.mob-menu{position:fixed;inset:0;background:rgba(5,5,5,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:79;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.8rem;padding:calc(5rem + env(safe-area-inset-top)) 1.5rem calc(3rem + env(safe-area-inset-bottom));transform:translateY(-100%);transition:transform .55s cubic-bezier(.7,0,.3,1);pointer-events:none;overflow-y:auto;text-align:center;}
.mob-menu.open{transform:translateY(0);pointer-events:auto;}
.mob-menu a{position:relative;font-family:'Canela','PP Editorial New','Cormorant Garamond',serif;font-weight:300;font-size:clamp(2.625rem,7vw,4.5rem);letter-spacing:-.02em;line-height:1.05;color:var(--ink);transition:color .4s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;padding:.4rem 0;min-height:44px;display:flex;align-items:center;justify-content:center;}
.mob-menu a::after{content:'';position:absolute;left:8%;right:8%;bottom:.15em;height:1px;background:var(--gold3);transform:scaleX(0);transform-origin:center;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.mob-menu a:hover{color:var(--gold3);}
.mob-menu a:hover::after{transform:scaleX(1);}
.mob-menu .mob-cta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:.9rem 2rem;min-height:44px;border:1px solid var(--gold);border-radius:100px;color:var(--gold3);margin-top:.5rem;display:inline-flex;align-items:center;justify-content:center;}
/* The burger doubles as the close (X) button while the menu is open — keep
   a proper 44px tap target, pinned top-right, always above the overlay. */
.nav-burger{padding:.6rem;margin:-.6rem -.6rem -.6rem 0;min-width:44px;min-height:44px;justify-content:center;align-items:center;}
.nav{padding-top:calc(.9rem + env(safe-area-inset-top));}
.nav-links a{display:none;}

@media(max-width:768px){
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:1.5rem;}
  .hero-actions,.hero-btns{align-items:flex-start;}
  .hero-trust{flex-direction:column;align-items:flex-start;gap:.5rem;}
}


@media(max-width:1100px){.svc-grid{grid-template-columns:repeat(2,1fr);}}

@media(max-width:640px){.svc-grid{grid-template-columns:1fr;}}

@media(max-width:960px){.pricing-grid{grid-template-columns:1fr;max-width:520px;}}






@media(max-width:500px){.form-row{grid-template-columns:1fr;}}

@media(max-width:700px){.port-stats{grid-template-columns:repeat(2,1fr);}}

@media(max-width:1100px){.port-grid{grid-template-columns:repeat(2,1fr);}}

@media(max-width:640px){.port-grid{grid-template-columns:1fr;}}

@media(max-width:600px){.cs-meta{grid-template-columns:1fr 1fr;}}

@media(max-width:500px){.cs-results{grid-template-columns:1fr 1fr;}}

@media(max-width:500px){.cs-footer{flex-direction:column;}}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}#shader{display:none;}}

@media(forced-colors:active){.btn-p,.btn-gold{forced-color-adjust:none;}.hero-h1 .it{-webkit-text-fill-color:Highlight;}}

@media(hover:none){
  .btn,.btn-sm,.nav-item,.svc-btn,.pc-btn,.faq-q,.pf-btn,
  .pf-btn{padding:.7rem 1.1rem;}
  .nav-cta{min-height:40px;}
}

@media(max-width:480px){.ai-panel{width:calc(100vw - 2rem);left:1rem;bottom:6rem;}}




@media(max-width:700px){.booking-wrap{grid-template-columns:1fr;}}

@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}

@media(max-width:560px){.why-grid{grid-template-columns:1fr;}}


@media(max-width:540px){.modal-inner{padding:1.4rem 1.2rem 1.6rem;}}

@media(max-width:480px){.form-row{grid-template-columns:1fr;}}

@media(max-width:768px){
  .hero{padding-left:1rem;padding-right:1rem;}
  .hero-h1{font-size:clamp(2.5rem,10vw,4.5rem);word-break:break-word;}
  .hero-btns{flex-direction:column;gap:.6rem;width:100%;}
  .hero-btns .btn{width:100%;text-align:center;justify-content:center;}
  .nav{padding:.16rem 1rem;}
  .nav-cta{padding:.5rem .9rem;font-size:9px;letter-spacing:.12em;white-space:nowrap;}
  .nav-logo{height:48px;}
  .s-title{font-size:clamp(1.8rem,8vw,3rem);word-break:break-word;}
  .pricing-grid{grid-template-columns:1fr!important;max-width:400px;margin-left:auto;margin-right:auto;}
  .svc-grid{grid-template-columns:1fr!important;}
  .port-grid{grid-template-columns:1fr!important;}
  .why-grid{grid-template-columns:1fr!important;}
  .booking-wrap{grid-template-columns:1fr!important;}
  .form-row{grid-template-columns:1fr!important;}
  .footer-grid{grid-template-columns:1fr!important;text-align:center;}
  .modal{margin:0 .5rem;max-height:95vh;}
  .modal-inner{padding:1.2rem 1rem 1.4rem;}
  .cs-modal{width:calc(100vw - 1rem);max-width:100%;}
  .ai-panel{width:calc(100vw - 2rem);left:1rem;bottom:6rem;max-height:70vh;}
  section{padding-left:max(3vw,1rem)!important;padding-right:max(3vw,1rem)!important;}
}

@media(max-width:480px){
  .hero-h1{font-size:clamp(2rem,9vw,3rem);}
  .nav-cta{display:none;}
  .hero-btns .btn{font-size:10px;padding:.8rem 1rem;}
  .pc{min-width:0;}
}

@media(max-width:768px){.amb-orb{filter:blur(40px);opacity:.1;}.amb-orb.o1{width:260px;height:260px;}.amb-orb.o2{width:200px;height:200px;}.amb-orb.o3{display:none;}}

@media(prefers-reduced-motion:reduce){.amb-orbs{display:none;}}

@media(max-width:600px){
  footer{padding:4.5rem 1.2rem 2.5rem;}
  .footer-min{gap:1.4rem;}
  .footer-contact-min{flex-direction:column;gap:.9rem;}
  .footer-social-min{flex-wrap:wrap;justify-content:center;}
}

@media(prefers-reduced-motion:reduce){.pc-status-dot{animation:none;}}

/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE UI/UX AUDIT — 320px–1440px
   ═══════════════════════════════════════════════════════════════ */

/* ── Global overflow safety ── */
img,svg,video,canvas{max-width:100%;}
table{max-width:100%;}

/* ── Section vertical rhythm: desktop 9rem top/bottom reads as huge
   empty space on phones — scale it down progressively ── */
@media(max-width:1024px){
  section,.svc-section,.pricing-section,.port-section,
  .booking-section,.why-section,
  .future-section,.review-section,.faq-section{padding-top:6rem;padding-bottom:6rem;}
}
@media(max-width:768px){
  section,.svc-section,.pricing-section,.port-section,
  .booking-section,.why-section,
  .future-section,.review-section,.faq-section{padding-top:4.5rem;padding-bottom:4.5rem;}
  .s-head{margin-bottom:2.75rem;}
  .p5-head{margin-bottom:2.25rem;}
  .port-head{margin-bottom:2.75rem;}
}
@media(max-width:480px){
  section,.svc-section,.pricing-section,.port-section,
  .booking-section,.why-section,
  .future-section,.review-section,.faq-section{padding-top:3.5rem;padding-bottom:3.5rem;}
  .work{padding-top:3rem;}
}

/* ── Card / grid gaps tightened on mobile so stacked cards don't
   read as one long scroll of dead air ── */
@media(max-width:768px){
  .svc-grid,.port-grid,.why-grid,.pricing-grid{gap:1.1rem!important;}
  .svc-card,.why-card,.pc{padding:1.6rem!important;}
  .booking-wrap{gap:1.2rem;}
  .card{padding:1.2rem;}
}

/* ── Calendar / booking widget ── */
@media(max-width:480px){
  .cal-mini{gap:2px;}
  .cal-mini-day{font-size:.72rem;border-radius:5px;}
  .cal-mini-label{font-size:7.5px;}
  .slot-grid{grid-template-columns:repeat(3,1fr);gap:.4rem;}
  .slot-btn{padding:.6rem .3rem;font-size:8.5px;}
  .card-title{font-size:8.5px;}
}

/* ── Form inputs: comfortable padding + no iOS zoom ── */
@media(max-width:768px){
  .form-input,.form-select,.form-textarea,.form-inp{padding:.85rem 1rem;font-size:max(16px,.92rem)!important;}
  .form-group,.form-grp{gap:.4rem;}
}

/* ── CTA buttons: never let them get clipped by the viewport edge
   or shrink below a comfortable tap target ── */
@media(max-width:480px){
  .btn,.form-submit,.pc-btn,.svc-btn{min-height:44px;}
  .hero-btns .btn{min-height:48px;}
}

/* ── Reduce oversized border radius on small screens so cards don't
   look like they're floating in a pill against the screen edge ── */
@media(max-width:480px){
  .modal,.cs-modal,.review-box,.ai-panel{border-radius:16px;}
  .svc-card,.why-card,.pc,.port-card,.card{border-radius:12px;}
  .faq-item{border-radius:10px;}
}

/* ── Footer: fully fluid on narrow screens ── */
@media(max-width:480px){
  footer{padding:3.5rem 1rem 2rem;}
  .footer-cta{font-size:clamp(1.9rem,9vw,2.6rem);}
  /* "Exceptional" needs its own larger, bolder, higher-contrast treatment on
     mobile — at this size the gradient-clip text was reading as thin/faint
     against black. Sized independently from the "Let's Build Something"
     line above it (which stays at the base .footer-cta size) rather than
     scaling the whole heading, so the layout/branding above is untouched. */
  .footer-cta em{
    font-size:clamp(2.43rem,11.45vw,3.29rem); /* +8% on top of the previous mobile-specific size */
    display:inline-block;margin-top:.35em; /* more breathing room from "Something" */
  }
  .footer-divider-min{max-width:220px;}
}

/* ── Consistent-height footer "social" links act as buttons on touch ── */
@media(max-width:900px){
  .footer-contact-min a,.footer-social-min a,.footer-legal-min a{
    display:inline-flex;align-items:center;min-height:32px;padding:.2rem 0;
  }
}

/* ── Typography scaling refinements for very small phones ── */
@media(max-width:375px){
  .hero-h1{font-size:clamp(1.9rem,9.5vw,2.8rem);}
  .s-title{font-size:clamp(1.65rem,8.5vw,2.6rem);}
  .footer-cta{font-size:clamp(1.7rem,9vw,2.3rem);}
  .footer-cta em{font-size:clamp(2.16rem,11.45vw,2.92rem);} /* +8% on top of the previous size, same ratio as the 480px tier above */
  .mob-menu a{font-size:clamp(1.5rem,8vw,2.4rem);}
}

@media(max-width:400px){
  .btt{right:1rem;}
}