:root {
  --ink: #151515;
  --paper: #f2eadc;
  --cream: #fff9ed;
  --accent: #a66f4b;
  --brown: #4a342a;
  --muted: #746d63;
  --font-display: "Bebas Neue";
  --font-body: "Manrope";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body), sans-serif; }
a { color: inherit; text-decoration: none; }
.skip-link { background: var(--cream); color: var(--ink); left: 12px; padding: 10px 14px; position: fixed; top: -60px; z-index: 100; }
.skip-link:focus { top: 12px; }

.site-header {
  align-items: center; background: var(--ink); color: var(--cream); display: flex; height: 84px;
  justify-content: space-between; padding: 0 clamp(22px, 5vw, 80px); position: relative; z-index: 10;
}
.brand { align-items: center; display: flex; font: 25px/1 var(--font-display), sans-serif; letter-spacing: .07em; }
.brand b { color: #d7b98a; font-weight: inherit; }
.brand-logo { flex: 0 0 auto; height: 52px; margin-right: 12px; object-fit: contain; width: 52px; }
.brand-lockup { display: flex; flex-direction: column; }
.brand-lockup small { color: #aaa49b; font: 700 8px/1 var(--font-body), sans-serif; letter-spacing: .22em; margin-top: 6px; text-transform: uppercase; }
nav { display: flex; gap: 32px; }
nav a { color: #d9d2c6; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
nav a:hover, nav a:focus-visible { color: white; }
.header-call { border-bottom: 1px solid #d7b98a; color: #d7b98a; font-size: 13px; font-weight: 800; padding-bottom: 4px; }

.updates-banner { align-items: center; background: #d8c2a0; display: flex; gap: 22px; min-height: 58px; padding: 12px clamp(22px, 5vw, 80px); }
.updates-banner > span { color: #81543a; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.updates-banner strong { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: .03em; text-transform: uppercase; }
.updates-banner p { color: #514b43; font-size: 12px; margin: 0; }
.updates-banner a { border-bottom: 1px solid var(--brown); font-size: 10px; font-weight: 800; letter-spacing: .12em; margin-left: auto; padding-bottom: 2px; text-transform: uppercase; }
.mobile-quick-links { display: none; }

.hero { background: var(--ink); color: var(--cream); display: grid; grid-template-columns: 1.2fr .8fr; min-height: 640px; overflow: hidden; padding: 72px clamp(22px, 7vw, 112px) 92px; position: relative; }
.hero::before { background: linear-gradient(90deg, var(--accent) 0 50%, #8d8376 50%); content: ""; height: 7px; left: 0; position: absolute; right: 0; top: 0; }
.hero-copy { align-self: center; max-width: 760px; position: relative; z-index: 1; }
.eyebrow { color: #81543a; font-size: 12px; font-weight: 800; letter-spacing: .2em; margin: 0 0 18px; text-transform: uppercase; }
.hero .eyebrow { color: #d7b98a; }
h1, h2 { font-family: var(--font-display), sans-serif; font-weight: 400; margin: 0; text-transform: uppercase; }
h1 { font-size: clamp(82px, 11vw, 166px); letter-spacing: -.02em; line-height: .78; }
h1 em { color: #d7b98a; font-style: normal; }
.hero-intro { color: #c7c0b5; font-size: clamp(17px, 2vw, 21px); line-height: 1.65; margin: 38px 0 32px; max-width: 590px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { align-items: center; display: inline-flex; font-size: 12px; font-weight: 800; justify-content: center; letter-spacing: .12em; min-height: 54px; padding: 0 25px; text-transform: uppercase; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--accent); color: var(--ink); }
.button.secondary { border: 1px solid #5d5a55; color: var(--cream); }
.hero-art { align-items: center; display: flex; justify-content: center; min-height: 420px; position: relative; }
.hero-art::before, .hero-art::after { border: 1px solid #3f3e3b; border-radius: 50%; content: ""; height: 470px; position: absolute; width: 470px; z-index: 0; }
.hero-art::after { height: 330px; width: 330px; }
.hero-logo { filter: drop-shadow(0 24px 28px #0009); position: relative; width: clamp(240px, 27vw, 360px); z-index: 2; }
.hero-art p { font: 34px/1 var(--font-display); left: 0; letter-spacing: .08em; position: absolute; top: 15%; z-index: 2; }
.hero-art p strong { color: #d7b98a; font-size: 48px; font-weight: 400; }
.cut-line { bottom: 8%; font-size: 10px; letter-spacing: .3em; position: absolute; right: 0; z-index: 2; }

.trust-strip { align-items: center; background: var(--brown); color: white; display: flex; gap: 40px; justify-content: center; padding: 20px clamp(22px, 5vw, 80px); }
.trust-strip > span { font-family: var(--font-display); font-size: 23px; letter-spacing: .04em; text-transform: uppercase; }
.trust-strip ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.trust-strip li { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.trust-strip li::before { color: #dfbd91; content: "✦"; margin-right: 9px; }

.section { padding: clamp(80px, 10vw, 150px) clamp(22px, 7vw, 112px); }
.menu-section { display: grid; gap: clamp(50px, 8vw, 140px); grid-template-columns: .75fr 1.25fr; }
.section-heading { max-width: 430px; }
h2 { font-size: clamp(54px, 7vw, 96px); line-height: .9; }
.section-heading > p:last-child { color: var(--muted); line-height: 1.7; margin-top: 28px; }
.price-card { background: var(--cream); border-top: 5px solid var(--ink); box-shadow: 18px 18px 0 #d7cabb; padding: 36px 42px; }
.price-row { align-items: baseline; border-bottom: 1px solid #ded4c4; display: flex; gap: 12px; padding: 16px 0; }
.price-row > span:first-child { font-weight: 700; }
.price-row .dots { border-bottom: 2px dotted #b7ab9b; flex: 1; }
.price-row strong { font-family: var(--font-display); font-size: 28px; font-weight: 400; }
.price-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 22px 0 0; }

.styles-section { align-items: end; background: #dfd1bd; display: grid; gap: 24px; grid-template-columns: .8fr 1.25fr .75fr; padding: clamp(70px, 8vw, 120px) clamp(22px, 7vw, 112px); }
.styles-copy { align-self: center; }
.styles-copy h2 { font-size: clamp(48px, 5.5vw, 78px); }
.style-photo { background: var(--ink); margin: 0; overflow: hidden; position: relative; }
.style-photo img { display: block; filter: grayscale(1) contrast(1.05); height: 460px; object-fit: cover; width: 100%; }
.style-photo-primary img { object-position: center top; }
.style-photo-secondary img { height: 300px; }
.style-photo figcaption { background: #151515e6; bottom: 0; color: var(--cream); font-size: 10px; font-weight: 800; left: 0; letter-spacing: .16em; padding: 12px 15px; position: absolute; text-transform: uppercase; }

.story-section { align-items: start; background: var(--brown); color: white; display: grid; gap: 40px; grid-template-columns: auto 1fr 1fr; padding: clamp(80px, 10vw, 145px) clamp(22px, 7vw, 112px); }
.story-section .eyebrow { color: #d7b98a; }
.story-section h2 { font-size: clamp(50px, 6vw, 86px); overflow-wrap: anywhere; }
.story-section > * { min-width: 0; }
.story-section > p { color: #d5dce0; font-size: 17px; line-height: 1.85; margin: 32px 0 0; max-width: 620px; }
.heritage-logo { align-self: center; filter: drop-shadow(0 12px 24px #0005); height: auto; width: clamp(112px, 12vw, 164px); }

.visit-section { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.hours-card, .location-card { min-height: 620px; padding: clamp(36px, 5vw, 70px); }
.hours-card { background: var(--cream); }
.hours-list { margin-top: 42px; }
.hours-list > div { border-bottom: 1px solid #ded4c4; display: flex; font-size: 14px; justify-content: space-between; padding: 13px 0; }
.hours-list strong { font-weight: 800; }
.hours-list .closed { color: #81543a; }
.location-card { background: var(--ink); color: white; overflow: hidden; position: relative; }
.location-card .eyebrow { color: #d7b98a; }
.location-card > p:not(.eyebrow) { color: #aaa49b; }
.map-graphic { border: 1px solid #55514b; height: 220px; margin: 42px 0 30px; overflow: hidden; position: relative; }
.map-graphic::before { background: repeating-linear-gradient(35deg, transparent 0 34px, #363533 35px 38px), repeating-linear-gradient(-45deg, transparent 0 58px, #302f2d 59px 62px); content: ""; inset: 0; position: absolute; transform: scale(1.3); }
.map-graphic span { align-items: center; background: var(--accent); border-radius: 50% 50% 50% 0; color: var(--ink); display: flex; font: 24px var(--font-display); height: 60px; justify-content: center; left: 51%; position: absolute; top: 41%; transform: rotate(-45deg); width: 60px; }
.map-graphic span::first-line { transform: rotate(45deg); }
.button.light { background: var(--cream); color: var(--ink); }

.cta-section { background: #d8c2a0; padding: clamp(80px, 10vw, 145px) 22px; text-align: center; }
.cta-section h2 { font-size: clamp(70px, 11vw, 150px); }
.cta-section > a:not(.facebook-link) { border-bottom: 4px solid var(--brown); display: inline-block; font-family: var(--font-display); font-size: clamp(36px, 5vw, 66px); margin: 25px 0; }
.cta-section > p:not(.eyebrow) { color: #514b43; font-size: 14px; }
.facebook-link { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .12em; margin-top: 18px; text-transform: uppercase; }
footer { align-items: center; background: var(--ink); color: #aaa49b; display: flex; font-size: 11px; justify-content: space-between; letter-spacing: .08em; padding: 30px clamp(22px, 5vw, 80px); text-transform: uppercase; }
.footer-brand { align-items: center; display: flex; gap: 12px; }
.footer-logo { height: 42px; object-fit: contain; width: 42px; }
.mobile-actions { display: none; }

@media (max-width: 800px) {
  .site-header { height: 72px; }
  nav, .header-call { display: none; }
  .updates-banner { align-items: flex-start; flex-wrap: wrap; gap: 4px 14px; padding-bottom: 14px; padding-top: 14px; }
  .updates-banner > span { flex-basis: 100%; }
  .updates-banner p { flex-basis: 100%; }
  .updates-banner a { margin-left: 0; }
  .mobile-quick-links { background: var(--cream); border-bottom: 1px solid #d7cabb; display: grid; grid-template-columns: 1fr 1fr; }
  .mobile-quick-links a { align-items: center; color: var(--ink); display: flex; font-size: 12px; font-weight: 800; justify-content: center; letter-spacing: .11em; min-height: 56px; text-transform: uppercase; }
  .mobile-quick-links a + a { border-left: 1px solid #d7cabb; }
  .mobile-quick-links a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
  .hero { grid-template-columns: 1fr; padding-top: 78px; }
  .hero-art { min-height: 380px; margin-top: 45px; }
  .hero-art::before { height: 360px; width: 360px; }
  .hero-logo { width: min(78vw, 310px); }
  .trust-strip { align-items: flex-start; flex-direction: column; gap: 14px; }
  .trust-strip ul { flex-wrap: wrap; gap: 10px 22px; }
  .menu-section, .visit-section { grid-template-columns: 1fr; }
  .price-card { box-shadow: 9px 9px 0 #d7cabb; padding: 24px; }
  .styles-section { gap: 12px; grid-template-columns: 1.35fr .85fr; }
  .styles-copy { grid-column: 1 / -1; margin-bottom: 18px; }
  .style-photo img, .style-photo-secondary img { height: 240px; }
  .story-section { grid-template-columns: 1fr; }
  .heritage-logo { justify-self: start; width: 112px; }
  .story-section > p { margin-top: 0; }
  .hours-card, .location-card { min-height: auto; }
  footer { align-items: flex-start; flex-direction: column; gap: 12px; padding-bottom: 100px; }
  .mobile-actions { bottom: 0; display: grid; grid-template-columns: 1fr 1fr; left: 0; position: fixed; right: 0; z-index: 20; }
  .mobile-actions a { background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .13em; padding: 18px; text-align: center; text-transform: uppercase; }
  .mobile-actions a:last-child { background: var(--brown); color: white; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }