@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--cream:#eee7d8;--ink:#24180f;--orange:#db7c3c}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:82px}body{margin:0;background:var(--ink);color:var(--cream);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #ed9c55;outline-offset:6px}header{position:absolute;top:0;left:0;z-index:10;width:100%;padding:24px 4%;display:flex;justify-content:space-between;align-items:center}.logo{font-size:40px;letter-spacing:-3px;font-weight:700;line-height:1}.logo span{font-size:12px;vertical-align:top;letter-spacing:0;margin-left:5px}nav{display:flex;align-items:center;gap:36px;font-size:12px}.pill{border:1px solid currentColor;border-radius:40px;display:inline-block;padding:14px 23px;font-size:12px;transition:background .2s,color .2s}.pill:hover{background:var(--cream);color:var(--ink)}.hero{height:900px;min-height:100svh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 65% 57%,#57301d 0, #20140f 40%,#150f0c 75%);padding:155px 4% 0}.eyebrow,.section-top,.hero-bottom{font-size:10px;letter-spacing:1.6px;font-weight:500}.hero h1{position:relative;z-index:3;font-family:'Playfair Display',Georgia,serif;font-size:clamp(90px,11.7vw,180px);font-weight:500;line-height:.98;letter-spacing:-8px;margin:30px 0}em{font-weight:500;color:#d99462}h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(48px,6.5vw,100px);line-height:1.08;letter-spacing:-4px;margin:0}.hero-copy{position:absolute;z-index:4;bottom:142px;left:4%;font-size:14px;line-height:1.7;color:#c2b5a7}.hero-bottom{position:absolute;bottom:26px;left:4%;right:4%;display:flex;justify-content:space-between;border-top:1px solid #ffffff30;padding-top:20px;font-size:9px}.round{position:absolute;bottom:118px;right:5%;z-index:5;border:1px solid #ffffff70;border-radius:50%;width:75px;height:75px;display:grid;place-items:center;font-size:25px}.light{position:absolute;left:-15%;width:140%;border-radius:50%;filter:blur(21px);transform:rotate(-12deg);pointer-events:none}.light1{top:50%;height:45px;background:linear-gradient(90deg,transparent,#8a3c15,#ffb45b,#f9e2be,#8b4319,transparent);opacity:.75}.light2{top:61%;height:10px;background:#c27c4e;opacity:.6}.light3{top:73%;height:18px;background:#986541;opacity:.4}.coffee-art{position:absolute;width:330px;height:520px;right:14%;top:226px;transform:rotate(12deg);z-index:2;filter:drop-shadow(18px 20px 30px #0008);animation:float 7s ease-in-out infinite}.cup{position:absolute;top:100px;width:280px;height:370px;left:25px;border-radius:13px 13px 65px 65px;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);background:linear-gradient(90deg,#7f4b29,#c49766 23%,#ead5ad 48%,#b48356 70%,#54301e);box-shadow:inset 10px 0 30px #ffffff60;overflow:hidden;border-top:4px solid #ddc5a5}.cup:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#fff2,transparent 20%,#fff1 50%,#0002);border:2px solid #ffffff50}.milk{height:50%;position:absolute;bottom:0;left:0;right:0;background:linear-gradient(5deg,#e8c99a,#bd8c53 70%,transparent);border-radius:40% 20% 0 0;filter:blur(10px)}.lid{position:absolute;top:85px;left:16px;width:298px;height:26px;border-radius:50%;background:linear-gradient(#e1d6bf90,#794f32 50%,#e8d9bc90);border:3px solid #c4aa87;z-index:4}.straw{position:absolute;width:16px;height:240px;top:-10px;left:210px;background:linear-gradient(90deg,#796651,#e2d1ad,#8e7760);transform:rotate(10deg);border-radius:6px;z-index:2}.ice{position:absolute;width:80px;height:65px;border:2px solid #e8ce9f80;border-radius:16px;background:linear-gradient(135deg,#e9cba87a,#3c211b65);z-index:1;box-shadow:inset 4px 6px 10px #ffe5ae50}.i1{top:15px;left:20px;transform:rotate(22deg)}.i2{top:5px;right:40px;transform:rotate(-12deg)}.i3{top:67px;left:90px;transform:rotate(32deg)}.cup-label{position:absolute;z-index:3;top:155px;width:100%;text-align:center;font-size:53px;letter-spacing:-4px;font-weight:700;color:#302016;transform:rotate(-2deg)}.cup-label span{display:block;font-size:9px;letter-spacing:2px;line-height:1.4;margin-top:10px}.ritual{padding:60px 8% 90px;background:var(--cream);color:var(--ink)}.section-top{display:flex;justify-content:space-between;border-top:1px solid #776c5c70;padding-top:17px;margin-bottom:75px}.ritual h2{max-width:1000px}.ritual em{color:#956344}.ritual-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:60px}.sun{font-size:100px;color:#a65b2a}.ritual-bottom p{max-width:390px;font-size:15px;line-height:1.7}.coffee{padding:60px 8% 90px;background:#382219}.coffee-heading{display:flex;justify-content:space-between;align-items:end}.coffee-heading p{font-size:14px;line-height:1.6}.flavour-stage{display:grid;grid-template-columns:80px 1fr 1fr;gap:40px;align-items:center;margin-top:60px;padding:50px 0;border-top:1px solid #ffffff25}.flavour-number{align-self:start;font-size:12px}.mini-cup{margin:auto;width:190px;height:290px;background:linear-gradient(95deg,#a7602b,#d8a86f 45%,#a25e2c);border-radius:18px 18px 40px 40px;transform:rotate(-8deg);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#291c13;box-shadow:15px 25px 45px #0004;border-top:12px solid #d9c9af;transition:background .5s,transform .5s}.mini-cup span{font-size:41px;font-weight:700;letter-spacing:-3px}.mini-cup small{font-size:9px;letter-spacing:1px;margin-top:15px}h3{font-family:'Playfair Display',Georgia,serif;font-size:47px;font-weight:500;margin:15px 0}.flavour-info p{font-size:14px;line-height:1.7;max-width:360px;min-height:72px;color:#cbbbad}.selectors{display:flex;gap:7px;margin:25px 0}.selectors button{border:1px solid #bda58b80;background:transparent;color:var(--cream);padding:11px 12px;border-radius:25px;font:inherit;font-size:10px;cursor:pointer}.selectors button[aria-pressed=true]{background:var(--cream);color:var(--ink)}.concept{font-size:10px;color:#c0aa96}.moment{text-align:center;padding:130px 20px;position:relative;overflow:hidden;background:#1a130e}.moment h2{position:relative;margin:35px 0 45px}.moment .eyebrow,.moment .pill{position:relative}.orb{position:absolute;width:650px;height:650px;border-radius:50%;background:radial-gradient(ellipse,#ad623c30,transparent 67%);top:0;left:calc(50% - 325px)}.club{background:#ce9970;color:#25190f;padding:60px 8% 90px}.club em{color:#67412b}.club-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:40px}.club p{font-size:14px;line-height:1.7}footer{padding:45px 4%;display:flex;justify-content:space-between;align-items:center;font-size:10px}footer .logo{font-size:32px}footer>span{letter-spacing:1px}@keyframes float{50%{transform:translateY(-15px) rotate(9deg)}}@media(max-width:750px){header{padding:22px 6%}.logo{font-size:33px}nav{gap:18px}nav>a:not(.pill){display:none}.hero{height:920px;padding:125px 6% 0}.hero h1{font-size:93px;letter-spacing:-5px;line-height:1.03}.hero .eyebrow{font-size:8px}.coffee-art{top:340px;right:calc(50% - 150px);transform:scale(.73) rotate(12deg);transform-origin:top center;animation:none}.hero-copy{bottom:100px;left:6%;font-size:12px}.round{width:52px;height:52px;bottom:108px}.hero-bottom{left:6%;right:6%;font-size:7px}.hero-bottom span:nth-child(2){display:none}.light1{top:58%}.light2{top:69%}.light3{top:75%}.section-top{font-size:8px;gap:30px;margin-bottom:45px;line-height:1.6}.section-top span:last-child{text-align:right}.ritual,.coffee,.club{padding:45px 6% 60px}h2{font-size:49px;letter-spacing:-2px}.ritual-bottom{gap:30px;margin-top:35px}.sun{font-size:65px}.ritual-bottom p{font-size:12px;max-width:240px}.coffee-heading{display:block}.coffee-heading p{margin-top:24px;font-size:12px}.flavour-stage{grid-template-columns:25px 1fr;gap:20px;margin-top:30px;padding-top:30px}.mini-cup{width:150px;height:230px}.mini-cup span{font-size:34px}.flavour-info{grid-column:1/-1;margin-top:20px}.flavour-info p{min-height:48px}.moment{padding:90px 6%}.moment .eyebrow{font-size:8px}.club-bottom{display:block}.club-bottom .pill{margin-top:15px}footer{flex-wrap:wrap;gap:30px;padding:35px 6%}footer>span:nth-child(2){display:none}footer>span{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* One continuous, scroll-scrubbed coffee sequence. */
.scroll-story{height:480svh;position:relative;background:#160e09}.story-scene{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;background:radial-gradient(ellipse at 66% 60%,#5a3018 0%,#26170f 40%,#100c08 78%);isolation:isolate}.story-glow{position:absolute;width:145%;height:130px;left:-20%;top:56%;background:linear-gradient(90deg,transparent,#8c431c,#e7ba75,#ad5c2d,transparent);filter:blur(40px);opacity:.25;transform:rotate(-16deg)}.story-grain{position:absolute;inset:0;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E");pointer-events:none;z-index:8}.story-top{position:absolute;left:4%;right:4%;top:125px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.5px;z-index:10}.story-copy{position:absolute;left:4%;top:26%;width:60%;height:65%;z-index:5;pointer-events:none}.story-chapter{position:absolute;inset:0;opacity:0;transform:translateY(35px);visibility:hidden;will-change:transform,opacity}.story-chapter.active{opacity:1;visibility:visible;transform:none}.story-chapter h1,.story-chapter h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(75px,9.7vw,155px);line-height:1.02;letter-spacing:-6px;font-weight:500;margin:22px 0 26px}.story-chapter p{font-size:13px;line-height:1.8;color:#c9b6a1}.story-chapter .pill{margin-top:10px;pointer-events:auto}.pour-art{position:absolute;right:3%;bottom:5%;width:min(50vw,660px);height:90%;z-index:3;transform-origin:50% 80%;will-change:transform}.pour-svg{width:100%;height:100%;overflow:visible}#coffee-liquid,#milk-liquid{will-change:transform}#cream-stream,#coffee-stream{opacity:0;transform-origin:300px 0}#milk-liquid{opacity:0}.bean-field{position:absolute;inset:0;z-index:4;pointer-events:none}.coffee-bean{position:absolute;left:0;top:0;width:54px;height:76px;border-radius:48% 52% 48% 52%;background:radial-gradient(ellipse at 32% 25%,#af7040 0%,#7b4020 34%,#44200f 68%,#1b0e08 100%);box-shadow:inset 3px 2px 5px #e3a36a70,inset -6px -4px 7px #130905cc,8px 16px 16px #0005;will-change:transform,opacity}.coffee-bean:before{content:'';position:absolute;top:5%;left:45%;width:14%;height:90%;border-radius:50%;background:#1d0d06;transform:rotate(8deg);box-shadow:-2px 0 2px #ce915a80,inset 2px 0 3px #000}.coffee-bean:after{content:'';position:absolute;inset:7%;border:1px solid #e3a36a20;border-radius:50%}html.no-js .scroll-story{height:100svh}@media(min-width:1600px){.story-copy{top:28%}}@media(max-width:750px){.scroll-story{height:420svh}.story-scene{min-height:680px}.story-top{top:100px;left:6%;right:6%;font-size:7px;letter-spacing:.7px}.story-copy{left:6%;top:22%;width:90%;height:38%}.story-chapter h1,.story-chapter h2{font-size:clamp(61px,14vw,90px);letter-spacing:-3px;margin:14px 0}.story-chapter .eyebrow{font-size:8px}.story-chapter p{font-size:11px;line-height:1.5;margin-top:14px;max-width:190px}.story-chapter .pill{font-size:10px;padding:10px 15px;margin-top:0}.pour-art{width:83vw;height:66%;right:-12%;bottom:5%}.coffee-bean{width:36px;height:50px}.story-glow{top:70%}}@media(prefers-reduced-motion:reduce){.scroll-story{height:100svh;min-height:750px}.story-scene{position:relative;height:100%;min-height:750px}.bean-field{opacity:.4}}
.story-chapter{transition:opacity .32s ease,transform .45s ease,visibility .32s}.story-chapter:not(.active){pointer-events:none}.story-chapter.active .pill{pointer-events:auto}
/* Clear cylindrical cans with silver pull-tab ends. */
#can-lid{transform-origin:300px 298px;will-change:transform,opacity}.mini-cup{--drink:linear-gradient(95deg,#a7602b,#d8a86f 45%,#a25e2c);position:relative;isolation:isolate;width:195px;height:300px;border:2px solid #f5e9d480;border-top:0;border-bottom:5px solid #b4b9b5;border-radius:28px 28px 23px 23px;background:linear-gradient(95deg,#fff6 0%,#fff0 15%,#fff1 60%,#fff4 100%);color:#fff0d8;overflow:visible;box-shadow:inset 5px 0 8px #ffedc230,15px 25px 45px #0004}.mini-cup:before{content:'';position:absolute;inset:28px 3px 6px;border-radius:8px 8px 19px 19px;background:var(--drink);z-index:-2;opacity:.92}.mini-cup:after{content:'';position:absolute;inset:21px 0 0;border-radius:0 0 23px 23px;background:linear-gradient(90deg,#fffb 0%,#fff0 7%,#fff2 10%,#fff0 24%,#fff0 85%,#fff4 95%,#fff0);z-index:-1;pointer-events:none}.mini-cup>span,.mini-cup>small{z-index:2}.selectors{flex-wrap:wrap}.flavour-info p{min-height:76px}.concept{display:block;line-height:1.7;max-width:385px}@media(max-width:750px){.mini-cup{width:160px;height:250px}.flavour-info p{min-height:60px}}

/* The ritual quote reads as a signed note. */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.ritual .ritual-quote { max-width: 1050px; line-height: 1.05; }
.ritual-quote > span { display: block; }
.ritual-quote .quote-premise {
  font: 500 clamp(1.05rem, 1.5vw, 1.4rem)/1.45 'DM Sans', sans-serif;
  letter-spacing: -.02em; margin-bottom: 1.2em;
}
.quote-turn, .quote-coda { font-size: clamp(3rem, 6.9vw, 6rem); letter-spacing: -.035em; }
.quote-signature { width: min(78%, 680px); margin: -.02em 0 -.02em 9%; color: #8b492d; }
.quote-signature svg { display: block; width: 100%; }
.quote-coda { margin-left: 37%; }
.mini-cup { height: 366px; }
.moment { isolation: isolate; }
.moment-ripples { position: absolute; inset: 0; width: 100%; height: 100%; color: #bc865e; pointer-events: none; }
.moment-ripples ellipse { transform-origin: 400px 290px; stroke-width: .9; opacity: .2; }
.moment h2 { margin-top: 0; margin-bottom: 24px; }
.moment h2 > * { display: block; }
.moment p { position: relative; color: #dfcdbb; margin: 0 0 30px; font-size: 1rem; }
@media (max-width: 750px) {
  .mini-cup { height: 298px; }
  .quote-signature { width: 92%; margin-left: 3%; }
  .quote-coda { margin-left: 32%; }
  .moment-ripples { width: 145%; left: -22.5%; }
}

/* One shelf, four cans. The selection changes the note beneath the shelf. */
.lineup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 32px);
  margin: 28px 0 14px;
  padding: 24px 0 0;
  border-top: 1px solid #ffffff30;
}
.lineup-can {
  display: grid; justify-items: center; align-content: end; gap: 12px;
  min-width: 0; padding: 0 4px 10px; color: inherit; font: inherit;
  border: 0; border-bottom: 2px solid #ffffff30;
  background: transparent; cursor: pointer;
}
.lineup-can[aria-pressed="true"] { border-bottom-color: #edbc8d; }
.lineup .mini-cup {
  --drink: var(--fill); width: min(81%, 178px); height: auto; aspect-ratio: 195 / 366;
  transform: rotate(-3deg); margin: 0;
}
.lineup-can:nth-child(even) .mini-cup { transform: rotate(3deg); }


.lineup .can-logo { font-size: clamp(1.55rem, 3.3vw, 2.65rem); letter-spacing: -.075em; }
.can-caption { display: flex; align-items: baseline; gap: .45rem; }
.can-index { color: #d2ad8c; font: 0.625rem 'DM Sans', sans-serif; }
.can-name { font: 500 clamp(1rem, 1.9vw, 1.65rem)/1.2 'Playfair Display', Georgia, serif; }
.lineup-notes { display: flex; align-items: baseline; gap: 4%; }
.lineup-notes h3 { font-size: clamp(1.5rem, 2.8vw, 2.35rem); margin: 0; }
.lineup-notes p { max-width: 60ch; font-size: 1rem; line-height: 1.6; }
.coffee > .concept { margin-top: 12px; max-width: 70ch; }
@media (max-width: 650px) {
  .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; margin: 20px 0 12px; padding-top: 16px; }
  .lineup .mini-cup { width: min(68%, 128px); }
  .lineup .mini-cup:before { top: 17px; }
  .lineup .mini-cup small { font-size: 7px; letter-spacing: .05em; }
  .lineup-can { gap: 12px; padding-bottom: 10px; }
  .lineup-notes { display: block; }
}

/* Illustrations print directly on the clear body above the common wordmark. */
.lineup .can-print {
  position: absolute;
  top: 15%;
  left: 4%;
  width: 92%;
  height: 43%;
  object-fit: contain;
  pointer-events: none;
}
.lineup .can-logo, .lineup .mini-cup small {
  position: absolute;
  inset-inline: 0;
  text-align: center;
  margin: 0;
}
.lineup .can-logo { top: 62%; line-height: 1; }
.lineup .mini-cup small { top: 79%; }
.lineup-can:nth-child(1) .mini-cup { color: #442312; }
.lineup-can:nth-child(2) .mini-cup { color: #293c30; }
.lineup-can:nth-child(3) .mini-cup { color: #ffedcb; }
.lineup-can:nth-child(4) .mini-cup { color: #ffddc9; }

/* Reprise the closing section's coffee ripples across the opening pour. */
.story-scene { background: #191516; }
.hero-ripples {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: #ac7856;
}
.hero-ripples ellipse {
  transform-origin: 400px 290px;
  vector-effect: non-scaling-stroke;
  stroke-width: 1.15px;
  opacity: .43;
}
.logo .site-wordmark {
  display: block;
  width: clamp(135px, 14vw, 190px);
  height: auto;
}
footer .site-wordmark { width: clamp(145px, 16vw, 225px); }
@media (max-width: 750px) {
  header .site-wordmark { width: 128px; }
}

.hero-ripples g { transform-origin: 400px 290px; }
.hero-ripples ellipse:nth-child(2) { opacity: .40; }
.hero-ripples ellipse:nth-child(3) { opacity: .35; }
.coffee { padding-bottom: clamp(30px, 4vw, 56px); }
.coffee .section-top { margin-bottom: clamp(25px, 3.5vw, 52px); }
.lineup-notes p { margin-block: .5em; }
.moment { padding-block: clamp(64px, 7vw, 96px); }
@media (min-width: 751px) {
  .pour-art { right: 7%; }
}
@media (max-width: 750px) {
  .pour-art { bottom: 8%; }
  .lineup-can { gap: 8px; }
}

.club .lineup-link {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 46px;
  background: #302016;
  border-color: #302016;
  color: #f7ecd7;
}
.club .lineup-link:hover { background: #4c3426; }
.club .lineup-link:focus-visible { outline-color: #302016; }

/* Seat the front seam across the fill line; align the outer rim with the shell. */
.lineup .pack-lid {
  position: absolute;
  z-index: 3;
  left: -1.5%;
  top: -2%;
  width: 103%;
  height: auto;
  display: block;
}


/* A small illustrated bean perches on the wordmark like a counter stool. */
.story-copy.break-print { top: 29%; width: min(50%, 720px); height: auto; }
.brand-print { position: relative; }
.brand-print h1 { margin: 0; line-height: 1; }
.brand-print h1 img { display: block; width: 100%; height: auto; }
.break-bean { position: absolute; right: 8%; bottom: 82%; width: 46%; height: auto; overflow: visible; }
.bean-pal { transform-box: fill-box; transform-origin: 46% 92%; }
.origin-line { margin: 20px 0 0 .4em; max-width: 35ch; font-size: clamp(14px,1.2vw,18px); line-height: 1.5; color: #dbc6ae; }
@media(max-width:750px) {
  .story-copy.break-print { top: max(155px,20%); width: 80%; }
  .break-bean { width: 50%; right: 6%; }
  .origin-line { font-size: 14px; margin-top: 12px; max-width: 26ch; }
}

.spare-can, .coffee-friend { transform-box: fill-box; transform-origin: center; }
.coffee-friend { transform-origin: 55% 90%; }
.origin-line { transform: rotate(-1deg); transform-origin: left; }

/* A closer opening composition; every addition belongs to the product. */
.story-copy.break-print { top: 37%; width: 51%; max-width: 780px; }
.pour-art { width: min(35vw, 490px); height: 83%; bottom: 5%; right: 7%; transform-origin: 50% 70%; }
.hero-flavours { display: inline-flex; align-items: center; gap: 24px; margin: 34px 0 0 8px; pointer-events: auto; }
.pocket-lineup { display: flex; align-items: end; padding: 5px 7px; }
.pocket-lineup > span { position: relative; display: block; width: 31px; height: 59px; margin-left: -3px; border: 1px solid #e8d8bd99; border-radius: 6px 6px 7px 7px; background: var(--pocket); transform: rotate(var(--tilt)); transition: transform .25s; box-shadow: 3px 5px 9px #0003; }
.pocket-lineup > span > img:not(.pocket-lid) { width: 100%; height: 38px; margin-top: 8px; object-fit: contain; }
.pocket-lineup .pocket-lid { position: absolute; top: -3px; left: -2px; width: calc(100% + 4px); height: auto; }
.pocket-caption { font-size: 13px; padding-block: 8px; border-bottom: 1px solid #c79d7866; }
.pocket-caption > span { margin-left: 16px; font-size: 18px; }
.hero-flavours:hover .pocket-lineup > span { transform: translateY(-5px) rotate(calc(var(--tilt) * .5)); }

/* An illustrated invitation replaces the oversized closing text block. */
.club.coffee-company { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 2%; padding: 34px 7% 24px 2%; background: #ead5b7; color: #543725; overflow: hidden; }
.company-illustration { align-self: end; }
.company-illustration > img { display: block; width: 100%; height: auto; }
.company-copy { position: relative; padding-block: 34px 55px; }
.company-note { display: inline-block; font-size: 13px; letter-spacing: .015em; transform: rotate(-3deg); margin: 0 0 26px 5px; }
.coffee-company h2 { font-size: clamp(58px, 6.8vw, 110px); letter-spacing: -.045em; line-height: .97; }
.coffee-company h2 em { display: inline-block; color: #a45e38; transform: rotate(-3deg); }
.company-link { display: inline-flex; gap: 32px; align-items: center; margin-top: 40px; padding: 15px 0 10px; border-bottom: 1.5px solid #543725; font-size: 15px; }
.company-link > span { font-size: 25px; transition: transform .2s; }
.company-link:hover > span { transform: translate(3px,-3px); }
.company-arrow { position: absolute; width: 110px; bottom: 8%; left: -25%; color: #a45e38; transform: rotate(12deg); }
@media(min-width:1600px) {
  .story-copy.break-print { top: 39%; }
}
@media(max-width:750px) {
  .story-copy.break-print { top: max(142px, 21%); left: 6%; width: 87%; }
  .origin-line { max-width: 29ch; }
  .pour-art { width: 58vw; height: 54%; right: 1%; bottom: 2%; }
  .hero-flavours { margin: 23px 0 0 0; flex-direction: column; align-items: start; gap: 9px; }
  .pocket-lineup > span { width: 24px; height: 47px; }
  .pocket-lineup > span > img:not(.pocket-lid) { height: 30px; margin-top: 6px; }
  .pocket-caption { font-size: 11px; padding-block: 2px 7px; }
  .pocket-caption > span { margin-left: 7px; font-size: 15px; }
  .club.coffee-company { grid-template-columns: 1fr; gap: 0; padding: 48px 6% 0; }
  .company-copy { grid-row: 1; padding: 0; margin-left: 7%; }
  .company-note { font-size: 12px; margin-bottom: 20px; }
  .coffee-company h2 { font-size: clamp(58px, 12vw, 82px); }
  .company-link { margin-top: 18px; font-size: 14px; gap: 30px; }
  .company-illustration { width: 112%; margin: -18px 0 0 -6%; }
  .company-arrow { left: auto; right: 2%; bottom: -43px; width: 85px; transform: rotate(-35deg); }
}
@media(max-width:750px) and (max-height:700px) {
  .story-copy.break-print { top: 139px; width: 80%; }
  .pour-art { height: 49%; width: 53vw; }
  .hero-flavours { margin-top: 15px; }
}

.coffee-relay {
  position: relative;
  padding: clamp(12px, 1.5vw, 22px) 3%;
  background: #ead5b7;
  color: #594137;
  border-block: 1px solid #a88263;
}
.relay-stage { display: block; width: 100%; max-width: 1540px; height: auto; margin: auto; }
.relay-control {
  position:absolute; bottom:3px; right:8px; width:36px; height:36px;
  display:grid; place-items:center; border:0; background:transparent;
  color:inherit; cursor:pointer;
}
.relay-control svg { width:14px; height:14px; }
.relay-control[hidden], .relay-control .play-icon,
.relay-control[data-paused="true"] .pause-icon { display:none; }
.relay-control[data-paused="true"] .play-icon { display:inline; }
.relay-control:focus-visible { outline:2px solid currentColor; outline-offset:-4px; }
@media (max-width:650px) {
  .coffee-relay { padding:14px 1% 20px; }
}