:root { --navy:#12345b; --blue:#174b7a; --butter:#f7d96f; --coral:#ef654f; --sky:#dcebf3; --paper:#fffdf7; --ink:#10273e; --muted:#596775; --line:#cbd8df; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
.demo-bar { padding:9px max(24px,calc((100% - 1280px)/2)); display:flex; justify-content:space-between; color:#fff; background:var(--coral); font-size:.73rem; font-weight:800; letter-spacing:.03em; }
.demo-bar a { text-decoration:underline; text-underline-offset:3px; }
.cafe-header { width:min(1280px,calc(100% - 48px)); min-height:92px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.cafe-logo { font-family:Georgia,serif; font-size:1.55rem; font-weight:800; letter-spacing:-.04em; }
.cafe-logo span { color:var(--coral); }
.cafe-header nav { display:flex; gap:34px; }
.cafe-header nav a { padding:8px 0; border-bottom:2px solid transparent; font-size:.78rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.cafe-header nav a:hover,.cafe-header nav a.active { border-color:var(--coral); }
.menu-toggle { display:none; }
.cafe-hero { width:min(1440px,calc(100% - 32px)); min-height:720px; margin:auto; position:relative; display:flex; align-items:flex-end; overflow:hidden; background:url('/demo/cafe-exterior-v2.webp') center/cover no-repeat; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,30,56,.84),rgba(7,30,56,.18) 65%); }
.hero-copy { width:min(1280px,calc(100% - 48px)); margin:auto; padding-bottom:76px; position:relative; color:#fff; }
.hero-copy>* { max-width:670px; }
.hero-copy h1,.page-introduction h1 { margin:12px 0 24px; font-family:Georgia,serif; font-size:clamp(4rem,8vw,7.5rem); line-height:.88; letter-spacing:-.065em; }
.hero-copy>p:not(.cafe-eyebrow) { margin-bottom:32px; font-size:1.1rem; }
.cafe-eyebrow { margin:0; color:var(--coral); font-size:.7rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.hero-copy .cafe-eyebrow { color:var(--butter); }
.cafe-button { display:inline-flex; min-height:50px; padding:13px 24px; align-items:center; justify-content:center; color:#fff; background:var(--coral); border:0; border-radius:100px; font-weight:850; cursor:pointer; transition:.2s; }
.cafe-button:hover { background:#d94d3a; transform:translateY(-2px); }
.welcome-section { width:min(1180px,calc(100% - 48px)); margin:auto; padding:120px 0; display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; align-items:center; }
h2 { margin:10px 0 20px; font-family:Georgia,serif; font-size:clamp(2.4rem,5vw,4.5rem); line-height:.98; letter-spacing:-.045em; }
.welcome-copy>p { max-width:500px; color:var(--muted); font-size:1.05rem; }
.text-link { display:inline-block; margin-top:15px; color:var(--blue); font-weight:850; }
.welcome-image { margin:0; position:relative; }
.welcome-image:before { content:''; position:absolute; inset:-18px 18px 18px -18px; z-index:-1; background:var(--butter); }
.welcome-image img { width:100%; display:block; aspect-ratio:3/2; object-fit:cover; }
.favorites-section,.values-section { padding:110px max(24px,calc((100% - 1180px)/2)); background:var(--navy); color:#fff; }
.section-title { max-width:720px; margin-bottom:55px; }
.favorite-grid,.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,.22); }
.favorite-grid article,.value-grid article { min-height:270px; padding:38px; background:var(--navy); }
.favorite-grid article:nth-child(2) { background:var(--blue); }
.favorite-grid span { color:var(--butter); font-weight:900; }
.favorite-grid h3,.value-grid h3 { margin:55px 0 12px; font-family:Georgia,serif; font-size:1.65rem; }
.favorite-grid p,.value-grid p { margin:0; color:#d8e4ed; }
.visit-strip { padding:100px max(24px,calc((100% - 1180px)/2)); display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; background:var(--butter); }
.visit-details { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.page-introduction { width:min(1000px,calc(100% - 48px)); margin:auto; padding:130px 0 105px; text-align:center; }
.page-introduction h1 { color:var(--navy); font-size:clamp(3.6rem,8vw,7rem); }
.page-introduction>p:last-child { max-width:680px; margin:auto; color:var(--muted); font-size:1.08rem; }
.story-grid { width:min(1180px,calc(100% - 48px)); margin:auto; padding-bottom:120px; display:grid; grid-template-columns:1.15fr .85fr; gap:90px; align-items:center; }
.story-image { min-height:600px; background:url('/demo/cafe-exterior-v2.webp') center/cover no-repeat; box-shadow:-22px 22px 0 var(--sky); }
.story-copy p:not(.cafe-eyebrow) { color:var(--muted); }
.values-section { background:var(--sky); color:var(--ink); }
.value-grid { background:var(--line); }
.value-grid article { min-height:220px; background:var(--paper); }
.value-grid h3 { margin-top:30px; }
.value-grid p { color:var(--muted); }
.about-cta { padding:110px 24px; text-align:center; color:#fff; background:var(--coral); }
.about-cta p { margin:-5px 0 28px; }
.about-cta .cafe-button { color:var(--navy); background:var(--butter); }
.contact-introduction { padding-bottom:70px; }
.contact-layout { width:min(1120px,calc(100% - 48px)); margin:auto; padding-bottom:120px; display:grid; grid-template-columns:.8fr 1.2fr; box-shadow:0 28px 70px rgba(16,39,62,.12); }
.contact-information { padding:50px; color:#fff; background:var(--navy); }
.contact-information h2 { margin-top:0; font-size:2.5rem; }
.contact-information div { padding:22px 0; border-top:1px solid rgba(255,255,255,.2); }
.contact-information span { color:var(--butter); font-size:.68rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.contact-information p { margin:6px 0 0; }
.contact-information small { color:#aebfcd; }
.cafe-contact-form { display:grid; gap:22px; padding:50px; background:#fff; }
.cafe-contact-form label { display:grid; gap:8px; font-size:.78rem; font-weight:850; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cafe-contact-form input,.cafe-contact-form textarea { width:100%; padding:14px 15px; color:var(--ink); border:1px solid var(--line); background:#f9fbfc; }
.cafe-contact-form input:focus,.cafe-contact-form textarea:focus { outline:3px solid rgba(247,217,111,.65); border-color:var(--blue); }
.demo-form-status { min-height:24px; margin:0; color:var(--blue); font-weight:800; }
.cafe-footer { padding:54px max(24px,calc((100% - 1180px)/2)); display:grid; grid-template-columns:1fr auto auto; gap:40px; align-items:center; color:#cad8e3; background:#081f35; font-size:.76rem; }
.cafe-footer .cafe-logo { color:#fff; }
@media(max-width:820px){.menu-toggle{display:block;padding:9px 14px;color:var(--navy);background:var(--butter);border:0;font-weight:850}.cafe-header{position:relative}.cafe-header nav{display:none;position:absolute;z-index:10;top:78px;right:0;left:0;padding:24px;flex-direction:column;background:var(--paper);border:1px solid var(--line)}.cafe-header nav.open{display:flex}.welcome-section,.visit-strip,.story-grid,.contact-layout{grid-template-columns:1fr;gap:48px}.favorite-grid,.value-grid{grid-template-columns:1fr}.visit-details{grid-template-columns:1fr}.story-image{min-height:420px}.cafe-footer{grid-template-columns:1fr;gap:12px;text-align:center}}
@media(max-width:560px){.demo-bar{justify-content:center}.demo-bar span{display:none}.cafe-hero{width:100%;min-height:630px}.hero-copy h1{font-size:4.1rem}.form-row{grid-template-columns:1fr}.cafe-contact-form,.contact-information{padding:32px 24px}}