/* ==========================================================================
   Conditional Effect. — Site Styles  (v2)
   Pure white · monochrome · editorial luxury (Gentle Monster–inspired)
   Display: Newsreader  ·  UI/Body: Inter
   ========================================================================== */

:root {
  --white:   #FFFFFF;
  --off:     #FAFAF8;   /* barely-there section tint */
  --off-2:   #F2F2EF;   /* image placeholders / fills */
  --ink:     #111111;   /* near-black */
  --ink-2:   #2A2A28;
  --body:    #5C5C58;   /* warm grey body text */
  --muted:   #8C8C86;   /* labels / captions */
  --line:    #E6E6E1;   /* hairline */
  --line-2:  #D9D9D3;

  /* legacy aliases kept so existing markup stays monochrome */
  --cream: var(--white);
  --cream-2: var(--off);
  --cream-3: var(--off-2);
  --oxblood: var(--ink);
  --sand: var(--muted);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  /* unified motion easing + reveal duration */
  --ease: cubic-bezier(.2,.7,.2,1);
  --reveal-dur: 0.8s;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
::selection { background: var(--ink); color: #fff; }

/* accessible focus rings — keyboard only, light variant on dark areas */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }
.bg-ink :focus-visible, .bg-oxblood :focus-visible, .model :focus-visible,
.close-cta :focus-visible, .cinema :focus-visible,
.site-header--hero:not(.scrolled) :focus-visible { outline-color: #F4F4F2; }

/* tabular, lining figures for prices & stats (aligned numerals) */
.product__price, .bundle__price, .stat .figure, .trustbar { font-feature-settings: "tnum" 1, "lnum" 1; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 500; line-height: 1.06; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: clamp(3.2rem, 8vw, 7.5rem); font-weight: 500; letter-spacing: -0.015em; }
h2 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.5rem, 2.8vw, 2.3rem); }
p  { max-width: 64ch; }

/* Site-wide tidy line-breaks — balance headings, avoid orphan words in prose */
.serif-quote, .eq-result, .eq-bridge, .eq-emph__text, .vtext, .close-quote, .showcase__tagline, blockquote { text-wrap: balance; }
p, li { text-wrap: pretty; }
.lead, .eq-note, .about-line, .model__note, .form-note, .faq__item p, .step p, .product__desc, .statement p, figcaption { text-wrap: balance; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink);
}
.lead { font-size: clamp(1.1rem, 1.7vw, 1.45rem); color: var(--body); font-weight: 300; line-height: 1.65; }
.serif-quote { font-family: var(--serif); font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.18; color: var(--ink); font-weight: 400; max-width: 22ch; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(5.5rem, 12vw, 11rem); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.bg-2 { background: var(--off); }
.bg-ink { background: var(--ink); color: #D9D7D1; }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: #FFFFFF; }
/* legacy "oxblood" band → now an ink (black) band */
.bg-oxblood { background: var(--ink); color: #D9D7D1; }
.bg-oxblood h1, .bg-oxblood h2, .bg-oxblood h3 { color: #fff; }

.grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.items-center { align-items: center; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-1 { margin-top: 0.75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.5rem; }
.maxw-prose { max-width: 60ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 1.2rem 2.8rem; border: 1px solid var(--ink);
  background: var(--ink); color: #fff;
  cursor: pointer; transition: all 0.3s ease; border-radius: 0;
}
.btn:hover { background: transparent; color: var(--ink); }
/* legacy oxblood button → solid black */
.btn--oxblood { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--oxblood:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: transparent; color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* Our Story — dark close / final CTA */
.close-cta { background: #16140F; padding-block: clamp(5rem,11vw,8.5rem); }
.close-cta .close-quote { color: #fff; max-width: none; margin: 0 auto; }
.close-rule { display: block; width: 40px; height: 1px; background: rgba(255,255,255,0.28); margin: clamp(2rem,4vw,3rem) auto; }
.close-cta .close-tagline { font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.7rem; color: rgba(255,255,255,0.5); margin: 0; }
.close-cta .close-btns { justify-content: center; margin-top: clamp(2.6rem,4.8vw,3.6rem); }

/* For Business — unify mood & scale with Our Story */
.business-page h1, .business-page h2 { color: #1C1A17; letter-spacing: -0.01em; }
.business-page .section h2, .business-page .media-row h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1; }
.business-page h3 { font-size: clamp(1.1rem, 1.5vw, 1.4rem); line-height: 1.14; }
.business-page .hero-copy h1 { font-size: clamp(2rem, 4vw, 3.1rem) !important; line-height: 1.1; }
.business-page .lead { font-size: clamp(1.02rem, 1.4vw, 1.22rem); }
.business-page .step { border-top: 1px solid var(--line); padding-top: 1.6rem; }
.business-page .step .num { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--muted); letter-spacing: 0.02em; }
.business-page .step h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin-top: 0.4rem; color: #1C1A17; }
.business-page .step p { margin-top: 0.6rem; }
.business-page .biz-signoff { font-family: var(--sans); font-weight: 500; text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.72rem; color: var(--ink); }
.business-page .bg-ink { background: #16140F; }
.business-page .bg-ink h2 { color: #fff; }
.business-page .bg-ink .eyebrow { color: rgba(255,255,255,0.5); }
.business-page .stat .figure { font-size: clamp(2.2rem, 4vw, 3rem); }

/* For Business — the model (compact value chain, static) */
.model { background: #16140F; }
.model .eyebrow { color: rgba(255,255,255,0.5); }
.model__flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.7rem,2vw,1.6rem); margin-top: clamp(1.6rem,3vw,2.4rem); }
.model__item { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem,2.6vw,2.1rem); color: #fff; line-height: 1.1; }
.model__sep { font-family: var(--sans); font-weight: 300; font-size: clamp(0.9rem,1.4vw,1.15rem); color: rgba(255,255,255,0.4); transform: translateY(-0.06em); }
.model__note { font-size: 0.95rem; color: rgba(255,255,255,0.6); max-width: 54ch; margin: clamp(1.5rem,3vw,2.2rem) auto 0; line-height: 1.75; }
@media (max-width: 560px){ .model__sep { display: none; } .model__flow { flex-direction: column; gap: 0.5rem; } }

/* For Business — Who we supply, alternating full-width rows (with subtle depth) */
.supply-rows { display: flex; flex-direction: column; gap: clamp(2.8rem,6vw,5.5rem); }
.supply-rows .media-row { perspective: 1300px; }
.supply-rows .media-row__img { overflow: hidden; border-radius: 5px; box-shadow: 0 26px 55px rgba(40,33,24,0.18); transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease; will-change: transform; }
.supply-rows .media-row__img img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.supply-rows .media-row__img:hover { box-shadow: 0 36px 72px rgba(40,33,24,0.24); }
.supply-rows .media-row__img:hover img { transform: scale(1.05); }
.supply-rows .eyebrow { display: block; }
.supply-rows h3 { margin-top: 0.5rem; }
.supply-rows p { margin-top: 0.7rem; color: var(--body); }

/* For Business — How it works horizontal timeline */
.timeline { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem,4vw,3.2rem); }
.timeline__track { position: absolute; top: clamp(26px,2.5vw,34px); left: 16.66%; right: 16.66%; height: 1px; background: var(--line-2); }
.timeline__step { position: relative; text-align: center; }
.timeline__node { width: clamp(52px,5vw,68px); height: clamp(52px,5vw,68px); border: 1px solid var(--line-2); border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto clamp(1.1rem,2.2vw,1.6rem); color: var(--ink); position: relative; z-index: 2; }
.timeline__node svg { width: clamp(22px,2.4vw,28px); height: auto; }
.timeline__step .num { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 1rem; }
.timeline__step h3 { margin-top: 0.4rem; }
.timeline__step p { margin-top: 0.65rem; color: var(--body); max-width: 34ch; margin-inline: auto; font-size: 0.95rem; }
@media (max-width: 760px){
  .timeline { grid-template-columns: 1fr; gap: 2.6rem; }
  .timeline__track { display: none; }
}
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.link-arrow { font-family: var(--sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px; transition: opacity 0.2s; }
.link-arrow:hover { opacity: 0.5; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(120%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.brand { cursor: pointer; }
.nav-links { display: flex; align-items: center; gap: 2.6rem; }
.nav-links a { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); position: relative; }
.nav-links a:not(.btn):not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: var(--ink); transition: width 0.3s; }
.nav-links a:not(.btn):not(.nav-cta):hover::after { width: 100%; }
.nav-links a.is-active::after { width: 100%; }
.nav-links .btn { padding: 0.65rem 1.3rem; font-size: 0.64rem; }
/* primary CTA as a minimal underlined text link (no box) */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.4rem; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: var(--ink); margin: 6px 0; transition: 0.3s; }

/* transparent header overlaying a dark hero, turns solid on scroll */
.site-header--hero { position: fixed; left: 0; right: 0; top: 0; background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background 0.4s ease, border-color 0.4s ease; }
@media (min-width: 761px){
  .site-header--hero .nav-links a { color: #fff; }
  .site-header--hero .nav-links a:not(.btn)::after { background: #fff; }
  .site-header--hero .nav-links .btn--oxblood { background: #fff; color: var(--ink); border-color: #fff; }
  .site-header--hero .nav-links .btn--oxblood:hover { background: transparent; color: #fff; }
}
.site-header--hero .brand img { filter: invert(1) brightness(2.4); transition: filter 0.4s ease; }
.site-header--hero .nav-toggle span { background: #fff; }
.site-header--hero.scrolled { position: fixed; background: rgba(255,255,255,0.9); backdrop-filter: saturate(120%) blur(12px); border-bottom-color: var(--line); }
.site-header--hero.scrolled .nav-links a { color: var(--ink); }
.site-header--hero.scrolled .nav-links a:not(.btn)::after { background: var(--ink); }
.site-header--hero.scrolled .nav-links .btn--oxblood { background: var(--ink); color: #fff; border-color: var(--ink); }
.site-header--hero.scrolled .brand img { filter: none; }
.site-header--hero.scrolled .nav-toggle span { background: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: min(90vh, 820px); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 6vw, 5.5rem) var(--gutter); }
.hero-copy h1 { margin-top: 1.4rem; letter-spacing: -0.005em; }
.hero-copy .lead { margin-top: 1.9rem; max-width: 44ch; }
.hero-media { background: var(--off-2); position: relative; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- full-bleed hero (Gentle Monster style) ---------- */
.hero-full { position: relative; min-height: min(100svh, 900px); display: flex; align-items: flex-end; overflow: hidden; background: #0c0c0c; }
.hero-full__media { position: absolute; inset: 0; }
.hero-full__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.12) 42%, rgba(0,0,0,0.30) 100%); }
.hero-full__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) clamp(3rem, 7vw, 6.5rem); color: #fff; }
.hero-full .eyebrow { color: rgba(255,255,255,0.78); }
.hero-full h1 { color: #fff; font-size: clamp(3.2rem, 9.5vw, 9rem); margin-top: 1.2rem; }
.hero-full .lead { color: rgba(255,255,255,0.9); margin-top: 1.6rem; max-width: 42ch; }

/* ---------- cinematic letterbox hero (Our Story) ---------- */
.cine { background: #0b0b0b; color: #fff; text-align: center; overflow: hidden; padding-top: clamp(7rem, 16vh, 12rem); padding-bottom: clamp(3.5rem, 8vw, 7rem); }
.cine .eyebrow { color: rgba(255,255,255,0.6); }
.cine__title { color: #fff; font-weight: 500; font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: 1.04; margin-top: 1.3rem; }
.cine__frame { position: relative; width: 100%; max-width: 1480px; margin: clamp(2.4rem, 5vw, 3.8rem) auto 0; aspect-ratio: 21 / 9; max-height: 62vh; overflow: hidden; }
.cine__zoom { position: absolute; inset: 0; }
.cine__zoom img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: cineDrift 20s ease-in-out infinite alternate; }
@keyframes cineDrift { from { transform: scale(1.06); } to { transform: scale(1.17) translateY(-1.5%); } }
.cine__lead { color: rgba(255,255,255,0.82); max-width: 38ch; margin: clamp(2.2rem, 4vw, 3.2rem) auto 0; font-weight: 300; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.6; }
@media (prefers-reduced-motion: reduce){ .cine__zoom img { animation: none; transform: none; } }
@media (max-width: 760px){
  .cine__frame { aspect-ratio: 3 / 2; max-height: none; }
  .cine__title { font-size: clamp(2.1rem, 9vw, 3.2rem); }
}

/* ---------- full-bleed campaign banner ---------- */
.banner { position: relative; min-height: clamp(440px, 72vh, 780px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #0c0c0c; text-align: center; }
.banner__media { position: absolute; inset: 0; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.44); }
.banner__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); color: #fff; }
.banner .eyebrow { color: rgba(255,255,255,0.8); display: block; margin-bottom: 1.2rem; }
.banner h2 { color: #fff; font-size: clamp(2.6rem, 6.5vw, 5.4rem); }
.banner p { color: rgba(255,255,255,0.88); margin: 1.4rem auto 0; max-width: 46ch; }
.banner .btn-row { justify-content: center; margin-top: 2.2rem; }

/* ---------- model steps ---------- */
.steps { counter-reset: step; }
.step { border-top: 1px solid var(--line); padding-top: 1.8rem; }
.step .num { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); letter-spacing: 0.08em; }
.step h3 { margin-top: 0.5rem; }
.step p { margin-top: 0.7rem; color: var(--body); }

/* ---------- feature media row ---------- */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,5vw,4.5rem); align-items: center; }
.media-row.reverse .media-row__img { order: 2; }
.media-row__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.media-row__img.wide img { aspect-ratio: 3/2; }

/* ---------- cards ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 2.4rem; height: 100%; }
.card .eyebrow { margin-bottom: 0.9rem; display: block; }
.card h3 { margin-bottom: 0.5rem; }

/* ---------- product cards ---------- */
.product { background: var(--white); border: 1px solid var(--line); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; }
.product__media { aspect-ratio: 1/1; background: var(--off-2); overflow: hidden; }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.product:hover .product__media img { transform: scale(1.04); }
/* placeholder for client-supplied imagery (e.g. decaf) */
.product__media.placeholder { display: flex; align-items: center; justify-content: center; background: var(--off-2); }
.product__media.placeholder span { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.product__body { padding: 1.7rem 1.7rem 2rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.product__name { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; color: var(--ink); }
.product__desc { font-size: 0.92rem; color: var(--body); flex: 1; font-weight: 300; }
.product__meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 0.7rem; }
.product__price { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }
.product__price small { font-family: var(--sans); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.06em; }

/* Shop — conversion detail: tasting notes, specs, per-cup, reassurance, impact, brew */
.product__notes { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--body); line-height: 1.3; }
.product__specs { display: flex; flex-wrap: wrap; align-items: center; margin: 0.15rem 0 0; }
.product__specs li { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.product__specs li:not(:last-child)::after { content: "·"; margin: 0 0.55rem; color: var(--line-2); }
.product__unit { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; }
.buy-reassure { margin-top: 0.75rem; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--muted); }
.bundle__price s { color: var(--muted); text-decoration-thickness: 1px; }
/* shop hero — shorter than B2B hero so products surface sooner */
.shop-hero .hero-grid { min-height: min(66vh, 620px); }

.shop-impact { border-block: 1px solid var(--line); padding-block: clamp(1.7rem, 3.2vw, 2.6rem); background: var(--white); }
.shop-impact p { max-width: 72ch; margin-inline: auto; text-align: center; font-size: clamp(0.98rem, 1.4vw, 1.18rem); line-height: 1.6; color: var(--body); }
.shop-impact__lead { font-family: var(--serif); font-style: italic; color: var(--ink); }

.brew { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.brew li { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.brew__num { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--muted); }
.brew h3 { margin-top: 0.45rem; font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.brew p { margin-top: 0.55rem; color: var(--body); font-size: 0.95rem; }
@media (max-width: 760px){ .brew { grid-template-columns: 1fr; gap: 1.8rem; } }

/* stripe buy button placeholder */
.buy-slot { margin-top: 1rem; }
.buy-placeholder {
  display: block; width: 100%; text-align: center;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 1rem; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; border-radius: 0; transition: 0.3s;
}
.buy-placeholder:hover { background: transparent; color: var(--ink); }

/* ---------- pill / tags ---------- */
.pill { display: inline-block; font-family: var(--sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 0; padding: 0.45rem 0.95rem; }

/* ---------- stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,4vw,3rem); }
.stat .figure { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--ink); line-height: 1; font-weight: 500; }
.bg-ink .stat .figure, .bg-oxblood .stat .figure { color: #fff; }
.stat .label { font-size: 0.76rem; color: var(--muted); margin-top: 0.7rem; letter-spacing: 0.04em; }
.bg-ink .stat .label, .bg-oxblood .stat .label { color: rgba(255,255,255,0.62); }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.3rem; max-width: 640px; }
.field { display: grid; gap: 0.5rem; }
.field.row-2 { grid-template-columns: 1fr 1fr; gap: 1.3rem; }
@media (max-width: 560px){ .field.row-2 { grid-template-columns: 1fr; } }
.field label { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 0.98rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--line-2);
  padding: 0.9rem 1rem; border-radius: 0; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 1px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.form-note { font-size: 0.82rem; color: var(--muted); }

/* ---------- divider quote ---------- */
.quote-band { text-align: center; }
.quote-band .serif-quote { margin-inline: auto; max-width: 26ch; }
.quote-band cite { display: block; margin-top: 1.6rem; font-style: normal; font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.bg-ink .quote-band cite, .bg-oxblood .quote-band cite { color: rgba(255,255,255,0.55); }

/* ---------- page hero (interior) ---------- */
.page-hero { padding-block: clamp(4rem, 8vw, 7rem) clamp(2rem,4vw,3rem); }
.page-hero .eyebrow { display: block; margin-bottom: 1.6rem; }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); font-weight: 400; line-height: 1.16; letter-spacing: 0; }
.page-hero p { margin-top: 1.8rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #9D9D97; padding-block: clamp(3.5rem,6vw,5.5rem) 2rem; }
.site-footer h4 { color: #fff; font-family: var(--serif); font-size: 1.7rem; font-weight: 500; margin-bottom: 0.6rem; }
.site-footer .footer-col > p { font-size: 0.8rem; line-height: 1.7; text-wrap: balance; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer-grid a { color: #9D9D97; font-size: 0.88rem; }
.footer-grid a:hover { color: #fff; }
.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col .col-title { font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: #6E6E68; margin-bottom: 1.1rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 3.2rem; padding-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6E6E68; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ==========================================================================
   Logo intro overlay (Sequence effect)
   ========================================================================== */
#ce-intro { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: #fff; }
html.js #ce-intro { display: flex; }
#ce-intro.hide { opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0.7s; }
#ce-intro svg { width: min(540px, 70vw); height: auto; overflow: visible; }
#ce-intro svg path {
  fill: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(16px) scale(0.94);
  animation: ce-seq 0.55s cubic-bezier(.2,.75,.2,1) forwards;
  animation-delay: calc(var(--i) * 0.055s);
}
@keyframes ce-seq { to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce){
  #ce-intro svg path { animation: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   Minimal gallery / carousel / 3D tilt  (homepage)
   ========================================================================== */
.showcase { position: relative; height: 100svh; min-height: 580px; overflow: hidden; background: #0b0b0b; }
.showcase__track { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s cubic-bezier(.4,0,.2,1); }
.slide.is-active { opacity: 1; }
.slide__inner { position: absolute; inset: 0; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide picture { position: absolute; inset: 0; display: block; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.12) 32%, rgba(0,0,0,0) 52%), radial-gradient(78% 82% at 10% 104%, rgba(0,0,0,0.5), transparent 60%); }

.showcase__overlay { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.6rem,4vw,3.2rem) var(--gutter); pointer-events: none; color: #fff; }
.showcase__overlay > * { pointer-events: auto; }
.showcase__tagline { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.08; color: #fff; max-width: none; white-space: nowrap; }
.showcase__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.showcase__count { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.28em; color: rgba(255,255,255,0.85); }
.dots { display: flex; gap: 12px; }
.dot { width: 38px; height: 2px; background: rgba(255,255,255,0.32); border: 0; padding: 0; cursor: pointer; transition: background 0.3s; }
.dot.is-active { background: #fff; }
.showcase__controls { display: flex; align-items: center; gap: 18px; }
.showcase__arrow { background: none; border: 0; padding: 5px; cursor: pointer; color: rgba(255,255,255,0.68); display: inline-flex; align-items: center; transition: color 0.25s, transform 0.25s; }
.showcase__arrow:hover { color: #fff; }
.showcase__arrow[data-prev]:hover { transform: translateX(-3px); }
.showcase__arrow[data-next]:hover { transform: translateX(3px); }

.tilt-wrap { perspective: 1200px; }
.tilt { transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.tilt img { display: block; width: 100%; backface-visibility: hidden; }

.statement { text-align: center; }
.statement p { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.38; color: var(--ink); max-width: 38ch; margin-inline: auto; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 3vw, 2.6rem); max-width: 760px; margin-inline: auto; }
.gallery figure { margin: 0; }
.gallery .ph { aspect-ratio: 4/5; background: var(--off-2); overflow: hidden; }
.gallery img { aspect-ratio: 4/5; object-fit: cover; }
.gallery .ph.empty { display: flex; align-items: center; justify-content: center; }
.gallery .ph.empty span { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.gallery figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-top: 1.1rem; }
.gallery .g-name { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--ink); }
.gallery .g-price { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }

.editorial { position: relative; min-height: clamp(520px, 86vh, 900px); display: flex; align-items: flex-end; overflow: hidden; background: #0b0b0b; }
.editorial__media { position: absolute; inset: 0; }
.editorial__media img { width: 100%; height: 100%; object-fit: cover; }
.editorial::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.16) 100%); }
.editorial__inner .lead { color: rgba(255,255,255,0.9); margin-top: 1.4rem; max-width: 40ch; }
.editorial__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 var(--gutter) clamp(2.5rem,6vw,5rem); color: #fff; }
.editorial__inner .eyebrow { color: rgba(255,255,255,0.8); }
.editorial__inner h2 { color: #fff; margin-top: 0.8rem; }

@media (max-width: 760px){
  .gallery { grid-template-columns: 1fr; gap: 2rem; max-width: 460px; margin-inline: auto; }
  .showcase__tagline { font-size: clamp(1.5rem, 6.2vw, 2.6rem); }
}

/* ==========================================================================
   Contrast Words — scroll-focus storytelling (Our Story)
   ========================================================================== */
.contrast { text-align: center; }
.contrast__intro { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.5rem); color: var(--ink); max-width: 42ch; margin: 1.2rem auto 0; }
.cw-list { display: grid; gap: clamp(1.1rem, 3.2vw, 2.4rem); width: 100%; max-width: 760px; margin: clamp(3rem, 7vw, 5.5rem) auto 0; }
.cw-row { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; column-gap: clamp(1.5rem, 6vw, 4.5rem); font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.1; }
/* negative word: sharp & readable, lingers, then blurs away */
.cw-neg { text-align: right; color: #8C8C86; filter: blur(0); opacity: 1; transform: none; transition: opacity 1s ease 1.5s, filter 1s ease 1.5s, transform 1s ease 1.5s; }
/* positive word: resolves from blur to sharp once the negative has been read */
.cw-pos { text-align: left; color: var(--ink); filter: blur(10px); opacity: 0; transform: translateY(12px); transition: filter 1s cubic-bezier(.2,.7,.2,1) 1.75s, opacity 1s ease 1.75s, transform 1s cubic-bezier(.2,.7,.2,1) 1.75s; }
.cw-row.in .cw-pos { filter: blur(0); opacity: 1; transform: none; }
.cw-row.in .cw-neg { opacity: 0; filter: blur(9px); transform: translateY(-8px); }
.cw-row.cw-noanim .cw-neg, .cw-row.cw-noanim .cw-pos { transition: none !important; }
.contrast__close { font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.9rem); color: var(--ink); line-height: 1.3; margin: clamp(3rem, 7vw, 5rem) auto 0; max-width: 38ch; }
.pullquote { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.46; color: var(--ink); max-width: 32ch; margin-inline: auto; }
/* Our Story — editorial downscale (scoped) */
.story-page .statement p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.65; max-width: 48ch; }
.story-page .serif-quote { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.story-page .editorial__inner h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.story-page .editorial__inner .lead { font-size: clamp(1rem, 1.4vw, 1.2rem); }

/* Our Story — The Dark Chapter (problem → read twice) */
.dark-chapter { background: #161513; color: #C9C3B7; }
.dark-chapter .dc-beat { padding-block: clamp(3.2rem, 7vw, 5.5rem); border-top: 1px solid rgba(255,255,255,0.12); }
.dark-chapter .dc-beat:first-child { border-top: 0; padding-top: clamp(4.5rem, 9vw, 7.5rem); }
.dark-chapter .dc-beat:last-child { padding-bottom: clamp(4.5rem, 9vw, 7.5rem); }
.dark-chapter .dc-beat.center { text-align: center; }
.dark-chapter .eyebrow { color: rgba(237,233,224,0.5); }
.dark-chapter .forces__line { color: #8A857A; }
.dark-chapter .forces__concl { color: #F4F1E9; }
.dark-chapter .pullquote { color: #F4F1E9; }
.dark-chapter .contrast__intro { color: #E7E2D8; }
.dark-chapter .contrast__close { color: #F4F1E9; }
.dark-chapter .contrast__note { color: #948F84; }
.dark-chapter .cw-neg { color: #6E6A61; }
.dark-chapter .cw-pos { color: #FFFFFF; }
.dc-para { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.68; max-width: 50ch; margin-inline: auto; }

/* Our Story — Equation infographic (light) */
.equation { text-align: center; }
.eq-chips { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.eq-chip { font-family: var(--sans); font-size: 0.82rem; color: var(--body); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.6rem 1.15rem; }
.eq-arrow { color: var(--line-2); font-size: 1.4rem; line-height: 1; margin: clamp(1.8rem,3vw,2.6rem) 0; }
.eq-emph { display: inline-block; position: relative; margin-top: 0.6rem; }
.eq-emph.reveal { opacity: 1; transform: none; transition: none; }
.eq-emph__text { display: inline-block; font-family: var(--serif); font-weight: 500; font-size: clamp(2.8rem, 7.2vw, 5.6rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); filter: blur(16px); opacity: 0; transform: scale(1.04); transition: filter 1.1s cubic-bezier(.2,.7,.2,1), opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.eq-emph.in .eq-emph__text { filter: blur(0); opacity: 1; transform: scale(1); }
.eq-emph__line { position: absolute; left: -1.5%; width: 103%; bottom: -0.18em; height: 0.4em; overflow: visible; pointer-events: none; }
.eq-emph__line path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1) 0.55s; }
.eq-emph.in .eq-emph__line path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce){
  .eq-emph__text { filter: none; opacity: 1; transform: none; }
  .eq-emph__line path { stroke-dashoffset: 0; }
}
.eq-bridge { font-family: var(--serif); font-style: normal; font-weight: 500; font-size: clamp(0.85rem, 3vw, 1.55rem); color: #2B2620; white-space: nowrap; margin: clamp(2.2rem,4vw,3.2rem) auto clamp(1.4rem,3vw,2rem); line-height: 1.45; letter-spacing: -0.005em; }

/* The Problem — horizontal cause → effect, 3D */
.problem { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: clamp(1rem, 3vw, 2.6rem); max-width: 1000px; margin: clamp(1.8rem, 4vw, 3rem) auto 0; }
.problem__causes { perspective: 1100px; display: flex; justify-content: center; }
.problem__causes-inner { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; transform-style: preserve-3d; transform: rotateY(16deg) rotateX(6deg); transition: transform 0.5s ease; }
.problem__causes-inner .eq-chip { background: #fff; box-shadow: 8px 11px 24px rgba(0,0,0,0.09); white-space: nowrap; }
.problem__causes-inner .eq-chip:nth-child(odd) { transform: translateZ(22px); }
.problem__arrow { color: var(--line-2); font-size: 1.6rem; }
.problem__effect { background: #161513; border-radius: 14px; padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem); box-shadow: 0 18px 44px rgba(0,0,0,0.20); }
.problem__effect .eq-emph__text { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.9rem); }
.problem__effect .eq-emph__line path { stroke: #fff; }
@media (max-width: 820px){
  .problem { grid-template-columns: 1fr; gap: 1.4rem; justify-items: center; }
  .problem__causes-inner { transform: none; }
  .problem__causes-inner .eq-chip:nth-child(odd) { transform: none; }
  .problem__arrow { transform: rotate(90deg); }
}

/* The Problem — editorial index (no panel, type + hairlines on the page) */
.pstage { position: relative; max-width: 980px; min-height: min(76vh, 680px); margin: clamp(1.5rem,4vw,2.5rem) auto 0; padding: clamp(2rem,5vw,4rem) clamp(0.5rem,2vw,1.5rem); display: flex; align-items: center; }
.problem2 { position: relative; width: 100%; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.4rem,6vw,5.5rem); align-items: center; text-align: left; }
.problem2.reveal { opacity: 1; transform: none; transition: none; }
.p2-causes { counter-reset: cause; list-style: none; margin: 0; padding: 0; }
.p2-causes li { counter-increment: cause; display: grid; grid-template-columns: auto 1fr; gap: clamp(0.9rem,2vw,1.4rem); align-items: baseline; padding: clamp(0.7rem,1.7vw,1.1rem) 0; border-top: 1px solid var(--line); font-family: var(--sans); font-weight: 300; font-size: clamp(0.95rem,1.25vw,1.15rem); color: #2B2620; opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.p2-causes li:last-child { border-bottom: 1px solid var(--line); }
.p2-causes li::before { content: "0" counter(cause); font-family: var(--serif); font-style: italic; font-size: 0.82em; color: var(--muted); letter-spacing: 0.02em; }
.problem2.in .p2-causes li { opacity: 1; transform: none; }
.p2-causes li:nth-child(1){ transition-delay:.04s } .p2-causes li:nth-child(2){ transition-delay:.10s } .p2-causes li:nth-child(3){ transition-delay:.16s } .p2-causes li:nth-child(4){ transition-delay:.22s } .p2-causes li:nth-child(5){ transition-delay:.28s } .p2-causes li:nth-child(6){ transition-delay:.34s }
html:not(.js) .p2-causes li { opacity: 1; transform: none; }
.p2-node { position: relative; }
.p2-lead { font-family: var(--sans); font-weight: 300; font-size: clamp(0.85rem,1vw,0.98rem); color: var(--muted); line-height: 1.55; margin: 0 0 clamp(0.9rem,1.8vw,1.3rem); }
.p2-node .eq-emph { margin-top: 0; }
.p2-node .eq-emph__text { color: #2B2620; font-size: clamp(1.7rem,3.2vw,2.7rem); line-height: 1.05; white-space: nowrap; }
@media (prefers-reduced-motion: reduce){ .p2-causes li { opacity: 1; transform: none; } }
@media (max-width: 760px){
  .pstage { min-height: 0; padding: clamp(2rem,8vw,3rem) 0; }
  .problem2 { text-align: center; }
  .p2-causes { text-align: left; max-width: 30rem; margin-inline: auto; }
  .p2-node { text-align: center; }
  .problem2 { grid-template-columns: 1fr; gap: 2rem; }
}
.eq-cond { margin: clamp(1.4rem,2.6vw,2rem) auto 0; text-align: center; }
.eq-cond span { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }

/* Our Story — chaptered Problem (01) / Solution (02) */
.chapter-label { text-align: center; }
.chapter-label .ch-num { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--muted); margin-right: 0.6rem; }
.chapter-label .ch-name { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); }
.ch-problem { margin-bottom: clamp(1.4rem,3vw,2rem); }
.solution-break { border-top: 1px solid var(--line); margin-top: clamp(3rem,6vw,5rem); padding-top: clamp(3rem,6vw,5rem); }
.solution-break .chapter-label { margin-bottom: clamp(1.4rem,2.6vw,1.9rem); }
.read-on { display: inline-block; margin-top: clamp(1.8rem,3vw,2.4rem); font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px; transition: opacity 0.2s ease; }
.read-on:hover { opacity: 0.55; }
#how-it-works { scroll-margin-top: 90px; }

/* Our Story / Home — opening cinematic film */
.cinema { position: relative; height: 100svh; background: #0a0908; overflow: hidden; --cin-top: clamp(72px, 10vh, 104px); }
.cinema__inner { position: relative; width: 100%; height: 100%; overflow: hidden; }
.cinema__video { position: absolute; top: var(--cin-top); left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% - var(--cin-top)); object-fit: cover; filter: saturate(0.32) contrast(1.22) brightness(0.55); transform: scale(1.04); transition: transform 9s ease, filter 2.2s ease; }
.cinema.is-ending .cinema__video { transform: scale(1.16); filter: saturate(0) contrast(1.12) brightness(0.32); transition: transform 3s ease, filter 3s ease; }
.cinema__grain { position: absolute; top: var(--cin-top); left: 0; right: 0; bottom: 0; z-index: 2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.09; mix-blend-mode: overlay; pointer-events: none; }
.cinema__vignette { position: absolute; top: var(--cin-top); left: 0; right: 0; bottom: 0; z-index: 2; background: radial-gradient(120% 112% at 50% 42%, transparent 44%, rgba(0,0,0,0.72) 100%); pointer-events: none; }
.cinema__bar { position: absolute; left: 0; right: 0; height: clamp(24px,5vh,52px); background: #000; z-index: 3; pointer-events: none; }
.cinema__bar--top { display: block; top: 0; height: var(--cin-top); background: #0a0908; }
.cinema__bar--bottom { bottom: 0; }
.cinema__gauge { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 5; background: rgba(255,255,255,0.12); }
.cinema__gauge i { display: block; height: 100%; width: 0; background: rgba(255,255,255,0.72); transition: width 0.12s linear; }
.cinema__caps { position: absolute; left: 0; right: 0; bottom: clamp(4.5rem,14vh,9rem); z-index: 4; text-align: center; padding: 0 var(--gutter); min-height: 2.4em; transition: opacity 0.6s ease; }
.cinema.is-ending .cinema__caps { opacity: 0; }
.ccap { position: absolute; left: 0; right: 0; margin: 0 auto; max-width: 30ch; font-family: var(--sans); font-style: italic; font-weight: 600; font-size: clamp(1.1rem,2.4vw,1.75rem); letter-spacing: -0.005em; color: #f1e64b; text-shadow: 0 2px 16px rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.7s ease; }
.ccap.is-active { opacity: 1; }
.cinema__out { position: absolute; inset: 0; z-index: 6; background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0.78) 0%, #000 62%); opacity: 0; pointer-events: none; transition: opacity 2.3s ease; }
.cinema.is-ending .cinema__out { opacity: 1; }
.cinema__logo { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding: 0 8vw; opacity: 0; transform: scale(0.965); pointer-events: none; transition: opacity 0.9s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.cinema__logo svg { width: min(560px, 74vw); height: auto; overflow: visible; }
.cinema__logo svg path { fill: #f4f4f2; }
.cinema.is-drawing .cinema__logo { opacity: 1; transform: scale(1); }
.cinema.is-drawing .cinema__logo svg path {
  fill: #f4f4f2; fill-opacity: 0; stroke: #f4f4f2; stroke-width: 1.1;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: ceDraw 1.05s cubic-bezier(.65,0,.35,1) forwards, ceFillIn 0.55s ease forwards, ceStrokeOut 0.5s ease forwards;
  animation-delay: calc(var(--i) * 0.045s), calc(var(--i) * 0.045s + 0.85s), calc(var(--i) * 0.045s + 1.05s);
}
@keyframes ceDraw { to { stroke-dashoffset: 0; } }
@keyframes ceFillIn { to { fill-opacity: 1; } }
@keyframes ceStrokeOut { to { stroke-width: 0; } }
@media (prefers-reduced-motion: reduce){ .cinema.is-drawing .cinema__logo svg path { animation: none; fill-opacity: 1; stroke-width: 0; } }
.cinema__scroll { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(1.5rem,3.5vh,2.4rem); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none; transition: opacity 0.5s ease; }
.cinema.is-ending .cinema__scroll { opacity: 0 !important; }
.cinema__scroll span { font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.cinema__scroll i { width: 1px; height: 42px; background: rgba(255,255,255,0.22); position: relative; overflow: hidden; }
.cinema__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 44%; background: rgba(255,255,255,0.9); animation: cinemaScrollDot 1.9s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes cinemaScrollDot { 0% { transform: translateY(-110%); } 62%,100% { transform: translateY(230%); } }
@media (prefers-reduced-motion: reduce){ .cinema__scroll i::after { animation: none; top: 28%; } .cinema__video { transition: filter 2.2s ease; } }
.eq-result { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem, 4.3vw, 3rem); line-height: 1.1; color: var(--ink); white-space: nowrap; margin-inline: auto; }
.eq-note { font-size: 0.95rem; color: var(--muted); max-width: 48ch; margin: clamp(2.2rem,4vw,2.8rem) auto 0; line-height: 1.7; }

/* Our Story — FAQ + one-line definition (clarity + AI discoverability) */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); text-align: left; }
.faq__item h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.faq__item p { font-size: 0.98rem; color: var(--body); line-height: 1.7; margin-top: 0.6rem; max-width: 46ch; }
.about-line { font-size: 0.92rem; line-height: 1.85; color: var(--muted); max-width: 860px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; text-align: center; }
@media (max-width: 880px){ .about-line { max-width: 90%; } }
@media (max-width: 760px){ .faq { grid-template-columns: 1fr; } }

/* Our Story — Word swap (scroll-scrubbed kinetic typography) */
.swap { background: #161513; color: #fff; position: relative; }
.swap__inner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.swap__label { position: absolute; top: clamp(2.4rem, 8vh, 5rem); left: 0; right: 0; text-align: center; padding-inline: var(--gutter); }
.swap__label .eyebrow { color: rgba(255,255,255,0.5); }
.swap__label p { font-family: var(--serif); font-style: normal; font-weight: 500; font-size: clamp(0.98rem, 1.4vw, 1.25rem); color: rgba(255,255,255,0.8); margin: 1.35rem auto 0; max-width: none; }
@media (min-width: 620px){ .swap__label p { white-space: nowrap; } }
.swap__stage { position: relative; width: 100%; height: 36vh; }
.swap__pair { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4em; opacity: 0; white-space: nowrap; }
.swap__pair span { font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 4.4vw, 4rem); line-height: 1; will-change: opacity, filter; }
.swap__pair .swap__arrow { font-family: var(--sans); font-weight: 400; color: rgba(255,255,255,0.38); font-size: clamp(0.9rem, 1.6vw, 1.5rem); }
.swap__neg { color: #6E6A61; }
.swap__pos { color: #FFFFFF; }
.swap__count { position: absolute; bottom: clamp(2.6rem, 7.5vh, 4.2rem); left: 0; right: 0; text-align: center; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.24em; color: rgba(255,255,255,0.6); }
.swap__bar { position: absolute; bottom: clamp(1.8rem, 4.8vh, 2.8rem); left: 50%; transform: translateX(-50%); width: 130px; height: 1px; background: rgba(255,255,255,0.16); }
.swap__bar i { position: absolute; left: 0; top: 0; height: 100%; background: #fff; width: 0; }
.swap.is-static { height: auto !important; }
.swap.is-static .swap__inner { position: static; height: auto; padding-block: clamp(4.5rem, 10vw, 8rem); }
.swap.is-static .swap__label { position: static; margin-bottom: 2.6rem; }
.swap.is-static .swap__stage { height: auto; display: grid; gap: 0.9rem; }
.swap.is-static .swap__pair { position: relative; opacity: 1; display: flex; gap: 1.3rem; justify-content: center; }
.swap.is-static .swap__pair span { font-size: clamp(1.6rem, 4vw, 2.8rem); }
.swap.is-static .swap__bar, .swap.is-static .swap__count { display: none; }

/* What a job changes — words on the actual pack, swapped by scroll */
.pack { position: relative; background: radial-gradient(62% 52% at 50% 45%, #2b2823 0%, #100f0d 72%); color: #fff; }
.pack__inner { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.pack .swap__label { position: absolute; top: clamp(1.5rem, 4.5vh, 3.2rem); left: 0; right: 0; }
.pack__tilt { perspective: 1300px; }
.pack__frame { position: relative; aspect-ratio: 1024 / 1536; height: min(76vh, 700px); container-type: size; transform-style: preserve-3d; transition: transform 0.5s ease; }
.pack__frame > img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pack__slot { position: absolute; top: 56.9%; left: 50%; }
.pack__words { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: 5cqw; white-space: nowrap; opacity: 0; will-change: opacity; }
.pack__words span { font-family: var(--serif); font-weight: 500; font-size: 3.7cqh; line-height: 1; }
.pack__neg { color: #6E6A61; filter: blur(0.42cqh); }
.pack__pos { color: #141210; }
.pack__scroll { position: absolute; right: clamp(1.4rem, 4vw, 3.2rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; transition: opacity 0.4s ease; }
.pack__scroll-txt { writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: 0.32em; font-family: var(--sans); font-size: 0.6rem; color: rgba(255,255,255,0.42); }
.pack__scroll-line { width: 1px; height: 56px; background: rgba(255,255,255,0.16); position: relative; overflow: hidden; }
.pack__scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 42%; background: rgba(255,255,255,0.85); animation: packScrollDot 1.9s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes packScrollDot { 0% { transform: translateY(-110%); } 60%,100% { transform: translateY(240%); } }
@media (prefers-reduced-motion: reduce){ .pack__scroll-line::after { animation: none; top: 30%; } }
@media (max-width: 620px){ .pack__scroll { display: none; } }
.pack.is-static .pack__scroll { display: none; }
.pack.is-static { height: auto !important; }
.pack.is-static .pack__inner { position: static; height: auto; padding-block: clamp(4rem, 9vw, 7rem); }
.pack.is-static .swap__label { position: static; margin-bottom: 2.4rem; }
.pack.is-static .swap__count, .pack.is-static .swap__bar { display: none; }
@media (prefers-reduced-motion: reduce){
  .cw-pos { filter: none; opacity: 1; transform: none; }
  .cw-neg, .cw-row.in .cw-neg { opacity: 0.5; filter: none; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px){
  .cols-3 { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-media { aspect-ratio: 4/3; }
  .media-row, .media-row.reverse { grid-template-columns: 1fr; }
  .media-row.reverse .media-row__img { order: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 760px){
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 78px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.6rem;
    transform: translateY(-120%); transition: transform 0.35s ease;
    box-shadow: 0 24px 40px rgba(0,0,0,0.05);
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { width: 100%; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
  .nav-links .btn { width: 100%; justify-content: center; margin-top: 0.9rem; padding: 0.95rem; }
  .nav-links a:not(.btn)::after { display: none; }
}

/* ==========================================================================
   Shop commerce + contrast note
   ========================================================================== */
.trustbar { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.trustbar div { padding: 1.2rem 1rem; text-align: center; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--line); }
.trustbar div:first-child { border-left: 0; }
.product__media { position: relative; }
.product__badge { position: absolute; top: 0; left: 0; z-index: 2; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.45rem 0.85rem; }
.bundle { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); align-items: stretch; }
.bundle__media { overflow: hidden; background: var(--off-2); }
.bundle__media img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.bundle__body { padding: clamp(2rem, 4vw, 3.8rem); display: flex; flex-direction: column; justify-content: center; gap: 0.8rem; }
.bundle__price { font-family: var(--serif); font-size: 1.7rem; color: var(--ink); }
.bundle__price small { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; margin-left: 0.5rem; }
.contrast__note { max-width: 50ch; margin: clamp(2.2rem, 4vw, 3rem) auto 0; font-family: var(--sans); font-size: 1rem; font-weight: 300; line-height: 1.78; color: var(--body); }

/* ---------- Our Story concept beats ---------- */
.forces { max-width: 54ch; margin: clamp(1.6rem, 4vw, 2.6rem) auto 0; display: grid; gap: 0.7rem; }
.forces__line { font-family: var(--serif); font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.45; color: var(--muted); margin: 0; }
.forces__concl { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.3; color: var(--ink); margin: clamp(1.8rem, 3.5vw, 2.6rem) auto 0; max-width: 42ch; }
.forces__concl em { font-style: italic; }
.metaphor { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.4; color: var(--ink); max-width: 38ch; margin-inline: auto; }
.metaphor strong { font-weight: 500; font-style: italic; display: block; margin-top: 0.9rem; }
.insight p + p { margin-top: 1.4rem; }
.insight .crux { color: var(--ink); }
@media (max-width: 760px){
  .trustbar { grid-template-columns: 1fr; }
  .trustbar div { border-left: 0; border-top: 1px solid var(--line); }
  .trustbar div:first-child { border-top: 0; }
  .bundle { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOP — glassmorphism (film still stage + frosted glass)
   ============================================================ */
.shop-glass { background:#0E0C0A; color:#EDEAE2; }
.site-header--glass { position:sticky; top:0; background:rgba(16,14,11,0.42); -webkit-backdrop-filter:blur(16px) saturate(120%); backdrop-filter:blur(16px) saturate(120%); border-bottom:1px solid rgba(255,255,255,0.10); }
.site-header--glass .nav-links a { color:#EDEAE2; }
.site-header--glass .nav-links a:not(.btn):not(.nav-cta)::after { background:#EDEAE2; }
.site-header--glass .brand img { filter:invert(1) brightness(2.2); }
.site-header--glass .nav-toggle span { background:#EDEAE2; }

.shop-stage { position:relative; background-image:linear-gradient(rgba(14,12,10,0.62), rgba(14,12,10,0.74)), url("../img/shop-stage.jpg"); background-size:cover; background-position:center; background-attachment:fixed; padding-block:clamp(3rem,8vw,7rem); }

.gcard { background:rgba(24,21,17,0.40); -webkit-backdrop-filter:blur(22px) saturate(115%); backdrop-filter:blur(22px) saturate(115%); border:1px solid rgba(244,241,234,0.16); border-radius:24px; box-shadow:0 24px 64px rgba(0,0,0,0.42); color:#F1EEE7; }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))) { .gcard { background:rgba(22,19,15,0.86); } }

.eyebrow--light { color:rgba(244,241,234,0.66); }
.eyebrow--light.center { display:block; text-align:center; }

.shop-hero-card { max-width:none; padding:clamp(1.8rem,3.5vw,2.8rem); margin-bottom:clamp(1.2rem,2.5vw,1.8rem); }
.shop-hero-card .eyebrow--light { display:block; margin-bottom:1.1rem; }
.shop-hero-card h1 { color:#FBFAF6; font-size:clamp(2.1rem,4.2vw,3.1rem); line-height:1.05; letter-spacing:-0.015em; }
.shop-hero-card h1 { max-width:16ch; }
.shop-hero-card p { color:rgba(241,238,231,0.82); font-weight:300; max-width:46ch; margin-top:1.1rem; font-size:clamp(1rem,1.3vw,1.15rem); }
.shop-hero-card .btn-row { margin-top:1.8rem; }

.gbtn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-family:var(--sans); font-size:0.72rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; padding:0.95rem 1.9rem; border-radius:999px; cursor:pointer; transition:transform 0.25s var(--ease), background 0.25s var(--ease); }
.gbtn--solid { background:#F4F1EA; color:#16140F; border:1px solid #F4F1EA; }
.gbtn--solid:hover { transform:translateY(-1px); background:#fff; }

.gshelf { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.5vw,1.8rem); }
.gprod { position:relative; display:flex; flex-direction:column; padding:1rem 1rem 1.4rem; }
.gprod__img { aspect-ratio:5/4; border-radius:16px; overflow:hidden; background:rgba(0,0,0,0.3); margin-bottom:1.3rem; }
.gprod__img img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease); }
.gprod:hover .gprod__img img { transform:scale(1.05); }
.gpill { align-self:flex-start; font-family:var(--sans); font-size:0.6rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:rgba(244,241,234,0.7); border:1px solid rgba(244,241,234,0.25); border-radius:999px; padding:0.4rem 0.85rem; }
.gprod h3, .gbundle h3 { color:#FBFAF6; font-size:clamp(1.4rem,2vw,1.7rem); margin-top:0.9rem; letter-spacing:-0.01em; }
.gnotes { font-family:var(--serif); font-style:italic; font-size:1rem; color:rgba(244,241,234,0.8); margin-top:0.4rem; }
.gdesc { font-size:0.92rem; font-weight:300; color:rgba(241,238,231,0.72); margin-top:0.6rem; line-height:1.55; flex:1; }
.gprice-row { display:flex; align-items:baseline; gap:0.7rem; margin-top:1.1rem; }
.gprice { font-family:var(--serif); font-size:clamp(1.6rem,2.2vw,2rem); color:#FBFAF6; font-feature-settings:"tnum" 1,"lnum" 1; }
.gunit { font-family:var(--sans); font-size:0.78rem; color:rgba(244,241,234,0.55); }
.gunit s { color:rgba(244,241,234,0.4); }
.gprod .gbtn, .gbundle .gbtn { margin-top:1.1rem; align-self:flex-start; }
.greassure { margin-top:0.8rem; font-family:var(--sans); font-size:0.66rem; letter-spacing:0.03em; color:rgba(244,241,234,0.45); }

.gbundle { display:grid; grid-template-columns:0.9fr 1.1fr; margin-top:clamp(1.1rem,2.5vw,1.8rem); overflow:hidden; }
.gbundle__img { overflow:hidden; min-height:240px; }
.gbundle__img img { width:100%; height:100%; object-fit:cover; }
.gbundle__body { padding:clamp(1.6rem,3vw,2.6rem); display:flex; flex-direction:column; justify-content:center; gap:0.2rem; }

.shop-info { background:#0E0C0A; padding-block:clamp(3.5rem,8vw,6rem); border-top:1px solid rgba(255,255,255,0.07); }
.trustline { text-align:center; font-family:var(--sans); font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,241,234,0.55); padding-bottom:clamp(2.5rem,5vw,4rem); border-bottom:1px solid rgba(255,255,255,0.08); }
.shop-impact-line { max-width:64ch; margin:clamp(2.5rem,5vw,4rem) auto; text-align:center; font-size:clamp(1.05rem,1.5vw,1.35rem); line-height:1.6; color:rgba(241,238,231,0.82); }
.shop-impact-line em { font-family:var(--serif); font-style:italic; color:#FBFAF6; }
.brew--dark { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); }
.brew--dark li { border-top:1px solid rgba(255,255,255,0.14); padding-top:1.3rem; }
.brew--dark .brew__num { font-family:var(--serif); font-style:italic; font-size:1.05rem; color:rgba(244,241,234,0.5); }
.brew--dark h3 { color:#F4F1EA; margin-top:0.4rem; font-size:clamp(1.1rem,1.6vw,1.35rem); }
.brew--dark p { color:rgba(241,238,231,0.65); margin-top:0.5rem; font-size:0.92rem; }
.help-row { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,2rem); margin-top:clamp(3rem,6vw,4.5rem); }
.help-card { border:1px solid rgba(255,255,255,0.12); border-radius:18px; padding:1.8rem; background:rgba(255,255,255,0.02); }
.help-card .eyebrow--light { display:block; margin-bottom:0.7rem; }
.help-card h4 { font-family:var(--serif); color:#F4F1EA; font-size:1.2rem; }
.help-card p { color:rgba(241,238,231,0.66); font-size:0.9rem; margin-top:0.5rem; }
.help-card a { color:#F4F1EA; border-bottom:1px solid rgba(244,241,234,0.4); }

@media (max-width:760px){ .gshelf, .gbundle, .brew--dark, .help-row { grid-template-columns:1fr; } .shop-stage { background-attachment:scroll; } }
@media (prefers-reduced-motion:reduce){ .gprod:hover .gprod__img img { transform:none; } }
.shop-stage .wrap { max-width:1080px; margin-inline:auto; }

/* ---- glass extension: shared stage + dark glass form (Contact, etc.) ---- */
.glass-stage { padding-block:clamp(3rem,8vw,7rem); }
.contact-stage { background:radial-gradient(120% 90% at 50% -10%, #1B1712, #0E0C0A 70%); }
.glass-hero { max-width:640px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.glass-hero .eyebrow--light { display:block; margin-bottom:1.1rem; }
.glass-hero h1 { color:#FBFAF6; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.05; letter-spacing:-0.015em; }
.glass-hero p { color:rgba(241,238,231,0.8); font-weight:300; max-width:48ch; margin:1.1rem auto 0; font-size:clamp(1rem,1.3vw,1.15rem); }
.gpad { padding:clamp(1.5rem,3vw,2.2rem); }
.gcard h3 { color:#FBFAF6; }
.contact-close { text-align:center; }
.form--glass label { color:rgba(244,241,234,0.7); font-family:var(--sans); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; display:block; margin-bottom:0.5rem; }
.form--glass input, .form--glass select, .form--glass textarea { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(244,241,234,0.18); border-radius:12px; color:#F1EEE7; font-family:var(--sans); font-size:0.95rem; padding:0.8rem 0.9rem; }
.form--glass textarea { min-height:130px; resize:vertical; }
.form--glass input:focus, .form--glass select:focus, .form--glass textarea:focus { outline:none; border-color:rgba(244,241,234,0.5); background:rgba(255,255,255,0.08); }
.form--glass option { color:#16140F; }
.form--glass .field { margin-bottom:1.1rem; }
.form--glass .row-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form--glass .row-2 .field { margin-bottom:0; }
@media (max-width:760px){ .form--glass .row-2 { grid-template-columns:1fr; } }

/* featured product (center-stage decoy) */
.gprod--featured { border-color:rgba(244,241,234,0.42); box-shadow:0 30px 72px rgba(0,0,0,0.55); }
.gflag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:#F4F1EA; color:#16140F; font-family:var(--sans); font-size:0.56rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; padding:0.34rem 0.9rem; border-radius:999px; white-space:nowrap; }
.gpill--solid { background:#F4F1EA; color:#16140F; border-color:#F4F1EA; }
@media (max-width:880px){ .gshelf { grid-template-columns:1fr; } .gprod--featured { order:-1; } }

/* hero value points (replaces redundant scroll CTA) */
.hero-feats { display:flex; flex-wrap:wrap; gap:0.55rem 1.7rem; margin-top:1.7rem; list-style:none; padding:0; }
.hero-feats li { position:relative; font-family:var(--sans); font-size:0.7rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,241,234,0.6); }
.hero-feats li:not(:last-child)::after { content:"·"; position:absolute; right:-0.95rem; color:rgba(244,241,234,0.3); }

/* pack-size toggle (drip bags 5/10/15) */
.gsize { display:flex; align-items:center; gap:0.4rem; margin-top:0.9rem; flex-wrap:wrap; }
.gsize__btn { font-family:var(--sans); font-size:0.8rem; font-weight:500; color:rgba(244,241,234,0.72); background:rgba(255,255,255,0.05); border:1px solid rgba(244,241,234,0.2); border-radius:10px; padding:0.4rem 0.8rem; cursor:pointer; transition:background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.gsize__btn:hover { border-color:rgba(244,241,234,0.45); }
.gsize__btn.is-active { background:#F4F1EA; color:#16140F; border-color:#F4F1EA; }
.gsize__unit { font-family:var(--sans); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(244,241,234,0.45); margin-left:0.25rem; }

/* ---- For Business — glass ---- */
.biz-stage { background-image:linear-gradient(rgba(14,12,10,0.66), rgba(14,12,10,0.80)), url("../img/how-it-works.jpg") !important; }
.gbtn--ghost { background:transparent; color:#F4F1EA; border:1px solid rgba(244,241,234,0.5); }
.gbtn--ghost:hover { background:rgba(255,255,255,0.08); }
.biz-model { text-align:center; padding:clamp(1.5rem,3vw,2.2rem); margin:clamp(1.2rem,2.5vw,1.8rem) 0; }
.biz-model__flow { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0.5rem 1rem; }
.biz-model__flow span { font-family:var(--serif); font-size:clamp(1.05rem,1.8vw,1.45rem); color:#F4F1EA; }
.biz-model__flow i { color:rgba(244,241,234,0.45); font-style:normal; }
.biz-model p { margin-top:1rem; color:rgba(241,238,231,0.6); font-size:0.92rem; max-width:62ch; margin-inline:auto; }
.biz-supply { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.1rem,2.5vw,1.8rem); }
.biz-two { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.1rem,2.5vw,1.8rem); }
.biz-two .brew__num { font-family:var(--serif); font-style:italic; font-size:1.1rem; color:rgba(244,241,234,0.5); }
.biz-two h3 { color:#FBFAF6; margin-top:0.5rem; }
.biz-esg { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:center; }
.biz-stats { list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.biz-stats li { border-left:1px solid rgba(244,241,234,0.22); padding-left:1rem; }
.biz-stats span { display:block; font-family:var(--serif); font-size:clamp(1.4rem,2.2vw,1.9rem); color:#FBFAF6; }
.biz-stats small { color:rgba(241,238,231,0.6); font-size:0.85rem; }
.biz-enquiry { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(1.5rem,3vw,3rem); align-items:start; }
@media (max-width:760px){ .biz-supply, .biz-two, .biz-esg, .biz-enquiry { grid-template-columns:1fr; } }

/* ============================================================
   LIGHT GLASS — For Business (white bg, frosted white cards)
   ============================================================ */
.lg-page { background:linear-gradient(180deg,#FAF8F4 0%,#EFEAE1 100%); background-attachment:fixed; color:var(--body); }
.site-header--glasslight { position:sticky; top:0; background:rgba(250,248,244,0.72); -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%); border-bottom:1px solid rgba(28,26,23,0.08); }
.lgcard { background:rgba(255,255,255,0.55); -webkit-backdrop-filter:blur(16px) saturate(125%); backdrop-filter:blur(16px) saturate(125%); border:1px solid rgba(255,255,255,0.85); box-shadow:0 18px 44px rgba(28,26,23,0.10); border-radius:22px; }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .lgcard { background:rgba(255,255,255,0.92); } }
.lgbtn { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--sans); font-size:0.72rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; padding:0.95rem 1.9rem; border-radius:999px; background:var(--ink); color:#fff; border:1px solid var(--ink); cursor:pointer; transition:transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.lgbtn:hover { transform:translateY(-1px); opacity:0.9; }
.lgbtn--ghost { background:transparent; color:var(--ink); border:1px solid rgba(28,26,23,0.28); }
.lgbtn--ghost:hover { background:rgba(28,26,23,0.05); transform:none; opacity:1; }

.lg-hero__grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.lg-hero__card { padding:clamp(2rem,4vw,3rem); }
.lg-hero__card h1 { font-size:clamp(2rem,4vw,3rem); line-height:1.08; letter-spacing:-0.015em; }
.lg-hero__card .lead { margin-top:1rem; max-width:46ch; }
.lg-hero__img img { border-radius:20px; box-shadow:0 18px 44px rgba(28,26,23,0.14); aspect-ratio:4/3; object-fit:cover; width:100%; }

.lg-model { padding:clamp(1.6rem,3vw,2.4rem); text-align:center; }
.lg-model__flow { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0.5rem 1rem; }
.lg-model__flow span { font-family:var(--serif); font-size:clamp(1.1rem,1.8vw,1.5rem); color:var(--ink); }
.lg-model__flow i { color:var(--muted); font-style:normal; }
.lg-model p { margin-top:1rem; color:var(--body); font-size:0.95rem; max-width:60ch; margin-inline:auto; }

.lg-supply { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.1rem,2.5vw,1.8rem); }
.lg-supply .lgcard { overflow:hidden; }
.lg-supply__img { aspect-ratio:16/10; overflow:hidden; }
.lg-supply__img img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease); }
.lg-supply .lgcard:hover .lg-supply__img img { transform:scale(1.04); }
.lg-supply__body { padding:1.6rem; }

.lg-two { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.1rem,2.5vw,1.8rem); }
.lg-two .lgcard { padding:clamp(1.6rem,3vw,2.2rem); }
.lg-two .num, .lg-steps .num { font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1.1rem; }

.lg-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.5vw,1.8rem); }
.lg-steps .lgcard { padding:clamp(1.6rem,3vw,2.2rem); }
.lg-steps__node { width:46px; height:46px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink); }
.lg-steps__node svg { width:24px; height:24px; }

.lg-esg { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:center; padding:clamp(2rem,4vw,3rem); }
.lg-stats { list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.lg-stats li { border-left:1px solid var(--line-2); padding-left:1rem; }
.lg-stats span { display:block; font-family:var(--serif); font-size:clamp(1.4rem,2.2vw,1.9rem); color:var(--ink); }
.lg-stats small { color:var(--muted); font-size:0.85rem; }

.lg-enquiry { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(1.5rem,3vw,3rem); align-items:start; }
@media (max-width:820px){ .lg-hero__grid, .lg-supply, .lg-two, .lg-steps, .lg-esg, .lg-enquiry { grid-template-columns:1fr; } }

/* For Business — clean white + tighter scale (overrides) */
.lg-page { background:#FFFFFF; }
.lgcard { background:rgba(255,255,255,0.72); border:1px solid var(--line); box-shadow:0 10px 30px rgba(20,18,15,0.06); border-radius:18px; }
.lg-page .section { padding-block:clamp(3rem,6vw,4.6rem); }
.lg-page .section--tight { padding-block:clamp(2.4rem,5vw,3.4rem); }
.lg-page h2 { font-size:clamp(1.55rem,2.6vw,2.05rem); letter-spacing:-0.01em; }
.lg-page h3 { font-size:clamp(1.05rem,1.5vw,1.25rem); }
.lg-page .lead { font-size:clamp(0.98rem,1.3vw,1.12rem); line-height:1.6; }
.lg-page p { font-size:0.96rem; }
.lg-hero__card { padding:clamp(1.5rem,3vw,2.1rem); }
.lg-hero__card h1 { font-size:clamp(1.7rem,3vw,2.25rem); }
.lg-hero__card .lead { margin-top:0.9rem; }
.lg-model { padding:clamp(1.4rem,2.8vw,2rem); }
.lg-model__flow span { font-size:clamp(1rem,1.6vw,1.28rem); }
.lg-supply__body { padding:1.4rem; }
.lg-supply__img { aspect-ratio:16/9; }
.lg-two .lgcard, .lg-steps .lgcard, .lg-enquiry .lgcard { padding:clamp(1.3rem,2.5vw,1.8rem); }
.lg-esg { padding:clamp(1.6rem,3vw,2.3rem); }
.lg-stats span { font-size:clamp(1.25rem,2vw,1.6rem); }
.lgbtn { padding:0.8rem 1.6rem; font-size:0.68rem; }

/* For Business — surface rhythm + definition (white / tint / one dark band) */
.lgcard { box-shadow:0 14px 38px rgba(20,18,15,0.09); }
.lg-page .lg-tint { background:#F4F4F3; }
.lg-page .lg-dark { background:#16140F; }
.lg-dark .eyebrow { color:rgba(244,241,234,0.6); }
.lg-dark h2, .lg-dark h3 { color:#FBFAF6; }
.lg-dark p { color:rgba(244,241,234,0.82); }
.lg-dark .lgcard { background:rgba(255,255,255,0.05); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border:1px solid rgba(244,241,234,0.16); box-shadow:0 22px 56px rgba(0,0,0,0.34); }
.lg-dark .lg-stats li { border-left-color:rgba(244,241,234,0.22); }
.lg-dark .lg-stats span { color:#FBFAF6; }
.lg-dark .lg-stats small { color:rgba(244,241,234,0.62); }
.lg-dark .lgbtn--ghost { color:#F4F1EA; border-color:rgba(244,241,234,0.4); }
.lg-dark .lgbtn--ghost:hover { background:rgba(255,255,255,0.08); }
/* a touch more presence for section titles (without going oversized) */
.lg-page h2 { font-size:clamp(1.65rem,2.9vw,2.25rem); }

/* For Business — minimal infographics (node flow + timeline + big numerals) */
.lg-flow { display:grid; grid-template-columns:repeat(4,1fr); margin-top:1.4rem; }
.lg-flow__step { position:relative; text-align:center; }
.lg-flow__step::before { content:""; position:absolute; top:23px; left:-50%; width:100%; height:2px; background:var(--line-2); z-index:0; }
.lg-flow__step:first-child::before { display:none; }
.lg-flow__dot { position:relative; z-index:1; width:46px; height:46px; border-radius:50%; background:#fff; border:1.5px solid var(--line-2); display:flex; align-items:center; justify-content:center; margin:0 auto 0.85rem; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--muted); box-shadow:0 6px 16px rgba(20,18,15,0.10); }
.lg-flow__step.is-end .lg-flow__dot { background:var(--ink); color:#fff; border-color:var(--ink); }
.lg-flow__step span { display:block; font-family:var(--serif); font-size:clamp(0.95rem,1.4vw,1.15rem); color:var(--ink); padding:0 0.4rem; }
@media (max-width:680px){ .lg-flow { grid-template-columns:1fr; gap:0.9rem; } .lg-flow__step { display:flex; align-items:center; gap:0.9rem; text-align:left; } .lg-flow__step::before { display:none; } .lg-flow__dot { margin:0; flex:none; } }

.lg-timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem); position:relative; }
.lg-timeline__track { position:absolute; top:33px; left:16.66%; right:16.66%; height:2px; background:var(--line-2); }
.lg-timeline__step { position:relative; text-align:center; }
.lg-timeline__node { width:66px; height:66px; border-radius:50%; background:#fff; border:1.5px solid var(--line-2); display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; color:var(--ink); box-shadow:0 8px 22px rgba(20,18,15,0.10); position:relative; z-index:1; }
.lg-timeline__node svg { width:28px; height:28px; }
.lg-timeline .num { font-family:var(--serif); font-style:italic; color:var(--muted); font-size:1rem; }
.lg-timeline h3 { margin-top:0.3rem; }
.lg-timeline p { margin-top:0.5rem; max-width:34ch; margin-inline:auto; }
@media (max-width:680px){ .lg-timeline { grid-template-columns:1fr; gap:2.4rem; } .lg-timeline__track { display:none; } }

.lg-two .num { font-family:var(--serif); font-style:italic; font-size:clamp(1.7rem,2.6vw,2.3rem); color:var(--muted); line-height:1; }

/* For Business HERO — refined / perfume-luxe (airy, card-less) */
.biz-hero { padding-block:clamp(3.5rem,8vw,7rem); }
.biz-hero__grid { display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(2rem,6vw,5.5rem); align-items:center; }
.biz-hero__eyebrow { display:block; font-family:var(--sans); font-size:0.64rem; font-weight:500; letter-spacing:0.42em; text-transform:uppercase; color:var(--muted); margin-bottom:1.8rem; }
.biz-hero__title { font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3.3vw,2.95rem); line-height:1.18; letter-spacing:-0.005em; color:var(--ink); max-width:18ch; }
.biz-hero__lead { margin-top:1.5rem; max-width:42ch; color:var(--body); font-weight:300; line-height:1.7; font-size:clamp(0.98rem,1.2vw,1.1rem); }
.biz-hero__cta { display:flex; gap:2.2rem; margin-top:2.5rem; flex-wrap:wrap; }
.biz-link { font-family:var(--sans); font-size:0.7rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink); padding-bottom:7px; border-bottom:1px solid var(--ink); display:inline-flex; gap:0.7rem; align-items:center; transition:opacity 0.25s ease; }
.biz-link span { transition:transform 0.3s var(--ease); }
.biz-link:hover span { transform:translateX(5px); }
.biz-link--muted { color:var(--muted); border-bottom-color:var(--line-2); }
.biz-hero__img img { width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:4px; box-shadow:0 34px 72px rgba(20,18,15,0.16); }
@media (max-width:820px){ .biz-hero__grid { grid-template-columns:1fr; } .biz-hero__img { order:-1; } .biz-hero__title { max-width:none; } }

/* For Business HERO · campaign overlay (Option C) — serif weight 400, unified */
.biz-cinehero { position:relative; min-height:clamp(540px,86vh,820px); display:flex; align-items:flex-end; }
.biz-cinehero__img { position:absolute; inset:0; }
.biz-cinehero__img img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.84) brightness(0.94); }
.biz-cinehero__scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,11,9,0.14) 0%, rgba(12,11,9,0.05) 40%, rgba(12,11,9,0.66) 100%); }
.biz-cinehero__inner { position:relative; z-index:2; width:100%; padding:clamp(3rem,7vw,6rem) 0 clamp(2.6rem,6vw,4.6rem); }
.biz-cinehero__eyebrow { display:block; font-family:var(--sans); font-size:0.64rem; font-weight:500; letter-spacing:0.42em; text-transform:uppercase; color:rgba(255,255,255,0.74); margin-bottom:1.6rem; }
.biz-cinehero__title { font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.7vw,3.15rem); line-height:1.16; letter-spacing:-0.008em; color:#fff; margin:0; max-width:42ch; text-shadow:0 1px 30px rgba(0,0,0,0.22); }
.biz-cinehero__lead { margin-top:1.4rem; max-width:46ch; color:rgba(255,255,255,0.88); font-weight:300; line-height:1.7; font-size:clamp(1rem,1.2vw,1.12rem); }
.biz-cinehero__cta { display:flex; gap:2.2rem; margin-top:2.3rem; flex-wrap:wrap; }
.biz-link--onimg { color:#fff; border-bottom-color:#fff; }
.biz-link--onimg.biz-link--muted { color:rgba(255,255,255,0.72); border-bottom-color:rgba(255,255,255,0.45); }

/* ============================================================
   PRODUCT DETAIL PAGE (PDP) — dark glass, matches shop
   ============================================================ */
.pdp-stage .wrap { max-width:1120px; }
.breadcrumb { font-family:var(--sans); font-size:0.64rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:rgba(244,241,234,0.5); margin-bottom:clamp(1.4rem,3vw,2.2rem); display:flex; gap:0.6rem; align-items:center; }
.breadcrumb a { color:rgba(244,241,234,0.7); transition:color 0.2s var(--ease); }
.breadcrumb a:hover { color:#F4F1EA; }
.breadcrumb span { color:rgba(244,241,234,0.3); }
.breadcrumb b { color:#F4F1EA; font-weight:500; }

.pdp-grid { display:grid; grid-template-columns:1.02fr 0.98fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:start; }
.pdp-gallery { position:sticky; top:90px; }
.pdp-gallery__main { aspect-ratio:4/5; border-radius:20px; overflow:hidden; background:rgba(0,0,0,0.32); border:1px solid rgba(244,241,234,0.14); }
.pdp-gallery__main img { width:100%; height:100%; object-fit:cover; transition:opacity 0.35s var(--ease); }
.pdp-thumbs { display:flex; gap:0.6rem; margin-top:0.8rem; flex-wrap:wrap; }
.pdp-thumb { width:clamp(58px,8vw,74px); aspect-ratio:1/1; border-radius:12px; overflow:hidden; border:1px solid rgba(244,241,234,0.18); background:rgba(0,0,0,0.3); cursor:pointer; padding:0; transition:border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.pdp-thumb img { width:100%; height:100%; object-fit:cover; }
.pdp-thumb:hover { border-color:rgba(244,241,234,0.5); transform:translateY(-2px); }
.pdp-thumb.is-active { border-color:#F4F1EA; box-shadow:0 0 0 1px #F4F1EA inset; }

.pdp-buy { padding:clamp(1.6rem,3vw,2.4rem); }
.pdp-buy h1 { color:#FBFAF6; font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.04; letter-spacing:-0.015em; margin-top:0.9rem; }
.pdp-buy .gnotes { font-size:1.08rem; margin-top:0.6rem; }
.pdp-buy .gdesc { flex:none; margin-top:0.9rem; font-size:0.96rem; }
.pdp-buy .gprice-row { margin-top:1.4rem; }
.pdp-buy .gbtn { margin-top:1.3rem; align-self:stretch; width:100%; }
.pdp-buy .greassure { text-align:center; }
.pdp-buy .gsize__unit { margin-left:0.4rem; }

.pdp-spec { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:clamp(2.6rem,5vw,4rem); background:rgba(244,241,234,0.12); border:1px solid rgba(244,241,234,0.12); border-radius:16px; overflow:hidden; }
.pdp-spec__item { background:rgba(20,17,13,0.55); padding:1.3rem 1.4rem; }
.pdp-spec__item .eyebrow--light { display:block; font-size:0.58rem; margin-bottom:0.5rem; color:rgba(244,241,234,0.5); }
.pdp-spec__item p { font-family:var(--serif); color:#FBFAF6; font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.2; }
.pdp-spec__item small { display:block; font-family:var(--sans); color:rgba(241,238,231,0.55); font-size:0.82rem; margin-top:0.35rem; line-height:1.45; }

.pdp-section-head { text-align:center; max-width:60ch; margin:clamp(3.5rem,7vw,6rem) auto clamp(1.8rem,4vw,2.8rem); }
.pdp-section-head .eyebrow--light { display:block; margin-bottom:1rem; }
.pdp-section-head h2 { color:#FBFAF6; font-size:clamp(1.8rem,3.4vw,2.6rem); }
.pdp-section-head p { color:rgba(241,238,231,0.7); font-weight:300; margin-top:0.9rem; }

@media (max-width:880px){
  .pdp-grid { grid-template-columns:1fr; }
  .pdp-gallery { position:static; }
  .pdp-spec { grid-template-columns:1fr; }
}

/* shop card → detail link */
.pdp-detail-link { display:inline-block; margin-top:0.8rem; font-family:var(--sans); font-size:0.68rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,241,234,0.72); border-bottom:1px solid rgba(244,241,234,0.35); padding-bottom:3px; transition:color 0.2s var(--ease), border-color 0.2s var(--ease); }
.pdp-detail-link:hover { color:#F4F1EA; border-color:#F4F1EA; }

/* PDP — what's included (Starter Set) */
.pdp-included { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.5vw,1.6rem); }
.pdp-inc { display:flex; gap:1.1rem; align-items:center; padding:1rem; transition:border-color 0.25s var(--ease), transform 0.25s var(--ease); }
.pdp-inc:hover { border-color:rgba(244,241,234,0.4); transform:translateY(-2px); }
.pdp-inc__img { flex:0 0 clamp(96px,16vw,128px); aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:rgba(0,0,0,0.3); }
.pdp-inc__img img { width:100%; height:100%; object-fit:cover; }
.pdp-inc__body { flex:1; }
.pdp-inc__body .eyebrow--light { display:block; font-size:0.56rem; margin-bottom:0.4rem; color:rgba(244,241,234,0.5); }
.pdp-inc__body h3 { color:#FBFAF6; font-size:clamp(1.2rem,1.8vw,1.5rem); }
.pdp-inc__body p { color:rgba(241,238,231,0.66); font-size:0.88rem; margin-top:0.4rem; line-height:1.5; }
.pdp-inc .pdp-detail-link { margin-top:0.7rem; }
@media (max-width:760px){ .pdp-included { grid-template-columns:1fr; } }

/* ============================================================
   CART — header toggle + slide-out drawer
   ============================================================ */
/* ===== Cart — Option C: floating liquid-glass card ===== */
.cart-toggle { position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; margin-left:0.6rem; border-radius:999px; background:transparent; border:none; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background 0.2s var(--ease); }
.cart-toggle:hover { background:rgba(128,128,128,0.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.cart-toggle svg { display:block; opacity:0.9; transition:opacity 0.2s var(--ease); }
.cart-toggle:hover svg { opacity:1; }
.cart-count { position:absolute; top:2px; right:0; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--ink); color:#fff; font-family:var(--sans); font-size:0.62rem; font-weight:600; line-height:17px; text-align:center; }
.site-header--hero:not(.scrolled) .cart-count { background:#F4F1EA; color:#16140F; }
.cart-count.is-empty { display:none; }

.cart-overlay { position:fixed; inset:0; background:rgba(8,7,5,0.5); opacity:0; visibility:hidden; transition:opacity 0.3s var(--ease), visibility 0.3s var(--ease); z-index:200; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.cart-overlay.is-open { opacity:1; visibility:visible; }
body.cart-locked { overflow:hidden; }

.cart-drawer { position:fixed; top:16px; right:16px; bottom:16px; width:min(412px, calc(100vw - 32px)); display:flex; flex-direction:column; border-radius:26px; overflow:hidden; background:linear-gradient(180deg, rgba(26,22,17,0.58), rgba(14,12,9,0.66)); -webkit-backdrop-filter:blur(40px) saturate(160%); backdrop-filter:blur(40px) saturate(160%); border:1px solid rgba(255,255,255,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), 0 40px 100px -20px rgba(0,0,0,0.7); color:#F1EEE7; transform:translateX(calc(100% + 24px)); transition:transform 0.4s var(--ease); z-index:201; }
.cart-drawer.is-open { transform:none; }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))) { .cart-drawer { background:rgba(16,13,10,0.97); } }
@media (max-width:460px){ .cart-drawer { top:0; right:0; bottom:0; width:100vw; border-radius:0; transform:translateX(100%); } }

.cart-head { display:flex; align-items:center; justify-content:space-between; padding:1.4rem 1.5rem; border-bottom:1px solid rgba(244,241,234,0.12); }
.cart-head .eyebrow--light { color:rgba(244,241,234,0.7); }
.cart-close { background:none; border:none; color:rgba(244,241,234,0.7); font-size:1.7rem; line-height:1; cursor:pointer; padding:0 0.2rem; transition:color 0.2s var(--ease); }
.cart-close:hover { color:#F4F1EA; }

.cart-body { flex:1; overflow-y:auto; padding:0.9rem 1.1rem; }
.cart-empty { text-align:center; color:rgba(241,238,231,0.6); font-size:0.95rem; padding:3rem 1rem; line-height:1.8; }
.cart-empty a { color:#F4F1EA; border-bottom:1px solid rgba(244,241,234,0.4); }

.cart-item { display:grid; grid-template-columns:58px 1fr auto; gap:0.85rem; align-items:center; padding:0.85rem; margin-bottom:0.6rem; border-radius:14px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07); }
.cart-item__img { width:58px; height:58px; border-radius:11px; overflow:hidden; background:rgba(0,0,0,0.3); }
.cart-item__img img { width:100%; height:100%; object-fit:cover; }
.cart-item__info h4 { font-family:var(--serif); color:#FBFAF6; font-size:1.02rem; font-weight:500; }
.cart-item__var { display:block; font-family:var(--sans); font-size:0.74rem; color:rgba(241,238,231,0.5); margin-top:0.15rem; }
.cart-step { display:inline-flex; align-items:center; gap:0.4rem; margin-top:0.55rem; border:1px solid rgba(244,241,234,0.22); border-radius:8px; padding:0.15rem 0.25rem; background:rgba(255,255,255,0.04); }
.cart-step button { width:24px; height:24px; background:none; border:none; color:rgba(244,241,234,0.8); font-size:1rem; line-height:1; cursor:pointer; border-radius:5px; transition:background 0.18s var(--ease); }
.cart-step button:hover { background:rgba(255,255,255,0.1); }
.cart-step span { min-width:18px; text-align:center; font-family:var(--sans); font-size:0.85rem; color:#F1EEE7; }
.cart-item__right { text-align:right; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; align-self:stretch; }
.cart-item__price { font-family:var(--serif); color:#FBFAF6; font-size:1.02rem; font-feature-settings:"tnum" 1,"lnum" 1; }
.cart-item__rm { background:none; border:none; color:rgba(241,238,231,0.4); font-family:var(--sans); font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; padding:0; transition:color 0.2s var(--ease); }
.cart-item__rm:hover { color:rgba(255,150,140,0.9); }

.cart-foot { padding:1.2rem 1.5rem 1.5rem; border-top:1px solid rgba(244,241,234,0.12); background:rgba(0,0,0,0.18); }
.cart-ship { font-family:var(--sans); font-size:0.78rem; color:rgba(241,238,231,0.62); text-align:center; margin-bottom:0.9rem; }
.cart-ship b { color:#F4F1EA; }
.cart-ship--ok { color:rgba(190,230,190,0.85); }
.cart-sub { display:flex; justify-content:space-between; align-items:baseline; font-family:var(--serif); color:#FBFAF6; font-size:1.2rem; margin-bottom:1rem; }
.cart-sub span:first-child { font-family:var(--sans); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(241,238,231,0.55); }
.cart-checkout { width:100%; }
.cart-drawer .cart-checkout.gbtn--solid { background:rgba(255,255,255,0.95); color:#16140F; border-color:rgba(255,255,255,0.95); }
.cart-drawer .cart-checkout.gbtn--solid:hover { background:#fff; }
.cart-note { font-family:var(--sans); font-size:0.56rem; color:rgba(241,238,231,0.45); text-align:center; margin:0.9rem auto 0; max-width:none; line-height:1.58; letter-spacing:0.01em; text-wrap:balance; }
.cart-err { font-family:var(--sans); font-size:0.8rem; color:rgba(255,180,170,0.95); text-align:center; margin-top:0.9rem; line-height:1.55; }
.cart-err a { color:#F4F1EA; border-bottom:1px solid rgba(244,241,234,0.4); }

@media (max-width:760px){ .cart-toggle { margin-left:0.2rem; } }

/* keep nav-links + cart grouped at the right of the bar */
.nav-links { margin-left:auto; }
.cart-toggle { order:2; }
@media (max-width:760px){ .cart-toggle { margin-left:auto; order:0; } }

/* shop with two SKUs — centre the pair on desktop */
@media (min-width:881px){ .gshelf--two { grid-template-columns:repeat(2,1fr); max-width:780px; margin-inline:auto; } }
/* non-clickable "included" card (kettle is bundle-only) */
.pdp-inc--static { cursor:default; }
.pdp-inc--static:hover { transform:none; border-color:rgba(244,241,234,0.16); }

/* PDP — buy-panel key benefits */
.pdp-feats { list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:0.55rem; }
.pdp-feats li { position:relative; padding-left:1.5rem; font-family:var(--sans); font-size:0.88rem; font-weight:300; line-height:1.5; color:rgba(241,238,231,0.82); }
.pdp-feats li::before { content:""; position:absolute; left:0; top:0.5em; width:7px; height:7px; border-radius:50%; background:#F4F1EA; opacity:0.85; transform:translateY(-50%); }

/* PDP — small field label (e.g. "Pack size") */
.pdp-field-label { display:block; font-family:var(--sans); font-size:0.6rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:rgba(244,241,234,0.5); margin-top:1.3rem; }
.pdp-buy .pdp-field-label + .gsize { margin-top:0.55rem; }

/* PDP — single centred cross-sell card */
.pdp-included--one { grid-template-columns:1fr; max-width:520px; margin-inline:auto; }

/* PDP — brew steps as illustrated timeline (dark, matches site timeline) */
.brew--steps { position:relative; }
.brew--steps::before { content:""; position:absolute; top:clamp(27px,3vw,34px); left:16.66%; right:16.66%; height:1px; background:rgba(244,241,234,0.22); z-index:0; }
.brew--steps li { border-top:none; padding-top:0; text-align:center; position:relative; z-index:1; }
.brew__node { width:clamp(56px,6.5vw,68px); height:clamp(56px,6.5vw,68px); margin:0 auto 1.2rem; border:1px solid rgba(244,241,234,0.3); border-radius:50%; background:#16130F; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; transition:border-color 0.3s var(--ease); }
.brew--steps li:hover .brew__node { border-color:rgba(244,241,234,0.6); }
.brew__node svg { width:clamp(24px,2.7vw,30px); height:auto; stroke:#F4F1EA; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:0.92; }
.brew--steps .brew__num { display:block; font-family:var(--serif); font-style:italic; font-size:0.95rem; color:rgba(244,241,234,0.5); }
.brew--steps h3 { margin-top:0.3rem; }
.brew--steps p { max-width:30ch; margin-inline:auto; }
@media (max-width:760px){ .brew--steps::before { display:none; } .brew__node { margin-bottom:0.9rem; } }

/* PDP — box quantity stepper */
.pdp-qty { display:inline-flex; align-items:center; gap:0.15rem; margin-top:0.55rem; padding:0.25rem 0.3rem; border:1px solid rgba(244,241,234,0.2); border-radius:12px; background:rgba(255,255,255,0.04); }
.pdp-qty__btn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:none; border:none; color:rgba(244,241,234,0.85); font-size:1.25rem; line-height:1; cursor:pointer; border-radius:8px; transition:background 0.18s var(--ease); }
.pdp-qty__btn:hover { background:rgba(255,255,255,0.08); }
.pdp-qty__val { min-width:2.4rem; text-align:center; font-family:var(--serif); font-size:1.3rem; color:#FBFAF6; font-feature-settings:"tnum" 1,"lnum" 1; }
.pdp-qty__note { margin-left:0.55rem; font-family:var(--sans); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(244,241,234,0.45); }
/* PDP — spec note (mirrors product back) */
.pdp-spec__note { text-align:center; max-width:62ch; margin:1.1rem auto 0; font-family:var(--sans); font-size:0.78rem; font-weight:300; color:rgba(241,238,231,0.5); }

/* ============================================================
   CONTACT — light theme (uses lg-page light glass system)
   ============================================================ */
.contact-hero { text-align:center; max-width:42rem; margin:0 auto clamp(2rem,4.5vw,3.2rem); }
.contact-hero h1 { font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.05; letter-spacing:-0.015em; }
.contact-hero .lead { max-width:48ch; margin:1rem auto 0; }
.contact-info { display:grid; gap:clamp(1rem,2vw,1.4rem); align-content:start; }
.contact-info h3 { margin-top:0.7rem; }
.contact-info p { margin-top:0.6rem; color:var(--body); }
.contact-info .lgbtn { margin-top:1.2rem; }
.contact-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:0.5rem; }
.contact-list li { color:var(--muted); font-size:0.92rem; }
.contact-mail { color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:border-color 0.2s var(--ease); }
.contact-mail:hover { border-color:var(--ink); }
.contact-form-card h3 { margin-bottom:1.2rem; }
.contact-close .contact-sign { display:block; margin-top:1.2rem; font-style:normal; font-family:var(--sans); font-size:0.7rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   CONTACT — light glassmorphism
   (echoes shop's image+scrim+glass, with a light scrim instead of dark)
   ============================================================ */
.cg-page { background:#FBF8F3; background-image:linear-gradient(rgba(250,247,242,0.90), rgba(242,237,229,0.93)), url("../img/shop-stage.jpg"); background-size:cover; background-position:center; background-attachment:fixed; }
@media (max-width:760px){ .cg-page { background-attachment:scroll; } }

.cg-hero { text-align:center; max-width:42rem; margin:0 auto clamp(2rem,4.5vw,3.4rem); }
.cg-hero .eyebrow { display:block; margin-bottom:1rem; }
.cg-hero h1 { font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.04; letter-spacing:-0.018em; }
.cg-hero .lead { max-width:48ch; margin:1rem auto 0; }

.cg-card { background:rgba(255,255,255,0.55); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%); border:1px solid rgba(255,255,255,0.9); box-shadow:0 20px 50px rgba(28,26,23,0.12); border-radius:22px; padding:clamp(1.5rem,3vw,2.2rem); }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .cg-card { background:rgba(255,255,255,0.94); } }

.cg-info { display:grid; gap:clamp(1rem,2vw,1.4rem); align-content:start; }
.cg-info h3 { margin-top:0.7rem; }
.cg-info p { margin-top:0.6rem; color:var(--body); }
.cg-info .lgbtn { margin-top:1.2rem; }

.cg-mail { display:inline-block; color:var(--ink); font-size:1.05rem; border-bottom:1px solid rgba(28,26,23,0.3); padding-bottom:3px; transition:border-color 0.2s var(--ease); }
.cg-mail:hover { border-color:var(--ink); }
.cg-meta { list-style:none; padding:0; margin:0.9rem 0 0; display:grid; gap:0.4rem; color:var(--muted); font-size:0.92rem; }

.cg-card .form { gap:1.15rem; max-width:none; }
.cg-card .field input, .cg-card .field select, .cg-card .field textarea { background:rgba(255,255,255,0.5); border:1px solid rgba(28,26,23,0.16); border-radius:12px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--ink); }
.cg-card .field input::placeholder, .cg-card .field textarea::placeholder { color:rgba(28,26,23,0.4); }
.cg-card .field input:focus, .cg-card .field select:focus, .cg-card .field textarea:focus { outline:none; border-color:var(--ink); background:rgba(255,255,255,0.8); }
.cg-card .form .lgbtn { width:100%; justify-content:center; margin-top:0.4rem; }
.cg-form__note { margin-top:0.9rem; text-align:center; }

.cg-close { text-align:center; }
.cg-close .serif-quote { margin-inline:auto; }
.cg-sign { display:block; margin-top:1.2rem; font-style:normal; font-family:var(--sans); font-size:0.7rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); }

/* Story — pack used as the lead (first) section: clear the fixed hero header */
.pack--lead .swap__label { top: clamp(5.25rem, 12vh, 7.25rem); }
.pack--lead .pack__frame { height: min(72vh, 660px); }
@media (max-width:760px){ .pack--lead .swap__label { top: clamp(4.75rem, 14vh, 6rem); } }

/* Story lead pack — minimal centred "scroll down" cue (replaces side cue; declutter) */
.pack--lead .swap__count, .pack--lead .swap__bar { display: none; }
.pack--lead .pack__scroll { right: auto; top: auto; left: 50%; bottom: clamp(1.5rem, 4.5vh, 2.6rem); transform: translateX(-50%); flex-direction: column; gap: 10px; }
.pack--lead .pack__scroll-txt { writing-mode: horizontal-tb; letter-spacing: 0.34em; font-size: 0.62rem; }
.pack--lead .pack__scroll-line { width: 1px; height: 46px; }

/* ============================================================
   SHOP — WHITE GLASS theme (scoped re-skin; PDPs stay dark)
   ============================================================ */
body.shop-light { background:#FBF8F3; color:var(--body); }
body.shop-light .shop-stage { background-image:linear-gradient(rgba(250,247,242,0.90), rgba(242,237,229,0.93)), url("../img/shop-stage.jpg"); }
@media (max-width:760px){ body.shop-light .shop-stage { background-attachment:scroll; } }
.shop-light .gcard { background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.9); box-shadow:0 20px 50px rgba(28,26,23,0.12); color:var(--body); }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .shop-light .gcard { background:rgba(255,255,255,0.94); } }
.shop-light .eyebrow--light { color:var(--muted); }
.shop-light .shop-hero-card h1 { color:var(--ink); }
.shop-light .shop-hero-card p { color:var(--body); }
.shop-light .hero-feats li { color:var(--muted); }
.shop-light .hero-feats li:not(:last-child)::after { color:rgba(28,26,23,0.3); }
.shop-light .gpill { color:var(--muted); border-color:rgba(28,26,23,0.22); }
.shop-light .gpill--solid { background:var(--ink); color:#fff; border-color:var(--ink); }
.shop-light .gprod h3 { color:var(--ink); }
.shop-light .gnotes { color:var(--body); }
.shop-light .gdesc { color:var(--body); }
.shop-light .gprice { color:var(--ink); }
.shop-light .gunit { color:var(--muted); }
.shop-light .gunit s { color:var(--muted); }
.shop-light .greassure { color:var(--muted); }
.shop-light .gprod__img { background:rgba(20,18,15,0.05); }
.shop-light .gbtn--solid { background:var(--ink); color:#fff; border:1px solid var(--ink); }
.shop-light .gbtn--solid:hover { background:#000; }
.shop-light .pdp-detail-link { color:var(--muted); border-bottom-color:rgba(28,26,23,0.3); }
.shop-light .pdp-detail-link:hover { color:var(--ink); border-color:var(--ink); }
.shop-light .shop-info { background:transparent; border-top:1px solid var(--line); }
.shop-light .trustline { color:var(--muted); border-bottom:1px solid var(--line); }
.shop-light .shop-impact-line { color:var(--body); }
.shop-light .shop-impact-line em { color:var(--ink); }
.shop-light .help-card { border:1px solid var(--line); background:rgba(255,255,255,0.5); }
.shop-light .help-card h4 { color:var(--ink); }
.shop-light .help-card p { color:var(--body); }
.shop-light .help-card a { color:var(--ink); border-bottom-color:rgba(28,26,23,0.4); }
.shop-light .form-note { color:var(--muted) !important; }
.shop-light .brew--dark li { border-top-color:var(--line); }
.shop-light .brew--dark .brew__num { color:var(--muted); }
.shop-light .brew--dark h3 { color:var(--ink); }
.shop-light .brew--dark p { color:var(--body); }
.shop-light .brew--steps::before { background:var(--line-2); }
.shop-light .brew__node { background:#fff; border-color:var(--line-2); }
.shop-light .brew__node svg { stroke:var(--ink); }

/* ============================================================
   CONTACT — BLACK GLASS theme (dark re-skin of cg components)
   ============================================================ */
.cg-dark { background:#0E0C0A; color:#EDEAE2; background-image:linear-gradient(rgba(14,12,10,0.62), rgba(14,12,10,0.74)), url("../img/shop-stage.jpg"); background-size:cover; background-position:center; background-attachment:fixed; }
@media (max-width:760px){ .cg-dark { background-attachment:scroll; } }
.cg-dark .eyebrow { color:rgba(244,241,234,0.6); }
.cg-dark .cg-hero h1 { color:#FBFAF6; }
.cg-dark .cg-hero .lead, .cg-dark .lead { color:rgba(241,238,231,0.8); }
.cg-dark .cg-card { background:rgba(24,21,17,0.42); -webkit-backdrop-filter:blur(20px) saturate(120%); backdrop-filter:blur(20px) saturate(120%); border:1px solid rgba(244,241,234,0.16); box-shadow:0 22px 56px rgba(0,0,0,0.40); }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .cg-dark .cg-card { background:rgba(22,19,15,0.90); } }
.cg-dark .cg-card h3 { color:#FBFAF6; }
.cg-dark .cg-info p { color:rgba(241,238,231,0.72); }
.cg-dark .cg-mail { color:#F4F1EA; border-bottom-color:rgba(244,241,234,0.4); }
.cg-dark .cg-mail:hover { border-color:#F4F1EA; }
.cg-dark .cg-meta { color:rgba(241,238,231,0.55); }
.cg-dark .field label { color:rgba(244,241,234,0.7); }
.cg-dark .cg-card .field input, .cg-dark .cg-card .field select, .cg-dark .cg-card .field textarea { background:rgba(255,255,255,0.05); border:1px solid rgba(244,241,234,0.18); color:#F1EEE7; }
.cg-dark .cg-card .field input::placeholder, .cg-dark .cg-card .field textarea::placeholder { color:rgba(244,241,234,0.4); }
.cg-dark .cg-card .field input:focus, .cg-dark .cg-card .field select:focus, .cg-dark .cg-card .field textarea:focus { outline:none; border-color:rgba(244,241,234,0.55); background:rgba(255,255,255,0.08); }
.cg-dark .cg-card .field select option { color:#16140F; }
.cg-dark .lgbtn { background:#F4F1EA; color:#16140F; border-color:#F4F1EA; }
.cg-dark .lgbtn:hover { background:#fff; opacity:1; }
.cg-dark .form-note { color:rgba(241,238,231,0.5); }
.cg-dark .serif-quote { color:#FBFAF6; }
.cg-dark .cg-sign { color:rgba(244,241,234,0.5); }
.cg-dark .lg-tint { background:transparent; }

/* ============================================================
   SHOP/PDP — WHITE GLASS: depth pass + PDP component re-skin
   ============================================================ */
/* depth: layered background + richer card shadows (still minimal white) */
body.shop-light { background:linear-gradient(180deg,#FCFAF6 0%,#F1ECE3 100%); }
body.shop-light .shop-stage { background-image:radial-gradient(115% 70% at 50% -8%, rgba(255,255,255,0.6), rgba(255,255,255,0) 55%), linear-gradient(rgba(250,247,242,0.85), rgba(240,235,227,0.92)), url("../img/shop-stage.jpg"); }
.shop-light .gcard { background:rgba(255,255,255,0.5); border:1px solid rgba(255,255,255,0.85); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 2px 4px rgba(28,26,23,0.05), 0 22px 48px -18px rgba(28,26,23,0.24); }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .shop-light .gcard { background:rgba(255,255,255,0.92); } }
.shop-light .gshelf .gprod { transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.shop-light .gshelf .gprod:hover { transform:translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(28,26,23,0.06), 0 30px 60px -20px rgba(28,26,23,0.30); }

/* PDP components on white */
.shop-light .breadcrumb { color:var(--muted); }
.shop-light .breadcrumb a { color:var(--muted); }
.shop-light .breadcrumb a:hover { color:var(--ink); }
.shop-light .breadcrumb span { color:var(--line-2); }
.shop-light .breadcrumb b { color:var(--ink); }
.shop-light .pdp-gallery__main { background:rgba(20,18,15,0.04); border-color:var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 22px 48px -18px rgba(28,26,23,0.22); }
.shop-light .pdp-thumb { border-color:var(--line-2); background:rgba(20,18,15,0.04); }
.shop-light .pdp-thumb:hover { border-color:rgba(28,26,23,0.45); }
.shop-light .pdp-thumb.is-active { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset; }
.shop-light .pdp-buy h1 { color:var(--ink); }
.shop-light .pdp-feats li { color:var(--body); }
.shop-light .pdp-feats li::before { background:var(--ink); }
.shop-light .pdp-field-label { color:var(--muted); }
.shop-light .pdp-qty { border-color:var(--line-2); background:rgba(255,255,255,0.5); }
.shop-light .pdp-qty__btn { color:var(--ink); }
.shop-light .pdp-qty__btn:hover { background:rgba(20,18,15,0.06); }
.shop-light .pdp-qty__val { color:var(--ink); }
.shop-light .pdp-qty__note { color:var(--muted); }
.shop-light .pdp-spec { background:var(--line); border-color:var(--line); }
.shop-light .pdp-spec__item { background:rgba(255,255,255,0.62); }
.shop-light .pdp-spec__item p { color:var(--ink); }
.shop-light .pdp-spec__item small { color:var(--body); }
.shop-light .pdp-spec__note { color:var(--muted); }
.shop-light .pdp-section-head h2 { color:var(--ink); }
.shop-light .pdp-section-head p { color:var(--body); }
.shop-light .pdp-inc__body h3 { color:var(--ink); }
.shop-light .pdp-inc__body p { color:var(--body); }
.shop-light .pdp-inc--static:hover { border-color:var(--line); }

/* ============================================================
   SHOP hero — compact + readable (products visible sooner)
   ============================================================ */
/* 1) less top whitespace so content starts higher */
.shop-light .shop-stage { padding-block: clamp(1.6rem,4vw,2.8rem) clamp(2.4rem,6vw,4.2rem); }
/* 2) smaller, tighter hero card */
.shop-hero-card { padding: clamp(1.4rem,3vw,2rem) clamp(1.6rem,3.5vw,2.4rem); margin-bottom: clamp(1.1rem,2.2vw,1.5rem); }
.shop-hero-card h1 { font-size: clamp(1.7rem,3.2vw,2.35rem); max-width: 18ch; }
.shop-hero-card p { margin-top: 0.8rem; max-width: 52ch; font-size: clamp(0.95rem,1.2vw,1.05rem); line-height: 1.55; }
.shop-hero-card .hero-feats { margin-top: 1.1rem; }
/* 3) more solid surface + darker text for readability */
.shop-light .shop-hero-card { background: rgba(255,255,255,0.80); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 2px 4px rgba(28,26,23,0.05), 0 20px 44px -18px rgba(28,26,23,0.20); }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .shop-light .shop-hero-card { background: rgba(255,255,255,0.96); } }
.shop-light .shop-hero-card p { color: var(--ink-2); font-weight: 400; }
.shop-light .shop-hero-card .hero-feats li { color: var(--body); }
.shop-light .shop-hero-card .hero-feats li:not(:last-child)::after { color: rgba(28,26,23,0.35); }

/* ============================================================
   SHOP/PDP white theme — neutral palette (remove warm/yellow cast)
   ============================================================ */
body.shop-light { background: linear-gradient(180deg, #F6F6F4 0%, #ECECE9 100%); }
body.shop-light .shop-stage { background-image: radial-gradient(120% 72% at 50% -10%, #FFFFFF, rgba(255,255,255,0) 58%), linear-gradient(180deg, #F4F4F2 0%, #E9E9E6 100%); }

/* How to drink — serif numerals instead of icons; remove leaked ol markers */
.brew, .brew--dark { list-style: none; padding-left: 0; }
.brew--steps .brew__node { font-family: var(--serif); font-weight: 500; font-size: clamp(1.45rem,2.1vw,1.85rem); line-height: 1; font-feature-settings:"lnum" 1; }
.shop-light .brew--steps .brew__node { color: var(--ink); background: #fff; border-color: var(--line-2); }

/* Product cards — wide horizontal rows (image left, details right) */
.gshelf--two { grid-template-columns: 1fr; max-width: 900px; gap: clamp(1rem,2.5vw,1.6rem); }
.gshelf--two .gprod { display: grid; grid-template-columns: 0.82fr 1fr; gap: clamp(1.2rem,3vw,2.4rem); align-items: center; padding: clamp(1rem,2vw,1.4rem); }
.gshelf--two .gprod__img { aspect-ratio: 4/3; margin-bottom: 0; }
.gshelf--two .gprod__body { display: flex; flex-direction: column; }
@media (max-width: 680px){ .gshelf--two .gprod { grid-template-columns: 1fr; } .gshelf--two .gprod__img { aspect-ratio: 5/4; } }

/* ============================================================
   SHOP white theme — neutral glass backdrop (keeps glassmorphism, no yellow)
   + product cards: horizontal, placed two-up (1×1)
   ============================================================ */
body.shop-light {
  background:
    radial-gradient(42% 52% at 16% 18%, rgba(255,255,255,0.95), rgba(255,255,255,0) 72%),
    radial-gradient(46% 56% at 86% 82%, rgba(206,206,202,0.45), rgba(206,206,202,0) 70%),
    linear-gradient(180deg, #F3F3F1 0%, #E8E8E5 100%);
  background-attachment: fixed;
}
.shop-light .shop-stage { background: transparent; }

.gshelf--two { grid-template-columns: repeat(2, 1fr); max-width: 1040px; gap: clamp(1.1rem,2.4vw,1.8rem); }
.gshelf--two .gprod { grid-template-columns: 0.82fr 1fr; gap: clamp(0.9rem,1.8vw,1.3rem); align-items: center; padding: clamp(0.9rem,1.6vw,1.2rem); }
.gshelf--two .gprod__img { aspect-ratio: 1/1; margin-bottom: 0; }
@media (max-width: 760px){ .gshelf--two { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 460px){ .gshelf--two .gprod { grid-template-columns: 1fr; } .gshelf--two .gprod__img { aspect-ratio: 5/4; } }

/* ============================================================
   SHOP product cards — wider two-up, full-height image panel,
   top-aligned title (professional horizontal card)
   ============================================================ */
.shop-light .shop-stage .wrap { max-width: 1200px; }
.gshelf--two { grid-template-columns: repeat(2, 1fr); max-width: none; gap: clamp(1rem,2vw,1.6rem); }
.gshelf--two .gprod { grid-template-columns: 0.92fr 1.08fr; gap: 0; align-items: stretch; padding: 0; overflow: hidden; }
.gshelf--two .gprod__img { aspect-ratio: auto; height: 100%; min-height: clamp(280px,26vw,360px); margin: 0; border-radius: 0; }
.gshelf--two .gprod__body { padding: clamp(1.5rem,2.4vw,2.2rem); }
@media (max-width: 900px){ .gshelf--two { grid-template-columns: 1fr; max-width: 640px; } }
@media (max-width: 520px){ .gshelf--two .gprod { grid-template-columns: 1fr; } .gshelf--two .gprod__img { height: auto; min-height: 0; aspect-ratio: 5/4; } }

/* ============================================================
   SHOP — Concept 2 (Stacked Showcase) cards
   + photo-backed neutral glassmorphism backdrop (grayscale, no yellow)
   ============================================================ */
/* photographic glass backdrop (like contact, but light + grayscale) */
body.shop-light { background:#EFEFEC; }
body.shop-light::before { content:""; position:fixed; inset:0; z-index:-2; background:url("../img/shop-stage.jpg") center/cover no-repeat; filter:grayscale(100%) brightness(1.06) contrast(0.96); }
body.shop-light::after { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(247,247,245,0.80) 0%, rgba(236,236,233,0.90) 100%); }
.shop-light .shop-stage { background: transparent; }
.shop-light .shop-stage .wrap { max-width: 1080px; }

/* cards: image-top showcase */
.gshelf--two { grid-template-columns: repeat(2,1fr); max-width: none; gap: clamp(1.1rem,2.4vw,1.8rem); }
.gshelf--two .gprod { display:flex; flex-direction:column; align-items:stretch; padding:0; overflow:hidden; }
.gshelf--two .gprod__img { aspect-ratio:16/10; height:auto; min-height:0; margin:0; border-radius:0; }
.gshelf--two .gprod__body { padding: clamp(1.4rem,2.4vw,2rem); display:flex; flex-direction:column; }
.gshelf--two .gpill, .gshelf--two .gpill--solid { align-self:flex-start; background:transparent; border:none; padding:0; color:var(--muted); font-size:0.62rem; letter-spacing:0.22em; }
.gshelf--two .gprod__top { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:0.55rem; }
.gshelf--two .gprod__top h3 { margin-top:0; }
.gshelf--two .gprod__price { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; white-space:nowrap; }
.gshelf--two .gprice { font-size: clamp(1.3rem,1.9vw,1.6rem); }
.gshelf--two .gprod__price .gunit { font-size:0.7rem; margin-top:3px; }
.gshelf--two .gnotes { margin-top:0.5rem; }
.gshelf--two .gdesc { margin-top:0.7rem; flex:none; }
.gshelf--two .pdp-detail-link { margin-top:0.9rem; }
.gshelf--two .gbtn { width:100%; align-self:stretch; margin-top:1.2rem; }
.gshelf--two .greassure { text-align:center; margin-top:0.8rem; }
@media (max-width:760px){ .gshelf--two { grid-template-columns:1fr; max-width:460px; } }

/* fix: let the fixed photo backdrop show through the product (stage) area too
   — overrides earlier higher-specificity stage backgrounds (same specificity, later wins) */
body.shop-light .shop-stage { background: transparent; }

/* ============================================================
   SHOP hero — one-line lead sentence + feature chips
   ============================================================ */
/* let each sentence sit on its own line (no mid-sentence wrap on desktop) */
.shop-hero-card p { max-width: none; }
/* feature points as minimal hairline chips (more visible, still minimal) */
.shop-light .shop-hero-card .hero-feats { display:flex; flex-wrap:wrap; gap:0.55rem; margin-top:1.5rem; }
.shop-light .shop-hero-card .hero-feats li { position:static; padding:0.5rem 0.95rem; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,0.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-family:var(--sans); font-size:0.6rem; font-weight:500; letter-spacing:0.15em; text-transform:uppercase; color:var(--body); }
.shop-light .shop-hero-card .hero-feats li::after { content:none; }

/* product tasting/notes line — regular (non-italic) font, bold */
.shop-light .gnotes { font-family: var(--sans); font-style: normal; font-weight: 600; color: var(--ink-2); }

/* "View details" — Option 3: row with top divider + circular arrow */
.gprod__more { display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--line); padding-top:0.95rem; margin-top:1rem; }
.gprod__more .lab { font-family:var(--sans); font-size:0.66rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--body); transition:color 0.25s var(--ease); }
.gprod__more .circ { flex:none; width:36px; height:36px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink); transition:background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.gprod__more .circ svg { width:15px; height:15px; }
.gprod__more:hover .lab { color:var(--ink); }
.gprod__more:hover .circ { background:var(--ink); color:#fff; border-color:var(--ink); }

/* "View details" — Option 2: ghost pill button (overrides Option 3 row) */
.gprod__more { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; width:auto; border:1px solid var(--line-2); border-radius:999px; padding:0.7rem 1.2rem; margin-top:1.1rem; background:rgba(255,255,255,0.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-family:var(--sans); font-size:0.66rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); transition:border-color 0.25s var(--ease), background 0.25s var(--ease); }
.gprod__more:hover { border-color:var(--ink); background:rgba(255,255,255,0.85); }
.gprod__more .ar { transition:transform 0.25s var(--ease); }
.gprod__more:hover .ar { transform:translateX(3px); }

/* "View details" — Option 1: animated underline (overrides Option 2 pill) */
.gprod__more { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; width:auto; position:relative; border:none; background:none; border-radius:0; padding:0 0 4px 0; margin-top:1.1rem; font-family:var(--sans); font-size:0.66rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none; }
.gprod__more::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform 0.35s var(--ease); }
.gprod__more:hover { background:none; }
.gprod__more:hover::after { transform:scaleX(1); }
.gprod__more .ar { transition:transform 0.25s var(--ease); }
.gprod__more:hover .ar { transform:translateX(4px); }

/* ============================================================
   FOR BUSINESS — dark glass theme (matches Contact sensibility)
   ============================================================ */
.lg-night { background:#0E0C0A; color:#EDEAE2; background-image:linear-gradient(rgba(14,12,10,0.62), rgba(14,12,10,0.74)), url("../img/shop-stage.jpg"); background-size:cover; background-position:center; background-attachment:fixed; }
@media (max-width:760px){ .lg-night { background-attachment:scroll; } }
.lg-night .lg-tint, .lg-night .lg-dark { background:transparent; }
.lg-night h2, .lg-night h3, .lg-night h4 { color:#FBFAF6; }
.lg-night p { color:rgba(244,241,234,0.82); }
.lg-night .eyebrow { color:rgba(244,241,234,0.6); }
.lg-night .lead { color:rgba(241,238,231,0.8); }
.lg-night .form-note { color:rgba(241,238,231,0.55); }
.lg-night .lgcard { background:rgba(255,255,255,0.05); -webkit-backdrop-filter:blur(18px) saturate(120%); backdrop-filter:blur(18px) saturate(120%); border:1px solid rgba(244,241,234,0.16); box-shadow:0 22px 56px rgba(0,0,0,0.34); }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .lg-night .lgcard { background:rgba(22,19,15,0.92); } }
.lg-night .lgbtn { background:#F4F1EA; color:#16140F; border-color:#F4F1EA; }
.lg-night .lgbtn:hover { background:#fff; opacity:1; }
.lg-night .lgbtn--ghost { background:transparent; color:#F4F1EA; border-color:rgba(244,241,234,0.4); }
.lg-night .lgbtn--ghost:hover { background:rgba(255,255,255,0.08); }
.lg-night .link-arrow { color:#F4F1EA; border-bottom-color:#F4F1EA; }
/* flow + timeline (light on dark) */
.lg-night .lg-flow__step::before { background:rgba(244,241,234,0.2); }
.lg-night .lg-flow__dot { background:#16130F; border-color:rgba(244,241,234,0.3); color:rgba(244,241,234,0.7); box-shadow:none; }
.lg-night .lg-flow__step.is-end .lg-flow__dot { background:#F4F1EA; color:#16140F; border-color:#F4F1EA; }
.lg-night .lg-flow__step span { color:#F4F1EA; }
.lg-night .lg-timeline__track { background:rgba(244,241,234,0.2); }
.lg-night .lg-timeline__node { background:#16130F; border-color:rgba(244,241,234,0.3); color:#F4F1EA; box-shadow:none; }
.lg-night .num { color:rgba(244,241,234,0.5); }
.lg-night .lg-stats li { border-left-color:rgba(244,241,234,0.22); }
.lg-night .lg-stats span { color:#FBFAF6; }
.lg-night .lg-stats small { color:rgba(241,238,231,0.62); }
/* form — dark glass inputs */
.lg-night .field label { color:rgba(244,241,234,0.7); }
.lg-night .field input, .lg-night .field select, .lg-night .field textarea { background:rgba(255,255,255,0.05); border:1px solid rgba(244,241,234,0.18); color:#F1EEE7; }
.lg-night .field input::placeholder, .lg-night .field textarea::placeholder { color:rgba(244,241,234,0.4); }
.lg-night .field input:focus, .lg-night .field select:focus, .lg-night .field textarea:focus { outline:none; border-color:rgba(244,241,234,0.55); background:rgba(255,255,255,0.08); }
.lg-night .field select option { color:#16140F; }
/* header: keep transparent over the cinehero, dark-glass once scrolled (not white) */
.lg-night .site-header--hero.scrolled { background:rgba(16,14,11,0.70); -webkit-backdrop-filter:saturate(120%) blur(14px); backdrop-filter:saturate(120%) blur(14px); border-bottom-color:rgba(255,255,255,0.10); }
.lg-night .site-header--hero.scrolled .nav-links a { color:#EDEAE2; }
.lg-night .site-header--hero.scrolled .nav-links a:not(.btn)::after { background:#EDEAE2; }
.lg-night .site-header--hero.scrolled .brand img { filter:invert(1) brightness(2.2); }
.lg-night .site-header--hero.scrolled .nav-toggle span { background:#EDEAE2; }

/* line-break tidy: widen so intended breaks land as one line each */
.shop-impact-line { max-width: 72ch; }
.biz-cinehero__lead { max-width: 54rem; }
.lg-night .lg-model p { max-width: none; }

/* ============================================================
   FOR BUSINESS — Social value impact dashboard (dark glass)
   ============================================================ */
.lg-impact { display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(1.6rem,3.5vw,3.2rem); align-items:center; }
@media (max-width:880px){ .lg-impact { grid-template-columns:1fr; } }
.lg-impact__intro h2 { font-size:clamp(1.7rem,2.7vw,2.3rem); letter-spacing:-0.01em; }
.lg-impact__intro p { margin-top:1rem; max-width:48ch; }
.lg-impact__badges { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.4rem; }
.lg-badge { font-family:var(--sans); font-size:0.58rem; font-weight:500; letter-spacing:0.15em; text-transform:uppercase; color:rgba(244,241,234,0.82); border:1px solid rgba(244,241,234,0.28); border-radius:999px; padding:0.45rem 0.85rem; }

.lg-impact__panel { background:rgba(0,0,0,0.30); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(244,241,234,0.16); border-radius:18px; padding:clamp(1.3rem,2.6vw,1.9rem); box-shadow:0 26px 60px rgba(0,0,0,0.4); }
.lg-impact__panelhead { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(244,241,234,0.12); }
.lg-impact__panelhead > span:first-child { font-family:var(--sans); font-size:0.66rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#F4F1EA; }
.lg-impact__tag { font-family:var(--sans); font-size:0.54rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(244,241,234,0.5); border:1px solid rgba(244,241,234,0.18); border-radius:999px; padding:0.32rem 0.62rem; white-space:nowrap; }

.lg-kpis { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:1.2rem; background:rgba(244,241,234,0.1); border:1px solid rgba(244,241,234,0.1); border-radius:12px; overflow:hidden; }
.lg-kpi { background:rgba(20,17,13,0.6); padding:1.1rem 1.2rem; }
.lg-kpi--hero { background:rgba(244,241,234,0.07); }
.lg-kpi__num { display:block; font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2.05rem); color:#FBFAF6; line-height:1; font-feature-settings:"tnum" 1,"lnum" 1; }
.lg-kpi__num small { font-family:var(--sans); font-size:0.48em; font-weight:500; color:rgba(244,241,234,0.55); margin-left:0.28rem; letter-spacing:0.03em; }
.lg-kpi__lab { display:block; margin-top:0.55rem; font-family:var(--sans); font-size:0.72rem; color:rgba(241,238,231,0.62); line-height:1.4; }

.lg-impact__maps { margin-top:1.2rem; }
.lg-impact__maps-h { font-family:var(--sans); font-size:0.58rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:rgba(244,241,234,0.5); }
.lg-impact__maps ul { list-style:none; padding:0; margin:0.6rem 0 0; display:grid; gap:0.5rem; }
.lg-impact__maps li { font-family:var(--sans); font-size:0.8rem; color:rgba(241,238,231,0.78); padding-left:1rem; position:relative; line-height:1.45; }
.lg-impact__maps li b { color:#F4F1EA; font-weight:600; }
.lg-impact__maps li::before { content:""; position:absolute; left:0; top:0.55em; width:5px; height:5px; border-radius:50%; background:#F4F1EA; opacity:0.7; }
.lg-impact__note { margin-top:1.3rem; font-family:var(--sans); font-size:0.68rem; line-height:1.55; color:rgba(241,238,231,0.46); }

/* For Business — interactive social value calculator */
.svc-control { margin-top:1.3rem; }
.svc-label { display:flex; justify-content:space-between; align-items:baseline; gap:0.8rem; font-family:var(--sans); font-size:0.62rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,241,234,0.55); margin-bottom:0.7rem; }
.svc-volout { font-family:var(--serif); font-size:1.05rem; letter-spacing:0; text-transform:none; color:#FBFAF6; }
.svc-control input[type=range] { width:100%; -webkit-appearance:none; appearance:none; height:3px; background:rgba(244,241,234,0.22); border-radius:999px; outline:none; }
.svc-control input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#F4F1EA; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.45); }
.svc-control input[type=range]::-moz-range-thumb { width:18px; height:18px; border:none; border-radius:50%; background:#F4F1EA; cursor:pointer; }
.svc-control input[type=range]:focus-visible { outline:2px solid #F4F1EA; outline-offset:4px; }
.svc-chart { display:flex; gap:1.6rem; align-items:flex-end; margin-top:1.5rem; }
.svc-bar { flex:1; display:flex; flex-direction:column; align-items:center; }
.svc-bar__val { font-family:var(--serif); font-size:1rem; color:#FBFAF6; margin-bottom:0.45rem; font-feature-settings:"tnum" 1,"lnum" 1; }
.svc-bar__track { width:100%; max-width:96px; height:104px; display:flex; align-items:flex-end; background:rgba(244,241,234,0.05); border-radius:8px; overflow:hidden; }
.svc-bar__fill { width:100%; background:rgba(244,241,234,0.28); border-radius:8px 8px 0 0; transition:height 0.45s var(--ease); min-height:2px; }
.svc-bar__fill--hero { background:#F4F1EA; }
.svc-bar__cap { margin-top:0.55rem; font-family:var(--sans); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,241,234,0.5); }
.svc-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-top:1.4rem; background:rgba(244,241,234,0.1); border:1px solid rgba(244,241,234,0.1); border-radius:12px; overflow:hidden; }
.svc-stat { background:rgba(20,17,13,0.6); padding:0.95rem 1.1rem; }
.svc-stat--hero { background:rgba(244,241,234,0.07); }
.svc-stat__num { display:block; font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.7rem); color:#FBFAF6; line-height:1; font-feature-settings:"tnum" 1,"lnum" 1; }
.svc-stat__lab { display:block; margin-top:0.4rem; font-family:var(--sans); font-size:0.66rem; color:rgba(241,238,231,0.6); line-height:1.35; }

/* For Business — social value calculator (clean v2: hero + meter bars) */
.svc-control { margin-top:1.3rem; }
.svc-label { display:block; font-family:var(--sans); font-size:0.6rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,241,234,0.5); margin-bottom:0.75rem; }
.svc-inputrow { display:flex; align-items:center; gap:1rem; }
.svc-inputrow input[type=range] { flex:1; }
.svc-volout { font-family:var(--sans); font-size:0.74rem; color:rgba(244,241,234,0.55); white-space:nowrap; }
.svc-volout b { font-family:var(--serif); font-size:1.1rem; color:#FBFAF6; font-feature-settings:"tnum" 1,"lnum" 1; }

.svc-hero { margin-top:1.7rem; padding-bottom:1.4rem; border-bottom:1px solid rgba(244,241,234,0.12); }
.svc-hero__lab { display:block; font-family:var(--sans); font-size:0.6rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,241,234,0.55); }
.svc-hero__num { display:block; font-family:var(--serif); font-size:clamp(2.4rem,5vw,3.4rem); color:#FBFAF6; line-height:1; margin-top:0.45rem; letter-spacing:-0.01em; font-feature-settings:"tnum" 1,"lnum" 1; }
.svc-hero__sub { display:block; margin-top:0.65rem; font-family:var(--sans); font-size:0.74rem; line-height:1.45; color:rgba(241,238,231,0.6); }

.svc-bars { margin-top:1.4rem; display:grid; gap:1.05rem; }
.svc-meter__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; font-family:var(--sans); font-size:0.74rem; color:rgba(241,238,231,0.72); margin-bottom:0.5rem; }
.svc-meter__head span:last-child { font-family:var(--serif); font-size:1rem; color:#FBFAF6; font-feature-settings:"tnum" 1,"lnum" 1; }
.svc-meter__track { height:8px; background:rgba(244,241,234,0.08); border-radius:999px; overflow:hidden; }
.svc-meter__fill { height:100%; width:24%; background:rgba(244,241,234,0.32); border-radius:999px; transition:width 0.45s var(--ease); }
.svc-meter__fill--hero { background:#F4F1EA; }

.svc-micro { margin-top:1.4rem; display:flex; align-items:center; flex-wrap:wrap; gap:0.75rem; font-family:var(--sans); font-size:0.78rem; color:rgba(241,238,231,0.62); }
.svc-micro b { font-family:var(--serif); font-size:1.05rem; color:#FBFAF6; font-feature-settings:"tnum" 1,"lnum" 1; }
.svc-micro__sep { color:rgba(244,241,234,0.3); }

.svc-frame { display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1.5rem; }
.svc-frame__chip { font-family:var(--sans); font-size:0.56rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:rgba(244,241,234,0.72); border:1px solid rgba(244,241,234,0.2); border-radius:7px; padding:0.42rem 0.72rem; }

/* For Business — "How this is calculated" trigger + glass methodology modal */
.svc-method-btn { display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.5rem; background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:0.64rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,241,234,0.68); border-bottom:1px solid rgba(244,241,234,0.3); padding:0 0 3px; transition:color 0.2s var(--ease), border-color 0.2s var(--ease); }
.svc-method-btn:hover { color:#F4F1EA; border-color:#F4F1EA; }

.svc-modal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; visibility:hidden; transition:opacity 0.3s var(--ease), visibility 0.3s var(--ease); }
.svc-modal.is-open { opacity:1; visibility:visible; }
.svc-modal__scrim { position:absolute; inset:0; background:rgba(8,7,5,0.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); cursor:pointer; }
.svc-modal__card { position:relative; z-index:1; width:min(560px,100%); max-height:86vh; overflow-y:auto; background:rgba(22,19,15,0.62); -webkit-backdrop-filter:blur(30px) saturate(120%); backdrop-filter:blur(30px) saturate(120%); border:1px solid rgba(244,241,234,0.18); border-radius:20px; box-shadow:0 40px 90px rgba(0,0,0,0.5); color:#EDEAE2; padding:clamp(1.7rem,3.5vw,2.6rem); transform:translateY(14px); transition:transform 0.35s var(--ease); }
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .svc-modal__card { background:rgba(18,15,12,0.97); } }
.svc-modal.is-open .svc-modal__card { transform:none; }
.svc-modal__close { position:absolute; top:0.9rem; right:1.1rem; background:none; border:none; color:rgba(244,241,234,0.6); font-size:1.7rem; line-height:1; cursor:pointer; transition:color 0.2s var(--ease); }
.svc-modal__close:hover { color:#F4F1EA; }
.svc-modal .eyebrow { display:block; color:rgba(244,241,234,0.6); }
.svc-modal__title { font-family:var(--serif); color:#FBFAF6; font-size:clamp(1.3rem,2vw,1.6rem); margin-top:0.5rem; }
.svc-modal__intro { margin-top:0.8rem; font-family:var(--sans); font-size:0.85rem; line-height:1.55; color:rgba(241,238,231,0.72); }
.svc-modal__rows { margin-top:1.3rem; display:grid; gap:1px; background:rgba(244,241,234,0.1); border:1px solid rgba(244,241,234,0.1); border-radius:12px; overflow:hidden; }
.svc-modal__row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; background:rgba(20,17,13,0.5); padding:0.85rem 1.1rem; font-family:var(--sans); font-size:0.8rem; color:rgba(241,238,231,0.72); }
.svc-modal__row b { font-family:var(--serif); font-size:0.95rem; color:#FBFAF6; white-space:nowrap; }
.svc-modal__formula { margin-top:1.3rem; display:grid; gap:0.5rem; padding:1.1rem 1.2rem; background:rgba(0,0,0,0.26); border:1px solid rgba(244,241,234,0.12); border-radius:12px; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:0.78rem; color:rgba(241,238,231,0.85); }
.svc-modal__formula-note { margin-top:0.35rem; font-family:var(--sans); font-size:0.74rem; line-height:1.45; color:rgba(244,241,234,0.6); }
.svc-modal__src { margin-top:1.3rem; font-family:var(--sans); font-size:0.68rem; line-height:1.55; color:rgba(241,238,231,0.46); }

/* methodology modal — refined: transparent glass + gentle float-up (overrides) */
.svc-modal__scrim { background:rgba(10,8,6,0.30); -webkit-backdrop-filter:blur(10px) saturate(115%); backdrop-filter:blur(10px) saturate(115%); }
.svc-modal__card {
  background:rgba(32,28,22,0.40);
  -webkit-backdrop-filter:blur(44px) saturate(135%); backdrop-filter:blur(44px) saturate(135%);
  border:1px solid rgba(244,241,234,0.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 34px 84px -22px rgba(0,0,0,0.55);
  transform:translateY(30px) scale(0.985); opacity:0;
  transition:transform 0.6s cubic-bezier(.16,.84,.3,1), opacity 0.5s ease;
}
@supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .svc-modal__card { background:rgba(20,17,13,0.95); } }
.svc-modal.is-open .svc-modal__card { transform:none; opacity:1; }

/* ============================================================
   For Business (dark) — add depth & surface separation
   (less uniform black: graded backdrop · elevated cards · banded sections)
   ============================================================ */
.lg-night {
  background-image:
    radial-gradient(120% 85% at 50% -6%, rgba(66,56,43,0.40), rgba(14,12,10,0) 54%),
    linear-gradient(180deg, rgba(14,12,10,0.58) 0%, rgba(9,8,6,0.86) 100%),
    url("../img/shop-stage.jpg");
}
/* cards lift off the background */
.lg-night .lgcard { background:rgba(255,255,255,0.065); border:1px solid rgba(244,241,234,0.20); box-shadow:inset 0 1px 0 rgba(255,255,255,0.09), 0 30px 64px -26px rgba(0,0,0,0.62); }
/* subtle banded sections for scroll separation */
.lg-night .lg-tint { background:rgba(255,255,255,0.022); border-top:1px solid rgba(244,241,234,0.07); border-bottom:1px solid rgba(244,241,234,0.07); }
.lg-night .lg-dark { border-top:1px solid rgba(244,241,234,0.07); }
/* impact report panel — keep it the darkest layer, clearly bordered */
.lg-impact__panel { background:rgba(0,0,0,0.36); border-color:rgba(244,241,234,0.2); box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 70px -24px rgba(0,0,0,0.55); }

/* Social value calculator — annual/volume scale caption */
.svc-scale { font-family:var(--sans); font-size:0.58rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,241,234,0.42); margin:1.3rem 0 -0.55rem; }

/* Social value calculator — composition pillars + wider-evidence band */
.svc-comp { margin-top:1.5rem; }
.svc-comp__lab { display:block; font-family:var(--sans); font-size:0.58rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,241,234,0.42); margin-bottom:0.7rem; }
.svc-comp__chips { display:grid; gap:0.55rem; }
.svc-comp__chip { font-family:var(--sans); font-size:0.72rem; line-height:1.4; color:rgba(241,238,231,0.64); padding-left:0.85rem; border-left:2px solid rgba(244,241,234,0.24); }
.svc-comp__chip b { display:block; font-family:var(--sans); font-weight:600; font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase; color:#F4F1EA; margin-bottom:0.14rem; }
.svc-evid { margin-top:1.5rem; padding:1.05rem 1.15rem; border:1px solid rgba(244,241,234,0.14); border-radius:13px; background:rgba(244,241,234,0.04); }
.svc-evid__lab { display:block; font-family:var(--sans); font-size:0.56rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,241,234,0.4); margin-bottom:0.8rem; }
.svc-evid__rows { display:grid; gap:0.75rem; }
.svc-evid__row { display:grid; grid-template-columns:auto 1fr; gap:0.8rem; align-items:baseline; }
.svc-evid__row b { font-family:var(--serif); font-size:0.98rem; color:#FBFAF6; white-space:nowrap; font-feature-settings:"tnum" 1,"lnum" 1; }
.svc-evid__row span { font-family:var(--sans); font-size:0.68rem; line-height:1.45; color:rgba(241,238,231,0.56); }
.svc-modal__note { margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid rgba(244,241,234,0.12); }
.svc-modal__note p { font-family:var(--sans); font-size:0.76rem; line-height:1.5; color:rgba(241,238,231,0.64); margin:0; }
.svc-modal__note strong { color:#F4F1EA; font-weight:600; }
.svc-modal__refs { margin-top:0.65rem; font-family:var(--sans); font-size:0.62rem; line-height:1.5; color:rgba(241,238,231,0.4); }

/* Social value calculator — presets, verify badge, actions */
.svc-presets { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.95rem; }
.svc-preset { font-family:var(--sans); font-size:0.6rem; font-weight:500; letter-spacing:0.03em; color:rgba(244,241,234,0.6); background:rgba(244,241,234,0.05); border:1px solid rgba(244,241,234,0.16); border-radius:999px; padding:0.4rem 0.78rem; cursor:pointer; transition:color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.svc-preset:hover { color:#F4F1EA; border-color:rgba(244,241,234,0.4); }
.svc-preset.is-active { color:#0e0e0e; background:#F4F1EA; border-color:#F4F1EA; }
.svc-verify { display:inline-flex; align-items:center; gap:0.42rem; margin-top:0.9rem; font-family:var(--sans); font-size:0.62rem; letter-spacing:0.03em; color:rgba(241,238,231,0.5); }
.svc-verify span { color:rgba(244,241,234,0.82); font-size:0.78rem; line-height:1; }
.svc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.4rem; margin-top:1.6rem; }
.svc-actions .svc-method-btn { margin-top:0; }
.svc-dl-btn { display:inline-flex; align-items:center; gap:0.5rem; cursor:pointer; font-family:var(--sans); font-size:0.62rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:#0e0e0e; background:#F4F1EA; border:1px solid #F4F1EA; border-radius:999px; padding:0.62rem 1.15rem; transition:opacity 0.2s var(--ease); }
.svc-dl-btn:hover { opacity:0.85; }

/* Social value calculator — print-only summary report */
#svcReport { display:none; }
@media print {
  body { background:#fff !important; }
  body * { visibility:hidden !important; }
  #svcReport, #svcReport * { visibility:visible !important; }
  #svcReport { display:block !important; position:absolute; inset:0; margin:0; }
  .rep { font-family:Georgia,'Times New Roman',serif; color:#1a1a1a; max-width:720px; margin:0 auto; padding:30px 36px; }
  .rep__head { display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid #1a1a1a; padding-bottom:9px; }
  .rep__brand { font-weight:700; letter-spacing:0.04em; font-size:15px; }
  .rep__doc { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#555; }
  .rep__meta { display:flex; gap:22px; flex-wrap:wrap; font-size:10.5px; color:#555; margin-top:8px; }
  .rep__meta b { color:#1a1a1a; }
  .rep__hero { margin:22px 0 6px; }
  .rep__herolab { display:block; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:#777; }
  .rep__heronum { display:block; font-size:40px; line-height:1; margin:6px 0; }
  .rep__herosub { display:block; font-size:12px; color:#444; }
  .rep__grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; margin:18px 0; padding:14px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; }
  .rep__grid > div { display:flex; justify-content:space-between; font-size:12px; }
  .rep__grid span { color:#555; }
  .rep__grid b { color:#1a1a1a; }
  .rep__sec { margin:13px 0; }
  .rep__sec h4 { font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:#1a1a1a; margin:0 0 4px; }
  .rep__sec p, .rep__sec li { font-size:11.5px; line-height:1.5; color:#333; margin:0; }
  .rep__sec ul { margin:0; padding-left:16px; }
  .rep__sec li { margin-bottom:3px; }
  .rep__note p { font-size:10px; color:#666; font-style:italic; margin:14px 0 0; }
  .rep__foot { margin-top:18px; padding-top:9px; border-top:1px solid #ccc; font-size:10px; color:#777; }
  @page { margin:14mm; }
}

/* Social value calculator — term tooltips (hover + focus, accessible) */
.svc-tip { position:relative; display:inline-flex; align-items:center; cursor:help; outline:none; }
.svc-frame__chip.svc-tip { display:inline-flex; }
.svc-tip > .svc-tip__bubble { position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(5px); width:max-content; max-width:230px; padding:0.62rem 0.72rem; background:rgba(18,18,18,0.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(244,241,234,0.2); border-radius:11px; box-shadow:0 18px 44px rgba(0,0,0,0.55); font-family:var(--sans); font-size:0.66rem; font-weight:400; line-height:1.45; letter-spacing:0; text-transform:none; text-align:left; color:rgba(244,241,234,0.86); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.18s var(--ease), transform 0.18s var(--ease); z-index:30; }
.svc-tip > .svc-tip__bubble::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:rgba(18,18,18,0.94); }
.svc-tip:hover > .svc-tip__bubble, .svc-tip:focus > .svc-tip__bubble, .svc-tip:focus-within > .svc-tip__bubble { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.svc-tip:focus-visible { text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.svc-frame__chip.svc-tip:hover { color:#F4F1EA; border-color:rgba(244,241,234,0.4); }
@media print { .svc-tip__bubble { display:none !important; } }

/* Social value calculator — monthly/annual volume readout */
.svc-volout { display:flex; flex-direction:column; align-items:flex-end; line-height:1.12; }
.svc-volout__yr { font-family:var(--sans); font-size:0.6rem; color:rgba(244,241,234,0.42); margin-top:0.15rem; }
.svc-volout__yr span { font-feature-settings:"tnum" 1,"lnum" 1; }

/* Social value calculator — minimal section separation */
.svc-presets { padding-bottom:1.5rem; border-bottom:1px solid rgba(244,241,234,0.08); }
.svc-hero { margin-top:1.4rem; }
.svc-frame { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(244,241,234,0.08); }
.svc-actions { margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid rgba(244,241,234,0.08); }

/* Social value calculator — input divider now that presets are removed */
.svc-control { padding-bottom:1.5rem; border-bottom:1px solid rgba(244,241,234,0.08); }

/* Social value calculator — Liquid Glass refinement (neutral, no chromatic flare) */
.lg-impact__panel {
  position:relative;
  border-radius:24px;
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  backdrop-filter:blur(26px) saturate(145%);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 42%), rgba(14,14,14,0.42);
  border:1px solid rgba(244,241,234,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.24), inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 -22px 46px -28px rgba(0,0,0,0.6), 0 36px 84px -30px rgba(0,0,0,0.66);
}
.lg-impact__panel::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(130% 80% at 12% -8%, rgba(255,255,255,0.16), rgba(255,255,255,0) 52%), radial-gradient(90% 60% at 102% 0%, rgba(184,206,255,0.07), rgba(255,255,255,0) 60%);
}
.lg-impact__panel > * { position:relative; z-index:1; }
/* glassy meters */
.svc-meter__track { background:rgba(244,241,234,0.09); box-shadow:inset 0 1px 2px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(255,255,255,0.04); }
.svc-meter__fill { box-shadow:inset 0 1px 0 rgba(255,255,255,0.25); }
.svc-meter__fill--hero { background:linear-gradient(180deg, #ffffff, rgba(244,241,234,0.82)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 0 18px -4px rgba(244,241,234,0.45); }
/* slider thumb gloss */
.svc-control input[type=range]::-webkit-slider-thumb { background:radial-gradient(circle at 35% 28%, #ffffff, #d8d5cd); box-shadow:0 2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.9); }
/* download button glass gloss */
.svc-dl-btn { background:linear-gradient(180deg, #fbfaf6, #e7e3da); box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 22px -8px rgba(0,0,0,0.55); }
/* framework chips — faint glass */
.svc-frame__chip { background:rgba(244,241,234,0.05); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
/* hero number subtle glass lift */
.svc-hero__num { text-shadow:0 1px 0 rgba(255,255,255,0.06); }

/* Social value calculator — metric tile grid (mix of Concept 2) */
.svc-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:1rem; }
.svc-tile { background:rgba(244,241,234,0.05); border:1px solid rgba(244,241,234,0.1); border-radius:13px; padding:12px 13px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); }
.svc-tile__lab { display:block; font-family:var(--sans); font-size:0.57rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:rgba(244,241,234,0.5); margin-bottom:7px; line-height:1.3; }
.svc-tile__v { font-family:var(--serif); font-size:1.4rem; color:#FBFAF6; font-feature-settings:"tnum" 1,"lnum" 1; line-height:1; }
.svc-tile__sub { font-family:var(--sans); font-size:0.55rem; font-weight:400; color:rgba(244,241,234,0.45); letter-spacing:0; text-transform:none; }

/* Download summary — org input + copy/actions (screen) */
.svc-actions { flex-direction:column; align-items:stretch; gap:0.95rem; }
.svc-org { width:100%; font-family:var(--sans); font-size:0.72rem; color:#F4F1EA; background:rgba(244,241,234,0.05); border:1px solid rgba(244,241,234,0.16); border-radius:10px; padding:0.62rem 0.8rem; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); }
.svc-org::placeholder { color:rgba(244,241,234,0.4); }
.svc-org:focus { outline:none; border-color:rgba(244,241,234,0.42); }
.svc-actrow { display:flex; align-items:center; gap:0.9rem 1.1rem; flex-wrap:wrap; }
.svc-actrow__spacer { flex:1; min-width:0; }
.svc-copy-btn { display:inline-flex; align-items:center; gap:0.4rem; cursor:pointer; font-family:var(--sans); font-size:0.6rem; font-weight:500; letter-spacing:0.13em; text-transform:uppercase; color:rgba(244,241,234,0.72); background:none; border:1px solid rgba(244,241,234,0.24); border-radius:999px; padding:0.55rem 0.95rem; transition:color 0.2s var(--ease), border-color 0.2s var(--ease); }
.svc-copy-btn:hover { color:#F4F1EA; border-color:rgba(244,241,234,0.5); }

/* Download summary — report additions (print) */
@media print {
  .rep__heromo { display:block; font-size:11px; color:#555; margin-top:3px; }
  .rep__stmt { margin:16px 0; padding:12px 14px; border:1px solid #b9b6ac; border-radius:6px; background:#f3f1ea; page-break-inside:avoid; }
  .rep__stmt h4 { font-size:10px; letter-spacing:0.07em; text-transform:uppercase; margin:0 0 5px; color:#1a1a1a; }
  .rep__stmt p { font-size:11.5px; line-height:1.55; color:#222; margin:0; }
  .rep__meth { width:100%; border-collapse:collapse; }
  .rep__meth td { font-size:11px; color:#333; padding:3px 0; border-bottom:1px solid #e2e0d8; }
  .rep__meth td:last-child { text-align:right; color:#1a1a1a; }
  .rep__meta b { color:#1a1a1a; }
}

/* Footer — statutory company disclosure line */
.site-footer .footer-legal { margin:1rem 0 0; font-family:var(--sans); font-size:0.585rem; line-height:1.55; letter-spacing:0.005em; text-transform:none; color:#6E6E68; max-width:82ch; }

/* Accessibility — visually-hidden (screen-reader only) */
.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; }

/* Pack section — very subtle glassmorphism ambience (behind the pack) */
.pack__inner::before { content:""; position:absolute; z-index:0; pointer-events:none; left:50%; top:50%; transform:translate(-50%,-50%); width:min(74vw,680px); height:min(86svh,800px); border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,0.12), rgba(255,255,255,0.05) 42%, rgba(255,255,255,0) 72%); -webkit-backdrop-filter:blur(10px) saturate(118%); backdrop-filter:blur(10px) saturate(118%); }
.pack__inner::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(36% 30% at 20% 22%, rgba(255,255,255,0.08), transparent 60%), radial-gradient(34% 30% at 82% 78%, rgba(198,210,236,0.07), transparent 60%); }
.pack__tilt { position:relative; z-index:2; }
.pack .swap__label, .pack__scroll, .pack__slot { z-index:2; }

/* Cinema — 0.5s black hold that fades into the first scene */
.cinema__open { position:absolute; inset:0; z-index:8; background:#000; opacity:1; pointer-events:none; transition:opacity 0.6s ease; }
.cinema__open.is-out { opacity:0; }

/* Cinema — Option B cinematic teal cast */
.cinema__inner::after { content:""; position:absolute; top:var(--cin-top); left:0; right:0; bottom:0; z-index:2; background:rgba(26,58,66,0.18); mix-blend-mode:multiply; pointer-events:none; }

/* Hero carousel — kicker + CTAs */
.showcase__kicker { font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: clamp(0.8rem,1.6vw,1.2rem); }
.showcase__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(1.3rem,2.6vw,2rem); }
.sc-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 0.71rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.82rem 1.5rem; border-radius: 999px; transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); }
.sc-btn--primary { background: rgba(255,255,255,0.95); color: #141210; }
.sc-btn--primary:hover { background: #fff; transform: translateY(-1px); }
.sc-btn--ghost { color: #fff; border: 1px solid rgba(255,255,255,0.36); background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sc-btn--ghost:hover { border-color: rgba(255,255,255,0.7); transform: translateY(-1px); }
.sc-btn--ghost svg { transition: transform 0.25s var(--ease); }
.sc-btn--ghost:hover svg { transform: translateX(3px); }

/* Hero carousel — Option 2: unified frosted glass control capsule + hover */
.showcase__controls { gap: 0; padding: 6px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 14px 34px -16px rgba(0,0,0,0.55); transition: border-color 0.3s var(--ease), background 0.3s var(--ease); }
.showcase__controls:hover { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.12); }
.showcase__arrow { padding: 0; width: 40px; height: 40px; border-radius: 50%; justify-content: center; color: rgba(255,255,255,0.82); transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease); }
.showcase__arrow:hover { color: #fff; background: rgba(255,255,255,0.18); }
.showcase__arrow[data-prev]:hover { transform: translateX(-2px); }
.showcase__arrow[data-next]:hover { transform: translateX(2px); }
.showcase__arrow:active { transform: scale(0.92); }
.dots { gap: 8px; align-items: center; padding: 0 16px; margin: 0 4px; border-left: 1px solid rgba(255,255,255,0.16); border-right: 1px solid rgba(255,255,255,0.16); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.42); transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
.dot:hover { background: rgba(255,255,255,0.8); transform: scale(1.2); }
.dot.is-active { background: #fff; transform: scale(1.3); }

/* Home product gallery — Option B (editorial + glass tag) + B2B band */
.hgal { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 3vw, 2.6rem); max-width: 780px; margin-inline: auto; }
.hprod { display: block; text-decoration: none; color: var(--ink); }
.hprod__fig { margin: 0; position: relative; overflow: hidden; border-radius: 6px; }
.hprod__fig img { aspect-ratio: 4/5; object-fit: cover; width: 100%; display: block; transition: transform 0.6s var(--ease); }
.hprod:hover .hprod__fig img { transform: scale(1.04); }
.hprod__tag { position: absolute; top: 12px; right: 12px; font-family: var(--serif); font-size: 0.92rem; color: var(--ink); background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 5px 11px; border-radius: 999px; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.3); }
.hprod__view { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.75); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); padding: 11px 14px; border-radius: 11px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.hprod:hover .hprod__view { opacity: 1; transform: none; }
.hprod__cap { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-top: 13px; }
.hprod__nm { font-family: var(--serif); font-size: 1.3rem; }
.hprod__pr { font-family: var(--serif); font-size: 1rem; color: var(--muted); }
.home-b2b { max-width: 880px; margin: 0 auto; text-align: center; background: none; border: 0; box-shadow: none; padding: clamp(2.6rem,5vw,3.6rem) clamp(1.5rem,4vw,2.5rem); }
.home-b2b::before, .home-b2b::after { content: ""; display: block; width: 46px; height: 1px; margin-inline: auto; background: linear-gradient(90deg, transparent, rgba(20,18,16,0.32), transparent); }
.home-b2b::before { margin-bottom: clamp(1.5rem,3vw,2.1rem); }
.home-b2b::after { margin-top: clamp(1.5rem,3vw,2.1rem); }
.home-b2b__eyebrow { font-family: var(--sans); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.home-b2b__line { font-family: var(--serif); font-weight: 500; font-size: clamp(1.1rem,4.6vw,2rem); line-height: 1.12; color: var(--ink); max-width: none; white-space: nowrap; margin: 0.85rem auto 1.5rem; }
.home-b2b__btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 0.71rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: var(--ink); padding: 0.85rem 1.6rem; border-radius: 999px; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.home-b2b__btn:hover { transform: translateY(-1px); opacity: 0.9; }
.home-b2b__btn svg { transition: transform 0.25s var(--ease); }
.home-b2b__btn:hover svg { transform: translateX(3px); }

/* === Unified button tone — site-wide consistency (Option B family) === */
.lgbtn, .lgbtn--ghost, .gbtn, .gbtn--solid, .gbtn--ghost, .sc-btn, .svc-dl-btn, .svc-copy-btn, .home-b2b__btn {
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 999px; gap: 9px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
/* standard primary actions */
.lgbtn, .lgbtn--ghost, .gbtn, .gbtn--solid, .gbtn--ghost, .sc-btn, .home-b2b__btn { font-size: 0.72rem; padding: 0.88rem 1.7rem; }
/* compact utility buttons (keep smaller, same tone) */
.svc-dl-btn, .svc-copy-btn { font-size: 0.64rem; padding: 0.62rem 1.15rem; }
/* unified hover lift + press */
.lgbtn:hover, .lgbtn--ghost:hover, .gbtn:hover, .sc-btn:hover, .svc-dl-btn:hover, .svc-copy-btn:hover, .home-b2b__btn:hover { transform: translateY(-1px); }
.lgbtn:active, .gbtn:active, .sc-btn:active, .svc-dl-btn:active, .svc-copy-btn:active, .home-b2b__btn:active { transform: translateY(0) scale(0.985); }
/* underline link family — align tracking */
.link-arrow, .pdp-detail-link, .svc-method-btn { letter-spacing: 0.18em; }

/* For Business hero — differentiate action button from info chips */
.lgbtn--solid { background:#F4F1EA; color:#141210; border:1px solid #F4F1EA; }
.lgbtn--solid:hover { background:#ffffff; }
.lgbtn--solid svg { transition: transform 0.25s var(--ease); }
.lgbtn--solid:hover svg { transform: translateX(3px); }
/* chips demoted to quiet credential tags (frosted fill + leading dot, smaller) */
.lg-badge { font-size: 0.55rem; color: rgba(244,241,234,0.66); border-color: rgba(244,241,234,0.18); background: rgba(244,241,234,0.04); display: inline-flex; align-items: center; gap: 6px; padding: 0.4rem 0.8rem; }
.lg-badge::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgba(244,241,234,0.5); flex: 0 0 auto; }

/* Home product gallery — distinct tonal band (separates from white statement / dark footer) */
.home-feature { background: #EFF1F2; }

/* Shop product cards — glass VIEW overlay (matches home gallery) */
.gprod__img { position: relative; }
.gprod__view { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.75); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); padding: 11px 14px; border-radius: 11px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); pointer-events: none; }
.gprod:hover .gprod__view { opacity: 1; transform: none; }

/* Cinematic product cut — real photo, film grade */
.cinecut { position: relative; min-height: clamp(480px, 78vh, 800px); display: flex; align-items: center; overflow: hidden; background: #0c0c0c; }
.cinecut__media { position: absolute; inset: 0; }
.cinecut__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; }
.cinecut__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,9,0.78) 0%, rgba(8,8,9,0.34) 40%, rgba(8,8,9,0) 64%); }
.cinecut__inner { position: relative; z-index: 2; width: 100%; }
.cinecut .eyebrow { color: rgba(255,255,255,0.66); }
.cinecut__title { font-family: var(--serif); font-weight: 400; color: #fff; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.12; margin-top: 1rem; max-width: 16ch; text-wrap: balance; text-shadow: 0 1px 30px rgba(0,0,0,0.3); }
@media (max-width: 680px){ .cinecut__scrim { background: linear-gradient(180deg, rgba(8,8,9,0.5), rgba(8,8,9,0.2) 40%, rgba(8,8,9,0.55)); } .cinecut__media img { object-position: 64% 60%; } }

/* Our Story equation — Problem / Solution distinguished via frosted glass panels */
.equation { background: radial-gradient(130% 100% at 50% 0%, #F3F4F5 0%, #ECEEEF 58%, #E6E9EB 100%); }
.eq-panel { max-width: 980px; margin: 0 auto; background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(16px) saturate(118%); backdrop-filter: blur(16px) saturate(118%); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 28px 56px -30px rgba(40,33,24,0.4); padding: clamp(2rem,4.5vw,3.4rem) clamp(1.4rem,4vw,2.6rem); }
.eq-panel--solution { background: rgba(255,255,255,0.8); margin-top: 18px; }
.equation .pstage { min-height: 0; padding: clamp(1rem,3vw,2rem) 0; margin-top: clamp(1.2rem,3vw,2rem); }

/* Our Story — cause rows: refined minimal hover (editorial slide + deepen) */
.p2-causes li { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), color .4s var(--ease), padding-left .4s cubic-bezier(.2,.7,.2,1); cursor: default; }
.p2-causes li::before { transition: color .4s var(--ease); }
.p2-causes li:hover { color: var(--ink); padding-left: 0.6rem; }
.p2-causes li:hover::before { color: var(--ink); }
@media (hover: none){ .p2-causes li:hover { color: #2B2620; padding-left: 0; } }

/* Our Story — outcome emphasis: emboss / letterpress depth (option B) */
.p2-node .eq-emph__text { font-size: clamp(1.8rem, 3.4vw, 2.85rem); color: #221f1a; text-shadow: 0 1px 0 rgba(255,255,255,0.92), 0 -1px 1px rgba(0,0,0,0.16), 0 2px 4px rgba(40,33,24,0.12); }

/* Our Story — Good to know FAQ: subtle glassmorphism (white tone kept) */
.faq-section { background: radial-gradient(120% 100% at 50% 0%, #FBFCFC 0%, #F5F6F7 100%); }
.faq__item { background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(12px) saturate(112%); backdrop-filter: blur(12px) saturate(112%); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 16px 34px -26px rgba(40,33,24,0.28); padding: clamp(1.4rem,2.6vw,2rem); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.faq__item:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 24px 44px -26px rgba(40,33,24,0.36); }
.faq__item p { max-width: none; }

/* Twin frosted glass pills (Option 2) — close CTA + home Our Story */
.close-cta .close-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.gbtn-glass { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.26); border-radius: 999px; padding: 0.92rem 1.9rem; text-decoration: none; -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease); }
.gbtn-glass--pri { background: rgba(255,255,255,0.17); }
.gbtn-glass--gho { background: rgba(255,255,255,0.06); }
.gbtn-glass:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.5); }
.gbtn-glass svg { transition: transform 0.25s var(--ease); }
.gbtn-glass:hover svg { transform: translateX(3px); }
/* === Nav — Option A: frosted pill hover (minimal glass), theme-adaptive === */
.nav-links { gap: 1.4rem; }
.nav-links a:not(.btn):not(.nav-cta) { padding: 0.5rem 0.82rem; border-radius: 999px; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.nav-links a:not(.btn):not(.nav-cta)::after { display: none; }
/* dark-text headers (light bg) -> dark frost pill */
.nav-links a:not(.btn):not(.nav-cta):hover,
.nav-links a:not(.btn):not(.nav-cta).is-active,
.site-header--glasslight .nav-links a:not(.btn):not(.nav-cta):hover,
.site-header--glasslight .nav-links a:not(.btn):not(.nav-cta).is-active,
.site-header--hero.scrolled .nav-links a:not(.btn):not(.nav-cta):hover,
.site-header--hero.scrolled .nav-links a:not(.btn):not(.nav-cta).is-active { background: rgba(20,18,16,0.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* light-text headers (dark bg) -> light frost pill */
.site-header--hero:not(.scrolled) .nav-links a:not(.btn):not(.nav-cta):hover,
.site-header--hero:not(.scrolled) .nav-links a:not(.btn):not(.nav-cta).is-active,
.site-header--glass .nav-links a:not(.btn):not(.nav-cta):hover,
.site-header--glass .nav-links a:not(.btn):not(.nav-cta).is-active { background: rgba(255,255,255,0.13); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Home product gallery — light editorial band (subtly-warm white) */
.home-feature .hprod__fig { border: 1px solid rgba(40,33,24,0.08); border-radius: 8px; box-shadow: 0 24px 46px -28px rgba(40,33,24,0.3); }
.home-feature .hprod__nm { color: var(--ink); }
.home-feature .hprod__pr { color: var(--muted); }
.home-feature .hprod__view { background: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.95); color: var(--ink); }
.home-feature .link-arrow { color: var(--ink); border-bottom-color: var(--ink); }


/* Home For-business band — minimal deep-link to the calculator */
.home-b2b__cta { display: flex; flex-direction: column; align-items: center; gap: 0.95rem; }
.home-b2b__sub { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); transition: color 0.25s var(--ease); }
.home-b2b__sub svg { transition: transform 0.25s var(--ease); }
.home-b2b__sub:hover { color: var(--ink); }
.home-b2b__sub:hover svg { transform: translateX(3px); }
#how { scroll-margin-top: 92px; }

/* Home For-business band — side-by-side glass CTAs */
.home-b2b__cta { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.home-b2b__btn { color: #fff; background: rgba(22,20,15,0.72); border: 1px solid rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 18px 40px -22px rgba(40,33,24,0.5); }
.home-b2b__btn:hover { background: rgba(22,20,15,0.84); opacity: 1; }
.home-b2b__sub { font-size: 0.72rem; color: var(--ink); background: rgba(255,255,255,0.45); border: 1px solid rgba(20,18,16,0.16); border-radius: 999px; padding: 0.88rem 1.7rem; -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 14px 34px -24px rgba(40,33,24,0.35); transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); }
.home-b2b__sub:hover { color: var(--ink); background: rgba(255,255,255,0.66); border-color: rgba(20,18,16,0.28); transform: translateY(-1px); }


/* PDP brew guide — drip-bag pour clip (minimal glass frame) */
.brew-clip { max-width: 680px; margin: clamp(1.6rem,3.5vw,2.4rem) auto clamp(1.8rem,4vw,2.6rem); }
.brew-clip__frame { position: relative; padding: 6px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 16px 40px -28px rgba(0,0,0,0.45); }
.brew-clip__v { display: block; width: 100%; height: auto; aspect-ratio: 1.85 / 1; object-fit: cover; object-position: center 44%; border-radius: 13px; filter: saturate(0.9) contrast(1.06) brightness(0.97); }
.brew-clip__frame::after { content: ""; position: absolute; inset: 6px; border-radius: 13px; pointer-events: none; box-shadow: inset 0 0 70px rgba(0,0,0,0.4); background: linear-gradient(180deg, rgba(0,0,0,0.12), transparent 18%, transparent 82%, rgba(0,0,0,0.12)); }
.brew-clip__cap { display: block; text-align: center; margin-top: clamp(0.85rem,1.8vw,1.1rem); font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: rgba(241,238,231,0.52); }

/* PDP — full-bleed editorial sequence (16:9, fills viewport width; above How to drink) */
.pdp-bleed-stack { margin-block: clamp(2.5rem,6vw,4.5rem); }
.pdp-bleed { margin: 0; overflow: hidden; background: #0b0b0b; }
.pdp-bleed img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Hero tagline — smaller, minimal; softer scrim so editorial imagery breathes */
.showcase__tagline { font-weight: 400; font-size: clamp(1.2rem, 2.3vw, 1.85rem); line-height: 1.24; letter-spacing: 0.012em; color: rgba(255,255,255,0.95); }
@media (max-width:760px){ .showcase__tagline { font-size: clamp(1.05rem, 4.4vw, 1.5rem); } }
.showcase__kicker { color: rgba(255,255,255,0.66); margin-bottom: clamp(0.55rem,1.2vw,0.85rem); }
.slide::after { background: linear-gradient(to top, rgba(0,0,0,0.46) 0%, rgba(0,0,0,0.08) 26%, rgba(0,0,0,0) 46%); }

/* QA polish — release single-line nowrap on small screens; collapse desktop-only line breaks */
@media (max-width: 600px){
  .home-b2b__line, .eq-result, .eq-bridge, .p2-node .eq-emph__text { white-space: normal; text-wrap: balance; }
  .br-desk { display: none; }
}

/* Home product section — unified with Shop (light glass cards on shop backdrop) */
.home-shop { background-image: radial-gradient(120% 72% at 50% -10%, #FFFFFF, rgba(255,255,255,0) 58%), linear-gradient(180deg, #F4F4F2 0%, #E9E9E6 100%); }
.home-shop .link-arrow { color: var(--ink); border-bottom-color: var(--ink); }

/* Story pack — more breathing room (eyebrow -> line -> pack image) */
.pack--lead .swap__label p { margin-top: clamp(1.7rem, 3.2vh, 2.4rem); }
.pack--lead .pack__tilt { transform: translateY(clamp(1.4rem, 4.5vh, 3.2rem)); }

/* Story close — force-center tagline + clearer glass buttons on dark */
.close-cta .close-tagline { text-align: center; margin: 0 auto; max-width: 100%; letter-spacing: 0.24em; color: rgba(255,255,255,0.6); }
.close-cta .gbtn-glass { border-color: rgba(255,255,255,0.36); }
.close-cta .gbtn-glass--pri { background: rgba(255,255,255,0.22); }
.close-cta .gbtn-glass--gho { background: rgba(255,255,255,0.10); }
.close-cta .gbtn-glass:hover { border-color: rgba(255,255,255,0.6); }

/* Story hero — deeper cinematic scrim (match other moody heroes; better legibility) */
.story-page .hero-full::after {
  background:
    linear-gradient(100deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 40%, rgba(0,0,0,0) 66%),
    linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.34) 40%, rgba(0,0,0,0.14) 66%, rgba(0,0,0,0.30) 100%);
}
.story-page .hero-full__media img { filter: brightness(0.94) saturate(0.96); }

/* Shop — lift readability over the faint fixed backdrop (keep subtle texture) */
body.shop-light::after { background: linear-gradient(180deg, rgba(247,247,245,0.90) 0%, rgba(235,235,232,0.96) 100%); }
body.shop-light::before { filter: grayscale(100%) brightness(1.1) contrast(0.9); }
.shop-light .trustline { color: rgba(40,33,24,0.6); }
.shop-light .shop-impact-line { color: #2B2620; }
.shop-light .shop-impact-line em { color: var(--ink); }

/* Shop — trust chips (glass) + "Not a donation — a wage." glass tag */
.trustchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trustchip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #5B554C; background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 24px -16px rgba(40,33,24,0.4); padding: 9px 15px; border-radius: 999px; }
.trustchip i { width: 4px; height: 4px; border-radius: 50%; background: rgba(40,33,24,0.35); flex: none; }
.shop-light .shop-impact-line em { display: inline-block; margin-bottom: 0.9rem; font-family: var(--sans); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72em; color: var(--ink); background: none; border: 0; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Shop — trust chips sit closer to the product cards, with more space before the statement */
.shop-light .shop-stage { padding-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.shop-light .shop-info { padding-top: clamp(1.2rem, 2.5vw, 2rem); }
.trustchips { margin-bottom: clamp(3.6rem, 7vw, 5.6rem); }

/* Story close — elderly hands holding the product as a moody backdrop */
.close-cta { background-color: #0E0C0A; background-image: linear-gradient(to bottom, rgba(11,9,7,0.66) 0%, rgba(11,9,7,0.74) 52%, rgba(8,6,4,0.84) 100%), url("../img/product-detail-09.jpg"); background-size: cover; background-position: center 44%; background-repeat: no-repeat; }

/* Cinema scroll hint — minimal, bottom-right, persistent */
.cinema__scroll { left: auto; right: clamp(1.4rem, 3vw, 2.6rem); bottom: clamp(1.4rem, 3.5vh, 2.4rem); transform: none; align-items: flex-end; gap: 8px; }
.cinema__scroll span { color: rgba(255,255,255,0.5); font-size: 0.52rem; }
.cinema__scroll i { height: 36px; background: rgba(255,255,255,0.18); }


/* Story equation — lifestyle image backdrop + frosted glass panels (Option A) */
.story-page .equation { background-image: linear-gradient(rgba(248,246,241,0.42), rgba(239,235,228,0.56)), url("../img/home-life-2.jpg"); background-size: cover; background-position: center; background-attachment: fixed; }
.story-page .eq-panel { background: rgba(255,255,255,0.64); -webkit-backdrop-filter: blur(22px) saturate(122%); backdrop-filter: blur(22px) saturate(122%); }
.story-page .eq-panel--solution { background: rgba(255,255,255,0.78); }
@media (max-width: 760px){ .story-page .equation { background-attachment: scroll; } }

/* Footer — Instagram link */
.footer-ig { display: inline-flex; align-items: center; gap: 8px; }
.footer-ig svg { flex: none; }

/* Footer — consistent list text size (location matches links) */
.footer-grid li { font-size: 0.88rem; line-height: 1.6; }
.footer-grid li:not(:has(a)) { color: #82827B; }