:root{
  /* Light, premium look (Option A) */
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#475569;
  --border:rgba(15,23,42,.12);
  --accent:#22c55e;
  --accent2:#2563eb;
  --shadow: 0 18px 55px rgba(2,6,23,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 18px}
/* Nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(246,247,251,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.brand .name{font-weight:800;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:310px}
.brand .tag{font-size:12px;color:var(--muted);margin-top:2px}
.menu{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.menu a{padding:9px 10px;border-radius:12px;color:var(--muted);border:1px solid transparent}
.menu a:hover{border-color:var(--border);color:var(--text)}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(2,6,23,.03);font-weight:800}
.btn:hover{transform:translateY(-1px);background:rgba(2,6,23,.05)}
.btn.primary{background:linear-gradient(135deg,var(--accent),#16a34a);border-color:rgba(34,197,94,.45);color:#061209}
.btn.ghost{background:rgba(2,6,23,.02)}
/* Hero */
.hero{
  position:relative;
  min-height:600px;
  display:flex;
  align-items:flex-end;
  padding:34px 0 26px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("img/hero.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05);
  transform:scale(1.02);
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  /* Let the photo shine while keeping text readable */
  background:linear-gradient(90deg, rgba(246,247,251,.92) 0%, rgba(246,247,251,.72) 44%, rgba(246,247,251,.18) 100%),
             linear-gradient(180deg, rgba(246,247,251,.00) 0%, rgba(246,247,251,.55) 78%, rgba(246,247,251,1) 100%);
}
.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width:900px){.hero{min-height:720px}.hero-content{grid-template-columns:1fr}}
.hero-card{
  background:rgba(255,255,255,.86);
  border:1px solid var(--border);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow);
}
.kicker{color:var(--muted);font-size:13px;letter-spacing:.3px}
.h1{font-size:48px;line-height:1.02;margin:10px 0 10px}
@media (max-width:520px){.h1{font-size:40px}}
.lead{color:var(--muted);font-size:16px;line-height:1.7;margin:0}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{font-size:12px;color:var(--muted);border:1px solid var(--border);background:rgba(2,6,23,.02);padding:8px 10px;border-radius:999px}
/* Sections */
.section{padding:26px 0}
.section h2{margin:0 0 12px;font-size:22px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(2,6,23,.06)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.grid3{grid-template-columns:1fr}}
.item h3{margin:0 0 6px;font-size:16px}
.item p{margin:0;color:var(--muted);line-height:1.6}
.row{display:flex;gap:10px;align-items:flex-start}
/* Gallery */
.page-gallery .section{padding-bottom:120px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;align-items:stretch}
@media (max-width:420px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gimg{
  width:100%;
  height:auto;
  aspect-ratio: 4 / 5;
  border-radius:16px;
  object-fit:cover;
  object-position:center;
  background:#f2f2f2;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  transition:transform .15s ease;
}
.gimg:hover{transform:translateY(-2px)}
/* Footer */
.footer{border-top:1px solid var(--border);padding:22px 0;color:var(--muted);font-size:13px}
.small{font-size:12px;color:var(--muted)}
/* Mobile bottom bar */
.mobilebar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:none;gap:10px;
}
@media (max-width:700px){.mobilebar{display:flex}.mobilebar .btn{flex:1}}
@media (max-width:700px){
  .mobilebar{left:10px;right:10px;bottom:10px}
  .mobilebar .btn{padding:12px 12px;border-radius:16px;font-size:16px}
}
/* Forms */
.form{display:grid;gap:12px}
label{font-size:12px;color:var(--muted)}
input,textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid var(--border);background:#fff;color:var(--text)}
textarea{min-height:120px;resize:vertical}
.notice{padding:12px;border-radius:16px;border:1px dashed rgba(37,99,235,.35);background:rgba(37,99,235,.06);color:var(--muted);line-height:1.6}
hr.sep{border:none;border-top:1px solid var(--border);margin:14px 0}


/* --- Mobile polish (added) --- */
@media (max-width: 640px){
  .site-header{ padding: 10px 14px; }
  .header-inner{ gap: 10px; }
  .brand{ gap: 10px; min-width: 0; }
  .brand img{ width: 44px; height: 44px; }
  .brand-text{ min-width: 0; }
  .brand-name{ font-size: 16px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
  .brand-tagline{ font-size: 12px; }
  .nav-links{ gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .nav-links a{ font-size: 13px; padding: 8px 10px; }
  .cta-button{ padding: 10px 12px; font-size: 13px; }
  .hero{ padding-top: 22px; }
  .hero-card{ padding: 18px; border-radius: 18px; }
  .hero h1{ font-size: 42px; line-height: 1.0; }
  .hero .subhead{ font-size: 16px; }
  .hero .pill-row{ gap: 8px; }
  .pill{ font-size: 12px; padding: 8px 10px; }
  .floating-bar{ padding: 10px 12px; gap: 10px; }
  .floating-bar a{ padding: 12px 14px; font-size: 15px; }
}


/* --- SEO content helpers --- */
details { border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: rgba(255,255,255,.65); }
details summary { cursor: pointer; font-weight: 700; }
details p { margin: 10px 0 0; }
main ul { padding-left: 1.1rem; }
main li { margin: 6px 0; }