:root,
[data-theme="light"] {
  --color-bg:#F9F5EE;
  --color-surface:#FBF8F2;
  --color-surface-2:#FFFFFF;
  --color-surface-offset:#F2EBE0;
  --color-divider:#D9CDB8;
  --color-border:#CEBFA6;
  --color-text:#2C1F0E;
  --color-text-muted:#6B5740;
  --color-text-faint:#A8917A;
  --color-text-inverse:#FAF6EF;
  --color-primary:#6B4C2A;
  --color-primary-hover:#523A1F;
  --color-primary-highlight:#E8D9C5;
  --color-amber:#C4822A;
  --shadow-md:0 4px 16px rgba(44,31,14,.10);
  --shadow-lg:0 12px 40px rgba(44,31,14,.13);
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:18px;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Work Sans',system-ui,sans-serif;
  --transition:180ms cubic-bezier(.16,1,.3,1);
  --content-default:1100px;
  --nav-h:68px;
}
[data-theme="dark"] {
  --color-bg:#1A1410;
  --color-surface:#211C17;
  --color-surface-2:#28221C;
  --color-surface-offset:#2E2720;
  --color-divider:#3A3028;
  --color-border:#4A3F33;
  --color-text:#EDE0CC;
  --color-text-muted:#A08870;
  --color-text-faint:#6E5A48;
  --color-text-inverse:#1A1410;
  --color-primary:#C4944A;
  --color-primary-hover:#D4A55E;
  --color-primary-highlight:#3A2E1E;
  --color-amber:#D4A245;
  --shadow-md:0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,.45);
}
*,
*::before,
*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-font-smoothing:antialiased; }
body { font-family:var(--font-body); color:var(--color-text); background:var(--color-bg); line-height:1.7; overflow-x:hidden; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
button { cursor:pointer; background:none; border:0; font:inherit; color:inherit; }
.skip-link { position:absolute; top:8px; left:8px; z-index:9999; padding:8px 14px; background:var(--color-primary); color:var(--color-text-inverse); border-radius:var(--radius-md); opacity:0; pointer-events:none; }
.skip-link:focus { opacity:1; pointer-events:auto; }
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); padding:0 var(--space-8); background:color-mix(in oklab,var(--color-bg) 92%,transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--color-border); }
.nav-logo { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; }
.nav-logo-img { width:40px; height:40px; object-fit:cover; border-radius:var(--radius-md); }
.nav-logo-text { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--color-primary); line-height:1.2; }
.nav-logo-text small { display:block; font-family:var(--font-body); font-size:.65rem; font-weight:400; color:var(--color-text-muted); letter-spacing:.12em; text-transform:uppercase; }
.nav-actions { display:flex; align-items:center; gap:var(--space-3); }
.icon-btn,
.lang-btn,
.nav-blog-link { min-height:44px; border:1px solid var(--color-border); border-radius:var(--radius-md); transition:all var(--transition); }
.icon-btn { display:flex; align-items:center; justify-content:center; width:44px; }
.lang-btn { padding:0 var(--space-5); font-weight:700; letter-spacing:.08em; color:var(--color-text-muted); }
.nav-blog-link { display:inline-flex; align-items:center; padding:0 var(--space-5); color:var(--color-text-muted); font-weight:600; text-decoration:none; }
.icon-btn:hover,
.lang-btn:hover,
.nav-blog-link:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-highlight); }
.nav-cta { display:inline-flex; align-items:center; justify-content:center; height:40px; min-height:44px; padding:0 var(--space-5); border-radius:var(--radius-md); background:var(--color-primary); color:var(--color-text-inverse); font-weight:700; text-decoration:none; transition:background var(--transition), transform var(--transition); white-space:nowrap; }
.nav-cta:hover { background:var(--color-primary-hover); transform:translateY(-1px); }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:var(--space-4) var(--space-8); border-radius:var(--radius-md); background:var(--color-primary); color:var(--color-text-inverse); font-weight:700; text-decoration:none; transition:all var(--transition); white-space:nowrap; }
.btn-primary:hover { background:var(--color-primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:var(--space-4) var(--space-8); border-radius:var(--radius-md); border:1.5px solid var(--color-border); color:var(--color-text); font-weight:600; text-decoration:none; transition:all var(--transition); }
.btn-outline:hover { border-color:var(--color-primary); color:var(--color-primary); background:var(--color-primary-highlight); }
.container { max-width:var(--content-default); margin:0 auto; padding:0 var(--space-8); }
.route-hero { padding:calc(var(--nav-h) + var(--space-20)) var(--space-8) var(--space-16); border-bottom:1px solid var(--color-border); background:radial-gradient(circle at 72% 10%,color-mix(in oklab,var(--color-primary) 18%,transparent),transparent 26rem); }
.hero-grid { max-width:var(--content-default); margin:0 auto; display:grid; grid-template-columns:1fr .9fr; gap:var(--space-16); align-items:center; }
.section-eyebrow { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); }
.section-eyebrow-line { width:40px; height:1px; background:var(--color-amber); }
.section-eyebrow span { font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-amber); }
h1,
h2,
h3 { font-family:var(--font-display); line-height:1.08; text-wrap:balance; }
h1 { font-size:clamp(2.6rem,6vw,5.2rem); margin-bottom:var(--space-6); }
h1 em,
h2 em { color:var(--color-amber); font-style:italic; }
.lead { font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--color-text-muted); max-width:48ch; line-height:1.85; }
.hero-actions { display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-8); }
.hero-media { overflow:hidden; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); border:1px solid var(--color-border); background:var(--color-surface-offset); }
.hero-media img { width:100%; aspect-ratio:4/3; object-fit:cover; }
section { padding:var(--space-20) var(--space-8); }
.section-title { font-size:clamp(2rem,4vw,3.5rem); margin-bottom:var(--space-5); }
.section-desc { color:var(--color-text-muted); max-width:58ch; font-size:1.05rem; }
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-10); }
.info-card { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-6); box-shadow:var(--shadow-md); }
.info-card h2,
.info-card h3 { font-size:1.35rem; margin-bottom:var(--space-3); }
.info-card p { color:var(--color-text-muted); font-size:.96rem; }
.split-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:start; margin-top:var(--space-10); }
.map-card { border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--color-border); box-shadow:var(--shadow-lg); min-height:420px; background:var(--color-surface-offset); }
.map-card iframe { width:100%; height:100%; min-height:420px; border:0; display:block; }
.detail-list { display:flex; flex-direction:column; gap:var(--space-5); }
.detail-item { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); }
.detail-item strong { display:block; margin-bottom:var(--space-2); color:var(--color-text); }
.detail-item span,
.detail-item a { color:var(--color-text-muted); text-decoration:none; }
.faq-list { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); margin-top:var(--space-10); }
.faq-item { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); }
.faq-item h2 { font-size:1.28rem; margin-bottom:var(--space-3); }
.faq-item p { color:var(--color-text-muted); }
.cta-banner { background:var(--color-surface-offset); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:var(--space-10); display:flex; align-items:center; justify-content:space-between; gap:var(--space-8); }
.cta-banner h2 { font-size:clamp(1.8rem,3vw,2.7rem); margin-bottom:var(--space-3); }
.cta-banner p { color:var(--color-text-muted); max-width:52ch; }
footer { background:var(--color-surface-offset); border-top:1px solid var(--color-border); padding:var(--space-10) var(--space-8); }
.footer-inner { max-width:var(--content-default); margin:0 auto; display:flex; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; color:var(--color-text-muted); font-size:.9rem; }
.footer-inner a { text-decoration:none; color:var(--color-text-muted); }
.floating-wa { position:fixed; right:22px; bottom:22px; z-index:1001; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#25d366; color:#fff; font-weight:800; text-decoration:none; box-shadow:0 14px 34px rgba(37,211,102,.25); }
[data-theme="dark"] .nav-logo-img { filter:brightness(1.15); }
@media (max-width:900px) {
  :root { --nav-h:60px; }
  .nav { padding:0 var(--space-5); }
  .hero-grid,
  .split-layout { grid-template-columns:1fr; }
  .card-grid,
  .faq-list { grid-template-columns:1fr 1fr; }
  .hero-media { max-width:620px; }
}
@media (max-width:540px) {
  :root { --nav-h:56px; }
  .nav { padding:0 10px; }
  .nav-logo-img { width:34px; height:34px; }
  .nav-logo-text { font-size:.8rem; }
  .nav-logo-text small { display:none; }
  .nav-actions { gap:5px; }
  .icon-btn { width:36px; min-height:40px; }
  .lang-btn,
  .nav-blog-link { min-height:40px; padding:0 8px; font-size:.68rem; }
  .nav-cta { height:32px; min-height:32px; padding:0 10px; font-size:.68rem; }
  .container,
  .route-hero,
  section { padding-left:var(--space-4); padding-right:var(--space-4); }
  .route-hero { padding-top:calc(var(--nav-h) + var(--space-12)); }
  .card-grid,
  .faq-list { grid-template-columns:1fr; }
  .hero-actions,
  .cta-banner { flex-direction:column; align-items:stretch; }
  .hero-actions a,
  .cta-banner a { justify-content:center; }
  h1 { font-size:clamp(2.2rem,11vw,3.4rem); }
  section { padding-top:var(--space-12); padding-bottom:var(--space-12); }
}
@media (max-width:420px) {
  .nav-logo-text { display:none; }
}