:root {
  --green: #88a56a; --green-deep: #6d8a52; --charcoal: #141311; --soft-black: #1e1d1a;
  --card: #242219; --cream: #f2ede2; --body-dim: #d8d3c8; --concrete: #b9b3a6; --line: rgba(255,255,255,0.10);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',Arial,sans-serif; background:var(--charcoal); color:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:'Montserrat',Arial,sans-serif; font-weight:800; letter-spacing:-0.02em; line-height:1.03; }
.wrap { max-width:1180px; margin:0 auto; padding:0 26px; }
.eyebrow { font-size:13px; letter-spacing:0.24em; text-transform:uppercase; color:var(--green); font-weight:700; margin-bottom:16px; }
a:focus-visible, button:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:200; background:var(--green); color:var(--charcoal); padding:12px 20px; font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:0.08em; }
.skip-link:focus { left:16px; top:16px; }

nav.site-nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; justify-content:space-between; align-items:center; padding:16px 26px; background:rgba(20,19,17,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.logo { font-size:21px; font-weight:800; letter-spacing:-0.03em; font-family:'Montserrat',Arial,sans-serif; }
.logo span { color:var(--green); }
.navlinks { display:flex; gap:26px; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; list-style:none; }
.navlinks li { display:flex; }
.navlinks a { opacity:0.8; transition:opacity 0.2s,color 0.2s; }
.navlinks a:hover, .navlinks a:focus-visible { opacity:1; color:var(--green); }
.navcta { border:1px solid var(--line); padding:8px 16px; border-radius:40px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700; }
.burger { display:none; font-size:22px; background:none; border:none; color:var(--cream); cursor:pointer; }
@media (max-width:880px){
  .navlinks{display:none; list-style:none;}
  .burger{display:block;}
  .navlinks.open{display:flex; position:absolute; top:58px; right:18px; flex-direction:column; background:var(--charcoal); padding:20px; border-radius:10px; border:1px solid var(--line); gap:14px;}
}

.hero { position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,19,17,0.5) 0%,rgba(20,19,17,0.2) 38%,rgba(20,19,17,0.94) 100%); }
.hero-bg img { object-position:center 45%; transform:scale(1.05); animation:kenburns 20s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform:scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .hero-bg img { animation:none; } }
.hero-inner { position:relative; z-index:2; padding-bottom:70px; width:100%; }
.hero h1 { font-size:clamp(64px,15vw,168px); text-transform:uppercase; letter-spacing:-0.04em; }
.hero h1 .dot { color:var(--green); }
.hero-sub { font-size:clamp(15px,2vw,20px); max-width:440px; margin-top:18px; opacity:0.92; }
.hero-tags { display:flex; gap:9px; flex-wrap:wrap; margin-top:24px; list-style:none; }
.tag { border:1px solid var(--line); padding:7px 15px; border-radius:40px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; }
.hero-btns { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.btn { padding:14px 30px; border-radius:44px; font-weight:700; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; transition:transform 0.2s,background 0.2s; display:inline-block; }
.btn-green { background:var(--green); color:var(--charcoal); }
.btn-green:hover { transform:translateY(-2px); background:#96b37b; }
.btn-ghost { border:1px solid var(--line); }
.btn-ghost:hover { background:rgba(255,255,255,0.08); }

section { padding:96px 0; }
.section-head { margin-bottom:48px; }
.section-head h2 { font-size:clamp(34px,6vw,64px); text-transform:uppercase; }
.section-head p { max-width:520px; margin-top:16px; color:var(--concrete); font-size:16px; }

.about { background:var(--soft-black); }
.about-grid { display:flex; gap:52px; align-items:center; }
.about-txt { flex:1; }
.about-txt h2 { font-size:clamp(34px,5vw,48px); text-transform:uppercase; margin-bottom:22px; }
.about-txt p { margin-bottom:16px; color:var(--body-dim); font-size:16px; line-height:1.7; }
.about-img { flex:1; aspect-ratio:4/5; max-height:560px; border-radius:6px; overflow:hidden; }
.stats { display:flex; gap:34px; margin-top:30px; flex-wrap:wrap; }
.stat b { display:block; font-size:34px; font-weight:800; color:var(--green); line-height:1; font-family:'Montserrat',Arial,sans-serif; }
.stat span { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream); opacity:0.75; }
@media (max-width:880px){ .about-grid{flex-direction:column; gap:30px;} }

.cans { background:var(--charcoal); text-align:center; }
.cans .eyebrow { text-align:center; }
.cans h2 { font-size:clamp(38px,7vw,64px); text-transform:uppercase; }
.cans-sub { color:var(--concrete); margin-top:14px; font-size:16px; }
.cans-row { display:flex; justify-content:center; align-items:flex-end; gap:30px; margin-top:50px; flex-wrap:wrap; list-style:none; }
.can { width:220px; max-width:30vw; text-align:center; }
.can-img { position:relative; }
.can-img img { object-fit:contain; height:auto; filter:drop-shadow(0 26px 34px rgba(0,0,0,0.5)); animation:float 4s ease-in-out infinite; }
.can:nth-child(2) .can-img img { animation-delay:0.8s; }
.can:nth-child(3) .can-img img { animation-delay:1.6s; }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@media (prefers-reduced-motion: reduce) { .can-img img { animation:none; } }
.can-name { font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-size:28px; margin-top:20px; font-weight:400; }
.can-sub { font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--green); margin-top:6px; }
@media (max-width:880px){ .cans-row{gap:8px;} .can{width:31vw;} .can-name{font-size:18px;} }

.coffee { background:var(--soft-black); }
.coffee-grid { display:flex; gap:56px; align-items:center; }
.coffee-img { flex:1; aspect-ratio:3/4; max-height:560px; border-radius:6px; overflow:hidden; }
.coffee-txt { flex:1; }
.coffee-txt h2 { font-size:clamp(30px,5vw,44px); text-transform:uppercase; margin-bottom:18px; line-height:1.05; }
.coffee-txt h2 span { color:var(--green); }
.coffee-txt p { color:var(--body-dim); font-size:16px; margin-bottom:14px; line-height:1.7; }
@media (max-width:880px){ .coffee-grid{flex-direction:column; gap:28px;} .coffee-img{order:-1;} }

.menu { background:var(--charcoal); }
.menu-grid { display:flex; gap:56px; }
.menu-col { flex:1; }
.m-cat { margin-bottom:30px; }
.m-cat h3 { font-size:15px; letter-spacing:0.14em; text-transform:uppercase; color:var(--green); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line); font-family:'Inter',Arial,sans-serif; font-weight:800; }
.m-item { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:12px; }
.m-item .n { font-weight:600; font-size:15px; }
.m-item .n small { display:block; color:var(--concrete); font-weight:400; font-size:12.5px; margin-top:2px; max-width:340px; }
.m-item .dots { flex:1; border-bottom:1px dotted rgba(255,255,255,0.18); margin:0 3px; transform:translateY(-4px); }
.m-item .p { font-weight:700; color:var(--concrete); font-size:14px; white-space:nowrap; }
.m-item.featured .n { color:var(--green); }
.menu-mods { margin-top:20px; padding:18px 22px; background:var(--soft-black); border-radius:10px; font-size:13px; color:var(--body-dim); line-height:1.7; }
.menu-mods b { color:var(--cream); }
.menu-note { text-align:center; margin-top:26px; color:var(--concrete); font-size:13px; }
@media (max-width:880px){ .menu-grid{flex-direction:column; gap:0;} }

.gallery { background:var(--soft-black); }
.gal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; list-style:none; }
.gal-grid .g { overflow:hidden; border-radius:6px; aspect-ratio:4/3; }
.gal-grid .g img { transition:transform 0.5s; }
.gal-grid .g:hover img { transform:scale(1.06); }
@media (max-width:880px){ .gal-grid{grid-template-columns:repeat(2,1fr);} }

.team { background:var(--charcoal); }
.team-top { display:flex; gap:44px; align-items:center; margin-bottom:48px; }
.team-video { flex:1; position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/4; max-height:520px; box-shadow:0 20px 50px rgba(0,0,0,0.4); }
.team-video video { width:100%; height:100%; object-fit:cover; }
.team-intro { flex:1; }
.team-intro h2 { font-size:clamp(32px,5vw,52px); text-transform:uppercase; margin-bottom:18px; }
.team-intro p { color:var(--body-dim); font-size:16px; line-height:1.7; }
.team-grid { display:flex; gap:20px; flex-wrap:wrap; list-style:none; }
.member { flex:1; min-width:220px; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.member-img { aspect-ratio:4/5; overflow:hidden; }
.member-body { padding:22px; }
.member-body h3 { font-size:22px; }
.member-role { color:var(--green); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; margin:5px 0 14px; }
.member-fact { font-size:13px; color:var(--body-dim); margin-bottom:6px; display:flex; gap:8px; }
.member-fact b { color:var(--concrete); font-weight:600; min-width:92px; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; opacity:0.7; }
.member-social { display:flex; gap:10px; margin-top:12px; }
.member-social a { font-size:12px; color:var(--green); text-decoration:underline; }
@media (max-width:880px){ .team-top{flex-direction:column; gap:26px;} .team-grid{flex-direction:column; max-width:380px; margin:0 auto;} }

.location { background:var(--soft-black); }
.loc-grid { display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; flex-wrap:wrap; }
.loc-info { flex:1; min-width:280px; padding:48px 42px; }
.loc-info h2 { font-size:38px; text-transform:uppercase; margin-bottom:24px; }
.loc-row { display:flex; gap:13px; margin-bottom:20px; align-items:flex-start; }
.loc-row .ic { font-size:19px; width:24px; }
.loc-row b { display:block; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--green); margin-bottom:3px; }
.loc-map { flex:1; min-width:280px; min-height:400px; background:#33312c; display:flex; }
.loc-map iframe { width:100%; height:100%; min-height:400px; border:0; display:block; }
@media (max-width:880px){ .loc-grid{flex-direction:column;} .loc-map{min-height:320px;} .loc-map iframe{min-height:320px;} }

footer.site-footer { padding:56px 0 40px; border-top:1px solid var(--line); text-align:center; background:var(--charcoal); }
.foot-logo { font-size:32px; font-weight:800; margin-bottom:16px; font-family:'Montserrat',Arial,sans-serif; }
.foot-logo span { color:var(--green); }
.foot-links { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; opacity:0.8; list-style:none; }
.foot-social { display:flex; gap:16px; justify-content:center; margin-bottom:20px; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.8; }
.foot-copy { font-size:11px; opacity:0.5; }

.reviews { background: var(--soft-black); }
.rev-top { display: flex; align-items: center; gap: 18px; margin-bottom: 40px; flex-wrap: wrap; }
.rev-score { font-size: 56px; font-weight: 800; line-height: 1; font-family: 'Montserrat',Arial,sans-serif; color: var(--cream); }
.rev-top .stars { font-size: 18px; }
.rev-meta { font-size: 13px; opacity: 0.75; margin-top: 3px; }
.rev-badge { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: 0.7; border: 1px solid var(--line); padding: 8px 15px; border-radius: 40px; }
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style:none; }
.rev-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.rev-card .stars { font-size: 14px; margin-bottom: 12px; }
.rev-card p { font-size: 14px; opacity: 0.92; margin-bottom: 16px; line-height: 1.7; }
.rev-who { display: flex; align-items: center; gap: 11px; }
.rev-av { width: 36px; height: 36px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--charcoal); font-size: 14px; flex-shrink: 0; overflow:hidden; }
.rev-av img { border-radius:50%; }
.rev-who b { font-size: 13px; }
.rev-who span { font-size: 11px; opacity: 0.6; display: block; }
.rev-source { text-align:center; margin-top:24px; font-size:12px; color:var(--concrete); }
.rev-source a { color:var(--green); text-decoration:underline; }
.cust-photos-head { text-align:center; font-size:13px; letter-spacing:0.24em; text-transform:uppercase; color:var(--green); font-weight:700; margin-top:44px; margin-bottom:16px; }
.cust-photos {
	display:flex; gap:12px; overflow-x:auto; list-style:none; margin:0; padding:0 0 6px;
	scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.cust-photos li {
	flex:0 0 auto; width:calc((100% - 3 * 12px) / 4); aspect-ratio:1/1;
	border-radius:8px; overflow:hidden; scroll-snap-align:start;
}
.cust-photos::-webkit-scrollbar { height:5px; }
.cust-photos::-webkit-scrollbar-track { background:transparent; }
.cust-photos::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
@media (max-width:880px){ .cust-photos li{ width:calc((100% - 2 * 10px) / 3); } .cust-photos{ gap:10px; } }
.star { color: #4a4844; }
.star.on { color: #e8b64c; }
.stars { display: inline-flex; gap: 1px; }
@media (max-width: 880px) { .rev-grid { grid-template-columns: 1fr; } }

.faq { background: var(--charcoal); }
.faq-list { max-width:820px; }
.faq-item { background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.faq-item summary { list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-icon { flex-shrink:0; width:20px; height:20px; position:relative; }
.faq-icon::before, .faq-icon::after { content:''; position:absolute; background:var(--green); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%); transition:transform 0.2s; }
.faq-icon::before { width:14px; height:2px; }
.faq-icon::after { width:2px; height:14px; }
.faq-item[open] .faq-icon::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item p { padding:0 24px 20px; color:var(--body-dim); font-size:14px; line-height:1.7; }
@media (max-width:880px){ .faq-item summary{ padding:16px 18px; font-size:14px; } .faq-item p{ padding:0 18px 16px; } }

.mobile-action-bar { display:none; }
@media (max-width:880px) {
  .mobile-action-bar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90;
    background:rgba(20,19,17,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    padding:10px 6px calc(10px + env(safe-area-inset-bottom));
  }
  .mobile-action-bar a { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; font-size:10px; letter-spacing:0.04em; text-transform:uppercase; font-weight:700; color:var(--cream); opacity:0.85; }
  .mobile-action-bar a:active { opacity:1; color:var(--green); }
  .mab-icon { font-size:17px; }
  footer.site-footer { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
}

.breadcrumbs { padding:130px 0 0; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--concrete); }
.breadcrumbs a { color:var(--green); }
.error-404 { min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding-top:80px; }
.error-404 h1 { font-size:clamp(60px,12vw,140px); }

@media (max-width: 880px) {
  .hero-tags { gap:6px; }
  .tag { font-size:9px; padding:6px 11px; letter-spacing:0.10em; }
  .cans-row { gap:4px; align-items:flex-start; }
  .can { width:40vw; max-width:40vw; }
  .can:nth-child(1) { margin-right:auto; }
  .can:nth-child(2) { margin-left:auto; }
  .can:nth-child(3) { flex-basis:100%; max-width:46vw; margin:26px auto 0; }
  .can-name { font-size:20px; margin-top:14px; }
  .can-sub { font-size:10px; }
  .rev-badge { display:none; }
  .rev-top { gap:12px; }
  .rev-score { font-size:46px; }
  section { padding:64px 0; }
  .team-group { flex-direction:column; }
  .hero h1 { font-size:clamp(70px,22vw,110px); }

  /* Show the fridge signage, wall and shelves instead of a tight crop on the espresso machine. */
  .hero { min-height:78vh; }
  .hero-bg img { object-position:58% 18%; transform:scale(1); }
  @keyframes kenburns-mobile { to { transform:scale(1.05); } }
  .hero-bg img { animation-name:kenburns-mobile; }

  /* Keep the three stats on one line. */
  .stats { gap:16px; }
  .stat b { font-size:27px; }
  .stat span { font-size:10px; letter-spacing:0.06em; }

  /* "Matcha in a Can" on one line. */
  .cans h2 { font-size:31px; }

  /* The bottom sticky bar already has a "Visit" action — no need to duplicate it in the header on mobile. */
  .navcta { display:none; }
}