@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap");

:root {
  --parchment: #dddcc8;
  --cocoa: #5a3525;
  --ivory: #fffdf8;
  --rust: #9d3f24;
  --tan: #e0b78d;
  --ink: #74685e;
  --paper: #e9e2d8;
  --line: rgba(90, 53, 37, 0.18);
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--parchment); color: var(--cocoa); font-family: var(--sans); overflow-x: clip; }
button, a { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 99; padding: 12px 18px; background: var(--cocoa); color: var(--ivory); }
.skip-link:focus { top: 16px; }

.site-header { height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 4vw, 68px); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.wordmark { display: inline-flex; align-items: center; width: max-content; text-decoration: none; font-family: var(--serif); font-size: 31px; letter-spacing: -2px; line-height: 1; }
.mark { width: 29px; height: 29px; background: var(--cocoa); display: inline-block; position: relative; }
.mark span { width: 14px; height: 14px; border-radius: 50%; background: var(--parchment); position: absolute; left: 13px; top: 7.5px; }
.site-header nav { display: flex; gap: 34px; }
.site-header nav a { font-size: 13px; font-weight: 600; text-decoration: none; }
.site-header nav a:hover { color: var(--rust); }
.language-switch { justify-self: end; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.language-switch button { border: 0; padding: 10px 3px; background: none; color: var(--ink); cursor: pointer; }
.language-switch button.active { color: var(--cocoa); text-decoration: underline; text-underline-offset: 5px; }

.hero { min-height: calc(100svh - 86px); max-width: 1500px; margin: auto; padding: clamp(55px, 7vw, 110px) clamp(20px, 5vw, 78px) 80px; display: grid; grid-template-columns: minmax(360px, .86fr) minmax(520px, 1.14fr); align-items: center; gap: clamp(35px, 7vw, 110px); }
.eyebrow { font-size: 11px; line-height: 1.2; letter-spacing: .17em; text-transform: uppercase; font-weight: 700; margin: 0 0 24px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rust); margin-right: 10px; box-shadow: 0 0 0 0 rgba(157, 63, 36, .5); animation: pulse 2.5s infinite; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; line-height: .95; margin: 0; }
h1 { font-size: clamp(62px, 7.2vw, 112px); }
h1 em, h2 em { color: var(--rust); font-weight: 400; }
.hero-lede { max-width: 540px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: var(--ink); margin: 34px 0 38px; }
.hero-actions { display: flex; align-items: center; gap: 20px; }
.hero-actions p { max-width: 175px; font-size: 11px; line-height: 1.45; color: var(--ink); }
.coming-soon { min-width: 232px; min-height: 56px; border: 0; border-radius: 14px; padding: 12px 20px; background: var(--cocoa); color: var(--ivory); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: .01em; text-align: center; opacity: 1; cursor: default; box-shadow: 0 8px 22px rgba(90, 53, 37, .18); }

.hero-visual { min-height: 630px; position: relative; }
.photo-card { position: absolute; inset: 5% 0 5% 10%; overflow: hidden; border-radius: 48% 48% 20px 20px / 26% 26% 20px 20px; box-shadow: 0 28px 80px rgba(90, 53, 37, .15); }
.photo-card:after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(90,53,37,.08), transparent 55%); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.photo-caption { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: 16px 21px; display: flex; justify-content: space-between; align-items: center; gap: 30px; background: rgba(255, 253, 248, .86); backdrop-filter: blur(12px); font-size: 10px; line-height: 1.4; letter-spacing: .04em; }
.phone { position: absolute; left: -3%; top: 3%; width: 238px; height: 500px; border: 7px solid #3e251b; border-radius: 40px; background: var(--parchment); overflow: hidden; box-shadow: 0 32px 60px rgba(66, 35, 24, .3); transform: rotate(-3.5deg); animation: phoneFloat 6s ease-in-out infinite; }
.phone:after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 32px; pointer-events: none; }
.phone-top { height: 33px; padding: 10px 18px 0; display: flex; justify-content: space-between; font-size: 8px; font-weight: 700; }
.phone-top i { width: 60px; height: 16px; border-radius: 20px; background: #351f17; margin-top: -5px; }
.app-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }
.mini-wordmark { display: flex; align-items: center; font-family: var(--serif); font-size: 19px; letter-spacing: -1px; }
.mini-wordmark b { display: block; width: 17px; height: 17px; background: var(--cocoa); position: relative; }
.mini-wordmark b:after { content:""; width: 8px; height: 8px; position: absolute; border-radius: 50%; background: var(--parchment); left: 7px; top: 4px; }
.location-icon { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); font-size: 15px; }
.map-area { height: 264px; position: relative; overflow: hidden; background: #d8d1bd; }
.map-area iframe { position: absolute; left: -18px; top: -18px; width: calc(100% + 82px); height: calc(100% + 68px); border: 0; pointer-events: none; filter: sepia(.24) saturate(.58) contrast(.9); }
.map-area:after { content: ""; position: absolute; inset: 0; background: rgba(221,220,200,.18); pointer-events: none; }
.pin { position: absolute; z-index: 2; width: 19px; height: 19px; border-radius: 50% 50% 50% 0; background: var(--cocoa); transform: rotate(-45deg); box-shadow: 0 4px 8px rgba(90,53,37,.2); }
.pin:after { content:""; position:absolute; inset:6px; background:var(--parchment); border-radius:50%; }
.pin.p1 { left: 61px; top: 55px; }.pin.p2 { left: 144px; top: 121px; }.pin.p3 { left: 75px; top: 183px; }
.pin.active { z-index: 3; background: var(--rust); animation: pinSpring .65s cubic-bezier(.2,1.65,.35,1); }
.cafe-card { position: absolute; z-index: 4; left: 14px; right: 14px; bottom: 53px; min-height: 91px; background: var(--ivory); padding: 12px 13px 10px; border-radius: 15px; box-shadow: 0 7px 20px rgba(90,53,37,.15); font-size: 9px; transform-origin: 50% 100%; }
.cafe-card-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-height: 34px; }
.cafe-card strong, .cafe-card small { display: block; }
.cafe-card strong { max-width: 125px; font-size: 10px; line-height: 1.15; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cafe-card small { color: var(--ink); white-space: nowrap; }
.cafe-card-main > span { flex: none; color: var(--rust); font-weight: 700; }
.cafe-card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid rgba(90,53,37,.1); margin-top: 8px; padding-top: 8px; }
.cafe-card p { display: flex; align-items: center; gap: 5px; color: var(--ink); margin: 0; white-space: nowrap; }
.cafe-card p i { width: 7px; height: 7px; border-radius: 50%; background: var(--tan); }
.cafe-dots { display: flex; gap: 4px; }
.cafe-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(90,53,37,.24); transition: width .25s ease, background .25s ease; }
.cafe-dots i.active { width: 10px; border-radius: 4px; background: var(--rust); }
.cafe-card.is-leaving { animation: cafeCardOut .18s ease-in both; }
.cafe-card.is-entering { animation: cafeCardIn .6s cubic-bezier(.18,1.45,.32,1) both; }
.phone-tabs { position: absolute; bottom: 0; left: 0; right: 0; height: 38px; display: flex; justify-content: space-around; align-items: center; background: var(--ivory); color: var(--ink); font-size: 13px; }
.phone-tabs span:first-child { color: var(--rust); }
.floating-note { position: absolute; z-index: 3; background: var(--ivory); padding: 15px 17px; min-width: 166px; border: 1px solid rgba(90,53,37,.1); box-shadow: 0 18px 35px rgba(90,53,37,.16); transform: rotate(2.5deg); }
.floating-note span { display:block; margin-bottom:6px; color:var(--rust); font-size:9px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.floating-note strong { font-family:var(--serif); font-size:17px; font-weight:400; line-height:1.15; }
.note-cake { right: -3%; top: 22%; }.note-beans { right: 8%; bottom: 2%; transform:rotate(-3deg); }

.cafe-ticker { background: var(--cocoa); color: var(--ivory); overflow: hidden; border-block: 1px solid var(--cocoa); }
.ticker-track { width: max-content; display: flex; align-items: center; gap: 28px; padding: 17px 0; animation: marquee 30s linear infinite; font-family: var(--serif); font-size: 18px; letter-spacing: .02em; }
.ticker-track i { color: var(--tan); font-style: normal; font-size: 10px; }

.manifesto { padding: 120px clamp(20px,5vw,76px) 140px; max-width: 1500px; margin:auto; position:relative; }
.section-number { font-size: 11px; font-weight: 700; letter-spacing:.15em; border-top:1px solid var(--line); padding-top:10px; width:70px; }
.manifesto-heading { margin: -25px 0 80px 17%; }
.manifesto-heading h2, .ritual h2, .city-copy h2, .final-cta h2 { font-size: clamp(52px, 6.3vw, 94px); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature { min-height: 530px; padding: 24px; background: var(--ivory); border:1px solid rgba(90,53,37,.08); display:flex; flex-direction:column; }
.feature:nth-child(2) { margin-top: 44px; }.feature:nth-child(3) { margin-top:88px; }
.feature-art { height: 250px; margin-bottom: 31px; background: var(--paper); overflow:hidden; position:relative; }
.feature-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.feature:hover .feature-photo img { transform: scale(1.035); }
.feature-discover .feature-photo img { object-position: center 58%; }
.feature-rewards .feature-photo img { object-position: center 56%; }
.feature-updates .feature-photo img { object-position: center 55%; }
.feature-index { font-size:10px; color:var(--rust); font-weight:700; letter-spacing:.1em; }
.feature h3 { font-family:var(--serif); font-size:29px; font-weight:400; margin:14px 0 12px; }
.feature p { color:var(--ink); font-size:14px; line-height:1.65; margin:0; }
.mini-map { background-color:#d6d0bc; background-image:linear-gradient(115deg,transparent 46%,rgba(255,253,248,.8) 47%,rgba(255,253,248,.8) 51%,transparent 52%); background-size:110px 120px; }
.mini-map i { position:absolute; width:24px;height:24px;border-radius:50% 50% 50% 0;background:var(--cocoa);transform:rotate(-45deg); }
.mini-map i:nth-of-type(1){left:20%;top:30%}.mini-map i:nth-of-type(2){left:70%;top:20%}.mini-map i:nth-of-type(3){left:57%;top:67%;background:var(--rust)}
.mini-map b {position:absolute;left:40%;top:48%;background:var(--ivory);font-size:9px;padding:7px 10px;border-radius:20px;box-shadow:0 4px 14px rgba(90,53,37,.15)}
.stamp-card { display:grid; grid-template-columns:repeat(3,1fr); align-content:center; justify-items:center; gap:18px; padding:30px; background:var(--rust); }
.stamp-card span {width:54px;height:54px;border-radius:50%;background:var(--ivory);color:var(--rust);display:grid;place-items:center;font-size:36px;box-shadow:inset 0 0 0 4px var(--tan)}
.stamp-card .empty {border:2px dashed rgba(255,253,248,.6);background:transparent;box-shadow:none;color:var(--ivory);font:20px var(--serif)}
.update-stack { background:var(--tan); padding:45px 25px 20px; }
.update-stack div { position:absolute;width:72%;padding:16px;background:var(--ivory);box-shadow:0 10px 20px rgba(90,53,37,.13); }
.update-stack div:first-child { top:35px;left:20px;transform:rotate(-4deg);}.update-stack div:last-child{right:17px;bottom:25px;transform:rotate(4deg)}
.update-stack small{display:block;color:var(--rust);font-size:8px;margin-bottom:8px}.update-stack strong{font:18px/1.2 var(--serif)}

.ritual { background:var(--cocoa);color:var(--ivory);padding:120px clamp(20px,7vw,110px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px,11vw,170px);align-items:center; }
.ritual .section-number { border-color:rgba(255,255,255,.25); }.ritual .eyebrow { margin-top:70px;color:var(--tan); }.ritual h2 em {color:var(--tan)}
.ritual-copy > p:not(.eyebrow) {color:rgba(255,253,248,.65);font-size:16px;line-height:1.65;max-width:560px;margin:30px 0 45px}
.steps {list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.steps li {display:grid;grid-template-columns:45px 1fr;gap:16px;padding:19px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.steps li>span{color:var(--tan);font:22px var(--serif)}.steps strong{font:19px var(--serif);font-weight:400}.steps p{margin:4px 0 0;color:rgba(255,253,248,.58);font-size:12px}
.reward-demo { background:var(--ivory);color:var(--cocoa);padding:34px;border-radius:28px;box-shadow:18px 18px 0 var(--tan);transform:rotate(2deg);position:relative;max-width:520px; }
.reward-top {display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.15em;font-weight:700;color:var(--ink)}
.mini-mark{width:24px;height:24px;background:var(--cocoa);display:block;position:relative}.mini-mark:after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--ivory);left:10px;top:6px}
.reward-demo>p{font-size:11px;letter-spacing:.12em;margin:60px 0 8px;color:var(--rust);font-weight:700}.reward-demo h3{font:clamp(42px,4vw,62px)/.95 var(--serif);margin:0 0 45px}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.stamps i{aspect-ratio:1;border-radius:50%;background:var(--rust);color:var(--ivory);font-style:normal;display:grid;place-items:center;font-size:20px}.stamps .last{border:2px dashed var(--tan);background:transparent;color:var(--ink);font-family:var(--serif)}
.reward-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:35px;padding-top:16px;align-items:center}.reward-bottom span{font-size:9px;letter-spacing:.12em;color:var(--ink)}.reward-bottom strong{font:20px var(--serif);font-weight:400}
.scan-wave{position:absolute;right:-35px;top:48%;display:flex;gap:4px;align-items:center}.scan-wave span{display:block;border:2px solid var(--tan);border-left:0;border-block-color:transparent;border-radius:50%;width:12px;height:30px}.scan-wave span:nth-child(2){height:45px}.scan-wave span:nth-child(3){height:60px}

.city-section {min-height:700px;display:grid;grid-template-columns:1.1fr .9fr;background:var(--ivory);}
.city-map{position:relative;overflow:hidden;background:var(--paper)}
.city-map iframe{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);border:0;filter:sepia(.25) saturate(.6) contrast(.92)}
.city-map:after{content:"";position:absolute;z-index:1;inset:0;background:radial-gradient(circle at 54% 42%,transparent 0 8%,rgba(221,220,200,.18) 40%,rgba(221,220,200,.48) 100%);pointer-events:none}
.city-pin{position:absolute;z-index:2;left:54%;top:42%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:24px var(--serif);pointer-events:none}
.city-pin i{display:block;width:42px;height:42px;border-radius:50% 50% 50% 0;background:var(--rust);transform:rotate(-45deg);box-shadow:0 8px 18px rgba(90,53,37,.22)}
.map-credit{position:absolute;z-index:3;left:14px;bottom:12px;padding:6px 8px;background:rgba(255,253,248,.88);color:var(--ink);font-size:9px;text-decoration:none;backdrop-filter:blur(8px)}
.city-copy{padding:100px clamp(30px,6vw,100px);display:flex;flex-direction:column;justify-content:center}.city-copy>p:not(.eyebrow){font-size:16px;line-height:1.7;color:var(--ink);max-width:500px;margin:32px 0}
.city-status{display:grid;grid-template-columns:13px auto;gap:1px 10px;align-items:center}.city-status>span{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:var(--rust);box-shadow:0 0 0 6px rgba(157,63,36,.1)}.city-status strong{font-size:12px}.city-status small{font-size:10px;color:var(--ink)}

.final-cta{min-height:620px;background:var(--rust);color:var(--ivory);padding:100px clamp(20px,8vw,130px);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;text-align:center}.final-cta>div{position:relative;z-index:2}.final-cta .eyebrow{color:var(--tan)}.final-cta h2{margin-bottom:45px}.coming-soon.light{background:var(--ivory);color:var(--cocoa);margin:auto}.large-mark{position:absolute;width:600px;height:600px;background:rgba(90,53,37,.17);transform:rotate(12deg)}.large-mark i{position:absolute;width:290px;height:290px;border-radius:50%;background:var(--rust);right:20px;top:155px}
footer{background:var(--cocoa);color:var(--ivory);padding:46px clamp(20px,5vw,76px);display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;gap:30px;font-size:11px}footer .mark{background:var(--ivory)}footer .mark span{background:var(--cocoa)}footer p{color:rgba(255,255,255,.55);margin:0}footer>div{display:flex;gap:24px}footer>div a{text-decoration:none}footer small{color:rgba(255,255,255,.45)}

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes pulse { 70% { box-shadow:0 0 0 8px rgba(157,63,36,0); } 100% { box-shadow:0 0 0 0 rgba(157,63,36,0); } }
@keyframes phoneFloat { 50% { transform:rotate(-2deg) translateY(-10px); } }
@keyframes cafeCardOut { to { opacity:0; transform:translateY(9px) scale(.96); } }
@keyframes cafeCardIn { from { opacity:0; transform:translateY(18px) scale(.91); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes pinSpring { 0% { transform:rotate(-45deg) scale(.75); } 48% { transform:rotate(-45deg) scale(1.34); } 72% { transform:rotate(-45deg) scale(.93); } 100% { transform:rotate(-45deg) scale(1); } }

@media (max-width: 980px) {
  .hero{grid-template-columns:1fr;padding-top:70px}.hero-copy{max-width:700px}.hero-visual{min-height:610px}.photo-card{inset:5% 0 5% 22%}.phone{left:4%}.manifesto-heading{margin-left:10%}.feature-grid{grid-template-columns:1fr 1fr}.feature:nth-child(2){margin-top:44px}.feature:nth-child(3){margin-top:0;grid-column:1/3;width:calc(50% - 9px);justify-self:center}.ritual{grid-template-columns:1fr}.reward-demo{justify-self:center;width:min(100%,520px)}.city-section{grid-template-columns:1fr}.city-map{min-height:450px}.city-copy{min-height:560px}footer{grid-template-columns:1fr 1fr}footer>div{justify-self:end}footer small{justify-self:end}
}
@media (max-width: 660px) {
  .site-header{height:72px;grid-template-columns:1fr auto}.site-header nav{display:none}.wordmark{font-size:28px}.hero{padding:55px 20px 60px;min-height:auto}.hero h1{font-size:clamp(58px,18vw,78px)}.hero-lede{font-size:16px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-actions p{max-width:240px;margin:0}.hero-visual{min-height:530px;margin-top:10px}.photo-card{inset:8% -40% 6% 10%;border-radius:150px 150px 15px 15px}.phone{width:205px;height:430px;left:0;top:8%;border-radius:34px}.map-area{height:218px}.cafe-card{bottom:51px}.floating-note{min-width:145px;padding:12px}.floating-note strong{font-size:15px}.note-cake{right:-2%;top:8%}.note-beans{right:-3%;bottom:1%}.photo-caption{font-size:8px}.manifesto{padding:90px 20px}.manifesto-heading{margin:35px 0 55px}.manifesto-heading h2,.ritual h2,.city-copy h2,.final-cta h2{font-size:clamp(48px,14vw,65px)}.feature-grid{display:block}.feature{min-height:auto;margin:0 0 18px!important}.feature-art{height:220px}.ritual{padding:90px 20px}.ritual .eyebrow{margin-top:50px}.reward-demo{padding:24px;box-shadow:10px 10px 0 var(--tan)}.stamps{gap:6px}.reward-bottom{align-items:flex-start;gap:8px;flex-direction:column}.city-map{min-height:340px}.city-copy{padding:80px 20px;min-height:auto}.final-cta{min-height:560px;padding:80px 20px}.large-mark{width:440px;height:440px}.large-mark i{width:215px;height:215px;top:112px}footer{grid-template-columns:1fr;padding:40px 20px}footer>div,footer small{justify-self:start}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.ticker-track,.phone,.live-dot,.pin.active,.cafe-card{animation:none}.reveal{opacity:1;transform:none;transition:none} }