/* ---------- Local fonts (SIL Open Font License, see assets/fonts/licenses) ---------- */
@font-face{font-family:'Anton';src:url('../assets/fonts/Anton-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../assets/fonts/Manrope-Variable.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../assets/fonts/Poppins-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

:root{
  /* Figma styles */
  --cream:#faf7f1;      /* page */
  --bg:#f4f1e8;         /* "bg" */
  --line:#e4ddd1;
  --ink:#192533;        /* "line hard" */
  --ink-2:#202321;
  --navy:#193451;
  --navy-2:#223b59;     /* "BG 01" */
  --teal:#419586;       /* "cat 02" */
  --coral:#c46060;      /* "cat 01" */
  --brick:#a83124;
  --muted:#5c625e;
  --brown:#6f4f50;
  --white:#ffffff;
  --display:'Anton', 'Impact', 'Arial Narrow Bold', sans-serif;
  --sans:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --heavy:'Poppins', 'Manrope', system-ui, sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scrollbar-gutter:stable;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(a,button):focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons (Figma "Frame 176695" variants) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:50px;padding:10px 20px;border-radius:10px;font-weight:800;font-size:14px;line-height:1;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.btn svg{flex:none}
.btn .arr{transition:transform .25s cubic-bezier(.3,.7,.3,1)}
.btn:hover .arr{transform:translateX(3px)}
.btn--teal{background:var(--teal);color:var(--bg)}
.btn--teal:hover{background:#37806f}
.btn--coral{background:var(--coral);color:var(--bg)}
.btn--coral:hover{background:#b15151}
.btn--line{border:1px solid var(--coral);color:var(--coral);border-radius:8px;padding:10px 15px}
.btn--line:hover{background:rgba(196,96,96,.07)}
.caps{text-transform:uppercase}

/* ---------- Header ---------- */
.site-header{height:80px;padding:15px 30px;border-bottom:1px solid var(--line);background:var(--cream);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:20px}
.brand-logo{height:30px;width:160px;display:flex;flex-direction:column;justify-content:flex-end}
.brand-logo img{width:159.647px;height:40.538px;max-width:none}
.pill-brew{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:9999px;background:rgba(65,149,134,.2);color:var(--teal);font-weight:700;font-size:11px;line-height:16px;letter-spacing:.55px;text-transform:uppercase;white-space:nowrap}
.pill-brew i{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.still{display:inline-flex;align-items:center;gap:7.6px;margin-top:8px;padding-bottom:7.6px;border-bottom:2px solid var(--brown);font-weight:700;font-size:14.32px;line-height:19px;letter-spacing:.2px;color:var(--brown);white-space:nowrap}
.still img{width:12.86px;height:10.89px;transition:transform .25s cubic-bezier(.3,.7,.3,1)}
.still:hover img{transform:translateX(3px)}
.still .short{display:none}

/* ---------- Hero ---------- */
main{container-type:inline-size}
.hero{--u:calc(min(100cqw,1280px) / 1280)}
.hero-inner{position:relative;width:calc(1280 * var(--u));height:calc(696 * var(--u));margin:0 auto;--t:var(--u)}
.pill-fresh{position:absolute;left:calc(115*var(--u));top:calc(78*var(--u));display:inline-flex;align-items:center;gap:4px;padding:6px 16px;border-radius:9999px;background:#f0eee8;filter:drop-shadow(0 1px 1px rgba(0,0,0,.05));font-weight:700;font-size:11px;line-height:16px;letter-spacing:1.1px;color:#1c1c18;text-transform:uppercase;white-space:nowrap}
.pill-fresh i{width:8px;height:8px;border-radius:50%;background:var(--brick)}

.title-stage{position:absolute;left:calc(115*var(--u));top:calc(150*var(--u));width:calc(1050*var(--t));height:calc(268.72*var(--t))}
.title{font-family:var(--display);font-weight:400;font-size:calc(140.308*var(--t));line-height:calc(95*var(--t));letter-spacing:calc(4.2092*var(--t));color:var(--ink);text-transform:uppercase;white-space:nowrap}
.title .l{position:absolute;left:0;display:block;height:calc(95*var(--t))}
.title .l1{top:0}
.title .l2{top:calc(173.72*var(--t))}
.title .ch{position:absolute;top:0;color:var(--coral)}
.title .ch-c{left:calc(251*var(--t))}
.title .ch-de{left:calc(507*var(--t))}

.hero-cta{position:absolute;left:calc(115*var(--u));top:calc(522*var(--u));width:max-content;min-height:80px;padding:15px 15px 15px 20px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:24px}
.hero-cta p{font-weight:500;font-size:16px;line-height:20px;letter-spacing:.4px;color:var(--ink-2);white-space:nowrap}
.hero-cta .btn{flex:none}
.hero-doodle{position:absolute;left:calc(968.36*var(--u));top:calc(362.53*var(--u));width:calc(155.3*var(--u));height:auto;max-width:none;pointer-events:none}

/* ---------- Coffee cup art (between C and DE) ---------- */
.cup-art{position:absolute;left:calc(195*var(--t));top:calc(4*var(--t));width:calc(438*var(--t));height:calc(438*var(--t));pointer-events:none;z-index:2}
.cup-art .lyr{position:absolute;inset:0}
.cup-art .p,.cup-art .enter,.cup-art .loop,.cup-art .lift,.cup-art .stir,.cup-art .fx{position:absolute;inset:0}
.cup-art svg{width:100%;height:100%;overflow:visible}
.cup-art .p{will-change:transform}
.cup-hit{position:absolute;left:32.5%;top:32.5%;width:35%;height:35%;border-radius:50%;pointer-events:auto;z-index:5;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cup-hit:focus-visible{outline-offset:6px;border-radius:50%}

/* orchestrated entrance — one sequence */
.cup-art .enter{animation:var(--enter) var(--dur,1s) var(--ease,cubic-bezier(.2,.8,.2,1)) var(--delay,0s) both}
.glow  {--enter:k-glow;--dur:1.4s}
.ring-outer{--enter:k-ring-out;--dur:1.6s;--delay:.05s}
.ring-inner{--enter:k-ring-in;--dur:1.5s;--delay:.15s}
.ring-solid circle{stroke-dasharray:704;stroke-dashoffset:704;animation:k-draw 1.8s cubic-bezier(.6,.05,.2,1) .1s forwards}
.ring-solid svg{transform:rotate(-18deg)}
.cup-lyr{--enter:k-cup;--dur:1.15s;--delay:.3s;--ease:cubic-bezier(.22,.9,.3,1)}
.latte{--enter:k-latte;--dur:2.4s;--delay:.45s;--ease:cubic-bezier(.12,.75,.2,1)}
.orbit{--enter:k-orbit;--dur:1.1s;--delay:1.15s;--ease:cubic-bezier(.3,1.4,.5,1)}
.orbit-2{--delay:1.3s}
.bean{--dur:1s;--ease:cubic-bezier(.25,1.3,.45,1)}
.b1{--enter:k-bean-r;--delay:.95s} .b2{--enter:k-bean-r;--delay:1.05s}
.b3{--enter:k-bean-l;--delay:.9s}  .b4{--enter:k-bean-l;--delay:1.0s}

/* idle loops */
.ring-outer .loop{animation:k-spin 70s linear infinite}
.ring-inner .loop{animation:k-spin 48s linear infinite reverse}
.orbit-1 .loop{animation:k-spin 44s linear infinite}
.orbit-2 .loop{animation:k-spin 30s linear infinite reverse}
.latte .loop{animation:k-spin 36s linear infinite 2.8s}
.latte .enter,.latte .loop,.latte .stir{transform-origin:49.81% 49.86%}
.bean .loop{animation:k-bob var(--bob,3.6s) ease-in-out infinite alternate var(--bd,2s)}
.b1{transform-origin:78.86% 61.25%} .b2{transform-origin:81.55% 65.55%}
.b3{transform-origin:31.09% 45.49%} .b4{transform-origin:35.93% 51.41%}
.b1 :is(.p,.enter,.loop){transform-origin:78.86% 61.25%} .b2 :is(.p,.enter,.loop){transform-origin:81.55% 65.55%}
.b3 :is(.p,.enter,.loop){transform-origin:31.09% 45.49%} .b4 :is(.p,.enter,.loop){transform-origin:35.93% 51.41%}
.b1{--bob:3.4s;--bd:2.1s;--r:7deg} .b2{--bob:4.1s;--bd:2.3s;--r:-6deg}
.b3{--bob:3.8s;--bd:2s;--r:-8deg}  .b4{--bob:3.2s;--bd:2.4s;--r:6deg}

/* hover: the cup lifts a touch */
.cup-lyr .lift{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cup-art.is-hover .cup-lyr .lift{transform:translateY(-1.2%) scale(1.03)}
.ripple{position:absolute;left:41.21%;top:41.26%;width:17.2%;height:17.2%;border-radius:50%;border:1.5px solid rgba(196,96,96,.55);opacity:0;pointer-events:none}

@keyframes k-glow{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes k-ring-out{from{opacity:0;transform:scale(.78) rotate(-60deg)}to{opacity:1;transform:none}}
@keyframes k-ring-in{from{opacity:0;transform:scale(1.35) rotate(45deg)}to{opacity:1;transform:none}}
@keyframes k-draw{to{stroke-dashoffset:0}}
@keyframes k-cup{0%{opacity:0;transform:translate(-4%,-16%) scale(1.16) rotate(-14deg)}55%{opacity:1}72%{transform:translate(0,.8%) scale(.985) rotate(1.5deg)}100%{opacity:1;transform:none}}
@keyframes k-latte{from{transform:rotate(-300deg) scale(.86);filter:blur(1.2px)}60%{filter:blur(0)}to{transform:none;filter:none}}
@keyframes k-orbit{from{opacity:0;transform:scale(.35) rotate(-30deg)}to{opacity:1;transform:none}}
@keyframes k-bean-r{from{opacity:0;transform:translate(16%,10%) rotate(160deg)}to{opacity:1;transform:none}}
@keyframes k-bean-l{from{opacity:0;transform:translate(-16%,-12%) rotate(-150deg)}to{opacity:1;transform:none}}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-bob{from{transform:translateY(-.7%) rotate(calc(var(--r) * -.5))}to{transform:translateY(.9%) rotate(var(--r))}}

/* ---------- Contact section ---------- */
.contact{padding:0 64px;max-width:1280px;margin:0 auto}
.contact-in{max-width:1152px;margin:0 auto;padding:30px 48px;display:flex;flex-direction:column;align-items:center;gap:24px}
.contact h2{font-family:var(--heavy);font-weight:800;font-size:clamp(26px,4.375vw,56px);line-height:1.143;letter-spacing:1px;text-transform:uppercase;text-align:center;color:var(--ink-2)}
.contact h2 span{display:block;white-space:nowrap}
.contact .lead{max-width:542px;font-size:18px;line-height:28px;letter-spacing:-.09px;text-align:center;color:var(--navy-2)}
.cards{width:100%;display:flex;gap:24px;padding-top:40px}
.card{flex:1 0 0;min-width:0;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:31px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.05));display:flex;flex-direction:column;gap:8px}
.card .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center}
.card .ico svg{width:20px;height:20px}
.card .body{padding-top:16px;display:flex;flex-direction:column;gap:20px}
.card h3{font-weight:500;font-size:20px;line-height:28px;color:var(--ink-2)}
.card .desc{font-size:14px;line-height:22px;color:var(--muted)}
.card .act{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:50px}
.card .act .val{font-weight:500;font-size:16px;line-height:16px;letter-spacing:.88px}
.card .act .val:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Footer ---------- */
.site-footer{position:relative;max-width:1280px;height:273px;margin:0 auto}
.foot-wrap{overflow:hidden}
.site-footer img{max-width:none}
.f-logo{position:absolute;left:65px;top:65px;width:347.76px;height:90px}
.f-copy{position:absolute;left:65px;top:180px;font-weight:600;font-size:16px;line-height:22px;color:var(--ink);white-space:nowrap}
.f-mug{position:absolute;right:-21.26px;top:-1.54px;width:140.81px}
.f-cup{position:absolute;left:calc(50% + 135.57px);top:145.53px;width:69.25px}
.find{position:absolute;right:72.1px;top:105.9px;width:288.4px;height:60.2px;display:flex;align-items:center;justify-content:space-between;padding:0 26.8px;background:var(--bg);border:2.5px solid var(--ink);border-radius:12px;box-shadow:-6.5px 6.5px 0 0 #2c2c2d}
.find span{font-weight:600;font-size:19.47px;line-height:1;color:#1c1c18;white-space:nowrap}
.find .icons{display:flex;gap:12.1px}
.find a{position:relative;width:25.8px;height:25.8px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:transform .2s}
.find a:hover{transform:translateY(-2px)}
.find a img{position:absolute}
.find .fb img{left:7.6px;top:5.06px;width:11.01px}
.find .li img{left:5.82px;top:5.82px;width:14.16px}
.find .ig img{inset:0;width:100%;height:100%;border-radius:50%}

/* ---------- Responsive ---------- */
@media (max-width:999px){
  .hero{--u:1px}
  .hero-inner{width:auto;height:auto;padding:40px 20px 56px;display:flex;flex-direction:column;align-items:flex-start}
  .pill-fresh,.title-stage,.hero-cta{position:relative;left:auto;top:auto}
  .title-stage{--t:calc((100cqw - 40px) / 1050);margin-top:28px;height:calc(300*var(--t))}
  .hero-cta{width:100%;max-width:611px;margin-top:20px}
  .hero-cta p{white-space:normal}
  .hero-doodle{display:none}
  .site-footer{height:auto;padding:48px 20px 40px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
  .f-logo,.f-copy,.find{position:relative;left:auto;right:auto;top:auto}
  .f-logo{width:min(347.76px,80vw);height:auto}
  .f-copy{white-space:normal;font-size:15px;order:3}
  .f-cup{display:none}
  .f-mug{width:88px;top:-8px;right:-16px}
  .contact{padding:0 20px}
  .contact-in{padding:30px 0}
}
@media (max-width:860px){
  .cards{flex-direction:column;padding-top:16px}
  .contact h2 span{white-space:normal}
}
@media (max-width:620px){
  .site-header{padding:15px 20px}
  .pill-brew{display:none}
  .hero-cta{flex-direction:column;align-items:stretch;gap:14px;padding:18px}
  .hero-cta .btn{width:100%}
  .card{padding:24px}
}
@media (max-width:480px){ .still .long{display:none} .still .short{display:inline} .still{font-size:13px} }
@media (max-width:360px){ .brand-logo{width:130px} .brand-logo img{width:130px;height:auto} }


/* ---------- Loader: the cup brews in the centre, then flies to its place ---------- */
.loader{display:none;position:fixed;inset:0;z-index:100;background:var(--cream);--S:min(78vmin,560px);transition:opacity .75s ease}
html.is-loading .loader,html.is-handoff .loader{display:block}
html.is-loading,html.is-handoff{overflow:hidden}
html.is-loading main,html.is-handoff main{position:relative;z-index:101}
.loader.out{opacity:0}
/* while the cup is on stage, the rest of the page waits */
:is(.pill-fresh,.title,.hero-cta,.hero-doodle,.contact,.site-footer){transition:opacity .8s ease .15s}
html.is-loading :is(.pill-fresh,.title,.hero-cta,.hero-doodle,.contact,.site-footer){opacity:0}
html.is-loading .cup-hit,html.is-handoff .cup-hit{pointer-events:none}
.cup-art.flying{z-index:3}

@media (prefers-reduced-motion:reduce){
  .cup-art .enter,.cup-art .loop,.ring-solid circle{animation:none!important}
  .ring-solid circle{stroke-dashoffset:0}
  .cup-lyr .lift,.btn .arr{transition:none}
}