:root{
  --bg:#fffdfb;
  --text:#1b1b1b;
  --muted:#656565;
  --brand:#d46c8f;
  --brand-dark:#ad5773;
  --card:#fff;
  --border:#eee;
  --border-strong:#e6e6e6;
  --ring: rgba(212,108,143,.35);
  --radius:.8rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 10px 24px rgba(212,108,143,.10);
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
h1,h2,h3{ letter-spacing:.2px; }
h1{ font-family:'Playfair Display', Georgia, serif; font-weight:700; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ───────── Header / Nav ───────── */
.site-header{
  position:sticky; top:0; z-index:100; display:flex; align-items:center;
  gap:.75rem; padding:.7rem 1rem; background:#fff; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.2) blur(6px);
}
.logo{ display:inline-flex; align-items:center; gap:.5rem; }
.logo img{ width:36px; height:36px; border-radius:10px; }
.nav{ margin-left:auto; display:flex; gap:1rem; align-items:center; }
.nav a{ padding:.5rem .25rem; border-bottom:2px solid transparent; transition:border-color .2s ease; }
.nav a.active, .nav a:focus, .nav a:hover{ border-color:var(--brand); }
.menu-btn{
  margin-left:auto; font-size:1.25rem; line-height:1; background:transparent; border:1px solid var(--border);
  padding:.45rem .6rem; border-radius:.6rem; display:none; cursor:pointer;
}

/* ───────── Layout & spacing ───────── */
/* Use padding-inline so left/right padding is easy to control on mobile */
.container{
  max-width:1100px;
  margin:0 auto;
  padding-top:2rem;
  padding-bottom:2rem;
  padding-inline: clamp(20px, 6vw, 32px);
}
.section{ padding:2rem 0; }
.section-title{ font-family:'Playfair Display', Georgia, serif; font-size:clamp(1.6rem, 3vw, 2rem); margin:.5rem 0 1.25rem; }
.muted{ color:var(--muted); }

/* Buttons */
.btn{
  display:inline-block; color:#fff; background:var(--brand);
  padding:.8rem 1.05rem; border-radius:.7rem;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); background:var(--brand-dark); box-shadow:0 8px 24px var(--ring); }
.btn.primary{ box-shadow:0 6px 18px var(--ring); }

/* Hero */
.hero{ padding:0; }
.hero--gradient{
  background:
    radial-gradient(1200px 400px at 50% -10%, #ffd7e6 0%, rgba(255,215,230,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fff5f8 70%, #fffdfb 100%);
}
/* Ensure hero has side padding too */
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center;
  padding-top:3.5rem;
  padding-bottom:2.5rem;
  padding-inline: clamp(20px, 6vw, 32px);
}
.hero-copy h1{ margin:0 0 .5rem; font-size:clamp(2.1rem,5vw,3.2rem); }
.hero-copy p{ margin:0 0 1rem; color:var(--muted); }
.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap; }

/* Cards / grids */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding: clamp(14px, 3.5vw, 20px);
  box-shadow: var(--shadow-sm);
}
.card-hover{ transition:transform .2s ease, box-shadow .2s ease; }
.card-hover:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.card-media{ height:140px; border-radius:.8rem; background:linear-gradient(135deg,#ffe5ef,#fff); border:1px solid var(--border); margin-bottom:.75rem; }

/* Carousel */
.carousel{ position:relative; overflow:hidden; border-radius:1rem; border:1px solid var(--border); background:#fff; box-shadow:0 15px 40px rgba(212,108,143,.12); }
.carousel-track{ display:flex; transition:transform .5s ease; will-change:transform; }
.carousel-slide{ min-width:100%; user-select:none; }
.carousel-slide img{ display:block; width:100%; height:420px; object-fit:cover; }
.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:999px; border:none; cursor:pointer;
  background:#fff; color:#000; font-size:20px; line-height:40px; text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}
.carousel-nav.prev{ left:10px; }
.carousel-nav.next{ right:10px; }
.carousel-dots{ position:absolute; z-index:3; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.carousel-dots button{
  width:9px; height:9px; border-radius:50%; border:none; background:rgba(0,0,0,.25); cursor:pointer;
}
.carousel-dots button[aria-current="true"]{ background:#fff; }

/* Logos row */
.logos-wrap{ background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.logos-row{ display:flex; gap:36px; align-items:center; justify-content:center; padding:22px 0; opacity:.9; }
.logos-row img{ height:28px; width:auto; filter:grayscale(100%); opacity:.75; transition:opacity .2s ease, filter .2s ease; }
.logos-row img:hover{ opacity:1; filter:grayscale(0%); }

/* Gallery thumbnails (other pages) */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.gallery-grid img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:.75rem; border:1px solid var(--border); display:block; }

/* ───────── Modern form controls ───────── */
.form{ display:grid; gap:1rem; }
.field{ display:grid; gap:.35rem; }
.label{ font-weight:600; font-size:.95rem; }
.control{
  width:100%;
  padding:.8rem .9rem;
  border:1px solid var(--border-strong);
  border-radius:.7rem;
  background:#fff;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.control:focus{
  outline:none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}
textarea.control{ resize: vertical; min-height: 140px; }

/* nicer dropdown (custom arrow) */
.select{ position: relative; }
.select .control{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right: 2.5rem; /* room for arrow */
  background-image:
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right .7rem center;
  background-size: 1.1rem;
}
.control::placeholder{ color:#9a9a9a; }

/* Helper text */
.help{ color:var(--muted); font-size:.92rem; }

/* ───────── Lightbox / slideshow (open only) ───────── */
dialog#lightbox{
  border:none; padding:0; background:rgba(0,0,0,.9);
  max-width:none; width:100%; height:100%; position:fixed; inset:0; z-index:10000;
}
dialog#lightbox::backdrop{ background:rgba(0,0,0,.6); }
dialog#lightbox[open]{ display:flex; align-items:center; justify-content:center; }
dialog#lightbox[open] img{
  display:block; max-width:min(95vw,1200px); max-height:80vh;
  margin:0 auto; border-radius:.75rem; box-shadow:0 6px 24px rgba(0,0,0,.4); z-index:10001;
}
.lightbox-close{
  position:fixed; top:1rem; right:1rem; font-size:2rem; background:#fff; color:#000; border:none;
  width:2.5rem; height:2.5rem; line-height:2.5rem; border-radius:50%; cursor:pointer; z-index:10002;
}
.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%);
  border:none; background:rgba(255,255,255,.92); width:3rem; height:3rem; border-radius:50%;
  cursor:pointer; font-size:1.6rem; line-height:3rem; text-align:center; user-select:none; box-shadow:0 4px 16px rgba(0,0,0,.25); z-index:10002;
}
.lightbox-prev{ left:1rem; } .lightbox-next{ right:1rem; }
.lightbox-caption{
  position:fixed; bottom:2.5rem; left:50%; transform:translateX(-50%);
  color:#fff; background:rgba(0,0,0,.55); padding:.4rem .6rem; border-radius:.5rem; max-width:90vw; text-align:center; z-index:10002;
}
.lightbox-counter{
  position:fixed; bottom:1rem; left:50%; transform:translateX(-50%);
  color:#fff; background:rgba(0,0,0,.4); padding:.25rem .5rem; border-radius:.4rem; font-size:.9rem; z-index:10002;
}

/* ───────── Footer ───────── */
.site-footer{
  text-align:center; color:var(--muted);
  border-top:1px solid var(--border); margin-top:2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-inline: clamp(20px, 6vw, 32px);
}
.site-footer .socials{ display:flex; gap:1rem; align-items:center; justify-content:center; margin-top:.75rem; }
.site-footer .socials a{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border);
  border-radius:50%; background:#fff; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.site-footer .socials a:hover{ transform:translateY(-2px); border-color:var(--brand); box-shadow:0 6px 18px rgba(212,108,143,.15); }
.site-footer .socials img{ width:20px; height:20px; object-fit:contain; filter:grayscale(100%) opacity(.8); transition:filter .2s ease; }
.site-footer .socials a:hover img{ filter:none; opacity:1; }

/* ───────── Mobile nav panel ───────── */
@media (max-width: 768px){
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; }
  .nav{
    position:fixed; top:56px; left:0; right:0;
    display:none; flex-direction:column; gap:.25rem;
    background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
    padding:.5rem clamp(16px, 6vw, 24px); z-index:9999;
  }
  body.nav-open .nav{ display:flex; }
  .nav a{ padding:.8rem .25rem; border-bottom:0; border-radius:.5rem; }
  .nav a:hover, .nav a.active{ background:#fff4f8; border-color:transparent; }

  .hero-inner{ grid-template-columns:1fr; }
  .carousel-slide img{ height: 300px; }
}
@media (max-width:900px){
  .grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .grid-3{ grid-template-columns:1fr; }
  .carousel-slide img{ height:240px; }
}

.carousel-dots {
  display: none !important;
}


/* ───────── FINAL SAFETY OVERRIDE (wins against old rules) ───────── */
/* If some older CSS still overrides, this forces healthy side padding on mobile */
@media (max-width: 768px){
  .container,
  .hero-inner,
  .site-footer{
    padding-inline: clamp(20px, 6vw, 32px) !important;
  }
}