/* ══════════════════════════════════════
   GURU MAKEUP ARTIST — Shared Stylesheet
══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --blush:    #f2e0da;
  --rose:     #c9796a;
  --rose-dk:  #a85848;
  --gold:     #c8923a;
  --sand:     #f7f0e8;
  --navy:     #1e2d40;
  --charcoal: #2e2e2e;
  --muted:    #7a6e68;
  --white:    #ffffff;
  --off-white:#fdfaf7;
  --border:   #e8ddd5;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; font-weight:300; color:var(--charcoal); background:var(--white); overflow-x:hidden; }
img { max-width:100%; display:block; }

/* ── HEADER ── */
header {
  position:sticky; top:0; left:0; right:0; z-index:9999;
  background:#fff; border-bottom:2px solid var(--blush);
  box-shadow:0 2px 24px rgba(0,0,0,0.09);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:72px; padding:0 60px; max-width:1440px; margin:0 auto;
}
.logo-link { text-decoration:none; display:flex; align-items:center; }
.nav-links { display:flex; gap:40px; list-style:none; }
.nav-links a {
  font-size:11px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase;
  color:#555; text-decoration:none; transition:color .25s;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.nav-links a:hover,
.nav-links a.active { color:var(--rose); border-bottom-color:var(--rose); }
.nav-cta {
  background:var(--rose); color:#fff; font-size:11px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase; padding:13px 30px;
  text-decoration:none; border-radius:3px; transition:background .25s,transform .2s;
}
.nav-cta:hover { background:var(--rose-dk); transform:translateY(-1px); }
.desktop-only { display:block; }
.mobile-only  { display:none; }
.hamburger {
  display:none; flex-direction:column; justify-content:space-between;
  width:28px; height:20px; background:none; border:none; cursor:pointer; padding:0;
}
.hamburger span { display:block; height:2px; background:var(--charcoal); border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1) { transform:translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }
.mobile-drawer { display:none; flex-direction:column; background:#fff; border-top:1px solid var(--border); padding:8px 0 20px; }
.mobile-drawer.open { display:flex; }
.mobile-drawer a { padding:14px 24px; font-size:13px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--charcoal); text-decoration:none; border-bottom:1px solid var(--border); transition:color .2s; }
.mobile-drawer a:hover { color:var(--rose); }
.mobile-drawer .drawer-cta { margin:16px 24px 0; border:none; background:var(--rose); color:#fff; text-align:center; border-radius:3px; padding:14px 24px; }

/* ── PAGE HERO BANNER ── */
.page-banner {
  background:var(--off-white); border-bottom:1px solid var(--border);
  padding:80px 60px 72px;
  text-align:center;
  position:relative; overflow:hidden;
}
.page-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 60% 50%, var(--blush) 0%, transparent 70%);
  pointer-events:none;
}
.page-banner .eyebrow { justify-content:center; margin-bottom:16px; }
.page-banner h1 { font-family:'Playfair Display',serif; font-size:clamp(40px,5vw,68px); font-weight:700; line-height:1.05; position:relative; }
.page-banner h1 em { font-style:italic; color:var(--rose); }
.page-banner p { font-size:15px; color:var(--muted); margin:20px auto 0; max-width:540px; line-height:1.9; position:relative; }

/* ── COMMON ── */
.eyebrow { font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--rose); margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.eyebrow::before { content:''; width:30px; height:2px; background:var(--rose); flex-shrink:0; }
.section-h2 { font-family:'Playfair Display',serif; font-size:clamp(34px,4vw,52px); font-weight:700; line-height:1.1; color:var(--charcoal); margin-bottom:28px; }
.section-h2 em { font-style:italic; color:var(--rose); }
.btn-fill { background:var(--rose); color:#fff; font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase; padding:15px 36px; text-decoration:none; border-radius:3px; transition:all .25s; display:inline-block; border:none; cursor:pointer; }
.btn-fill:hover { background:var(--rose-dk); transform:translateY(-2px); box-shadow:0 8px 20px rgba(201,121,106,.3); }
.btn-outline { border:2px solid var(--charcoal); color:var(--charcoal); font-size:11px; font-weight:500; letter-spacing:2px; text-transform:uppercase; padding:15px 36px; text-decoration:none; border-radius:3px; transition:all .25s; display:inline-block; }
.btn-outline:hover { border-color:var(--rose); color:var(--rose); }
.brand-strip { background:var(--navy); padding:18px 60px; display:flex; align-items:center; flex-wrap:wrap; gap:12px 36px; }
.brand-strip-lbl { font-size:9px; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,.4); }
.brand-names { display:flex; gap:32px; flex-wrap:wrap; align-items:center; }
.bname { font-size:11px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* ── FOOTER ── */
footer { background:var(--charcoal); color:white; padding:40px 60px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.footer-nav { display:flex; gap:28px; }
.footer-nav a { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); text-decoration:none; transition:color .25s; }
.footer-nav a:hover { color:var(--rose); }
.footer-copy { font-size:11px; color:rgba(255,255,255,.3); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(32px); transition:opacity .85s cubic-bezier(.23,1,.32,1),transform .85s cubic-bezier(.23,1,.32,1); }
.reveal.in { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}
::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:#f5f0ec} ::-webkit-scrollbar-thumb{background:var(--rose)}

/* ══════════════════════════════════════
   MOBILE RESPONSIVE
══════════════════════════════════════ */
@media(max-width:900px){
  html,body{overflow-x:hidden;max-width:100vw;}
  .nav-inner{padding:0 16px;height:60px;}
  .nav-links{display:none;}
  .nav-cta{display:none!important;}
  .desktop-only{display:none!important;}
  .mobile-only{display:flex!important;}
  .hamburger{display:flex;}
  .logo-link svg{width:80px;height:38px;}
  .page-banner{padding:48px 20px 40px;}
  .brand-strip{padding:14px 20px;gap:10px;flex-direction:column;align-items:flex-start;}
  .brand-names{gap:14px;}
  .bname{font-size:9px;}
  footer{flex-direction:column;text-align:center;padding:28px 20px;gap:16px;}
  .footer-nav{flex-wrap:wrap;justify-content:center;gap:14px;}
}


.nav-right{display:flex;align-items:center;gap:12px;}
.nav-wa{background:#25d366;color:#fff;font-size:10px;font-weight:500;letter-spacing:1.5px;padding:10px 18px;border-radius:3px;text-decoration:none;transition:background .25s;}
.nav-wa:hover{background:#1eb857;}
.drawer-wa{background:#25d366;color:#fff;margin:8px 24px 0;border-radius:3px;padding:14px 24px;text-align:center;text-decoration:none;font-size:13px;font-weight:500;}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.footer-wa{color:#25d366;font-size:12px;font-weight:500;text-decoration:none;}
.footer-wa:hover{text-decoration:underline;}
.schema-faq{display:none;}


.nav-right{display:flex;align-items:center;gap:12px;}
.nav-wa{background:#25d366;color:#fff;font-size:10px;font-weight:500;letter-spacing:1.5px;padding:10px 18px;border-radius:3px;text-decoration:none;transition:background .25s;}
.nav-wa:hover{background:#1eb857;}
.drawer-wa{background:#25d366;color:#fff;margin:8px 24px 0;border-radius:3px;padding:14px 24px;text-align:center;text-decoration:none;font-size:13px;font-weight:500;}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.footer-wa{color:#25d366;font-size:12px;font-weight:500;text-decoration:none;}
.footer-wa:hover{text-decoration:underline;}
.schema-faq{display:none;}


.nav-right{display:flex;align-items:center;gap:12px;}
.nav-wa{background:#25d366;color:#fff;font-size:10px;font-weight:500;letter-spacing:1.5px;padding:10px 18px;border-radius:3px;text-decoration:none;transition:background .25s;}
.nav-wa:hover{background:#1eb857;}
.drawer-wa{background:#25d366;color:#fff;margin:8px 24px 0;border-radius:3px;padding:14px 24px;text-align:center;text-decoration:none;font-size:13px;font-weight:500;}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.footer-wa{color:#25d366;font-size:12px;font-weight:500;text-decoration:none;}
.footer-wa:hover{text-decoration:underline;}
.schema-faq{display:none;}


.nav-right{display:flex;align-items:center;gap:12px;}
.nav-wa{background:#25d366;color:#fff;font-size:10px;font-weight:500;letter-spacing:1.5px;padding:10px 18px;border-radius:3px;text-decoration:none;transition:background .25s;}
.nav-wa:hover{background:#1eb857;}
.drawer-wa{background:#25d366;color:#fff;margin:8px 24px 0;border-radius:3px;padding:14px 24px;text-align:center;text-decoration:none;font-size:13px;font-weight:500;}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.footer-wa{color:#25d366;font-size:12px;font-weight:500;text-decoration:none;}
.footer-wa:hover{text-decoration:underline;}
.schema-faq{display:none;}


.nav-right{display:flex;align-items:center;gap:12px;}
.nav-wa{background:#25d366;color:#fff;font-size:10px;font-weight:500;letter-spacing:1.5px;padding:10px 18px;border-radius:3px;text-decoration:none;transition:background .25s;}
.nav-wa:hover{background:#1eb857;}
.drawer-wa{background:#25d366;color:#fff;margin:8px 24px 0;border-radius:3px;padding:14px 24px;text-align:center;text-decoration:none;font-size:13px;font-weight:500;}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.footer-wa{color:#25d366;font-size:12px;font-weight:500;text-decoration:none;}
.footer-wa:hover{text-decoration:underline;}
.schema-faq{display:none;}


.nav-right{display:flex;align-items:center;gap:12px;}
.nav-wa{background:#25d366;color:#fff;font-size:10px;font-weight:500;letter-spacing:1.5px;padding:10px 18px;border-radius:3px;text-decoration:none;transition:background .25s;}
.nav-wa:hover{background:#1eb857;}
.drawer-wa{background:#25d366;color:#fff;margin:8px 24px 0;border-radius:3px;padding:14px 24px;text-align:center;text-decoration:none;font-size:13px;font-weight:500;}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.footer-wa{color:#25d366;font-size:12px;font-weight:500;text-decoration:none;}
.footer-wa:hover{text-decoration:underline;}
.schema-faq{display:none;}


.nav-right{display:flex;align-items:center;gap:12px;}
.nav-wa{background:#25d366;color:#fff;font-size:10px;font-weight:500;letter-spacing:1.5px;padding:10px 18px;border-radius:3px;text-decoration:none;transition:background .25s;}
.nav-wa:hover{background:#1eb857;}
.drawer-wa{background:#25d366;color:#fff;margin:8px 24px 0;border-radius:3px;padding:14px 24px;text-align:center;text-decoration:none;font-size:13px;font-weight:500;}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.footer-wa{color:#25d366;font-size:12px;font-weight:500;text-decoration:none;}
.footer-wa:hover{text-decoration:underline;}
.schema-faq{display:none;}

/* ══ MOBILE CRITICAL FIXES ══ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
* { box-sizing: border-box; max-width: 100%; }
img { max-width: 100%; height: auto; display: block; }

/* Header sticky visible fix */
header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #ffffff;
  width: 100%;
}

/* Ensure all grids collapse on mobile */
@media(max-width:900px){
  [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  .fg-row{display:grid !important;grid-template-columns:1fr !important;}
  section{padding-left:0 !important;padding-right:0 !important;}
  .brand-strip{padding:14px 20px !important;}
}

/* Touch targets */
a, button { min-height: 44px; }
.nav-links a { min-height: auto; }

/* Prevent text overflow */
p, h1, h2, h3, span, div { word-wrap: break-word; overflow-wrap: break-word; }

/* Fix table overflow on mobile */
@media(max-width:900px){
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .creds-table td { display: block; width: 100% !important; }
  .creds-table td:first-child { color: var(--rose); font-size: 10px; padding-top: 14px; }
}

/* ══ COMPREHENSIVE MOBILE PADDING OVERRIDE ══ */
@media(max-width:900px){
  /* Kill all large horizontal padding */
  .pkg-cat,
  .map-section,
  .tl-inner,
  .phil-inner,
  .creds-inner,
  .global-inner,
  .about-hero-wrap,
  .ig-strip,
  .faq-inner,
  .why-inner,
  .sec-cta,
  .mc-band,
  .svc-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Ensure max-width containers don't cause scroll */
  .about-inner, .svc-inner, .mc-inner, .about-wrap,
  .svc-preview, .why-grid, .pkg-grid, .phil-grid,
  .gallery-masonry, .gallery-preview, .about-hero-wrap,
  .contact-layout, .map-grid {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero left padding */
  .hero-left { padding: 32px 20px 48px !important; }
  
  /* Nav inner */
  .nav-inner { padding: 0 16px !important; height: 60px !important; }
  
  /* Hide desktop nav links */
  .nav-links { display: none !important; }
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
  .hamburger { display: flex !important; }

  /* Brand strip */  
  .brand-strip { padding: 14px 20px !important; flex-direction: column; gap: 10px; }
  .brand-names { flex-wrap: wrap; gap: 12px; }

  /* Stat grid */
  .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .stat { border-right: none !important; }
  .stat:nth-child(odd) { border-right: 1px solid var(--border) !important; }

  /* Service preview grid */
  .svc-preview { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 20px !important; }
  
  /* Gallery masonry → 2 col */
  .gallery-masonry { columns: 2 !important; padding: 16px 20px !important; }
  
  /* Packages grid */
  .pkg-grid { grid-template-columns: 1fr !important; padding: 0 !important; }
  
  /* Gallery filter bar */
  .gf-bar { padding: 12px 16px !important; }
  
  /* Package tabs */
  .pkg-tabs { padding: 12px 16px !important; }

  /* Footer */
  footer { flex-direction: column !important; text-align: center !important; padding: 28px 20px !important; }
  .footer-right { align-items: center !important; }
  .footer-nav { flex-wrap: wrap; justify-content: center; }
  
  /* Contact layout */
  .contact-layout { grid-template-columns: 1fr !important; }
  .c-left, .c-right { padding: 48px 20px !important; }
  .submit-row { flex-direction: column; }
  .submit-row a, .submit-row button { width: 100% !important; text-align: center !important; display: block !important; }

  /* Service sections */  
  .svc-inner, .svc-inner.rev { direction: ltr !important; grid-template-columns: 1fr !important; }
  .svc-img { aspect-ratio: 16/9 !important; }

  /* About */
  .about-img-stack, .about-imgs { margin-bottom: 0; }
  .a-side, .about-inset, .exp-badge, .about-side { display: none !important; }

  /* Masterclass band */
  .mc-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  
  /* Process steps text size */
  .ps-text { font-size: 12px; }

  /* Form row */
  .fg-row { grid-template-columns: 1fr !important; gap: 0 !important; }

  /* Map */
  .map-grid { grid-template-columns: 1fr !important; }
  
  /* VIP chips */
  .vips { flex-direction: column; align-items: center; gap: 8px; }
  
  /* Cities */
  .cities-grid { gap: 8px; }

  /* Timeline */
  .tl-wrap { padding-left: 36px; }

  /* Why grid */
  .why-grid { grid-template-columns: 1fr !important; }

  /* Section padding */
  .sec-about, .sec-services, .sec-why, .sec-gallery, .sec-brands, .sec-faq,
  .sec-cities, .about-hero, .timeline-sec, .phil-sec, .creds-sec, .global-sec,
  .home-about, .home-svc, .ig-strip { padding-top: 60px !important; padding-bottom: 60px !important; }

  /* Page banner */
  .page-banner { padding: 48px 20px 40px !important; }
  
  /* Section center */
  .sec-center { padding: 0 20px !important; }
}