:root { --forest:#163c3a; --deep:#102c2b; --cream:#f5f0e6; --paper:#fffdf8; --coral:#e56f52; --ink:#1b2421; --muted:#6d756f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:400 1rem/1.65 "DM Sans",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
.concept-bar { min-height:36px; padding:7px clamp(18px,4vw,60px); display:flex; justify-content:space-between; gap:20px; align-items:center; color:#d9e4df; background:#0e2625; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.concept-bar a { color:white; }
.demo-header { height:92px; padding:0 clamp(22px,5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:38px; background:var(--cream); }
.cafe-brand { display:flex; align-items:center; gap:13px; justify-self:start; }
.brand-mark { width:43px; height:43px; display:grid; place-items:center; border:1px solid var(--forest); border-radius:50%; font:400 .82rem/1 "Gloock",serif; color:var(--forest); }
.brand-mark span,.brand-name i,.footer-name i { color:var(--coral); font-style:normal; }
.brand-name { display:flex; flex-direction:column; font:400 1.05rem/1.05 "Gloock",serif; }
.brand-name small { margin-top:5px; color:var(--muted); font:500 .53rem/1 "DM Sans",sans-serif; text-transform:uppercase; letter-spacing:.3em; }
.demo-header nav { display:flex; gap:32px; font-size:.88rem; }
.reserve-link { justify-self:end; padding-bottom:3px; border-bottom:1px solid var(--forest); font-size:.88rem; font-weight:600; }
.cafe-hero { height:calc(100vh - 128px); min-height:640px; position:relative; color:white; }
.cafe-hero > img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,30,31,.62),rgba(8,30,31,.08) 72%),linear-gradient(0deg,rgba(8,30,31,.48),transparent 45%); }
.hero-copy { position:absolute; inset:0; padding:clamp(48px,8vw,115px) clamp(24px,7vw,105px); display:flex; flex-direction:column; justify-content:center; }
.hero-copy > p,.kicker { margin:0 0 25px; font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,h3,.footer-name { font-family:"Gloock",serif; font-weight:400; }
h1 { margin:0; max-width:930px; font-size:clamp(4rem,8vw,8.6rem); line-height:.88; letter-spacing:-.055em; }
h1 em { color:#f3a68f; font-style:italic; }
.hero-bottom { margin-top:auto; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.hero-bottom a { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.65); display:flex; gap:90px; }
.hero-bottom > span { font-size:.88rem; text-align:right; }
.section-pad { padding:clamp(90px,11vw,170px) clamp(24px,7vw,105px); }
.story { display:grid; grid-template-columns:.4fr 1.45fr .45fr; gap:55px; align-items:start; background:var(--cream); }
.story h2,.menu-heading h2,.reserve h2,.visit h2 { margin:0; font-size:clamp(2.9rem,5.8vw,6.4rem); line-height:.96; letter-spacing:-.045em; }
.story div > p { margin:34px 0 0; max-width:620px; color:var(--muted); font-size:1.08rem; }
.story-note { align-self:end; padding-top:18px; border-top:1px solid #c9c2b6; color:var(--muted); font-size:.83rem; }
.menu-section { background:var(--paper); }
.menu-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; padding-bottom:42px; border-bottom:1px solid #d9d5cb; }
.menu-heading h2 { font-size:clamp(2.8rem,5vw,5.4rem); }
.menu-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.menu-tabs button { border:1px solid #c9c5bb; background:transparent; color:var(--ink); padding:10px 17px; border-radius:99px; cursor:pointer; }
.menu-tabs button.active { color:white; background:var(--forest); border-color:var(--forest); }
.menu-list { display:grid; grid-template-columns:1fr 1fr; gap:0 70px; }
.menu-item { display:grid; grid-template-columns:1fr auto; gap:20px; padding:34px 0; border-bottom:1px solid #ddd9d0; }
.menu-item h3 { margin:0 0 7px; font-size:1.25rem; }
.menu-item p { margin:0; color:var(--muted); font-size:.9rem; }
.menu-item strong { color:var(--coral); font-weight:600; }
.order-cta,.visit-copy > a,.reservation-result a { margin-top:42px; display:inline-flex; gap:80px; padding:13px 0; border-bottom:1px solid currentColor; font-weight:600; }
.visit { display:grid; grid-template-columns:1.15fr .85fr; min-height:720px; background:var(--forest); color:white; }
.visit-image { overflow:hidden; }
.visit-image img { width:100%; height:100%; object-fit:cover; object-position:left center; transform:scale(1.18); display:block; }
.visit-copy { padding:clamp(70px,8vw,120px); display:flex; flex-direction:column; justify-content:center; }
.visit-copy h2 { color:#f7dbc9; }
.details-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:65px; padding-top:28px; border-top:1px solid rgba(255,255,255,.2); }
.details-grid span { color:#aebfba; font-size:.72rem; text-transform:uppercase; letter-spacing:.13em; }
.details-grid p { margin:8px 0 0; }
.reserve { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(55px,10vw,150px); background:var(--cream); }
.reserve > div > p:last-child { max-width:520px; color:var(--muted); }
.reserve form { padding:clamp(25px,4vw,50px); background:var(--paper); border:1px solid #d8d1c5; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.reserve label { display:block; margin-bottom:20px; font-size:.82rem; font-weight:600; }
.reserve input,.reserve select { width:100%; min-height:52px; margin-top:7px; padding:12px 14px; border:1px solid #cfc9be; border-radius:0; background:white; }
.reserve input:focus,.reserve select:focus { outline:2px solid var(--coral); outline-offset:1px; }
.reserve form button,.reservation-result > a { width:100%; min-height:54px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:0; background:var(--forest); color:white; cursor:pointer; font-weight:600; }
.demo-note { color:var(--muted); font-size:.76rem; text-align:center; }
.reservation-result { align-self:start; padding:clamp(32px,5vw,58px); background:var(--paper); border:1px solid #d8d1c5; }
.reservation-result h3 { font-size:2rem; margin:0 0 18px; }
.reservation-result > a { margin-top:28px; border:0; }
.reservation-result > button { margin-top:22px; border:0; background:transparent; color:var(--forest); text-decoration:underline; cursor:pointer; }
footer { padding:48px clamp(24px,7vw,105px); display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:50px; background:var(--deep); color:#b8c7c3; font-size:.82rem; }
.footer-name { color:white; font-size:1.45rem; }
footer a { color:white; border-bottom:1px solid rgba(255,255,255,.3); }
@media(max-width:850px){.demo-header{grid-template-columns:1fr auto}.demo-header nav{display:none}.story{grid-template-columns:1fr}.story-note{align-self:start}.menu-heading{align-items:start;flex-direction:column}.menu-list{grid-template-columns:1fr}.visit,.reserve{grid-template-columns:1fr}.visit-image{height:480px}.visit-copy{padding:70px 28px}.reserve{gap:50px}footer{grid-template-columns:1fr;align-items:start;gap:16px}}
@media(max-width:540px){.concept-bar{align-items:flex-start;flex-direction:column;gap:2px}.cafe-hero{height:760px}.hero-copy{padding-top:75px}.hero-bottom{align-items:flex-start;flex-direction:column}.hero-bottom>span{text-align:left}.story h2,.reserve h2{font-size:3.25rem}.field-row,.details-grid{grid-template-columns:1fr}.demo-header{height:82px}.brand-name{display:none}.reserve-link{font-size:.8rem}.visit-image{height:360px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}