/* fonts, self-hosted (no Google Fonts: nothing sent to Google) */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant-garamond-latin-var.woff2) format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(/fonts/cormorant-garamond-latin-italic-var.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-var.woff2) format("woff2"); }
/* ovane v3 design system.
   Layout idea: warm editorial pages whose colour follows the flavour you pick
   (Original glacier, Vanilla, Caramel, Mocha). Big serif type, product photos in arches,
   slow confident motion. One deliberate light look (brand site), colours set explicitly. */
:root {
  /* flavour theme: JS rewrites these five + band when a flavour is picked */
  --accent: #2B5578;     /* tin colour */
  --deep: #1B2F42;       /* darkest shade for text on tint + footer */
  --tint: #D1D6D8;       /* soft wash for alternate sections */
  --btn: #2B5578;        /* button fill (always readable with --btn-ink) */
  --btn-ink: #F6F2ED;
  --band: #2B5578;       /* full-colour bands */
  --band-ink: #E9E2D6;
  /* fixed neutrals */
  --page: #F6F2ED;
  --paper: #fbf8f3;
  --sand: #E6D8C6;
  --ink: #1B2A38;
  --muted: #5d6670;
  --line: rgba(28, 37, 48, .12);
  --gold: #B8914F;
  /* type */
  /* brand guidelines v2 (22 Oct): Cormorant Garamond for headlines + logo, Inter for labels + body */
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Inter", "Helvetica Neue", Arial, sans-serif; /* labels: Inter Medium caps, wide spacing */
  --t-mega: clamp(3.2rem, 9vw, 8.2rem);
  --t-h1: clamp(3rem, 7vw, 6.2rem);
  --t-h2: clamp(2.4rem, 5vw, 4.6rem);
  --t-h3: clamp(1.5rem, 2.3vw, 1.95rem);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --wrap: 1280px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.themed, .themed * { transition: background-color .7s var(--ease), color .7s var(--ease), border-color .7s var(--ease), fill .7s var(--ease); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.sec { padding-block: clamp(80px, 11vw, 150px); }
.sec--tint { background: var(--tint); }
.sec--paper { background: var(--paper); }

/* type */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: .98; }
h2 { font-size: var(--t-h2); line-height: 1.02; }
h3 { font-size: var(--t-h3); line-height: 1.15; font-weight: 500; letter-spacing: 0; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: var(--accent); }
p { margin: 0; max-width: 60ch; }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--muted); }
.kicker { font: 500 .72rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.fine { font-size: .78rem; color: var(--muted); line-height: 1.5; }
sup { font-size: .6em; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; font: 500 .95rem/1 var(--sans); letter-spacing: .01em; padding: 17px 28px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .7s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(20, 30, 40, .45); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px currentColor; }
.btn--line:hover { box-shadow: inset 0 0 0 1px currentColor, 0 12px 28px -14px rgba(20,30,40,.35); }
.btn--sm { padding: 12px 20px; font-size: .86rem; }

/* announce + nav */
.announce { background: var(--band); color: var(--band-ink); font: 500 .74rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; text-align: center; padding: 11px 16px; }
.announce a { color: inherit; }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--page); }
.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; gap: 20px; }
.logo { display: inline-block; width: 118px; aspect-ratio: 480 / 157; font-size: 0; color: transparent; text-decoration: none; justify-self: start; background: var(--accent); -webkit-mask: url(/img/ovane-logo.png) no-repeat center / contain; mask: url(/img/ovane-logo.png) no-repeat center / contain; }
.nav-links { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.nav-links a, .nav-b2b { text-decoration: none; position: relative; padding-block: 6px; }
.nav-links a::after, .nav-b2b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current]::after, .nav-b2b:hover::after, .nav-b2b[aria-current]::after { transform: scaleX(1); }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 22px; font-size: .9rem; }
.nav-b2b { font: 500 .78rem/1 var(--mono); letter-spacing: .12em; }
.lang { font: 500 .78rem/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
.lang b { color: var(--ink); font-weight: 500; }
@media (max-width: 900px) { .nav-links { display: none; } .nav .wrap { grid-template-columns: 1fr auto; } .lang { display: none; } }
@media (max-width: 440px) { .nav-right .btn { padding: 11px 14px; font-size: .8rem; } .nav-right { gap: 14px; } }

/* flavour picker (shared) */
.flavours-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.fp { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: .9rem; transition: border-color .3s, transform .25s var(--ease), background-color .3s; }
.fp:hover { transform: translateY(-1px); }
.fp i { width: 22px; height: 22px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.fp[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }

/* reveal on scroll: elements rest visible; JS only adds a gentle lift */
.lift { transition: transform 1s var(--ease), opacity 1s var(--ease); }
.lift.is-below { transform: translateY(28px); opacity: .35; }
@media (prefers-reduced-motion: reduce) { .lift.is-below { transform: none; opacity: 1; } * { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* newsletter */
.join { background: var(--band); color: var(--band-ink); border-radius: clamp(20px, 3vw, 36px); padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 88px); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end; position: relative; overflow: hidden; }
.join > * { min-width: 0; position: relative; }
.join h2 { color: inherit; }
.join h2 em { color: inherit; }
.join .lead { color: color-mix(in srgb, var(--band-ink) 78%, transparent); }
.join-form { display: grid; gap: 14px; }
.join-row { display: flex; gap: 10px; background: color-mix(in srgb, var(--band-ink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--band-ink) 28%, transparent); border-radius: 999px; padding: 6px; }
.join-row input { flex: 1; min-width: 0; background: transparent; border: 0; color: inherit; font: inherit; padding: 12px 16px; outline: none; }
.join-row input::placeholder { color: color-mix(in srgb, var(--band-ink) 60%, transparent); }
.join-row .btn { background: var(--band-ink); color: var(--band); }
.join label.consent { display: flex; gap: 10px; font-size: .8rem; line-height: 1.45; color: color-mix(in srgb, var(--band-ink) 80%, transparent); }
.join label.consent input { margin-top: 2px; accent-color: var(--band-ink); }
.join-done { font-family: var(--serif); font-size: 1.6rem; }
.join-mark { position: absolute; right: -2%; bottom: -18%; font-family: var(--serif); font-size: clamp(10rem, 26vw, 24rem); line-height: 1; opacity: .07; pointer-events: none; letter-spacing: -.04em; }
@media (max-width: 820px) { .join { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .join-row { flex-direction: column; border-radius: 22px; } }

/* footer */
.foot { background: var(--deep); color: color-mix(in srgb, #fff 78%, transparent); padding-block: 90px 36px; margin-top: clamp(80px, 10vw, 140px); }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
.foot-top > * { min-width: 0; }
.foot .logo { width: clamp(170px, 18vw, 240px); background: #E9E2D6; }
.foot h4 { margin: 0 0 16px; font: 500 .72rem/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, #fff 55%, transparent); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
.social { display: flex; gap: 10px; }
.social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, #fff 25%, transparent); transition: background-color .3s, color .3s; }
.social a:hover { background: #fff; color: var(--deep); text-decoration: none; }
.social svg { width: 18px; height: 18px; }
.foot-legal { margin-top: 64px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 400 .74rem/1.4 var(--mono); letter-spacing: .06em; }
@media (max-width: 820px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-top > :first-child { grid-column: 1 / -1; } }

/* cookie bar (same as the live site) */
.cookiebar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 520px; margin: 0 auto; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 50px -12px rgba(20,30,40,.35); padding: 20px 22px; font-size: .95rem; line-height: 1.5; }
.cookiebar[hidden] { display: none; }
.cookiebar p { margin: 0 0 14px; color: var(--muted); }
.cookiebar p.cookie-done { margin: 0; color: var(--ink); }
.cookiebar a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cookiebar .row { display: flex; gap: 10px; }
.cookiebar .row[hidden] { display: none; }
.cookiebar .row button { flex: 1; font: inherit; font-weight: 600; padding: 12px; border-radius: 999px; border: 1px solid var(--btn); background: transparent; color: var(--ink); cursor: pointer; }
.cookiebar .row button[data-ads="yes"] { background: var(--btn); color: var(--btn-ink); }

/* live site: language switch, forms, confirmed bar */
.lang a { color: inherit; text-decoration: none; }
.lang a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .nav .lang { display: inline; } }
@media (max-width: 560px) { .nav-b2b { display: none; } }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.mini-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 400px; margin-top: 14px; }
.mini-form .mini-join { max-width: none; margin-top: 0; }
.mini-consent { display: flex; gap: 8px; font-size: .74rem; line-height: 1.4; color: var(--muted); }
.mini-consent input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.mini-consent a, .consent a { color: inherit; }
.join-err { margin: 0; min-height: 0; font-size: .82rem; color: #9b2c1f; }
.join .join-err { color: inherit; font-weight: 600; }
.join-err:empty { display: none; }
.confirmed { background: var(--paper); border-bottom: 1px solid var(--line); text-align: center; padding: 14px 16px; font-size: .95rem; }
.confirmed[hidden] { display: none; }

/* consent lines: checkbox on the left, text + link flowing as one paragraph */
.mini-consent, .join label.consent { display: block; position: relative; padding-left: 26px; }
.mini-consent input, .join label.consent input { position: absolute; left: 0; top: 1px; margin: 0; }
/* phone nav: language switch and button stay on one line */
.lang { white-space: nowrap; }
@media (max-width: 440px) { .nav-right .btn { white-space: nowrap; padding: 10px 13px; font-size: .74rem; } .nav-right { gap: 12px; } .nav .logo { width: 96px; } }
@media (max-width: 440px) { .announce { letter-spacing: .12em; font-size: .66rem; } }

/* founders' story pop-up */
.story { width: min(680px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; border: 0; border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 100px -30px rgba(10,15,20,.55); overflow: auto; overscroll-behavior: contain; }
.story::backdrop { background: rgba(18,22,28,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.story[open] { animation: story-in .5s var(--ease) both; }
.story[open]::backdrop { animation: story-fade .4s ease both; }
@keyframes story-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes story-fade { from { opacity: 0; } to { opacity: 1; } }
.story-img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.story-body { padding: clamp(24px, 5vw, 48px); display: grid; gap: 16px; justify-items: start; }
.story-body h2 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); line-height: 1.05; }
.story-body p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: color-mix(in srgb, var(--ink) 86%, transparent); }
.story-sign { font-family: var(--serif); font-style: italic; font-size: 1.5rem !important; color: var(--accent) !important; margin-top: 6px !important; }
.story-close { position: sticky; top: 14px; float: right; margin: 14px 14px -58px 0; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--paper) 88%, transparent); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.4); }
.story-close:hover { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .story[open], .story[open]::backdrop { animation: none; } }

/* phones: refill + sticks photos show the whole pouch and the scoop */
@media (max-width: 460px) { .kit-more .kc .kit-img { aspect-ratio: 1 / 1; } .kit-more .kc .kit-img img { object-position: center 78%; } }
/* phones: all four flavours fit in the hero bar without scrolling */
@media (max-width: 480px) {
  .stage .stage-pick { left: 8px; right: 8px; transform: none; max-width: none; justify-content: space-between; gap: 2px; padding: 5px; overflow: visible; }
  .stage-pick .fp { flex: 0 1 auto; padding: 6px 9px 6px 6px !important; font-size: .76rem !important; gap: 5px !important; }
  .stage-pick .fp i { width: 14px !important; height: 14px !important; }
}
/* very small phones (320-360 px) */
@media (max-width: 360px) {
  .nav .logo { width: 78px; }
  .nav-right { gap: 9px; }
  .nav-right .btn { padding: 9px 10px; font-size: .68rem; }
  .stage .stage-pick { left: 5px; right: 5px; padding: 4px; gap: 0; }
  .stage-pick .fp { padding: 5px 6px 5px 5px !important; font-size: .66rem !important; gap: 4px !important; }
  .stage-pick .fp i { width: 11px !important; height: 11px !important; }
}

/* calmer sizes (23 Oct): hero and coffee banner no longer fill the whole screen */
main .hero { padding-block: clamp(28px, 4vw, 56px) 0; }
main .hero h1 { font-size: clamp(3rem, 6vw, 5.6rem); }
@media (min-width: 761px) { main .stage { aspect-ratio: 16 / 8.5; width: 100%; } main .stage img { object-position: center 46%; } }
main .moment { padding: clamp(30px, 4vw, 56px) clamp(24px, 5vw, 72px); gap: clamp(22px, 4vw, 56px); }
main .moment h2 { font-size: clamp(2.1rem, 3.8vw, 3.6rem); }
main .moment-cup { max-width: 300px; width: 100%; justify-self: end; }
main .stats { padding-top: 22px; gap: 16px; }
main .stat b { font-size: clamp(2.3rem, 3.6vw, 3.4rem); }
@media (max-width: 820px) { main .moment-cup { justify-self: start; max-width: 240px; } }
@media (max-width: 460px) { main .stats { grid-template-columns: repeat(3, 1fr); gap: 10px; } main .stat b { font-size: 2rem; } main .stat > span { font-size: .58rem; letter-spacing: .12em; } }

/* 24 Oct: hero line, sign-up under the hero photo, B2B reasons */
.hero-easy { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.25; color: var(--accent); margin: 0; }
.hero-cta { margin: clamp(18px, 2.4vw, 28px) auto 0; max-width: 640px; display: grid; gap: 10px; }
.cta-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cta-row { display: flex; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 6px; }
.cta-row input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; padding: 12px 18px; outline: none; color: var(--ink); }
.cta-row:focus-within { border-color: var(--accent); }
.cta-row .btn { white-space: nowrap; }
.hero-cta .mini-done { text-align: center; }
@media (max-width: 520px) { .cta-row { flex-direction: column; border-radius: 22px; } .cta-row .btn { width: 100%; } }
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.reasons > * { min-width: 0; }
.reason { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 3vw, 34px); display: grid; gap: 10px; align-content: start; }
.reason-n { font-family: var(--serif); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--accent); }
.reason h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.15; }
.reason p { color: var(--muted); margin: 0; }
@media (max-width: 860px) { .reasons { grid-template-columns: 1fr; } }
main .b-hero .b-title { font-size: clamp(2.3rem, 4.4vw, 4rem); line-height: 1.02; }
main .b-title .line { display: block; }

/* "ovane is for you if you…" tick list (24 Oct, option A) */
.foryou { margin-bottom: clamp(40px, 6vw, 72px); }
.fy-head { display: grid; gap: 14px; margin-bottom: clamp(22px, 3.5vw, 40px); justify-items: start; }
.fy-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 760px; }
.tick { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; gap: 16px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 18px 20px; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.4; color: var(--ink); transition: border-color .3s, background-color .3s, transform .25s var(--ease); -webkit-tap-highlight-color: transparent; }
.tick:hover { transform: translateY(-2px); }
.tick:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tick .box { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--accent); display: grid; place-items: center; color: transparent; font-size: .9rem; transition: background-color .3s, color .3s; }
.tick[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }
.tick[aria-pressed="true"] .box { background: var(--accent); color: var(--paper); }
.tick-count { font: 500 .78rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); min-height: 1em; margin: 18px 0 0; }
.payoff { margin-top: clamp(22px, 3vw, 36px); max-width: 760px; background: var(--band); color: var(--band-ink); border-radius: 28px; padding: clamp(24px, 4vw, 44px); display: grid; gap: 12px; opacity: .45; transition: opacity .6s var(--ease); }
.foryou.has-tick .payoff { opacity: 1; }
.payoff h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); color: inherit; line-height: 1.08; }
.payoff p { margin: 0; color: color-mix(in srgb, var(--band-ink) 82%, transparent); font-size: 1.05rem; max-width: 60ch; }
.payoff .btn { justify-self: start; background: var(--band-ink); color: var(--band); margin-top: 6px; }