:root { --charcoal:#1a2520; --bronze:#8a6d3b; --cream:#faf8f3; --sage:#3a4a40; --muted:#6b6b68; }
* { box-sizing:border-box; }
body { margin:0; font-family:Montserrat,system-ui,sans-serif; color:var(--charcoal); background:var(--cream); line-height:1.65; }
a { color:var(--bronze); text-decoration:none; }
a:hover { text-decoration:underline; }
.topbar { background:var(--charcoal); color:#fff; padding:10px 0; font-size:.85rem; }
.topbar a { color:#fff; margin:0 10px; }
.wrap { max-width:1200px; margin:0 auto; padding:0 20px; }
.hero { position:relative; background:linear-gradient(135deg, #1a2520, #2c3e37); color:#fff; padding:90px 0 70px; text-align:center; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:url('/img/hero-metropole.png') center/cover; filter:blur(4px) brightness(.55); opacity:.7; z-index:0; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(26,37,32,.75), rgba(44,62,55,.55)); z-index:1; }
.hero .wrap { position:relative; z-index:2; }
.hero h1 { font-family:Lora,serif; font-size:clamp(2rem, 4.2vw, 3.4rem); font-weight:600; margin:0 0 12px; letter-spacing:-.5px; }
.hero .sub { font-size:1.15rem; opacity:.92; max-width:780px; margin:0 auto 28px; }
.hero .cta { display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; font-weight:600; transition:.2s; border:none; cursor:pointer; font-size:.95rem; }
.btn-primary { background:#fff; color:var(--charcoal); }
.btn-primary:hover { background:#f4f4ee; transform:translateY(-1px); text-decoration:none; }
.btn-ghost { background:transparent; border:1.5px solid rgba(255,255,255,.6); color:#fff; }
.btn-ghost:hover { background:rgba(255,255,255,.12); text-decoration:none; }
.stats { display:flex; flex-wrap:wrap; justify-content:center; gap:32px; margin-top:36px; padding-top:28px; border-top:1px solid rgba(255,255,255,.2); }
.stat { text-align:center; min-width:140px; }
.stat strong { display:block; font-family:Lora,serif; font-size:2.3rem; }
.stat span { font-size:.85rem; opacity:.8; letter-spacing:.5px; text-transform:uppercase; }
.jumplinks { position:sticky; top:0; background:#fff; border-bottom:1px solid #ecebe3; padding:12px 0; z-index:20; }
.jumplinks .wrap { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.jumplinks a { padding:5px 12px; font-size:.85rem; color:var(--charcoal); border-radius:4px; font-weight:600; background:#faf8f3; }
.jumplinks a:hover { background:var(--bronze); color:#fff; text-decoration:none; }
.intro { padding:40px 0 10px; }
.intro h2 { font-family:Lora,serif; font-size:1.9rem; margin:0 0 14px; color:var(--charcoal); }
.intro p { font-size:1.02rem; color:#2d2d2a; max-width:900px; }
.options { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px; margin:30px 0; }
.opt { background:#fff; border:1px solid #e8e6de; padding:20px; border-radius:14px; text-align:center; transition:.2s; }
.opt:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(26,37,32,.08); }
.opt i { font-size:1.8rem; color:var(--bronze); margin-bottom:10px; }
.opt h3 { font-family:Lora,serif; font-size:1.15rem; margin:6px 0 8px; }
.opt p { color:#5a5a57; font-size:.9rem; margin:0 0 12px; line-height:1.5; }
.opt a { display:inline-block; padding:8px 18px; border-radius:999px; background:var(--charcoal); color:#fff; font-size:.85rem; font-weight:500; }
.opt a:hover { background:var(--sage); text-decoration:none; }
.main { padding:40px 0 60px; }
.dept-block { margin-bottom:34px; background:#fff; border:1px solid #ecebe3; padding:24px 26px; border-radius:14px; }
.dept-block h2 { font-family:Lora,serif; font-size:1.5rem; margin:0 0 14px; color:var(--charcoal); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dept-block h2 small { color:var(--muted); font-size:.9rem; font-weight:400; }
.dept-code { color:var(--bronze); font-weight:500; }
.cities { list-style:none; padding:0; columns:4; column-gap:22px; margin:0; }
.cities li { break-inside:avoid; padding:3px 0; font-size:.9rem; }
.cities a { color:#3d3d3b; }
.cities a:hover { color:var(--bronze); }
.see-all { margin:14px 0 0; font-size:.9rem; }
.see-all a { color:var(--bronze); font-weight:600; }
@media (max-width:900px) { .cities { columns:2; } }
@media (max-width:500px) { .cities { columns:1; } .hero { padding:60px 0 50px; } }
.cta-final { background:linear-gradient(135deg, #1a2520, #2c3e37); color:#fff; padding:56px 24px; text-align:center; border-radius:18px; margin:30px auto; }
.cta-final h2 { font-family:Lora,serif; font-size:1.9rem; margin:0 0 12px; color:#fff; }
.cta-final p { opacity:.9; max-width:600px; margin:0 auto 22px; }
.cta-final .cta { display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }
footer { background:var(--charcoal); color:#bfbfba; padding:40px 0 20px; margin-top:50px; }
footer a { color:#bfbfba; }
footer .wrap { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; }
footer h4 { color:#fff; font-family:Lora,serif; margin:0 0 12px; font-size:1rem; }
footer ul { list-style:none; padding:0; margin:0; }
footer li { padding:3px 0; font-size:.88rem; }
.copyright { text-align:center; padding-top:22px; border-top:1px solid #2a3932; margin-top:28px; font-size:.82rem; opacity:.75; }