:root{
  --bg:#fff7fb;
  --card:#ffffff;
  --text:#1d1b1f;
  --muted:#6a6470;
  --brand:#e84aa6;
  --brand2:#ffb3d9;
  --line:#efe2ea;
  --shadow:0 18px 45px rgba(29,27,31,.12);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: var(--bg);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1120px, calc(100% - 40px)); margin:0 auto}

.header{position:sticky;top:0;z-index:50;background:rgba(255,247,251,.92);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.headerInner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brandMark{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);box-shadow:0 14px 30px rgba(232,74,166,.18);position:relative}
.brandMark:after{content:"";position:absolute;inset:10px;border-radius:12px;border:2px solid rgba(255,255,255,.75)}
.brandName{line-height:1.05}
.brandName strong{display:block;font-size:16px;letter-spacing:.2px}
.brandName span{display:block;font-size:12px;color:var(--muted)}

.nav{display:flex;align-items:center;gap:14px}
.nav a{font-size:14px;color:var(--muted);padding:10px 12px;border-radius:999px}
.nav a.active{color:var(--text);background:rgba(232,74,166,.12)}
.cta{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:10px 14px;font-weight:600;font-size:14px;background:linear-gradient(135deg, var(--brand) 0%, #ff6cbc 50%, var(--brand2) 100%);color:#fff;box-shadow:0 16px 35px rgba(232,74,166,.25);border:0;cursor:pointer}

.menuBtn{display:none;border:1px solid var(--line);background:rgba(255,255,255,.9);border-radius:14px;padding:10px 12px;font-weight:600;cursor:pointer}
.mobileNav{display:none;border-top:1px solid var(--line);padding:10px 0 16px 0}
.mobileNav a{display:block;padding:12px 10px;border-radius:14px;color:var(--muted)}
.mobileNav a.active{color:var(--text);background:rgba(232,74,166,.10)}

.hero{padding:48px 0 28px 0}
.heroGrid{display:grid;grid-template-columns: 1.1fr .9fr;gap:22px;align-items:stretch}
.heroCard{background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.heroBody{padding:26px}
.kicker{display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border-radius:999px;background:rgba(232,74,166,.10);color:var(--text);font-size:13px;width:fit-content}
.h1{margin:14px 0 10px 0;font-size:44px;letter-spacing:-.6px;line-height:1.06}
.lead{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 18px 0}
.heroActions{display:flex;gap:12px;flex-wrap:wrap}
.secondary{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:10px 14px;font-weight:600;font-size:14px;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--text)}
.heroMedia{min-height:320px;display:flex;align-items:stretch;justify-content:stretch}
.imagePlaceholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:320px;padding:18px;text-align:center;color:rgba(106,100,112,.9);background:repeating-linear-gradient(45deg, rgba(239,226,234,.65), rgba(239,226,234,.65) 10px, rgba(255,255,255,.95) 10px, rgba(255,255,255,.95) 20px);border-left:1px solid var(--line)}

.section{padding:18px 0 44px 0}
.sectionTitle{font-size:22px;margin:0 0 12px 0}
.grid3{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px}
.card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 26px rgba(29,27,31,.08);padding:18px}
.card h3{margin:0 0 8px 0;font-size:16px}
.card p{margin:0;color:var(--muted);line-height:1.7;font-size:14px}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(232,74,166,.08);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  letter-spacing:.1px;
  line-height:1;
  white-space:nowrap;
}

.badge:hover{
  background:rgba(232,74,166,.12);
}

@media (max-width: 900px){
  .badges{gap:8px}
  .badge{font-size:12px;padding:7px 11px}
}
.badgeIntro{
  margin:10px 0 0 0;
  font-size:13px;
  color:var(--muted);
}

.pageHeader{padding:34px 0 12px 0}
.pageHeader h1{margin:0;font-size:34px;letter-spacing:-.4px}
.pageHeader p{margin:10px 0 0 0;color:var(--muted);line-height:1.7}

.split{display:grid;grid-template-columns: .9fr 1.1fr;gap:18px;align-items:start}
.mediaBox{height:380px;border-radius:18px;border:1px solid var(--line);overflow:hidden;background:repeating-linear-gradient(45deg, rgba(239,226,234,.65), rgba(239,226,234,.65) 10px, rgba(255,255,255,.95) 10px, rgba(255,255,255,.95) 20px);display:flex;align-items:center;justify-content:center;text-align:center;color:rgba(106,100,112,.9);padding:16px}

.serviceList{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px}

.formWrap{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
label{font-size:13px;color:var(--muted)}
input[type="text"], input[type="email"], textarea{width:100%;border-radius:16px;border:1px solid var(--line);padding:12px 12px;font-size:15px;outline:none;background:#fff}
textarea{min-height:140px;resize:vertical}
.formRow{display:flex;gap:12px}
.formRow .field{flex:1}
.smallNote{font-size:12px;color:var(--muted);line-height:1.6;margin-top:10px}

.footer{border-top:1px solid var(--line);padding:22px 0 28px 0;color:var(--muted)}
.footerGrid{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer strong{color:var(--text)}
.footer a{color:var(--text)}
.copy{margin-top:14px;font-size:12px}

@media (max-width: 900px){
  .heroGrid{grid-template-columns:1fr}
  .imagePlaceholder{border-left:0;border-top:1px solid var(--line)}
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .serviceList{grid-template-columns:1fr}
  .h1{font-size:36px}
  .nav{display:none}
  .menuBtn{display:inline-flex}
  .mobileNav{display:block}
  .formRow{flex-direction:column}
}
.heroMedia{
  align-items:stretch;
}

.hero-image{
  width:100%;
  height:100%;
  min-height:320px;
  border-radius:0;
  overflow:hidden;
}

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

.mediaBox img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
object-position: center bottom;
}