:root {
  --ink: #07101b;
  --paper: #f7f5ef;
  --white: #fff;
  --green: #cbd8b7;
  --red: #b84d3f;
  --sand: #dfd3bd;
  --line: rgba(7,16,27,.22);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", system-ui, sans-serif;
  line-height: 1.6;
}
img { display:block; width:100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }

.announcement {
  background: var(--ink);
  color: var(--white);
  text-align:center;
  padding: .75rem 1rem;
  font-family: "DM Mono", monospace;
  font-size: .82rem;
  letter-spacing: .05em;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247,245,239,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  max-width: var(--max);
  margin: auto;
  min-height: 88px;
  padding: 0 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.brand {
  text-decoration:none;
  display:flex;
  flex-direction:column;
  font-size:1.45rem;
  line-height:1.03;
  letter-spacing:-.04em;
  font-weight:500;
}
.main-nav { display:flex; align-items:center; gap:2rem; }
.main-nav a { text-decoration:none; font-size:.95rem; }
.main-nav a:hover { opacity:.58; }
.main-nav a {
  position: relative;
  padding-bottom: .3rem;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right .22s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after {
  right: 0;
}
.menu-toggle { display:none; background:transparent; border:0; width:44px; height:44px; padding:10px; }
.menu-toggle span { display:block; height:1px; background:var(--ink); margin:8px 0; }

.section-pad { max-width:var(--max); margin:auto; padding:110px 28px; }
.eyebrow {
  font-family:"DM Mono", monospace;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.78rem;
  font-weight:500;
}
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { line-height:1.03; letter-spacing:-.045em; }
h1 { font-size:clamp(3.5rem,8vw,7.5rem); font-weight:500; margin-bottom:2rem; }
h2 { font-size:clamp(2.4rem,5vw,5rem); font-weight:500; margin-bottom:2rem; }
h3 { font-size:clamp(1.6rem,2.7vw,2.55rem); font-weight:500; }
.lead { font-size:clamp(1.1rem,1.7vw,1.45rem); max-width:680px; }

.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:end; min-height:calc(100vh - 135px); }
.hero-copy { padding-bottom:2rem; }
.hero-actions { margin-top:2.4rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.button { display:inline-flex; justify-content:center; align-items:center; padding:1rem 1.4rem; text-decoration:none; border:1px solid var(--ink); cursor:pointer; }
.button-dark { background:var(--ink); color:white; }
.button-dark:hover { background:transparent; color:var(--ink); }
.text-link { text-decoration:none; border-bottom:1px solid; padding-bottom:.15rem; }
.hero-visual img { aspect-ratio:4/5; object-fit:cover; filter:saturate(.86) contrast(.95); }
.hero-visual figcaption { font-family:"DM Mono", monospace; font-size:.72rem; margin-top:.65rem; }

.statement { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.statement h2 { max-width:900px; }
.statement > p:last-child { font-size:1.3rem; max-width:850px; }

.coffee-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--ink); padding-top:1px; padding-bottom:1px; }
.coffee-card { min-height:540px; padding:4rem; background:var(--paper); display:flex; flex-direction:column; justify-content:space-between; }
.coffee-card p:last-child { font-size:1.08rem; max-width:540px; }
.image-card { padding:0; overflow:hidden; }
.image-card img { height:100%; object-fit:cover; }
.tone-green { background:var(--green); }
.tone-red { background:var(--red); color:white; }

.origin { display:grid; grid-template-columns:1fr 1fr; gap:6rem; border-bottom:1px solid var(--line); }
.origin-copy p { font-size:1.2rem; }

.section-heading { max-width:800px; }
.service-list { margin-top:5rem; border-top:1px solid var(--line); }
.service-list article { display:grid; grid-template-columns:80px 1fr 1.2fr; gap:2rem; padding:2.2rem 0; border-bottom:1px solid var(--line); align-items:start; }
.service-list span { font-family:"DM Mono",monospace; }
.service-list h3 { font-size:1.6rem; margin:0; }
.service-list p { margin:0; }

.about { max-width:none; background:var(--ink); color:white; }
.about-box { max-width:var(--max); margin:auto; padding:0 28px; }
.about-box h2 { max-width:1000px; }
.about-box p:not(.eyebrow) { max-width:780px; font-size:1.15rem; }

.contact { display:grid; grid-template-columns:.8fr 1.2fr; gap:7rem; }
.contact-details { display:flex; flex-direction:column; gap:.5rem; margin-top:2rem; font-family:"DM Mono", monospace; }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.contact-form label { display:flex; flex-direction:column; gap:.5rem; }
.contact-form label:nth-child(4) { grid-column:1/-1; }
.contact-form span { font-family:"DM Mono", monospace; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
input,textarea { border:1px solid var(--line); background:transparent; padding:1rem; border-radius:0; }
textarea { resize:vertical; }
.contact-form .button { width:max-content; }
.form-note { grid-column:1/-1; font-size:.78rem; opacity:.68; }

.site-footer { max-width:none; background:var(--sand); padding-top:65px; padding-bottom:65px; display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:2rem; }
.site-footer > * { max-width:var(--max); }
.footer-brand { margin-left:max(0px, calc((100vw - var(--max))/2)); }
.site-footer p { margin:0; font-size:.8rem; }

@media (max-width: 820px) {
  .announcement { font-size:.68rem; }
  .nav-wrap { min-height:76px; padding:0 20px; }
  .menu-toggle { display:block; }
  .main-nav { position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:1.5rem 20px 2rem; display:none; flex-direction:column; align-items:flex-start; gap:1.1rem; }
  .main-nav.open { display:flex; }
  .section-pad { padding:75px 20px; }
  .hero { grid-template-columns:1fr; gap:2rem; min-height:auto; }
  .hero-copy { padding-bottom:0; }
  .hero-visual img { aspect-ratio:4/3; }
  .coffee-grid { grid-template-columns:1fr; padding-left:0; padding-right:0; }
  .coffee-card { min-height:420px; padding:2.2rem 20px; }
  .image-card { padding:0; }
  .origin, .contact { grid-template-columns:1fr; gap:2.5rem; }
  .service-list article { grid-template-columns:45px 1fr; }
  .service-list article p { grid-column:2; }
  .contact-form { grid-template-columns:1fr; }
  .contact-form label:nth-child(4) { grid-column:auto; }
  .form-note { grid-column:auto; }
  .site-footer { display:flex; flex-direction:column; align-items:flex-start; padding:55px 20px; }
  .footer-brand { margin-left:0; }
}