:root {
  --white: #FFFFFF;
  --beige: #F7F2EE;
  --champagne: #C8A47E;
  --charcoal: #2D2D2D;
  --gray: #888888;
  --border: #eadfd6;
  --shadow: 0 10px 30px rgba(45,45,45,0.06);
  --radius: 22px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif; color:var(--charcoal); background:var(--white); line-height:1.6; }
a { color:inherit; text-decoration:none; }
.container { width:min(calc(100% - 40px), var(--max)); margin:0 auto; }
.section { padding:72px 0; }
.section.soft { background:linear-gradient(180deg, var(--beige), #fff); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:rgba(200,164,126,.12); color:var(--champagne); font-size:13px; font-weight:700; letter-spacing:.04em; }
.floating-badge { position:fixed; right:18px; top:35%; z-index:20; background:rgba(255,255,255,.92); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:18px; backdrop-filter:blur(8px); padding:14px; width:220px; }
.floating-badge h4 { margin:0 0 10px; font-size:15px; color:var(--champagne); }
.floating-badge ul { margin:0; padding-left:18px; }
.floating-badge li { font-size:13px; color:var(--charcoal); margin-bottom:6px; }
.floating-badge span { color:var(--gray); display:block; font-size:12px; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid rgba(234,223,214,.8); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:78px; }
.brand { display:flex; gap:14px; align-items:center; }
.brand-mark { width:42px; height:42px; border-radius:14px; background:linear-gradient(145deg, var(--champagne), #e5c9a7); color:white; display:grid; place-items:center; font-weight:800; letter-spacing:.06em; box-shadow:0 12px 24px rgba(200,164,126,.2); }
.brand h1 { margin:0; font-size:18px; font-weight:700; }
.brand p { margin:2px 0 0; font-size:12px; color:var(--gray); }
.nav-links { display:flex; gap:18px; flex-wrap:wrap; }
.nav-links a { font-size:14px; color:var(--charcoal); opacity:.88; padding:8px 0; position:relative; }
.nav-links a.active, .nav-links a:hover { color:var(--champagne); }
.nav-links a.active::after, .nav-links a:hover::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--champagne); border-radius:999px; }
.cta-nav { padding:11px 18px; border-radius:999px; background:var(--champagne); color:#fff; font-size:14px; font-weight:700; box-shadow:0 10px 20px rgba(200,164,126,.23); }
.hero { padding:72px 0 44px; }
.hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; }
.hero-card { background:radial-gradient(circle at top left, rgba(200,164,126,.12), rgba(255,255,255,1) 42%), var(--white); border:1px solid var(--border); border-radius:30px; padding:34px; box-shadow:var(--shadow); }
.hero h2 { margin:16px 0 14px; font-size:clamp(32px, 5vw, 56px); line-height:1.08; letter-spacing:-0.02em; }
.hero h2 .cn { display:block; font-size:clamp(24px, 3.4vw, 36px); margin-top:10px; color:var(--champagne); }
.hero p.lead { color:var(--gray); font-size:17px; margin:0 0 24px; max-width:680px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:24px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 20px; border-radius:999px; font-weight:700; transition:.2s ease; }
.btn.primary { background:var(--champagne); color:#fff; }
.btn.secondary { background:var(--beige); color:var(--charcoal); border:1px solid var(--border); }
.hero-panel { background:linear-gradient(180deg, #fff, var(--beige)); border:1px solid var(--border); border-radius:30px; box-shadow:var(--shadow); padding:22px; }
.photo-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:14px; }
.photo-main, .photo-small { border-radius:24px; min-height:190px; border:1px solid rgba(200,164,126,.25); background:linear-gradient(145deg, rgba(200,164,126,.22), rgba(255,255,255,.95) 55%), linear-gradient(180deg, #f8f1eb 0%, #fff 100%); position:relative; overflow:hidden; }
.photo-main { min-height:420px; }
.photo-small { min-height:203px; }
.placeholder-text { position:absolute; left:20px; bottom:18px; color:var(--charcoal); font-size:14px; background:rgba(255,255,255,.8); padding:8px 12px; border-radius:999px; border:1px solid var(--border); }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.card.soft { background:var(--beige); }
.card p { color:var(--gray); margin-bottom:0; }
.kicker { color:var(--champagne); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.section-title { max-width:760px; margin-bottom:28px; }
.section-title h2 { font-size:clamp(28px, 4vw, 42px); margin:10px 0; line-height:1.15; }
.section-title p { color:var(--gray); font-size:16px; margin:0; }
.dual { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.cn-block { color:var(--gray); }
.highlight { background:linear-gradient(180deg, rgba(200,164,126,.14), rgba(200,164,126,.05)); border:1px solid rgba(200,164,126,.22); color:var(--charcoal); border-radius:18px; padding:14px 16px; font-size:14px; margin-top:16px; }
.price-tag { display:inline-flex; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--border); color:var(--champagne); font-weight:700; font-size:13px; }
.portfolio-hero, .inner-hero { padding:64px 0 24px; }
.gallery { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.work-card { background:#fff; border:1px solid var(--border); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); }
.work-image { height:280px; background:linear-gradient(145deg, rgba(200,164,126,.22), rgba(255,255,255,.95) 58%), linear-gradient(180deg, #f6eee8 0%, #fff 100%); position:relative; }
.work-image::before { content:""; position:absolute; inset:18px; border-radius:20px; border:1px dashed rgba(200,164,126,.35); }
.work-content { padding:18px 20px 22px; }
.meta { font-size:13px; color:var(--gray); }
.about-layout { display:grid; grid-template-columns:.92fr 1.08fr; gap:28px; align-items:start; }
.quote-box { padding:26px; border-radius:26px; background:linear-gradient(180deg, #fff, var(--beige)); border:1px solid var(--border); box-shadow:var(--shadow); }
.quote-box blockquote { margin:0; font-size:26px; line-height:1.35; }
.features { display:grid; gap:14px; margin-top:18px; }
.feature { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; background:#fff; border:1px solid var(--border); border-radius:18px; }
.feature-bullet { width:34px; height:34px; border-radius:999px; background:rgba(200,164,126,.16); color:var(--champagne); font-weight:800; display:grid; place-items:center; }
.booking-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:26px; align-items:start; }
.info-list { display:grid; gap:16px; }
.info-item { padding:18px 20px; border-radius:20px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); }
form { background:#fff; border:1px solid var(--border); border-radius:28px; padding:24px; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:grid; gap:8px; margin-bottom:16px; }
label { font-size:14px; font-weight:700; }
label span { color:#b8865c; }
input, select, textarea { width:100%; padding:14px; border:1px solid var(--border); border-radius:16px; font:inherit; color:var(--charcoal); background:#fff; }
textarea { min-height:140px; resize:vertical; }
.helper, .small, .footer-note { font-size:13px; color:var(--gray); }
.notice { margin-top:14px; padding:14px 16px; border-radius:16px; background:var(--beige); border:1px solid var(--border); color:var(--gray); font-size:14px; }
.site-footer { margin-top:44px; padding:28px 0 46px; border-top:1px solid var(--border); background:#fff; }
.footer-grid { display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }
.footer-links { display:flex; flex-wrap:wrap; gap:14px; font-size:14px; }
@media (max-width:1100px){ .floating-badge{ position:static; width:auto; margin:18px auto 0;} .hero-grid,.about-layout,.booking-layout{ grid-template-columns:1fr;} .grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:820px){ .nav-wrap{ min-height:auto; padding:14px 0; align-items:flex-start; flex-direction:column;} .grid-3,.gallery,.dual,.form-grid{ grid-template-columns:1fr;} .photo-grid{ grid-template-columns:1fr;} .photo-main{ min-height:270px;} .grid-4{ grid-template-columns:1fr;} }