/* ===== assets/css/fonts.css ===== */
/* Google Fonts, self hosted. Regenerate with _seo/fetch_vendor.py.
   Self hosted so no visitor's IP reaches a third party before consent,
   and so the font CSS is not a render-blocking cross-origin request. */
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/caveat-Wnz6HAc5bAfYB2Q7azYYmg8.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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/caveat-Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/caveat-Wnz6HAc5bAfYB2Q7aDYYmg8.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: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/caveat-Wnz6HAc5bAfYB2Q7ZjYY.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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/caveat-Wnz6HAc5bAfYB2Q7azYYmg8.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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/caveat-Wnz6HAc5bAfYB2Q7YjYYmg8.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/caveat-Wnz6HAc5bAfYB2Q7aDYYmg8.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: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/caveat-Wnz6HAc5bAfYB2Q7ZjYY.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: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmS-HY6EQ.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: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmb-HY6EQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmR-HY6EQ.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: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmf-HY.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: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmS-HY6EQ.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: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmb-HY6EQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmR-HY6EQ.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: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmf-HY.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: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmS-HY6EQ.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: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmb-HY6EQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmR-HY6EQ.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: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmf-HY.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: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmS-HY6EQ.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: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmb-HY6EQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmR-HY6EQ.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: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/onest-gNMKW3F-SZuj7xmf-HY.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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwtsZfrxE.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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwv8ZfrxE.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwtMZfrxE.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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwtcZfrxE.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: 'Unbounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwu8Zf.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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwtsZfrxE.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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwv8ZfrxE.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwtMZfrxE.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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwtcZfrxE.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: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwu8Zf.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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwtsZfrxE.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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwv8ZfrxE.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwtMZfrxE.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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwtcZfrxE.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: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/unbounded-Yq6W-LOTXCb04q32xlpwu8Zf.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;
}


/* ===== d3.css ===== */
/* ============================================================
   MILLE BACI · DIZAJN 3 · shared base (all pages)
   Paleta: sladoled papir / pistacija / malina pop / mango / kakao / teal
   Tip: Unbounded (display) + Onest (body) + Caveat (hand notes)
   ============================================================ */

:root{
  --paper:#FFFDFB;
  --ink:#1E2A66;
  --teal:#26A19C;
  --pink:#E4487C;
  --mango:#F6A22B;
  --pist:#5F7F3E;
  --pistlt:#DCE8C2;
  --cacao:#5C1130;
  --cacao2:#33081B;
  --amber:#F67E36;
  --plum:#961E42;
  --navy:#1E2A66;
  --cream:#FFDCE9;
  --disp:"Unbounded",sans-serif;
  --body:"Onest",system-ui,sans-serif;
  --hand:"Caveat",cursive;
  --w:min(1180px,92vw);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.25,.6,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.06rem;line-height:1.62;
  overflow-x:clip;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:4px}
::selection{background:var(--pink);color:#fff}

.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--pink);color:var(--paper);padding:.6rem 1rem}
.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kicker{
  font-family:var(--disp);font-weight:600;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem;
}
.sec{width:var(--w);margin:0 auto;padding:clamp(4.5rem,11vh,8rem) 0}
.sec-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.05;margin-bottom:1rem;letter-spacing:-.01em;
}
.sec-lead{max-width:56ch;font-size:1.12rem}

/* chips */
.chip{
  display:inline-block;font-family:var(--disp);font-weight:600;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.45em 1em;border-radius:999px;margin:.15rem .2rem .15rem 0;
}
.chip-teal{background:var(--teal);color:#fff;transform:rotate(-2deg)}
.chip-pink{background:var(--pink);color:#fff;transform:rotate(1.6deg)}
.chip-mango{background:var(--mango);color:var(--ink);transform:rotate(-1.2deg)}
.chip-line{border:2px solid var(--pink);transform:rotate(-1deg)}
.chip-mini{
  border:1.5px solid currentColor;font-size:.6rem;padding:.3em .7em;margin-left:.3rem;
  transform:none;border-radius:999px;vertical-align:middle;
}

/* buttons */
.btn{
  display:inline-block;text-decoration:none;font-family:var(--disp);font-weight:600;
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  background:var(--pink);color:var(--paper);padding:.9rem 1.6rem;border-radius:999px;
  transition:transform .3s var(--spring),background .2s,color .2s;
  box-shadow:0 4px 0 rgba(228,72,124,.25);border:0;cursor:pointer;
}
.btn:hover{transform:translateY(-3px) rotate(-1deg);background:var(--pink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--pink);box-shadow:none}
.btn.ghost:hover{background:var(--pink);color:var(--paper)}
.btn.big{font-size:.95rem;padding:1.1rem 2.2rem}

/* hand note (Caveat) */
.hand{
  font-family:var(--hand);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.15;letter-spacing:0;text-transform:none;
}

/* ---------- highlighter marker ----------
   .wv wavy ems are excluded via :where() so the exclusion adds NO specificity:
   page-level colour overrides (.melt-h .hl etc.) must keep winning */
.sec-h em:where(:not(.wv)),.hl:where(:not(.wv)){
  font-style:normal;color:var(--ink);
  background-image:linear-gradient(transparent 58%,var(--mango) 58%);
  background-repeat:no-repeat;background-position:0 .84em;background-size:0% .42em;
  transition:background-size .8s var(--ease) .2s;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .04em;
}
.rv-in em:where(:not(.wv)),.rv-in .hl:where(:not(.wv)),.sec-h.rv-in em:where(:not(.wv)){background-size:100% .42em}
@media (prefers-reduced-motion:reduce){.sec-h em:where(:not(.wv)),.hl:where(:not(.wv)){background-size:100% .42em;transition:none}}

/* ---------- WAVY underline: draws in on scroll reveal, then swims ----------
   colour via --wvc; works on light or dark; keep on phrases that fit one line */
.wv{position:relative;font-style:normal;white-space:nowrap}
.wv::after{
  content:"";position:absolute;left:-.05em;right:-.05em;bottom:-.16em;height:.22em;pointer-events:none;
  background:var(--wvc,var(--pink));
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:repeat-x;-webkit-mask-position:0 50%;-webkit-mask-size:auto 100%;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-repeat:repeat-x;mask-position:0 50%;mask-size:auto 100%;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .85s var(--ease) .25s;
}
.rv-in .wv::after,.wv.rv-in::after{
  clip-path:inset(0 0 0 0);
  animation:wvswim 2.8s linear 1.1s infinite;
}
@keyframes wvswim{
  from{-webkit-mask-position:0 50%;mask-position:0 50%}
  to{-webkit-mask-position:16px 50%;mask-position:16px 50%}
}
@media (prefers-reduced-motion:reduce){
  .wv::after{clip-path:inset(0 0 0 0);transition:none;animation:none !important}
}

/* ---------- header: floating sticker toolbar ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.2rem);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.hdr.scrolled{background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(10px)}
.hdr-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.hdr-brand img{width:44px;height:44px;border-radius:12px;transition:transform .35s var(--spring)}
.hdr-brand:hover img{transform:rotate(-8deg) scale(1.1)}
/* nav rides in its own bordered pill, display font, current page = filled pill */
.hdr-nav{
  display:flex;gap:.15rem;align-items:center;
  border:3px solid var(--pink);border-radius:999px;
  background:color-mix(in srgb,#fff 72%,transparent);backdrop-filter:blur(8px);
  padding:.3rem .4rem;box-shadow:4px 5px 0 rgba(228,72,124,.16);
}
.hdr-nav a{
  text-decoration:none;font-family:var(--disp);font-weight:600;font-size:.68rem;
  letter-spacing:.07em;text-transform:uppercase;
  padding:.5rem .8rem;border-radius:999px;
  transition:transform .25s var(--spring),color .2s,background .25s;
  display:inline-block;position:relative;
}
.hdr-nav a:hover{color:var(--pink);transform:translateY(-1px) rotate(-1deg)}
/* wavy pink underline wipes in on hover (inside the pill) */
.hdr-nav a:not(.hdr-cta)::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.32rem;height:5px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='%23E4487C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center;
  background-size:14px 5px;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .4s var(--ease);
}
.hdr-nav a:not(.hdr-cta):hover::after{clip-path:inset(0 0 0 0)}
.hdr-nav a[aria-current="page"]{
  background:var(--pink);color:#fff;transform:rotate(-1.6deg);
  box-shadow:2px 3px 0 rgba(228,72,124,.25);
}
.hdr-nav a[aria-current="page"]::after{display:none}
@keyframes hdrswim{from{background-position:0 50%}to{background-position:16px 50%}}
@media (prefers-reduced-motion:reduce){
  .hdr-nav a:not(.hdr-cta)::after{transition:none;animation:none !important}
}
.hdr-cta{
  background:var(--pink);color:var(--paper) !important;
  margin-left:.25rem;
}
.hdr-cta:hover{color:#fff !important;background:var(--pink);transform:translateY(-1px) rotate(1deg) !important}
.hdr-right{
  display:flex;align-items:center;gap:.55rem;
  border:3px solid var(--pink);border-radius:999px;
  background:color-mix(in srgb,#fff 72%,transparent);backdrop-filter:blur(8px);
  padding:.22rem .3rem .22rem .75rem;box-shadow:4px 5px 0 rgba(228,72,124,.16);
}
.lang{display:flex;align-items:center;font-size:.76rem;font-weight:700;color:var(--ink)}
.lang a,.lang button{padding:.45rem .5rem;opacity:.42;transition:opacity .2s,color .2s;position:relative;text-decoration:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:26px}
.lang a+a::before,.lang button+button::before{
  content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:currentColor;opacity:.3;
}
.lang a[aria-current="true"],.lang button[aria-pressed="true"]{opacity:1;color:var(--pink)}
.lang a:hover,.lang button:hover{opacity:1}
@media (max-width:460px){.lang{font-size:.68rem}.lang a,.lang button{padding:.4rem .32rem;min-width:24px;min-height:24px}}
/* burger: round button, visible on ALL widths, opens the big menu */
.burger{
  display:block;width:40px;height:40px;position:relative;border-radius:50%;
  background:var(--pink);transition:transform .3s var(--spring),background .25s;
}
.burger:hover{transform:rotate(-6deg) scale(1.06);background:var(--pink)}
.burger span{position:absolute;left:11px;right:11px;height:3px;border-radius:3px;background:var(--paper);transition:transform .3s var(--spring),top .3s var(--spring)}
.burger span:first-child{top:15px}
.burger span:last-child{top:23px}
.burger[aria-expanded="true"] span:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:19px;transform:rotate(-45deg)}

/* ---------- full-screen menu ---------- */
.mbmenu[hidden]{display:none}
.mbmenu{
  position:fixed;inset:0;z-index:55;background:var(--pink);color:var(--paper);
  display:flex;flex-direction:column;overflow:hidden auto;
  padding:5.2rem clamp(1.4rem,6vw,4rem) 1.6rem;
}
.mbmenu::before{
  content:"";position:fixed;inset:auto -18% -34% -18%;height:62%;pointer-events:none;
  background:radial-gradient(50% 90% at 22% 100%,rgba(228,72,124,.32),transparent 70%),
             radial-gradient(46% 86% at 62% 100%,rgba(246,162,43,.25),transparent 70%),
             radial-gradient(44% 80% at 92% 100%,rgba(38,161,156,.3),transparent 70%);
  filter:blur(10px);
}
.mbmenu-grid{display:grid;grid-template-columns:1fr minmax(220px,340px);gap:clamp(1.5rem,4vw,4rem);align-items:center;flex:1}
.mbmenu-list{display:flex;flex-direction:column}
.mbmenu-list a{
  display:flex;align-items:baseline;gap:1rem;text-decoration:none;
  padding:.34rem 0;border-bottom:1.5px solid rgba(255,253,251,.14);
  opacity:0;transform:translateY(22px);
}
.mbmenu.open .mbmenu-list a{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) var(--d,0s),transform .55s var(--spring) var(--d,0s),color .2s;
}
.mbmenu-list .mn{
  font-family:var(--disp);font-weight:600;font-size:.66rem;letter-spacing:.14em;
  color:var(--paper);opacity:.5;min-width:2.2em;
}
.mbmenu-list .mw{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.45rem,4.6vh,2.6rem);line-height:1.16;transition:transform .3s var(--spring),color .2s;
}
.mbmenu-list .ms{
  margin-left:auto;font-family:var(--disp);font-weight:600;font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;opacity:.55;
}
.mbmenu-list a:hover .mw,.mbmenu-list a:focus-visible .mw{color:var(--mc,var(--pink));transform:translateX(10px) rotate(-.5deg)}
.mbmenu-list a[aria-current="page"] .mw{color:var(--mc,var(--pink))}
.mbmenu-list a[aria-current="page"] .mn{opacity:1;color:var(--mc,var(--pink))}
.mbmenu-fig{
  position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;
  border:3px solid var(--paper);transform:rotate(2.2deg);
  box-shadow:10px 12px 0 rgba(228,72,124,.35);
  opacity:0;transition:opacity .45s var(--ease);
}
.mbmenu.open .mbmenu-fig{opacity:1}
.mbmenu-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s var(--ease)}
.mbmenu-fig img.on{opacity:1}
/* close button lives INSIDE the overlay (the header sits below it) */
.mbmenu-x{
  position:absolute;top:.9rem;right:clamp(1rem,4vw,2.2rem);z-index:2;
  width:46px;height:46px;border-radius:50%;
  background:var(--paper);border:3px solid var(--paper);cursor:pointer;
  transition:transform .3s var(--spring),background .25s;
  box-shadow:3px 4px 0 rgba(0,0,0,.3);
}
.mbmenu-x::before,.mbmenu-x::after{
  content:"";position:absolute;left:50%;top:50%;width:20px;height:3px;border-radius:3px;
  background:var(--pink);
}
.mbmenu-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.mbmenu-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mbmenu-x:hover{transform:rotate(-90deg) scale(1.08);background:var(--pink)}
.mbmenu-x:hover::before,.mbmenu-x:hover::after{background:#fff}
.mbmenu-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:1.4rem;position:relative;
}
.mbmenu-foot a{color:var(--paper);font-weight:700;text-decoration:none}
.mbmenu-foot a:hover{color:var(--pink)}
.mbmenu-foot p{font-family:var(--disp);font-weight:600;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.55}
@media (max-width:900px){
  .mbmenu-grid{grid-template-columns:1fr}
  .mbmenu-fig{display:none}
  .mbmenu-list .mw{font-size:clamp(1.3rem,4.1vh,2rem)}
}

/* ---------- next page band ---------- */
.nextp{width:var(--w);margin:0 auto;padding:clamp(2.4rem,6vh,4rem) 0 clamp(3rem,7vh,4.5rem)}
.nextp a{
  display:block;text-decoration:none;border:4px solid var(--pink);border-radius:26px;
  padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,4vw,2.6rem);position:relative;overflow:hidden;
  background:var(--npbg,var(--mango));color:var(--npink,var(--ink));
  box-shadow:8px 10px 0 rgba(228,72,124,.18);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.nextp a:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:12px 16px 0 rgba(228,72,124,.24)}
.nextp .np-k{font-family:var(--disp);font-weight:600;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;opacity:.75;margin-bottom:.5rem;display:block}
.nextp .np-w{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.9rem,6vw,4rem);line-height:1;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
}
.nextp .np-w span{display:inline-block;transition:transform .35s var(--spring)}
.nextp a:hover .np-w span{transform:translateX(12px)}

/* ---------- footer ---------- */
.ftr{background:var(--teal);color:#fff;margin-top:3rem;overflow:hidden;position:relative;z-index:6}
.ftr-hero{
  width:var(--w);margin:0 auto;padding:clamp(3rem,7vh,5rem) 0 2.4rem;text-align:center;
  border-bottom:2px solid rgba(255,255,255,.25);
}
.ftr-eyebrow{font-family:var(--disp);font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:#D9F4EF;margin-bottom:1rem}
.ftr-say{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(2.2rem,7vw,5rem);line-height:1;letter-spacing:-.01em}
.ftr-say em{font-style:normal;color:var(--mango)}
.ftr-top-link{
  display:inline-block;margin-top:1.5rem;text-decoration:none;font-family:var(--disp);font-weight:600;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:#fff;
  border-radius:999px;padding:.8rem 1.7rem;box-shadow:0 4px 0 rgba(228,72,124,.3);
  transition:transform .3s var(--spring),background .2s,color .2s;
}
.ftr-top-link:hover{transform:translateY(-3px) rotate(-1deg);background:var(--mango)}
.ftr-top-link span{display:inline-block;transition:transform .3s var(--spring)}
.ftr-top-link:hover span{transform:translateX(5px)}
.ftr-big{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,6vw,4.4rem);white-space:nowrap;opacity:.22;
  padding:2rem 0 0;user-select:none;
}
.ftr-top{
  width:var(--w);margin:0 auto;padding:2.4rem 0 3rem;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(1.6rem,4vw,3rem);
}
.ftr-brand img{border-radius:14px;border:3px solid rgba(255,255,255,.9)}
.ftr-brand p{margin-top:1rem;font-size:.95rem;max-width:30ch}
.ftr-social{display:flex;gap:.7rem;margin-top:1.3rem}
.ftr-social a{
  width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.7);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  transition:background .3s var(--spring),color .3s,transform .3s var(--spring);
}
.ftr-social a:hover{background:#fff;color:var(--teal);transform:translateY(-3px) rotate(-6deg)}
.ftr-col h3{
  font-family:var(--disp);font-weight:600;font-size:.72rem;letter-spacing:.26em;
  text-transform:uppercase;margin-bottom:1rem;color:#D9F4EF;
}
.ftr-col a{display:block;text-decoration:none;padding:.28rem 0;font-weight:500}
.ftr-col a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ftr-col p{font-size:.95rem;padding:.28rem 0;color:#D9F4EF}
.ftr-cols2{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
.ftr-cols2 a{white-space:nowrap}
.ftr-bar{border-top:2px solid rgba(255,255,255,.25)}
.ftr-bar p{width:var(--w);margin:0 auto;padding:.35rem 0;font-size:.85rem;color:#D9F4EF}
.ftr-bar p:first-child{padding-top:1.1rem}
.ftr-bar p:last-child{padding-bottom:1.3rem}

/* ---------- reveals ---------- */
.js .rv{opacity:0;transform:translateY(26px) scale(.96);transition:opacity .6s var(--ease),transform .6s var(--spring)}
.js .rv.rv-in{opacity:1;transform:none}
.js .rv-pop{opacity:0;transform:scale(.6) rotate(-4deg);transition:opacity .45s var(--ease),transform .6s var(--spring)}
.js .rv-pop.rv-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .hdr-nav{display:none}
}
@media (max-width:640px){
  body{font-size:1rem}
  .ftr-top{grid-template-columns:1fr;gap:1.8rem}
  .nextp .np-w{font-size:clamp(1.6rem,8vw,2.6rem)}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.15s !important}
  .js .rv,.js .rv-pop{transform:none}
  .mbmenu-list a{opacity:1;transform:none}
}

/* privacy + cookie policy page */
.legal{padding-top:clamp(6rem,14vh,9rem);max-width:min(820px,92vw)}
.legal .sec-h{font-size:clamp(1.7rem,4.4vw,2.9rem);margin-bottom:.5rem}
.legal-date{font-size:.86rem;opacity:.66;margin-bottom:1.6rem}
.legal .sec-lead{margin-bottom:2.2rem}
.legal-h{font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;font-size:.92rem;color:var(--teal);margin:2.1rem 0 .7rem}
.legal p{margin-bottom:.85rem}
.legal ul{margin:0 0 1rem 1.15rem}
.legal li{margin-bottom:.5rem}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(38,161,156,.12);padding:.1em .4em;border-radius:5px}
.legal a{color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--teal)}
.ftr-privacy{text-decoration:underline;text-underline-offset:3px}


/* ===== style.css ===== */
/* ============================================================
   MILLE BACI · DIZAJN 3 · „Skini poklopac" — naslovna
   (zajednička osnova: d3.css; ovdje samo sekcije naslovne)
   ============================================================ */

/* worldbg paints the page colour, so the body itself stays transparent */
body{background:transparent}
.worldbg{position:fixed;inset:0;z-index:-1;background:var(--paper)}

/* ---------- signature scroll line (shared mbline.js) — center weave, BEHIND content ---------- */
#glavno{position:relative;z-index:0}
/* z-index:-1 keeps the line behind every card/text (above the fixed .worldbg) so it never covers content */
#lineart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}
#linepath{fill:none;stroke:var(--pink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
#linetip{
  fill:var(--pink);
  filter:drop-shadow(0 0 6px var(--pink)) drop-shadow(0 0 16px rgba(228,72,124,.9));
  opacity:0;transition:opacity .3s ease;
}
@media (prefers-reduced-motion:reduce){#linetip{display:none}}

/* ---------- hero ---------- */
/* ---------- intro reveal: the opening "explosion", then calm ---------- */
.mbintro{position:fixed;inset:0;z-index:200;pointer-events:none;overflow:hidden}
html:not(.js) .mbintro{display:none}
.mbintro.done{display:none}
.mbintro-bands{position:absolute;inset:0;display:flex}
.mbintro-bands i{flex:1;background:var(--paper);will-change:transform}
.mbintro-core{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
}
/* Laid out at 3x the size it is ever shown at, then scaled back down by the intro
   timeline. will-change promotes this to its own compositor layer, and a promoted
   layer is rasterised once at the scale in force when it is created. That scale was
   0.5, so the mark was drawn at 64px and then stretched up to 146px, which is why it
   looked soft on the very first load. Drawing big and only ever scaling DOWN keeps
   every frame sharp. The displayed size is unchanged: 384 * 0.3333 = 128, and at the
   small end 252 * 0.3333 = 84, exactly the old clamp. */
.mbintro-mark{width:clamp(252px,33vw,384px);height:auto;position:relative;z-index:2;will-change:transform}
/* the shockwave: one ring, expands once, gone */
.mbintro-ring{
  position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;
  border-radius:50%;border:3px solid var(--teal);opacity:0;will-change:transform,opacity;
}
@media (prefers-reduced-motion:reduce){.mbintro{display:none}}

/* ---------- hero: brand first, colour bloom, no product ---------- */
.hero{
  width:var(--w);margin:0 auto;padding:8.4rem 0 3.2rem;position:relative;
  min-height:min(92svh,880px);display:flex;flex-direction:column;justify-content:center;
}
/* the "explosion": ten flavour colours bloom out from the centre, then hold. */
.hero-bloom{
  position:absolute;left:50%;top:40%;width:min(1180px,108%);aspect-ratio:1/.48;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;
  filter:blur(42px);opacity:.52;contain:paint;
}
.bl{
  position:absolute;left:calc(50% + var(--x));top:calc(50% + var(--y));
  width:31%;aspect-ratio:1;border-radius:50%;background:var(--c);
  transform:translate(-50%,-50%) scale(var(--s));
  will-change:transform;
}
.hero-k{margin-bottom:1.3rem;position:relative;z-index:2}
.hero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.9rem,12vw,9.2rem);line-height:.9;letter-spacing:-.025em;
  position:relative;z-index:2;
}
.hw{display:block}
/* gelato run, warm at rest: teal into raspberry into mango; sweep passes flame and plum */
.hw2{
  display:block;
  background-image:linear-gradient(100deg,#26A19C,#E4487C,#F6A22B,#F0641E,#961E42,#26A19C);
  background-size:260% 100%;background-position:0% 50%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hw2{color:var(--pink);-webkit-text-fill-color:var(--pink);background-image:none}
}
.hero-row{
  display:flex;gap:2rem;align-items:flex-end;justify-content:space-between;
  margin-top:2rem;flex-wrap:wrap;position:relative;z-index:2;
}
.hero-sub{max-width:54ch;font-size:1.12rem}
.hero-ctas{display:flex;gap:.8rem;flex-wrap:wrap}
/* the four programmes, stated on arrival: this is not a cup shop */
.hero-fam{
  list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:2.8rem;
  position:relative;z-index:2;
  font-family:var(--disp);font-weight:600;
  font-size:clamp(.7rem,1.5vw,.85rem);letter-spacing:.2em;text-transform:uppercase;
}
.hero-fam li{display:flex;align-items:center;gap:1.5rem}
.hero-fam li+li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.38;flex:none;
}
@media (max-width:600px){
  .hero{min-height:auto;padding-top:7rem}
  .hero-bloom{filter:blur(32px);opacity:.4}
  /* "POLJUBACA." is the longest line: 12vw overflows 92vw at 375px */
  .hero-h{font-size:clamp(1.9rem,10.1vw,3.4rem);letter-spacing:-.03em}
  .hero-fam{gap:.45rem 1rem;letter-spacing:.14em}
  .hero-fam li{gap:1rem}
}

/* ---------- range: everything they actually make — full-colour bands ----------
   Each family is a solid band in its own brand colour: the whole range reads as
   one stack of colour on arrival, photos always visible (discoverability rule). */
.range{position:relative;z-index:2}
.rg-list{list-style:none;margin:3rem 0 0;display:grid;gap:clamp(.75rem,1.6vw,1.05rem)}
.rg-row{
  position:relative;border-radius:22px;
  background:var(--c);color:var(--ct,#fff);
  box-shadow:0 10px 26px rgba(228,72,124,.14);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.rg-row:hover,.rg-row:focus-within{transform:translateY(-5px);box-shadow:0 16px 34px rgba(228,72,124,.2)}
/* right 260px is a reserved lane: the photo lives there and never overlaps copy */
.rg-a{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,auto);
  align-items:center;gap:1.1rem 1.6rem;min-height:132px;
  padding:1.45rem 260px 1.45rem 1.25rem;text-decoration:none;color:inherit;position:relative;z-index:2;
}
.rg-n{
  font-family:var(--disp);font-weight:800;font-size:.78rem;
  background:#fff;color:var(--c);border:3px solid var(--pink);border-radius:999px;
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
}
.rg-name{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,4.4vw,3rem);line-height:1;letter-spacing:-.015em;
  transition:transform .45s var(--ease);
}
.rg-row:hover .rg-name{transform:translateX(6px)}
.rg-d{font-size:.95rem;line-height:1.5;opacity:.92;max-width:38ch;justify-self:end;text-align:right}
.rg-go{
  width:42px;height:42px;border-radius:50%;border:2px solid currentColor;
  opacity:.55;position:absolute;right:1.2rem;top:50%;
  transform:translateY(-50%);
  transition:opacity .35s var(--ease),transform .45s var(--spring);
}
.rg-go::before{content:"";position:absolute;left:11px;right:11px;top:50%;height:2px;background:currentColor;transform:translateY(-50%)}
.rg-go::after{
  content:"";position:absolute;right:12px;top:50%;width:9px;height:9px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.rg-row:hover .rg-go,.rg-row:focus-within .rg-go{opacity:1;transform:translateY(-50%) translateX(5px)}
/* photo pokes slightly past the band edges: alive, not clipped */
.rg-fig{
  position:absolute;right:4.6rem;top:50%;width:148px;aspect-ratio:4/5;z-index:3;
  border-radius:14px;overflow:hidden;border:3px solid #fff;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
  pointer-events:none;
  transform:translateY(-50%) rotate(3deg);
  transition:transform .5s var(--spring);
}
.rg-row:nth-child(even) .rg-fig{transform:translateY(-50%) rotate(-3deg)}
.rg-row:hover .rg-fig,.rg-row:nth-child(even):hover .rg-fig{transform:translateY(-50%) rotate(0deg) scale(1.05)}
.rg-fig img{width:100%;height:100%;object-fit:cover}
.rg-foot{margin-top:2.2rem;font-size:1.02rem}
.rg-foot a{font-weight:600;box-shadow:inset 0 -2px 0 var(--pink)}
.rg-foot a:hover{background:var(--pink);color:#fff;box-shadow:none}
@media (max-width:1040px){
  .rg-a{grid-template-columns:auto minmax(0,1fr);padding-right:200px;min-height:120px}
  .rg-d{grid-column:2/3;grid-row:2;justify-self:start;text-align:left;max-width:46ch}
  .rg-fig{right:4rem;width:118px}
}
@media (max-width:900px){
  .rg-a{grid-template-columns:auto minmax(0,1fr);padding:1.15rem 96px 1.2rem 1rem;min-height:0}
  .rg-go{display:none}
  .rg-fig{
    right:.9rem;width:66px;border-width:2px;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.25);
    transform:translateY(-50%) rotate(2deg);
  }
  .rg-row:hover .rg-fig{transform:translateY(-50%) rotate(2deg)}
  .rg-d{max-width:34ch;font-size:.9rem}
  .rg-row{box-shadow:0 7px 18px rgba(228,72,124,.13)}
}

/* ---------- marquee (dual, counter-scrolling) ---------- */
.marq{margin:2.6rem 0;display:grid;gap:.5rem;transform:rotate(-1.4deg) scale(1.03)}
.marq-row{overflow:hidden;padding:.7rem 0}
/* two counter-scrolling bands must stay two colours: the first row was navy, and
   after the navy→pink swap both rows were pink, so the reversed row takes teal */
.marq-row:first-child{background:var(--pink);color:var(--paper)}
.marq-row.rev{background:var(--teal);color:#fff}
.marq-in{display:flex;white-space:nowrap;width:max-content}
.marq-in span{
  font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.12em;
  text-transform:uppercase;padding-right:1rem;animation:marq 26s linear infinite;
}
.marq-row.rev .marq-in span{animation-duration:22s;animation-direction:reverse}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marq-in span{animation:none}}

/* ---------- worlds ---------- */
.worlds{position:relative}
.world{min-height:92svh;display:flex;align-items:center;padding:4rem 0}
.world-in{width:var(--w);margin:0 auto}
.world-n{
  font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.3em;
  margin-bottom:.6rem;opacity:.65;
}
.world-word{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.2rem,8.5vw,6.4rem);line-height:1;letter-spacing:-.01em;
  margin-bottom:2rem;
}
.world-row{display:grid;grid-template-columns:38fr 46fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.world-row.rev{grid-template-columns:46fr 38fr}
.world-row.rev .world-fig{order:2}
.world-fig{transform:rotate(2deg)}
.world-row.rev .world-fig{transform:rotate(-2deg)}
.world-fig img{
  border-radius:20px;border:4px solid currentColor;width:100%;
  aspect-ratio:4/5;object-fit:cover;
  box-shadow:8px 10px 0 rgba(0,0,0,.14);
}
.world-copy p{font-size:clamp(1.1rem,1.9vw,1.35rem);max-width:40ch}
.world-meta{
  margin-top:1.2rem;font-family:var(--disp);font-weight:600;font-size:.78rem !important;
  letter-spacing:.16em;text-transform:uppercase;opacity:.8;
}

/* ---------- cups (pinned horizontal rail) ---------- */
.cups{position:relative;padding-bottom:clamp(3rem,7vh,5rem)}
.cups-head{padding-bottom:1.6rem !important}
.cups-drag{
  margin-top:1rem;font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pink);display:inline-flex;align-items:center;gap:.5rem;
}
.cups-drag span{display:inline-block;animation:nudge 1.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.cups-drag span{animation:none}}
.cup-pin{overflow:hidden}
.cup-rail{
  list-style:none;display:flex;gap:clamp(1rem,2vw,1.6rem);
  padding:.6rem clamp(1rem,4vw,2.4rem) 1.4rem;width:max-content;
}
.cup-card{
  width:clamp(244px,26vw,320px);height:clamp(410px,50vw,468px);flex:none;
  background:#fff;border:3px solid var(--pink);border-radius:20px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  transition:box-shadow .35s var(--spring);box-shadow:6px 7px 0 rgba(228,72,124,.16);
}
.cup-card:hover{box-shadow:12px 16px 0 var(--cc)}
@media (max-width:899px){
  .cup-card{transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
  .cup-card:active{transform:translateY(-4px)}
}
.cup-idx{
  position:absolute;top:.75rem;left:.75rem;z-index:3;font-family:var(--disp);font-weight:800;
  font-size:.72rem;background:var(--pink);color:var(--paper);border-radius:999px;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.35);
}
.cup-card figure{flex:1;min-height:0;overflow:hidden;margin:0}
.cup-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--spring)}
.cup-card:hover img{transform:scale(1.07)}
.cup-card h3{font-family:var(--disp);font-weight:600;font-size:1.02rem;padding:.75rem .9rem .1rem;flex:none}
.cup-card>p{font-size:.84rem;padding:0 .9rem .9rem;opacity:.85;flex:none}
/* flavour-name cards: big bold name poster, description pinned bottom
   (.type-card .tc-word beats .cup-card>p specificity so the name fills the card) */
.type-card{background:var(--cc);color:var(--ct)}
.cup-card .tc-word{
  flex:1 1 auto;min-height:0;display:flex;align-items:center;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.75rem,2.7vw,2.5rem);line-height:.92;letter-spacing:-.03em;
  padding:2.7rem .8rem .4rem;opacity:1;hyphens:none;word-break:keep-all;
}
.type-card>p:not(.tc-word){opacity:1;padding:0 .95rem 1.05rem;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;font-weight:500;flex:none}
.cup-card-photo figure{flex:1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* mobile: native swipe */
@media (max-width:899px){
  .cup-pin{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .cup-card{scroll-snap-align:center}
}

/* ---------- pops ---------- */
/* ---------- popsicle flavour slider (real named flavours, user-driven, no scroll hijack) ---------- */
/* full-bleed tint sits at z-index:-2 so the scroll line (-1) still threads over it */
.pops{position:relative}
.pops-bg{
  position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0;
  z-index:-2;background:transparent;opacity:0;
  transition:background-color .55s var(--ease),opacity .7s var(--ease);
}
.pops-bg.lit{opacity:1}
.pw{position:relative;margin-top:2.8rem;display:flex;align-items:center;gap:.6rem}
.pw-track{
  list-style:none;display:flex;gap:clamp(.9rem,2vw,1.6rem);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.6rem .2rem 1.4rem;margin:0;flex:1;
  scrollbar-width:none;-ms-overflow-style:none;
}
.pw-track::-webkit-scrollbar{display:none}
.pw-slide{
  background:var(--paper);
  flex:0 0 clamp(190px,21vw,244px);scroll-snap-align:center;
  border:3px solid var(--pink);border-radius:20px;background:var(--paper);
  padding:1.5rem 1.2rem 1.4rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  transition:transform .5s var(--spring),box-shadow .4s var(--ease),opacity .4s var(--ease);
  /* the scroll line lives at z-index:-1; cards must sit above it, not under it */
  position:relative;z-index:1;
}
/* fade the CONTENTS, never the card: a translucent card lets the scroll line
   bleed straight through the paper background */
.pw-slide > *{opacity:.66;transition:opacity .4s var(--ease)}
.pw-slide.is-on > *{opacity:1}
.pw-slide.is-on{opacity:1;transform:translateY(-8px);box-shadow:9px 11px 0 var(--c)}
.pw-pop{width:clamp(58px,7vw,74px);height:auto;flex:none}
.pw-body{fill:var(--c)}
.pw-stick{fill:#1E2A66}
.pw-gloss{fill:#fff;opacity:.28}
.pw-badge{
  font-family:var(--disp);font-weight:600;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c);
}
.pw-name{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1rem,1.7vw,1.28rem);line-height:1.15;letter-spacing:-.01em;
  word-break:keep-all;
  /* two-line box so a wrapping name ("Aperol Spritz") keeps notes on one baseline */
  min-height:2.3em;display:flex;align-items:center;justify-content:center;
}
.pw-note{font-size:.86rem;line-height:1.45;opacity:.72}
.pw-nav{
  position:relative;z-index:1;
  width:46px;height:46px;flex:none;border-radius:50%;border:3px solid var(--pink);
  background:var(--paper);position:relative;transition:background-color .3s,color .3s,transform .3s var(--spring);
}
.pw-nav::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  border-top:3px solid currentColor;border-right:3px solid currentColor;
}
.pw-prev::after{transform:translate(-35%,-50%) rotate(-135deg)}
.pw-next::after{transform:translate(-65%,-50%) rotate(45deg)}
.pw-nav:hover{background:var(--pink);color:var(--paper)}
.pw-nav[disabled]{opacity:.3;pointer-events:none}
.pw-dots{position:relative;z-index:1;display:flex;justify-content:center;gap:.45rem;margin-top:.2rem}
.pw-dot{
  width:9px;height:9px;border-radius:50%;border:2px solid var(--pink);background:transparent;
  padding:0;transition:background-color .3s,transform .3s var(--spring);
}
.pw-dot.is-on{background:var(--pink);transform:scale(1.35)}
.pw-foot{margin-top:1.6rem;text-align:center;font-size:1rem}
.pw-foot a{font-weight:600;box-shadow:inset 0 -2px 0 var(--mango)}
.pw-foot a:hover{background:var(--mango);color:var(--ink);box-shadow:none}
@media (max-width:760px){
  .pw-nav{display:none}
  .pw-slide{flex:0 0 clamp(168px,58vw,210px)}
  .pw-track{padding-left:.1rem;padding-right:.1rem}
}
@media (prefers-reduced-motion:reduce){
  .pw-track{scroll-behavior:auto}
  .pw-slide{opacity:1;transition:none}
  .pops-bg{transition:none}
}

/* ---------- bez ---------- */
.bez-card{
  background:var(--teal);color:#fff;border-radius:26px;border:4px solid var(--pink);
  padding:clamp(2rem,5vw,4rem);box-shadow:10px 12px 0 rgba(228,72,124,.2);
}
.bez-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.9rem,5.4vw,4rem);line-height:1.06;letter-spacing:-.01em;
}
.bez-h span{display:block}
.bez-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.6rem}
.bez-badge{
  font-family:var(--disp);font-weight:800;font-size:1.05rem;
  background:#fff;color:var(--teal);border-radius:999px;display:inline-flex;
  align-items:center;justify-content:center;min-width:64px;height:64px;padding:0 1rem;
  margin-bottom:1rem;border:3px solid var(--pink);
}
.bez-cols p:not(.bez-badge){font-size:.98rem}
.bez-accent.hl{color:var(--paper);background-image:linear-gradient(transparent 56%,var(--mango) 56%)}

/* ---------- zima (scroll-driven drift, no scrollbar) ---------- */
.zima-head{padding-bottom:1.6rem}
.zima-viewport{overflow:hidden;padding:.4rem 0 1.6rem}
.zima-strip{
  display:flex;gap:clamp(.9rem,2vw,1.4rem);
  padding:0 clamp(1rem,4vw,2.4rem);width:max-content;will-change:transform;
}
.zima-strip figure{
  flex:none;width:clamp(240px,30vw,380px);
  border-radius:18px;overflow:hidden;border:3px solid var(--pink);
  transform:rotate(-.8deg);
}
.zima-strip figure:nth-child(even){transform:rotate(.8deg)}
.zima-strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.zima-strip figure:nth-child(5) img{aspect-ratio:auto;height:100%}
/* reduced motion: fall back to native horizontal scroll */
@media (prefers-reduced-motion:reduce){
  .zima-viewport{overflow-x:auto}
  .zima-strip{transform:none !important}
}

/* ---------- IDI DUBLJE (explore the site) ---------- */
.ex-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);
  margin-top:2.6rem;
}
.ex-card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:#fff;border:3px solid var(--pink);border-radius:20px;overflow:hidden;
  box-shadow:6px 7px 0 rgba(228,72,124,.16);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.ex-card:nth-child(3n+1){transform:rotate(-.7deg)}
.ex-card:nth-child(3n+2){transform:rotate(.5deg)}
.ex-card:nth-child(3n){transform:rotate(-.3deg)}
.ex-card:hover{transform:translateY(-7px) rotate(0);box-shadow:10px 14px 0 var(--xc)}
.ex-card figure{aspect-ratio:16/10;overflow:hidden;border-bottom:3px solid var(--pink)}
.ex-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--spring)}
.ex-card:hover img{transform:scale(1.07) rotate(.6deg)}
.ex-n{
  position:absolute;top:.7rem;left:.7rem;font-family:var(--disp);font-weight:800;font-size:.7rem;
  background:var(--pink);color:var(--paper);border-radius:999px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(255,255,255,.35);
}
.ex-card h3{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);padding:.85rem 3rem .1rem .95rem;
}
.ex-card p{font-size:.9rem;opacity:.8;padding:0 3rem .95rem .95rem}
.ex-go{
  position:absolute;right:.85rem;bottom:.8rem;width:38px;height:38px;border-radius:50%;
  border:3px solid var(--pink);background:var(--xc);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;
  transition:transform .35s var(--spring);
}
.ex-card:hover .ex-go{transform:rotate(-45deg) scale(1.12)}

/* ---------- instagram ---------- */
.ig-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.6vw,1.3rem);
  margin-top:2.4rem;
}
.ig-grid a{
  display:block;border-radius:16px;overflow:hidden;border:3px solid var(--pink);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
  box-shadow:4px 5px 0 rgba(228,72,124,.14);
}
.ig-grid a:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:7px 10px 0 rgba(38,161,156,.4)}
.ig-grid a:nth-child(even):hover{transform:translateY(-5px) rotate(1deg)}
.ig-grid img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.ig-cta{text-align:center;margin-top:2.2rem}

/* ---------- u brojkama (springy count-up) ---------- */
.d3stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem);text-align:center}
.d3stat{padding:1.6rem 1rem;border:3px solid var(--pink);border-radius:22px;background:#fff;box-shadow:6px 7px 0 rgba(228,72,124,.14);transition:transform .35s var(--spring)}
.d3stat:hover{transform:translateY(-6px) rotate(-1.2deg)}
.d3stat:nth-child(2){background:var(--pink);color:#fff}
.d3stat:nth-child(3){background:var(--mango)}
.d3stat:nth-child(4){background:var(--teal);color:#fff}
.d3num{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,7vw,5.4rem);line-height:1;display:block}
.d3stat p{font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.6rem}

/* ---------- randomizer (interactive) ---------- */
.rand-in{
  color:var(--paper);border-radius:28px;border:4px solid var(--pink);
  padding:clamp(2.5rem,6vw,4.5rem);text-align:center;position:relative;overflow:hidden;
}
/* fill on a ::before at z-index:-2 so the signature line (z-index:-1) threads over this big
   dark block instead of vanishing behind it; text/sprinkles stay above the line */
.rand-in::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--pink)}
.rand-in .kicker{justify-content:center;color:var(--mango)}
.rand-in .sec-h{color:#fff}
.rand-slot{
  margin:1.6rem auto .4rem;min-height:clamp(3.5rem,9vw,6rem);display:flex;align-items:center;justify-content:center;
}
#randword{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,6.5vw,5rem);line-height:1;letter-spacing:-.01em;
  color:var(--pink);display:inline-block;will-change:transform;
}
#randword.pop{animation:randpop .5s var(--spring)}
@keyframes randpop{0%{transform:scale(.6) rotate(-5deg)}60%{transform:scale(1.12) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
.rand-actions{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin-top:1.4rem}
.rand-hint{font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#D9F4EF;opacity:.7}
.rand-link{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mango);border-bottom:2px solid currentColor;padding-bottom:.15rem;
  transition:color .2s,transform .3s var(--spring);
}
.rand-link:hover{color:#fff;transform:translateY(-2px)}
.rand-link span:last-child{transition:transform .3s var(--spring)}
.rand-link:hover span:last-child{transform:translateX(4px)}
.sprinkle{position:absolute;top:0;left:0;width:9px;height:9px;border-radius:2px;pointer-events:none;will-change:transform,opacity}

/* ---------- ljestvica (ranking bars) ---------- */
.rank-list{list-style:none;margin-top:2.4rem;display:grid;gap:1rem}
.rank-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr auto;gap:1rem;align-items:center}
.rank-name{font-family:var(--disp);font-weight:600;font-size:clamp(.95rem,1.6vw,1.15rem)}
.rank-track{height:20px;background:rgba(228,72,124,.1);border-radius:999px;overflow:hidden}
.rank-bar{display:block;height:100%;width:var(--v);background:var(--c);border-radius:999px;transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease)}
.rank-row.rv-in .rank-bar{transform:scaleX(1)}
.rank-pct{font-family:var(--disp);font-weight:800;font-size:1.1rem;min-width:2.6ch;text-align:right}
.rank-pct::after{content:"%";font-size:.7em;opacity:.6}
.rank-note{margin-top:1.4rem;font-size:.9rem;opacity:.65;font-style:italic}

/* ---------- responsive (home sections) ---------- */
@media (max-width:1000px){
  .d3stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .world-row,.world-row.rev{grid-template-columns:1fr}
  .world-row.rev .world-fig{order:0}
  .world-fig{max-width:440px}
  .ex-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .bez-cols{grid-template-columns:1fr;gap:1.6rem}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .ex-grid{grid-template-columns:1fr}
  .rank-row{grid-template-columns:1fr auto;grid-template-areas:"name pct" "track track";row-gap:.4rem}
  .rank-name{grid-area:name}
  .rank-pct{grid-area:pct}
  .rank-track{grid-area:track}
  .hero-stkr{width:88px;height:88px;font-size:.7rem;top:-1.6rem}
  .hero-fig img{max-height:56vh}
}


/* ===== consent.css ===== */
/* ============================================================
   MILLE BACI · consent bar
   Quiet by design. It is a legal notice, not a section of the site: it should read
   as a soft floating card and get out of the way the moment it is answered.

   Deliberately NOT here any more: the hard 2px navy outline (against the paper
   background it read as a black box), the rainbow sprinkle stripe, the shouty
   uppercase heading and the offset "sticker" shadows. Together they turned a
   one-sentence notice into something that looked like a form to fill in.
   Layout is a single row on desktop: sentence on the left, buttons on the right.
   ============================================================ */

.mbcc{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  display:flex;justify-content:center;
  padding:clamp(.7rem,2vw,1.4rem);
  pointer-events:none;
  font-family:var(--body,system-ui,sans-serif);
  /* A deeper cut of the brand pink. White on --pink (#E4487C) measures 3.75:1,
     under the 4.5:1 WCAG AA minimum at this size; #DF2563 measures 4.52:1 and is
     all but indistinguishable. Consent controls must never be hard to read. */
  --mbcc-pink:#DF2563;
}
.mbcc[hidden]{display:none}

.mbcc-card{
  pointer-events:auto;
  width:min(1000px,100%);
  background:var(--paper,#FFFDFB);
  color:var(--ink,#1E2A66);
  border:0;
  border-radius:18px;
  /* soft and diffuse, so the card lifts off the page instead of being drawn onto it */
  box-shadow:0 2px 6px rgba(30,42,102,.06), 0 12px 34px rgba(30,42,102,.13);
  padding:clamp(.95rem,2vw,1.15rem) clamp(1.1rem,2.4vw,1.5rem);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;
  transform:translateY(130%);
  opacity:0;
  transition:transform .5s cubic-bezier(.34,1.4,.64,1), opacity .3s ease;
}
.mbcc.in .mbcc-card{transform:translateY(0);opacity:1}

.mbcc-text{flex:1 1 340px;font-size:.94rem;line-height:1.5;margin:0}
.mbcc-text a{color:var(--mbcc-pink);text-decoration:underline;text-underline-offset:3px}
.mbcc-text a:hover{color:var(--teal,#26A19C)}

.mbcc-actions{display:flex;align-items:center;gap:.55rem;flex:0 0 auto}

/* Accept and Reject: same pill, same size, side by side. No dark pattern. */
.mbcc-btn{
  font-family:var(--disp,inherit);font-weight:600;font-size:.72rem;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  padding:.68rem 1.2rem;border-radius:999px;
  border:1.5px solid var(--mbcc-pink);
  background:var(--mbcc-pink);color:var(--paper,#FFFDFB);cursor:pointer;
  transition:background .2s,color .2s,opacity .2s;
}
.mbcc-btn:hover{opacity:.85}
.mbcc-btn.ghost{background:transparent;color:var(--mbcc-pink)}
.mbcc-btn.ghost:hover{background:var(--mbcc-pink);color:var(--paper,#FFFDFB);opacity:1}

.mbcc-link{
  background:none;border:0;cursor:pointer;padding:.5rem .35rem;
  font-family:var(--body,inherit);font-size:.85rem;color:var(--ink,#1E2A66);
  text-decoration:underline;text-underline-offset:3px;opacity:.6;white-space:nowrap;
}
.mbcc-link:hover{opacity:1}

/* ---- settings panel: only appears if someone asks for it ---- */
.mbcc-panel{
  flex:1 1 100%;margin-top:.85rem;padding-top:.85rem;
  border-top:1px solid rgba(30,42,102,.12);
}
.mbcc-panel[hidden]{display:none}
.mbcc-opt{display:flex;gap:.85rem;align-items:flex-start;padding:.6rem 0}
.mbcc-opt + .mbcc-opt{border-top:1px solid rgba(30,42,102,.08)}
.mbcc-opt-t{font-weight:600;font-size:.9rem;margin-bottom:.1rem}
.mbcc-opt-d{font-size:.85rem;line-height:1.45;opacity:.72}
.mbcc-opt-b{flex:1}
.mbcc-panel .mbcc-actions{margin-top:.8rem}

/* teal = on, pale navy = off */
.mbcc-sw{
  flex:0 0 auto;width:44px;height:26px;border-radius:999px;position:relative;
  border:0;background:rgba(30,42,102,.18);cursor:pointer;
  transition:background .25s;margin-top:.1rem;
}
.mbcc-sw::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(30,42,102,.28);
  transition:transform .25s cubic-bezier(.34,1.4,.64,1);
}
.mbcc-sw[aria-checked="true"]{background:var(--teal,#26A19C)}
.mbcc-sw[aria-checked="true"]::after{transform:translateX(18px)}
.mbcc-sw[aria-disabled="true"]{background:var(--teal,#26A19C);opacity:.45;cursor:default}

@media (max-width:640px){
  .mbcc-card{border-radius:16px;gap:.9rem}
  .mbcc-text{flex:1 1 100%;font-size:.9rem}
  .mbcc-actions{flex:1 1 100%}
  .mbcc-btn{flex:1 1 0;text-align:center;padding:.72rem .6rem}
  .mbcc-link{margin-left:auto;flex:0 0 auto}
}

@media (prefers-reduced-motion:reduce){
  .mbcc-card{transition:opacity .2s ease;transform:none}
  .mbcc-sw::after{transition:none}
}

/* the "change your choice" button that lives in the policy page body */
.mb-consent-reopen{margin-top:.4rem}


/* ===== form.css ===== */
/* ============================================================
   MILLE BACI · contact form
   Same vocabulary as the rest of the site: paper card, navy ink, pink pill,
   generous radii. No beige, no brown, no black.
   ============================================================ */

.kform{padding-top:clamp(2rem,6vh,4rem)}
.kform-wrap{max-width:min(760px,92vw);margin:0 auto}
.kform-lead{margin-bottom:2rem}

.kform-form{display:flex;flex-direction:column;gap:1.05rem}

.kform-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
@media (max-width:640px){.kform-row{grid-template-columns:1fr}}

.kfield{display:flex;flex-direction:column;gap:.4rem}
.kfield-l{
  font-family:var(--disp);font-weight:600;font-size:.72rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
}
.kfield-l i{color:var(--pink);font-style:normal}

.kfield input,
.kfield select,
.kfield textarea{
  font:inherit;font-size:1rem;color:var(--ink);
  background:#fff;
  border:2px solid rgba(30,42,102,.16);
  border-radius:14px;
  padding:.85rem 1rem;
  width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.kfield textarea{resize:vertical;min-height:150px;line-height:1.55}
.kfield input::placeholder,
.kfield textarea::placeholder{color:rgba(30,42,102,.42)}

.kfield input:hover,.kfield select:hover,.kfield textarea:hover{border-color:rgba(30,42,102,.3)}
.kfield input:focus,.kfield select:focus,.kfield textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(38,161,156,.16);
}
/* only complain once the visitor has actually typed something wrong */
.kfield input:not(:placeholder-shown):invalid,
.kfield textarea:not(:placeholder-shown):invalid{border-color:var(--pink)}

.kfield select{
  appearance:none;cursor:pointer;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E2A66' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 8px;
}

/* the honeypot must be unreachable for people but present for bots:
   not display:none, which some bots skip */
.kform-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf-turnstile{margin:.2rem 0}

.kform-foot{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:.3rem}
.kform-send{border:0}
.kform-send[disabled]{opacity:.55;cursor:progress}
.kform-priv{flex:1 1 260px;font-size:.82rem;line-height:1.5;opacity:.72;margin:0}
.kform-priv a{color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.kform-priv a:hover{color:var(--teal)}

.kform-msg{
  margin:0;padding:.85rem 1.1rem;border-radius:12px;font-size:.95rem;
  background:rgba(228,72,124,.1);color:var(--plum);border:1.5px solid rgba(228,72,124,.32);
}
.kform-msg[hidden]{display:none}

.kform-done{
  text-align:center;padding:clamp(2rem,6vw,3.2rem) 1.5rem;
  border-radius:22px;background:rgba(38,161,156,.1);
  border:2px dashed rgba(38,161,156,.42);
}
.kform-done[hidden]{display:none}
.kform-done-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.4rem,4vw,2.1rem);color:var(--teal);margin-bottom:.5rem;
}
.kform-done-p{font-size:1.05rem;max-width:46ch;margin:0 auto}