/* ============== TOKENS & RESET ============== */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  /* colors */
  --bg:#e7dae5;
  --panel:#e8dcf8;
  --ink:#2a1f2d;
  --muted:#6f5a68;
  --primary:#f7a8c4;      /* pink */
  --secondary:#b1c9ff;    /* baby blue */
  --accent:#b8efd7;       /* mint */
  --lemon:#ffef9e;        /* soft yellow */
  --outline:rgba(42,36,48,.07);

  /* layout */
  --maxw:1080px;
  --r:18px;
  --r-lg:26px;
  --shadow:0 8px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
}
html, body {
  height: 100%;
  margin: 0;
}
body{
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 ui-sans-serif, system-ui, Segoe UI, Roboto, Apple Color Emoji;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1
}
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--maxw);margin:auto;padding:0 20px}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--outline);border-radius:var(--r);box-shadow:var(--shadow)}
.p{padding:20px}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--secondary));font-weight:800}
.badge{display:inline-block;border:1px dashed var(--muted);padding:6px 10px;border-radius:999px;font-size:.85rem;color:var(--muted)}
.tag{display:inline-block;background:var(--lemon);padding:4px 10px;border-radius:999px;font-size:.85rem}

/* ============== HEADER/NAV ============== */
.topbar{
  position:sticky;top:0;z-index:50;
  background: linear-gradient(90deg, #f7b9cf 0%, #c7d7ff 100%);
  border-bottom:1px solid var(--outline)
  color: var(--ink);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--outline);
  bpoox-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.brand{display:inline-flex;gap:10px;align-items:center;padding:10px 0}
.logo{width:36px;height:36px}
.brand-title{font-weight:900;letter-spacing:.3px}
.mainnav a{margin-left:16px;font-weight:700;padding:10px 12px;border-radius:999px}
.mainnav a:hover{background:var(--accent)}
.hamburger{display:none;border:0;background:transparent;font-size:24px;padding:8px}
@media(max-width:900px){.mainnav{display:none}.hamburger{display:block}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:var(--lemon);padding:8px 10px;border-radius:8px}

/* ============== FOOTER ============== */
.site-footer{margin-top:60px;padding:40px 0 60px;border-top:1px solid var(--outline);background:linear-gradient(180deg, #ffe0ed 0%, #e8f8f0 100%)}
.site-footer h4{margin:0 0 6px}
.tiny{font-size:.85rem}.muted{color:var(--muted)}

/* ============== HOME / HERO ============== */
.hero{padding:40px 0 30px}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;border-radius:var(--r-lg);overflow:hidden}
.hero-left{padding:28px}
.hero-title{font-size:42px;line-height:1.05;margin:0 0 8px}
.hero-highlight{background:linear-gradient(90deg,var(--primary),var(--secondary));-webkit-background-clip:text;color:transparent}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.hero-cta{display:flex;gap:12px;margin-top:10px}
.hero-right{position:relative}
.hero-img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){.hero-wrap{grid-template-columns:1fr}.hero-right{order:-1}}

.tiles{padding:20px 0 10px}
.tile{padding:22px;transition:transform .2s ease, box-shadow .2s ease}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.1)}
.tile h3{margin:0 0 6px}

/* ============== GENERIC SECTIONS ============== */
.section{padding:40px 0}
.section-title{font-size:32px;margin:0 0 4px}
.section-sub{margin:0 0 20px;color:var(--muted)}

/* ============== MAIDS ============== */
.maid{overflow:hidden}
.maid-img{width:100%;height:220px;object-fit:cover;display:block;border-bottom:1px solid var(--outline)}
.maid-body{padding:16px}
.maid-name{margin:0 0 6px;font-size:20px;font-weight:900}

/* ============== MENU (media objects) ============== */
.menu-group{display:flex;flex-direction:column;gap:16px}
.menu-item{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:center;border:1px solid var(--outline);border-radius:14px;padding:12px;background:var(--panel)}
.menu-img{width:100%;height:auto;border-radius:12px;display:block}
.menu-name{font-weight:900;margin:0}
.menu-desc{margin:6px 0 0;color:var(--muted)}
.menu-price{font-weight:800;white-space:nowrap;padding-left:10px}
@media(max-width:600px){.menu-item{grid-template-columns:80px 1fr;grid-template-areas:"img name" "img desc" "img price"}
.menu-img{grid-area:img}.menu-name{grid-area:name}.menu-desc{grid-area:desc}.menu-price{grid-area:price}}

/* ============== SERVICES ============== */
.service-title{margin:0 0 6px;font-weight:900}
.service-price{margin-top:10px;display:inline-block}

/* ============== EVENTS ============== */
.countdown{font-weight:900;font-size:28px}
.event-banner{width:100%;height:180px;object-fit:cover;border-radius:12px;margin:-6px 0 10px}
.archive{margin:10px 0 0;padding-left:18px}

/* ============== FORMS ============== */
.form label{display:block;margin:10px 0}
.form input,.form textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--outline);background:#fff;outline:none
}
.form input:focus,.form textarea:focus{border-color:var(--secondary)}