:root { --ink: #1e342e; --muted: #66756c; --cream: #fcfaf5; --paper: #ffffff; --sage: #edf0e8; --green: #244e41; --green2: #3b6a56; --sand: #efe4cc; --accent: #bf7549; --line: #e2e7df; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; color:var(--ink); background: var(--cream); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.site-shell { max-width: 1160px; padding: 0 30px; margin: 0 auto; }
.site-header { padding: 28px 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 2.3px; font-weight: 800; }
.brand b { color: var(--accent); }
.brand-symbol { width: 37px; height: 37px; display:flex; align-items:center; justify-content:center; border-radius: 12px; background: var(--sage); font-size: 19px; }
.header-label { font-size: 12px; color: var(--muted); letter-spacing: 0.2px; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 42%; background: #f0f2e9; min-height: 408px; overflow:hidden; border-radius: 22px; position:relative; }
.hero-body { padding: clamp(34px, 5vw, 69px) 24px clamp(34px, 5vw, 54px) clamp(32px, 5vw, 65px); z-index:2; }
.eyebrow { font-size: 11px; font-weight:800; letter-spacing: 2px; display:flex; align-items:center; gap:9px; color:var(--green2); }
.pulse-dot { width:7px; height:7px; background: #7da28b; border-radius:50%; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(46px, 5vw, 73px); font-weight:400; letter-spacing: -2.8px; line-height: 1.06; margin:27px 0 18px; }
h1 em { color:var(--green2); font-style:italic; }
.hero-copy { color: #62746b; line-height:1.7; font-size: 15px; max-width: 425px; margin: 0; }
.chips { display:flex; flex-wrap:wrap; gap:9px; margin-top: 29px; }
.chips span { border:1px solid #dce2d5; background:rgba(255,255,255,.5); color:#547064; border-radius: 999px; padding:9px 13px; font-size:11px; font-weight:600; }
.illustration { position:relative; min-height: 370px; display:flex; justify-content:center; align-items:center; background:radial-gradient(ellipse at 45% 55%, #e7dbc1 0%, #eaddc3 54%, #e4d2b0 100%); }
.illustration::before { content:""; position:absolute; height: 530px; width: 530px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); border-radius:50%; top:-270px; right:-180px; }
.illustration::after { content:""; position:absolute; height: 350px; width: 350px; border:1px solid rgba(255,255,255,.29); border-radius:50%; bottom:-210px; left:-150px; }
.cup { position:absolute; width:192px; height:144px; top:48%; left:44%; transform:translate(-50%,-28%); border-radius: 12px 12px 70px 70px; background:linear-gradient(100deg,#fffdf7,#eadfc9); box-shadow: inset -12px 0 20px rgba(125,95,63,.12), 5px 18px 22px rgba(92,65,35,.18); z-index:2; }
.cup:after { content:""; width:74px; height:70px; border:17px solid #f2e9d9; position:absolute; border-radius: 50%; right:-49px; top:12px; z-index:-1; box-shadow: 9px 8px 9px rgba(92,65,35,.07); }
.coffee-surface { position:absolute; left:8px; right:8px; height:16px; top:5px; background:linear-gradient(90deg,#99775d,#76503b); border-radius: 50%; opacity:.5; }
.saucer { width:280px; height:38px; position:absolute; border-radius:50%; background:linear-gradient(#faf7ee,#e0cdb0); box-shadow: 1px 15px 16px rgba(84,54,31,.12); top:calc(48% + 116px); left:44%; transform:translateX(-50%); z-index:1; }
.cup-steam { font-size:48px; letter-spacing:16px; line-height:.5; color:rgba(119,91,64,.34); position:absolute; left:40%; top: 17%; transform: rotate(90deg); z-index:1; }
.illustration-caption { position:absolute; right:22px; bottom:27px; text-transform:uppercase; font-size:10px; letter-spacing:2.5px; line-height:1.9; color:#8d7152; text-align:right; }
.illustration-caption strong { font-size:13px; letter-spacing:1.6px; }
.grain { position:absolute; width:32px; height:18px; border-radius: 100% 2%; background:#b28b62; opacity:.4; transform:rotate(-40deg); }.grain-one { top: 17%; right:24%; }.grain-two { bottom:22%; left:18%; transform:rotate(60deg); }
.finder { padding: 55px 4px 70px; }
.section-intro { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }
.section-kicker { color:var(--accent); font-size:11px; letter-spacing:2px; font-weight:800; }
h2 { font-family:Georgia, "Times New Roman", serif; margin:10px 0 0; font-size:38px; font-weight:400; letter-spacing:-1px; }
.section-intro p { font-size:13px; color:var(--muted); margin-bottom:6px; }
.control-bar { background:var(--paper); border:1px solid var(--line); padding:15px 17px 15px 23px; border-radius:15px; display:flex; flex-wrap:wrap; gap:17px; align-items:center; box-shadow: 0 5px 24px rgba(35,66,53,.035); }
label { font-weight:700; font-size:13px; white-space:nowrap; }
.label-note { font-size:12px; color:#a0a89f; font-weight:400; padding-left:3px; }
select { margin-left:auto; border:1px solid var(--line); outline-color:#8ab59e; background:#f9faf7; min-width: 154px; border-radius:9px; height:44px; padding:0 12px; color:var(--ink); font-size:13px; }
button { border:0; background: var(--green); color:#fff; border-radius:9px; height:44px; padding:0 25px; font-weight:700; font-size:13px; cursor:pointer; transition: .15s background, .15s transform; }
button:hover { background:#31634f; transform:translateY(-1px); } button:disabled { opacity:.6; cursor:wait; transform:none; }
.button-icon { padding-right:6px; font-size:18px; vertical-align:-1px; }
.privacy-note { margin:16px 0 12px; display:flex; gap:13px; align-items:flex-start; border:1px solid #e3e9dd; background:#f2f5ee; border-radius:11px; padding:14px 17px; }
.privacy-note p { color:#5e7064; font-size:12px; line-height:1.6; margin:0; }
.privacy-note strong { color:#335d49; }
.lock { color:#3c7955; font-size:22px; margin-top:-2px; }
.status { font-size:13px; color:var(--muted); margin:24px 0 16px; min-height:18px; }
.status.error { color:#a24a3e; }.status.success { color:#2b684c; }
.results { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:15px; }
.result-card { background:white; border:1px solid var(--line); border-radius:14px; padding:23px 22px; box-shadow:0 5px 18px rgba(35,66,53,.03); }
.card-top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.card-icon { width:40px; height:40px; border-radius:13px; background:#f7ece0; display:flex; justify-content:center; align-items:center; font-size:21px; }
.distance { font-weight:800; color:var(--green2); background:#edf4ed; border-radius:20px; padding:7px 10px; font-size:11px; }
.result-card h3 { margin:19px 0 9px; font-size:16px; letter-spacing:-.2px; }
.result-card p { color:var(--muted); font-size:12px; min-height:35px; margin:0 0 20px; line-height:1.6; }
.result-card a { display:inline-flex; gap:8px; text-decoration:none; font-size:12px; font-weight:800; color:var(--green2); }
.result-card a:hover { text-decoration:underline; }
footer { padding:23px 0 32px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:15px; font-size:12px; color:#87958a; }
@media (max-width:880px) { .hero{grid-template-columns:1fr 36%;} .illustration{min-height:350px;}.cup{transform:translate(-50%,-28%) scale(.76);} .saucer{transform:translateX(-50%) scale(.8);}.results{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:650px) { .site-shell{padding:0 16px;} .site-header{padding:20px 0}.header-label{display:none;}.hero{grid-template-columns:1fr;}.hero-body{padding:38px 25px 25px;}.illustration{height:175px;min-height:175px;}.cup{top:30%;left:50%; transform:translate(-50%,-15%) scale(.54);}.saucer{top:145px;left:50%; transform:translate(-50%,-50%) scale(.57);}.cup-steam{font-size:29px;top:2%;left:44%;}.illustration-caption{font-size:9px;}.finder{padding-top:40px}.section-intro{display:block}.section-intro p{margin-top:10px} .control-bar{padding:17px;gap:13px}.control-bar label{width:100%}select{flex:1;min-width:120px;margin-left:0;}button{flex:1;padding:0 12px;} .results{grid-template-columns:1fr}footer{flex-direction:column;gap:7px;} }
@media (prefers-reduced-motion:reduce) { *,*::after,*::before {transition:none!important; scroll-behavior:auto!important;} }