:root {
  --espresso: #2a1711;
  --espresso-2: #40251c;
  --cream: #f6eee2;
  --paper: #fffaf3;
  --mint: #8fd2c5;
  --mint-dark: #183e38;
  --caramel: #d99a5f;
  --ink: #251712;
  --muted: #776761;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }

.header {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff8ed;
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
}
.brand { display: inline-flex; align-items: center; gap: 1px; font-weight: 900; letter-spacing: -.07em; font-size: 27px; }
.brand > span { color: var(--mint); }
.brand small { margin-left: 9px; font-size: 10px; line-height: 1; letter-spacing: .13em; text-transform: uppercase; opacity: .62; font-weight: 700; }
.nav { display: flex; gap: 8px; padding: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.06); }
.nav a { padding: 8px 15px; border-radius: 999px; font-size: 13px; color: rgba(255,255,255,.7); transition: .2s ease; }
.nav a:hover, .nav a:focus-visible { color: #fff; background: rgba(255,255,255,.08); outline: none; }
.headerCta { border: 1px solid rgba(143,210,197,.65); color: var(--mint); border-radius: 999px; padding: 10px 17px; font-size: 13px; font-weight: 750; }

.hero {
  width: 100%;
  max-width: none;
  min-height: 720px;
  padding: 140px max(24px, calc((100vw - 1160px)/2)) 84px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  align-items: center;
  gap: 70px;
  color: #fff8ed;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 78% 38%, rgba(198,120,57,.25), transparent 27%),
    radial-gradient(circle at 4% 15%, rgba(143,210,197,.08), transparent 25%),
    linear-gradient(135deg, #24120e, #3b2118 58%, #27150f);
}
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; background-image: radial-gradient(#fff 0.7px, transparent .7px); background-size: 12px 12px; }
.heroCopy, .heroVisual { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 20px; color: var(--mint); text-transform: uppercase; letter-spacing: .17em; font-size: 11px; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 24px; max-width: 720px; font-size: clamp(46px, 6vw, 78px); line-height: .99; letter-spacing: -.055em; font-weight: 850; }
.lead { max-width: 610px; margin-bottom: 32px; color: rgba(255,248,237,.68); font-size: 17px; line-height: 1.72; }
.heroActions { display: flex; gap: 25px; align-items: center; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 23px; border-radius: 999px; font-weight: 800; font-size: 14px; transition: transform .2s ease, filter .2s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.primary { color: var(--mint-dark); background: var(--mint); box-shadow: 0 16px 40px rgba(19,65,56,.25); }
.textLink { font-size: 14px; color: rgba(255,255,255,.82); }
.textLink span { color: var(--mint); margin-left: 5px; }
.quickFacts { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 50px; color: rgba(255,255,255,.48); font-size: 12px; }
.quickFacts span { padding-right: 22px; border-right: 1px solid rgba(255,255,255,.13); }
.quickFacts span:last-child { border-right: 0; }
.quickFacts b { display: block; margin-bottom: 5px; color: #fff8ed; font-size: 15px; }

.heroVisual { min-height: 440px; display: grid; place-items: center; }
.cup { position: relative; z-index: 2; width: 218px; height: 310px; border-radius: 12px 12px 44px 44px; transform: rotate(-6deg); background: linear-gradient(100deg, #eee1ca 0%, #fff8e9 48%, #d5c3a7 100%); box-shadow: inset -16px 0 30px rgba(80,38,15,.12), 32px 42px 60px rgba(0,0,0,.33); }
.lid { position: absolute; left: -13px; right: -13px; top: -12px; height: 38px; border-radius: 10px 10px 17px 17px; background: linear-gradient(#49352c 0 27%, #1c1310 29% 47%, #3a2922 50%); box-shadow: 0 8px 12px rgba(0,0,0,.24); }
.sleeve { position: absolute; inset: 103px -4px auto; min-height: 106px; display: grid; place-content: center; text-align: center; color: #f8e9d3; background: linear-gradient(100deg, #6d3c29, #3c2118 52%, #754630); clip-path: polygon(2% 0, 98% 0, 91% 100%, 9% 100%); }
.sleeve strong { font-size: 30px; letter-spacing: -.07em; }
.sleeve small { margin-top: 3px; color: rgba(255,255,255,.52); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.cupShadow { position: absolute; width: 270px; height: 60px; margin: 330px 0 0 20px; border-radius: 50%; background: rgba(0,0,0,.3); filter: blur(17px); }
.steam { position: absolute; z-index: 1; width: 45px; height: 125px; top: 8px; border: 4px solid rgba(255,255,255,.13); border-color: transparent rgba(255,255,255,.13) transparent transparent; border-radius: 50%; }
.steamOne { margin-left: -48px; transform: rotate(-8deg); }
.steamTwo { margin-left: 48px; top: -7px; transform: scale(.75) rotate(7deg); }
.bean { position: absolute; width: 28px; height: 42px; z-index: 2; border-radius: 48% 52%; background: radial-gradient(circle at 35% 28%, #b66f3c, #4d2415 60%, #24100b); box-shadow: 4px 8px 16px rgba(0,0,0,.23); transform: rotate(34deg); }
.bean::after { content: ""; position: absolute; left: 50%; top: 8%; width: 2px; height: 82%; border-radius: 50%; background: rgba(247,194,137,.35); transform: rotate(10deg); }
.beanOne { left: 7%; top: 22%; transform: rotate(65deg) scale(.85); }
.beanTwo { right: 5%; top: 15%; transform: rotate(-25deg) scale(1.1); }
.beanThree { right: 10%; bottom: 4%; transform: rotate(34deg) scale(.7); }
.priceBubble { position: absolute; z-index: 3; right: 2%; bottom: 8%; width: 126px; height: 126px; display: grid; place-content: center; text-align: center; color: var(--mint-dark); border-radius: 50%; background: var(--mint); transform: rotate(5deg); box-shadow: 0 16px 35px rgba(0,0,0,.2); }
.priceBubble strong { font-size: 18px; }
.priceBubble span { margin-top: 3px; font-size: 10px; opacity: .65; }

.menuSection { padding: 105px 0; background: var(--cream); }
.sectionHeading { display: grid; grid-template-columns: 1fr 360px; align-items: end; gap: 50px; margin-bottom: 42px; }
.darkEyebrow { color: #307a6c; }
h2 { margin-bottom: 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.05; letter-spacing: -.045em; }
.sectionHeading > p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }
.coffeeGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.coffeeCard { min-height: 410px; display: flex; flex-direction: column; padding: 28px; border: 1px solid rgba(71,44,32,.08); border-radius: 30px; background: rgba(255,255,255,.63); box-shadow: 0 20px 50px rgba(78,47,34,.06); }
.miniCup { width: 100%; height: 165px; margin-bottom: 25px; display: grid; place-items: center; border-radius: 22px; position: relative; overflow: hidden; }
.miniCup::before { content: ""; position: absolute; width: 82px; height: 112px; border-radius: 7px 7px 20px 20px; background: linear-gradient(105deg, #fff9ed, #d9c4a5); transform: rotate(-4deg); box-shadow: 9px 13px 19px rgba(52,30,18,.18); }
.miniCup::after { content: ""; position: absolute; width: 92px; height: 14px; margin-top: -104px; border-radius: 8px; background: #31211c; transform: rotate(-4deg); }
.miniCup span { z-index: 2; margin-top: 8px; color: rgba(51,31,23,.4); font-weight: 900; font-size: 25px; }
.miniCup.cream { background: #eadac4; }
.miniCup.mint { background: #c5e5de; }
.miniCup.cocoa { background: #ceb19c; }
.coffeeCard h3 { margin-bottom: 9px; font-size: 23px; letter-spacing: -.025em; }
.coffeeCard p { color: var(--muted); line-height: 1.6; font-size: 13px; }
.cardBottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.cardBottom strong { font-size: 23px; }
.cardBottom a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--mint-dark); background: var(--mint); font-size: 24px; line-height: 1; }

.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; padding-block: 112px; }
.aboutIntro > p:last-child { max-width: 560px; margin-top: 27px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.values { display: grid; gap: 1px; background: rgba(70,42,29,.12); }
.values article { padding: 25px 28px; display: grid; grid-template-columns: 38px 1fr; column-gap: 15px; background: var(--paper); }
.values span { grid-row: 1 / 3; color: #409687; font-weight: 800; font-size: 12px; }
.values h3 { margin-bottom: 7px; font-size: 19px; }
.values p { margin: 0; color: var(--muted); font-size: 13px; }

.contactSection { padding: 0 0 95px; }
.contactCard { padding: 54px 58px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; border-radius: 34px; background: var(--mint); }
.contactCard h2 { max-width: 420px; }
.contactDetails { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
.contactDetails p { margin: 0; }
.contactDetails span { display: block; margin-bottom: 5px; color: rgba(24,62,56,.62); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.contactDetails strong { font-size: 14px; }
.darkButton { grid-column: 1 / -1; color: #fff; background: var(--espresso); }
.footer { min-height: 105px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(57,34,23,.1); }
.footerBrand { color: var(--espresso); }
.footer p, .footer > a:last-child { margin: 0; color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr 330px; gap: 20px; }
  .heroVisual { transform: scale(.85); }
  .about { gap: 50px; }
}

@media (max-width: 720px) {
  .shell { width: min(100% - 32px, 1160px); }
  .header { height: 72px; }
  .nav { display: none; }
  .headerCta { padding: 9px 13px; font-size: 12px; }
  .brand small { display: none; }
  .hero { min-height: auto; padding: 118px 16px 64px; grid-template-columns: 1fr; gap: 25px; }
  h1 { font-size: clamp(43px, 13.3vw, 62px); }
  .lead { font-size: 15px; }
  .heroVisual { min-height: 350px; transform: scale(.84); margin-block: -25px; }
  .quickFacts { gap: 16px; }
  .quickFacts span { padding-right: 16px; }
  .sectionHeading { grid-template-columns: 1fr; gap: 22px; }
  .coffeeGrid { grid-template-columns: 1fr; }
  .coffeeCard { min-height: 350px; }
  .about { grid-template-columns: 1fr; gap: 45px; padding-block: 82px; }
  .menuSection { padding: 80px 0; }
  .contactCard { width: calc(100% - 32px); padding: 38px 27px; grid-template-columns: 1fr; gap: 35px; border-radius: 27px; }
  .contactDetails { grid-template-columns: 1fr; }
  .darkButton { grid-column: auto; }
  .footer { min-height: 130px; flex-wrap: wrap; gap: 20px; padding-block: 30px; }
  .footer p { order: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}