/* Concept: Sevmar's own brand (black and white, beige accents, wide geometric caps like their menu) with real Sevmar photos; square corners. */
:root {
  --bg: #ffffff; --soft: #f5f1e8; --ink: #000000; --muted: #5f5b53; --line: #e4ded1;
  --mint: #e8dcc3; --mint-deep: #8a7350; --char: #000000; --cream: #faf7f0;
  --f-display: "Jost", "Century Gothic", Futura, sans-serif;
  --f-body: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 17px/1.6 var(--f-body); }
img { max-width: 100%; display: block; }
a { color: inherit; }
.in { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; line-height: 1.12; margin: 0; text-wrap: balance; }
.eyebrow { font: 600 12px var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--mint-deep); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px var(--f-body); letter-spacing: .04em; padding: 14px 22px; border: 2px solid var(--char); background: var(--char); color: #fff; text-decoration: none; cursor: pointer; }
.btn.mint { background: var(--mint); border-color: var(--mint); color: #111; }
.btn.line { background: transparent; color: var(--char); }
.btn.light { background: transparent; border-color: #fff; color: #fff; }
.btn:hover { filter: brightness(1.06); }
:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 2px; }

.concept { background: var(--soft); color: #3d382f; font-size: 14px; }
.concept .in { padding-block: 8px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header .in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo { color: var(--ink); outline: none; -webkit-tap-highlight-color: transparent; }
.logo:focus-visible { outline: 1px solid var(--line); outline-offset: 6px; }
.brandmark { width: 280px; height: auto; display: block; }
.identmark { width: 78%; height: auto; display: block; color: #fff; }
nav.main { display: flex; gap: 24px; font-size: 15px; font-weight: 600; }
nav.main a { text-decoration: none; color: var(--muted); }
nav.main a:hover { color: var(--ink); }
@media (max-width: 960px) { nav.main { display: none; } }
@media (max-width: 520px) { .brandmark { width: 190px; } header .btn { padding: 10px 14px; } }

/* Hero */
.hero { position: relative; isolation: isolate; min-height: 640px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(25,31,30,.88) 0%, rgba(25,31,30,.45) 45%, rgba(25,31,30,.05) 75%); }
.hero .in { width: 100%; padding-block: 120px 56px; }
.hero h1 { font-size: clamp(34px, 6vw, 76px); max-width: 14ch; }
.stackmark { width: clamp(150px, 18vw, 220px); height: auto; display: block; color: #fff; margin-bottom: 28px; }
.markicon { width: 46px; height: auto; display: block; color: var(--ink); margin-bottom: 18px; }
.ask-btn .markicon { width: 24px; margin: 0; color: var(--mint); }
.hero p { font-size: 20px; max-width: 46ch; margin: 18px 0 28px; color: #e9efed; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 700px) { .hero { min-height: 560px; } .hero .ctas { flex-direction: column; align-items: stretch; } .hero .ctas .btn { width: 100%; } }

/* Live status strip */
.status { background: var(--char); color: #fff; }
.status .in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status .in > div { padding: 18px 20px; border-left: 1px solid #333; display: flex; gap: 12px; align-items: center; }
.status .in > div:first-child { border-left: 0; padding-left: 0; }
.dot { width: 10px; height: 10px; background: var(--mint); flex: none; }
.dot.closed { background: #e0705f; }
.status b { font-weight: 600; }
.status small { display: block; color: #bdb6a8; font-size: 14px; }
@media (max-width: 760px) { .status .in { grid-template-columns: minmax(0,1fr); } .status .in > div { border-left: 0; padding-left: 0; border-top: 1px solid #333; } .status .in > div:first-child { border-top: 0; } }

section { padding-block: 88px; }
section h2 { font-size: clamp(28px, 4vw, 44px); margin: 10px 0 14px; }
section .sub { color: var(--muted); max-width: 60ch; margin: 0 0 36px; }

/* Intro split */
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.intro .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intro .pics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.intro .pics img:nth-child(2) { margin-top: 48px; }
.intro p { color: var(--muted); }
.chev { width: 46px; margin-bottom: 18px; }
@media (max-width: 820px) { .intro { grid-template-columns: minmax(0,1fr); gap: 32px; } }

/* Concepts */
.concepts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cc { background: var(--cream); border: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr; text-decoration: none; }
.cc img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cc .soon { aspect-ratio: 4 / 5; background: var(--char); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: var(--mint); padding: 24px; }
.cc .soon .cs { font: 500 13px var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: #fff; border: 1px solid #444; padding: 6px 12px; }
.cc div.t { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.cc h3 { font-size: 20px; }
.cc p { margin: 0; color: var(--muted); font-size: 15px; }
.cc .where { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-deep); font-weight: 600; }
.cc .go { margin-top: auto; padding-top: 10px; font-weight: 600; color: var(--ink); }
@media (max-width: 960px) { .concepts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .concepts { grid-template-columns: minmax(0,1fr); } .cc img, .cc .soon { aspect-ratio: 16 / 10; } }

.cc .cv { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--char); }
.cc .cv img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; filter: brightness(.42) saturate(.85); }
.cc .cv.dark img { filter: brightness(.22) saturate(.6); }
.cc .cv .lg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #fff; padding: 12%; text-align: center; }
.cc .cv .lg > svg { width: 62%; height: auto; }
.cc .cv .lg img.lgimg { position: static; inset: auto; }
.cc .cv.dark .lg { color: #fff; }
.cc .cv .lgimg { position: static; width: 82%; height: auto; filter: none; aspect-ratio: auto; object-fit: contain; }
.cc .wm { font: 500 clamp(22px, 2.4vw, 30px) var(--f-display); letter-spacing: .3em; text-transform: uppercase; }
.cc .wm-joc { font-family: "Bodoni Moda", Didot, Georgia, serif; letter-spacing: .02em; text-transform: none; font-size: clamp(34px, 3.6vw, 46px); font-style: italic; line-height: 1; }
.cc .wm small { display: block; font: 500 11px var(--f-display); letter-spacing: .32em; text-transform: uppercase; font-style: normal; margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) { .cc .cv img { transition: transform .6s, filter .4s; } .cc:hover .cv img { transform: scale(1.04); filter: brightness(.5); } }
@media (max-width: 520px) { .cc .cv { aspect-ratio: 16 / 10; } }

/* Menu */
.menu-sec { background: var(--soft); }
.menu-top { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.tabs, .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button, .chips button { font: 600 14px var(--f-body); padding: 10px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; letter-spacing: .03em; }
.tabs button[aria-selected=true] { background: var(--char); border-color: var(--char); color: #fff; }
.chips button[aria-pressed=true] { background: var(--mint); border-color: var(--mint); color: #111; }
.chips span { font-size: 13px; color: var(--muted); align-self: center; margin-right: 4px; }
.menu-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
@media (max-width: 900px) { .menu-grid { grid-template-columns: minmax(0,1fr); } .menu-photo { display: none; } }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-content: start; }
@media (max-width: 640px) { .items { grid-template-columns: minmax(0,1fr); } }
.item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.item .row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.item b { font: 600 17px var(--f-body); }
.item .price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.item p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.tags { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 2px; }
.tags i { font: 600 10px var(--f-body); font-style: normal; letter-spacing: .06em; padding: 2px 5px; background: #efe7d6; color: #5e4d33; }
.menu-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; position: sticky; top: 90px; }
.menu-note { font-size: 14px; color: var(--muted); margin-top: 20px; }
.empty { padding: 24px 0; color: var(--muted); }

/* Happenings */
.happen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.happen .event { grid-template-columns: minmax(0,1fr); grid-template-rows: auto 1fr; }
.happen .event img { aspect-ratio: 4 / 3; }
.event { display: grid; grid-template-columns: 180px minmax(0, 1fr); background: var(--cream); border: 1px solid var(--line); }
.event img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.event > div { padding: 24px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-start; }
.event > div > div:last-child { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.btn { white-space: nowrap; }
.event h3 { font-size: 18px; }
.event p { margin: 0; color: var(--muted); }
@media (max-width: 960px) { .happen { grid-template-columns: minmax(0,1fr); } }
@media (min-width: 600px) and (max-width: 960px) { .happen .event { grid-template-columns: 220px minmax(0,1fr); grid-template-rows: auto; } .happen .event img { aspect-ratio: auto; height: 100%; } }
@media (max-width: 460px) { .event { grid-template-columns: 120px minmax(0,1fr); } .event > div { padding: 18px; } }

/* Gallery */
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 8px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .w2 { grid-column: span 2; } .mosaic .h2 { grid-row: span 2; }
@media (max-width: 760px) { .mosaic { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 160px; } }

/* Catering builder */
.cater-sec { background: var(--char); color: #fff; }
.cater-sec .sub { color: #bdb6a8; }
.cater-sec .eyebrow { color: var(--mint); }
.cater { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .cater { grid-template-columns: minmax(0,1fr); } }
.trays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .trays { grid-template-columns: minmax(0,1fr); } }
.tray { background: #141414; padding: 14px 16px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: center; }
.tray b { font-weight: 600; }
.tray small { color: #bdb6a8; grid-column: 1; }
.qty { grid-row: span 2; display: flex; align-items: center; gap: 4px; }
.qty button { width: 34px; height: 34px; border: 1px solid #555; background: transparent; color: #fff; font-size: 18px; cursor: pointer; }
.qty output { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.tray.on { outline: 2px solid var(--mint); }
.sizebar { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.sizebar button { font: 600 14px var(--f-body); padding: 9px 14px; border: 1px solid #555; background: transparent; color: #fff; cursor: pointer; }
.sizebar button[aria-pressed=true] { background: var(--mint); color: var(--char); border-color: var(--mint); }
.summary { background: #fff; color: var(--ink); padding: 24px; display: grid; gap: 12px; position: sticky; top: 90px; }
.summary h3 { font-size: 18px; }
.summary .line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; font-size: 15px; }
.summary .total { border-top: 1px solid var(--line); padding-top: 12px; font-weight: 600; font-size: 18px; }
.summary label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.summary input { font: 16px var(--f-body); padding: 10px; border: 1px solid var(--line); min-width: 0; }
.summary .hint { font-size: 13px; color: var(--muted); }
.toast { background: #efe7d6; color: var(--ink); padding: 12px; font-size: 14px; }

/* Owners + Jocelyn's */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.panel { position: relative; isolation: isolate; min-height: 460px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; overflow: hidden; }
.panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(25,31,30,.9) 0%, rgba(25,31,30,.1) 65%); }
.panel h3 { font-size: 26px; margin-bottom: 8px; }
.panel p { margin: 0 0 18px; color: #e3e9e7; max-width: 44ch; }
.panel.joc { background: var(--mint); color: var(--char); }
.panel.joc::before { display: none; }
.panel.joc p { color: #23302d; }
.panel.joc .btn { align-self: flex-start; }
@media (max-width: 820px) { .duo { grid-template-columns: minmax(0,1fr); } .panel { min-height: 380px; } }

/* Visit */
.visit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.visit h3 { font-size: 15px; margin-bottom: 12px; }
.hours { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: 4px 16px; font-variant-numeric: tabular-nums; font-size: 15px; }
.hours .hh { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.hours .today { font-weight: 600; color: var(--mint-deep); }
@media (max-width: 760px) { .visit { grid-template-columns: minmax(0,1fr); } }
footer { background: var(--soft); padding-block: 32px; font-size: 14px; color: var(--muted); }
footer .in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Assistant demo */
.ask-btn { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20; display: flex; align-items: center; gap: 10px; background: var(--char); color: #fff; border: 0; padding: 14px 18px; font: 600 15px var(--f-body); cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.ask-btn img { width: 22px; }
.ask { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 20; width: min(380px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0,0,0,.18); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(560px, calc(100vh - 120px)); }
.ask .head { background: var(--char); color: #fff; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.ask .head b { font: 500 15px var(--f-display); letter-spacing: .2em; text-transform: uppercase; }
.ask .head button { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
.ask .log { padding: 14px; overflow-y: auto; display: grid; gap: 10px; align-content: start; font-size: 15px; }
.msg { padding: 10px 12px; max-width: 88%; }
.msg.bot { background: var(--soft); }
.msg.me { background: #efe7d6; justify-self: end; }
.ask .qs { padding: 12px; border-top: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.ask .qs button { font: 600 13px var(--f-body); padding: 8px 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.ask .qs small { width: 100%; color: var(--muted); font-size: 12px; }
@media (prefers-reduced-motion: no-preference) { .mosaic img, .panel > img { transition: transform .6s; } .mosaic img:hover { transform: scale(1.03); } }

/* Multi-page additions */
.panel > img { object-position: center 18%; }
.panel.faces { min-height: 560px; }
@media (min-width: 900px) { .panel.faces > img { object-position: center 12%; } }
.hours.two { grid-template-columns: auto auto; }
.head-actions { display: flex; gap: 8px; align-items: center; }
.head-actions .btn { padding: 11px 16px; }
.logo img.hdr { height: 44px; width: auto; display: block; }
.logo img.hdr.wide { height: 34px; }
.logo img.hdr.mk { height: 22px; filter: brightness(0); }
@media (max-width: 520px) { .logo img.hdr { height: 36px; } .logo img.hdr.wide { height: 26px; } .logo img.hdr.mk { height: 16px; } }
.family { background: var(--char); color: #fff; }
.family .in { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: center; padding-block: 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.family a { text-decoration: none; color: #cfd6d5; }
.family a[aria-current=page] { color: var(--mint); }
.hero .heromark { width: clamp(220px, 34vw, 420px); height: auto; display: block; margin-bottom: 26px; }
.note-line { font-size: 15px; color: var(--muted); border-left: 2px solid var(--mint); padding-left: 12px; max-width: 60ch; }
.rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.room { background: var(--cream); border: 1px solid var(--line); padding: 26px; display: grid; gap: 8px; }
.room h3 { font-size: 18px; }
.room .big { font: 500 34px var(--f-display); letter-spacing: .06em; }
.room p { margin: 0; color: var(--muted); }
@media (max-width: 700px) { .rooms { grid-template-columns: minmax(0,1fr); } }
.pkg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 16px; }
.pkg div { background: #fff; padding: 18px 20px; }
.pkg b { display: block; font-size: 15px; }
.pkg span { font-variant-numeric: tabular-nums; color: var(--mint-deep); font-weight: 700; }
@media (max-width: 700px) { .pkg { grid-template-columns: minmax(0,1fr); } }
.shop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 860px) { .shop { grid-template-columns: minmax(0,1fr); } }
body.night { --bg: #000000; --soft: #111111; --ink: #f4f1ea; --muted: #a9b5b3; --line: #242424; --cream: #111111; background: var(--bg); color: var(--ink); }
body.night header { background: rgba(0,0,0,.92); border-bottom-color: var(--line); }
body.night .btn.line { color: #fff; border-color: #fff; }
body.night input { background: #111111; color: #fff; border: 1px solid var(--line); }
@media (max-width: 700px) {
    .family .in { flex-direction: column; gap: 14px; padding-block: 24px; }
  .hero::before { background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.35) 100%); }
}
.status .dot { display: none; }
.status b.closed { color: #f0a493; }
.status b#open-now:not(.closed) { color: var(--mint); }
body.night .concept { background: #111111; color: #a9b5b3; }
@media (max-width: 520px) { body.night .logo img.hdr.wide { height: 18px; } }
nav.main a { white-space: nowrap; }
.logo img.hdr.wide { height: 26px; }
@media (min-width: 701px) { .hero::before { background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.15) 100%), linear-gradient(0deg, rgba(0,0,0,.6) 0%, transparent 45%); } }
.room.ph { padding: 0; grid-template-rows: auto 1fr; gap: 0; }
.room.ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.room.ph > div { padding: 22px 24px 24px; display: grid; gap: 6px; }
.venues { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 220px 220px; gap: 8px; margin-top: 16px; }
.venues figure { margin: 0; position: relative; overflow: hidden; }
.venues .v-big { grid-row: span 2; }
.venues img { width: 100%; height: 100%; object-fit: cover; }
.venues figcaption { position: absolute; left: 0; bottom: 0; background: var(--char); color: #fff; font: 600 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; }
@media (max-width: 700px) { .venues { grid-template-columns: minmax(0,1fr); grid-template-rows: 300px 200px 200px; } .venues .v-big { grid-row: auto; } }
.inquire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; margin-top: 56px; align-items: start; }
.inquire .summary { position: static; }
.inquire .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.summary select, .summary textarea { font: 16px var(--f-body); padding: 10px; border: 1px solid var(--line); min-width: 0; background: #fff; color: var(--ink); width: 100%; }
@media (max-width: 860px) { .inquire { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 420px) { .inquire .two { grid-template-columns: minmax(0,1fr); } }
.tray .tp { grid-column: 1 / -1; font-variant-numeric: tabular-nums; color: var(--mint); font-weight: 600; }
.tray .tp small { color: #bdb6a8; font-weight: 400; }
@media (max-width: 900px) { .cater .summary { order: -1; position: static; } .trays { grid-template-columns: repeat(2, minmax(0,1fr)); } .tray { padding: 12px; } .tray b { font-size: 15px; } .tray .tp { font-size: 14px; } }
@media (max-width: 380px) { .trays { grid-template-columns: minmax(0,1fr); } }
.pkg b small { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.pl { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.pl li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--line); padding-bottom: 4px; }
.pl li span { font-variant-numeric: tabular-nums; color: var(--mint-deep); font-weight: 700; }
@media (min-width: 900px) { .panel.faces { min-height: 620px; } .panel.faces > img { object-position: 70% 32%; } }
/* Concept cards: only the photo is darkened (never the logo), and it stays dark on hover */
.cc .cv > img, .cc:hover .cv > img { filter: brightness(.36) saturate(.85); }
.cc .cv.dark > img, .cc:hover .cv.dark > img { filter: brightness(.22) saturate(.6); }
@media (prefers-reduced-motion: no-preference) { .cc:hover .cv > img { transform: scale(1.03); } }
.cc .cv .lg img, .cc:hover .cv .lg img { filter: none !important; transform: none !important; }
.ev-body { color: var(--muted); }
.ev-body .pl { margin: 0; }
.ev-body .pl li { color: var(--ink); }
.happen.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .happen.two { grid-template-columns: minmax(0, 1fr); } }
.igs { display: flex; gap: 18px; flex-wrap: wrap; }
.ig { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; }
.ig:hover span { text-decoration: underline; }
.happen.one { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
@media (min-width: 700px) { .happen.one .event { grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: auto; } .happen.one .event img { aspect-ratio: auto; height: 100%; } }
/* Brochure-style menus (packages, trays): plain lines, no boxes */
.menucols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; margin-top: 8px; }
@media (max-width: 760px) { .menucols { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.mblock h3 { font-size: 17px; letter-spacing: .18em; padding-bottom: 10px; border-bottom: 1px solid var(--ink); margin-bottom: 4px; }
.msub { font-size: 14px; color: var(--muted); margin: 8px 0 4px; }
.mlist { list-style: none; margin: 0; padding: 0; }
.mlist li { display: flex; gap: 16px; align-items: baseline; padding: 9px 0; }
.mlist .mn { flex: 1; }
.mlist .mp { font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.mlist .mh { padding: 0 0 6px; border-bottom: 1px solid var(--ink); font: 500 12px var(--f-display); letter-spacing: .18em; text-transform: uppercase; }
.mblock.wide { max-width: 640px; }
.hero.short { min-height: 520px; }
@media (max-width: 700px) { .hero.short { min-height: 0; } .hero.short .in { padding-block: 72px 40px; } }
#concepts { padding-top: 64px; }
/* Order now chooser (three Toast ordering pages) */
details.order { position: relative; }
details.order > summary { list-style: none; cursor: pointer; }
details.order > summary::-webkit-details-marker { display: none; }
.order-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 240px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.18); display: grid; }
.hero .order-menu { left: 0; right: auto; }
.order-menu a { display: grid; padding: 14px 18px; text-decoration: none; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
.order-menu a:last-child { border-bottom: 0; }
.order-menu a:hover { background: var(--soft); }
.order-menu small { font-weight: 400; color: var(--muted); font-size: 13px; }
@media (max-width: 700px) { .hero details.order, .hero details.order > summary { width: 100%; } .hero .order-menu { right: 0; } }
.hero .order-menu { position: static; margin-top: 6px; box-shadow: none; }
/* Smooth, eased scrolling to sections, landing below the sticky header */
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Header: chevron icon on wide screens, centered wordmark on phones with actions in a bottom bar */
.logo img.hdr.icon { height: 30px; width: auto; }
.only-m { display: none !important; }
@media (max-width: 700px) {
  .only-m { display: block !important; }
  .only-d { display: none !important; }
  header .in { justify-content: center; }
  .logo img.hdr.wide { height: 22px; }
  .head-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 8px; background: #fff; border-top: 1px solid var(--line); padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .head-actions .btn, .head-actions .btn.line, .head-actions details.order, .head-actions details.order > summary { display: flex; width: 100%; justify-content: center; }
  .head-actions .order-menu { top: auto; bottom: calc(100% + 8px); right: 0; left: auto; }
  body { padding-bottom: 76px; }
  body.night .head-actions { background: #000000; border-top-color: #242424; }
}
@media (max-width: 700px) { header, body.night header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; } body.night header { background: #000000; } }
@media (max-width: 700px) { .logo img.hdr.wide { height: 17px; } .logo img.hdr { height: 34px; } .logo img.hdr.mk { height: 15px; } }
/* Black header, white logo and text */
header, body.night header { background: #000000; border-bottom: 1px solid #000000; backdrop-filter: none; -webkit-backdrop-filter: none; }
header .in { padding-block: 20px; }
header nav.main a { color: rgba(255,255,255,.72); }
header nav.main a:hover { color: #fff; }
header .btn.line { color: #fff; border-color: rgba(255,255,255,.7); background: transparent; }
header .btn.line:hover { border-color: #fff; }
.logo img.hdr { height: 38px; }
.logo img.hdr.wide { height: 15px; }
.logo img.hdr.mk { height: 14px; filter: none; }
@media (max-width: 700px) {
  header .in { padding-block: 16px; }
  .logo img.hdr { height: 32px; }
  .logo img.hdr.wide { height: 14px; }
  .logo img.hdr.mk { height: 13px; }
  .head-actions { background: #000000; border-top-color: #000000; }
  header { background: #000000; }
}
.hero .heromark { width: clamp(220px, 30vw, 380px); height: auto; display: block; margin-bottom: 26px; }
.hero .heromark.mk { width: clamp(220px, 34vw, 440px); }
@media (max-width: 700px) { .hero .heromark { width: 220px; margin-bottom: 20px; } }

/* Hero headlines: two calm lines, not a tall stack */
.hero h1, .hero .in h1 { font-size: clamp(30px, 4.2vw, 58px); max-width: 22ch; letter-spacing: .12em; line-height: 1.12; }
@media (max-width: 700px) { .hero h1, .hero .in h1 { font-size: 30px; letter-spacing: .1em; } }
/* Accent words: elegant italic serif in beige (deeper beige on light backgrounds) */
h1 em, h2 em, h3 em { font-family: "Cormorant Garamond", "Didot", Georgia, serif; font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 1.14em; line-height: 1; color: var(--mint-deep); }
.hero h1 em, .hero h2 em, .panel h3 em, .cater-sec h2 em, body.night h1 em, body.night h2 em { color: var(--mint); }
/* Button hovers: outline buttons fill, solid buttons turn to outline */
.btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn:hover { filter: none; }
.btn:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.mint:hover { background: transparent; color: var(--ink); border-color: var(--mint-deep); }
.btn.line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.light:hover { background: #fff; color: #000; border-color: #fff; }
/* on dark backgrounds */
.hero .btn:not(.light):not(.mint):hover, .panel .btn:not(.light):not(.mint):hover, .cater-sec .btn:not(.light):not(.mint):hover { color: #fff; border-color: #fff; }
.hero .btn.mint:hover, .panel .btn.mint:hover, header .btn.mint:hover, .head-actions .btn.mint:hover, body.night .btn.mint:hover, .cater-sec .btn.mint:hover { color: var(--mint); border-color: var(--mint); background: transparent; }
header .btn.line:hover, .head-actions .btn.line:hover, body.night .btn.line:hover { background: #fff; color: #000; border-color: #fff; }
details.order[open] > summary.btn.mint { background: transparent; color: var(--mint); border-color: var(--mint); }
/* Balance: Cormorant's small x-height reads smaller than Jost capitals, so scale it up to match */
h1 em, h2 em, h3 em { font-size: 1.32em; font-weight: 500; letter-spacing: .01em; vertical-align: -0.04em; }
/* Specials & events: full photo cards with white type and a beige accent */
.event, .happen .event, .happen.one .event { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; background: #000; border: 0; overflow: hidden; color: #fff; grid-template-columns: none; }
.event > img, .happen .event img, .happen.one .event img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; z-index: -2; }
.event::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.1) 80%); }
.event > div { padding: 32px; gap: 12px; }
.event .eyebrow { color: var(--mint); letter-spacing: .28em; }
.event h3 { font-size: clamp(24px, 2.4vw, 32px); color: #fff; line-height: 1.15; }
.event h3 em { color: var(--mint); }
.event .ev-body { color: rgba(255,255,255,.82); }
.event .ev-body .pl li { color: #fff; border-bottom-color: rgba(255,255,255,.2); }
.happen.one { max-width: none; }
.happen.one .event { min-height: 480px; }
.happen.one .event > div { max-width: 640px; padding: 48px; }
.happen.one .event h3 { font-size: clamp(30px, 3.6vw, 48px); }
@media (prefers-reduced-motion: no-preference) { .event > img { transition: transform .8s ease; } .event:hover > img { transform: scale(1.04); } }
@media (max-width: 700px) { .event, .happen.one .event { min-height: 380px; } .event > div, .happen.one .event > div { padding: 24px; } }
.happen.one .event::before { background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.05) 85%); } @media (max-width: 700px) { .happen.one .event::before { background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.1) 90%); } }
/* Phone: calm, centered, spacious (ordering and reserving live in the bottom bar) */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .hero, .hero.short { min-height: 78vh; align-items: center; }
  .hero::before { background: linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.66) 50%, rgba(0,0,0,.58) 100%); }
  .hero .in, .hero.short .in { padding-block: 96px 88px; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero h1, .hero .in h1 { font-size: 24px; letter-spacing: .22em; line-height: 1.5; max-width: 16ch; margin-inline: auto; }
  .hero h1 em { display: block; font-size: 2.1em; letter-spacing: 0; line-height: 1.05; margin-top: 6px; }
  .hero p { font-size: 15px; line-height: 1.7; max-width: 30ch; margin: 22px auto 34px; color: rgba(255,255,255,.78); }
  .hero .heromark { margin-inline: auto; width: 180px; margin-bottom: 30px; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero .ctas { justify-content: center; }
  .hero .ctas > *:not(.keep-m) { display: none !important; }
  .hero .ctas .keep-m { width: auto !important; padding: 14px 28px; }
  section { padding-block: 72px; }
  section h2 { font-size: 22px; letter-spacing: .16em; line-height: 1.45; margin: 12px 0 16px; }
  section h2 em { display: block; font-size: 1.9em; letter-spacing: 0; line-height: 1.1; margin-top: 2px; }
  section .sub { font-size: 15px; line-height: 1.7; }
  .eyebrow { font-size: 11px; letter-spacing: .26em; }
  #concepts { padding-top: 72px; }
  .concepts { gap: 20px; }
}
/* Phone header: centered logo with Reservations / Order now right under it (no bottom bar) */
@media (max-width: 700px) {
  header .in { flex-direction: column; gap: 12px; padding-block: 14px 12px; }
  .head-actions { position: static; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; width: 100%; padding: 0; background: transparent; border: 0; }
  .head-actions .btn, .head-actions details.order > summary { padding: 10px 12px; font-size: 14px; }
  .head-actions .order-menu { top: calc(100% + 8px); bottom: auto; right: 0; left: auto; }
  body { padding-bottom: 0; }
  html { scroll-padding-top: 130px; }
}
.rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .rooms { grid-template-columns: minmax(0,1fr); } }
/* Identity: let the building show, text sits below it */
.hero.idhero { min-height: 100vh; align-items: flex-end; }
.hero.idhero::before { background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 32%, rgba(0,0,0,0) 62%); }
.hero.idhero .in { padding-block: 0 64px; }
.hero.idhero h1 { font-size: clamp(26px, 3vw, 42px); }
@media (max-width: 700px) { .hero.idhero { min-height: 92vh; align-items: flex-end; } .hero.idhero > img { object-position: 52% 50% !important; } .hero.idhero .in { padding-block: 0 56px; } }
@media (max-width: 700px) { body.night .logo img.hdr.wide { height: 14px; } }
@media (max-width: 700px) { .hero.idhero > img { object-position: 34% 50% !important; } }
/* Scroll reveal: soft fade-up as content enters the screen (only when JS adds .rv, never for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(14px); transition: opacity 1.3s ease, transform 1.3s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0s); }
  .rv.in-view { opacity: 1; transform: none; }
}
/* Locations and contacts: one tidy block per place, phone on its own line */
.visit { gap: 48px; }
.visit h3 { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.loc { display: grid; gap: 2px; margin-bottom: 22px; line-height: 1.55; }
.loc:last-child { margin-bottom: 0; }
.loc b { font: 600 13px var(--f-body); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
.loc span { color: var(--muted); }
.loc .tel { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: .02em; margin-top: 4px; }
.loc .tel:hover { text-decoration: underline; }
.loc small { color: var(--muted); font-size: 13px; margin-top: 8px; max-width: 34ch; }
.lead-s { margin: 0 0 18px; color: var(--muted); max-width: 34ch; }
.hours { font-size: 15px; }
/* Identity intro: the night "switches on" (photo fades up from black and settles), then the words arrive in order */
@media (prefers-reduced-motion: no-preference) {
  .hero.idhero > img { animation: idLights 3.2s cubic-bezier(.2,.6,.2,1) both, idSettle 9s cubic-bezier(.15,.55,.25,1) both; }
  .hero.idhero .eyebrow { animation: idTrack 2s cubic-bezier(.2,.6,.2,1) .9s both; }
  .hero.idhero h1 { animation: idRise 1.6s cubic-bezier(.2,.6,.2,1) 1.4s both; }
  .hero.idhero h1 em { display: inline-block; animation: idRise 1.8s cubic-bezier(.2,.6,.2,1) 2.1s both, idGlow 4s ease-in-out 3.9s infinite alternate; }
  .hero.idhero p { animation: idRise 1.4s cubic-bezier(.2,.6,.2,1) 2.7s both; }
  .hero.idhero .ctas { animation: idRise 1.4s cubic-bezier(.2,.6,.2,1) 3.1s both; }
}
@keyframes idLights { 0% { opacity: 0; filter: brightness(.15) saturate(.6); } 55% { opacity: 1; } 100% { opacity: 1; filter: none; } }
@keyframes idSettle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes idTrack { from { opacity: 0; letter-spacing: .7em; } to { opacity: 1; letter-spacing: .32em; } }
@keyframes idRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes idGlow { from { text-shadow: 0 0 0 rgba(232,220,195,0); } to { text-shadow: 0 0 22px rgba(232,220,195,.35); } }
.hero.idhero { background: #000; }
/* Trying round (pill) buttons; cards, photos and forms stay square */
.btn, details.order > summary.btn, .tabs button, .chips button { border-radius: 999px; }
.btn { padding-inline: 26px; }
.order-menu { border-radius: 14px; overflow: hidden; }
/* Identity intro text: soft focus pull, blurred to sharp */
@media (prefers-reduced-motion: no-preference) {
  .hero.idhero .eyebrow { animation: idFocus 2.2s cubic-bezier(.25,.6,.25,1) .9s both; }
  .hero.idhero h1 { animation: idFocus 2.2s cubic-bezier(.25,.6,.25,1) 1.5s both; }
  .hero.idhero h1 em { animation: idFocus 2.4s cubic-bezier(.25,.6,.25,1) 2.2s both, idGlow 4s ease-in-out 4.6s infinite alternate; }
  .hero.idhero p { animation: idFocus 2s cubic-bezier(.25,.6,.25,1) 2.9s both; }
  .hero.idhero .ctas { animation: idFocus 2s cubic-bezier(.25,.6,.25,1) 3.3s both; }
}
@keyframes idFocus { 0% { opacity: 0; filter: blur(14px); transform: scale(1.03); } 60% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: none; } }
/* Photo panels (events teaser, careers): stronger, even shade so text always reads */
.panel::before { background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.25) 100%), linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 50%); }
.panel h3 em { color: var(--mint); }
@media (max-width: 700px) {
  .panel, .panel.faces { min-height: 0; padding: 72px 24px 56px; text-align: center; align-items: center; justify-content: center; }
  .panel::before { background: rgba(0,0,0,.68); }
  .panel .eyebrow { font-size: 10px; letter-spacing: .24em; line-height: 1.8; max-width: 26ch; }
  .panel h3, .panel h3[style] { font-size: 22px !important; letter-spacing: .16em; line-height: 1.45; margin: 10px 0 14px; }
  .panel h3 em { display: block; font-size: 1.9em; letter-spacing: 0; line-height: 1.1; margin-top: 4px; }
  .panel p { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.85); max-width: 30ch; margin: 0 auto 26px; }
  .panel > div[style*="display:flex"], .panel .btn { justify-content: center; align-self: center !important; }
  .panel > div[style*="display:flex"] .btn:not(:first-child) { display: none; }
}