/* Sagarmatcha. Cafe-first. Mobile first; breakpoint at 720px.
   Type: Bernina Sans Condensed Extrabold for headlines, Bernina Regular for reading, Franklin Gothic
   Cond for short labels. Colour: warm paper page with deep olive ink, one bright matcha band for
   the cafe offer, and the darkest olive for the price-list form and footer. Brand cream #F7F6D3
   stays on packaging and the logo lockup; on screen it read too yellow next to the greens.
   Shape rule: 12px corners on interactive things, 4px on photos, sections full bleed and never boxed. */

@font-face { font-family: "Bernina Sans"; src: url("/assets/fonts/BerninaSans-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Bernina Sans"; src: url("/assets/fonts/BerninaSans-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bernina Sans"; src: url("/assets/fonts/BerninaSans-Semibold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bernina Sans"; src: url("/assets/fonts/BerninaSans-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bernina Sans Condensed"; src: url("/assets/fonts/BerninaSans-CondensedExtrabold.otf") format("opentype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Franklin Gothic Medium Cond"; src: url("/assets/fonts/FranklinGothicMediumCond.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --cream: #FBF8EE;       /* warm paper: page background, text on dark bands */
  --cream-input: #FFFDF6;
  --matcha: #A9C46C;      /* bright matcha: one big band per page, ink text on it */
  --ink: #1F2A12;        /* text on cream: deep olive, near black */
  --olive: #4D612D;      /* brand olive: bands, rules, secondary text */
  --olive-deep: #26321A; /* darkest band: price-list form, footer */
  --accent: #C93A1C; /* vermilion: buttons, badges, small labels only */
  --tint: rgba(77, 97, 45, 0.07);
  --rule: rgba(31, 42, 18, 0.3);
  --rule-cream: rgba(251, 248, 238, 0.3);
  --sans: "Bernina Sans", "Helvetica Neue", Arial, sans-serif;
  --display: "Bernina Sans Condensed", "Arial Narrow", sans-serif;
  --cond: "Franklin Gothic Medium Cond", "Arial Narrow", sans-serif;
  --r: 12px;
  --line: 1.5px solid var(--ink);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: max(16px, 5vw);
  --header-h: 60px;   /* phones: a solid bar on the top edge; wide screens: a floating pill plus its gap */
  --pill-gap: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:hover { color: var(--olive); }
h1, h2, h3, p, dl, dd { margin: 0; }
h3 { font-weight: 600; }
h1, h2, .h-md { font-family: var(--display); font-weight: 800; letter-spacing: -0.005em; }
h1 { font-size: clamp(50px, 7.4vw, 112px); line-height: 0.9; text-transform: uppercase; }
h2 { font-size: clamp(38px, 5vw, 72px); line-height: 0.95; }
.h-md { font-size: clamp(32px, 3.6vw, 48px); line-height: 1; }
h3 { font-size: 20px; line-height: 1.3; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.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 { position: absolute; left: 16px; top: -60px; background: var(--olive); color: var(--cream); padding: 10px 16px; border-radius: var(--r); z-index: 10; }
.skip:focus { top: 12px; color: var(--cream); }

.wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.label { font-family: var(--cond); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--accent); }
.lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; max-width: 28em; }
.muted { max-width: 32em; }
.caption { font-size: 13px; line-height: 1.4; }
.text-link { text-underline-offset: 5px; text-decoration-thickness: 1px; padding-block: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 26px;
  border-radius: var(--r); border: 1.5px solid transparent;
  font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn--accent { background: var(--accent); color: var(--cream); }
.btn--accent:hover { background: #AE3015; color: var(--cream); }
.btn--line { background: transparent; color: currentColor; border-color: currentColor; }
.btn--line:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--cream { background: var(--cream); color: var(--ink); }
.btn--cream:hover { background: #fff; color: var(--ink); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 16px; }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* Photos and their stand-ins until real shots arrive */
.photo { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.photo--empty { display: grid; place-items: center; background: var(--tint); }
.photo--empty img { width: 42%; max-width: 260px; height: auto; opacity: 0.9; }
.offer .photo--empty { background: rgba(31, 42, 18, 0.08); }
@media (max-width: 719px) {
  .offer-media:has(.photo--empty), .home-retail-media:has(.photo--empty) { display: none; }
}
.icon { width: 1.4em; height: 1.4em; flex: none; }

/* Header and footer */
/* Header: a dark floating pill that sticks near the top, with the page visible around it.
   Phones get a Menu button that opens the nav as a full-screen panel in the same colour. */
.site-header { position: sticky; top: 0; z-index: 20; height: var(--header-h); padding-top: var(--pill-gap); pointer-events: none; }
.header-inner {
  pointer-events: auto; height: calc(var(--header-h) - var(--pill-gap));
  width: calc(100% - 2 * var(--pill-gap)); max-width: none; margin-inline: auto; padding-inline: 16px 8px;
  display: flex; align-items: center; gap: 28px;
  background: var(--olive-deep); color: var(--cream); border-radius: 0 0 16px 16px;
  box-shadow: 0 12px 30px -14px rgba(31, 42, 18, 0.55);
}
.brand { position: relative; z-index: 2; margin-right: auto; display: flex; }
.brand img { height: 32px; width: auto; }
.menu-btn {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px 0 12px;
  border: 0; background: transparent; color: var(--cream); font-size: 16px; font-weight: 600; cursor: pointer;
}
.menu-icon { position: relative; width: 22px; height: 12px; }
.menu-icon::before, .menu-icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.menu-icon::before { top: 0; }
.menu-icon::after { top: 10px; }
.menu-open .menu-icon::before { top: 5px; transform: rotate(45deg); }
.menu-open .menu-icon::after { top: 5px; transform: rotate(-45deg); }
html.menu-open { overflow: hidden; }
.header-inner :focus-visible { outline-color: var(--cream); }

@media (max-width: 899px) {
  .nav {
    /* Covers the screen; the logo and Close button sit above it, so the pill melts into the panel. */
    position: fixed; inset: 0; z-index: 1; overflow-y: auto;
    display: flex; flex-direction: column; align-items: stretch;
    padding: calc(var(--header-h) + 20px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
    background: var(--olive-deep); color: var(--cream);
    visibility: hidden; clip-path: inset(0 0 100% 0);
    transition: clip-path .45s var(--ease), visibility 0s linear .45s;
  }
  .menu-open .nav { visibility: visible; clip-path: inset(0); transition: clip-path .45s var(--ease), visibility 0s; }
  .nav-link {
    font-family: var(--display); font-weight: 800; text-transform: uppercase; text-decoration: none;
    font-size: clamp(46px, 14vw, 68px); line-height: 1; padding-block: 10px;
    border-bottom: 1.5px solid var(--rule-cream);
  }
  .nav-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
  .nav a:hover { color: #fff; }
  .nav-cta { margin-top: auto; min-height: 56px; font-size: 18px; }
  .nav-social { order: 1; display: flex; justify-content: center; gap: 14px; padding-top: 18px; }
  .nav-social a {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--rule-cream); color: var(--cream);
  }
  .nav-social .icon { width: 26px; height: 26px; }
  @media (prefers-reduced-motion: no-preference) {
    .nav-link, .nav-cta, .nav-social { opacity: 0; transform: translateY(18px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
    .menu-open .nav-link, .menu-open .nav-cta, .menu-open .nav-social { opacity: 1; transform: none; }
    .menu-open .nav-social { transition-delay: .2s; }
    .menu-open .nav-link:nth-child(2) { transition-delay: .05s; }
    .menu-open .nav-link:nth-child(3) { transition-delay: .1s; }
    .menu-open .nav-cta { transition-delay: .15s; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav, .menu-open .nav { clip-path: none; transition: none; }
  }
}

.site-footer { background: var(--olive-deep); color: var(--cream); }
.site-footer a:hover { color: #fff; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-block: 48px 40px; font-size: 15px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand img { height: 36px; width: auto; align-self: flex-start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.footer-links div { display: flex; flex-direction: column; gap: 4px; }
.footer-links a { text-decoration: none; padding-block: 4px; }

/* Hero: a scroll-scrubbed clip. The section is tall, the stage sticks, and scrolling plays
   the frames (js/scrub.js). The clip is multiplied onto the cream so its white wall turns
   into the page, and its edges fade out, so the glass sits on the page rather than in a box. */
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero-copy .actions { margin-top: 6px; }
.scrub { position: relative; height: 230svh; }
.scrub-stage {
  position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h));
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding-block: 20px 0;
}
.scrub-media { position: relative; min-height: 0; margin-inline: calc(var(--gutter) * -1); }
.scrub-poster, .scrub-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The poster only shows until the first frame is drawn; the canvas does its own blend and edges. */
.scrub-poster {
  object-fit: cover; object-position: center bottom; mix-blend-mode: multiply;
  --fade-y: linear-gradient(to bottom, transparent, #000 14%, #000 88%, transparent);
  -webkit-mask-image: var(--fade-y); mask-image: var(--fade-y);
}
.scrub-media canvas { opacity: 0; transition: opacity .5s var(--ease); }
.scrub.is-ready canvas { opacity: 1; }
.scrub.is-ready .scrub-poster { opacity: 0; }
/* Captions: quiet italic narration over the empty wall, so they don't compete with the headline.
   The current line rises in from below, the previous one slides up and out, and three bars
   above them fill as the pour plays. */
.scrub-steps {
  position: absolute; left: var(--gutter); top: 9%; display: flex; gap: 6px;
}
.scrub-steps span { width: 28px; height: 3px; border-radius: 2px; background: rgba(31, 42, 18, 0.16); overflow: hidden; }
.scrub-steps i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.scrub-caption {
  position: absolute; left: var(--gutter); top: calc(9% + 18px); max-width: 11em;
  font-style: italic; font-weight: 400; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.25;
  text-shadow: 0 0 18px var(--cream), 0 0 6px var(--cream);
  opacity: 0; transform: translateY(18px); filter: blur(3px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease);
}
.scrub-caption.is-on { opacity: 1; transform: none; filter: none; }
.scrub-caption.is-past { transform: translateY(-18px); }
.scrub--shop { height: 230svh; }
@media (max-width: 719px) {
  .scrub-stage h1 { font-size: clamp(48px, 14vw, 62px); }
  .scrub-stage .lede { font-size: 17px; }
}
@media (max-width: 719px) and (max-height: 640px) { .scrub-caption, .scrub-steps { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .scrub, .scrub--shop { height: auto; }
  .scrub-stage { position: static; height: auto; padding-bottom: 48px; }
  .scrub-media { aspect-ratio: 4 / 5; max-height: 80svh; }
}

/* One orchestrated moment: the hero sets itself on load. */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .9s var(--ease) both; }
  .rise:nth-child(2) { animation-delay: .06s; }
  .rise:nth-child(3) { animation-delay: .12s; }
  .rise:nth-child(4) { animation-delay: .18s; }
  .scrub-media.rise { animation: fade 1.2s var(--ease) .15s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes fade { from { opacity: 0; } }
}

/* What your cafe gets */
.offer { background: var(--matcha); color: var(--ink); }
.offer-inner { display: grid; gap: 40px; padding-block: 64px 72px; }
.offer-media { aspect-ratio: 4 / 5; }
.offer-media .photo { object-position: 50% 72%; }
.offer-copy { display: grid; gap: 32px; align-content: center; }
/* Four short items: icon in a cream circle, a title and one line. Rows on phones, a 2x2 grid wider. */
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.offer-list li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 2px; align-items: center; }
.offer-icon {
  grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cream); color: var(--ink);
}
.offer-icon .icon { width: 32px; height: 32px; }
.offer-icon .icon [opacity] { fill: var(--matcha); opacity: 1; } /* duotone fill in matcha, outline in ink */
/* No icon set has a matcha whisk, so the brand's own whisk-and-bowl drawing is used as a mask,
   which paints it in the text colour like the other icons. */
.icon-whisk {
  display: block; width: 34px !important; height: 34px !important; background: currentColor;
  -webkit-mask: url("/assets/img/whisk-bowl.png") center / contain no-repeat;
  mask: url("/assets/img/whisk-bowl.png") center / contain no-repeat;
}
.offer-list h3 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); line-height: 1; align-self: end; }
.offer-list p { align-self: start; }

/* Which grade for which drink */
.pairs-section { display: grid; gap: 32px; padding-block: 88px 72px; }
/* Two grade cards: tin photo, big grade name, the drinks it suits, one sentence. */
.grades { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.grade { display: grid; gap: 16px; padding: 12px 12px 22px; border-radius: var(--r); background: #F1EEDD; }
.grade--dark { background: var(--olive); color: var(--cream); }
.grade .grade-img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.grade-body { display: grid; gap: 6px; padding-inline: 8px; }
.grade-name { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4vw, 56px); line-height: 0.9; text-transform: uppercase; }
.grade-use { font-weight: 600; font-size: 18px; }
.grades-sizes { font-weight: 600; color: var(--olive); }

/* Poured at our stall: a slow, endless strip of real customers. Two copies of the set scroll
   side by side; moving by exactly one copy's width makes the loop seamless. Pauses on hover;
   with reduced motion it becomes a plain sideways-scrolling row. */
.stall { padding-block: 24px 88px; overflow: hidden; }
.stall-head { display: grid; gap: 12px; margin-bottom: 28px; }
.stall-strip { display: flex; width: max-content; }
.stall-track { list-style: none; margin: 0; padding: 0 12px 0 0; display: flex; gap: 12px; }
.stall-track .stall-item { display: block; width: clamp(180px, 20vw, 280px); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; background: var(--tint); }
@media (prefers-reduced-motion: no-preference) {
  .stall-strip { animation: stall-loop 70s linear infinite; }
  .stall-strip:hover { animation-play-state: paused; }
  @keyframes stall-loop { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .stall { overflow: visible; }
  .stall-strip { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); }
  .stall-strip .stall-track[aria-hidden] { display: none; }
  .stall-item { scroll-snap-align: start; }
}

/* How ordering works: a real sequence */

/* Price-list form */
.inquire { background: var(--olive-deep); color: var(--cream); }
.inquire-inner { display: grid; gap: 36px; padding-block: 72px 88px; }
.inquire-copy { display: grid; gap: 16px; align-content: start; }
/* How ordering works, inside the price-list band: numbered matcha circles joined by a thin line. */
.inq-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 22px; }
.inq-steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; row-gap: 2px; align-content: start; }
.inq-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 21px; top: 48px; bottom: -20px; width: 2px; background: var(--rule-cream);
}
.inq-num {
  grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--matcha); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1;
}
.inq-steps h3 { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.05; padding-top: 2px; }
.inq-steps p { opacity: 0.85; max-width: 26em; }
.form { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.form-row { display: grid; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 600; min-width: 0; }
.form input, .form select {
  font-weight: 400; font-size: 16px; color: var(--ink); background: var(--cream-input);
  border: 1.5px solid var(--cream-input); border-radius: var(--r); padding: 12px 14px; min-height: 52px; width: 100%;
}
.form select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234D612D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.form input::placeholder { color: rgba(77, 97, 45, 0.75); }
.form input:focus-visible, .form select:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.form input:user-invalid { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.form button { align-self: stretch; margin-top: 6px; }
@media (min-width: 720px) { .form button { align-self: flex-start; } }

/* Home: the quiet retail pointer */
.home-retail { display: grid; gap: 24px; padding-block: 72px 88px; align-items: center; }
.home-retail-media { aspect-ratio: 3 / 2; }
.home-retail-copy { display: grid; gap: 14px; justify-items: start; }

/* Tin clips: soft edges on all four sides so the room in the clip melts into the page,
   strongest at the corners where both fades meet. */
.tin-video {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  --fx: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  --fy: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: var(--fx), var(--fy); -webkit-mask-composite: source-in;
  mask-image: var(--fx), var(--fy); mask-composite: intersect;
  transition: opacity .18s var(--ease);
}
.tin-video.is-swapping { opacity: 0; }

/* Shop */
.line { border-top: var(--line); }
.line--dark { background: var(--olive); color: var(--cream); border-top-color: var(--olive); }
.line--dark .btn--cream { color: var(--olive); }
.line--dark + .line { border-top-color: transparent; }
.line-inner { display: grid; gap: 24px; padding-block: 36px 44px; }
.line-head { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 10px; align-content: start; }
.line-name { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 6vw, 92px); line-height: 0.9; text-transform: uppercase; }
.line-art { display: flex; align-items: flex-end; gap: 4px; }
.line-art img { width: clamp(34px, 3.6vw, 52px); height: auto; }
.line-art img + img { width: clamp(30px, 3vw, 44px); margin-bottom: -3px; }
.line-tagline { grid-column: 1 / -1; font-size: 19px; max-width: 22em; }
/* Phones: name, then the clip, then sizes. Wide screens: clip left, name and sizes stacked right. */
.line-inner { grid-template-areas: "head" "media" "order"; }
.line-head { grid-area: head; }
.line-media { grid-area: media; max-width: 420px; width: 100%; justify-self: center; }
.line-order { grid-area: order; }
.line-order { display: flex; flex-direction: column; gap: 16px; align-self: end; }

.sizes, .flavors { border: 0; margin: 0; padding: 0; min-width: 0; }
.size {
  display: flex; align-items: baseline; gap: 10px; min-height: 46px; padding-block: 9px;
  font-size: 18px; cursor: pointer; transition: opacity .2s var(--ease);
}
.size, .chip { position: relative; }
.size input, .chip input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.size-name { display: inline-flex; align-items: center; gap: 12px; }
.size-name::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; flex: none;
  transition: background-color .2s var(--ease);
}
.leader { flex: 1; min-width: 16px; border-bottom: 2px dotted currentColor; opacity: 0.35; transform: translateY(-5px); }
.size-price { font-variant-numeric: tabular-nums; }
.size:not(:has(input:checked)) { opacity: 0.75; }
.size:hover { opacity: 1; }
.size:has(input:checked) { font-weight: 600; }
.size:has(input:checked) .size-name::before { background: currentColor; box-shadow: inset 0 0 0 3px var(--cream); }
.line--dark .size:has(input:checked) .size-name::before { box-shadow: inset 0 0 0 3px var(--olive); }
.line--dark .leader { opacity: 0.5; }
.size:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.badge {
  align-self: center; background: var(--accent); color: var(--cream); border-radius: 4px; padding: 3px 7px 2px;
  font-family: var(--cond); font-size: 13px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
}
.flavors { display: flex; flex-wrap: wrap; gap: 8px; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border: var(--line); border-radius: var(--r); font-size: 16px; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.chip input:checked + span { background: var(--ink); color: var(--cream); }

.ritual { display: grid; gap: 36px; padding-block: 88px 64px; border-top: var(--line); }

/* Preparation steps (shared by /shop and /scan): a looping clip per step. Thumbnail rows on
   phones and narrow columns; three columns with the clip on top on the wide /shop section. */
.prep { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.prep li { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; align-items: center; }
.clip { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: var(--tint); }
.prep-text { display: grid; gap: 4px; }
.prep h3 { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; }
.prep-num { font-family: var(--sans); font-weight: 300; font-size: 22px; color: var(--olive); }
.prep p { max-width: 24em; }
.closer { display: grid; gap: 14px; justify-items: start; padding-block: 40px 96px; border-top: 1.5px solid var(--rule); }

/* /scan: where the QR on every tin and pack lands. One narrow column, phone first. */
.scan { max-width: 760px; }
.scan-hello { display: grid; gap: 24px; padding-block: 8px 48px; }
.scan-video { width: 100%; }
.scan-hello-copy { display: grid; gap: 14px; align-content: end; }
.scan-hello h1 { font-size: clamp(48px, 7vw, 72px); }
.scan-block { display: grid; gap: 20px; padding-block: 40px; border-top: var(--line); }
.scan-links { list-style: none; margin: 0; padding: 0; }
.scan-links li + li { border-top: 1.5px solid var(--rule); }
.scan-links a {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding-block: 12px;
  font-size: 21px; font-weight: 600; text-decoration: none;
  transition: padding-left .25s var(--ease);
}
.scan-links a:hover { padding-left: 8px; }
.scan-handle { margin-left: auto; font-size: 16px; font-weight: 400; color: var(--olive); text-align: right; }
.scan-links--more a { font-size: 19px; }
/* Feedback sits on an olive band that runs edge to edge past the narrow column. */
.scan-feedback {
  background: var(--olive); color: var(--cream); border-top-color: var(--olive);
  box-shadow: 0 0 0 100vmax var(--olive); clip-path: inset(0 -100vmax); padding-block: 56px;
}
.scan-feedback + .scan-block { border-top-color: transparent; }
.rating { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.scan-feedback .chip span { border-color: var(--cream); }
.scan-feedback .chip input:checked + span { background: var(--cream); color: var(--ink); }
.scan-feedback .chip:has(input:focus-visible) { outline-color: var(--cream); }
.form textarea {
  font: inherit; font-weight: 400; font-size: 16px; color: var(--ink); background: var(--cream-input);
  border: 1.5px solid var(--cream-input); border-radius: var(--r); padding: 12px 14px; width: 100%; resize: vertical;
}
.form textarea::placeholder { color: rgba(77, 97, 45, 0.75); }
.form textarea:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* Floating contact button: WhatsApp and socials, bottom right on every page. */
.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 15;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: bottom .3s var(--ease);
}
body:has(.cart-bar:not([hidden])) .fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
.menu-open .fab { display: none; }
.fab-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fab-item, .fab-btn {
  display: grid; place-items: center; border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(31, 42, 18, 0.55);
}
.fab-item { position: relative; width: 50px; height: 50px; background: var(--cream); color: var(--ink); border: 1.5px solid var(--ink); }
.fab-item:hover { background: var(--ink); color: var(--cream); }
.fab-item .icon { width: 24px; height: 24px; }
.fab-tip {
  position: absolute; right: calc(100% + 10px); white-space: nowrap; padding: 5px 10px; border-radius: 8px;
  background: var(--ink); color: var(--cream); font-size: 14px; font-weight: 600;
}
.fab-btn { width: 60px; height: 60px; border: 0; background: var(--olive-deep); color: var(--cream); cursor: pointer; }
.fab-btn .icon { width: 28px; height: 28px; }
.fab-btn:active { transform: scale(0.96); }
.fab-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.fab-close, .fab.is-open .fab-open { display: none; }
.fab.is-open .fab-close { display: grid; }
.fab:not(.is-open) .fab-items { visibility: hidden; }
.fab-items li { transition: opacity .25s var(--ease), transform .35s var(--ease); }
.fab:not(.is-open) .fab-items li { opacity: 0; transform: translateY(14px) scale(0.9); }
.fab.is-open .fab-items li:nth-last-child(2) { transition-delay: .03s; }
.fab.is-open .fab-items li:nth-last-child(3) { transition-delay: .06s; }
.fab.is-open .fab-items li:nth-last-child(4) { transition-delay: .09s; }
@media (prefers-reduced-motion: reduce) { .fab-items li { transition: none; } }
@media (max-width: 899px) { .fab { display: none; } } /* on phones the contact links live in the menu panel */

/* Cart bar and sheet */
.cart-bar {
  position: fixed; inset: auto 0 0 0; z-index: 5;
  background: var(--cream); border-top: 1.5px solid var(--rule);
  padding-block: 12px calc(12px + env(safe-area-inset-bottom));
}
.cart-bar[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cart-bar:not([hidden]) { animation: rise .5s var(--ease); }
}
.cart-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; }
body:has(.cart-bar:not([hidden])) .site-footer { padding-bottom: 80px; }

.cart {
  width: min(520px, 100%); max-width: 100%; max-height: min(90dvh, 720px); margin: auto auto 0;
  border: 0; border-radius: var(--r) var(--r) 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--cream); color: var(--ink);
}
.cart[open] { display: flex; flex-direction: column; gap: 16px; }
.cart::backdrop { background: rgba(47, 60, 27, 0.5); }
.cart-head { display: flex; align-items: center; justify-content: space-between; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; border-radius: var(--r); cursor: pointer; }
.icon-btn:hover { background: var(--tint); }
.cart-lines { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding-block: 14px; border-top: 1.5px solid var(--rule); }
.cart-line-name { font-weight: 600; }
.cart-line-price { text-align: right; }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button { width: 40px; height: 40px; border: var(--line); border-radius: 50%; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; }
.qty output { min-width: 28px; text-align: center; }
.cart-total { display: flex; justify-content: space-between; font-size: 20px; font-weight: 600; border-top: var(--line); padding-top: 14px; }

@media (max-width: 359px) {
  .brand img { height: 28px; }
}

@media (min-width: 900px) {
  :root { --header-h: 80px; --pill-gap: 12px; }
  .header-inner { width: calc(min(100vw, 1320px) - 2 * var(--gutter) + 24px); padding-inline: 22px 12px; border-radius: 14px; }
  .brand img { height: 40px; }
  .menu-btn { display: none; }
  .nav { display: flex; align-items: center; gap: 30px; font-size: 16px; font-weight: 600; }
  .nav-link { position: relative; text-decoration: none; padding-block: 10px; }
  .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
  }
  .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
  .nav-link:hover { color: #fff; }
  .nav-social { display: none; } /* contact links live in the floating button on wide screens */
}

@media (min-width: 720px) {
  .scrub-stage { grid-template-rows: none; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: center; padding-block: 0; }
  .scrub-media { height: 100%; margin-inline: 0 calc(var(--gutter) * -1); }
  .scrub-poster {
    --fade-x: linear-gradient(to right, transparent, #000 18%);
    -webkit-mask-image: var(--fade-y), var(--fade-x); -webkit-mask-composite: source-in;
    mask-image: var(--fade-y), var(--fade-x); mask-composite: intersect;
  }
  .scrub-caption, .scrub-steps { left: 14%; }
  .scrub-stage h1 { font-size: clamp(60px, 6.6vw, 104px); }
  .scan-hello { grid-template-columns: 5fr 6fr; column-gap: 40px; padding-block: 24px 64px; }
  .scan-hello h1 { font-size: 60px; }
  .scan-block { grid-template-columns: 5fr 6fr; column-gap: 40px; align-items: start; padding-block: 56px; }
  .scan-feedback { padding-block: 72px; }
  .scan-block > :only-child { grid-column: 1 / -1; }
  .offer-inner { grid-template-columns: 5fr 6fr; column-gap: 64px; padding-block: 96px; }
  .offer-list { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .offer-list li { grid-template-columns: 1fr; row-gap: 10px; align-content: start; }
  .offer-icon { grid-row: auto; }
  .offer-list h3, .offer-list p { align-self: auto; }
  .pairs-section { padding-block: 120px 96px; gap: 40px; }
  .grades { grid-template-columns: 1fr 1fr; gap: 24px; }
  .grade { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: center; gap: 24px; padding: 16px; }
  .grade-name { font-size: clamp(30px, 3vw, 48px); }
  .grade-body { padding-inline: 0 8px; gap: 10px; }
  .grade-use { font-size: 20px; }
  .stall { padding-block: 40px 120px; }
  .stall-head { margin-bottom: 40px; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .inquire-inner { grid-template-columns: 5fr 7fr; column-gap: 64px; padding-block: 104px 120px; }
  .home-retail { grid-template-columns: 7fr 5fr; column-gap: 56px; padding-block: 104px 120px; }
  .line-inner {
    grid-template-columns: 5fr 7fr; grid-template-areas: "media ." "media head" "media order" "media .";
    grid-template-rows: 1fr auto auto 1fr; column-gap: 56px; row-gap: 28px; padding-block: 40px 48px;
  }
  .line-media { max-width: 460px; align-self: center; }
  .line-order { align-self: start; max-width: 520px; }
  .ritual { padding-block: 112px 88px; }
  .ritual--cols .prep { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .ritual--cols .prep li { grid-template-columns: 1fr; row-gap: 16px; align-items: start; }
  .closer { grid-template-columns: 1fr auto; align-items: end; column-gap: 48px; padding-block: 56px 120px; }
  .closer .muted { grid-column: 1; }
  .closer .btn { grid-column: 2; grid-row: 1 / span 2; }
  .cart { margin: auto; border-radius: var(--r); padding: 28px; }
}
/* Tablets: steps above the form so the form keeps two comfortable columns. */
@media (min-width: 720px) and (max-width: 1023px) {
  .inquire-inner { grid-template-columns: 1fr; row-gap: 40px; }
  .inq-steps { grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
  .inq-steps li:not(:last-child)::after { display: none; }
}
.form-row { align-items: end; }
/* Tablets and small laptops: the grade clip goes on top inside each card so it never shrinks to a thumbnail. */
@media (min-width: 720px) and (max-width: 1199px) {
  .grade { grid-template-columns: 1fr; align-items: start; }
  .grade-name { font-size: 40px; }
  .grade-body { padding-inline: 10px; }
}