:root{
  --ink:#121315; --charcoal:#1d1f22; --gold:#F5D547; --amber:#e9c316;
  --paper:#fffdf7; --mist:#f8f7f3; --accent:#0E4E86;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.65}
h1,h2,h3{font-family:'Playfair Display',serif;color:var(--charcoal);line-height:1.2}

.container{max-width:1160px;margin:auto;padding:0 1.2rem}
a{color:var(--accent);text-decoration:none}

/* Buttons */
.btn{
  display:inline-block;background:var(--charcoal);color:#fff;
  padding:.85rem 1.2rem;border-radius:.6rem;font-weight:600;transition:.25s;
  box-shadow:0 8px 20px rgba(0,0,0,.08)
}
.btn:hover{transform:translateY(-2px)}
.btn.gold{background:var(--gold);color:#1a1a1a}
.btn.gold:hover{background:var(--amber)}
.btn.ghost{background:transparent;border:2px solid var(--charcoal);color:var(--charcoal)}

/* Header & nav */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{height:44px;width:auto;display:block}    /* brand sizing */
.wordmark-img{height:32px;width:auto;display:block}
#menu{display:flex;gap:.8rem;align-items:center}
#menu a{padding:.5rem .6rem;border-radius:.4rem;font-weight:600;color:#222}
#menu a:hover{background:rgba(0,0,0,.04)}
.mobile-toggle{display:none;font-size:1.5rem;border:0;background:transparent}

/* Language pill */
.lang-pill{
  display:inline-flex;gap:6px;align-items:center;
  border:1px solid rgba(0,0,0,.15);border-radius:999px;
  padding:2px 6px;background:#fff;margin-left:.6rem;
  font:500 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}
.lang-pill button{border:0;background:transparent;padding:4px 8px;border-radius:999px;cursor:pointer}
.lang-pill button.active{background:#111;color:#fff}
.lang-pill button:focus-visible{outline:2px solid #007aff;outline-offset:2px}

/* Hero */
.hero{position:relative;min-height:82vh;display:grid;place-items:center;background-size:cover;background-position:center}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.35))}
.hero-inner{position:relative;text-align:center;color:#fff;padding:3rem 0}
.hero h1{font-size:clamp(2.2rem,5vw,4rem);text-shadow:0 10px 30px rgba(0,0,0,.45)}
.hero p{max-width:760px;margin:1rem auto 2rem;font-size:1.1rem;opacity:.95}
.cta{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* Sections & layout */
.section{padding:4rem 0}
.alt{background:var(--mist)}
.split{
  display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;
  margin-top:3rem;margin-bottom:2rem
}
.split img{width:100%;border-radius:1rem;box-shadow:0 18px 50px rgba(0,0,0,.12)}
.kicker{text-transform:uppercase;letter-spacing:.22em;color:#666;font-size:.8rem;margin-bottom:.7rem}
.lead{font-size:1.1rem;color:#333}
.ticks{padding-left:1rem}
.ticks li{margin:.4rem 0;list-style:'✦  '}
.stack{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.7rem}

/* Cards & grids */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.cards .card{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:1rem;overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.06);display:flex;flex-direction:column
}
.card img{width:100%;height:180px;object-fit:cover}
.card .pad{padding:1rem}
.meta{display:flex;gap:.5rem;flex-wrap:wrap;color:#555;font-size:.92rem}
.meta span{background:var(--mist);border:1px solid rgba(0,0,0,.06);padding:.25rem .6rem;border-radius:999px}

/* Accordion */
.accordion details{background:#fff;border:1px solid rgba(0,0,0,.08);padding:1rem;border-radius:.8rem;margin:.6rem 0}
.accordion summary{cursor:pointer;font-weight:700}
.map{margin-top:1rem;width:100%;border-radius:.8rem;box-shadow:0 10px 24px rgba(0,0,0,.08)}

/* Pricing */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:1rem}
.pricecard{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:1rem;padding:1.2rem}
.price{font-size:2rem;font-weight:800;margin:.3rem 0}
.note{color:#555;margin-top:.5rem}

/* Testimonials */
.testimonials .quote{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:1rem;
  padding:1rem;display:flex;flex-direction:column;gap:.6rem
}
.testimonials .quote img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.testimonials blockquote{margin:0;color:#333}

/* Gallery */
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:.7rem}

/* Contact */
.contact-grid{grid-template-columns:1.2fr 1fr}
form.card{
  background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:1rem;
  padding:1rem;display:grid;gap:.7rem
}
label{display:grid;gap:.25rem;font-weight:600}
input,textarea{border:1px solid #ddd;border-radius:.6rem;padding:.75rem;font:inherit}
.contact-info{display:grid;gap:.6rem}

/* Footer */
.site-footer{background:#0f0f0f;color:#ddd;padding:2rem 0}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;align-items:center}
.brandline{display:flex;align-items:center;gap:.6rem}
.site-footer .brandline img{border-radius:50%} /* round footer logo */
.footlinks a{color:#fff;display:inline-block;margin:.15rem .4rem}
.copy{opacity:.85;text-align:right}

/* Dropdown nav */
.menu{display:flex;gap:.8rem;align-items:center}
.menu .drop{position:relative}
.menu .drop > summary{
  list-style:none;cursor:pointer;padding:.5rem .6rem;border-radius:.4rem;
  font-weight:700;color:#222
}
.menu .drop > summary::-webkit-details-marker{display:none}
.menu .drop[open] > summary, .menu .drop > summary:hover{background:rgba(0,0,0,.04)}
.menu .drop ul{
  position:absolute;top:100%;left:0;background:#fff;border:1px solid rgba(0,0,0,.08);
  border-radius:.6rem;box-shadow:0 12px 28px rgba(0,0,0,.08);padding:.4rem;
  display:grid;gap:.1rem;min-width:220px;z-index:60
}
.menu .drop ul li a{display:block;padding:.5rem .6rem;border-radius:.4rem;color:#222}
.menu .drop ul li a:hover{background:rgba(0,0,0,.04)}

/* CTA band */
.band{
  background:linear-gradient(90deg,var(--gold),#ffe27a);padding:2rem;border-radius:1rem;
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  box-shadow:0 20px 40px rgba(245,213,71,.25)
}

/* Responsive */
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  #menu{
    display:none;position:absolute;left:0;right:0;top:64px;background:#fff;
    padding:1rem;border-bottom:1px solid rgba(0,0,0,.06)
  }
  #menu.show{display:grid;grid-template-columns:1fr;gap:.35rem}
  .mobile-toggle{display:block}
  .contact-grid{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr}
  .copy{text-align:left}
  .wordmark-img{height:24px}

  /* Stack dropdowns on mobile */
  .menu{display:grid;gap:.35rem}
  .menu .drop ul{position:static;border:none;box-shadow:none;padding:.2rem 0}
}
/* --- Header fixes (brand + menu + language pill) --- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;gap:.75rem;padding:.7rem 0}

/* make sure the logo always shows */
.brand img{height:44px;width:auto;display:block}

/* push the menu to the right so it doesn't crush the brand */
.menu{display:flex;gap:.8rem;align-items:center;margin-left:auto}

/* language pill */
.lang-pill{display:flex;gap:2px;background:#f3f3f3;border:1px solid #e6e6e6;border-radius:999px;padding:2px}
.lang-pill button{font:inherit;font-weight:700;border:0;background:transparent;padding:.35rem .6rem;border-radius:999px;line-height:1}
.lang-pill button[aria-pressed="true"]{background:#121315;color:#fff}

/* footer logo size, round */
.site-footer .brandline img{height:42px;width:auto;border-radius:50%}

/* mobile tweaks */
@media (max-width:900px){
  .mobile-toggle{display:block}
  #menu{display:none;position:absolute;left:0;right:0;top:64px;background:#fff;padding:1rem;border-bottom:1px solid rgba(0,0,0,.06)}
  #menu.show{display:grid;grid-template-columns:1fr;gap:.35rem}
  .menu{margin-left:0}
}
/* Header brand sizing */
.brand { display:flex; align-items:center; gap:.6rem; }
#gm-logo { display:block; height:48px; width:auto; }
#gm-wordmark { display:block; height:22px; width:auto; }
@media (max-width:900px){
  #gm-logo { height:40px; }
  #gm-wordmark { height:20px; }
}