:root{--cream:#f3ece6;--choc:#3c2e22;--pink:#ad7f8c}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cream);color:var(--choc)}
body{font-family:"DM Sans",Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.desktop-frame{margin:0 auto;position:relative;overflow:hidden}
.desktop-artboard{width:1365px;height:6144px;position:absolute;left:0;top:0;transform-origin:top left;background:var(--cream);overflow:hidden}
.panel{position:absolute;left:0;width:1365px;height:768px;background:var(--cream);overflow:hidden}
.hero-panel{top:0}.panel-1{top:768px}.panel-2{top:1536px}.panel-3{top:2304px}.panel-4{top:3072px}.panel-5{top:3840px}.panel-6{top:4608px}.panel-7{top:5376px}
.hero-image{position:absolute;left:0;top:-71.3px;width:1366px;height:911px;object-fit:fill;display:block}
.decor{position:absolute;display:block;pointer-events:none}
/* Updated café intro - measured from the definitive PNG */
.intro-copy{position:absolute;left:405px;top:44px;width:555px;text-align:center;z-index:3}
.intro-copy h1{margin:0;font-family:"Playfair Display","Bodoni MT",Georgia,serif;font-size:46px;line-height:1.02;font-weight:700;letter-spacing:-1.2px}
.intro-copy h1 span{display:block;margin-bottom:15px}
.intro-lines{margin-top:15px;font-size:19px;line-height:1.16;font-weight:400}
.intro-lines p{margin:0 0 26px}.intro-lines .intro-last{margin-top:-5px;font-weight:400}
.intro-scatter{left:365px;top:68px;width:690px;height:690px;opacity:.46;z-index:1}
.intro-bean-right{left:1190px;top:14px;width:150px;height:150px;z-index:2}
.intro-bean-left{left:42px;top:216px;width:150px;height:150px;transform:rotate(-17deg);z-index:2}
.intro-coffee{left:-302px;top:355px;width:687px;height:552px;z-index:2}
.intro-llama{right:-5px;top:285px;width:285px;height:405px;object-fit:contain;z-index:2}
/* PDF-positioned copy from the unchanged panels */
.pdf-line{position:absolute;left:calc(var(--x)*3px);top:calc(var(--y)*3px);display:inline-block;white-space:nowrap;margin:0;transform-origin:left top;font-size:24px;line-height:1;font-weight:400;z-index:5}
.pdf-line.heading{font-family:"Playfair Display","Bodoni MT",Georgia,serif;font-size:48px;font-weight:700;letter-spacing:-1px}
.pdf-line.bold{font-weight:700}
.pdf-line a{text-decoration:none}
/* panel 2 visuals */
.panel2-two{left:1154px;top:190px;width:136px;height:112px}
.panel2-bags{left:995px;top:362px;width:371px;height:371px}
.panel2-pale{left:-75px;top:405px;width:430px;height:430px;opacity:.8}
/* panel 3 visuals */
.panel3-llama{left:-14px;top:42px;width:270px;height:385px;object-fit:contain;z-index:2}
.panel3-logo{left:972px;top:232px;width:440px;height:440px;z-index:2}
.panel3-pale{left:-48px;top:350px;width:650px;height:650px;opacity:.72;z-index:1}
.panel3-strip{left:-2px;top:486px;width:423px;height:420px;z-index:3}
/* panel 4 */
.panel4-apron{left:-42px;top:454px;width:381px;height:381px;z-index:2}
.panel4-tin{position:absolute;left:858px;top:125px;width:420px;height:430px;overflow:hidden;z-index:2}
.panel4-tin img{position:absolute;width:1745px;height:auto;left:0;top:-580px;display:block}
/* panel 5 */
.panel5-cap{left:930px;top:38px;width:405px;height:405px;z-index:2}
.panel5-bean{left:1183px;top:588px;width:150px;height:150px;z-index:2}
/* panel 6 */
.panel6-sign{position:absolute;left:0;top:-6px;width:774px;height:774px;object-fit:cover;z-index:1}
.panel6-pale{left:850px;top:455px;width:610px;height:610px;opacity:.7;z-index:2}
.panel6-copy{z-index:4}
/* panel 7 */
.panel7-pale{left:825px;top:-72px;width:630px;height:630px;opacity:.72;z-index:1}
.panel7-beans{left:51px;top:402px;width:125px;height:96px;z-index:2}
.panel7-llama{left:1030px;top:328px;width:285px;height:405px;object-fit:contain;z-index:2}
.cta-button{position:absolute;left:450px;top:459px;padding:13px 24px 14px;background:#c79aa7;border:2px solid #76545e;border-radius:10px;font-size:22px;line-height:1;font-weight:400;z-index:6}
.desktop-footer{position:absolute;left:175px;bottom:8px;width:890px;font-size:22.65px;line-height:1.18;z-index:6}
.desktop-footer>a{display:block;margin-bottom:2px}.studio-link{font-family:"Playfair Display","Bodoni MT",Georgia,serif;font-weight:700;font-size:27px;margin-left:14px}
.mobile-site{display:none}
@media (max-width:759px){
  .desktop-frame{display:none}.mobile-site{display:block;max-width:520px;margin:0 auto;background:var(--cream)}
  .mobile-site h2{font-family:"Playfair Display","Bodoni MT",Georgia,serif;font-size:31px;line-height:1.08;margin:0 0 22px;letter-spacing:-.6px}
  .mobile-site p{font-size:15.5px;line-height:1.48;margin:0 0 17px}.mobile-site strong{font-size:15.5px;line-height:1.4}
  .mobile-hero{height:auto;overflow:hidden}.mobile-hero img{display:block;width:100%;height:auto;transform:scale(1.19);transform-origin:center center;margin:-7% 0}
  .m-section{position:relative;padding:58px 26px;overflow:hidden;border:0;min-height:0}
  .m-intro{text-align:center;padding-bottom:72px}.m-intro p,.m-intro strong{position:relative;z-index:2}.m-intro h2{position:relative;z-index:2}
  .m-intro .m-bean{position:absolute;width:52px;right:12px;top:22px}.m-intro .m-llama{position:absolute;width:95px;height:135px;right:-15px;bottom:8px;opacity:.9}
  .m-looking{padding-bottom:150px}.m-bags{position:absolute;width:128px;right:5px;bottom:15px}
  .m-ready{padding-top:72px;padding-bottom:150px}.m-logo{position:absolute;width:125px;right:-16px;bottom:8px}
  .m-screen{padding-bottom:62px}
  .m-cup{padding-bottom:210px}.m-cap{position:absolute;width:180px;height:180px;object-fit:contain;right:-5px;bottom:10px}
  .m-where{display:grid;grid-template-columns:47% 1fr;gap:18px;align-items:center;padding:0 18px 38px 0}.m-where>img{width:100%;height:auto}.m-where>div{padding-top:38px}.m-where h2{font-size:27px}.m-where p,.m-where strong{font-size:14px}
  .m-cta{padding-bottom:150px}.mobile-cta{display:inline-block;background:#c79aa7;border:1.5px solid #76545e;border-radius:7px;padding:10px 15px;margin:8px 0 18px;font-size:15px}.m-cta-llama{position:absolute;width:100px;height:142px;object-fit:contain;right:2px;bottom:5px}
  .mobile-footer{padding:20px 24px 26px;font-size:11px;line-height:1.45}.mobile-footer a{text-decoration:none}.mobile-footer a:last-child{font-family:"Playfair Display",Georgia,serif;font-weight:700}
}
/* Fidelity pass 2 */
.intro-copy{left:0;top:0;width:1365px;height:768px;text-align:center;z-index:3}
.intro-copy h1{position:absolute;left:0;top:0;width:1365px;height:160px;margin:0;font-size:48px;line-height:1;font-weight:700;letter-spacing:-1.2px}
.intro-copy h1 span{position:absolute;left:0;width:100%;display:block;margin:0;white-space:nowrap}
.intro-copy h1 span:first-child{top:48px}.intro-copy h1 span:last-child{top:117px}
.intro-lines{position:absolute;left:382px;top:0;width:600px;height:768px;margin:0;font-size:19px;line-height:1.72;font-weight:400}
.intro-lines p{position:absolute;left:0;width:100%;margin:0}
.intro-p1{top:192px}.intro-p2{top:261px}.intro-p3{top:462px}.intro-p4{top:621px}.intro-p5{top:717px}
.intro-scatter{left:390px;top:72px;width:600px;height:600px;opacity:.62}
.intro-bean-right{left:1188px;top:12px;width:120px;height:120px}
.intro-bean-left{left:43px;top:170px;width:118px;height:128px;transform:rotate(-17deg)}
.intro-coffee{left:-134px;top:301px;width:687px;height:552px}
.intro-llama{right:8px;top:274px;width:250px;height:355px}
.panel3-llama{left:-8px;top:45px;width:205px;height:292px}
.panel4-tin{left:846px;top:132px;width:450px;height:435px;background:transparent}
.panel4-tin img{width:645px;height:auto;left:-11px;top:-228px}
.panel5-cap{left:789px;top:48px;width:570px;height:570px}
.panel5-bean{left:1190px;top:594px;width:132px;height:132px}
.panel6-sign{left:0;top:0;width:702px;height:768px;object-fit:cover;object-position:left center}
.panel6-pale{left:890px;top:500px;width:580px;height:580px;opacity:.56}
.panel7-pale{left:880px;top:-60px;width:590px;height:590px;opacity:.56}
/* Fidelity pass 3 */
.intro-copy h1{font-size:55px}
.intro-lines{left:352px;width:660px;font-size:22px;line-height:32px}
.panel4-tin{left:840px;top:32px;width:450px;height:435px}
.panel4-tin img{width:2016px;height:auto;left:-34px;top:-584px}
.panel5-cap{left:805px;top:51px;width:450px;height:450px}
.panel6-sign{left:0;top:0;width:774px;height:774px;object-fit:cover;object-position:left center}
.desktop-footer{width:1120px;white-space:nowrap}
/* Fidelity pass 4 */
.intro-lines{font-size:23px}
.intro-scatter{left:360px;top:54px;width:690px;height:690px;opacity:.72}
.intro-llama{right:22px;top:286px;width:230px;height:330px}
.panel2-pale{left:-82px;top:390px;width:540px;height:540px;opacity:.82}
.panel3-llama{left:0;top:39px;width:230px;height:328px}
.panel3-pale{left:-60px;top:330px;width:760px;height:760px;opacity:.72}
.panel4-tin{left:840px;top:30px;width:420px;height:413px}
.panel4-tin img{width:2016px;height:1344px;left:-34px;top:-714px}
.panel6-pale{left:840px;top:450px;width:650px;height:650px;opacity:.62}
.desktop-footer{left:175px;top:684px;bottom:auto;width:1000px;font-size:22.65px;line-height:31px;white-space:nowrap}
.studio-link{position:absolute;left:1014px;top:678px;margin:0;font-size:27px;line-height:1;z-index:7}


/* Final measured fidelity pass — 2026-08-24 */
/* Panel 1: typography and decor aligned to the definitive 455×2048 reference */
.intro-copy h1{font-size:50px}
.intro-copy h1 span:first-child{top:42px}
.intro-copy h1 span:last-child{top:108px}
.intro-lines{font-size:24px;line-height:32px}
.intro-p1{top:180px}
.intro-p2{top:249px}
.intro-p3{top:450px}
.intro-p4{top:609px}
.intro-p5{top:705px}
.intro-bean-right{left:1170px;top:12px;width:112px;height:112px}
.intro-coffee{left:-164px;top:301px;width:687px;height:552px}
.intro-llama{right:40px;top:286px;width:230px;height:330px}

/* Panel 2: pale beans were oversized in v4 */
.panel2-pale{left:-75px;top:405px;width:430px;height:430px;opacity:.80}

/* Panel 3: restore the smaller illustration/scatter measured against the source PNG */
.panel3-llama{left:-8px;top:45px;width:205px;height:292px}
.panel3-pale{left:-48px;top:350px;width:650px;height:650px;opacity:.72}

/* Panel 4: continuation of the product strip plus corrected apron/tin placement */
.panel4-strip-carry{left:-2px;top:-282px;width:423px;height:420px;z-index:3}
.panel4-apron{left:-42px;top:400px;width:381px;height:381px;z-index:2}
.panel4-tin{left:855px;top:162px;width:420px;height:413px}

/* Panel 5: protection-cap artwork aligned to the Canva reference */
.panel5-cap{left:890px;top:108px;width:480px;height:480px}
.panel5-bean{left:1210px;top:594px;width:112px;height:132px}

/* Panel 6: exact sign width and lighter/lower bean scatter */
.panel6-sign{left:0;top:0;width:702px;height:768px;object-fit:cover;object-position:left center}
.panel6-pale{left:890px;top:500px;width:580px;height:580px;opacity:.56}

/* Panel 7: final CTA scale, llama size and footer alignment */
.panel7-llama{left:1120px;top:345px;width:205px;height:290px;object-fit:contain}
.cta-button{left:450px;top:459px;padding:13px 40px 14px}
.desktop-footer{left:175px;top:684px;width:1000px;font-size:22.65px;line-height:31px;white-space:nowrap}
.desktop-footer .studio-link{position:absolute;left:848px;top:27px;margin:0;font-size:27px;line-height:1;z-index:7}

/* Mobile: reset desktop-only positioning classes and keep the linear composition readable */
@media (max-width:759px){
  .m-intro .intro-p1,.m-intro .intro-p4{top:auto!important;left:auto!important}
  .m-intro p{position:relative!important;top:auto!important;left:auto!important;margin:0 0 18px!important}
  .m-intro strong{display:block;margin-top:4px}
  .m-intro{padding-top:54px;padding-bottom:88px}
  .m-intro h2{font-size:29px;line-height:1.08;margin-bottom:24px}
  .m-intro .m-bean{width:46px;right:10px;top:18px}
  .m-intro .m-llama{width:82px;height:116px;right:-5px;bottom:7px}
  .m-looking{padding-bottom:132px}
  .m-ready{padding-bottom:138px}
  .m-logo{width:112px;right:-10px;bottom:8px}
  .m-screen{padding-bottom:64px}
  .m-cup{padding-bottom:190px}
  .m-cap{width:165px;height:165px;right:0;bottom:8px}
  .m-where{grid-template-columns:49% 1fr;gap:14px;padding:0 14px 34px 0}
  .m-where>div{padding-top:30px}
  .m-where h2{font-size:25px;line-height:1.05}
  .m-cta{padding-bottom:132px}
  .m-cta-llama{width:82px;height:116px;right:8px;bottom:8px}
  .mobile-footer{font-size:11.5px;line-height:1.45;padding:18px 22px 24px}
}
/* Final micro-alignment after screenshot comparison */
.intro-bean-right{left:1148px;width:105px;height:105px}
.intro-coffee{left:-185px}
.intro-llama{right:80px}
.panel2-pale{top:423px}
.panel3-llama{left:20px;top:45px;width:195px;height:278px}
.panel7-llama{left:1108px;top:351px;width:230px;height:325px}

/* Stable web-safe type stack for final delivery */
.intro-copy h1,.pdf-line.heading,.studio-link,.mobile-site h2,.mobile-footer a:last-child{font-family:Georgia,"Times New Roman",serif}
body{font-family:Arial,Helvetica,sans-serif}