:root {
  color-scheme: light;
  --espresso: #24180f;
  --espresso-soft: #302117;
  --coffee: #53341d;
  --coffee-mid: #755333;
  --cream: #f4efe4;
  --paper: #eee6d7;
  --gold: #d2aa68;
  --gold-light: #e3c589;
  --ink: #2a1c13;
  --muted: #6f6254;
  --line: rgba(84, 59, 35, .22);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --content: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 15px; -webkit-font-smoothing: antialiased; }
body, button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid #b17b3d; outline-offset: 4px; }
::selection { color: var(--espresso); background: var(--gold-light); }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 16px; transform: translateY(-160%); color: var(--espresso); background: var(--cream); border: 1px solid var(--gold); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 20; top: 0; width: 100%; background: rgba(244, 239, 228, .96); border-bottom: 1px solid rgba(74, 52, 33, .12); backdrop-filter: blur(14px); }
.header-inner { width: min(calc(100% - 72px), 1360px); min-height: 86px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand-mark { width: 44px; height: 32px; fill: none; stroke: var(--coffee); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.brand-type { display: grid; gap: 0; text-align: center; }
.brand-name { font: 500 28px/.82 var(--serif); letter-spacing: .04em; text-transform: uppercase; }
.brand-caption { margin-top: 7px; font-size: 8px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.primary-navigation { display: flex; align-items: center; gap: clamp(22px, 3.1vw, 46px); color: #534437; font-size: 11px; font-weight: 600; letter-spacing: .045em; }
.primary-navigation > a:not(.nav-cta), .footer-navigation a, .back-to-top { transition: color .2s ease; }
.primary-navigation > a:not(.nav-cta):hover, .footer-navigation a:hover, .back-to-top:hover { color: #9b6f38; }
.nav-cta { display: inline-flex; align-items: center; gap: 16px; min-height: 42px; padding: 0 15px; color: var(--cream); background: var(--espresso); transition: background .2s ease, transform .2s ease; }
.nav-cta span { color: var(--gold-light); font-size: 15px; }
.nav-cta:hover { background: var(--coffee); transform: translateY(-1px); }
.menu-toggle { display: none; }

.hero { overflow: hidden; position: relative; color: var(--cream); background: var(--espresso); }
.hero::before { position: absolute; top: -370px; left: -300px; width: 780px; height: 780px; border: 1px solid rgba(210, 170, 104, .13); border-radius: 50%; content: ""; box-shadow: 0 0 0 58px rgba(210, 170, 104, .018), 0 0 0 118px rgba(210, 170, 104, .015); pointer-events: none; }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, .9fr); align-items: center; gap: clamp(48px, 8vw, 118px); width: min(calc(100% - 112px), var(--content)); min-height: 710px; margin: 0 auto; padding: 48px 0 66px; }
.hero-copy { position: relative; z-index: 1; padding: 30px 0 58px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: #755b3f; font-size: 9px; font-weight: 700; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; }
.eyebrow-rule { display: inline-block; width: 27px; height: 1px; flex: 0 0 auto; background: currentColor; }
.eyebrow-gold { color: var(--gold-light); }
h1, h2, h3, p, figure { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
.hero h1 { max-width: 590px; margin-bottom: 23px; font-size: clamp(58px, 6vw, 88px); letter-spacing: -.035em; line-height: .91; }
.hero h1 em, h2 em { color: var(--gold-light); font-weight: 400; }
.hero-description { max-width: 435px; margin-bottom: 30px; color: #d1c4b3; font-size: 13px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.button { display: inline-flex; min-height: 49px; align-items: center; justify-content: center; gap: 20px; padding: 0 20px; border: 1px solid transparent; font-size: 10px; font-weight: 700; letter-spacing: .06em; transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease; }
.button span { font-size: 15px; transition: transform .22s ease; }
.button:hover { transform: translateY(-2px); }
.button:hover span { transform: translate(2px, -2px); }
.button-gold { color: var(--espresso); background: var(--gold-light); }
.button-gold:hover { background: #edd49f; }
.button-dark { color: var(--cream); background: var(--espresso); }
.button-dark:hover { background: var(--coffee); }
.text-link { display: inline-flex; align-items: center; gap: 12px; width: fit-content; padding: 0 0 7px; border-bottom: 1px solid rgba(83, 52, 29, .5); color: var(--coffee); font-size: 10px; font-weight: 700; letter-spacing: .04em; transition: gap .2s ease, color .2s ease, border-color .2s ease; }
.text-link span { font-size: 14px; }
.text-link:hover { gap: 17px; color: #986b37; border-color: currentColor; }
.text-link-light { color: #e8d9c1; border-color: rgba(232, 217, 193, .5); }
.text-link-light:hover { color: #fff3d8; }
.hero-signoff { display: flex; align-items: center; gap: 12px; margin-top: 43px; color: #b9a991; font-size: 9px; letter-spacing: .08em; line-height: 1.6; }
.hero-signoff em { color: var(--gold-light); font-family: var(--serif); font-size: 16px; letter-spacing: .02em; }
.signoff-leaf { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(210, 170, 104, .55); border-radius: 50%; color: var(--gold-light); font-size: 17px; }
.hero-art { position: relative; width: 100%; height: auto; aspect-ratio: .87; min-height: 0; margin: 0; overflow: hidden; border: 1px solid rgba(227, 197, 137, .54); border-radius: 260px 260px 2px 2px; background: #47321e; }
.hero-art::after { position: absolute; inset: 9px; border: 1px solid rgba(255, 239, 207, .25); border-radius: 252px 252px 1px 1px; content: ""; pointer-events: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 35% center; }
.hero-art::before { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 34%; background: linear-gradient(transparent, rgba(30, 20, 13, .8)); content: ""; pointer-events: none; }
.hero-art-caption { position: absolute; z-index: 2; right: 28px; bottom: 24px; left: 28px; display: flex; justify-content: space-between; gap: 12px; align-items: end; color: var(--cream); }
.caption-label { font: italic 20px/1 var(--serif); }
.caption-detail { color: #e4d3b4; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.hero-art-brand { position: absolute; z-index: 2; top: 7%; right: 15%; display: grid; width: 34%; justify-items: center; color: #5a371b; text-align: center; filter: drop-shadow(0 1px 5px rgba(255, 241, 213, .52)); }
.hero-art-brand img { width: clamp(38px, 5vw, 58px); height: auto; margin-bottom: 3px; }
.hero-brand-name { font: 500 clamp(19px, 2.4vw, 29px)/.84 var(--serif); letter-spacing: .035em; text-transform: uppercase; }
.hero-brand-caption { margin-top: 6px; font-size: clamp(5px, .58vw, 7px); font-weight: 700; letter-spacing: .27em; text-transform: uppercase; }
.scroll-cue { position: absolute; bottom: 28px; left: 0; display: inline-flex; align-items: center; gap: 12px; color: #b9a991; font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.scroll-line { width: 33px; height: 1px; background: var(--gold); transition: width .2s ease; }
.scroll-cue:hover .scroll-line { width: 48px; }

.essence-strip { display: grid; grid-template-columns: repeat(4, 1fr); width: min(calc(100% - 112px), var(--content)); margin: 0 auto; border-bottom: 1px solid var(--line); }
.essence-item { display: flex; align-items: center; gap: 14px; min-height: 90px; padding: 18px 26px; border-right: 1px solid var(--line); color: #5d4b39; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.essence-item:first-child { padding-left: 0; }
.essence-item:last-child { padding-right: 0; border: 0; }
.essence-number { color: #a47b48; font: italic 18px/1 var(--serif); }

.section-shell { position: relative; width: min(calc(100% - 112px), var(--content)); margin: 0 auto; }
.section-dark { color: var(--cream); background: var(--espresso); }
.origin-section { position: relative; overflow: hidden; padding: 115px 0 105px; }
.origin-heading { position: relative; z-index: 1; max-width: 825px; }
.origin-heading h2 { margin: 0; font-size: clamp(48px, 6vw, 76px); letter-spacing: -.025em; line-height: .97; }
.origin-intro { position: absolute; top: 63px; right: 0; width: 270px; margin: 0; color: #c7b8a5; font-size: 11px; line-height: 1.85; }
.origin-values { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 86px; border-top: 1px solid rgba(210, 170, 104, .38); }
.origin-value { position: relative; min-height: 153px; padding: 24px 34px 0; border-right: 1px solid rgba(210, 170, 104, .32); }
.origin-value:first-child { padding-left: 0; }
.origin-value:last-child { border: 0; }
.value-symbol { display: block; width: 38px; height: 38px; margin-bottom: 15px; color: var(--gold-light); }
.value-symbol svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.origin-value h3 { margin: 0 0 5px; font: 500 23px/1.1 var(--serif); }
.origin-value p { margin: 0; color: #b8a58b; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.origin-watermark { position: absolute; z-index: 0; top: 30px; right: 1%; color: rgba(227, 197, 137, .035); font: 500 450px/.8 var(--serif); pointer-events: none; }
.origin-link { position: relative; z-index: 1; margin-top: 24px; }

.process-section { overflow: hidden; padding: 112px 0 120px; background: linear-gradient(180deg, var(--cream), var(--paper)); }
.process-intro { display: grid; grid-template-columns: 1.1fr .72fr; align-items: end; gap: clamp(44px, 9vw, 128px); }
.process-intro h2 { max-width: 700px; margin: 0; font-size: clamp(48px, 5.7vw, 72px); letter-spacing: -.035em; line-height: .94; }
.process-intro h2 em { color: #956b3a; }
.process-intro > p { max-width: 370px; margin: 0 0 .4em auto; color: var(--muted); font-size: 11px; line-height: 1.9; }
.process-list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; margin: 64px 0 0; list-style: none; }
.process-list::before { position: absolute; top: 14px; right: calc(20% - 14px); left: 14px; height: 1px; background: rgba(84, 59, 35, .24); content: ""; }
.process-step { position: relative; z-index: 1; min-width: 0; padding-right: 24px; }
.process-step:last-child { padding-right: 0; }
.process-number { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid #b48c56; border-radius: 50%; color: #8b663c; background: var(--cream); font: italic 12px/1 var(--serif); }
.process-icon { display: block; width: 38px; height: 38px; margin: 23px 0 17px; color: var(--coffee); }
.process-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
.process-step-copy h3 { margin: 0 0 8px; color: #352519; font: 500 25px/1 var(--serif); }
.process-step-copy p { max-width: 190px; margin: 0; color: #746453; font-size: 10px; line-height: 1.8; }

.coffee-section { position: relative; overflow: hidden; padding: 130px 0 126px; background: var(--paper); }
.coffee-layout { display: grid; grid-template-columns: .85fr 1.05fr; align-items: center; gap: clamp(56px, 9vw, 136px); }
.coffee-copy { max-width: 460px; padding: 18px 0; }
.coffee-copy h2, .tasting-copy h2 { margin: 0 0 19px; font-size: clamp(48px, 5.3vw, 68px); letter-spacing: -.035em; line-height: .94; }
.coffee-copy h2 em { color: #956b3a; }
.coffee-copy > p:not(.eyebrow) { max-width: 365px; margin-bottom: 27px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.coffee-details { margin: 0 0 27px; border-top: 1px solid var(--line); }
.coffee-details div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.coffee-details dt { color: #857562; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.coffee-details dd { margin: 0; color: #42301f; font-size: 10px; font-weight: 700; }
.coffee-art { position: relative; width: 100%; aspect-ratio: 1; margin: 0; padding: 9px; border: 1px solid rgba(132, 96, 53, .45); background: #d7c4a4; }
.coffee-art::before { position: absolute; z-index: 1; inset: 17px; border: 1px solid rgba(255, 242, 220, .58); content: ""; pointer-events: none; }
.coffee-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .65s cubic-bezier(.2, .7, .2, 1); }
.coffee-art:hover img { transform: scale(1.025); }
.coffee-art figcaption { position: absolute; right: 27px; bottom: 27px; left: 27px; z-index: 2; display: flex; justify-content: space-between; gap: 12px; color: #fff2d9; font-size: 8px; letter-spacing: .12em; text-shadow: 0 1px 8px #1d110a; text-transform: uppercase; }
.coffee-side-note { position: absolute; right: 20px; top: 50%; color: #88745a; font-size: 8px; letter-spacing: .22em; text-transform: uppercase; writing-mode: vertical-rl; }

.tasting-section { overflow: hidden; padding: 124px 0 130px; }
.tasting-layout { display: grid; grid-template-columns: .94fr .88fr; align-items: center; gap: clamp(70px, 11vw, 155px); }
.tasting-art { position: relative; height: auto; aspect-ratio: .9; margin: 0; overflow: hidden; border: 1px solid rgba(227, 197, 137, .48); border-radius: 230px 230px 2px 2px; background: #3a2819; }
.tasting-art::after { position: absolute; inset: 10px; border: 1px solid rgba(255, 239, 207, .23); border-radius: 220px 220px 1px 1px; content: ""; pointer-events: none; }
.tasting-art img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.tasting-art::before { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 27%; background: linear-gradient(transparent, rgba(30, 20, 13, .78)); content: ""; pointer-events: none; }
.tasting-art figcaption { position: absolute; z-index: 2; bottom: 28px; left: 28px; color: #f3e3c8; font: italic 20px/1.1 var(--serif); }
.tasting-copy h2 { max-width: 560px; color: var(--cream); }
.tasting-copy h2 em { color: var(--gold-light); }
.tasting-intro { margin: 0 0 22px; color: #c5b5a1; font-size: 11px; line-height: 1.8; }
.tasting-notes { padding: 0; margin: 0 0 27px; list-style: none; border-top: 1px solid rgba(210, 170, 104, .34); }
.tasting-notes li { display: grid; grid-template-columns: 44px 1fr 27px; align-items: center; gap: 13px; min-height: 79px; border-bottom: 1px solid rgba(210, 170, 104, .28); }
.note-icon { display: block; width: 35px; height: 35px; color: var(--gold-light); }
.note-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.25; }
.note-copy { display: grid; gap: 4px; }
.note-copy strong { color: #f0e3cd; font: 500 22px/1 var(--serif); }
.note-copy small { color: #b9a891; font-size: 9px; letter-spacing: .08em; }
.note-order { align-self: start; margin-top: 20px; color: #8d7556; font-size: 8px; letter-spacing: .1em; }

.closing-section { padding: 100px 32px 106px; text-align: center; background: var(--cream); }
.closing-inner { max-width: 780px; margin: 0 auto; }
.closing-ornament { display: block; margin-bottom: 16px; color: #a47b48; font-size: 23px; }
.closing-section .eyebrow { justify-content: center; margin-bottom: 17px; }
.closing-section h2 { margin: 0 auto 27px; font-size: clamp(42px, 5.4vw, 66px); letter-spacing: -.03em; line-height: .98; }
.closing-section h2 em { color: #956b3a; }

.contact-section { padding: 82px 0 88px; color: var(--cream); background: var(--espresso-soft); }
.contact-layout { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: clamp(56px, 10vw, 138px); }
.contact-copy h2 { max-width: 430px; margin: 0 0 15px; font-size: clamp(48px, 5.3vw, 66px); letter-spacing: -.035em; line-height: .94; }
.contact-copy h2 em { color: var(--gold-light); }
.contact-copy > p:last-child { max-width: 350px; margin: 0; color: #c7b8a5; font-size: 11px; line-height: 1.85; }
.contact-options { display: grid; gap: 22px; }
.contact-whatsapp { display: flex; min-height: 76px; align-items: center; gap: 16px; padding: 15px 20px; color: var(--espresso); background: var(--gold-light); transition: background .22s ease, transform .22s ease; }
.contact-whatsapp:hover { background: #efd7a5; transform: translateY(-2px); }
.contact-whatsapp > svg { width: 28px; height: 28px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.contact-whatsapp-copy { display: grid; gap: 5px; }
.contact-whatsapp-copy strong { font-size: 11px; letter-spacing: .025em; }
.contact-whatsapp-copy small { color: #755a38; font-size: 9px; letter-spacing: .1em; }
.contact-arrow { margin-left: auto; font-size: 18px; transition: transform .22s ease; }
.contact-whatsapp:hover .contact-arrow { transform: translate(2px, -2px); }
.contact-secondary { display: grid; grid-template-columns: 1fr; gap: 0; }
.contact-secondary-link { display: flex; min-width: 0; min-height: 58px; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid rgba(210, 170, 104, .34); transition: color .2s ease; }
.contact-secondary-link:hover { color: var(--gold-light); }
.contact-secondary-link > svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--gold-light); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.contact-secondary-link .instagram-dot { fill: var(--gold-light); stroke: none; }
.contact-secondary-link span { display: grid; min-width: 0; gap: 4px; }
.contact-secondary-link small { color: #b8a58b; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.contact-secondary-link strong { overflow: hidden; color: #f0e3cd; font-size: 9px; font-weight: 600; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }

.site-footer { color: #d8c9b4; background: #1c130d; }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: min(calc(100% - 72px), 1360px); min-height: 128px; margin: 0 auto; }
.footer-brand .brand-mark { stroke: var(--gold-light); }
.footer-brand .brand-name { color: var(--cream); font-size: 25px; }
.footer-brand .brand-caption { color: #c6b08c; font-size: 7px; }
.footer-navigation { display: flex; gap: 26px; color: #c4b49e; font-size: 9px; letter-spacing: .05em; }
.back-to-top { justify-self: end; display: inline-flex; gap: 13px; color: #e5d5b9; font-size: 9px; letter-spacing: .08em; }
.back-to-top span { color: var(--gold-light); font-size: 15px; }
.copyright { grid-column: 1 / -1; margin: -19px 0 18px; color: #8f7c65; font-size: 8px; letter-spacing: .04em; }

html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js .reveal { opacity: 1; transform: none; }
}

@media (min-width: 1500px) {
  .hero-inner { min-height: 760px; }
}

@media (max-width: 1050px) {
  .header-inner { width: min(calc(100% - 48px), 1360px); gap: 24px; }
  .primary-navigation { gap: 16px; }
  .hero-inner, .section-shell, .essence-strip { width: min(calc(100% - 72px), var(--content)); }
  .hero-inner { grid-template-columns: minmax(0, .96fr) minmax(350px, .84fr); gap: 48px; min-height: 650px; }
  .hero h1 { font-size: clamp(56px, 6.7vw, 72px); }
  .origin-intro { position: static; width: min(100%, 460px); margin: 25px 0 0 auto; }
  .origin-heading { max-width: 780px; }
  .origin-values { margin-top: 60px; }
  .coffee-layout { gap: 58px; }
  .tasting-layout { gap: 65px; }
  .process-section { padding: 94px 0 100px; }
  .process-intro { gap: 48px; }
  .process-intro h2 { font-size: 58px; }
  .process-step { padding-right: 15px; }
  .process-step-copy h3 { font-size: 22px; }
  .contact-layout { gap: 52px; }
  .contact-copy h2 { font-size: 56px; }
  .footer-inner { width: min(calc(100% - 48px), 1360px); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .header-inner { width: calc(100% - 36px); min-height: 72px; }
  .brand { gap: 7px; }
  .brand-mark { width: 38px; height: 28px; }
  .brand-name { font-size: 25px; }
  .brand-caption { margin-top: 6px; font-size: 7px; }
  .menu-toggle { z-index: 2; display: none; width: 43px; height: 43px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(83, 52, 29, .35); color: var(--espresso); background: transparent; cursor: pointer; }
  html.menu-ready .menu-toggle { display: flex; }
  .menu-toggle span { width: 17px; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .primary-navigation { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: flex; align-items: stretch; gap: 0; padding: 7px 18px 18px; border-bottom: 1px solid rgba(74, 52, 33, .16); background: var(--cream); box-shadow: 0 16px 28px rgba(31, 20, 12, .09); }
  html.menu-ready .primary-navigation { display: none; }
  .primary-navigation.is-open { display: flex; flex-direction: column; }
  .primary-navigation > a:not(.nav-cta) { padding: 14px 2px; border-bottom: 1px solid rgba(74, 52, 33, .12); }
  .nav-cta { justify-content: space-between; margin-top: 14px; padding: 0 16px; }

  .hero-inner { grid-template-columns: 1fr; gap: 34px; width: 100%; min-height: 0; padding: 66px 24px 50px; }
  .hero-copy { padding: 0; }
  .eyebrow { margin-bottom: 18px; font-size: 8px; }
  .hero h1 { max-width: 540px; margin-bottom: 18px; font-size: clamp(57px, 13.3vw, 76px); }
  .hero-description { max-width: 470px; margin-bottom: 24px; font-size: 12px; }
  .hero-actions { gap: 21px; }
  .button { min-height: 47px; padding: 0 15px; font-size: 9px; }
  .text-link { font-size: 9px; }
  .hero-signoff { margin-top: 26px; }
  .hero-art { width: min(100%, 500px); height: auto; min-height: 0; aspect-ratio: .92; margin: 0 auto; border-radius: 190px 190px 2px 2px; }
  .hero-art::after { border-radius: 182px 182px 1px 1px; }
  .hero-art-caption { right: 19px; bottom: 19px; left: 19px; }
  .caption-label { font-size: 18px; }
  .caption-detail { font-size: 7px; }
  .hero-art-brand { top: 6.5%; right: 13%; width: 36%; }
  .hero-art-brand img { width: 37px; }
  .hero-brand-name { font-size: clamp(17px, 5vw, 22px); }
  .hero-brand-caption { margin-top: 5px; font-size: 5px; letter-spacing: .23em; }
  .scroll-cue { display: none; }

  .essence-strip { grid-template-columns: 1fr 1fr; width: calc(100% - 48px); }
  .essence-item { min-height: 68px; gap: 10px; padding: 14px 12px; font-size: 8px; letter-spacing: .08em; }
  .essence-item:first-child { padding-left: 0; border-bottom: 1px solid var(--line); }
  .essence-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .essence-item:nth-child(3) { padding-left: 0; }
  .essence-item:last-child { padding-right: 0; }
  .essence-number { font-size: 16px; }

  .section-shell { width: calc(100% - 48px); }
  .origin-section { padding: 80px 0 78px; }
  .origin-heading h2 { font-size: clamp(45px, 10.5vw, 61px); }
  .origin-intro { width: 100%; margin: 23px 0 0; font-size: 11px; }
  .origin-values { grid-template-columns: 1fr; margin-top: 37px; border-top: 1px solid rgba(210, 170, 104, .38); }
  .origin-value, .origin-value:first-child { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; column-gap: 14px; min-height: 86px; padding: 13px 0; border-right: 0; border-bottom: 1px solid rgba(210, 170, 104, .28); }
  .origin-value:last-child { border-bottom: 0; }
  .value-symbol { grid-row: 1 / 3; width: 34px; height: 34px; margin: 0; }
  .origin-value h3 { align-self: end; margin: 0 0 3px; font-size: 21px; }
  .origin-value p { align-self: start; font-size: 8px; }
  .origin-watermark { top: 100px; right: -17%; font-size: 310px; }

  .coffee-section { padding: 82px 0 82px; }
  .coffee-layout { grid-template-columns: 1fr; gap: 34px; }
  .coffee-copy { max-width: 600px; padding: 0; }
  .coffee-copy h2, .tasting-copy h2 { max-width: 550px; font-size: clamp(48px, 10.8vw, 64px); }
  .coffee-copy > p:not(.eyebrow) { font-size: 11px; }
  .coffee-details { max-width: 520px; }
  .coffee-art { width: min(100%, 530px); margin: 0 auto; }
  .coffee-side-note { display: none; }

  .process-section { padding: 82px 0 88px; }
  .process-intro { grid-template-columns: 1fr; gap: 18px; }
  .process-intro h2 { max-width: 550px; font-size: clamp(47px, 10vw, 62px); }
  .process-intro > p { max-width: 480px; margin: 0; font-size: 10px; }
  .process-list { grid-template-columns: 1fr; gap: 0; margin-top: 38px; }
  .process-list::before { top: 14px; right: auto; bottom: 14px; left: 14px; width: 1px; height: auto; }
  .process-step, .process-step:last-child { display: grid; grid-template-columns: 29px 32px minmax(0, 1fr); align-items: start; gap: 12px; padding: 0 0 24px; }
  .process-number { position: relative; z-index: 1; }
  .process-icon { width: 30px; height: 30px; margin: 0; }
  .process-step-copy h3 { margin: 1px 0 4px; font-size: 23px; }
  .process-step-copy p { max-width: 420px; font-size: 10px; }

  .tasting-section { padding: 82px 0 85px; }
  .tasting-layout { grid-template-columns: 1fr; gap: 40px; }
  .tasting-art { width: min(100%, 500px); height: auto; aspect-ratio: .9; margin: 0 auto; border-radius: 190px 190px 2px 2px; }
  .tasting-art::after { border-radius: 182px 182px 1px 1px; }
  .tasting-art figcaption { bottom: 20px; left: 21px; font-size: 18px; }
  .tasting-copy { max-width: 570px; }
  .tasting-copy h2 { font-size: clamp(47px, 10.6vw, 62px); }

  .closing-section { padding: 73px 24px 78px; }
  .closing-section h2 { font-size: clamp(42px, 9.7vw, 57px); }
  .contact-section { padding: 70px 0 74px; }
  .contact-layout { grid-template-columns: 1fr; gap: 30px; }
  .contact-copy h2 { max-width: none; font-size: clamp(46px, 10vw, 60px); }
  .contact-copy > p:last-child { font-size: 10px; }
  .contact-options { gap: 19px; }
  .contact-secondary { gap: 0; }
  .contact-secondary-link { gap: 8px; }
  .contact-secondary-link > svg { width: 19px; height: 19px; }
  .contact-secondary-link strong { font-size: 8px; }
  .footer-inner { grid-template-columns: 1fr auto; gap: 18px; width: calc(100% - 48px); min-height: 0; padding: 29px 0 20px; }
  .footer-navigation { grid-column: 1 / -1; grid-row: 2; gap: 20px; flex-wrap: wrap; padding: 15px 0; border-top: 1px solid rgba(210, 170, 104, .22); border-bottom: 1px solid rgba(210, 170, 104, .22); font-size: 8px; }
  .back-to-top { grid-column: 2; grid-row: 1; }
  .copyright { grid-column: 1 / -1; margin: 0; }
}

@media (max-width: 380px) {
  .header-inner { width: calc(100% - 28px); }
  .hero-inner { padding-right: 18px; padding-left: 18px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .essence-strip, .section-shell, .footer-inner { width: calc(100% - 36px); }
  .essence-item { gap: 7px; font-size: 7px; }
  .origin-value, .origin-value:first-child { grid-template-columns: 38px 1fr auto; column-gap: 10px; }
}