:root { --red:#841510; --deep:#4d0907; --gold:#e1b851; --cream:#fbf5e9; --ink:#2a1d18; --muted:#705f56; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Noto Sans SC",sans-serif; }
a { color:inherit; text-decoration:none; }
header { height:76px; padding:0 max(6vw,24px); display:flex; align-items:center; justify-content:space-between; background:#fffaf1; border-bottom:1px solid #e0cfaa; }
.brand strong { display:block; color:var(--red); font:700 22px "Noto Serif SC",serif; letter-spacing:.18em; }
.brand small { display:block; margin-top:3px; color:var(--muted); font-size:10px; letter-spacing:.14em; }
.header-contact { color:var(--red); font-size:13px; font-weight:700; border-bottom:1px solid var(--gold); padding-bottom:4px; }
.hero { min-height:calc(100vh - 76px); padding:9vw max(8vw,28px); display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; align-items:center; color:#fff; background:radial-gradient(circle at 12% 5%,#b83920 0,transparent 28%),linear-gradient(135deg,#470705,#8b1711 58%,#560b08); }
.eyebrow { color:#f0ca70; font-size:13px; font-weight:700; letter-spacing:.28em; }
.hero h1 { margin:18px 0 25px; font:900 clamp(48px,7vw,90px)/1.15 "Noto Serif SC",serif; letter-spacing:.06em; }
.hero h1 span { color:#f0ca70; }
.lead { max-width:660px; color:#f4e6dc; font-size:clamp(16px,1.5vw,20px); line-height:1.9; }
.primary-button,.whatsapp-button { display:inline-block; margin-top:24px; padding:14px 24px; color:#570b08; background:linear-gradient(135deg,#f4dc9b,#d5a83e); border-radius:3px; font-weight:700; }
.hero-message { padding:42px; border:1px solid #d9af4e; background:#3b05057d; }
.hero-message span { color:#f0ca70; font-size:12px; letter-spacing:.2em; }
.hero-message h2 { margin:14px 0; color:#f3d17d; font:700 clamp(28px,3.5vw,46px)/1.4 "Noto Serif SC",serif; }
.hero-message p { color:#e6d6cd; line-height:1.8; }
.about { max-width:1120px; margin:auto; padding:110px max(6vw,24px); display:grid; grid-template-columns:.8fr 1.2fr; gap:10vw; align-items:start; }
.section-heading>p { color:var(--red); font-size:13px; font-weight:700; letter-spacing:.25em; }
.section-heading h2 { margin:12px 0; font:700 clamp(34px,4.5vw,56px)/1.45 "Noto Serif SC",serif; }
.about-copy { padding-top:28px; color:var(--muted); font-size:17px; line-height:2.05; }
.official-info { padding:90px max(8vw,28px); display:grid; grid-template-columns:.65fr 1.35fr; gap:8vw; background:#f1e5ce; }
.info-heading>p { margin:0; color:var(--red); font-size:13px; font-weight:700; letter-spacing:.25em; }
.info-heading h2 { margin:12px 0 0; font:700 clamp(30px,3.5vw,44px)/1.45 "Noto Serif SC",serif; }
.info-list { margin:0; border-top:1px solid #cbb68e; }
.info-list>div { padding:24px 0; display:grid; grid-template-columns:130px 1fr; gap:24px; border-bottom:1px solid #cbb68e; }
.info-list dt { color:var(--red); font-size:13px; font-weight:700; }
.info-list dd { margin:0; color:#4d3c34; line-height:1.75; overflow-wrap:anywhere; }
.relocation { padding:100px max(8vw,28px); text-align:center; color:#fff; background:var(--deep); }
.relocation h2 { margin:16px 0; color:#f0ca70; font:700 clamp(32px,4vw,50px)/1.5 "Noto Serif SC",serif; }
.relocation>p:not(.eyebrow) { color:#ddcbc1; }
footer { padding:38px max(6vw,24px); display:flex; justify-content:space-between; align-items:end; color:#d7c3b9; background:#28100d; font-size:11px; }
footer strong { color:#f0ca70; font:700 19px "Noto Serif SC",serif; letter-spacing:.15em; }
footer p { margin:5px 0 0; }
.floating-contact { position:fixed; right:22px; bottom:22px; width:52px; height:52px; display:grid; place-items:center; color:#fff; background:#1eae5b; border-radius:50%; font-size:24px; box-shadow:0 8px 22px #0004; }
@media (max-width:780px) {
  .hero { min-height:auto; grid-template-columns:1fr; padding-top:80px; padding-bottom:80px; }
  .hero h1 { font-size:48px; }
  .hero-message { padding:30px; }
  .about { grid-template-columns:1fr; gap:15px; padding-top:80px; padding-bottom:80px; }
  .about-copy { padding-top:0; }
  .official-info { grid-template-columns:1fr; gap:35px; padding-top:75px; padding-bottom:75px; }
}
@media (max-width:480px) {
  header { height:68px; }
  .hero { padding-left:22px; padding-right:22px; }
  .hero h1 { font-size:42px; }
  .relocation { padding:75px 22px; }
  .info-list>div { grid-template-columns:1fr; gap:8px; }
  footer { align-items:start; flex-direction:column; gap:22px; }
}