:root {
  --ivory: #fffaf2;
  --peach: #ffd6c2;
  --blush: #ff7aa8;
  --rose: #f43f7f;
  --gold: #e6b85c;
  --teal: #14b8a6;
  --emerald: #064e3b;
  --white: #ffffff;
  --charcoal: #143c36;
  --muted: #6a7474;
  --shadow: 0 24px 70px rgba(244, 91, 147, .15);
  --teal-shadow: 0 22px 60px rgba(15, 118, 110, .16);
  --font-heading: "Outfit", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-soft: "Nunito Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  color: var(--charcoal);
  background: var(--ivory);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  max-width: 100%;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 143, 171, .24), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(255, 216, 194, .7), transparent 28%),
    radial-gradient(circle at 85% 86%, rgba(15, 118, 110, .12), transparent 32%),
    var(--ivory);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
img.image-failed { opacity: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.image-wrap { position: relative; }
.image-error {
  min-height: 320px;
  background: linear-gradient(135deg, #ffd6c2, #fffaf2, #d9fff7);
}
.image-error img { opacity: 0; }
.image-error::after {
  content: "Makeup Pandeglang";
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 24px;
  color: rgba(6, 78, 59, .45);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 3rem);
  text-align: center;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
  height: auto;
  overflow: visible;
}
h1 { max-width: 700px; font-size: clamp(58px, 7.4vw, 112px); line-height: .88; color: var(--emerald); }
h2 { font-size: clamp(34px, 4.5vw, 56px); color: var(--emerald); }
h3 { font-size: clamp(28px, 3vw, 44px); color: var(--emerald); }
p { margin: 0; color: var(--muted); }
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .72s ease, transform .72s ease;
}
.words-ready .word-reveal {
  opacity: 1;
  transform: translateY(0);
}

.container { width: min(1160px, calc(100% - 34px)); margin-inline: auto; }
.section { position: relative; padding: clamp(64px, 8vw, 110px) 0; }
.eyebrow {
  margin: 0 0 14px;
  color: var(--rose);
  font-size: .78rem;
  font-family: var(--font-soft);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lead { max-width: 660px; font-size: 1.08rem; }
.micro-copy { margin-top: 14px; color: var(--rose); font-weight: 900; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px clamp(16px, 4vw, 42px);
  background: rgba(255, 250, 242, .72);
  border-bottom: 1px solid rgba(217, 164, 65, .16);
  backdrop-filter: blur(18px);
  transition: box-shadow .25s ease, background .25s ease, padding .25s ease;
}
.site-header.is-scrolled,
.site-header.nav-open {
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 46px rgba(15, 118, 110, .12);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.logo-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 22px 50% 50% 22px;
  background: linear-gradient(135deg, var(--peach), var(--white));
  border: 1px solid rgba(217, 164, 65, .55);
  overflow: hidden;
}
.logo-shell::after {
  content: "MP";
  position: absolute;
  color: var(--emerald);
  font-family: var(--font-heading);
  font-weight: 800;
}
.logo-shell img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand strong { display: block; color: var(--emerald); line-height: 1.1; font-weight: 800; }
.brand small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.2; }
.main-nav {
  justify-self: center;
  display: flex;
  gap: clamp(14px, 2vw, 25px);
  color: rgba(36, 48, 51, .78);
  font-family: var(--font-soft);
  font-size: .92rem;
  font-weight: 700;
}
.main-nav a:hover { color: var(--rose); }
.header-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-soft);
  font-weight: 800;
  line-height: 1.12;
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}
.header-cta,
.btn-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--rose), var(--blush) 45%, var(--gold));
  box-shadow: 0 14px 34px rgba(244, 91, 147, .26);
  position: relative;
  overflow: visible;
}
.btn-primary::after {
  content: none;
}
.btn-primary:hover,
.header-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(244, 91, 147, .34); filter: saturate(1.06); }
.btn-soft {
  color: var(--emerald);
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(217, 164, 65, .35);
}
.btn-wide { width: 100%; margin-top: 24px; }
.nav-toggle {
  display: none;
  justify-self: end;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(217, 164, 65, .35);
  border-radius: 999px;
  background: var(--white);
}
.nav-toggle span { display: block; width: 20px; height: 2px; margin: 5px auto; background: var(--emerald); }

.hero {
  display: grid;
  align-items: center;
  padding: clamp(112px, 12vw, 150px) 0 clamp(64px, 8vw, 96px);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(340px, .86fr);
  gap: clamp(32px, 6vw, 78px);
  align-items: center;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy .lead { margin-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 28px; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 10px; max-width: 760px; }
.trust-badges span {
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--emerald);
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(217, 164, 65, .28);
  box-shadow: 0 10px 26px rgba(217, 164, 65, .1);
  font-size: .88rem;
  font-weight: 900;
}
.hero-visual {
  position: relative;
  min-height: 560px;
  height: min(68vh, 680px);
  border-radius: 42px 110px 42px 110px;
  overflow: hidden;
  background: #ddd;
  border: 8px solid rgba(255, 255, 255, .82);
  box-shadow: var(--shadow);
}
.hero-photo {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  object-position: center top;
  display: block;
  transform: scale(1.2);
  transform-origin: center top;
}
.look-photo::before,
.decor-photo::before {
  content: "Makeup Pandeglang";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  color: rgba(6, 78, 59, .26);
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  text-align: center;
}
.look-photo img,
.decor-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-badge,
.hero-card {
  position: absolute;
  z-index: 3;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(217, 164, 65, .28);
  box-shadow: var(--teal-shadow);
  backdrop-filter: blur(14px);
}
.hero-badge {
  top: 22px;
  left: 22px;
  padding: 11px 15px;
  border-radius: 999px;
  color: var(--emerald);
  font-family: var(--font-soft);
  font-weight: 800;
}
.hero-card {
  right: 22px;
  bottom: 22px;
  max-width: min(280px, calc(100% - 44px));
  padding: 16px 18px;
  border-radius: 24px;
  color: var(--rose);
  font-family: var(--font-heading);
  font-size: 1.65rem;
  line-height: 1.05;
}

.flower {
  position: absolute;
  width: 190px;
  height: 190px;
  pointer-events: none;
  opacity: .55;
}
.flower::before,
.flower::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 2px solid rgba(244, 91, 147, .32);
  border-radius: 62% 38% 62% 38%;
}
.flower::after {
  transform: rotate(62deg);
  border-color: rgba(217, 164, 65, .36);
}
.flower-a { left: 4vw; top: 118px; transform: rotate(-20deg); }
.flower-b { right: 5vw; bottom: 42px; transform: rotate(18deg); }

.curve-bottom::after,
.curve-top::before {
  content: "";
  position: absolute;
  left: -5%;
  width: 110%;
  height: 74px;
  background: var(--ivory);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.curve-bottom::after { bottom: -38px; }
.curve-top::before { top: -38px; transform: rotate(180deg); }

.credibility { background: linear-gradient(135deg, rgba(255, 216, 194, .6), rgba(255, 143, 171, .16)); }
.cred-wrap {
  display: grid;
  grid-template-columns: .95fr 1fr;
  gap: 34px;
  align-items: center;
  padding: clamp(26px, 4vw, 46px);
  border-radius: 40px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(217, 164, 65, .22);
  box-shadow: var(--shadow);
}
.cred-items {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cred-items article {
  padding: 20px;
  border-radius: 30px;
  background: linear-gradient(145deg, var(--white), rgba(255, 216, 194, .45));
  box-shadow: 0 15px 36px rgba(217, 164, 65, .1);
}
.cred-items strong { color: var(--rose); }
.cred-items span { display: block; margin-top: 18px; color: var(--emerald); font-weight: 800; }
.cred-items ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.cred-items li {
  position: relative;
  margin: 7px 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: .92rem;
}
.cred-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), var(--gold));
}
.social-proof {
  padding: clamp(72px, 8vw, 120px) 0;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 143, 171, .22), transparent 28%),
    radial-gradient(circle at 88% 75%, rgba(20, 184, 166, .18), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,214,194,.38), rgba(217,255,247,.46));
}
.social-proof-wrap {
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 40px;
  align-items: center;
}
.proof-copy {
  margin: 0;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 36px;
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(217, 164, 65, .22);
  box-shadow: 0 20px 64px rgba(15, 118, 110, .1);
  backdrop-filter: blur(18px);
}
.proof-copy p:not(.eyebrow) { margin-top: 16px; max-width: 540px; }
.rating-card {
  display: grid;
  gap: 8px;
  margin-top: 26px;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,216,194,.62));
  border: 1px solid rgba(230,184,92,.32);
}
.rating-card strong { color: var(--gold); letter-spacing: .1em; font-size: 1.25rem; }
.rating-card span { color: var(--emerald); font-weight: 800; }
.proof-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.proof-card {
  min-height: 150px;
  border-radius: 28px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(217, 164, 65, .24);
  box-shadow: 0 18px 52px rgba(244, 63, 127, .12);
  backdrop-filter: blur(16px);
}
.proof-card strong {
  display: block;
  color: var(--rose);
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
}
.proof-card span { color: var(--emerald); font-weight: 900; }
.marquee {
  margin-top: 46px;
  overflow: hidden;
  border-block: 1px solid rgba(230,184,92,.24);
  background: rgba(255,255,255,.42);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
}
.marquee span {
  padding: 18px 20px;
  color: var(--emerald);
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3vw, 2rem);
  white-space: nowrap;
}

.look-grid,
.decor-grid,
.booking-grid,
.quote-grid,
.faq-grid,
.contact-grid {
  display: grid;
  grid-template-columns: .92fr 1fr;
  gap: clamp(30px, 6vw, 78px);
  align-items: center;
}
.reverse { grid-template-columns: 1fr .92fr; }
.look-photo,
.decor-photo {
  position: relative;
  margin: 0;
  min-height: 520px;
  height: 600px;
  overflow: hidden;
  background: var(--peach);
  box-shadow: var(--shadow);
}
.organic-left { border-radius: 36% 64% 56% 44% / 44% 42% 58% 56%; }
.organic-right { border-radius: 62% 38% 44% 56% / 42% 56% 44% 58%; }
.traditional-photo { border-radius: 46px 140px 46px 110px; }
.look-copy {
  position: relative;
  padding: 20px;
}
.look-copy::after,
.decor-copy::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  top: -10px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 143, 171, .22), transparent 70%);
}
.look-copy p,
.decor-copy p { margin-top: 22px; max-width: 650px; }
.check-list,
.price-card ul {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.check-list li,
.price-card li {
  position: relative;
  padding-left: 28px;
  margin: 9px 0;
  color: var(--muted);
}
.check-list li::before,
.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--gold));
}
.text-link {
  display: inline-flex;
  margin-top: 28px;
  color: var(--teal);
  font-weight: 800;
  border-bottom: 2px solid var(--gold);
}
.peach-band { background: linear-gradient(180deg, transparent, rgba(255, 216, 194, .46), transparent); }

.traditional {
  background: linear-gradient(135deg, rgba(15, 118, 110, .12), rgba(255, 143, 171, .12));
}
.traditional-card {
  padding: clamp(28px, 4vw, 56px);
  border-radius: 38px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(217, 164, 65, .28);
  box-shadow: var(--teal-shadow);
  backdrop-filter: blur(14px);
  height: auto;
  overflow: visible;
}
.traditional-card p:not(.eyebrow) { margin-top: 20px; }

.decor { background: rgba(255, 255, 255, .58); }
.decor-grid { grid-template-columns: 1fr .95fr; }
.decor-photo {
  height: 570px;
  border-radius: 38px 120px 38px 120px;
}
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pill-list span {
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--emerald);
  background: linear-gradient(135deg, rgba(255, 216, 194, .72), rgba(255, 255, 255, .9));
  border: 1px solid rgba(217, 164, 65, .22);
  font-weight: 900;
}

.section-head { max-width: 850px; margin-bottom: 42px; }
.services { background: linear-gradient(180deg, rgba(255, 216, 194, .36), rgba(255, 250, 242, .92)); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  perspective: 1200px;
}
.service-card {
  position: relative;
  min-height: 340px;
  padding: 0;
  border-radius: 32px;
  background: var(--peach);
  border: 1px solid rgba(217, 164, 65, .2);
  box-shadow: 0 16px 40px rgba(255, 143, 171, .1);
  transition: transform .24s ease, box-shadow .24s ease;
  overflow: hidden;
  transform-style: preserve-3d;
}
.service-card.wide,
.service-card.tall { grid-column: auto; grid-row: auto; }
.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.service-card:nth-child(1) img,
.service-card:nth-child(2) img,
.service-card:nth-child(5) img,
.service-card:nth-child(6) img,
.service-card:nth-child(10) img { object-position: center center; }
.service-card:nth-child(3) img,
.service-card:nth-child(4) img,
.service-card:nth-child(8) img,
.service-card:nth-child(9) img { object-position: center center; }
.service-card:nth-child(7) img { object-position: center top; }
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 18%, rgba(6,78,59,.18) 48%, rgba(6,78,59,.86)),
    radial-gradient(circle at 20% 10%, rgba(255, 143, 171, .22), transparent 34%);
}
.service-card > div {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;
  color: var(--white);
  transform: translateZ(32px);
}
.service-card span {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(135deg, var(--rose), var(--gold));
  font-size: .76rem;
  font-family: var(--font-soft);
  font-weight: 800;
}
.service-card h3 { color: var(--white); text-shadow: 0 2px 12px rgba(0,0,0,.22); font-size: clamp(26px, 2vw, 36px); line-height: 1.05; margin: 10px 0; }
.service-card p { margin: 0; color: rgba(255,255,255,.9); font-size: 16px; line-height: 1.6; }
.service-card:hover { box-shadow: 0 28px 70px rgba(244, 63, 127, .24); }
.service-card:hover img { transform: scale(1.08); }
.why-works {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 143, 171, .18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,214,194,.28));
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  perspective: 1200px;
}
.why-card {
  position: relative;
  min-height: 270px;
  padding: 28px;
  border-radius: 34px;
  overflow: hidden;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(230,184,92,.28);
  box-shadow: 0 18px 54px rgba(20,184,166,.09);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  backdrop-filter: blur(16px);
}
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 143, 171, .12), transparent 44%),
    radial-gradient(circle at 88% 18%, rgba(217, 164, 65, .22), transparent 22%);
  pointer-events: none;
}
.why-card span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--white);
  background: linear-gradient(135deg, var(--rose), var(--gold));
  font-family: var(--font-soft);
  font-weight: 800;
}
.why-card h3 {
  position: relative;
  margin-top: 28px;
  font-size: clamp(1.55rem, 2.3vw, 2.1rem);
}
.why-card p {
  position: relative;
  margin-top: 14px;
  color: var(--muted);
}
.why-card:hover {
  border-color: rgba(244,63,127,.36);
  box-shadow: 0 28px 70px rgba(244,63,127,.16);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-inline: clamp(0px, 2vw, 24px);
}
.price-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 38px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .96), rgba(255, 216, 194, .32));
  border: 1px solid rgba(217, 164, 65, .24);
  box-shadow: 0 18px 54px rgba(15, 118, 110, .09);
  transition: transform .24s ease, box-shadow .24s ease;
  transform-style: preserve-3d;
}
.price-card:nth-child(4),
.price-card:nth-child(5) { grid-column: span 1; }
.price-card:hover { transform: translateY(-9px); box-shadow: var(--shadow); }
.price-card > span {
  width: max-content;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(135deg, var(--teal), var(--gold));
  font-weight: 800;
  font-size: .8rem;
}
.price-card h3 { margin-top: 18px; }
.price-card strong {
  display: block;
  margin-top: 16px;
  color: var(--rose);
  font-size: 1.7rem;
}
.price-card .btn { width: 100%; margin-top: auto; }
.package-cta {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,214,194,.72), rgba(255,250,242,.9), rgba(217,255,247,.68));
  border: 1px solid rgba(230,184,92,.22);
}
.package-cta p { color: var(--emerald); font-weight: 900; }

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.timeline li {
  position: relative;
  margin: 0 0 16px;
  padding: 22px 22px 22px 82px;
  border-radius: 28px;
  background: var(--white);
  border: 1px solid rgba(217, 164, 65, .2);
  box-shadow: 0 12px 34px rgba(15, 118, 110, .08);
  color: var(--emerald);
  font-weight: 800;
}
.timeline span {
  position: absolute;
  left: 22px;
  top: 18px;
  color: var(--rose);
  font-family: var(--font-heading);
  font-size: 1.7rem;
}

.testimonials { background: linear-gradient(135deg, rgba(255, 143, 171, .13), rgba(15, 118, 110, .08)); }
.quotes { display: grid; gap: 16px; }
.quote {
  margin: 0;
  padding: 26px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 14px 40px rgba(244, 91, 147, .1);
  border: 1px solid rgba(230,184,92,.2);
}
.quote span { display: block; margin-bottom: 10px; color: var(--gold); letter-spacing: .08em; }
.quote blockquote {
  margin: 0;
  color: var(--emerald);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  line-height: 1.2;
}
.quote figcaption { margin-top: 12px; color: var(--rose); font-weight: 800; }

.faq { background: rgba(255, 255, 255, .56); }
.faq-list { display: grid; gap: 12px; }
.faq-item {
  border-radius: 24px;
  background: var(--white);
  border: 1px solid rgba(217, 164, 65, .22);
  box-shadow: 0 10px 30px rgba(15, 118, 110, .06);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 22px;
  color: var(--emerald);
  font-weight: 800;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { padding: 0 22px 22px; }

.contact { background: linear-gradient(180deg, rgba(255, 216, 194, .28), var(--ivory)); }
.contact-card,
.map-frame {
  border-radius: 38px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(217, 164, 65, .24);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.final-cta {
  padding: 90px 0;
  background: linear-gradient(135deg, rgba(255,214,194,.72), rgba(255,250,242,.96), rgba(217,255,247,.72));
}
.final-cta-card {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 16px;
  padding: clamp(34px, 6vw, 70px);
  border-radius: 42px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(230,184,92,.26);
  box-shadow: var(--shadow);
}
.final-cta-card p:not(.eyebrow) { max-width: 680px; }
.final-cta-card .btn { margin-top: 8px; }
.contact-card { padding: clamp(28px, 4vw, 48px); }
.contact-card address { margin: 22px 0; color: var(--muted); font-style: normal; }
.contact-card p { margin-top: 10px; }
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.contact-actions .btn { min-height: 46px; }
.map-frame {
  width: 100%;
  height: 460px;
  min-height: 460px;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(217,164,65,.28);
  box-shadow: 0 24px 70px rgba(20,60,54,.12);
  background: #fff;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.site-footer {
  position: relative;
  padding: 72px 0 0;
  color: var(--white);
  background: linear-gradient(135deg, var(--emerald), var(--teal));
  overflow: hidden;
}
.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
}
.site-footer::before {
  width: 320px;
  height: 320px;
  left: -100px;
  top: -120px;
  background: radial-gradient(circle, rgba(244,63,127,.35), transparent 68%);
}
.site-footer::after {
  width: 280px;
  height: 280px;
  right: 5vw;
  bottom: -140px;
  background: radial-gradient(circle, rgba(230,184,92,.42), transparent 70%);
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 4vw, 42px);
  align-items: start;
}
.site-footer p,
.site-footer a,
.footer-bottom { color: rgba(255, 255, 255, .78); }
.site-footer .brand strong { color: var(--white); }
.site-footer .brand small { color: rgba(255,255,255,.78); }
.site-footer h3 {
  margin: 0 0 14px;
  color: var(--peach);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
}
.site-footer nav a,
.footer-links a,
.footer-article-list a,
.footer-contact p { display: block; margin: 8px 0; }
.footer-links,
.footer-featured,
.footer-contact { min-width: 0; }
.footer-article-list {
  display: grid;
  gap: 10px;
}
.footer-article-list a {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: .94rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.footer-article-list a:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.site-footer a { transition: color .2s ease, transform .2s ease; }
.site-footer a:hover { color: var(--gold); transform: translateX(3px); }
.footer-brand { margin-bottom: 16px; }
.site-footer .logo-shell {
  background: var(--white);
  border-color: rgba(255,255,255,.72);
  border-radius: 999px;
}
.footer-about p { max-width: 360px; }
.footer-cta {
  padding: 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}
.footer-cta .btn { width: 100%; margin-top: 10px; }
.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 52px;
  padding: 20px clamp(18px, 4vw, 42px);
  border-top: 1px solid rgba(255,255,255,.16);
}

.floating-wa,
.back-top {
  position: fixed;
  z-index: 40;
  border: 0;
  box-shadow: 0 18px 42px rgba(244, 91, 147, .24);
}
.floating-wa {
  right: 18px;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-width: 120px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(135deg, var(--emerald), var(--teal));
  font-weight: 800;
}
.back-top {
  right: 28px;
  bottom: 88px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(135deg, var(--rose), var(--gold));
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.back-top.show { opacity: 1; pointer-events: auto; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.cursor-glow {
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,122,168,.2), rgba(20,184,166,.11) 42%, transparent 70%);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  transition: opacity .25s ease;
}

@keyframes organicFloat {
  0%, 100% { transform: translateY(0); border-radius: 44% 56% 38% 62% / 62% 36% 64% 38%; }
  50% { transform: translateY(-14px); border-radius: 56% 44% 52% 48% / 44% 58% 42% 56%; }
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes shimmer {
  0%, 55% { transform: translateX(0) rotate(18deg); opacity: 0; }
  65% { opacity: 1; }
  100% { transform: translateX(480%) rotate(18deg); opacity: 0; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 900px) {
  .social-proof-wrap,
  .proof-stats { grid-template-columns: 1fr; }
}

@media (max-width: 1120px) {
  .hero-grid,
  .look-grid,
  .reverse,
  .decor-grid,
  .booking-grid,
  .quote-grid,
  .faq-grid,
  .contact-grid,
  .cred-wrap,
  .social-proof-wrap { grid-template-columns: 1fr; }
  .hero-visual { min-height: 560px; height: min(68vh, 650px); }
  .cred-items { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-card,
  .price-card:nth-child(4),
  .price-card:nth-child(5) { grid-column: auto; }
  .traditional-card { width: 100%; }
}

@media (max-width: 860px) {
  h1 { font-size: clamp(48px, 10vw, 72px); line-height: .92; }
  .site-header { grid-template-columns: 1fr auto; padding: 12px 16px; }
  .logo-shell { width: 52px; height: 52px; flex-basis: 52px; }
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    inset: 74px 16px auto;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 12px;
    border-radius: 26px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px; }
  .header-cta { display: none; }
  .hero { padding-top: 116px; }
  .hero-visual { min-height: 500px; height: 500px; }
  .hero-photo { min-height: 500px; object-position: center center; transform: scale(1.04); }
  .look-photo,
  .decor-photo { height: 500px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 320px; }
  .pricing-grid { grid-template-columns: 1fr; padding-inline: 0; }
  .price-card,
  .price-card:nth-child(4),
  .price-card:nth-child(5) { grid-column: auto; }
  .proof-stats,
  .why-grid { grid-template-columns: 1fr; }
  .why-card { min-height: 230px; }
}

@media (max-width: 560px) {
  .section { padding: 78px 0; }
  .flower { display: none; }
  .curve-bottom::after,
  .curve-top::before { left: 0; width: 100%; }
  h1 { font-size: clamp(46px, 14vw, 58px); line-height: .94; }
  .hero-actions .btn,
  .trust-badges span { width: 100%; }
  .hero-visual { min-height: 430px; height: 430px; border-radius: 30px; }
  .hero-photo { min-height: 430px; object-position: center center; transform: scale(1.04); }
  .hero-badge { top: 14px; left: 14px; }
  .hero-card { right: 14px; bottom: 14px; font-size: 1.35rem; }
  .cred-items,
  .services-grid,
  .proof-stats,
  .why-grid { grid-template-columns: 1fr; }
  .service-card.wide,
  .service-card.tall { grid-column: auto; grid-row: auto; }
  .look-photo,
  .decor-photo { height: 420px; border-radius: 32px; }
  .traditional-card { width: 100%; }
  .map-frame { height: 460px; min-height: 460px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { display: grid; justify-content: start; }
  .floating-wa {
    right: 14px;
    bottom: 18px;
    min-width: 104px;
    height: 48px;
    font-size: .9rem;
  }
}


/* SEO pages */
.breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; color:var(--muted); font-size:.92rem; }
.breadcrumbs a { color:var(--teal); font-weight:800; }
.seo-page, .blog-page, .article-page { background: var(--ivory); }
.seo-hero { padding-top: clamp(126px, 13vw, 170px); }
.seo-hero-grid { display:grid; grid-template-columns: minmax(0,1fr) minmax(320px,.84fr); gap:clamp(30px,5vw,72px); align-items:center; }
.seo-hero-photo { height:min(62vh,620px); min-height:420px; border-radius:44px 120px 44px 120px; overflow:hidden; border:8px solid rgba(255,255,255,.82); box-shadow:var(--shadow); }
.seo-hero-photo img, .blog-card img, .article-cover img { width:100%; height:100%; object-fit:cover; }
.seo-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.glass-block, .link-panel, .article-sidebar, .article-cta { padding:clamp(24px,4vw,40px); border-radius:34px; background:rgba(255,255,255,.76); border:1px solid rgba(217,164,65,.24); box-shadow:0 18px 54px rgba(15,118,110,.09); backdrop-filter:blur(14px); }
.glass-block p { margin-top:14px; }
.service-link-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.service-link-grid a { display:grid; gap:10px; min-height:180px; padding:24px; border-radius:32px; background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,216,194,.42)); border:1px solid rgba(217,164,65,.25); box-shadow:0 16px 44px rgba(244,63,127,.09); }
.service-link-grid span, .blog-card span { color:var(--rose); font-weight:900; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.service-link-grid strong { color:var(--emerald); font-family:var(--font-heading); font-size:1.4rem; line-height:1.05; }
.article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.featured-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.blog-card { overflow:hidden; border-radius:32px; background:rgba(255,255,255,.78); border:1px solid rgba(217,164,65,.24); box-shadow:0 16px 48px rgba(15,118,110,.08); }
.blog-card img { height:220px; }
.blog-card div { padding:22px; }
.blog-card time { display:block; margin:8px 0 10px; color:var(--muted); font-size:.88rem; }
.blog-card h3 { font-size:1.45rem; }
.blog-card p { margin-top:12px; }
.center-action { display:flex; justify-content:center; margin-top:30px; }
.blog-filter { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.blog-filter input, .blog-filter select { min-height:48px; border-radius:999px; border:1px solid rgba(217,164,65,.28); padding:0 18px; background:rgba(255,255,255,.9); font:inherit; color:var(--charcoal); }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:36px; align-items:start; }
.article-main { max-width:820px; }
.article-main h1 { font-size:clamp(42px,6vw,72px); line-height:.96; }
.article-main h2 { margin-top:34px; font-size:clamp(28px,3.2vw,42px); }
.article-main p { margin-top:14px; font-size:1.04rem; }
.article-cover { height:min(58vh,520px); margin:30px 0; border-radius:38px 110px 38px 90px; overflow:hidden; box-shadow:var(--shadow); }
.article-cta { margin:34px 0; background:linear-gradient(135deg,rgba(255,216,194,.75),rgba(255,255,255,.9),rgba(217,255,247,.72)); }
.article-sidebar { position:sticky; top:110px; display:grid; gap:12px; }
.article-sidebar h2 { font-size:1.7rem; }
.article-sidebar a { color:var(--emerald); font-weight:800; border-bottom:1px solid rgba(217,164,65,.24); padding-bottom:10px; }
.article-faq { margin-top:34px; }
@media (max-width:1120px){ .seo-hero-grid,.article-layout{grid-template-columns:1fr}.service-link-grid,.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-sidebar{position:static}.seo-content{grid-template-columns:1fr} }
@media (max-width:700px){ .service-link-grid,.featured-grid,.article-grid{grid-template-columns:1fr}.seo-hero-photo{min-height:360px;height:420px}.blog-card img{height:210px}.article-cover{height:340px}.blog-filter input,.blog-filter select{width:100%} }
