@font-face{font-family:Montserrat;src:url('/assets/Montserrat-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('/assets/Montserrat-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url('/assets/Montserrat-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:MontserratExpressive;src:url('/assets/Montserrat-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}

:root{--cream:#f3ebdc;--ivory:#f6f0e4;--paper:#fff;--blue:#08396d;--night:#072f58;--orange:#f36b21;--ink:#172f45;--muted:#52606c;--serif:Georgia,'Times New Roman',serif;--sans:Montserrat,Arial,sans-serif;scroll-behavior:smooth}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
html.menu-open,body.menu-open{height:100%;overflow:hidden;overscroll-behavior:none}
body{font-family:var(--sans);color:var(--ink);background:var(--ivory);font-size:15px;line-height:1.65}
.paper-section{background:var(--paper)}
.story,.place,.site-footer{background:#fff;background-image:none}
.coffees,.commitments{background:var(--cream);background-image:none}
.shell{width:min(1320px,calc(100% - 80px));margin-inline:auto}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-150%);background:#fff;padding:10px 14px;border:2px solid var(--orange)}
.skip-link:focus{transform:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px}

.site-header{height:82px;padding:10px 3.2vw;background:rgba(250,247,239,.98);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:100;box-shadow:0 2px 12px rgba(6,38,68,.08)}
.brand{display:flex;align-items:center;position:relative;z-index:102}
.brand-logo{width:215px;height:auto}
.primary-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,38px)}
.primary-nav a{text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.025em;padding:15px 0;border-bottom:2px solid transparent}
.primary-nav a:hover,.primary-nav a:focus-visible{color:var(--orange);border-color:var(--orange)}
.menu-toggle{display:none;border:0;background:transparent;width:48px;height:48px;padding:11px;flex-direction:column;justify-content:center;gap:6px;cursor:pointer}
.menu-toggle span:not(.sr-only){height:2px;width:100%;background:var(--blue);transition:transform .25s,opacity .2s}

.hero{min-height:590px;position:relative;color:#fff;display:flex;align-items:center;background-image:url('/assets/hero-sailboats.webp');background-size:cover;background-position:center 51%;isolation:isolate}
.hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,24,43,.30) 0%,rgba(5,24,43,.12) 48%,rgba(5,24,43,0) 78%),linear-gradient(0deg,rgba(0,17,31,.08),transparent 48%)}
.hero-content{padding-block:74px}
.hero h1{font:400 clamp(48px,5vw,78px)/.98 var(--serif);letter-spacing:-.025em;text-shadow:0 2px 6px #0007;margin-bottom:26px;max-width:750px}
.hero h1 em{font-family:MontserratExpressive,Montserrat,Arial,sans-serif;font-size:1em;font-style:italic;font-weight:400;line-height:.9;letter-spacing:-.04em;color:var(--blue)}
.hero-content>p{max-width:520px;font-size:17px;line-height:1.65;text-shadow:0 1px 4px rgba(0,0,0,.78);margin-bottom:30px}

.button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:12px 28px;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.03em;transition:.2s}
.button-solid{background:var(--blue);color:#fff}.button-solid:hover{background:var(--orange)}
.button-outline{border:1px solid var(--blue);color:var(--blue)}.button-outline:hover{background:var(--blue);color:#fff}

.story{padding:68px 0 72px}
.story-grid{display:grid;grid-template-columns:minmax(240px,.82fr) minmax(260px,.92fr) minmax(360px,1.3fr);gap:clamp(28px,3.2vw,52px);align-items:center}
.story-copy h2,.coffee-intro h2,.place-copy h2,.commitments h2{font:400 clamp(36px,3.2vw,53px)/1.05 var(--serif);color:var(--blue);margin-bottom:24px}
.story-copy p{font-size:14px;margin-bottom:13px}
.signature{font-family:MontserratExpressive,Montserrat,Arial,sans-serif;font-size:20px;font-style:italic;font-weight:400;line-height:1.35;color:var(--blue);margin:28px 0 0!important}
.portrait-card{position:relative;width:min(82%,300px);justify-self:center;margin:0;padding:14px;background:#fff;box-shadow:0 5px 16px #3b2e1c24;transform:rotate(1deg)}
.portrait-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 42%}
.tape{position:absolute;width:88px;height:30px;background:#e8d5a8cc;z-index:2}.tape-one{top:-13px;left:-34px;transform:rotate(-34deg)}.tape-two{right:-34px;bottom:-12px;transform:rotate(-42deg)}
.travel-card{position:relative;margin:0;align-self:center}
.travel-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center}


.coffees{padding:58px 0;border-top:1px solid #ddd3c4}
.coffee-layout{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:center}
.coffee-intro h2{margin-bottom:14px}.coffee-intro>p{font:24px/1.25 var(--serif);margin-bottom:30px}
.coffee-list{display:grid;grid-template-columns:repeat(3,1fr)}
.coffee-card{display:grid;grid-template-columns:48% 52%;gap:0;padding:0 24px;border-left:1px dashed #c8bda9;align-items:center}
.coffee-card img{width:100%;height:270px;object-fit:contain}
.coffee-info{padding-left:17px}.coffee-info h3{color:var(--blue);font-size:17px;text-transform:uppercase;margin-bottom:0}.coffee-info strong{color:var(--blue);display:block;font-size:13px;margin-bottom:18px}.coffee-info p{font:14px/1.65 var(--serif);min-height:94px}.coffee-info a{color:var(--blue);font-size:10px;text-transform:uppercase;font-weight:700}

.duo-sections{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ddd3c4;border-bottom:1px solid #ddd3c4}
.roasting,.place{min-width:0;min-height:470px;display:grid;grid-template-columns:minmax(255px,.9fr) minmax(280px,1.1fr)}
.roasting{background:var(--blue);color:#fff}
.roasting-copy,.place-copy{align-self:center;padding:42px clamp(28px,3vw,52px)}
.roasting-copy h2{font:400 clamp(31px,2.45vw,43px)/1.04 var(--serif);margin-bottom:21px}
.roasting-copy p,.place-copy p{font-size:13px;line-height:1.65;margin-bottom:15px}
.roasting ul,.place ul{list-style:none;padding:0;margin:22px 0}.roasting li,.place li{display:flex;gap:10px;align-items:flex-start;margin:9px 0;font-size:12px;line-height:1.4}.mini-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}.roasting .mini-icon{color:#fff}.place .mini-icon{color:var(--blue)}
.button-light{border:1px solid #fff;color:#fff}.button-light:hover{background:#fff;color:var(--blue)}
.roasting figure,.place figure{margin:0;min-width:0;min-height:0;height:100%;overflow:hidden}
.roasting figure img{width:100%;height:100%;object-fit:cover;object-position:center}
.place{grid-template-columns:minmax(270px,1fr) minmax(250px,.95fr)}
.place-copy h2{font-size:clamp(31px,2.45vw,43px);margin-bottom:21px}
.place-illustration{padding:24px 18px}.place-illustration img{width:100%;height:100%;object-fit:contain;object-position:center}

.commitments{padding:55px 0 60px;text-align:center}
.commitments h2{font-size:42px;margin-bottom:36px}
.commitment-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.commitment-icon{width:54px;height:54px;margin:0 auto 15px;object-fit:contain}.commitment h3{font-size:13px;font-weight:400;margin-bottom:1px}.commitment p{font-size:12px;font-weight:400;margin-bottom:0}
.site-footer{border-top:1px solid #d7ccbb;padding:54px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.35fr .75fr 1fr 1fr;gap:50px}.footer-grid h2{font-size:11px;text-transform:uppercase;color:var(--blue);margin-bottom:17px}.footer-grid p,.footer-grid a{display:block;font-size:11px;line-height:1.8}.footer-brand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}.footer-logo{width:150px;height:auto}.socials{display:flex;gap:10px;margin-top:13px}.socials a{width:38px;height:38px;border:0;border-radius:0;color:var(--blue);background:transparent;display:grid;place-items:center}.socials svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.socials svg path{fill:currentColor;stroke:none}.socials .instagram-dot{fill:currentColor;stroke:none}.legal{border-top:1px solid #d9cebd;margin-top:42px;padding-top:17px;text-align:center;font-size:10px}.legal span{padding:0 8px}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}.reveal.visible{opacity:1;transform:none}

@media(max-width:1180px){
  .site-header{height:78px}.primary-nav{gap:14px}.primary-nav a{font-size:8.5px}
  .shell{width:min(100% - 48px,1060px)}
  .story-grid{grid-template-columns:.78fr .9fr 1.2fr;gap:27px}
  .coffee-layout{grid-template-columns:190px 1fr}.coffee-card{display:block;padding:0 14px}.coffee-card img{height:220px}.coffee-info p{min-height:115px}
  .duo-sections{display:block}.roasting,.place{min-height:440px;grid-template-columns:minmax(320px,.8fr) minmax(420px,1.2fr)}.place{grid-template-columns:minmax(380px,1fr) minmax(380px,1fr)}
  .footer-grid{gap:28px}
}

@media(max-width:760px){
  body{font-size:15px}.shell{width:calc(100% - 36px)}
  .site-header{height:68px;padding:7px 18px;position:sticky;top:0}.brand-logo{width:190px}
  .menu-toggle{display:flex;position:relative;z-index:102}.menu-toggle[aria-expanded=true] span:nth-of-type(2){transform:translateY(8px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-of-type(3){opacity:0}.menu-toggle[aria-expanded=true] span:nth-of-type(4){transform:translateY(-8px) rotate(-45deg)}
  .primary-nav{position:fixed;inset:0;z-index:101;height:100vh;height:100dvh;background:var(--paper);padding:104px 30px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow-y:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity .25s,transform .25s,visibility .25s}
  .primary-nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .primary-nav a{width:min(100%,320px);font-family:var(--serif);font-size:clamp(22px,6vw,28px);font-weight:400;text-transform:none;text-align:center;padding:9px 12px;border-bottom:1px solid #ded5c8}.primary-nav a:last-child{border-bottom:0}.primary-nav a:hover,.primary-nav a:focus-visible{color:var(--orange);border-color:#ded5c8}
  .hero{min-height:650px;background-position:58% center;align-items:flex-start}.hero-overlay{background:linear-gradient(0deg,rgba(2,20,37,.48) 0%,rgba(2,20,37,.22) 58%,rgba(2,20,37,.05) 100%)}.hero-content{padding-block:145px 64px}.hero h1{font-size:43px;line-height:1.04;margin-bottom:21px}.hero h1 em{line-height:.9;color:var(--blue)}.hero-content>p{font-size:15px;line-height:1.6;max-width:340px}
  .story{padding:52px 0}.story-grid{grid-template-columns:1fr;gap:38px}.story-copy h2,.coffee-intro h2,.place-copy h2,.commitments h2{font-size:39px}.story-copy p{font-size:15px;line-height:1.65}.signature{font-size:15px;line-height:1.45}.portrait-card{width:min(74%,280px);margin-inline:auto;order:2}.portrait-card img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 42%}.travel-card{order:3}.travel-card img{aspect-ratio:16/11}
  .coffees{padding:52px 0}.coffee-layout{display:block}.coffee-intro{text-align:center;margin-bottom:38px}.coffee-intro p br{display:none}.coffee-intro p{font:15px/1.5 var(--serif)}.coffee-list{display:block}.coffee-card{display:grid;grid-template-columns:43% 1fr;padding:24px 0;border-left:0;border-top:1px dashed #c8bda9}.coffee-card img{height:220px}.coffee-info h3,.coffee-info strong,.coffee-info p{font-size:14px}.coffee-info strong{margin-bottom:12px}.coffee-info p{line-height:1.6;min-height:0}.coffee-info a{font-size:12px}
  .roasting,.place{min-height:0;display:grid;grid-template-columns:1fr}.roasting-copy,.place-copy{padding:52px 24px 40px}.roasting-copy h2,.place-copy h2{font-size:38px}.roasting-copy p,.place-copy p{font-size:14px;line-height:1.65}.roasting li,.place li{font-size:14px;line-height:1.5}.roasting figure{height:auto;padding:0 24px 48px}.roasting figure img{height:auto;aspect-ratio:1/1;object-fit:cover}.place-illustration{height:auto;padding:0 12px 28px}.place-illustration img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
  .commitments{padding:52px 0}.commitments h2{margin-bottom:36px}.commitment-grid{grid-template-columns:repeat(2,1fr);gap:34px 16px}.commitment h3,.commitment p{font-size:14px;line-height:1.5}.commitment:last-child{grid-column:1/-1}
  .button{font-size:12px}
  .site-footer{padding-top:42px}.footer-grid{grid-template-columns:1fr 1fr;gap:34px 24px}.footer-grid h2{font-size:12px}.footer-grid p,.footer-grid a{font-size:13px;line-height:1.75}.footer-brand{grid-column:1/-1}.footer-logo{width:190px}.footer-brand p{max-width:430px}.legal{font-size:11px;line-height:1.8}.legal span{padding:0 4px}
}

@media(max-width:390px){
  .hero h1{font-size:40px}.coffee-card{grid-template-columns:42% 1fr}.footer-grid{display:block}.footer-grid>div{margin-bottom:30px}.commitment-grid{gap:28px 12px}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.primary-nav{transition:none}}
