/* Shared optimization CSS (extracted from inline blocks) */

/* Contrast-safe brand */
:root{ --brand:#0A8C9D; --brand-d:#087A8A; }
.btn.primary{ background:var(--brand); color:#fff }
a.cta{ background:var(--brand); color:#fff }

/* Complimentary consult popup */
.free-consult-modal__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:9998}
.free-consult-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999}
.free-consult-modal__dialog{background:#fff;border-radius:20px;box-shadow:0 25px 80px rgba(0,0,0,.35);max-width:620px;width:92%;padding:1.2rem 1.4rem;position:relative;overflow:hidden}
.free-consult-modal__bar{position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#ff4fa3 0%,#22d3ee 100%)}
.free-consult-modal__title{font-size:1.35rem;font-weight:800;letter-spacing:.2px;margin:.9rem 0 .45rem 0;text-align:center}
.free-consult-modal__body{font-size:1rem;line-height:1.6;margin:.25rem 0 1.1rem 0;color:#333;text-align:center}
.free-consult-modal__close{position:absolute;top:.6rem;right:.6rem;border:1px solid rgba(0,0,0,.15);background:#fff;border-radius:999px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;cursor:pointer}
.free-consult-modal__cta-wrap{display:flex;justify-content:center}
.free-consult-modal__cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;padding:.5rem .9rem;border-radius:999px;text-decoration:none;font-weight:700;color:#fff;background:linear-gradient(90deg,#ff4fa3 0%,#22d3ee 100%);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.free-consult-modal__cta:hover{transform:translateY(-1px)}
.free-consult-modal__pin{width:18px;height:18px;filter:invert(1) brightness(2)}

/* Awards badges */
.awards-band{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2rem}
.award-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border-radius:999px;font-weight:700;white-space:nowrap;margin:.25rem .35rem;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.award-badge:before{content:"🏆";font-size:1rem;line-height:1}
.badge--kao{background:linear-gradient(90deg,#ff4fa3 0%,#ff7fc8 100%);color:#fff}
.badge--wella{background:linear-gradient(90deg,#ffc24b 0%,#ff8a00 100%);color:#222}

/* Services premium gallery banner */
.services-gallery-banner{margin:2.5rem auto 0 auto;max-width:1100px;padding:1.2rem;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.12);background:linear-gradient(90deg,#ff4fa3 0%,#22d3ee 100%);position:relative;overflow:hidden}
.services-gallery-banner__inner{background:#fff;border-radius:16px;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.services-gallery-banner__text{font-weight:700;font-size:1.05rem}
.services-gallery-banner__cta{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:999px;border:0;text-decoration:none;background:#111;color:#fff;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.services-gallery-banner__cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.22)}
@media(max-width:640px){.services-gallery-banner__inner{flex-direction:column;align-items:flex-start}}

/* Gallery grid */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
@media(min-width:768px){.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}}
.gallery-grid .gallery-item img{width:100%;height:auto;display:block;border-radius:14px;cursor:default}


/* Mobile overflow fix: award badges and band */

.awards-band{display:flex;flex-wrap:wrap;gap:.5rem;max-width:1100px;margin:0 auto;padding:0 .75rem}
.award-badge{max-width:100%;white-space:normal;word-break:break-word;line-height:1.25}
@media(max-width:420px){
  .award-badge{font-size:.85rem;padding:.4rem .6rem}
}

/* Layout restore: awards band should not clamp page width */
.awards-band{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;width:100%;padding-inline:12px}
/* keep badges wrapping nicely on small screens */
.award-badge{max-width:100%;white-space:normal;word-break:break-word;line-height:1.25}
@media(max-width:420px){ .award-badge{font-size:.85rem;padding:.4rem .6rem} }

/* Restore gallery bubble styling */
.gallery-bubble{position:relative;margin:34px auto 18px auto;padding:16px 18px;border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.06);background:linear-gradient(180deg, rgba(240,244,255,.58), rgba(255,255,255,.9) 65%)}
.gallery-bubble h2{display:inline-block;margin:0 0 6px 0;padding:.35rem .8rem;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.06);font-size:1.25rem}
.gallery-bubble p{margin:.25rem 0 10px 0;color:#444}
/* subtle variants if present */
.bubble--blonding::before{content:'';position:absolute;inset:0;border-radius:22px;background:linear-gradient(90deg,#ffd1e8,#e7f3ff);opacity:.35;pointer-events:none}
.bubble--precision::before{content:'';position:absolute;inset:0;border-radius:22px;background:linear-gradient(90deg,#d8ffe6,#f0f9ff);opacity:.35;pointer-events:none}
.bubble--correction::before{content:'';position:absolute;inset:0;border-radius:22px;background:linear-gradient(90deg,#e2d8ff,#f0ecff);opacity:.35;pointer-events:none}


/* Gallery bubble palette to match Services */
.gallery-bubble{
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(250,252,255,0.92) 55%, rgba(255,255,255,0.92) 100%);
  border: 1px solid rgba(0,0,0,0.04);
}
/* Color tints similar to Services sections */
.bubble--blonding::before{
  background: linear-gradient(90deg, rgba(255,175,204,0.35) 0%, rgba(206,229,255,0.35) 100%);
}
.bubble--precision::before{
  background: linear-gradient(90deg, rgba(185,255,214,0.38) 0%, rgba(226,246,255,0.38) 100%);
}
.bubble--correction::before{
  background: linear-gradient(90deg, rgba(198,181,255,0.38) 0%, rgba(226,246,255,0.34) 100%);
}
/* Ensure ::before is visible behind content */
.gallery-bubble::before{content:'';position:absolute;inset:0;border-radius:22px;pointer-events:none}


/* Minor tweak: Instagram banner CTA spacing */
.insta-banner .services-gallery-banner__inner{align-items:center}


/* Premium photo-bubbles for gallery thumbnails */
.gallery-grid .gallery-item{
  background: linear-gradient(180deg, rgba(246,249,255,.85) 0%, rgba(255,255,255,.96) 100%);
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-grid .gallery-item:hover{ transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.10) }
.gallery-grid .gallery-item picture, 
.gallery-grid .gallery-item img{ border-radius: 14px; display:block; width:100%; height:auto }


/* Gallery page: center headings to match other pages */
.gallery-page h1{ text-align:center; margin: 0.25rem auto 0.5rem; }
.gallery-page h1 + p{ text-align:center; max-width: 820px; margin: 0.25rem auto 1.5rem; color:#444; }

/* Colorized photo-bubbles per section */
.bubble--balayage .gallery-item{
  background: linear-gradient(180deg, rgba(255,236,245,.85) 0%, rgba(255,255,255,.96) 100%);
  border-color: rgba(255,64,128,.06);
}
.bubble--blonding .gallery-item{
  background: linear-gradient(180deg, rgba(255,228,242,.85) 0%, rgba(236,246,255,.96) 100%);
  border-color: rgba(255,105,180,.06);
}
.bubble--precision .gallery-item{
  background: linear-gradient(180deg, rgba(221,255,238,.85) 0%, rgba(240,250,255,.96) 100%);
  border-color: rgba(0,200,140,.06);
}
.bubble--correction .gallery-item{
  background: linear-gradient(180deg, rgba(230,220,255,.85) 0%, rgba(245,248,255,.96) 100%);
  border-color: rgba(120,85,255,.06);
}