/* ============================================================
   ROYAL PAGDI WALE — RESPONSIVE STYLESHEET
   Breakpoints:  1400 · 1200 · 992 · 768 · 576 · 400
============================================================ */

/* ---------- LARGE DESKTOP  (max 1400px) ---------- */
@media (max-width:1400px){
  :root{--sec-y:96px}
  .hero__inner{gap:48px}
}

/* ---------- LAPTOP  (max 1200px) ---------- */
@media (max-width:1200px){
  :root{--sec-y:88px;--container:1040px}
  .hero__title{font-size:clamp(2.1rem,4.4vw,3.2rem)}
  .turban-show{max-width:480px}
  .about__inner{gap:52px}
  .about__media{max-width:430px}
  .why__grid,.services__grid{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:repeat(2,1fr);gap:40px 22px}
  .timeline::before{display:none}
  .gallery__nav--prev{left:-10px}
  .gallery__nav--next{right:-10px}
  .testimonial-card{flex:0 0 50%}
  .faq__inner,.booking__inner{gap:44px}
  .footer__inner{grid-template-columns:1.6fr 1fr 1.3fr;gap:40px}
  .footer__col:nth-child(3){display:none}
  .booking-form{padding:36px}
}

/* ---------- TABLET  (max 992px) ---------- */
@media (max-width:992px){
  :root{--sec-y:76px;--header-h:104px}

  /* Mobile navigation */
  .nav-toggle{display:flex}
  .nav{
    position:fixed;top:0;right:0;z-index:890;
    width:min(340px,84vw);height:100vh;height:100dvh;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:100px 32px 40px;background:#fff;
    box-shadow:-14px 0 50px rgba(139,0,0,.14);
    transform:translateX(105%);transition:transform .42s var(--ease);
    overflow-y:auto;
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list li{border-bottom:1px solid var(--line)}
  .nav__link{display:block;padding:16px 4px;font-size:1rem}
  .nav__link::after{display:none}
  .nav__link.is-active{color:var(--maroon);font-weight:600}
  /* Click-to-call becomes a full-width row inside the slide-out panel */
  .nav__phone{
    width:100%;margin-top:22px;padding:14px;border-radius:var(--r-md);
    background:var(--light);border:1px solid var(--line);
  }
  .nav__phone:hover{transform:none}
  .nav__cta{margin-top:14px;width:100%}
  .header.is-stuck{padding-block:9px}

  /* Hero — stacked */
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 28px);padding-bottom:110px;text-align:center}
  .hero__inner{grid-template-columns:1fr;gap:38px}
  /* Turban leads on small screens — it is the product, so it goes above the copy */
  .hero__visual{order:1}
  .hero__content{order:2;display:flex;flex-direction:column;align-items:center}
  .hero__desc{max-width:600px}
  .hero__actions,.hero__trust{justify-content:center}
  .hero__floral--left{width:250px;left:-100px}
  .hero__floral--right{width:280px;right:-110px}
  .floating-circle--2{width:180px}
  .turban-show{max-width:430px}
  .hero__scroll{display:none}

  /* Stats */
  .stats{margin-top:-52px}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat-card{padding:34px 20px}
  .stat-card:nth-child(odd){border-left:0}
  .stat-card:nth-child(n+3){border-top:1px solid var(--line)}

  /* About */
  .about__inner{grid-template-columns:1fr;gap:64px}
  .about__media{max-width:460px;margin-inline:auto}
  .about__actions{justify-content:flex-start}

  /* FAQ / Booking */
  .faq__inner,.booking__inner{grid-template-columns:1fr;gap:44px}
  .section__head--left{max-width:640px}

  /* Footer */
  .footer{padding-top:70px}
  .footer__inner{grid-template-columns:repeat(2,1fr);gap:40px;padding-bottom:48px}
  .footer__col:nth-child(3){display:block}
  .footer__about{max-width:none}

  /* Floating buttons */
  .float-btn{width:52px;height:52px;bottom:22px}
  .float-btn--whatsapp{right:20px}
  .float-btn--call{left:20px}
  .float-btn__tip{display:none}
  .back-to-top{right:20px;bottom:86px;width:42px;height:42px}

  .lightbox{padding:56px 20px}
  .lightbox__nav{width:42px;height:42px;margin-top:-21px}
  .lightbox__nav--prev{left:10px}
  .lightbox__nav--next{right:10px}
}

/* ---------- MOBILE  (max 768px) ---------- */
@media (max-width:768px){
  :root{--sec-y:64px}
  body{font-size:15px}
  .container{padding-inline:18px}

  .section__head{margin-bottom:44px}
  .section__lead{font-size:.96rem}

  .hero{padding-bottom:96px}
  .hero__eyebrow{font-size:.7rem;padding:7px 15px 7px 7px}
  .hero__desc{font-size:.97rem;margin-bottom:28px}
  .hero__actions{width:100%;flex-direction:column;gap:12px}
  .hero__actions .btn{width:100%}
  .hero__trust{gap:10px 18px;font-size:.8rem}
  .turban-show{max-width:360px}

  .stats{margin-top:-40px}
  .stats__grid{border-radius:var(--r-lg)}
  .stat-card{padding:28px 14px}
  .stat-card__icon{width:48px;height:48px;margin-bottom:12px}
  .stat-card__icon svg{width:22px;height:22px}
  .stat-card__label{font-size:.74rem}

  .about__media{max-width:400px}
  .about__exp-badge{left:-12px;bottom:32px;padding:12px 18px}
  .about__exp-badge strong{font-size:1.7rem}
  .about__list{gap:18px;margin:26px 0 30px}
  .about__list-icon{width:42px;height:42px}
  .about__actions{flex-direction:column;align-items:stretch;gap:16px}
  .about__actions .btn--link{text-align:center}

  .why__grid,.services__grid{grid-template-columns:1fr;gap:20px}
  .feature-card{padding:30px 26px}
  .feature-card__icon{width:56px;height:56px;margin-bottom:18px}
  .service-card{padding:32px 26px 28px}
  .service-card__icon{width:66px;height:66px;margin-bottom:18px;border-radius:20px}
  .service-card__icon svg{width:34px;height:34px}

  .timeline{grid-template-columns:1fr;gap:0;text-align:left;padding-left:14px}
  .timeline::before{
    display:block;left:48px;right:auto;top:20px;bottom:20px;width:2px;height:auto;
    background:linear-gradient(180deg,transparent,rgba(212,175,55,.5) 10%,rgba(212,175,55,.5) 90%,transparent);
  }
  .timeline__step{display:flex;align-items:flex-start;gap:22px;text-align:left;padding-block:16px}
  .timeline__num{width:58px;height:58px;margin:0;flex:none;font-size:1.05rem}
  .timeline__body{padding-top:8px}

  .gallery__grid{gap:14px;padding-bottom:20px}
  .gallery__item{flex-basis:300px;height:460px;border-width:2px}
  .gallery__item--wide{flex-basis:390px}
  .gallery__item figcaption{left:14px;right:14px;bottom:12px;font-size:.78rem;opacity:1;transform:none}
  .gallery__item::after{opacity:.55}
  .gallery__item::before{display:none}
  .gallery__nav{display:none}

  .testimonial-card{flex:0 0 100%;padding:30px 26px;margin-inline:8px}
  .testimonial-card__quote{font-size:4rem;right:20px}
  .slider-nav{width:40px;height:40px;margin-top:-20px}
  .slider-nav--prev{left:-6px}
  .slider-nav--next{right:-6px}


  .accordion__trigger{padding:16px 18px;font-size:.92rem;gap:14px}
  .accordion__content{padding:0 18px 18px;font-size:.89rem}
  .faq__aside-card{padding:24px}

  .map-block{grid-template-columns:1fr;margin-top:44px}
  .map-block__frame{min-height:280px;order:2}
  .map-block__card{order:1;padding:30px 24px}
  .map-block__title{font-size:1.28rem}

  .booking-form{padding:28px 22px;border-radius:var(--r-lg)}
  .booking-form__title{font-size:1.3rem;margin-bottom:20px}
  .form-row{grid-template-columns:1fr;gap:0}

  /* Quick Links / Our Services become tap-to-open dropdowns */
  .footer__col--drop{
    text-align:left;border-top:1px solid rgba(255,255,255,.1);
  }
  .footer__col--drop .footer__heading{margin-bottom:0;padding-bottom:0}
  .footer__col--drop .footer__heading::after{display:none}
  .footer__drop-btn{cursor:pointer;padding:16px 0;min-height:56px}
  .footer__drop-icon{
    display:block;position:relative;width:24px;height:24px;flex:none;border-radius:50%;
    background:rgba(255,255,255,.08);transition:background var(--t);
  }
  .footer__col--drop.is-open .footer__drop-icon{background:rgba(212,175,55,.2)}
  .footer__drop-icon::before,.footer__drop-icon::after{
    content:"";position:absolute;left:50%;top:50%;background:var(--gold);border-radius:2px;
    transform:translate(-50%,-50%);transition:height .3s var(--ease);
  }
  .footer__drop-icon::before{width:11px;height:2px}
  .footer__drop-icon::after{width:2px;height:11px}
  .footer__col--drop.is-open .footer__drop-icon::after{height:0}
  .footer__drop-panel{height:0;transition:height .35s var(--ease)}
  .footer__col--drop .footer__links{gap:2px;padding-bottom:14px}
  .footer__col--drop .footer__links a{display:block;padding-block:9px}

  .footer__inner{grid-template-columns:1fr;gap:0;padding-bottom:40px;text-align:center}
  .footer__col--brand,.footer__col:last-child{padding-block:18px}
  .footer__col--brand .logo{justify-content:center}
  .logo__img{height:70px}
  .header.is-stuck .logo__img{height:60px}
  .preloader__logo{height:120px}
  .footer__heading::after{left:50%;transform:translateX(-50%)}
  .footer__social{justify-content:center}
  .footer__contact li{justify-content:center;text-align:left}
  .footer__links a:hover{transform:none}
  .footer__bottom-inner{flex-direction:column;text-align:center}

  .modal__box{padding:40px 26px 32px}
  .modal__title{font-size:1.35rem}
  .modal__icon{width:72px;height:72px}
  .modal__actions{flex-direction:column}
  .modal__actions .btn{width:100%}
}

/* ---------- SMALL MOBILE  (max 576px) ---------- */
@media (max-width:576px){
  :root{--sec-y:56px}
  .section__eyebrow{font-size:.7rem;letter-spacing:.16em}
  .section__eyebrow::before,.section__eyebrow::after{width:18px}

  .logo__img{height:62px}
  .header.is-stuck .logo__img{height:54px}
  .logo--light .logo__img{height:88px;padding:8px 14px}

  .hero__title{font-size:2rem}
  .hero__subtitle{font-size:1.05rem}
  .turban-show{max-width:300px}

  .stats__grid{grid-template-columns:1fr}
  .stat-card:nth-child(n+2){border-top:1px solid var(--line);border-left:0}
  .stat-card{padding:26px 18px}

  .about__media{max-width:330px}
  .about__frame-accent{inset:18px -18px -18px 18px}

  .gallery__item{flex-basis:265px;height:410px}
  .gallery__item--wide{flex-basis:330px}

  .btn--lg{padding:15px 30px;font-size:.94rem}

  .float-btn{width:48px;height:48px;bottom:18px}
  .float-btn svg{width:24px;height:24px}
  .float-btn--whatsapp{right:16px}
  .float-btn--call{left:16px}
  .back-to-top{right:16px;bottom:76px;width:38px;height:38px}
  .back-to-top svg{width:17px;height:17px}
}

/* ---------- EXTRA SMALL  (max 400px) ---------- */
@media (max-width:400px){
  .container{padding-inline:14px}
  .hero__title{font-size:1.78rem}
  .hero__subtitle{font-size:.98rem}
  .turban-show{max-width:255px}
  .gallery__item{flex-basis:235px;height:360px}
  .gallery__item--wide{flex-basis:290px}
  .timeline__num{width:50px;height:50px;font-size:.95rem}
  .timeline__step{gap:16px}
  .booking-form{padding:22px 16px}
}

/* ============================================================
   MOBILE USABILITY  (max 768px)
   Touch ergonomics, iOS quirks and legibility floors.
============================================================ */
@media (max-width:768px){

  /* iOS Safari zooms the whole page when a focused field is under 16px.
     16px here keeps the layout still on focus. */
  .form-group input,
  .form-group select,
  .form-group textarea{font-size:16px}

  /* Comfortable tap targets — 44px is the accessible minimum */
  .btn{min-height:46px}
  .btn--sm{min-height:44px;padding-block:12px}
  .btn--link{min-height:44px;display:inline-flex;align-items:center}
  .nav__link{min-height:48px;display:flex;align-items:center}
  .nav-toggle{width:48px;height:48px}
  .footer__links a{padding-block:7px}
  .footer__credit a{display:inline-block;padding-block:6px}
  .modal__close,.lightbox__close{width:44px;height:44px}
  .slider-nav{width:44px;height:44px;margin-top:-22px}
  .lightbox__nav{width:44px;height:44px;margin-top:-22px}
  .back-to-top{width:44px;height:44px}
  .accordion__trigger{min-height:56px}
  /* Small badges stay readable */
  .form-group label{padding-bottom:2px}

  /* Widen the dot hit areas vertically only — going wider horizontally
     would make neighbouring dots overlap and swallow each other's taps */
  .slider-dots{gap:18px}
  .slider-dot{position:relative;width:10px;height:10px}
  .slider-dot.is-active{width:30px}
  .slider-dot::after{
    content:"";position:absolute;left:50%;top:50%;
    width:26px;height:44px;transform:translate(-50%,-50%);
  }

  /* Legibility floor — nothing under 12px on a phone */
  .hero__eyebrow,.section__eyebrow{font-size:.76rem}
  .stat-card__label{font-size:.78rem}
  .booking-form__note{font-size:.8rem}
  .turban-slide__meta,.footer__bottom p{font-size:.82rem}

  /* Softer tap feedback than the default blue flash */
  a,button,.gallery__item,.accordion__trigger{-webkit-tap-highlight-color:rgba(139,0,0,.08)}

  /* Momentum scrolling for the gallery strip on iOS */
  .gallery__grid{-webkit-overflow-scrolling:touch}

  /* Long words (emails, venue names) must never push the layout wide */
  .booking__contacts a,.footer__contact a,.hero__desc,.section__lead{overflow-wrap:break-word}
}

/* ---------- LANDSCAPE PHONES ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:calc(var(--header-h) + 30px);padding-bottom:60px}
  .nav{padding-top:80px}
  .float-btn,.back-to-top{bottom:14px}
  .back-to-top{bottom:74px}
}

/* ---------- PRINT ---------- */
@media print{
  .header,.nav,.nav-toggle,.float-btn,.back-to-top,.hero__decor,.hero__scroll,
  .preloader,.lightbox,.modal,.turban-pips,.slider-nav,.slider-dots{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .section{padding-block:24pt;page-break-inside:avoid}
  a{text-decoration:underline}
  [data-anim]{opacity:1!important;transform:none!important}
}