:root {
--ink:#173047;--deep:#163a59;--cream:#edf6fb;--paper:#ffffff;--gold:#b9def2;--line:#cbdce7}
* {
box-sizing:border-box}
html {
scroll-behavior:smooth}
body {
margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}
a {
color:inherit;text-decoration:none}
button {
font:inherit;cursor:pointer}
.announcement {
background:var(--deep);color:#eaf7ff;text-align:center;padding:9px 16px;font-size:13px;letter-spacing:.08em}
.header {
background:var(--paper);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line)}
.head-inner {
max-width:1400px;margin:auto;display:flex;align-items:center;gap:34px;padding:16px 4vw}
.brand {
display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand-mark {
background:var(--ink);color:var(--gold);border-radius:3px;font:700 27px Georgia,serif;padding:6px 9px;line-height:1}
.brand-name {
font:700 18px/1.05 Georgia,serif;letter-spacing:.04em}
.brand-name small {
display:block;font:600 9px/1.5 Arial,sans-serif;letter-spacing:.23em;margin-top:4px}
.nav {
display:flex;gap:28px;align-items:center;margin-left:auto;font-size:14px;font-weight:700}
.nav a:hover,.text-link:hover {
color:#326f97}
.nav-cta {
border:1px solid var(--ink);padding:10px 16px}
.menu-btn {
display:none;margin-left:auto;border:0;background:transparent;font-size:24px}
.hero {
background:var(--deep);color:#fff;min-height:570px;display:grid;grid-template-columns:48% 52%;overflow:hidden}
.hero-copy {
align-self:center;padding:68px 6vw 74px max(6vw,calc((100vw - 1300px)/2));position:relative}
.eyebrow {
text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.24em;color:var(--gold)}
h1,h2,h3,p {
margin-top:0}
h1,h2,.serif {
font-family:Georgia,'Times New Roman',serif;font-weight:400}
h1 {
font-size:clamp(52px,5.5vw,88px);line-height:1.02;letter-spacing:-.045em;margin:22px 0 24px}
h1 em {
color:var(--gold);font-weight:400}
.hero-copy p {
color:#dbeaf4;max-width:490px;font-size:18px;line-height:1.7}
.button {
display:inline-flex;align-items:center;justify-content:center;background:var(--gold);color:var(--deep);border:1px solid var(--gold);font-size:13px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:16px 24px;margin-top:22px}
.button:hover {
background:#d5eefa}
.hero-image {
background:linear-gradient(90deg,rgba(18,35,29,.25),transparent 34%),url('https://images.unsplash.com/photo-1744995553180-b4b52ab9901e?auto=format&fit=crop&w=1600&q=80') center/cover;min-height:570px}
.hero-seal {
position:absolute;bottom:25px;color:#bad2df;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.section {
max-width:1300px;margin:auto;padding:86px 4vw}
.section-heading {
display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px}
.section-heading h2 {
font-size:clamp(38px,4vw,60px);line-height:1.05;margin:12px 0 0;letter-spacing:-.035em}
.section-intro {
max-width:390px;color:#536b7a}
.category-grid {
display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.category {
background:var(--paper);min-height:310px;display:flex;flex-direction:column;justify-content:space-between;padding:24px;border:1px solid var(--line);transition:transform .2s,background .2s}
.category:hover {
transform:translateY(-4px);background:#e0f0fa}
.category .number {
color:#6185a0;font-size:12px;letter-spacing:.15em}
.category .glyph {
font:100px/1 Georgia,serif;color:#a7cadf;text-align:center}
.category strong {
font:400 30px Georgia,serif}
.category .bottom {
display:flex;justify-content:space-between;align-items:end}
.category .arrow {
font-size:24px}
.feature {
background:#dceef8}
.feature-inner {
max-width:1300px;margin:auto;padding:80px 4vw;display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center}
.feature h2 {
font-size:clamp(38px,4.5vw,66px);line-height:1.08;letter-spacing:-.04em;margin:14px 0 24px}
.feature p {
color:#4d6b7c;max-width:520px;font-size:17px;line-height:1.75}
.feature-panel {
background:var(--deep);color:#fff;min-height:330px;padding:42px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.feature-panel:after {
content:'JT';position:absolute;right:-20px;bottom:-120px;font:340px Georgia,serif;color:#245373;pointer-events:none}
.feature-panel>* {
position:relative;z-index:1}
.feature-panel span {
color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.feature-panel strong {
font:400 43px/1.1 Georgia,serif;max-width:360px}
.visit {
background:var(--paper)}
.visit-inner {
max-width:1300px;margin:auto;padding:80px 4vw;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.visit h2 {
font-size:clamp(38px,4vw,60px);margin:12px 0 22px}
.visit address {
font-style:normal;font-size:19px;margin-bottom:10px}
.text-link {
display:inline-block;border-bottom:1px solid currentColor;padding-bottom:5px;font-weight:700;font-size:14px}
.location-card {
border:1px solid var(--line);padding:34px;background:var(--cream);display:flex;flex-direction:column;justify-content:space-between;min-height:260px}
.location-card small {
letter-spacing:.18em;text-transform:uppercase;color:#6b8596}
.location-card strong {
font:42px Georgia,serif}
.footer {
background:var(--deep);color:#d8dfd8;padding:42px 4vw}
.footer-inner {
max-width:1300px;margin:auto;display:flex;justify-content:space-between;gap:20px;align-items:center}
.footer small {
color:#b5cad7}
.age-gate {
position:fixed;inset:0;background:rgba(9,21,15,.8);z-index:99;display:flex;align-items:center;justify-content:center;padding:20px}
.age-box {
background:var(--paper);width:min(100%,450px);padding:42px;text-align:center;box-shadow:0 20px 70px #0005}
.age-box .brand-mark {
display:inline-block}
.age-box h2 {
font-size:38px;line-height:1.1;margin:25px 0 15px}
.age-box p {
color:#536b7a}
.age-actions {
display:flex;gap:10px;justify-content:center}
.age-actions button {
margin-top:14px}
.secondary {
border:1px solid var(--ink);background:transparent;color:var(--ink);padding:16px 20px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.hidden {
display:none!important}
@media(max-width:850px) {
.menu-btn {
display:block}
.nav {
display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);padding:22px 5vw;box-shadow:0 20px 30px #0002;flex-direction:column;align-items:stretch;gap:18px}
.nav.open {
display:flex}
.hero {
grid-template-columns:1fr}
.hero-copy {
padding:70px 6vw 95px}
.hero-image {
min-height:350px;grid-row:1}
.hero-seal {
bottom:25px}
.category-grid {
grid-template-columns:repeat(2,1fr)}
.feature-inner,.visit-inner {
grid-template-columns:1fr;gap:30px}
}
@media(max-width:540px) {
.brand-name {
font-size:15px}
.hero-image {
min-height:260px}
.hero-copy {
padding-top:55px}
.hero-copy p {
font-size:16px}
.section {
padding:65px 5vw}
.section-heading {
display:block}
.category-grid {
gap:10px}
.category {
min-height:230px;padding:17px}
.category .glyph {
font-size:62px}
.category strong {
font-size:22px}
.feature-inner,.visit-inner {
padding:65px 5vw}
.feature-panel {
min-height:260px;padding:27px}
.feature-panel strong {
font-size:33px}
.footer-inner {
display:block}
.age-box {
padding:28px}
.age-actions {
flex-direction:column}
.age-actions button {
width:100%;margin-top:5px}
}

 .store-details {
display:grid;gap:22px;margin:26px 0 24px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.store-details span {
display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:#63829a;margin-bottom:7px}
.store-details a {
font-size:20px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.store-details strong {
display:block;font-size:15px;line-height:1.8;font-weight:600}
 .brand-logo {
width:72px;height:72px;object-fit:contain;background:#fff;display:block}
.brand-city {
font-size:11px;font-weight:700;letter-spacing:.15em;color:#587a90}
.footer .brand-city {
color:#b5cad7}
.age-logo {
width:110px;height:110px;object-fit:contain}
.sign-slot {
background:#d2e8f4;padding:24px;min-height:350px;display:flex;flex-direction:column;gap:15px;color:#315d77}
.sign-slot>span {
font-size:12px;font-weight:800;letter-spacing:.16em}
.sign-frame {
border:2px dashed #83aec6;flex:1;min-height:230px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;background:#e4f3fa}
.sign-frame span {
text-transform:uppercase;letter-spacing:.14em;font-size:12px}
.sign-frame strong {
font:400 34px Georgia,serif}
.sign-slot small {
font-size:12px;color:#587a90}
@media(max-width:540px) {
.brand-logo {
width:60px;height:60px}
.brand-city {
font-size:9px}
}