:root{
  --brand:#0F172A; /* slate-900 */
  --accent:#0ea5e9; /* sky-500 */
  --bg:#ffffff;
  --muted:#64748b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;color:var(--brand);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:10}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800;font-size:20px;letter-spacing:.3px}
.brand .sub{font-weight:600;color:var(--muted)}
.menu{display:flex;gap:22px}
.menu a{color:var(--brand);opacity:.9}
.menu a:hover{color:var(--accent)}
.hero{position:relative;overflow:hidden;background:#f8fafc}
.hero .slide{display:none}
.hero .slide.active{display:block}
.hero img{width:100%;height:56vh;object-fit:cover}
.hero h1{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(255,255,255,.85);padding:10px 14px;border-radius:10px;font-size:22px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card .p{padding:14px}
.footer{margin-top:32px;border-top:1px solid #e5e7eb;padding:30px 0;color:var(--muted)}
.hero-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;cursor:pointer}
.dot.active{background:var(--accent)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid #e5e7eb}
h1,h2{margin:18px 0}
.breadcrumb{color:var(--muted);font-size:14px;margin-top:10px}
small{color:var(--muted)}
.notice{padding:10px 14px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px}

/* --- Professional tagline & info boxes (added) --- */
.hero-tagline{
  margin-top:10px;
  font-size:1.05rem;
  line-height:1.45;
  opacity:.95;
}
.hero-tagline span{
  display:block;
  margin-top:4px;
  font-size:.95rem;
  opacity:.85;
}
.info-box{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:18px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.info-box h2{
  margin:0 0 10px 0;
  font-size:1.35rem;
}
.footer-note{
  margin-top:10px;
  font-size:.92rem;
  opacity:.75;
  text-align:center;
}
@media (max-width: 768px){
  .hero-tagline{
    font-size:.95rem;
    text-align:center;
    padding:0 12px;
  }
  .hero-tagline br{display:none;}
  .hero-tagline span{font-size:.85rem;}
  .info-box{padding:16px;}
  .info-box h2{font-size:1.2rem;}
}

/* SLIDER MOBILE PRO FIX */
.hero img{height:60vh;object-fit:cover;object-position:center center}
.hero h1{max-width:980px}
.hero-tagline{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);text-align:center;background:rgba(255,255,255,.82);backdrop-filter:saturate(120%) blur(6px);padding:10px 14px;border-radius:12px;max-width:min(92vw,980px);line-height:1.35}
.hero-tagline span{display:block;margin-top:4px;font-size:14px;opacity:.9}
@media (max-width: 768px){
  .hero img{height:46vh}
  /* On mobile: keep headline & tagline in normal flow to avoid overlaps */
  .hero h1{font-size:20px;position:static;transform:none;margin:14px auto 0 auto;max-width:92vw}
  .hero-tagline{position:static;transform:none;margin:12px auto 0 auto;background:rgba(255,255,255,.92)}
  .hero{padding-bottom:18px}
}