/* =========================
   Vars: navbar height
   ========================= */
:root { --nav-h: 90px; }                 /* desktop */
@media (max-width: 992px){ :root { --nav-h: 72px; } }   /* tablet */
@media (max-width: 576px){ :root { --nav-h: 64px; } }   /* phones */

/* Push page content below fixed navbar */
.page-wrap { padding-top: calc(var(--nav-h) + 16px); }
@supports (padding-top: env(safe-area-inset-top)) {
  .page-wrap { padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 16px); }
}

/* =========================
   Cards
   ========================= */
.card {
  border: 0;
  background: var(--black-10);
  border-radius: 1rem;
}
.card-section { position: relative; padding-bottom:10px }    /* positioning for center title */

.img-cover {
  width: 100%;
  height: 280px;                         /* consistent image height */
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.brand-logo {
  width: 150px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Title centered between the two cards */
.card-title-between {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  font-weight: 400;                      /* script looks best at 400 */
  background: rgba(255,255,255,0.7);     /* contrast over content */
  padding: 0.5rem 1.5rem;
  border-radius: 0.5rem;
  pointer-events: none;                  /* let clicks pass through */
  backdrop-filter: blur(2px);
  font-family: var(--font-script);
  letter-spacing: 0;
  text-transform: none;
  line-height: 0.95;
  font-size: clamp(42px, 6vw, 88px);
}

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 767.98px){
  .img-cover { height: 200px; }
  .brand-logo { width: 120px; }
  .welcome-banner { height: 40vh; }
  .welcome-content h1 { font-size: 2rem; }
}

/* ========================================================================
   Eyelash.html (shared card look)
   ======================================================================= */
.lash-card{
  max-width: min(1020px, 92vw);
  border-radius: 20px;
  background:#fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.lash-card .card-body{
  padding: clamp(18px, 2vw, 32px) clamp(16px, 2vw, 36px);
}
.lash-card .row{ --bs-gutter-x: 1.25rem; --bs-gutter-y: 1rem; }

.lash-figure{
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 8px;
  border: 4px solid #d9d9d9;
  background: #f4f4f4;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  position: relative;
  z-index: 1;
}
.lash-figure img{ width: 100%; height: 100%; object-fit: cover; }

.lash-title{ margin: 0 0 .6rem; }
.lash-desc{ line-height: 1.75; max-width: 60ch; }

.lash-split{ position: relative; padding-top: .5rem; }
.lash-split::before{
  content: attr(data-watermark);
  position: absolute;
  inset: 0 auto auto 12%;
  font-family: var(--font-script, "Lavishly Yours", cursive);
  font-size: clamp(68px, 17vw, 230px);
  line-height: 1;
  color: #000;
  opacity: .045;
  pointer-events: none;
  transform: translateY(-10%);
  z-index: 0;
}

.section-soft .container > .lash-card + .lash-card{ margin-top: 1.5rem; }
.section-soft .container > .lash-card:nth-of-type(1){ margin-left:0 !important; margin-right:auto !important; }
.section-soft .container > .lash-card:nth-of-type(2){ margin-left:auto !important; margin-right:auto !important; }
.section-soft .container > .lash-card:nth-of-type(3){ margin-left:0 !important; margin-right:auto !important; }

@media (max-width: 991.98px){
  .lash-split::before{ left: 8%; font-size: clamp(80px, 22vw, 180px); }
}
@media (max-width: 575.98px){
  .lash-figure{ padding: 6px; border-width: 3px; aspect-ratio: 4 / 3; }
  .lash-desc{ max-width: none; }
}

/* ========================================================================
   BioGel slider — MOBILE-FIRST, TOUCH + SNAP (replaces old rules)
   ======================================================================= */
.slider-wrapper{
  width: 100%;
  overflow: hidden;
}

#imageSlider{
  display: flex;
  gap: 14px;                       /* visual spacing between circles */
  padding: 8px 2px;
  overflow-x: auto;                /* scroll container */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;   /* snap on drag */
  overscroll-behavior-x: contain;  /* keep page from rubber-banding */
  scroll-behavior: smooth;
}
#imageSlider::-webkit-scrollbar{ display:none; } /* hide scrollbar on mobile */

.slide{
  flex: 0 0 auto;
  width: var(--size, 88px);
  height: var(--size, 88px);
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--clr-white);
  scroll-snap-align: center;
}
.slide img{ width: 100%; height: 100%; object-fit: cover; }

/* scale up on larger screens */
@media (min-width: 576px){ .slide{ --size: 104px; } }
@media (min-width: 768px){ .slide{ --size: 118px; } }
@media (min-width: 992px){ .slide{ --size: 126px; } }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  #imageSlider{ scroll-behavior: auto; }
}

/* ========================================================================
   Spin CTA (Book a consultation)
   ======================================================================= */
:root{
  --accent:#E1D0BF;
  --text:#2b2b2b;
  --shadow:0 12px 24px rgba(0,0,0,.18);
  --h:56px;
}

.spin-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  height:var(--h);
  padding:0 24px 0 14px;
  border-radius:999px;
  background:#fff;
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  box-shadow:var(--shadow);
  transition:width .45s ease, padding .45s ease, transform .2s ease, box-shadow .2s ease;
  will-change: width, padding;
}
.spin-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.22); }

.spin-cta__spinner{
  position:absolute; inset:0;
  margin:auto; width:40px; height:40px; border-radius:50%;
  border:4px solid transparent;
  border-top-color:var(--accent);
  border-left-color:var(--accent);
  opacity:0; pointer-events:none;
  transform:rotate(0deg);
}

.spin-cta.loading{
  width:var(--h);
  padding:0; justify-content:center;
}
.spin-cta.loading .spin-cta__label{ opacity:0; margin-left:-6px; }
.spin-cta.loading .spin-cta__icon{ opacity:0; transform:translateX(-8px); }
.spin-cta.loading .spin-cta__spinner{ opacity:1; animation:spin 1s linear infinite; }

@keyframes spin{ to{ transform:rotate(360deg); } }

/* Optional: page bg accent toggler */
body.has-yellow-bg{ background:var(--accent); }


/* ========================================================================
   Profile
   ======================================================================= */

    /* Profile card styling */
.contact-card {
  border: 1px solid #f0f0f0;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Avatar */
.ci-avatar {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 16px; /* square with rounded edges */
  border: 4px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Text content */
.ci-text {
  line-height: 1.6;
  font-size: 1rem;
  color: #333;
}


  /* ========================================================================
   End Profile
   ======================================================================= */

   /* ========================================================================
   Permanent make up
   ======================================================================= */

      :root{
    --brand:#E1D0BF;
    --ink:#2C2C2C;
    --muted:#6F6F6F;
    --bg-soft:#FFFAF6;
    --card:#FFFFFF;
    --ring:rgba(0,0,0,.06);
  }

  .section-soft{
    background:var(--bg-soft);
    padding:clamp(24px,4vw,48px) 16px;
  }

  .pricing-split {
  position: relative;
  display: block;         /* instead of grid */
  max-width: 800px;       /* optional: narrower for nice readability */
  margin: 0 auto;
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
  padding: clamp(20px,3vw,32px);
  overflow: hidden;
}


  /* Watermark */
  .pricing-split::after{
    content:attr(data-watermark);
    position:absolute;
    inset:auto auto -10px 16px;
    font-size:clamp(48px,12vw,140px);
    font-weight:800;
    letter-spacing:.04em;
    color:#000;
    opacity:.04;
    pointer-events:none;
    user-select:none;
    line-height:1;
    transform:translateY(20%);
  }

  .pricing-title{
    margin:0;
    font-weight:800;
    line-height:1.05;
    color:var(--ink);
    font-size:clamp(28px,4.6vw,56px);
  }

  .price-list{list-style:none;margin:0;padding:0;}
  .price-list>li{list-style:none;}

  .service-card{
    background:#fff;
    border-radius:20px;
    border:1px solid rgba(0,0,0,.06);
    padding:clamp(16px,2.6vw,28px);
  }

  /* Section blocks */
  .svc-block + .svc-block{margin-top:18px; padding-top:18px; border-top:1px dashed rgba(0,0,0,.08);}
  .svc-block h3{
    margin:0 0 8px;
    font-size:clamp(18px,2.4vw,22px);
    line-height:1.2;
    color:var(--ink);
    font-weight:700;
  }
  .svc-block p{margin:0;color:var(--muted);font-size:16px;line-height:1.65;}

  /* Bullets */
  .svc-bullets{margin:8px 0 0 0; padding:0; list-style:none;}
  .svc-bullets li{
    display:flex; gap:10px; align-items:flex-start;
    padding:6px 0; color:var(--ink);
    font-size:16px; line-height:1.55;
  }
  .svc-bullets li::before{
    content:"•"; color:var(--brand); font-weight:900; line-height:1.2; margin-top:2px;
  }

  /* Chips / key facts */
  .svc-chips{
    margin-top:10px;
    display:grid; gap:10px;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  }
  .svc-chip{
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    padding:12px 14px;
    box-shadow:0 1px 0 var(--ring);
    background:#fff;
  }
  .svc-chip strong{font-size:18px; color:var(--ink);}
  .svc-chip small{display:block; margin-top:4px; color:var(--muted);}

  /* Numbered steps */
  .svc-steps{counter-reset:step; margin:8px 0 0 0; padding:0; list-style:none;}
  .svc-steps li{
    counter-increment:step;
    display:grid; grid-template-columns:36px 1fr; gap:10px;
    align-items:start; padding:8px 0;
  }
  .svc-steps li::before{
    content:counter(step);
    display:inline-grid; place-items:center;
    width:28px; height:28px; border-radius:999px;
    background:var(--brand); color:#3b2a21; font-weight:800;
  }
  .svc-steps strong{color:var(--ink);}

  /* CTA buttons */
  .svc-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
  .btn-primary, .btn-ghost{
    appearance:none; border-radius:999px; padding:10px 16px; font-weight:700;
    text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
    border:1.5px solid transparent; transition:.2s ease;
    font-size:15px;
  }
  .btn-primary{background:var(--brand); color:#3b2a21; border-color:var(--brand);}
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.10);}
  .btn-ghost{background:#fff; color:var(--ink); border-color:rgba(0,0,0,.12);}
  .btn-ghost:hover{background:#fafafa;}

  /* Responsive */
  @media (max-width: 900px){
    .pricing-split{grid-template-columns:1fr;}
    .pricing-split::after{left:auto; right:12px; transform:none;}
  }

.gallery-row {
  display: flex;
  gap: 20px;              /* space between images */
  justify-content: center; /* center them */
  flex-wrap: nowrap;      /* ✅ keeps all in one row */
  overflow-x: auto;       /* ✅ adds horizontal scroll if too many images */
  padding-bottom: 10px;
}

.gallery-item {
  flex: 0 0 auto;         /* don’t shrink */
  width: 280px;           /* fixed width (adjust as you like) */
  aspect-ratio: 1 / 1;    /* make square */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}






   /* ========================================================================
   End Permanent make up
   ======================================================================= */

    /* ========================================================================
   EyeLash
   ======================================================================= */

  /* prettier pricing */
  .svc-chips{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  }
  .svc-chip{
    position:relative;
    border-radius:18px;
    padding:16px 18px;
    background:
      linear-gradient(#fff,#fff) padding-box,
      linear-gradient(135deg, var(--brand), #f2b9a2 60%, #fbe9d6) border-box;
    border:1.5px solid transparent;
    box-shadow:0 8px 26px rgba(0,0,0,.08);
    transition:.25s ease;
  }
  .svc-chip:hover{ transform:translateY(-3px); box-shadow:0 12px 34px rgba(0,0,0,.12); }
  .svc-chip strong{
    display:block; font-size:clamp(26px,4.6vw,42px); line-height:1; letter-spacing:-.02em; color:var(--ink);
  }
  .svc-chip small{ display:block; margin-top:6px; color:var(--muted); font-weight:600; }

  /* refill list → pills (keep your existing <ul>, just add this class) */
  .price-refills{
    margin-top:10px !important; padding:0; list-style:none;
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .price-refills li{ margin:0; }
  .price-refills li:first-child{
    flex-basis:100%; font-weight:800; color:var(--ink); margin-bottom:2px;
  }
  .price-refills li:not(:first-child){
    padding:6px 10px; border-radius:999px;
    background:rgba(225,208,191,.18); border:1px solid rgba(0,0,0,.08);
    font-weight:700; color:#3b2a21;
  }

  /* Fancy service title */
.svc-title{
  text-align:center;
  margin: 0 0 .75rem;
  line-height:1.1;
  font-family: var(--font-heading);           /* Poppins per your tokens */
  position: relative;
  animation: titleRise .6s ease-out both;
}
.svc-title-main{
  display:block;
  font-weight:800;
  letter-spacing:.04em;
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  background: linear-gradient(90deg, #b1863b, #e6c77a, #b1863b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                         /* gradient text */
  text-shadow: 0 2px 10px rgba(0,0,0,.08);
}
/* glow underline “pill” */
.svc-title::after{
  content:"";
  display:block;
  width: clamp(140px, 22vw, 280px);
  height: 6px;
  margin: .6rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
              rgba(193,154,107,.12),
              rgba(193,154,107,.55),
              rgba(193,154,107,.12));
  box-shadow: 0 6px 16px rgba(193,154,107,.35);
  animation: titleRise .7s .05s ease-out both;
}
/* small tagline */


@keyframes titleRise{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: none; }
}


    /* ========================================================================
   End EyeLash
   ======================================================================= */

   /* ========================================================================
   Waxing
   ======================================================================= */

   /* neat, responsive price rows */
  .svc-pricegrid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:12px;
    margin-top:10px;
  }
  .svc-line{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:12px 14px; border-radius:14px; background:#fff;
    border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 0 rgba(0,0,0,.06);
  }
  .svc-line b{ color:var(--ink); font-weight:700; }
  .svc-line span{ color:#3b2a21; font-weight:900; letter-spacing:.01em; }



   /* ========================================================================
   End Waxing
   ======================================================================= */


    /* ========================================================================
   Logo
   ======================================================================= */


    /* ========================================================================
   Logo
   ======================================================================= */