/* =========================================================================
   A008 — Your Nails Salon — shared styles
   Design tokens measured from https://nail-a008.aiopromotion.com
   ========================================================================= */
:root{
  --primary:#DE628A;      /* pink   (e-global primary) */
  --secondary:#F6B896;    /* peach  (e-global secondary) */
  --maroon:#78132C;       /* header / copyright / social / section headings */
  --lightpink:#EFDFDC;    /* testimonial band + footer bg */
  --gold:#976E30;
  --ink:#000000;
  --body:#333333;
  --white:#FFFFFF;
  --btn-grad:linear-gradient(90deg,var(--secondary) 0%,var(--primary) 100%);
  --btn-shadow:0px 0px 10px 0px rgba(0,0,0,.5);
  --container:1120px;
}

/* --- base (body MUST be 1rem = 16px so all em tokens resolve; trap #4) --- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Poppins",sans-serif;
  font-size:1rem;
  line-height:1.5;
  color:var(--body);
  background:#fff;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--container);margin-inline:auto;padding-inline:0}
@media(max-width:1024px){.wrap{padding-inline:30px}}
@media(max-width:767px){.wrap{padding-inline:20px}}

/* --- buttons (Elementor .elementor-button{line-height:1}; trap #2) --- */
.btn{
  display:inline-block;
  font-family:"Poppins",sans-serif;
  font-size:16px;
  font-weight:600;
  line-height:1;
  text-transform:uppercase;
  color:var(--white);
  background:var(--btn-grad);
  box-shadow:var(--btn-shadow);
  padding:10px 30px;
  border:none;
  border-radius:0;
  cursor:pointer;
  transition:transform .3s ease,filter .3s ease;
}
.btn:hover{background:var(--primary);transform:scale(1.06)}

/* =========================================================================
   HEADER  (position:fixed, z-index 500, #78132C, 90px)
   ========================================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:500;
  background:var(--maroon);
  height:90px;
}
.site-header .header-inner{
  position:relative;
  max-width:1350px;margin-inline:auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:0;gap:16px;
}
@media(max-width:1024px){.site-header .header-inner{padding-inline:30px}}
@media(max-width:767px){.site-header .header-inner{padding-inline:20px}}
.site-logo img{height:70px;width:auto}

.nav-desktop{display:flex;align-items:center;gap:34px}
.nav-desktop a{
  font-family:"Prata",serif;
  font-size:17.6px;font-weight:600;line-height:20px;
  text-transform:uppercase;color:var(--white);
  transition:color .25s ease;white-space:nowrap;
}
.nav-desktop a:hover,
.nav-desktop a.active{color:var(--secondary)}

.header-cta{flex:none}
.nav-toggle{display:none;background:none;border:none;padding:6px;cursor:pointer;color:var(--white)}
.nav-toggle svg{width:26px;height:26px;display:block;stroke:currentColor}
.nav-toggle:hover{color:var(--secondary)}

/* mobile dropdown menu — absolute, overlays content, no push (trap: menu absolute) */
.nav-mobile{
  position:absolute;top:100%;left:0;right:0;
  background:var(--maroon);
  max-height:0;overflow:hidden;
  transform:scaleY(0);transform-origin:top;
  transition:max-height .3s ease-out,transform .3s ease-out,box-shadow .3s ease-out;
}
.nav-mobile.open{
  max-height:340px;transform:scaleY(1);
  box-shadow:0 8px 16px rgba(0,0,0,.25);
  clip-path:inset(0 -16px -16px -16px);
}
.nav-mobile a{
  display:block;padding:14px 24px;
  font-family:"Prata",serif;font-size:16px;font-weight:600;
  text-transform:uppercase;color:var(--white);
  border-top:1px solid rgba(255,255,255,.12);
}
.nav-mobile a.active,.nav-mobile a:hover{color:var(--secondary)}

@media(max-width:1024px){
  .nav-desktop{display:none}
  /* hamburger sits exactly in the middle of the header */
  .nav-toggle{display:inline-flex;align-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}

/* =========================================================================
   STICKY SOCIAL SIDEBAR (fixed left, 3 icons, #78132C, 36px, radius 10%)
   ========================================================================= */
.social-sidebar{
  position:fixed;left:0;top:24vh;z-index:400;
  display:flex;flex-direction:column;gap:6px;
}
.social-sidebar a{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:var(--maroon);color:var(--white);
  border-radius:10%;
  transition:background .25s ease,color .25s ease;
}
.social-sidebar a:hover{background:var(--primary)}
.social-sidebar svg{width:18px;height:18px;fill:currentColor;display:block}

/* =========================================================================
   SUB-HERO  (services / gallery / contact) — bg orchid, 585px, script heading
   ========================================================================= */
.subhero{
  min-height:65vh;
  background:url("images/gallery-section-bg.jpg") center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.subhero h1{
  font-family:"Parisienne",cursive;
  font-size:48px;font-weight:600;line-height:48px;
  color:var(--white);
  text-shadow:0 0 5px rgba(0,0,0,.9);
  margin:0;padding:0 20px;
}
@media(max-width:767px){.subhero h1{font-size:44px}}

/* =========================================================================
   SECTION HEADING helpers (script + eyebrow + serif heading)
   ========================================================================= */
.script-heading{
  font-family:"Parisienne",cursive;
  font-size:41.6px;font-weight:700;line-height:41.6px;
  text-transform:capitalize;color:var(--maroon);
  margin:0;
}
.eyebrow{
  font-family:"Poppins",sans-serif;
  font-size:25.6px;font-weight:500;line-height:25.6px;
  text-transform:uppercase;margin:0;
}
.serif-heading{
  font-family:"Playfair Display SC",serif;
  font-size:32px;font-weight:400;line-height:32px;
  text-transform:capitalize;color:var(--ink);margin:0;
}
@media(max-width:1024px){
  .script-heading{font-size:38.4px;line-height:38.4px}
  .eyebrow{font-size:25.6px}
  .serif-heading{font-size:30px;line-height:30px}
}
@media(max-width:767px){
  .script-heading{font-size:35.2px;line-height:35.2px}
  .eyebrow{font-size:22.4px}
  .serif-heading{font-size:26px;line-height:28px}
}

/* =========================================================================
   FOOTER  (#EFDFDC, 4 columns flex space-between + copyright bar)
   ========================================================================= */
.site-footer{background:var(--lightpink)}
/* original footer row is width:80% of the viewport (→ 1152px at 1440, scales wider) */
.footer-inner{
  width:80%;margin-inline:auto;
  display:flex;flex-wrap:wrap;justify-content:space-between;
  padding:80px 0;gap:32px 0;
}
.footer-col-about{width:288px}
.footer-col-contact{width:230px}
.footer-col-hours{width:230px}
.footer-col-map{width:323px}

.footer-col h2{
  font-family:"Prata",serif;
  font-size:19.2px;font-weight:600;line-height:19.2px;
  text-transform:uppercase;color:var(--maroon);
  margin:0 0 18px;
}
.footer-col p{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;color:var(--body);margin:0}
.footer-about-text b{color:var(--maroon);font-weight:600}

.footer-contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.footer-contact-list li{display:flex;align-items:flex-start;gap:10px;font-family:"Poppins",sans-serif;font-size:16px;line-height:20px;color:var(--body)}
.footer-contact-list svg{width:20px;height:20px;flex:none;fill:var(--maroon);margin-top:1px}

.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social .social-btn{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--maroon);color:var(--white);
  transition:background .25s ease;
}
.footer-social .social-btn:hover{background:var(--primary)}
.footer-social .social-btn svg{width:20px;height:20px;fill:currentColor;display:block}

.footer-hours-text{margin-bottom:16px}
.seo-tag{display:block;font-family:"Poppins",sans-serif;font-size:16px;font-weight:600;line-height:20px;color:var(--maroon)}

.footer-col-map iframe{width:100%;height:280px;border:0;display:block}

.footer-copyright{
  background:var(--maroon);color:var(--white);
  text-align:center;padding:20px;
  font-family:"Poppins",sans-serif;font-size:16px;line-height:1.4;
}
.footer-copyright b{color:var(--secondary);font-weight:600}
.footer-copyright .cr-rest{white-space:nowrap}
@media(max-width:767px){.footer-copyright .cr-rest{display:block}}

@media(max-width:1024px){
  .footer-inner{width:100%;padding:70px 30px;gap:40px 40px}
  .footer-col-about,.footer-col-contact,.footer-col-hours,.footer-col-map{width:calc(50% - 20px)}
}
@media(max-width:767px){
  .footer-inner{flex-direction:column;align-items:flex-start;padding:60px 20px}
  .footer-col-about,.footer-col-contact,.footer-col-hours,.footer-col-map{width:100%}
}

/* =========================================================================
   HOME
   ========================================================================= */
/* --- hero --- */
.hero{
  position:relative;min-height:80vh;
  background:url("images/hero-banner.webp") center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  padding:110px 20px 40px;
}
@media(max-width:1024px){.hero{min-height:40vh}}
@media(max-width:767px){.hero{min-height:60vh}}
.hero-inner{
  width:800px;max-width:100%;
  background:rgba(255,255,255,.4);
  padding:40px 60px;text-align:center;
}
.hero-inner h1{
  font-family:"Parisienne",cursive;
  font-size:57.6px;font-weight:500;line-height:57.6px;
  color:var(--maroon);margin:0 0 14px;
}
.hero-inner p{
  font-family:"Poppins",sans-serif;
  font-size:17.6px;font-weight:400;line-height:26.4px;
  color:var(--ink);margin:0 0 22px;
}
@media(max-width:767px){
  .hero-inner{padding:30px 24px}
  .hero-inner h1{font-size:44px;line-height:44px}
  .hero-inner p{font-size:16px;line-height:24px}
}

/* --- our services (cards) --- */
.services-home{padding:80px 0}
.services-home .script-heading{text-align:center;margin-bottom:40px}
.cta-cards{display:flex;justify-content:space-between;gap:5px}
.cta-card{
  position:relative;flex:1;height:280px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.cta-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.cta-card:hover img{transform:scale(1.06)}
.cta-label{
  position:relative;z-index:1;
  font-family:"Poppins",sans-serif;font-size:16px;font-weight:600;line-height:1;
  text-transform:uppercase;color:var(--white);
  background:rgba(222,98,138,.65);
  padding:10px 30px;transition:background .3s ease;
}
.cta-card:hover .cta-label{background:var(--primary)}
@media(max-width:767px){
  .cta-cards{flex-direction:column;gap:20px}
  .cta-card{flex:none;height:300px}
}

/* --- about / event (two-column) --- */
.split-section{padding:80px 0}
.split-section.bordered-peach{border-top:5px solid var(--secondary);border-bottom:5px solid var(--secondary)}
.split-inner{display:flex;gap:40px;align-items:center}
.split-left{width:33%;max-width:360px;flex:none;text-align:center}
.split-left .eyebrow{color:var(--secondary);margin-bottom:14px}
.split-left .serif-heading{margin-bottom:22px}
.split-left .sub-label{font-family:"Poppins",sans-serif;font-size:16px;font-weight:600;text-transform:uppercase;color:var(--ink);margin:0}
.split-right{flex:1}
.about-body p{font-family:"Poppins",sans-serif;font-size:17.6px;font-weight:400;line-height:21.12px;color:var(--body);margin:0 0 14.4px}
.about-body b{color:var(--secondary);font-weight:600}
.event-body p{font-family:"Poppins",sans-serif;font-size:17.6px;font-weight:400;line-height:26.4px;color:var(--ink);margin:0 0 22px}
.event-body b{color:var(--secondary);font-weight:600}
@media(max-width:767px){
  .split-inner{flex-direction:column;gap:26px}
  .split-left{width:100%}
  .split-right{text-align:center}
  .about-body p,.event-body p{text-align:center}
  /* body copy is 1.1em on desktop, 1em on mobile in the original kit */
  .about-body p{font-size:16px;line-height:19.2px}
  .event-body p{font-size:16px;line-height:24px}
}

/* --- testimonial + gallery band --- */
.band{
  background:var(--lightpink);
  border-top:5px solid var(--white);border-bottom:5px solid var(--white);
}
.band-inner{display:flex;max-width:1440px;margin-inline:auto;min-height:239px}
.band-left{
  flex:0 0 70%;max-width:70%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 30px;
}
.band-left .eyebrow{color:var(--maroon);margin-bottom:8px}
.band-left .serif-heading{margin-bottom:20px}
.testimonial-carousel{
  position:relative;width:min(100%,680px);min-height:76px;
  margin:0 0 20px;overflow:hidden;
}
.testimonial-slide{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  opacity:0;transform:translateX(18px);pointer-events:none;
  transition:opacity .7s ease-in-out,transform .7s ease-in-out;
}
.testimonial-slide.active{opacity:1;transform:translateX(0);pointer-events:auto}
.testimonial-slide p{
  font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;
  color:var(--ink);margin:0 0 6px;
}
.testimonial-slide span{
  font-family:"Poppins",sans-serif;font-size:14px;font-weight:600;
  color:var(--maroon);
}
.band-right{
  flex:0 0 30%;max-width:30%;
  background:url("images/gallery-preview.webp") center/cover no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  position:relative;
}
.band-right .our-gallery{
  font-family:"Parisienne",cursive;font-size:41.6px;font-weight:700;
  color:var(--white);text-shadow:0 0 10px rgba(0,0,0,.9);margin:0;
}
@media(max-width:767px){
  .band-inner{flex-direction:column}
  .band-left,.band-right{flex:0 0 100%;max-width:100%}
  .band-right{padding:50px 20px}
  .testimonial-carousel{min-height:100px}
}
@media(prefers-reduced-motion:reduce){
  .testimonial-slide{transition:none}
}

/* =========================================================================
   SERVICES PAGE
   ========================================================================= */
.services-page{padding:0}
.pricing-mode{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:32px 0 0;
}
.pricing-mode-label{
  font-family:"Poppins",sans-serif;font-size:16px;font-weight:600;
  color:var(--ink);
}
.pricing-toggle{
  display:inline-flex;border:1px solid var(--maroon);
}
.pricing-toggle-btn{
  min-width:100px;border:0;border-right:1px solid var(--maroon);
  padding:10px 22px;background:var(--white);color:var(--maroon);
  font-family:"Poppins",sans-serif;font-size:16px;font-weight:600;line-height:1.4;
  text-transform:uppercase;cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.pricing-toggle-btn:last-child{border-right:0}
.pricing-toggle-btn.active{background:var(--btn-grad);color:var(--white)}
.pricing-toggle-btn:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.svc-category{padding:40px 0}
.svc-top{display:flex;gap:40px;align-items:flex-end}
.svc-top.img-right{flex-direction:row-reverse}
.svc-img{
  flex:0 0 334px;width:334px;height:280px;object-fit:cover;
  border:4px solid var(--secondary);align-self:flex-end;
}
.svc-panel{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column}
.svc-panel .cat-heading{text-align:center;margin:0 0 40px}
.cat-heading{
  font-family:"Prata",serif;font-size:25.6px;font-weight:600;line-height:25.6px;
  text-transform:capitalize;color:var(--maroon);
}
.svc-subheading{
  font-family:"Prata",serif;font-size:17.6px;font-weight:600;line-height:1.2;
  text-transform:uppercase;color:var(--primary);margin:18px 0 14px;
}
.svc-note{
  font-family:"Poppins",sans-serif;font-size:17.6px;font-weight:400;line-height:1.4;
  color:var(--ink);text-align:center;margin:14px 0 0;
}
.svc-bottom{margin-top:0}

/* price list */
.price-list{list-style:none;margin:0;padding:0}
.price-item{margin-bottom:10px}
.price-list .price-item:last-child{margin-bottom:0}
.price-row{display:flex;align-items:center;padding-bottom:10px}
.price-name{
  font-family:"Poppins",sans-serif;font-size:17.6px;font-weight:400;line-height:26.4px;
  text-transform:capitalize;color:var(--ink);white-space:nowrap;
}
.price-sep{flex:1;border-bottom:1px dotted var(--ink);margin:0 6px;transform:translateY(-3px)}
.price-val{
  font-family:"Poppins",sans-serif;font-size:19.36px;font-weight:400;line-height:29.04px;
  color:var(--ink);white-space:nowrap;
}
.price-desc{
  font-family:"Poppins",sans-serif;font-size:14.4px;font-weight:400;line-height:21.6px;
  color:var(--ink);margin:0;
}
@media(max-width:767px){
  .pricing-mode{flex-direction:column;gap:8px;padding-top:24px}
  .pricing-toggle{width:100%;max-width:260px}
  .pricing-toggle-btn{flex:1;min-width:0}
  .svc-top,.svc-top.img-right{flex-direction:column;gap:20px;align-items:stretch}
  .svc-img{width:100%;flex:none;height:auto;aspect-ratio:4/3;align-self:auto}
  .svc-panel .cat-heading{margin-bottom:18px}
  /* price fonts are em-based on the original and shrink at mobile */
  .price-name{font-size:16px;line-height:22px}
  .price-val{font-size:17.6px;line-height:24px}
  .price-row{padding-bottom:8px}
}

/* =========================================================================
   GALLERY PAGE  (JS masonry — items absolutely positioned by app.js)
   ========================================================================= */
.gallery-section{padding:40px 20px}
.gallery-masonry{position:relative;max-width:1120px;margin-inline:auto}
.gallery-item{position:absolute;overflow:hidden;cursor:pointer;display:block}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.05)}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);
  display:none;align-items:center;justify-content:center;
}
.lightbox.open{display:flex}
.lightbox img{max-width:90vw;max-height:86vh;object-fit:contain}
.lb-btn{position:absolute;background:none;border:none;color:#fff;cursor:pointer;font-size:40px;line-height:1;padding:12px;user-select:none}
.lb-close{top:10px;right:16px}
.lb-prev{left:10px;top:50%;transform:translateY(-50%);font-size:56px}
.lb-next{right:10px;top:50%;transform:translateY(-50%);font-size:56px}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.contact-body{padding:90px 0;text-align:center}
.contact-body h2{
  font-family:"Playfair Display SC",serif;font-size:28.8px;font-weight:600;line-height:1.25;
  color:var(--ink);margin:0 0 26px;
}
.contact-body p{
  font-family:"Poppins",sans-serif;font-size:17.6px;font-weight:400;line-height:26.4px;
  color:var(--ink);max-width:1120px;margin:0 auto 36px;
}
.contact-body p a{color:var(--secondary);font-weight:600}
@media(max-width:767px){.contact-body{padding:60px 0}.contact-body h2{font-size:24px}.contact-body p{font-size:16px}}