/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-08.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-09.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-08.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-09.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-08.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-09.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-10.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-11.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-12.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/font-13.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/font-14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/font-15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/font-16.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/font-17.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-13.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-16.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/font-17.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/font-13.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/font-14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/font-15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/font-16.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/font-17.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/font-13.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/font-14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/font-15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/font-16.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/font-17.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-13.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-16.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/font-17.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-13.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-14.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-15.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-16.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/font-17.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   NECTARI — premium landing system  ·  "Maison"
   Editorial restraint · Cormorant display + Manrope · warm bone,
   espresso-forest ink, terracotta-amber accent. FMCG premium.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* surfaces */
  --bone:#F3ECDF;        /* page */
  --bone-2:#EDE4D3;      /* subtle band */
  --paper:#FCFAF4;       /* raised card */
  --forest:#1C3318;      /* rich dark section */
  --forest-2:#142711;
  --cream:#F2EBDB;

  /* ink */
  --ink:#1B2914;
  --ink-2:#3A4A2D;
  --ink-soft:#5E6B52;
  --on-dark:#F2EBDB;
  --on-dark-soft:rgba(242,235,219,.66);
  --line:rgba(27,41,20,.14);
  --line-dark:rgba(242,235,219,.16);

  /* accent (tweakable) */
  --accent:#C4632B;      /* terracotta-amber */
  --accent-deep:#A94E1C;
  --accent-soft:#E9D9C4;
  --honey:#D7A23F;
  --on-accent:#FCFAF4;

  /* type — Montserrat (ExtraBold/Black display, Regular/Medium body) */
  --serif:'Montserrat', system-ui, sans-serif;
  --sans:'Montserrat', system-ui, sans-serif;

  /* roundedness (tweakable) */
  --rscale:1;
  --r-lg:calc(20px * var(--rscale));
  --r-md:calc(13px * var(--rscale));
  --r-sm:calc(8px * var(--rscale));
  --r-pill:calc(100px * var(--rscale));

  /* layout */
  --maxw:1280px;
  --gutter:clamp(22px, 5.5vw, 72px);
  --section-y:clamp(82px, 11vw, 168px);

  /* fluid type — generous, editorial */
  --fs-hero:clamp(44px, 6.8vw, 84px);
  --fs-h2:clamp(34px, 5vw, 76px);
  --fs-h3:clamp(22px, 2.3vw, 30px);
  --fs-lead:clamp(18px, 1.4vw, 21px);
  --fs-body:clamp(15px, 1.1vw, 17px);
  --fs-eyebrow:clamp(12px, .92vw, 13px);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bone);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  line-height:1.62;
  letter-spacing:.002em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- PRIMITIVES ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:1520px}
.section{padding-block:var(--section-y);position:relative;overflow-x:clip}
.section--tight{padding-block:clamp(56px,7vw,108px)}

h1,h2,h3,h4{font-family:var(--serif);font-weight:800;line-height:1.0;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.08}
p{text-wrap:pretty}
.serif-i{font-style:italic}
.acc{color:var(--accent)}

.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-weight:600;font-size:var(--fs-eyebrow);
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
}
.eyebrow::before{content:"";width:30px;height:1.5px;background:currentColor;opacity:.55}
.eyebrow--center::after{content:"";width:30px;height:1.5px;background:currentColor;opacity:.55}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  height:60px;padding:0 36px;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.04em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;position:relative}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .35s var(--ease)}
.btn--solid{background:var(--accent);color:var(--on-accent);box-shadow:0 12px 30px -14px var(--accent-deep)}
.btn--solid:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 18px 40px -16px var(--accent-deep)}
.btn--solid:hover svg{transform:translateX(4px)}
.btn--ink{background:var(--ink);color:var(--on-dark)}
.btn--ink:hover{transform:translateY(-2px);box-shadow:0 16px 36px -16px rgba(27,41,20,.6)}
.btn--ghost{background:transparent;border:1.4px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--text{height:auto;padding:0;border-radius:0;gap:9px}
.btn--text::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1.4px;background:currentColor;
  transform:scaleX(.001);transform-origin:left;transition:transform .4s var(--ease)}
.btn--text:hover::after{transform:scaleX(1)}
.btn--text:hover svg{transform:translateX(4px)}
.btn--sm{height:48px;padding:0 24px;font-size:14px}
.btn--lg{height:66px;padding:0 42px;font-size:16px}

/* hairline + ghost numerals */
.rule{height:1px;background:var(--line);border:0}
.ghost-num{font-family:var(--serif);font-weight:500;line-height:.8;font-feature-settings:"lnum"}

/* ── scroll reveal ──────────────────────────────────────────
   BULLETPROOF: content is fully VISIBLE by default. Hiding only
   happens once JS adds html.reveal-ready (gated on a live rAF
   clock). If the animation clock is frozen/throttled, nothing is
   ever hidden — content always shows. */
html.reveal-ready [data-rise]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease), transform .9s var(--ease)}
html.reveal-ready [data-rise].in{opacity:1;transform:none}

/* heading: rise with the standard opacity+translate reveal + accent "ignite"
   (no clip-path — clip-path transitions can stick on a throttled clock) */
html.reveal-ready [data-rise].rise-h .acc,html.reveal-ready [data-rise].rise-h .pop{color:color-mix(in srgb, var(--accent) 45%, var(--ink));transition:color .7s ease .35s}
html.reveal-ready [data-rise].rise-h.in .acc,html.reveal-ready [data-rise].rise-h.in .pop{color:var(--accent)}

/* card entrance: lift + slight scale */
html.reveal-ready [data-rise].rise-card{transform:translateY(36px) scale(.972)}
html.reveal-ready [data-rise].rise-card.in{transform:none}

/* eyebrow rule grows out */
html.reveal-ready [data-rise] .eyebrow::before{width:0;transition:width .8s var(--ease) .2s}
html.reveal-ready [data-rise].in .eyebrow::before{width:30px}

/* step accent line draws across (transform-based — resolves reliably) */
.stp::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--accent);
  transform-origin:left}
html.reveal-ready .stp::after{transform:scaleX(0);transition:transform .7s var(--ease) .08s}
html.reveal-ready [data-rise].stp.in::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  html.reveal-ready [data-rise]{opacity:1!important;transform:none!important}
  html.reveal-ready [data-rise] .eyebrow::before{width:30px!important}
  html.reveal-ready .stp::after{transform:scaleX(1)!important}
}

/* ============================================================
   NAV
   ============================================================ */
.px-nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent}
.px-nav.scrolled{background:color-mix(in srgb, var(--bone) 82%, transparent);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line)}
.px-nav-in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:84px}
.px-brand{display:flex;align-items:center;gap:13px}
.px-seal{width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none;
  transition:background .3s}
.px-seal img{height:26px;width:auto;filter:brightness(0) invert(1)}
.px-word{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:.16em;line-height:1}
.px-links{display:flex;gap:34px}
.px-links a{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;position:relative;
  color:var(--ink);opacity:.78;transition:opacity .25s}
.px-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:1.4px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.px-links a:hover{opacity:1}
.px-links a:hover::after{transform:scaleX(1)}
.px-nav-right{display:flex;align-items:center;gap:22px}
.px-phone{font-size:14px;font-weight:600;letter-spacing:.02em;opacity:.85;transition:opacity .25s;white-space:nowrap}
.px-phone:hover{opacity:1}
.px-burger{display:none;width:46px;height:46px;border-radius:50%;border:1.4px solid var(--line);
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.px-burger i{width:18px;height:1.6px;background:currentColor;display:block;transition:.3s}
.px-burger.x i:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.px-burger.x i:nth-child(2){opacity:0}
.px-burger.x i:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.px-drawer{display:none}

/* ============================================================
   HERO
   ============================================================ */
.px-hero{position:relative;padding-top:128px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% 8%, color-mix(in srgb,var(--accent) 10%, transparent), transparent 55%),
    radial-gradient(90% 70% at 8% 100%, color-mix(in srgb,var(--honey) 14%, transparent), transparent 60%),
    var(--bone);
}
.px-hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,64px);align-items:center;
  padding-bottom:clamp(56px,7vw,104px);padding-top:clamp(20px,3vw,48px)}
.px-hero-copy{max-width:42rem}
.px-hero h1{font-size:var(--fs-hero);margin:22px 0 0;letter-spacing:-.025em;line-height:1.04;font-weight:800;text-wrap:normal}
.px-hero h1 em{font-style:italic;font-weight:800;color:var(--accent)}
.px-hero h1 .pop{color:var(--accent)}
.px-hero .lead{font-size:var(--fs-lead);color:var(--ink-2);max-width:540px;margin-top:28px;line-height:1.45;font-weight:500}
.px-price{display:inline-flex;align-items:baseline;gap:10px;margin-top:30px}
.px-price .num{font-family:var(--serif);font-size:clamp(34px,3.6vw,46px);font-weight:600;line-height:1}
.px-price .cur{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);color:var(--accent)}
.px-price .lbl{font-size:13.5px;color:var(--ink-soft);font-weight:500;letter-spacing:.02em}
.px-hero-cta{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:34px}
.px-hero-stats{display:flex;gap:0;margin-top:48px;border-top:1px solid var(--line);padding-top:26px;max-width:34rem}
.px-stat{flex:1;display:flex;flex-direction:column;gap:3px;padding-right:18px}
.px-stat + .px-stat{padding-left:24px;border-left:1px solid var(--line)}
.px-stat b{font-family:var(--serif);font-size:clamp(28px,3vw,40px);font-weight:600;line-height:1}
.px-stat span{font-size:12.5px;color:var(--ink-soft);font-weight:500;letter-spacing:.02em}

.px-hero-visual{position:relative;min-height:clamp(420px,52vw,640px);display:flex;align-items:center;justify-content:center}
.px-pedestal{position:absolute;width:min(80%,460px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--paper) 92%, transparent), color-mix(in srgb,var(--bone-2) 70%, transparent) 62%, transparent 73%);
  top:48%;left:50%;transform:translate(-50%,-50%)}
.px-pedestal::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--line);
  transform:scale(1.12);opacity:.5}
.px-bottle{position:absolute;filter:drop-shadow(0 36px 40px rgba(27,41,20,.26))}
.px-bottle.front{height:clamp(360px,44vw,600px);z-index:3;left:50%;bottom:0;transform:translateX(-46%);
  animation:pxfloat 8s ease-in-out infinite}
.px-bottle.back{height:clamp(280px,34vw,470px);z-index:2;left:50%;bottom:7%;transform:translateX(-92%);
  opacity:.96;animation:pxfloat2 9s ease-in-out infinite .9s}
@keyframes pxfloat{0%,100%{transform:translateX(-46%) translateY(0)}50%{transform:translateX(-46%) translateY(-13px)}}
@keyframes pxfloat2{0%,100%{transform:translateX(-92%) translateY(0)}50%{transform:translateX(-92%) translateY(-10px)}}
.px-hero-tag{position:absolute;right:2%;top:14%;writing-mode:vertical-rl;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600}

/* ============================================================
   MARQUEE
   ============================================================ */
.px-marquee{background:var(--ink);color:var(--on-dark);overflow:hidden;padding-block:20px}
.px-marquee-track{display:flex;gap:0;width:max-content;animation:pxmarq 32s linear infinite}
.px-marquee-track span{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);font-style:italic;
  padding:0 28px;display:inline-flex;align-items:center;gap:28px;white-space:nowrap}
.px-marquee-track span::after{content:"✳";font-style:normal;font-size:14px;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.px-marquee-track{animation:none}}
@keyframes pxmarq{to{transform:translateX(-50%)}}

/* ============================================================
   VALUES / BENEFITS
   ============================================================ */
.px-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,56px);align-items:end;margin-bottom:clamp(48px,6vw,84px)}
.px-head h2{margin-top:18px}
.px-head .px-head-aside{padding-bottom:8px}
.px-head .px-head-aside p{font-size:var(--fs-lead);color:var(--ink-2);max-width:36rem}
.px-values .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,22px)}
.vcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.4vw,38px);display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s}
.vcard::after{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.vcard:hover{transform:translateY(-7px);box-shadow:0 30px 64px -30px rgba(27,41,20,.5);border-color:transparent}
.vcard:hover::after{transform:scaleX(1)}
.vcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.vcard .vnum{font-size:14px;font-weight:800;color:var(--accent);letter-spacing:.12em}
.vcard .vico{width:58px;height:58px;border-radius:50%;background:color-mix(in srgb,var(--accent) 12%, transparent);
  display:grid;place-items:center;color:var(--accent);transition:background .45s, color .45s, transform .45s var(--ease)}
.vcard:hover .vico{background:var(--accent);color:var(--on-accent);transform:scale(1.06)}
.vcard .vico svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vcard h3{font-size:clamp(20px,2vw,26px);margin-bottom:11px;font-weight:800;letter-spacing:-.01em}
.vcard p{font-size:var(--fs-body);color:var(--ink-soft)}
/* featured card */
.vcard.feat{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.vcard.feat::after{background:var(--on-accent)}
.vcard.feat .vnum{color:var(--on-accent);opacity:.72}
.vcard.feat .vico{background:rgba(255,255,255,.18);color:var(--on-accent)}
.vcard.feat:hover .vico{background:var(--on-accent);color:var(--accent)}
.vcard.feat h3{color:var(--on-accent)}
.vcard.feat p{color:color-mix(in srgb,var(--on-accent) 84%, transparent)}

/* conversion strip */
.vcta{margin-top:clamp(16px,1.6vw,22px);background:var(--forest);color:var(--on-dark);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,42px) clamp(28px,3vw,52px);display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.vcta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 120% at 100% 0%, color-mix(in srgb,var(--accent) 26%, transparent), transparent 60%)}
.vcta-text{max-width:48rem;position:relative;z-index:1}
.vcta-text strong{font-weight:800;font-size:clamp(20px,2.2vw,28px);display:block;line-height:1.12;letter-spacing:-.01em}
.vcta-text span{display:block;margin-top:9px;color:var(--on-dark-soft);font-size:var(--fs-body)}
.vcta .btn{flex:none;position:relative;z-index:1}

/* ============================================================
   SEGMENTS / FOR WHOM  (forest lookbook)
   ============================================================ */
.px-segments{background:var(--forest);color:var(--on-dark)}
.px-segments .eyebrow{color:var(--honey)}
.px-segments .px-head h2{color:var(--on-dark)}
.px-segments .px-head-aside p{color:var(--on-dark-soft)}
.seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.seg-card{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:clamp(440px,46vw,560px);
  display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;
  border:1px solid var(--line-dark);transition:transform .5s var(--ease)}
.seg-card:hover{transform:translateY(-8px)}
.seg-ph{position:absolute;inset:0;z-index:-2}
.seg-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(20,39,17,.1) 22%, rgba(15,28,12,.92) 100%)}
.seg-ph.cafe{background:linear-gradient(150deg,#c4632b,#8a3f1a)}
.seg-ph.resto{background:linear-gradient(150deg,#2f5128,#16290f)}
.seg-ph.home{background:linear-gradient(150deg,#d7a23f,#a96e22)}
.seg-tex{position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.seg-glyph{position:absolute;right:-4%;top:-7%;font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(150px,18vw,260px);line-height:.8;opacity:.22;z-index:-1;color:#fff}
.seg-body{padding:clamp(26px,2.6vw,38px);position:relative;z-index:1}
.seg-body .tag{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.82;font-weight:600}
.seg-body h3{font-size:clamp(28px,3vw,40px);margin:12px 0 14px;color:#fff}
.seg-body p{font-size:var(--fs-body);color:rgba(255,255,255,.86);max-width:24rem}
.seg-body ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px;
  border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
.seg-body li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;color:rgba(255,255,255,.92)}
.seg-body li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--honey);flex:none}

/* ============================================================
   FLAVOR LIBRARY  (reused FlavorPicker classes)
   ============================================================ */
.flavors{background:var(--bone-2)}
.flavors .section-head .eyebrow{color:var(--accent)}
.flavors .section-head{max-width:52rem;margin-bottom:clamp(36px,4vw,56px)}
.flavors .section-head h2{margin-top:16px}
.flavors .section-head p{margin-top:18px;font-size:var(--fs-lead);color:var(--ink-2);max-width:40rem}
.fp-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:22px}
.fp-search{position:relative;flex:1;min-width:230px;max-width:400px}
.fp-search input{width:100%;height:54px;border-radius:var(--r-pill);padding:0 22px 0 50px;
  background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;
  border:1.4px solid var(--line);outline:none;transition:border .25s, box-shadow .25s}
.fp-search input::placeholder{color:var(--ink-soft)}
.fp-search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%, transparent)}
.fp-search svg{position:absolute;left:19px;top:50%;transform:translateY(-50%);width:19px;height:19px;
  stroke:var(--ink-soft);fill:none;stroke-width:2}
.fp-cats{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.fp-cat{padding:10px 20px;border-radius:var(--r-pill);border:1.4px solid var(--line);
  color:var(--ink);font-weight:600;font-size:13.5px;letter-spacing:.01em;transition:all .22s}
.fp-cat:hover{border-color:var(--ink)}
.fp-cat.on{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.fp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;min-height:120px}
.fp-chip{display:flex;align-items:center;gap:12px;padding:15px 18px;border-radius:var(--r-md);
  background:var(--paper);border:1.4px solid var(--line);color:var(--ink);
  font-weight:600;font-size:14.5px;text-align:left;transition:all .2s var(--ease);position:relative;line-height:1.25}
.fp-chip .dot{width:10px;height:10px;border-radius:50%;flex:none;border:1.6px solid var(--line);transition:all .2s}
.fp-chip .fp-name{flex:1;min-width:0}
.fp-chip:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(27,41,20,.4)}
.fp-chip.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.fp-chip.on .dot{background:var(--on-accent);border-color:var(--on-accent)}
.fp-empty{grid-column:1/-1;text-align:center;padding:36px;color:var(--ink-soft);font-style:italic;font-family:var(--serif);font-size:20px}

/* "show all" toggle (mobile) */
.fp-more{margin-top:16px;width:100%;height:54px;border-radius:var(--r-pill);
  border:1.4px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:9px;transition:border .2s, background .2s}
.fp-more:hover{border-color:var(--accent)}
.fp-more svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2.4;transition:transform .3s}

/* dropdown */
.fp-dd{position:relative;flex:none;min-width:220px}
.fp-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:54px;
  padding:0 20px;border-radius:var(--r-pill);background:var(--paper);
  border:1.4px solid var(--line);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:14.5px;transition:border .25s}
.fp-dd-btn:hover{border-color:var(--ink)}
.fp-dd.open .fp-dd-btn{border-color:var(--accent)}
.fp-dd-btn svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;flex:none;transition:transform .3s}
.fp-dd.open .fp-dd-btn svg{transform:rotate(180deg)}
.fp-dd-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;list-style:none;
  background:var(--paper);border-radius:var(--r-md);padding:8px;border:1px solid var(--line);
  box-shadow:0 26px 56px -18px rgba(27,41,20,.4);max-height:330px;overflow:auto;
  display:flex;flex-direction:column;gap:2px;animation:ddIn .16s var(--ease)}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.fp-dd-menu li{padding:12px 15px;border-radius:var(--r-sm);color:var(--ink);font-weight:600;font-size:14.5px;
  cursor:pointer;transition:background .14s}
.fp-dd-menu li:hover{background:color-mix(in srgb,var(--ink) 6%, transparent)}
.fp-dd-menu li.on{background:var(--accent);color:var(--on-accent)}

/* tray */
.fp-tray{position:sticky;bottom:16px;margin-top:28px;background:var(--ink);color:var(--on-dark);
  border-radius:var(--r-lg);padding:20px clamp(20px,2.4vw,30px);display:flex;align-items:center;gap:22px;
  flex-wrap:wrap;box-shadow:0 26px 60px -20px rgba(27,41,20,.6);z-index:5}
.fp-tray .count{font-family:var(--serif);font-size:clamp(34px,3.4vw,48px);font-weight:600;line-height:1;color:var(--honey)}
.fp-tray .lbl{font-size:13px;color:var(--on-dark-soft);font-weight:500}
.fp-tray .picked{flex:1;min-width:180px;display:flex;gap:7px;flex-wrap:wrap}
.fp-tray .picked .pc{background:rgba(242,235,219,.1);color:var(--on-dark);border:1px solid var(--line-dark);
  border-radius:var(--r-pill);padding:6px 13px;font-size:12.5px;font-weight:600;display:inline-flex;gap:8px;align-items:center}
.fp-tray .picked .pc b{cursor:pointer;opacity:.6;font-weight:700}
.fp-tray .picked .pc b:hover{opacity:1}
.fp-tray .more{align-self:center;font-size:12.5px;color:var(--on-dark-soft);font-weight:500;font-style:italic;font-family:var(--serif)}

/* ============================================================
   HOW TO ORDER
   ============================================================ */
.px-steps .stp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,40px);position:relative}
.stp{display:flex;flex-direction:column;gap:14px;position:relative;padding-top:30px;border-top:1px solid var(--line)}
.stp .sn{font-family:var(--serif);font-size:clamp(56px,6vw,92px);font-weight:500;line-height:.8;color:var(--accent)}
.stp h3{font-size:clamp(20px,2vw,25px);margin-top:6px}
.stp p{color:var(--ink-soft);font-size:var(--fs-body)}

/* ============================================================
   CTA / CONFIGURATOR  (reused .cta-final / .cfg classes)
   ============================================================ */
.cta-final{background:var(--forest);color:var(--on-dark);position:relative;overflow:hidden}
.cta-final .blob{display:none}
.cta-final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 70% at 12% 0%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 55%),
             radial-gradient(70% 60% at 95% 100%, color-mix(in srgb,var(--honey) 16%, transparent), transparent 60%)}
.cta-final .glyph-wm{position:absolute;right:-2%;bottom:-12%;font-family:var(--serif);font-style:italic;
  font-size:clamp(200px,30vw,420px);line-height:.7;color:#fff;opacity:.05;pointer-events:none;z-index:0}
.cfg{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,80px);align-items:center}
.cfg-intro .eyebrow{color:var(--honey)}
.cfg-intro h2{color:var(--on-dark);margin-top:18px}
.cfg-intro h2 em{font-style:italic;color:var(--honey)}
.cfg-intro p{margin-top:22px;font-size:var(--fs-lead);color:var(--on-dark-soft);max-width:30rem}
.cfg-perks{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.cfg-perks li{list-style:none;display:flex;align-items:center;gap:14px;font-weight:500;font-size:var(--fs-body);color:var(--on-dark)}
.cfg-perks li svg{width:20px;height:20px;flex:none;stroke:var(--honey);fill:none;stroke-width:2.2}

.cfg-card{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,44px);box-shadow:0 40px 90px -34px rgba(0,0,0,.6)}
.cfg-steps{display:flex;gap:8px;margin-bottom:28px}
.cfg-steps .ss{flex:1;height:3px;border-radius:3px;background:var(--line)}
.cfg-steps .ss.on{background:var(--accent)}
.cfg-q{font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);font-weight:500;margin-bottom:8px;letter-spacing:-.01em}
.cfg-hint{font-size:14px;color:var(--ink-soft);margin-bottom:22px}
.cfg-opts{display:grid;gap:12px}
.cfg-opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:flex-start;gap:15px;padding:19px;border-radius:var(--r-md);
  border:1.5px solid var(--line);background:#fff;text-align:left;transition:all .2s var(--ease)}
.opt:hover{border-color:var(--accent)}
.opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%, #fff)}
.opt .ob{width:22px;height:22px;border-radius:50%;border:1.6px solid var(--line);flex:none;margin-top:1px;
  display:grid;place-items:center;transition:all .2s}
.opt.on .ob{border-color:var(--accent);background:var(--accent)}
.opt.on .ob::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.opt b{display:block;font-size:16px;font-weight:600;margin-bottom:2px}
.opt span{font-size:13.5px;color:var(--ink-soft)}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:17px}
.field label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.field input{height:56px;border-radius:var(--r-md);border:1.5px solid var(--line);padding:0 19px;
  font-family:var(--sans);font-size:16px;color:var(--ink);background:#fff;outline:none;transition:border .25s, box-shadow .25s}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%, transparent)}
.field input.err{border-color:#b3402f}
.cfg-summary{background:var(--bone-2);border-radius:var(--r-md);padding:17px 19px;margin-bottom:19px}
.cfg-summary .sl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cfg-summary .picks{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.cfg-summary .picks .pc{background:var(--accent);color:var(--on-accent);border-radius:var(--r-pill);padding:5px 12px;font-size:12.5px;font-weight:600}
.cfg-summary .empty{font-size:13.5px;color:var(--ink-soft);margin-top:9px;font-style:italic;font-family:var(--serif)}
.cfg-nav{display:flex;gap:12px;margin-top:24px;align-items:center}
.cfg-back{background:none;border:none;color:var(--ink-soft);font-weight:600;font-size:15px}
.cfg-back:hover{color:var(--ink)}
.cfg-done{text-align:center;padding:24px 0}
.cfg-done .check{width:78px;height:78px;border-radius:50%;background:var(--accent);margin:0 auto 20px;display:grid;place-items:center}
.cfg-done .check svg{width:38px;height:38px;stroke:#fff;fill:none;stroke-width:3}
.cfg-done h3{font-size:clamp(26px,2.6vw,34px)}
.cfg-done p{color:var(--ink-soft);margin-top:12px;font-size:var(--fs-body)}

/* ============================================================
   FOOTER
   ============================================================ */
.px-foot{background:var(--ink);color:var(--on-dark);padding-block:clamp(60px,7vw,100px) 34px}
.px-foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(28px,3vw,56px);
  padding-bottom:clamp(44px,5vw,68px);border-bottom:1px solid var(--line-dark)}
.px-foot-brand .px-word{font-size:38px;margin-bottom:18px;display:inline-block;letter-spacing:.12em}
.px-foot-brand p{color:var(--on-dark-soft);font-size:var(--fs-body);max-width:24rem}
.px-foot-col h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--honey);margin-bottom:18px}
.px-foot-col ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.px-foot-col a,.px-foot-col li{font-size:15px;color:var(--on-dark-soft);transition:color .25s}
.px-foot-col a:hover{color:var(--on-dark)}
.px-foot-contact .big{font-family:var(--serif);font-size:clamp(24px,2.4vw,30px);font-weight:600;margin-bottom:8px}
.px-foot-contact .sm{font-size:14px;color:var(--on-dark-soft);margin-bottom:22px;line-height:1.7}
.px-soc{display:flex;gap:11px}
.px-soc a{width:46px;height:46px;border-radius:50%;border:1.4px solid var(--line-dark);display:grid;place-items:center;transition:all .25s}
.px-soc a:hover{background:var(--honey);border-color:var(--honey);color:var(--ink);transform:translateY(-3px)}
.px-soc svg{width:19px;height:19px;fill:currentColor}
.px-foot-bottom{margin-top:30px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--on-dark-soft)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:1700px){ :root{--maxw:1400px} }

@media (max-width:1080px){
  .px-foot-top{grid-template-columns:1fr 1fr}
  .px-foot-brand{grid-column:1/-1}
  .px-values .vgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .px-links{display:none}
  .px-phone{display:none}
  .px-burger{display:flex}
  .px-hero-tag{display:none}
  .px-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .seg-grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
  .seg-card{min-height:380px}
  .px-steps .stp-grid{grid-template-columns:1fr 1fr;gap:34px}
  .cfg{grid-template-columns:1fr;gap:36px}
  /* mobile drawer */
  .px-drawer{display:block;position:fixed;inset:0;z-index:55;background:var(--bone);
    transform:translateY(-100%);transition:transform .5s var(--ease);padding:108px var(--gutter) 40px;
    display:flex;flex-direction:column;gap:4px}
  .px-drawer.open{transform:none}
  .px-drawer a{font-family:var(--serif);font-size:34px;font-weight:500;padding:14px 0;border-bottom:1px solid var(--line)}
  .px-drawer .dphone{font-family:var(--sans);font-size:18px;font-weight:600;margin-top:24px;color:var(--accent)}
}
/* hero stacks only on narrow screens; tablets & landscape phones keep 2 columns */
@media (max-width:760px){
  .px-hero-grid{grid-template-columns:1fr;gap:10px}
  .px-hero-visual{order:-1;min-height:clamp(300px,62vw,440px)}
}
@media (max-width:600px){
  :root{--gutter:20px}
  .px-nav-in{height:72px}
  .px-hero{padding-top:96px}
  .px-hero-cta{gap:22px;align-items:flex-start}
  .px-hero-cta .btn--text{min-height:48px;align-items:center}
  .px-hero-cta .btn--solid{width:100%}
  .px-hero-stats{flex-wrap:wrap;gap:18px 0}
  .px-stat{flex:0 0 50%;padding:14px 0;border:none!important}
  .px-stat + .px-stat{padding-left:0}
  .px-values .vgrid{grid-template-columns:1fr}
  .vcta{flex-direction:column;align-items:flex-start;text-align:left}
  .vcta .btn{width:100%}
  .px-steps .stp-grid{grid-template-columns:1fr}
  .cfg-opts.two{grid-template-columns:1fr}
  .fp-grid{grid-template-columns:1fr 1fr}
  .fp-bar{flex-direction:column;align-items:stretch;gap:11px}
  .fp-search{max-width:none;min-width:0}
  .fp-dd{width:100%;min-width:0}
  .fp-tray{flex-direction:column;align-items:stretch;text-align:center}
  .fp-tray .picked{display:none}
  .px-foot-top{grid-template-columns:1fr}
  .px-foot-bottom{flex-direction:column}
}
@media (max-width:380px){ .fp-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .px-bottle{animation:none!important} *{scroll-behavior:auto} }

/* ============ PRODUCTION ADDITIONS (static build) ============ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--accent);color:var(--on-accent);
  padding:10px 18px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:3px}

/* reveal */
.reveal-ready .rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-ready .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rise{opacity:1!important;transform:none!important}}

/* form controls for static lead form */
.cfg-card select,.cfg-card textarea{width:100%;font:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line,#e2dccd);border-radius:calc(10px * var(--rscale,1));
  padding:12px 14px;transition:border-color .2s}
.cfg-card select:focus,.cfg-card textarea:focus{border-color:var(--accent);outline:none}
.cfg-card textarea{resize:vertical;min-height:54px}
.cfg-card .field input.err,.cfg-card select.err,.cfg-card textarea.err{border-color:#c0392b}
.cfg-card .field .opt{font-weight:400;color:var(--muted,#8a8270);font-size:.85em}
.cfg-privacy{font-size:12px;line-height:1.5;color:var(--muted,#8a8270);margin-top:12px;text-align:center}
.cfg-privacy a{color:var(--accent);text-decoration:underline}
.cfg-or{margin-top:18px;font-size:14px;color:var(--muted,#8a8270)}
.cfg-phone{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}

/* FAQ */
.faq-section .section-head{margin-bottom:36px}
.faq-list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:0}
.faq-item{border-bottom:1px solid var(--line,#e6e0d2)}
.faq-item summary{cursor:pointer;list-style:none;padding:22px 4px;font-family:var(--display,Georgia,serif);
  font-size:clamp(17px,2.2vw,21px);font-weight:600;color:var(--ink);display:flex;
  justify-content:space-between;align-items:center;gap:18px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:24px;color:var(--accent);transition:transform .25s;flex:none}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 4px 22px}
.faq-a p{color:var(--muted,#5c5648);line-height:1.65;max-width:68ch}

.seo-flavors{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* keep static hero price as paragraph */
p.px-price{display:flex;align-items:baseline;gap:8px}