:root {
    --paper:#F7F9FC;
    --panel:#FFFFFF;
    --ink:#1B2430;
    --blue:#153D6E;
    --blue-dark:#0F2B4E;
    --blue-mid:#1B5AA0;
    --blue-soft:#E6F0FF;
    --blue-muted:#C9E0FA;
    --accent:#0F63B8;
    --bg-dark:#0b2546;
    --bg-light:#e6f3ff;
    --grad-stop:60%;
    --card-shadow: 0 12px 32px rgba(18,58,107,0.06);
    --soft-shadow: 0 6px 18px rgba(18,58,107,0.04);
    --muted:#6B8398;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100%; }
body {
    font-family:"Work Sans",sans-serif;
    background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-light) var(--grad-stop));
    background-attachment: fixed;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page { max-width:1100px; margin:36px auto; padding:24px; }
header {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:16px;
    padding:18px 20px;
    background:var(--panel);
    border-radius:14px;
    box-shadow:var(--soft-shadow);
}
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo img { height:78px; width:auto; display:block; }
.nav-links { display:flex; gap:8px; align-items:center; }
.nav-links a { padding:10px 12px; border-radius:8px; color:var(--blue-dark); text-decoration:none; font-weight:600; font-size:15px; }
.nav-links a:hover { background:rgba(27,79,145,0.06); }
.dropdown { position:relative; }
.dropdown > button {
    background:transparent;
    border:none;
    padding:10px 12px;
    border-radius:8px;
    font-weight:600;
    color:var(--blue-dark);
    cursor:pointer;
}
.dropdown-menu {
    position:absolute;
    top:44px;
    left:0;
    min-width:200px;
    background:var(--panel);
    border:1px solid rgba(27,79,145,0.06);
    border-radius:10px;
    box-shadow:0 12px 36px rgba(18,58,107,0.08);
    overflow:hidden;
    display:none;
    z-index:10;
}
.dropdown.active > .dropdown-menu,
.dropdown.active .dropdown-menu {
    display:block;
}
.dropdown-menu a { display:block; padding:10px 12px; color:var(--ink); text-decoration:none; }
.dropdown-menu a:hover { background:rgba(27,79,145,0.04); }

.header-actions { display:flex; gap:10px; align-items:center; }
.btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--blue) 0%, var(--blue-mid) 100%);
    color:white;
    text-decoration:none;
    font-weight:700;
    box-shadow:0 10px 26px rgba(18,58,107,0.18);
    border:1px solid rgba(10,40,80,0.08);
}
.btn.secondary {
    background:var(--panel);
    color:var(--blue-dark);
    border:1px solid rgba(27,79,145,0.10);
    box-shadow:0 6px 18px rgba(18,58,107,0.06);
}

.mobile-toggle { display:none; border:0; background:transparent; cursor:pointer; padding:6px; color:var(--blue-dark); }
.mobile-menu {
    display:none;
    background:var(--panel);
    padding:12px;
    border-radius:10px;
    margin-top:8px;
    border:1px solid rgba(27,79,145,0.06);
    box-shadow:var(--soft-shadow);
}
.mobile-menu a {
    display:block;
    padding:8px 10px;
    color:var(--ink);
    text-decoration:none;
    border-radius:8px;
}
.show { display:block; }

.hero {
    margin-top:24px;
    padding:34px;
    background:var(--panel);
    border-radius:20px;
    box-shadow:var(--card-shadow);
    border:1px solid rgba(27,79,145,0.08);
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}
.hero h1 { font-family:'Fraunces',serif; font-size:clamp(2.4rem,4vw,3.8rem); line-height:1.02; color:var(--blue-dark); margin:0; }
.hero p { max-width:760px; color:#475166; font-size:1rem; line-height:1.7; margin:0; }
.hero .tag {
    color:var(--blue);
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:.84rem;
    margin:0;
    display:block;
    margin-bottom:2px;
}

.grid { display:grid; gap:32px; margin-top:32px; margin-bottom:32px; }
.grid-2 { grid-template-columns:repeat(2,minmax(220px,1fr)); }
.panel {
    background:var(--panel);
    border-radius:18px;
    padding:26px;
    border:1px solid rgba(27,79,145,0.08);
    box-shadow:0 14px 30px rgba(18,58,107,0.06);
}
.panel h2 { font-family:'Fraunces',serif; font-size:1.5rem; color:var(--blue-dark); margin-bottom:12px; }
.panel p, .panel li { color:#4A5568; line-height:1.8; font-size:0.97rem; }
.panel ul { margin-top:14px; padding-left:18px; }
.panel li { margin-bottom:10px; }

.feature-list { display:grid; gap:14px; margin-top:24px; }
.feature { display:flex; gap:14px; align-items:flex-start; background:rgba(234,243,255,0.8); border-radius:16px; padding:18px; border:1px solid rgba(27,79,145,0.12); }
.feature span { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--blue); color:white; font-weight:700; }
.feature div p { margin:0; color:#475166; }

.cta-panel {
    margin-top:32px;
    background:linear-gradient(180deg, rgba(21,61,110,0.08), rgba(234,243,255,0.8));
    border-radius:20px;
    padding:32px;
    border:1px solid rgba(27,79,145,0.12);
}
.cta-panel h2 { color:var(--blue-dark); margin-bottom:12px; }
.cta-panel p { color:#42505e; }

.locations-grid {
    display:grid;
    gap:20px;
    margin-top:24px;
}
.location-card {
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:18px;
    padding:22px;
    background:var(--panel);
    border-radius:20px;
    border:1px solid rgba(27,79,145,0.08);
    box-shadow:var(--card-shadow);
    align-items:center;
}
.location-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.location-heading h2 {
    font-family:'Fraunces',serif;
    color:var(--blue-dark);
    font-size:1.3rem;
    margin:0;
}
.location-pill {
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(27,79,145,0.08);
    color:var(--blue-dark);
    font-size:0.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.location-address {
    color:#475166;
    line-height:1.7;
    margin:0 0 10px 0;
}
.location-phone {
    color:var(--accent);
    font-weight:700;
    text-decoration:none;
}
.location-phone:hover { text-decoration:underline; }
.map-card {
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(27,79,145,0.12);
    min-height:220px;
}
.map-frame {
    width:100%;
    height:220px;
    border:0;
}

footer {
    margin-top:50px;
    padding:28px 0 18px;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    color:var(--muted);
    text-align:center;
}
footer a { color:var(--blue-dark); text-decoration:none; font-weight:600; }
footer a:hover { color:var(--accent); }

@media (max-width:900px) {
    .grid-2 { grid-template-columns:1fr; }
}

:root {
    --paper:#F7F9FC;
    --panel:#FFFFFF;
    --ink:#1B2430;
    --blue:#153D6E;
    --blue-dark:#0F2B4E;
    --blue-mid:#1B5AA0;
    --blue-soft:#E6F0FF;
    --blue-muted:#C9E0FA;
    --accent:#0F63B8;
    --bg-dark:#0b2546;
    --bg-light:#e6f3ff;
    --grad-stop:60%;
    --card-shadow:0 12px 32px rgba(18,58,107,0.06);
    --soft-shadow:0 6px 18px rgba(18,58,107,0.04);
    --muted:#6B8398;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
    font-family:"Work Sans",sans-serif;
    background:linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-light) var(--grad-stop));
    background-attachment:fixed;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.container { max-width:1100px; margin:36px auto; padding:24px; }
header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 18px;
    background:#ffffff;
    border-radius:12px;
    box-shadow:var(--soft-shadow);
}
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.logo img { height:98px; width:auto; display:block; }
nav { display:flex; align-items:center; gap:12px; }
.nav-links { display:flex; gap:8px; align-items:center; }
.nav-links a { padding:10px 12px; border-radius:8px; color:var(--blue-dark); text-decoration:none; font-weight:600; font-size:15px; }
.nav-links a:hover { background:rgba(27,79,145,0.06); color:var(--blue-dark); }
.dropdown { position:relative; }
.dropdown > button {
    background:transparent;
    border:none;
    padding:10px 12px;
    border-radius:8px;
    font-weight:600;
    color:var(--blue-dark);
    cursor:pointer;
}
.dropdown > button:hover,
.dropdown > button:focus-visible,
.dropdown.active > button {
    background:rgba(27,79,145,0.06);
    color:var(--blue-dark);
}
.dropdown-menu {
    position:absolute;
    top:44px;
    left:0;
    min-width:200px;
    background:var(--panel);
    border:1px solid rgba(27,79,145,0.06);
    border-radius:10px;
    box-shadow:0 12px 36px rgba(18,58,107,0.08);
    overflow:hidden;
    display:none;
}
.dropdown.active > .dropdown-menu,
.dropdown.active .dropdown-menu {
    display:block;
}
.dropdown.active .dropdown-menu a {
    display:block;
}
.dropdown-menu a { display:block; padding:10px 12px; color:var(--ink); text-decoration:none; }
.dropdown-menu a:hover { background:rgba(27,79,145,0.04); }
.header-actions { display:flex; gap:10px; align-items:center; }
.btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--blue) 0%, var(--blue-mid) 100%);
    color:white;
    text-decoration:none;
    font-weight:700;
    box-shadow:0 10px 26px rgba(18,58,107,0.18);
    border:1px solid rgba(10,40,80,0.08);
}
.btn.secondary {
    background:var(--panel);
    color:var(--blue-dark);
    border:1px solid rgba(27,79,145,0.10);
    font-weight:700;
    box-shadow:0 6px 18px rgba(18,58,107,0.06);
}
.hero {
    display:grid;
    grid-template-columns:1fr 360px;
    gap:28px;
    align-items:center;
    margin-top:18px;
    padding:28px;
    background:var(--panel);
    border-radius:14px;
    box-shadow:var(--card-shadow);
    border:1px solid rgba(27,79,145,0.03);
}
.hero-left h1 { font-family:'Fraunces',serif; font-size:clamp(2rem,3.8vw,3.4rem); line-height:1.02; margin-bottom:14px; color:var(--blue-dark); }
.hero-left p { color:#3E5567; margin-bottom:18px; font-size:16px; }
.hero-right {
    background:linear-gradient(180deg,#FFFFFF, #FBFDFF);
    padding:18px;
    border-radius:12px;
    box-shadow:0 10px 28px rgba(18,58,107,0.06);
    border:1px solid rgba(27,79,145,0.04);
}
.quick-login { display:flex; flex-direction:column; gap:12px; }
.quick-login input { padding:10px 12px; border:1px solid rgba(27,79,145,0.06); border-radius:8px; }
.small { font-size:13px; color:var(--muted); }
.specials { margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.card {
    background:var(--panel);
    padding:14px;
    border-radius:12px;
    box-shadow:0 10px 24px rgba(18,58,107,0.05);
    border:1px solid rgba(10,40,80,0.03);
    position:relative;
    overflow:hidden;
}
.card::before {
    content:"";
    position:absolute;
    left:0;
    top:12px;
    height:calc(100% - 24px);
    width:6px;
    background:linear-gradient(180deg,var(--blue) 0%, var(--blue-mid) 100%);
    border-radius:6px;
}
.card h3 { font-size:15px; margin-bottom:8px; color:var(--blue-dark); }
.card p { color:#4A5568; font-size:13px; }
footer {
    margin-top:26px;
    padding:32px 0 18px;
    border-top:1px solid rgba(27,79,145,0.04);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    background:transparent;
    color:var(--ink);
}
footer::before {
    content:"";
    display:block;
    width:50%;
    max-width:420px;
    height:2px;
    background:linear-gradient(90deg, var(--blue), var(--blue-mid));
    margin-bottom:8px;
    border-radius:2px;
}
.foot-links { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.foot-links a { color:var(--blue-dark); text-decoration:none; font-size:13px; }
.foot-links a:hover { color:var(--accent); }
@media (max-width:920px) {
    .hero { grid-template-columns:1fr; padding:18px; }
    .specials { grid-template-columns:repeat(2,1fr); }
    .logo img { height:78px; }
}
@media (max-width:620px) {
    header { flex-direction:column; align-items:flex-start; gap:12px; }
    .nav-links { display:none; }
    .mobile-toggle { display:inline-flex; }
    .specials { grid-template-columns:1fr; }
}
.mobile-toggle { display:none; border:0; background:transparent; cursor:pointer; padding:6px; color:var(--blue-dark); }
.mobile-menu { display:none; background:var(--panel); padding:12px; border-radius:10px; margin-top:8px; border:1px solid rgba(27,79,145,0.06); box-shadow:var(--soft-shadow); }
.mobile-menu a { display:block; padding:8px 10px; color:var(--ink); text-decoration:none; border-radius:8px; }
.show { display:block; }