@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-300-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-300-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-300-latin-ext.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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-300-latin.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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-400-latin-ext.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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-400-latin.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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-500-latin-ext.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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-500-latin.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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-600-latin-ext.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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-600-latin.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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-700-latin-ext.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;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-700-latin.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;
}
@font-face {
  font-family: 'Italiana';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/italiana-sr.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0106-0107, U+010C-010D, U+0110-0111, U+0152-0153, U+0160-0161, U+017D-017E, U+02BB-02BC, U+02C6-02C7, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-var-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-052F, U+1C80-1C8A, U+2116;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-var-latin-ext.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;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/playfair-var-latin.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;
}
@font-face {
  font-family: 'MonteCarlo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montecarlo-400-latin-ext.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;
}
@font-face {
  font-family: 'MonteCarlo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montecarlo-400-latin.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;
}
@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/marck-script-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/marck-script-400-latin-ext.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;
}
@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/marck-script-400-latin.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;
}
/* ============================================================
   HOPE CENTAR v9 "PORTAL" — full redo 2026-08-04
   Register: venetianspa warmth + drorjen type discipline +
   gielly full-bleed rooms. Signature: arch photo frames +
   MonteCarlo script over tracked Playfair caps.
   Kept from brand: cream/espresso/gold, line-art logo.
   Motion: fade+rise entrances, ONE hero load moment,
   native scroll, zero pinning.
   ============================================================ */

:root{
  --cream:    #F4EFE8;
  --cream-2:  #ECE4D6;
  --esp:      #45281A;
  --esp-2:    #2E1B10;
  --ink:      #38220F;
  --gold:     #C9A96E;
  --gold-2:   #9C7434;
  --mut:      rgba(56,34,15,.64);
  --hair:     rgba(69,40,26,.16);
  --hair-d:   rgba(244,239,232,.18);
  --cream-t:  rgba(244,239,232,.74);
  --f-disp:   'Italiana', 'Playfair Display', Georgia, serif;
  --f-script: 'MonteCarlo', 'Marck Script', cursive;
  --f-body:   'Montserrat', system-ui, sans-serif;
  --pad: clamp(20px, 4.5vw, 64px);
  --sect: clamp(88px, 11vw, 150px);
  --r-arch: 20px; /* v17 standardization: the v9 portal arch is dead */
  --r-card: 18px;
  --r-pill: 999px;
  --d-micro: 180ms;
  --d-small: 380ms;
  --d-std:   760ms;
  --d-hero:  1050ms;
  --stag:    90ms;
  --e-enter: cubic-bezier(.16,1,.3,1);
}
html[lang="ru"]{ --f-script: 'Marck Script', cursive; --f-disp: 'Playfair Display', Georgia, serif; }

/* ---------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-padding-top:96px }
body{
  font-family:var(--f-body);
  font-size:1.0313rem; /* 16.5px */
  font-weight:400;
  line-height:1.75;
  color:var(--ink);
  background:#ECECE4; /* v16 MIRROR: the old site's ground, sitewide */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--esp); color:var(--cream) }
:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; border-radius:2px }
html.scroll-lock, html.scroll-lock body{ overflow:hidden }
.skip{
  position:fixed; top:-60px; left:16px; z-index:10001;
  background:var(--esp); color:var(--cream);
  padding:10px 20px; border-radius:var(--r-pill);
  font-size:.8rem; transition:top var(--d-micro) ease-out;
}
.skip:focus{ top:14px }

.wrap{ max-width:1280px; margin-inline:auto; padding-inline:var(--pad) }
.sect{ padding-block:var(--sect) }
.sect-cream2{ background:#fff }
.sect-cream{ background:#fff }  /* v17: white rooms like the landing's ask/partner run */
.sect-dark{
  background:var(--esp); color:var(--cream);
  max-width:calc(100% - clamp(20px, 2.6vw, 48px)); margin-inline:auto;
  border-radius:24px; overflow:hidden;
}

/* ---------------------------------------------------------- type voices */
.eyebrow{
  font-size:.6875rem; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:var(--gold-2); margin-bottom:18px;
}
.sect-dark .eyebrow{ color:var(--cream-t) }

.shead{ margin-bottom:clamp(28px, 4vw, 44px) }
.shead-c{ text-align:center }
.shead-script{
  font-family:var(--f-script); font-weight:400;
  font-size:clamp(2.1rem, 3.6vw, 3.2rem); line-height:1.05;
  color:var(--esp);
  margin-bottom:-.14em; padding-left:.08em;
  position:relative; z-index:1; pointer-events:none;
}
.shead-caps, .h-sect{
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(1.8rem, 3vw, 2.7rem); line-height:1.18;
  letter-spacing:.005em; color:var(--esp);
}
.sect-dark .shead-caps, .sect-dark .h-sect{ color:var(--cream) }
.sect-dark .shead-script{ color:var(--cream) }
.h-sect{ margin-bottom:clamp(24px, 3.5vw, 40px) }

.sect-intro{ max-width:56ch; color:var(--mut); font-size:1.0625rem }
.shead-c + .sect-intro{ margin-inline:auto; text-align:center }

/* quiet Montserrat label over Italiana caps (the non-emotional sections) */
.slabel{
  font-size:.66rem; font-weight:600; letter-spacing:.34em;
  text-transform:uppercase; color:var(--esp); margin-bottom:16px;
}
.sect-dark .slabel{ color:var(--cream-t) }

/* MonteCarlo as THE heading: emotional statements only */
.h-script-xl{
  font-family:var(--f-script); font-weight:400;
  font-size:clamp(3rem, 6vw, 4.9rem); line-height:1;
  color:var(--esp); margin-bottom:18px;
}
.sect-dark .h-script-xl{ color:var(--cream) }

/* intro statement band: gold Italiana, larger */
.intro-sect .shead-caps{ font-size:clamp(1.9rem, 3.5vw, 3.2rem) }

/* ---------------------------------------------------------- entrances */
html.js .fx{ opacity:0; transform:translateY(34px) }
html.js .fx.in{
  opacity:1; transform:none;
  transition:opacity var(--d-std) var(--e-enter), transform 900ms var(--e-enter);
  transition-delay:calc(var(--i, 0) * var(--stag));
}

/* curtain image reveal (drorjen pattern): clip the CHILD, never the observed
   element (a zero-area clip on the target keeps its IO ratio at 0 forever) */
html.js .fx-clip img{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.14); transform-origin:50% 62%;
}
html.js .fx-clip.in img{
  clip-path:inset(0 0 0 0);
  transform:none;
  transition:clip-path var(--d-hero) var(--e-enter), transform calc(var(--d-hero) * 1.5) var(--e-enter);
  transition-delay:calc(var(--i, 0) * 110ms);
}

/* scroll-linked parallax targets (JS drives transform; disabled on mobile) */
[data-plx]{ will-change:transform }

/* staggered cascades inside a revealed parent */
.check-list.fx li{ opacity:0; transform:translateY(18px) }
.check-list.fx.in li{
  opacity:1; transform:none;
  transition:opacity 700ms var(--e-enter), transform 700ms var(--e-enter);
}
.check-list.fx.in li:nth-child(1){ transition-delay:.05s }
.check-list.fx.in li:nth-child(2){ transition-delay:.15s }
.check-list.fx.in li:nth-child(3){ transition-delay:.25s }
.check-list.fx.in li:nth-child(4){ transition-delay:.35s }
.check-list.fx.in li:nth-child(5){ transition-delay:.45s }
.check-list.fx.in li:nth-child(6){ transition-delay:.55s }

.faq-list.fx .faq-item{ opacity:0; transform:translateY(22px) }
.faq-list.fx.in .faq-item{
  opacity:1; transform:none;
  transition:opacity 750ms var(--e-enter), transform 750ms var(--e-enter);
}
.faq-list.fx.in .faq-item:nth-child(1){ transition-delay:.05s }
.faq-list.fx.in .faq-item:nth-child(2){ transition-delay:.14s }
.faq-list.fx.in .faq-item:nth-child(3){ transition-delay:.23s }
.faq-list.fx.in .faq-item:nth-child(4){ transition-delay:.32s }
.faq-list.fx.in .faq-item:nth-child(5){ transition-delay:.41s }
.faq-list.fx.in .faq-item:nth-child(6){ transition-delay:.5s }
.faq-list.fx.in .faq-item:nth-child(7){ transition-delay:.59s }
.faq-list.fx.in .faq-item:nth-child(8){ transition-delay:.68s }

/* word-mask heading rise: JS wraps words in .ww > span */
.ww{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:.14em 0 .06em; margin:-.14em 0 -.06em }
.ww > span{ display:inline-block }
html.js .fx.has-ww{ opacity:1; transform:none }
html.js .fx.has-ww .ww > span{ transform:translateY(118%); transition:none }
html.js .fx.has-ww.in .ww > span{
  transform:none;
  transition:transform 950ms var(--e-enter);
  transition-delay:calc(var(--wi, 0) * 70ms);
}

@media (max-width:760px){
  html.js .fx{ transform:translateY(16px) }
}

/* ---------------------------------------------------------- header */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:9990;
  transition:background var(--d-small) ease-out, box-shadow var(--d-small) ease-out;
}
.hd-in{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  /* v17c: NO width cap — the row spans with the SAME insets as the hero
     panel (clamp 14px/6.6vw/95px), so burger + CTA align with the first
     section's edges at every viewport (owner bug report 2026-08-06:
     header capped at 1600px drifted 130px off the panel at 1920). */
  padding:14px clamp(14px, 6.6vw, 95px);
}
.logo img{ width:64px; height:64px; object-fit:contain; transition:width var(--d-small) ease-out, height var(--d-small) ease-out }
.logo{ display:block; line-height:0 }
.hd-logo{ justify-self:center }
.logo-cream{ display:none }
.hd-right{ display:flex; align-items:center; gap:26px; justify-self:end }

.langs{ display:flex; align-items:center; gap:12px; font-size:.72rem; font-weight:600; letter-spacing:.14em }
.langs a{ opacity:.42; transition:opacity var(--d-micro) ease-out }
.langs a:hover, .langs a.on{ opacity:1 }
.langs i{ width:1px; height:11px; background:var(--hair) }

.hd-cta{
  font-size:.8rem; font-weight:500; letter-spacing:.02em; text-transform:none;
  border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:12px 24px; white-space:nowrap;
  transition:background var(--d-micro) ease-out, color var(--d-micro) ease-out, border-color var(--d-micro) ease-out;
}
.hd-cta:hover{ background:var(--esp); color:var(--cream); border-color:var(--esp) }

/* burger: 2px integer heights (1.5px rendered one line fat, one thin),
   staggered lengths as the designed state, hover completes the short line */
.burger{ justify-self:start; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:12px 2px; z-index:9995 }
.burger span{
  display:block; width:30px; height:2px; border-radius:1px;
  background:currentColor;
  transition:transform var(--d-small) var(--e-enter), width var(--d-micro) ease-out;
}
.burger span:last-child{ width:20px }
.burger:hover span:last-child{ width:30px }

/* light header (default): espresso on cream */
.hd{ color:var(--ink); background:transparent }
.hd.scrolled{ background:#ECECE4; box-shadow:0 1px 0 var(--hair) }
.hd.scrolled .logo img{ width:52px; height:52px }

/* dark variant over photo/espresso heroes */
.hd-dark:not(.scrolled){ color:var(--cream) }
.hd-dark:not(.scrolled) .hd-cta{ border-color:var(--hair-d) }
.hd-dark:not(.scrolled) .hd-cta:hover{ background:var(--cream); color:var(--esp); border-color:var(--cream) }
.hd-dark:not(.scrolled) .langs i{ background:var(--hair-d) }
.hd-dark:not(.scrolled) .logo-dark{ display:none }
.hd-dark:not(.scrolled) .logo-cream{ display:block }

body.menu-open .hd{ color:var(--cream); background:transparent; box-shadow:none }
body.menu-open .hd .logo-dark{ display:none }
body.menu-open .hd .logo-cream{ display:block }
body.menu-open .hd .langs i{ background:var(--hair-d) }
body.menu-open .hd .hd-cta{ border-color:var(--hair-d) }
body.menu-open .burger span:first-child{ transform:translateY(5px) rotate(45deg) }
body.menu-open .burger span:last-child{ transform:translateY(-5px) rotate(-45deg); width:30px }

@media (max-width:820px){
  .langs{ display:none }
  .hd-in{ padding:10px var(--pad) }
  .logo img{ width:54px; height:54px }
  .hd.scrolled .logo img{ width:46px; height:46px }
  .hd-cta{ padding:10px 18px; letter-spacing:.14em }
}

/* ---------------------------------------------------------- fullscreen menu */
.menu{
  position:fixed; inset:0; z-index:9985;
  visibility:hidden; opacity:0;
  transition:opacity var(--d-small) ease-out, visibility 0s linear var(--d-small);
}
.menu-bg{ position:absolute; inset:0; background:var(--esp-2) }
body.menu-open .menu{ visibility:visible; opacity:1; transition:opacity var(--d-small) ease-out }
.menu-in{
  position:relative; height:100%; overflow-y:auto;
  display:grid; grid-template-columns:1.4fr .8fr; gap:40px;
  align-items:center;
  padding:120px var(--pad) 60px;
  max-width:1280px; margin-inline:auto;
  color:var(--cream);
}
.menu-nav{ display:flex; flex-direction:column }
.menu-nav a{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(1.7rem, 4.2vh, 2.7rem); line-height:1.5;
  letter-spacing:.04em;
  display:flex; align-items:baseline; gap:18px;
  opacity:0; transform:translateY(18px);
  transition:color var(--d-micro) ease-out;
}
body.menu-open .menu-nav a{
  opacity:1; transform:none;
  transition:opacity var(--d-std) var(--e-enter), transform var(--d-std) var(--e-enter), color var(--d-micro) ease-out;
  transition-delay:calc(60ms + var(--i, 0) * 45ms), calc(60ms + var(--i, 0) * 45ms), 0s;
}
.menu-nav a em{
  font-family:var(--f-body); font-style:normal; font-size:.65rem;
  font-weight:600; letter-spacing:.22em; color:var(--gold); opacity:.85;
}
.menu-nav a:hover{ color:var(--gold) }
.menu-side{ display:flex; flex-direction:column; gap:34px; font-size:.9rem }
.menu-langs{ display:flex; gap:18px; font-weight:600; letter-spacing:.16em; font-size:.75rem }
.menu-langs a{ opacity:.45 }
.menu-langs a.on, .menu-langs a:hover{ opacity:1 }
.menu-meta{ display:flex; flex-direction:column; gap:8px; color:var(--cream-t) }
.menu-meta a:hover{ color:var(--gold) }
.menu-soc{ display:flex; gap:16px; margin-top:6px }
.menu-soc svg{ width:20px; height:20px }
.menu-soc a:hover{ color:var(--gold) }
.menu-sub{ display:flex; flex-direction:column; gap:10px; padding-top:26px; border-top:1px solid var(--hair-d) }
.menu-sub a{ color:var(--cream-t); font-size:.85rem; letter-spacing:.04em }
.menu-sub a:hover{ color:var(--gold) }
@media (max-width:900px){
  .menu-in{ grid-template-columns:1fr; align-items:start; gap:40px; padding-top:110px }
  .menu-nav a{ font-size:clamp(1.45rem, 3.4vh, 2rem); line-height:1.6 }
}

/* ---------------------------------------------------------- buttons + links */
/* v17d ONE BUTTON SYSTEM: every button is the landing pill — sentence
   case, 500 weight, trailing arrow in a filled circle. A leading icon
   (phone/mail) stays a plain small glyph. */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-size:.84rem; font-weight:500; letter-spacing:.01em; text-transform:none;
  padding:13px 15px 13px 26px; border-radius:var(--r-pill);
  transition:background var(--d-micro) ease-out, color var(--d-micro) ease-out, border-color var(--d-micro) ease-out;
}
.btn svg{ width:16px; height:16px; flex:none }
.btn svg:not(:first-child){
  width:28px; height:28px; border-radius:50%; padding:7px;
  transition:transform var(--d-small) var(--e-enter);
}
.btn:hover svg:not(:first-child){ transform:translateX(4px) }
.btn:not(:has(svg:not(:first-child))){ padding:13px 26px }
.btn-solid{ background:var(--esp); color:var(--cream) }
.btn-solid:hover{ background:var(--esp-2) }
.btn-solid svg:not(:first-child){ background:var(--cream); color:var(--esp) }
.btn-line{ border:1px solid var(--hair); color:var(--ink) }
.btn-line:hover{ background:var(--esp); color:var(--cream); border-color:var(--esp) }
.btn-line svg:not(:first-child){ background:var(--esp); color:var(--cream) }
.btn-line:hover svg:not(:first-child){ background:var(--cream); color:var(--esp) }
.sect-dark .btn-line, .cta-band .btn-line{ border-color:var(--hair-d); color:var(--cream) }
.sect-dark .btn-line:hover, .cta-band .btn-line:hover{ background:var(--cream); color:var(--esp); border-color:var(--cream) }
.btn-cream{ background:var(--cream); color:var(--esp) }
.btn-cream:hover{ background:#fff }
.btn-cream svg:not(:first-child){ background:var(--esp); color:var(--cream) }
.btn-ghost{ border:1px solid rgba(244,239,232,.44); color:var(--cream) }
.btn-ghost:hover{ background:var(--cream); color:var(--esp); border-color:var(--cream) }
.btn-ghost svg:not(:first-child){ background:var(--cream); color:var(--esp) }

.lnk{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.88rem; font-weight:500; letter-spacing:.02em; text-transform:none;
  color:var(--esp); position:relative; padding-bottom:4px;
}
.lnk::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-small) var(--e-enter);
}
.lnk:hover::after{ transform:scaleX(1) }
.lnk svg{ width:13px; height:13px }
.lnk-gold{ color:var(--gold) }
.sect-dark .lnk{ color:var(--gold) }

/* ---------------------------------------------------------- HERO (home) */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden }
.hero-bg{ position:absolute; inset:-13% 0 }
.hero-bg img{ width:100%; height:100%; object-fit:cover }
/* ambient life after the load moment (references all keep imagery breathing) */
@keyframes kb{ to{ scale:1.05 } }
html.js .hero-ready .hero-bg img{ animation:kb 15s ease-in-out 2.4s infinite alternate }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(182deg, rgba(46,27,16,.42) 0%, rgba(46,27,16,.12) 42%, rgba(46,27,16,.44) 70%, rgba(46,27,16,.86) 100%);
}
.hero-in{
  position:relative; width:100%; max-width:1600px; margin-inline:auto;
  padding:0 var(--pad) clamp(52px, 8vh, 92px);
  color:var(--cream);
}
.hero-copy{ max-width:860px }
.hero-script{
  font-family:var(--f-script); font-weight:400;
  font-size:clamp(2.6rem, 5.4vw, 4.3rem); line-height:1.05;
  color:var(--gold); padding-left:.06em;
  margin-bottom:-.1em; position:relative; z-index:1;
}
.hero-h1{
  font-family:var(--f-disp); font-weight:400;
  text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(3.3rem, 9.2vw, 7.2rem); line-height:1.02;
}
.hw{ display:inline-block; overflow:hidden; vertical-align:bottom }
.hw > span{ display:inline-block }
.hero-kicker{
  margin-top:18px;
  font-size:.72rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--cream-t);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px }
.hero-note{
  position:absolute; right:var(--pad); bottom:clamp(52px, 8vh, 92px);
  font-size:.68rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream-t);
  writing-mode:vertical-rl;
}
@media (max-width:900px){
  .hero-note{ display:none }
  .hero{ min-height:92svh }
  .hero-scrim{
    background:linear-gradient(182deg, rgba(46,27,16,.5) 0%, rgba(46,27,16,.26) 38%, rgba(46,27,16,.6) 66%, rgba(46,27,16,.9) 100%);
  }
}

/* one-time load moment (html.js only; everything visible without JS) */
html.js .hero-bg img{ opacity:0; transform:scale(1.07) }
html.js .hero-ready .hero-bg img{
  opacity:1; transform:none;
  transition:opacity var(--d-hero) var(--e-enter), transform calc(var(--d-hero) * 2) var(--e-enter);
}
html.js .hero-script{ opacity:0; transform:translateY(14px) }
html.js .hero-ready .hero-script{
  opacity:1; transform:none;
  transition:opacity var(--d-std) var(--e-enter) 420ms, transform var(--d-std) var(--e-enter) 420ms;
}
html.js .hw > span{ transform:translateY(112%) }
html.js .hero-ready .hw > span{
  transform:none;
  transition:transform 850ms var(--e-enter) calc(520ms + var(--i, 0) * var(--stag));
}
html.js .hero-kicker, html.js .hero-cta, html.js .hero-note{ opacity:0 }
html.js .hero-ready .hero-kicker, html.js .hero-ready .hero-cta, html.js .hero-ready .hero-note{
  opacity:1;
  transition:opacity var(--d-std) ease-out 980ms;
}

/* ---------------------------------------------------------- distributor strip */
.dist{ background:var(--cream); border-bottom:1px solid var(--hair) }
.dist-in{
  display:flex; align-items:center; justify-content:space-between; gap:30px;
  padding-block:26px;
}
.dist-l{
  font-family:var(--f-script); font-size:1.9rem; line-height:1;
  color:var(--gold-2); white-space:nowrap;
}
.dist-logos{ display:flex; align-items:center; gap:44px }
.dist-logos img{ width:auto; height:52px; object-fit:contain; opacity:.88 }
.dist-r{ display:flex; align-items:center; gap:26px }
.dist-note{
  font-size:.66rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--mut);
}
@media (max-width:900px){
  .dist-in{ flex-wrap:wrap; justify-content:center; text-align:center; gap:18px }
  .dist-note{ display:none }
  .dist-logos img{ height:40px }
}

/* ---------------------------------------------------------- intro + arch strip */
.intro-sect{ padding-bottom:calc(var(--sect) * .8) }
.intro-sect .shead-caps{ color:var(--gold-2) }
.intro-lead{
  max-width:62ch; margin:0 auto; text-align:center; color:var(--mut);
  font-size:1.1rem;
}
.arch-strip{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(14px, 2vw, 28px);
  margin-top:clamp(44px, 6vw, 72px);
  align-items:end;
}
.arch{ border-radius:var(--r-arch); overflow:hidden; position:relative }
.arch img{ width:100%; height:100%; object-fit:cover }
.arch-strip .arch{ aspect-ratio:3/4.1 }
.arch-strip .arch:nth-child(2), .arch-strip .arch:nth-child(3){ aspect-ratio:3/4.8 }
@media (max-width:760px){
  .arch-strip{ grid-template-columns:repeat(2, 1fr) }
}

/* ---------------------------------------------------------- treatments index */
.t-index-head{
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end;
  margin-bottom:clamp(20px, 3vw, 36px);
}
.t-index-head .shead{ margin-bottom:0 }
@media (max-width:900px){ .t-index-head{ grid-template-columns:1fr; gap:16px } }

.t-cols{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px, 4.5vw, 70px); align-items:start }
.t-list{ border-bottom:1px solid var(--hair) }
.t-row{
  display:grid; grid-template-columns:54px 1fr auto 30px; align-items:center; gap:18px;
  padding-block:clamp(18px, 2.6vw, 27px);
  border-top:1px solid var(--hair);
  position:relative;
}
/* landing index: rows slide from the left, their rules draw themselves */
html.js .t-list .t-row{ border-top-color:transparent }
html.js .t-list .t-row::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--hair); transform:scaleX(0); transform-origin:left;
}
html.js .t-list .t-row.fx{ transform:translateX(-44px) }
html.js .t-list .t-row.fx.in{
  transform:none;
  transition:opacity 800ms var(--e-enter), transform 800ms var(--e-enter);
  transition-delay:calc(var(--i, 0) * 80ms);
}
html.js .t-list .t-row.fx.in::before{
  transform:scaleX(1);
  transition:transform 1200ms var(--e-enter);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.t-num{
  font-family:var(--f-disp); font-size:1rem;
  color:var(--gold-2); opacity:.85;
}
.t-name{
  font-family:var(--f-disp); font-weight:500; font-size:clamp(1.15rem, 1.8vw, 1.55rem);
  line-height:1.25; letter-spacing:.01em;
  transition:color var(--d-micro) ease-out;
}
.t-price{ font-size:.85rem; font-weight:600; letter-spacing:.06em; white-space:nowrap }
.t-price i{ font-style:normal; font-weight:400; color:var(--mut); font-size:.75rem }
.t-arrow{ opacity:0; transform:translateX(-6px); transition:opacity var(--d-micro) ease-out, transform var(--d-micro) ease-out; color:var(--gold-2) }
.t-arrow svg{ width:18px; height:18px }
.t-row:hover .t-name, .t-row.on .t-name{ color:var(--gold-2) }
.t-row:hover .t-arrow, .t-row.on .t-arrow{ opacity:1; transform:none }

.t-stick{
  position:relative; aspect-ratio:3/4;
  border-radius:var(--r-arch); overflow:hidden; background:var(--cream);
}
.t-stick img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity var(--d-small) ease-out;
}
.t-stick img.on{ opacity:1 }
.t-stick-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:70px 26px 24px;
  background:linear-gradient(180deg, rgba(46,27,16,0), rgba(46,27,16,.78));
  color:var(--cream); font-size:.85rem; line-height:1.6;
  opacity:0; transition:opacity var(--d-small) ease-out;
}
.t-stick-cap.on{ opacity:1 }
@media (max-width:900px){
  .t-cols{ grid-template-columns:1fr }
  .t-stick{ display:none }
  .t-row{ grid-template-columns:34px 1fr auto }
  .t-arrow{ display:none }
}
.t-index-foot{ display:flex; align-items:center; gap:34px; margin-top:clamp(28px, 4vw, 44px); flex-wrap:wrap }

/* ---------------------------------------------------------- splits + heritage */
.split{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(36px, 6vw, 90px); align-items:center }
.split-rev{ grid-template-columns:1.05fr 1fr }
.split-media{ border-radius:var(--r-card); overflow:hidden }
.split-media.arch{ border-radius:var(--r-arch); align-self:end }
.split-media img{ width:100%; height:100%; object-fit:cover }
.split-copy > p{ max-width:56ch }
.split-copy > p + p{ margin-top:1em }
@media (max-width:900px){
  .split, .split-rev{ grid-template-columns:1fr }
  .split-media.arch{ max-width:420px; margin-inline:auto }
  .split-rev .split-media{ order:-1 }
}

.heritage .split-media{ aspect-ratio:3/3.7 }
.heritage p{ color:var(--cream-t) }
.counters{
  display:flex; gap:clamp(26px, 4vw, 54px);
  margin-top:clamp(28px, 4vw, 40px); padding-top:clamp(22px, 3vw, 30px);
  border-top:1px solid var(--hair-d);
}
.counter .num{
  font-family:var(--f-disp); font-weight:400; font-size:clamp(2rem, 3.6vw, 3.1rem);
  line-height:1; color:var(--gold); display:block;
  font-variant-numeric:tabular-nums;
}
.counter span{ display:block; margin-top:8px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-t) }
.heritage .lnk{ margin-top:clamp(24px, 3.4vw, 36px) }

/* academy band */
.academy-band .split-media{ aspect-ratio:3/3.5 }

/* ---------------------------------------------------------- results (BA) */
.results-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px, 6vw, 90px); align-items:center;
}
.results-copy p{ max-width:46ch; color:var(--mut) }
@media (max-width:900px){ .results-grid{ grid-template-columns:1fr } }

.ba{
  position:relative; overflow:hidden; border-radius:var(--r-card);
  padding-top:var(--r, 130%);
  --p:50%;
  touch-action:none; user-select:none;
}
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none }
.ba-top{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p)) 0 0); pointer-events:none }
.ba-top img{ position:absolute; inset:0 }
.ba-tag{
  position:absolute; top:14px; z-index:3;
  font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  background:rgba(46,27,16,.55); color:var(--cream);
  padding:6px 14px; border-radius:var(--r-pill);
}
.ba-tag-l{ left:14px }
.ba-tag-r{ right:14px }
.ba-line{
  position:absolute; top:0; bottom:0; left:var(--p); width:1.5px; z-index:2;
  background:var(--cream); pointer-events:none;
  transform:translateX(-50%);
}
.ba-line i{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--cream); color:var(--esp);
  display:flex; align-items:center; justify-content:center;
}
.ba-line i svg{ width:20px; height:20px }
.ba input[type=range]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; z-index:4; margin:0;
}
.ba-hint{ display:inline-flex; align-items:center; gap:10px; color:var(--mut); font-size:.85rem }
.ba-hint svg{ width:18px; height:18px; color:var(--gold-2) }
.ba-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(18px, 2.6vw, 34px) }
@media (max-width:980px){ .ba-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:640px){ .ba-grid{ grid-template-columns:1fr } }

/* ---------------------------------------------------------- shop */
.shop-track{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(18px, 2.5vw, 34px);
  max-width:1280px; margin:clamp(30px, 4vw, 48px) auto 0; padding-inline:var(--pad);
}
.prod{ text-align:center }
.prod-img{
  border-radius:var(--r-arch); overflow:hidden;
  background:var(--cream); aspect-ratio:3/3.6;
  display:flex; align-items:center; justify-content:center;
  padding:12%;
  transition:background var(--d-micro) ease-out;
}
.prod:hover .prod-img{ background:var(--gold) }
.prod-img img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply }
.prod b{
  display:block; margin-top:18px;
  font-family:var(--f-disp); font-weight:500; font-size:1.05rem; letter-spacing:.02em;
}
.prod > span{
  display:block; margin-top:4px;
  font-size:.66rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--mut);
}
@media (max-width:900px){
  .shop-track{ grid-template-columns:repeat(2, 1fr) }
}
.sect-more{ margin-top:clamp(30px, 4vw, 48px) }

/* ---------------------------------------------------------- team */
.persons{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 44px) }
.person{ text-align:center }
.person-media{
  display:block; border-radius:var(--r-arch); overflow:hidden; aspect-ratio:3/3.9;
}
.person-media img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform 800ms var(--e-enter) }
.person:hover .person-media img{ transform:scale(1.055) }
.person:hover .person-media.fx-clip.in img{ transition-delay:0s }
.person b{
  display:block; margin-top:20px;
  font-family:var(--f-disp); font-weight:500; font-size:1.3rem; letter-spacing:.02em;
}
.person > span{
  display:block; margin-top:5px;
  font-size:.68rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-2);
}
@media (max-width:760px){
  .persons{ grid-template-columns:1fr; max-width:380px; margin-inline:auto }
}

/* ---------------------------------------------------------- close (faq + contact) */
.close-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px, 6vw, 90px); align-items:start }
@media (max-width:900px){ .close-grid{ grid-template-columns:1fr } }

.faq-list{ border:0 }
.faq-item{ border:0; background:#F9F9F9; border-radius:24px; margin-bottom:14px; padding:6px 24px }
.sect-dark .faq-item{ background:rgba(255,255,255,.06) }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
  text-align:left; padding-block:18px;
  font-weight:500; font-size:1rem; line-height:1.5;
  transition:color var(--d-micro) ease-out;
}
.faq-q:hover{ color:var(--gold-2) }
.faq-q .ic{
  flex:none; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--hair);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--d-small) var(--e-enter), background var(--d-micro) ease-out, color var(--d-micro) ease-out;
}
.faq-item.open .faq-q .ic{ transform:rotate(45deg); background:var(--esp); color:var(--cream); border-color:var(--esp) }
.faq-a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--d-small) var(--e-enter);
}
.faq-item.open .faq-a{ grid-template-rows:1fr }
.faq-a-in{ overflow:hidden }
.faq-a-in p{ padding-bottom:22px; color:var(--mut); max-width:60ch; font-size:.95rem }

.sect-dark .faq-a-in p{ color:var(--cream-t) }

.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px, 5vw, 80px); align-items:start }
@media (max-width:900px){ .faq-grid{ grid-template-columns:1fr } }
.faq-head .shead{ margin-bottom:0 }

.c-nap{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px }
.c-nap a, .c-nap p{ display:flex; align-items:center; gap:14px; font-size:.95rem }
.c-nap svg{ width:17px; height:17px; color:var(--gold-2); flex:none }
.c-nap a:hover{ color:var(--gold-2) }

/* ---------------------------------------------------------- forms */
.c-form label{ display:block; margin-bottom:22px }
.c-form label span{
  display:block; margin-bottom:6px;
  font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--mut);
}
.c-form input, .c-form textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair);
  padding:10px 2px; font:inherit; color:var(--ink); border-radius:0;
  transition:border-color var(--d-micro) ease-out;
}
.c-form input:focus, .c-form textarea:focus{ outline:none; border-color:var(--gold-2) }
.c-form textarea{ resize:vertical; min-height:120px }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:26px }
@media (max-width:640px){ .f-row{ grid-template-columns:1fr } }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0 }
.f-note{ margin-top:16px; font-size:.9rem; min-height:1.4em }
.f-note.ok{ color:var(--gold-2) }
.f-note.err{ color:#8a2f1d }

/* ---------------------------------------------------------- CTA band */
.cta-band{
  background:var(--esp); color:var(--cream);
  padding-block:calc(var(--sect) * .9);
  text-align:center; position:relative; overflow:hidden;
  /* v17: rounded inset room like every other espresso surface */
  max-width:calc(100% - clamp(20px, 2.6vw, 48px)); margin-inline:auto;
  border-radius:24px;
}
.cta-script{
  font-family:var(--f-script); font-size:clamp(2.4rem, 4.6vw, 3.8rem); line-height:.95;
  color:var(--cream); margin-bottom:-.3em; position:relative; z-index:1;
}
.cta-caps{
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(1.6rem, 2.8vw, 2.4rem); line-height:1.25;
}
.cta-p{ max-width:52ch; margin:18px auto 0; color:var(--cream-t) }
.cta-row{ display:flex; justify-content:center; align-items:center; gap:28px; margin-top:34px; flex-wrap:wrap }
.cta-tel{
  display:inline-flex; align-items:center; gap:12px;
  font-size:1.05rem; font-weight:500; letter-spacing:.04em;
  color:var(--cream); transition:color var(--d-micro) ease-out;
}
.cta-tel svg{ width:17px; height:17px; color:var(--gold) }
.cta-tel:hover{ color:var(--gold) }

/* ---------------------------------------------------------- footer */
.ft{ background:var(--esp-2); color:var(--cream); overflow:hidden }
.ft-script{
  font-family:var(--f-script); text-align:center;
  font-size:clamp(3.2rem, 8.6vw, 7.2rem); line-height:1.1;
  color:var(--gold); opacity:.92;
  padding:clamp(56px, 8vw, 100px) var(--pad) 0;
  white-space:nowrap;
}
@media (max-width:760px){ .ft-script{ white-space:normal; line-height:1; font-size:clamp(2.6rem, 13vw, 3.4rem) } }
.ft-in{
  max-width:1280px; margin-inline:auto; padding:clamp(44px, 6vw, 76px) var(--pad);
  display:grid; grid-template-columns:1.25fr .8fr .75fr .85fr; gap:clamp(28px, 4vw, 56px);
}
.ft-brand p{ color:var(--cream-t); font-size:.92rem; max-width:34ch; margin-top:18px }
.ft-logo img{ width:88px; height:88px }
.ft .logo-dark{ display:none }
.ft .logo-cream{ display:block }
.ft-soc{ display:flex; gap:16px; margin-top:22px }
.ft-soc svg{ width:19px; height:19px }
.ft-soc a{ color:var(--cream-t) } .ft-soc a:hover{ color:var(--gold) }
.ft-col h2{
  font-size:.68rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:20px;
}
.ft-col a{ display:block; padding-block:5px; color:var(--cream-t); font-size:.92rem; transition:color var(--d-micro) ease-out }
.ft-col a:hover{ color:var(--cream) }
.ft-hours{ margin-top:14px; color:var(--cream-t); font-size:.85rem }
.ft-hours span{ display:block }
.ft-bar{
  border-top:1px solid var(--hair-d);
  padding:22px var(--pad);
  max-width:1280px; margin-inline:auto;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:.78rem; color:var(--cream-t);
}
.ft-bar nav{ display:flex; gap:18px; flex-wrap:wrap }
.ft-bar a:hover{ color:var(--gold) }
@media (max-width:900px){ .ft-in{ grid-template-columns:1fr; gap:40px } }

/* ---------------------------------------------------------- FAB */
.fab{
  position:fixed; right:22px; bottom:22px; z-index:9000;
  display:flex; align-items:center; gap:10px;
  background:var(--esp); color:var(--cream);
  border:1px solid rgba(201,169,110,.5);
  border-radius:var(--r-pill); padding:14px 24px;
  font-size:.84rem; font-weight:500; letter-spacing:.02em; text-transform:none;
  transition:background var(--d-micro) ease-out;
  box-shadow:0 10px 30px rgba(46,27,16,.28);
}
.fab:hover{ background:var(--esp-2) }
.fab svg{ width:16px; height:16px; color:var(--gold) }
@media (max-width:760px){
  .fab{ padding:15px; border-radius:50% }
  .fab span{ display:none }
}
body.menu-open .fab{ display:none }

/* ---------------------------------------------------------- page heroes (subpages) */
.p-hero{
  padding:calc(96px + clamp(40px, 7vw, 96px)) 0 clamp(40px, 6vw, 72px);
}
.p-script{
  font-family:var(--f-script); font-size:clamp(2.2rem, 4.2vw, 3.4rem); line-height:1.05;
  color:var(--esp); margin-bottom:-.12em; padding-left:.06em; position:relative; z-index:1;
}
.p-hero h1, .prof-copy h1, .t-hero-copy h1, .post-hero-copy h1{
  /* v17: mixed-case Italiana like the hero wordmark — the tracked caps
     were v9 and their tops were clipped by the .ww overflow mask */
  font-family:'Italiana', var(--f-disp); font-weight:400;
  font-size:clamp(2.6rem, 5.2vw, 4.4rem); line-height:1.06;
  letter-spacing:.01em; text-transform:none;
  color:var(--esp);
}
.p-lead{ max-width:62ch; margin-top:22px; color:var(--mut); font-size:1.08rem }
.p-hero-dark{
  background:var(--esp); color:var(--cream);
  max-width:calc(100% - clamp(20px, 2.6vw, 48px)); margin-inline:auto;
  border-radius:24px; overflow:hidden;
  margin-top:calc(72px + 1.5vh);
  padding-top:clamp(56px, 8vw, 110px);
}
.p-hero-dark h1{ color:var(--cream) }
.p-hero-dark .p-script{ color:var(--cream) }
.p-hero-dark .p-lead{ color:var(--cream-t) }
.p-hero-img{ position:relative; padding-top:clamp(90px, 13vw, 170px); padding-bottom:clamp(72px, 10vw, 130px) }
.p-hero-bg{ position:absolute; inset:0; overflow:hidden }
.p-hero-bg img{ width:100%; height:100%; object-fit:cover }
.p-hero-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(46,27,16,.55), rgba(46,27,16,.74));
}
.p-hero-img .wrap{ position:relative; z-index:2 }
.p-hero-img .hero-cta{ margin-top:30px }

/* page-hero load cascade (the landing's evenly-timed beat, via --i) */
.p-hero .wrap > *:nth-child(2), .t-hero-copy > *:nth-child(2), .post-hero-copy > *:nth-child(2){ --i:1 }
.p-hero .wrap > *:nth-child(3), .t-hero-copy > *:nth-child(3), .post-hero-copy > *:nth-child(3){ --i:2 }
.p-hero .wrap > *:nth-child(4), .t-hero-copy > *:nth-child(4), .post-hero-copy > *:nth-child(4){ --i:3 }
.p-hero .wrap > *:nth-child(5), .t-hero-copy > *:nth-child(5), .post-hero-copy > *:nth-child(5){ --i:4 }

/* breadcrumbs */
.crumbs{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin-bottom:22px }
.crumbs i{ font-style:normal; opacity:.5 }
.crumbs a:hover{ color:var(--gold-2) }
.sect-dark .crumbs, .p-hero-dark .crumbs{ color:var(--cream-t) }

/* ---------------------------------------------------------- treatment page */
.t-hero{ padding-top:96px }
.t-hero-in{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px, 5vw, 80px);
  align-items:center; padding-block:clamp(40px, 6vw, 72px);
}
.t-lead{ margin-top:20px; max-width:56ch; color:var(--mut) }
.t-chips{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap }
.pricechip{
  font-family:var(--f-disp); font-size:1.15rem;
  background:var(--esp); color:var(--cream);
  padding:10px 24px; border-radius:var(--r-pill);
  display:inline-flex; align-items:center;
}
.dotchip{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; color:var(--mut);
  border:1px solid var(--hair); border-radius:var(--r-pill); padding:10px 20px;
}
.dotchip svg{ width:14px; height:14px; color:var(--gold-2) }
.t-hero .hero-cta{ margin-top:30px }
.t-hero-media{ aspect-ratio:3/3.5; align-self:end }
.t-hero-media img{ width:100%; height:100%; object-fit:cover }
@media (max-width:900px){
  .t-hero-in{ grid-template-columns:1fr }
  .t-hero-media{ max-width:420px; margin-inline:auto }
}

.prose-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px, 6vw, 90px); align-items:start }
@media (max-width:900px){ .prose-grid{ grid-template-columns:1fr } }
.prose h2{
  font-family:var(--f-disp); font-weight:500; font-size:clamp(1.35rem, 2.2vw, 1.8rem);
  line-height:1.3; letter-spacing:.01em; color:var(--esp);
  margin:1.8em 0 .7em;
}
.prose h3{ font-family:var(--f-disp); font-weight:500; font-size:1.2rem; margin:1.5em 0 .5em; color:var(--esp) }
.prose > h2:first-child{ margin-top:0 }
.prose p + p{ margin-top:1em }
.prose-inv h2, .prose-inv h3{ color:var(--cream) }
.prose-inv p{ color:var(--cream-t) }
.prose-narrow{ max-width:760px }
.prose a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.prose a:hover{ color:var(--esp) }
.prose ul:not(.check-list), .prose ol{ padding-left:1.3em; margin:1em 0 }
.prose li + li{ margin-top:.5em }
.prose img{ border-radius:var(--r-card) }
.prose blockquote{
  border-left:2px solid var(--gold); padding-left:22px; margin:1.4em 0;
  font-family:var(--f-disp); font-size:1.15rem; color:var(--esp);
}

.check-list{ list-style:none; margin:1.2em 0 }
.check-list li{
  display:flex; gap:14px; align-items:flex-start;
  padding-block:10px; line-height:1.6;
}
.check-list svg{ width:16px; height:16px; flex:none; margin-top:6px; color:var(--gold-2) }
.sect-dark .check-list svg{ color:var(--gold) }

.t-aside{ display:flex; flex-direction:column; gap:24px }
.t-aside-card{
  background:#fff; border-radius:20px;
  padding:clamp(24px, 3vw, 36px);
}
.t-aside-card h3{ font-family:var(--f-disp); font-weight:500; font-size:1.25rem; margin-bottom:16px }
.t-aside-card .lnk{ margin-top:18px }
.t-aside-nap{
  border-top:1px solid var(--hair); padding-top:20px;
  display:flex; flex-direction:column; gap:10px; font-size:.92rem;
}
.t-aside-nap a, .t-aside-nap p{ display:flex; align-items:center; gap:12px }
.t-aside-nap svg{ width:15px; height:15px; color:var(--gold-2) }

.price-table .pr{
  display:flex; align-items:baseline; gap:12px;
  padding-block:12px;
}
.price-table .pr + .pr{ border-top:1px solid var(--hair) }
.pr-n{ font-size:.95rem }
.pr-dots{ flex:1; border-bottom:1px dotted rgba(156,116,52,.5); transform:translateY(-4px) }
.pr-p{ font-weight:600; font-size:.92rem; letter-spacing:.04em; white-space:nowrap }
.sect-dark .price-table .pr + .pr{ border-color:var(--hair-d) }
.sect-dark .pr-dots{ border-color:rgba(201,169,110,.4) }

/* steps */
.steps-sect .eyebrow{
  font-family:var(--f-script); font-size:clamp(2rem, 3.4vw, 2.9rem); text-transform:none;
  letter-spacing:0; color:var(--gold); margin-bottom:-.35em; font-weight:400;
}
.steps{
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 3.5vw, 44px) clamp(34px, 5vw, 70px);
  margin-top:clamp(30px, 4vw, 50px);
}
.steps li{ display:flex; gap:22px; align-items:flex-start }
.steps b{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(1.9rem, 3vw, 2.6rem); line-height:1; color:var(--gold);
  flex:none; width:1.6em;
}
.steps h3{ font-family:var(--f-disp); font-weight:500; font-size:1.15rem; margin-bottom:6px; color:var(--cream) }
.steps p{ color:var(--cream-t); font-size:.94rem }
@media (max-width:760px){ .steps{ grid-template-columns:1fr } }

.callout{
  background:#CDC7C1; border-radius:20px;
  padding:clamp(32px, 5vw, 60px);
}
/* the callout doubles as its own .wrap — keep the page gutter at <=1280 */
.wrap.callout{ width:calc(100% - 2 * var(--pad)); max-width:1166px }
.callout h2{ font-family:var(--f-disp); font-weight:500; font-size:clamp(1.35rem, 2.4vw, 1.9rem); margin-bottom:14px; color:var(--esp) }
.callout p{ max-width:64ch; color:var(--mut) }
.callout .cta-row{ display:flex; gap:26px; align-items:center; margin-top:26px; flex-wrap:wrap; justify-content:flex-start }

/* related cards */
.t-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 40px) }
.t-cards-all{ row-gap:clamp(40px, 5vw, 64px) }
.t-card{ display:block }
.t-card-media{ display:block; border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/4.6 }
.t-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 800ms var(--e-enter) }
.t-card:hover .t-card-media img{ transform:scale(1.055) }
.t-card-name{
  display:block; margin-top:18px;
  font-family:var(--f-disp); font-weight:500; font-size:1.25rem; line-height:1.3;
  transition:color var(--d-micro) ease-out;
}
.t-card:hover .t-card-name{ color:var(--gold-2) }
.t-card-short{ display:block; margin-top:8px; font-size:.9rem; color:var(--mut); line-height:1.6 }
.t-card-meta{
  display:flex; align-items:center; justify-content:space-between; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--hair);
}
.t-card-meta b{ font-weight:600; font-size:.9rem; letter-spacing:.05em }
.t-card-meta i{ color:var(--gold-2); display:inline-flex }
.t-card-meta svg{ width:16px; height:16px }
@media (max-width:900px){ .t-cards{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:620px){ .t-cards{ grid-template-columns:1fr } }

.guide-links{ list-style:none; margin-top:clamp(30px, 4vw, 46px); display:flex; flex-direction:column; gap:2px }
.guide-links a{
  display:inline-flex; gap:10px; align-items:center;
  padding-block:12px; font-size:.95rem; color:var(--gold-2);
}
.guide-links li + li{ border-top:1px solid var(--hair) }
.guide-links a:hover{ color:var(--esp) }
.guide-links svg{ width:14px; height:14px }

/* ---------------------------------------------------------- hub: chips */
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:clamp(28px, 4vw, 40px) }
.chip{
  font-size:.78rem; font-weight:500; letter-spacing:.04em;
  border:1px solid var(--hair); border-radius:var(--r-pill);
  padding:11px 22px;
  transition:background var(--d-micro) ease-out, color var(--d-micro) ease-out, border-color var(--d-micro) ease-out;
}
.chip:hover{ border-color:var(--esp) }
.chip.on{ background:var(--esp); color:var(--cream); border-color:var(--esp) }
.prob-panel{ display:none }
.prob-panel.on{ display:block }

/* ---------------------------------------------------------- prices page */
.price-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px, 5vw, 70px);
}
.price-group h2{
  font-family:var(--f-disp); font-weight:500; font-size:1.4rem; letter-spacing:.02em;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--hair);
  color:var(--esp);
}
@media (max-width:820px){ .price-cols{ grid-template-columns:1fr } }
.price-note{ margin-top:clamp(30px, 4vw, 44px); color:var(--mut); font-size:.9rem; max-width:70ch }

/* ---------------------------------------------------------- about page */
.tl{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 4vw, 50px); margin-top:clamp(30px, 4vw, 50px) }
.tl-item b{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(1.8rem, 3vw, 2.5rem); color:var(--cream); display:block; margin-bottom:10px;
}
.tl-item p{ color:var(--cream-t); font-size:.94rem }
@media (max-width:760px){ .tl{ grid-template-columns:1fr } }

.talks{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 3vw, 40px); margin-top:clamp(26px, 4vw, 44px) }
.talk{ border-top:1px solid var(--hair); padding-top:20px }
.talk b{ font-family:var(--f-disp); font-weight:500; font-size:1.15rem; display:block; margin-bottom:8px }
.talk p{ font-size:.92rem; color:var(--mut) }
@media (max-width:760px){ .talks{ grid-template-columns:1fr } }

.press{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(14px, 2vw, 26px); margin-top:clamp(26px, 4vw, 44px) }
.press figure{ border-radius:var(--r-card); overflow:hidden }
.press img{ width:100%; height:100%; object-fit:cover }
@media (max-width:820px){ .press{ grid-template-columns:repeat(2, 1fr) } }

.link-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2.4vw, 30px) }
.link-card{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px solid var(--hair); border-radius:var(--r-card);
  padding:24px 28px;
  font-family:var(--f-disp); font-weight:500; font-size:1.1rem;
  transition:background var(--d-micro) ease-out, color var(--d-micro) ease-out, border-color var(--d-micro) ease-out;
}
.link-card svg{ width:16px; height:16px; flex:none; color:var(--gold-2) }
.link-card:hover{ background:var(--esp); color:var(--cream); border-color:var(--esp) }
.link-card:hover svg{ color:var(--gold) }
@media (max-width:820px){ .link-cards{ grid-template-columns:1fr } }

/* ---------------------------------------------------------- academy page */
.benefits{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 4vw, 54px) }
.benefit b{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(2rem, 3.4vw, 2.9rem); color:var(--gold-2); display:block; margin-bottom:12px; line-height:1;
}
.benefit h3{ font-family:var(--f-disp); font-weight:500; font-size:1.2rem; margin-bottom:8px }
.benefit p{ font-size:.94rem; color:var(--mut) }
@media (max-width:760px){ .benefits{ grid-template-columns:1fr } }

.edu-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(18px, 2.6vw, 34px) }
.edu{
  background:var(--cream); border-radius:var(--r-card);
  padding:clamp(24px, 3vw, 38px);
}
.edu h3{ font-family:var(--f-disp); font-weight:500; font-size:1.2rem; margin-bottom:10px }
.edu p{ font-size:.93rem; color:var(--mut) }
@media (max-width:700px){ .edu-grid{ grid-template-columns:1fr } }

/* ---------------------------------------------------------- gallery */
.masonry{ columns:3; column-gap:clamp(14px, 2vw, 26px) }
.m-item{
  display:block; break-inside:avoid; margin-bottom:clamp(14px, 2vw, 26px);
  border-radius:var(--r-card); overflow:hidden;
}
.m-item img{ width:100%; transition:transform 800ms var(--e-enter) }
.m-item:hover img{ transform:scale(1.05) }
@media (max-width:900px){ .masonry{ columns:2 } }

/* lightbox */
.lb{ border:0; padding:0; background:transparent; max-width:92vw; max-height:92vh }
.lb::backdrop{ background:rgba(46,27,16,.9) }
.lb-in{ position:relative }
.lb img{ max-width:92vw; max-height:88vh; border-radius:var(--r-card) }
.lb-x{
  position:absolute; top:-16px; right:-16px;
  width:44px; height:44px; border-radius:50%;
  background:var(--cream); color:var(--esp);
  display:flex; align-items:center; justify-content:center;
}

/* ---------------------------------------------------------- contact page */
.k-cards{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(16px, 2.4vw, 30px) }
.k-card{
  background:#CDC7C1; border-radius:20px; padding:clamp(22px, 2.2vw, 32px);
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  transition:background var(--d-micro) ease-out;
}
.k-card svg{ width:20px; height:20px; color:var(--esp); margin-bottom:8px }
.k-card b{ font-weight:600; font-size:1.02rem; color:var(--esp) }
.k-card span{ font-size:.9rem; color:var(--ink); line-height:1.7 }
a.k-card:hover{ background:#C5BEB7 }
@media (max-width:820px){ .k-cards{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:520px){ .k-cards{ grid-template-columns:1fr } }
.k-map{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:21/9 }
.k-map iframe{ width:100%; height:100%; border:0; display:block; filter:sepia(.22) saturate(.9) }
@media (max-width:760px){ .k-map{ aspect-ratio:4/3 } }
.c-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px, 5vw, 80px); align-items:start }
@media (max-width:900px){ .c-grid{ grid-template-columns:1fr } }

/* ---------------------------------------------------------- blog */
.post-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 3.4vw, 44px); row-gap:clamp(40px, 5vw, 60px) }
@media (max-width:900px){ .post-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:620px){ .post-grid{ grid-template-columns:1fr } }
.post-card{ display:block }
.post-media{ display:block; border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/3 }
.post-media img{ width:100%; height:100%; object-fit:cover; transition:transform 800ms var(--e-enter) }
.post-card:hover .post-media img{ transform:scale(1.055) }
.post-body time{
  display:block; margin-top:16px;
  font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-2);
}
.post-body b{
  display:block; margin-top:8px;
  font-family:var(--f-disp); font-weight:500; font-size:1.2rem; line-height:1.35;
  transition:color var(--d-micro) ease-out;
}
.post-card:hover .post-body b{ color:var(--gold-2) }
.post-x{ display:block; margin-top:8px; font-size:.9rem; color:var(--mut); line-height:1.65 }
.post-body .lnk{ margin-top:14px; font-style:normal }

.post-hero{ padding-top:96px; background:var(--cream-2) }
.post-hero-in{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px, 5vw, 80px);
  align-items:center; padding-block:clamp(40px, 6vw, 64px);
}
.post-hero-copy h1{ text-transform:none; letter-spacing:0; font-size:clamp(1.7rem, 3.4vw, 2.7rem); line-height:1.25 }
.post-meta{ margin-top:18px; font-size:.85rem; color:var(--mut) }
.post-hero-media{ border-radius:var(--r-card); overflow:hidden }
.post-hero-media img{ width:100%; height:auto }
@media (max-width:900px){ .post-hero-in{ grid-template-columns:1fr } }

.post-body-wrap{ max-width:820px }
.post-prose h2{ text-transform:none; letter-spacing:0 }
.post-faq{ margin-top:clamp(40px, 6vw, 60px) }
.post-faq h2{ font-family:var(--f-disp); font-weight:500; font-size:1.5rem; margin-bottom:16px; color:var(--esp) }
.post-sources{ margin-top:clamp(36px, 5vw, 54px); border-top:1px solid var(--hair); padding-top:24px }
.post-sources h2{ font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--mut); margin-bottom:14px }
.post-sources ul{ list-style:none; display:flex; flex-direction:column; gap:8px; font-size:.85rem; color:var(--mut) }
.post-sources a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:3px }
.author-box{
  margin-top:clamp(36px, 5vw, 54px);
  display:flex; gap:20px; align-items:flex-start;
  background:var(--cream-2); border-radius:var(--r-card); padding:26px;
}
.author-box img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none }
.author-box b{ font-family:var(--f-disp); font-weight:500; font-size:1.1rem }
.author-box p{ font-size:.88rem; color:var(--mut); margin-top:6px }

/* ---------------------------------------------------------- profiles */
.prof{ padding-top:calc(96px + clamp(30px, 5vw, 60px)) }
.prof-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px, 6vw, 90px); align-items:start }
.prof-media{ aspect-ratio:3/3.8 }
.prof-media img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.prof-role{
  margin:10px 0 24px;
  font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-2);
}
.prof-copy h2{ font-family:var(--f-disp); font-weight:500; font-size:1.4rem; margin:1.6em 0 .6em; color:var(--esp) }
.prof-copy p{ max-width:58ch }
.prof-copy p + p{ margin-top:1em }
.prof-copy .lnk{ margin-top:26px }
@media (max-width:900px){
  .prof-grid{ grid-template-columns:1fr }
  .prof-media{ max-width:400px }
}

/* ============================================================
   v10 "KAPI" LANDING (2026-08-05, owner direct order) — home only.
   The LIVE site's world the client loves: droplet texture, chrome
   drops, espresso cards, script accents — carried by Montserrat.
   Playfair = wordmark + film line + heritage h2 (3 moments).
   MonteCarlo = hero script + distributor card + Menjamo živote.
   Scroll engine lives in js/site.js (Lenis + frames + pins).
   ============================================================ */

/* shared v10 primitives */
.k-h2{
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(1.9rem, 3.6vw, 3.05rem); line-height:1.14;
  letter-spacing:.005em; color:var(--esp);
}

/* ---------------------------------------------------------- k-hero
   The live site's composition: an inset rounded droplet panel on cream,
   chrome drops overlapping its edges, espresso card inside. */
.k-hero{
  position:relative; min-height:100svh;
  display:flex; background:#ECECE4;
  /* the live hero panel is 1250px wide at 1440 = 95px insets */
  padding:calc(84px + 1.5vh) clamp(14px, 6.6vw, 95px) clamp(16px, 3vh, 40px);
}
.k-hero-panel{
  position:relative; flex:1; display:flex; flex-direction:column;
  border-radius:28px; overflow:hidden; background:#C9C1B5;
  box-shadow:0 24px 70px rgba(46,27,16,.16);
}
.k-hero-bg{ position:absolute; inset:0 }
.k-hero-bg img{ width:100%; height:100%; object-fit:cover; transform-origin:50% 40% }
/* the live site's texture reads warm taupe, not silver — warm it up */
.k-hero-panel::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(168deg, rgba(178,158,132,.46), rgba(189,172,150,.32) 46%, rgba(148,126,102,.5));
}
/* drops: transform-only float, NO filter — an animated drop-shadow filter
   re-rasterizes every frame and was the hero's jank */
.k-drop{ position:absolute; z-index:5; pointer-events:none; height:auto; will-change:translate }
.k-drop-a{ top:calc(72px + 2vh); right:clamp(2px, .9vw, 16px); width:clamp(84px, 9.6vw, 172px);
  animation:kfloat 13s ease-in-out infinite alternate }
.k-drop-b{ bottom:13vh; left:-4px; width:clamp(64px, 6.6vw, 118px); rotate:128deg;
  animation:kfloat2 16s ease-in-out infinite alternate }
@keyframes kfloat{ from{ translate:0 0 } to{ translate:0 14px; rotate:4deg } }
@keyframes kfloat2{ from{ translate:0 0 } to{ translate:0 -12px } }
/* the old hero's trailing thin white word after the wordmark */
.k-mark-aka{
  font-family:var(--f-body); font-weight:200;
  font-size:clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing:.04em;
  color:#FDFBF7; vertical-align:.28em; margin-left:.2em;
  text-shadow:0 1px 18px rgba(46,27,16,.35);
}
/* hero socials, bottom-left like the old site */
.k-soc{
  position:absolute; left:clamp(26px, 4.5vw, 84px); bottom:58px; z-index:2;
  display:flex; gap:16px;
}
.k-soc a{ color:var(--esp); opacity:.75; transition:opacity var(--d-micro) ease-out }
.k-soc a:hover{ opacity:1 }
.k-soc svg{ width:18px; height:18px }
.k-hero-in{
  position:relative; z-index:2; flex:1;
  width:100%;
  padding:clamp(30px, 4vw, 64px) clamp(24px, 3vw, 42px) clamp(70px, 9vh, 118px);
  display:flex; flex-direction:column; justify-content:center;
}
.k-hero-copy{ min-width:0 }
/* the huge title + strip lockup, rebuilt 2026-08-10 after the owner's
   "not positioned like live" complaint. Live geometry at 1440: the whole
   lockup is CENTERED as one unit; the script stacks in TWO right-aligned
   lines whose top edge matches the strip's top; the strip sits right of
   the script with the ghost word beside it; the title's cap height touches
   the strip's bottom edge; script line 2 dips ~30px into the title zone. */
.k-lock{ width:max-content; max-width:100%; margin-inline:auto; position:relative }
.k-lock-top{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(10px, 1.2vw, 17px);
  /* row height = strip height; the taller script overflows below, over the title */
  height:clamp(36px, 4.4vw, 63px);
}
.k-lock-top .k-strip{
  flex:none; z-index:2;
  width:clamp(140px, 17.6vw, 254px); height:clamp(36px, 4.4vw, 63px);
}
.k-lock-top .k-mark-aka{
  align-self:center; z-index:2;
  white-space:nowrap; margin-left:0; vertical-align:baseline;
}
.k-script{
  font-family:var(--f-script); font-weight:400;
  font-size:clamp(1.9rem, 3.4vw, 3.25rem); line-height:.98;
  color:#FDFBF7; text-shadow:0 2px 30px rgba(46,27,16,.42);
  margin:0; display:flex; flex-direction:column; align-items:flex-end;
  position:relative; z-index:3; pointer-events:none;
}
.k-script span{ display:block; white-space:nowrap }
/* when the script row is wider than the title (RU), keep the title centered */
.k-lock .k-mark{ margin-top:-.19em; text-align:center }
/* Marck Script (RU) runs much wider than MonteCarlo — take it down a notch
   so the motto's second line doesn't swallow the title */
html[lang=ru] .k-script{ font-size:clamp(1.7rem, 2.9vw, 2.7rem) }
.k-mark{
  /* the live hero title spans ~90% of the PANEL at every width — sizing
     off the viewport alone overflowed the panel between 1020 and 1300px */
  font-family:'Italiana', 'Playfair Display', Georgia, serif; font-weight:400;
  font-size:max(2.9rem, min(8.5rem, calc((100vw - clamp(28px, 13.2vw, 190px)) * 0.104)));
  line-height:.96;
  letter-spacing:.015em; color:var(--esp);
}
.k-mark-line{ white-space:nowrap }
.k-mark .hw{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em }
.k-mark .hw > span{ display:inline-block }
.k-strip{
  display:block;
  border-radius:var(--r-pill); overflow:hidden; position:relative;
}
.k-strip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.k-kicker{
  margin-top:22px;
  font-size:.72rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--mut);
}
.k-sub{ margin-top:16px; max-width:46ch; font-size:1.02rem; line-height:1.7 }
.k-cta{ display:flex; align-items:center; gap:28px; margin-top:32px; flex-wrap:wrap }
.k-hcard{
  /* the live card: 270x297 tucked into the panel's bottom-right corner.
     NOT ".k-card" — that class belongs to the contact page's info cards
     and reusing it here broke /kontakt/ (2026-08-06). */
  position:absolute; right:clamp(38px, 4.5vw, 64px); bottom:clamp(30px, 3.2vw, 46px); z-index:3;
  background:var(--esp); color:var(--cream);
  border-radius:20px; padding:clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 28px);
  width:min(280px, calc(100% - 40px));
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px;
  box-shadow:0 16px 38px rgba(46,27,16,.18);
}
.k-card-script{
  /* live: MonteCarlo 50px, WHITE, wrapping to two lines */
  font-family:var(--f-script); font-size:clamp(2.3rem, 3.5vw, 3.15rem); line-height:1.02;
  color:#fff;
}
.k-card-logos{ display:flex; align-items:center; gap:24px }
/* logotipi vode na sajtove brendova; anchor je flex stavka pa mora da se skupi
   na sliku, inače raste na celu visinu reda i gap izgleda pomereno */
.k-card-logos a{ display:inline-flex; align-items:center; line-height:0;
  transition:opacity .25s ease, transform .25s ease }
.k-card-logos a:hover img, .k-card-logos a:focus-visible img{ opacity:1 }
.k-card-logos a:hover{ transform:translateY(-1px) }
.k-card-logos a:focus-visible{ outline:2px solid var(--cream, #f3ede2); outline-offset:6px; border-radius:4px }
.k-card-logos img{ width:auto; height:58px;
  filter:brightness(0) invert(93%) sepia(9%) saturate(240%) hue-rotate(357deg); opacity:.92;
  transition:opacity .25s ease }
.k-card-note{ font-size:.78rem; color:var(--cream-t); line-height:1.65; max-width:32ch }
.k-trust{
  position:absolute; left:clamp(26px, 4.5vw, 84px); bottom:26px; z-index:2;
  font-size:.66rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--mut);
}
/* scroll cue: a thin gold thread that keeps dripping (kap = drop) */
.k-cue{
  position:absolute; left:50%; bottom:0; z-index:2;
  width:1px; height:clamp(44px, 6vh, 64px);
  background:rgba(156,116,52,.28);
  overflow:hidden;
}
.k-cue i{
  position:absolute; left:0; top:-40%; width:1px; height:40%;
  background:var(--gold-2); display:block;
  animation:kcue 2.6s cubic-bezier(.45,0,.2,1) 1.8s infinite;
}
@keyframes kcue{
  0%{ transform:translateY(0) }
  70%, 100%{ transform:translateY(350%) }
}

/* hero load sequence — ONE cascade, one easing, evenly spaced beats.
   (html.js only — fully visible without JS) */
html.js .k-hero-panel{ opacity:0; transform:translateY(26px) }
html.js .k-ready .k-hero-panel{
  opacity:1; transform:none;
  transition:opacity 800ms var(--e-enter), transform 900ms var(--e-enter);
}
html.js .k-hero-bg img{ opacity:0; transform:scale(1.07) }
html.js .k-ready .k-hero-bg img{
  opacity:1; transform:none;
  transition:opacity 900ms var(--e-enter) 100ms, transform 2600ms var(--e-enter) 100ms;
  animation:kbreath 22s ease-in-out 3.2s infinite alternate; /* imagery keeps breathing */
}
@keyframes kbreath{ from{ transform:scale(1) } to{ transform:scale(1.045) } }
html.js .k-script{ opacity:0; transform:translateY(14px) }
html.js .k-ready .k-script{
  opacity:1; transform:none;
  transition:opacity 760ms var(--e-enter) 300ms, transform 760ms var(--e-enter) 300ms;
}
html.js .k-mark .hw > span{ transform:translateY(112%) }
html.js .k-ready .k-mark .hw > span{
  transform:none;
  transition:transform 900ms var(--e-enter) calc(440ms + var(--i, 0) * 90ms);
}
html.js .k-strip{ clip-path:inset(0 100% 0 0 round 999px) }
html.js .k-ready .k-strip{
  clip-path:inset(0 0 0 0 round 999px);
  transition:clip-path 760ms var(--e-enter) 620ms;
}
html.js .k-mark-aka{ opacity:0 }
html.js .k-ready .k-mark-aka{
  opacity:1; transition:opacity 760ms var(--e-enter) 720ms;
}
html.js .k-kicker{ opacity:0; transform:translateY(14px) }
html.js .k-sub{ opacity:0; transform:translateY(14px) }
html.js .k-cta{ opacity:0; transform:translateY(14px) }
html.js .k-hcard{ opacity:0; transform:translateY(22px) }
html.js .k-trust, html.js .k-drop{ opacity:0 }
html.js .k-ready .k-kicker{
  opacity:1; transform:none;
  transition:opacity 760ms var(--e-enter) 740ms, transform 760ms var(--e-enter) 740ms;
}
html.js .k-ready .k-sub{
  opacity:1; transform:none;
  transition:opacity 760ms var(--e-enter) 830ms, transform 760ms var(--e-enter) 830ms;
}
html.js .k-ready .k-cta{
  opacity:1; transform:none;
  transition:opacity 760ms var(--e-enter) 920ms, transform 760ms var(--e-enter) 920ms;
}
html.js .k-ready .k-hcard{
  opacity:1; transform:none;
  transition:opacity 760ms var(--e-enter) 1010ms, transform 760ms var(--e-enter) 1010ms;
}
html.js .k-ready .k-trust, html.js .k-ready .k-drop{
  opacity:1; transition:opacity 760ms var(--e-enter) 1100ms;
}

/* ---------------------------------------------------------- k-thread (scroll-drawn gold line)
   The ribarskoselo signature, in gold: one SVG snake spanning the landing
   from the hero to the footer; JS draws it with scroll, the tip chased
   exponentially. Built entirely in js/site.js — decorative, JS-only. */
.k-thread{ position:absolute; left:0; right:0; z-index:1; pointer-events:none; overflow:hidden }
.k-thread svg{ display:block; width:100%; height:100% }
.k-thread path{ fill:none; stroke-width:1.6; stroke-linecap:round }
/* the line runs OVER the rooms and BEHIND every element: each section's
   content wrapper sits one layer above it. The fade in/out lives in the
   SVG gradient, not here. */
.k-hero-panel,
.k-vid .wrap, .k-trio .wrap, .k-who .wrap, .k-lives .wrap,
.k-ask .wrap, .k-partner .wrap, .k-more .wrap,
main > section > .wrap{
  position:relative; z-index:2;
}

/* ---------------------------------------------------------- v16 MIRROR primitives */
.page-home{ background:#ECECE4 }
/* the live home band is 1250px of content at 1440 (95px gutters) */
.page-home .wrap{ max-width:1378px }
.k-card-esp{ background:var(--esp); color:var(--cream); border-radius:20px; padding:clamp(26px, 2.8vw, 44px) }
/* live greige measured 2026-08-06: rgb(205,199,193) */
.k-card-grei{ background:#CDC7C1; color:var(--esp); border-radius:20px; padding:clamp(26px, 2.8vw, 44px) }
.k-lbl{
  font-weight:500; font-size:clamp(15px, 1.35vw, 19px);
  letter-spacing:.26em; text-transform:uppercase; color:var(--esp);
}
.k-lbl-big{
  font-weight:500; font-size:clamp(17px, 1.6vw, 22px);
  letter-spacing:.26em; text-transform:uppercase; color:var(--esp);
  margin-bottom:clamp(20px, 2.4vw, 32px);
}
/* script sizes = the live site's measured DNA:
   aka card 46px white · navike 57px espresso · Saradnik 96px · Menjamo 110px */
.k-script-md{ font-family:var(--f-script); font-size:clamp(2.1rem, 3.2vw, 2.9rem); line-height:1; color:#fff }
.k-script-lg{ font-family:var(--f-script); font-size:clamp(3.4rem, 6.6vw, 6rem); line-height:.9; color:#2A0707 }
.k-script-bold{
  font-family:var(--f-script); font-size:clamp(2.5rem, 4vw, 3.6rem); line-height:1.05;
  color:var(--esp);
}
.k-script-xxl{ font-family:var(--f-script); font-size:clamp(3.8rem, 7.6vw, 6.9rem); line-height:1; color:var(--esp) }
.k-pill-esp, .k-pill-cream{
  display:inline-flex; align-items:center; gap:11px;
  border-radius:var(--r-pill); padding:13px 15px 13px 26px;
  font-size:.82rem; font-weight:500;
  transition:background var(--d-micro) ease-out, color var(--d-micro) ease-out;
}
.k-pill-esp{ background:var(--esp); color:var(--cream) }
.k-pill-esp:hover{ background:var(--esp-2) }
.k-pill-cream{ background:var(--cream); color:var(--esp) }
.k-pill-cream:hover{ background:#fff }
/* the live "Transformacije" pill: white on the bubbles texture */
.k-pill-white{ background:#fff; color:#1A202C; box-shadow:0 10px 30px rgba(46,27,16,.12) }
.k-pill-white:hover{ background:var(--cream) }
.k-pill-white i{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--esp); color:var(--cream);
}
.k-pill-white i svg{ width:13px; height:13px }
.k-pill-white{
  display:inline-flex; align-items:center; gap:11px;
  border-radius:var(--r-pill); padding:13px 15px 13px 26px;
  font-size:.82rem; font-weight:500;
  transition:background var(--d-micro) ease-out;
}
.k-pill-esp i, .k-pill-cream i{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  transition:transform var(--d-small) var(--e-enter);
}
.k-pill-esp:hover i, .k-pill-cream:hover i, .k-pill-white:hover i{ transform:translateX(4px) }
.k-pill-esp i{ background:var(--cream); color:var(--esp) }
.k-pill-cream i{ background:var(--esp); color:var(--cream) }
.k-pill-esp i svg, .k-pill-cream i svg{ width:13px; height:13px }

/* ---------------------------------------------------------- k-vid */
.k-vid{ position:relative; padding-block:clamp(40px, 5vw, 76px) 0 }
.k-drop-c{ top:34%; left:-26px; width:clamp(90px, 10vw, 200px); rotate:14deg;
  animation:kfloat2 17s ease-in-out infinite alternate }
.k-vid-frame{
  /* live video box: 730px wide, centered */
  position:relative; max-width:730px; margin-inline:auto;
  border-radius:20px; overflow:hidden; aspect-ratio:16/9; background:var(--esp-2);
}
.k-vid-frame video{ width:100%; height:100%; object-fit:cover; display:block }
.k-vid-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:76px; height:76px; border-radius:18px;
  background:var(--esp); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--d-micro) ease-out;
}
.k-vid-play:hover{ background:var(--esp-2) }
.k-vid-play svg{ width:30px; height:30px }
.k-vid-frame.playing .k-vid-play{ display:none }

/* ---------------------------------------------------------- k-trio
   Live at 1440: cards 313 / 638 / 263 wide, all 208 tall, 20px gaps.
   minmax(0,…) + min-width:0 are LOAD-BEARING: without them the ticker's
   intrinsic width blows the grid to 3000px+ and shoves the third card
   off-screen (the 2026-08-06 owner bug). */
.k-trio{ padding-block:clamp(36px, 4.5vw, 64px) 0 }
.k-trio-grid{ display:grid; grid-template-columns:minmax(0, 1.19fr) minmax(0, 2.42fr) minmax(0, 1fr); gap:20px; align-items:stretch }
.k-trio-grid > *{ min-width:0; min-height:clamp(170px, 14.5vw, 208px) }
.k-trio-aka{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px }
.k-trio-aka .k-script-md{ white-space:nowrap }
.k-trio-aka-h{ font-weight:200; font-size:clamp(1.5rem, 2.4vw, 2.2rem); letter-spacing:.02em; color:var(--cream); margin-bottom:14px }
.k-prem{ display:flex; flex-direction:column; justify-content:center; gap:clamp(18px, 2vw, 28px) }
.k-prem-row{ display:flex; align-items:center; gap:clamp(14px, 1.6vw, 22px); min-width:0 }
/* the live site's accordion pill (2026-08-10, owner: "live is way better
   animated"): 4 skin-concern segments; the open one grows and shows its
   MonteCarlo name + filled icon variant. JS cycles the open segment while
   the pill is on screen; hovering pauses the cycle and takes over. */
.k-prem-pill{
  flex:1; min-width:0; display:flex; align-items:stretch;
  background:var(--esp); border-radius:999px;
  height:clamp(72px, 7.2vw, 100px);
  overflow:hidden;
}
.k-prem-it{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:clamp(10px, 1.1vw, 16px);
  flex:0 1 clamp(48px, 4.5vw, 64px); min-width:0;
  text-decoration:none;
  transition:flex-grow .6s var(--e-enter), flex-basis .6s var(--e-enter);
}
.k-prem-it::before{
  content:''; position:absolute; inset:0;
  background:rgba(0,0,0,.10); opacity:1; transition:opacity .6s var(--e-enter);
}
.k-prem-it.on, .k-prem-it:hover{ flex:1 0 clamp(160px, 16.5vw, 250px) }
.k-prem-it.on::before, .k-prem-it:hover::before{ opacity:0 }
.k-prem-ic{ position:relative; flex:none; width:clamp(26px, 2.6vw, 38px); height:clamp(26px, 2.6vw, 38px); z-index:1 }
.k-prem-ic img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  filter:brightness(0) invert(92%) sepia(8%) saturate(180%);
  transition:opacity .45s var(--e-enter), transform .45s var(--e-enter);
}
.k-prem-ic .ic-off{ opacity:.55 }
.k-prem-ic .ic-on{ opacity:0; transform:scale(.82) }
.k-prem-it.on .ic-off, .k-prem-it:hover .ic-off{ opacity:0 }
.k-prem-it.on .ic-on, .k-prem-it:hover .ic-on{ opacity:1; transform:none }
.k-prem-name{
  font-family:var(--f-script); font-size:clamp(1.4rem, 1.85vw, 2rem); line-height:1.2;
  color:#fff; white-space:nowrap; overflow:hidden; z-index:1;
  max-width:0; opacity:0; transform:translateX(14px);
  transition:max-width .6s var(--e-enter), opacity .3s ease-out, transform .6s var(--e-enter);
}
.k-prem-it.on .k-prem-name, .k-prem-it:hover .k-prem-name{
  max-width:320px; opacity:1; transform:none;
  transition:max-width .6s var(--e-enter), opacity .5s ease-out .16s, transform .6s var(--e-enter) .1s;
}
/* Marck Script names (RU) are wider — smaller type so they fit the open segment */
html[lang=ru] .k-prem-name{ font-size:clamp(1.25rem, 1.7vw, 1.9rem) }
/* entrance: the icons cascade up once the card reveals */
html.js .k-prem .k-prem-ic{ opacity:0; transform:translateY(12px) }
html.js .k-prem.in .k-prem-ic{
  opacity:1; transform:none;
  transition:opacity .7s var(--e-enter) calc(120ms + var(--i, 0) * 90ms),
             transform .7s var(--e-enter) calc(120ms + var(--i, 0) * 90ms);
}
.k-navike{ display:flex; align-items:center; justify-content:center; text-align:center }

/* ---------------------------------------------------------- k-who */
.k-who{ padding-block:clamp(36px, 4.5vw, 64px) 0 }
.k-who-grid{ display:grid; grid-template-columns:.95fr 1.5fr 1.15fr; gap:clamp(16px, 2vw, 30px); align-items:stretch }
.k-who-photo{ position:relative; display:block; border-radius:20px; overflow:hidden; margin:0; min-height:340px }
.k-who-photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter 700ms var(--e-enter) }
.k-who-photo:hover img{ filter:grayscale(0) }
/* the live card writes script "O nama" over the portrait's bottom edge */
.k-who-cap{
  position:absolute; left:0; right:0; bottom:18px; z-index:2; text-align:center;
  font-family:var(--f-script); font-size:clamp(2.3rem, 3.2vw, 2.9rem); line-height:1;
  color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.k-who-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:18px }
.k-who-txt p{ font-weight:300; line-height:1.75; max-width:56ch }
.k-who-side{ display:flex; flex-direction:column; gap:clamp(16px, 2vw, 30px) }
.k-who-tex{ border-radius:20px; overflow:hidden; margin:0; flex:1; min-height:140px }
.k-who-tex img{ width:100%; height:100%; object-fit:cover }
.k-who-nums{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 1.4vw, 20px) }
.k-num{ text-align:center; padding:clamp(20px, 2.2vw, 34px) }
.k-num .num{
  /* the live counters are geometric Montserrat, not serif */
  display:block; font-family:var(--f-body); font-weight:600;
  font-size:clamp(2.6rem, 4.2vw, 4.2rem); line-height:1;
  color:#fff; font-variant-numeric:tabular-nums;
}
.k-num span{
  display:block; margin-top:12px;
  font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; line-height:1.5;
}

/* ---------------------------------------------------------- k-lives
   The live section floats on the weightless-bubbles water texture. */
.k-lives{
  padding-block:clamp(60px, 7vw, 110px) clamp(60px, 7vw, 100px); text-align:center;
  background:url('/assets/img/voda-mehurici-pozadina.webp') center top / cover no-repeat;
}
.k-lives-caps{
  margin-top:6px;
  font-size:clamp(.78rem, 1.05vw, .95rem); font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--esp);
}
.k-lives-p{ max-width:64ch; margin:14px auto 0; font-weight:300; color:var(--mut) }
.k-ba-row{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:clamp(12px, 1.4vw, 20px);
  margin-top:clamp(28px, 3.4vw, 46px);
}
/* the live BA strips are square-cornered, tags solid espresso at the BOTTOM */
.k-ba .ba{ border-radius:0 }
.k-ba .ba-tag{
  top:auto; bottom:16px; border-radius:0;
  background:var(--esp); font-size:.7rem; letter-spacing:.06em; text-transform:none;
  padding:7px 16px; font-weight:500;
}
.k-lives-cta{ margin-top:clamp(28px, 3.4vw, 46px) }

/* ---------------------------------------------------------- k-ask / k-partner / k-more (the white run) */
.k-ask, .k-partner, .k-more{ background:#fff }
.k-ask{ padding-block:clamp(60px, 7vw, 104px) clamp(30px, 4vw, 52px) }
.k-ask-grid{ display:grid; grid-template-columns:1fr 1.07fr; gap:clamp(36px, 5vw, 84px); align-items:start }
.k-ask-list{ counter-reset:kq; border:0 }
/* live FAQ rows: #F9F9F9, radius 24, italic serif numerals */
.k-ask-list .faq-item{ border:0; background:#F9F9F9; border-radius:24px; margin-bottom:16px; padding:8px 24px }
.k-ask-list .faq-a-in p{ padding-left:40px }
.k-ask-list .faq-item{ counter-increment:kq }
.k-ask-list .faq-q{ gap:20px; justify-content:flex-start }
.k-ask-list .faq-q::before{
  content:counter(kq);
  flex:none; width:24px;
  font-family:Georgia, 'Times New Roman', serif; font-style:italic;
  font-size:1.35rem; font-weight:400; color:#000; text-align:center;
}
.k-ask-list .faq-q .ic{ margin-left:auto }
.k-ask-r .k-lbl-big{ text-align:center }
.k-ask-p{ font-weight:300; color:var(--ink); max-width:52ch; margin-inline:auto; text-align:center; margin-bottom:26px }
/* live contact inputs: white boxes, 1px #DDD5C8, radius 12 */
.k-ask .c-form input, .k-ask .c-form textarea{
  background:#fff; border:1px solid #DDD5C8; border-radius:12px; padding:13px 16px;
}
.k-ask .c-form input:focus, .k-ask .c-form textarea:focus{ border-color:var(--gold-2) }
.k-ask .c-form label span{ color:var(--ink); font-size:.7rem }
/* live layout at 1440: greige 840x420 card (script 96px, caps line, Amar
   cutout anchored bottom-right) + a 340px column of two 200px cards:
   espresso quote over the line-art logo, then the B&W products photo. */
.k-partner{ padding-block:clamp(30px, 4vw, 52px) }
.k-partner-grid{ display:grid; grid-template-columns:minmax(0, 2.47fr) minmax(0, 1fr); gap:20px; align-items:stretch }
.k-partner-name{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:14px; min-height:clamp(300px, 29vw, 420px);
  padding:clamp(26px, 4.5vw, 70px);
  transition:background var(--d-micro) ease-out;
}
.k-partner-name:hover{ background:#C5BEB7 }
.k-partner-h{
  font-weight:500; font-size:clamp(.95rem, 1.25vw, 1.15rem);
  letter-spacing:.3em; text-transform:uppercase; color:var(--esp);
}
.k-partner-cut{
  position:absolute; right:clamp(10px, 6vw, 110px); bottom:0;
  height:100%; width:auto; object-fit:contain; object-position:bottom;
  pointer-events:none;
}
.k-partner-name .k-script-lg, .k-partner-name .k-partner-h{ position:relative; z-index:2 }
.k-partner-side{ display:grid; grid-template-rows:1fr 1fr; gap:20px }
.k-partner-quote{
  position:relative; overflow:hidden;
  display:flex; align-items:center; min-height:200px;
}
.k-partner-quote::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:url('/assets/img/logo-linija-overlay.webp') right -30px center / auto 130% no-repeat;
}
.k-partner-quote p{ position:relative; font-weight:300; line-height:1.7; color:#fff; max-width:26ch }
.k-partner-img{
  margin:0; border-radius:20px; overflow:hidden; min-height:200px;
}
.k-partner-img img{ width:100%; height:100%; object-fit:cover }
.k-more{ padding-block:clamp(24px, 3vw, 40px) clamp(56px, 6vw, 88px) }
.k-more-h{ font-weight:700; font-size:clamp(1.15rem, 1.6vw, 1.4rem); color:#1A202C; margin:clamp(24px, 3vw, 38px) 0 16px }
.k-more-list{ list-style:none; columns:2; column-gap:clamp(30px, 4vw, 60px); max-width:760px }
.k-more-list li{ padding-block:5px; break-inside:avoid }
.k-more-list a{
  color:var(--esp); font-size:.92rem; font-weight:400;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:rgba(69,40,26,.4);
  transition:color var(--d-micro) ease-out;
}
.k-more-list a:hover{ color:var(--gold-2) }
.k-more-faq{ max-width:760px }
.k-more-meta{ margin-top:clamp(22px, 2.6vw, 32px); font-size:.88rem; color:var(--mut) }
.k-more-meta a{ color:var(--esp); text-decoration:underline; text-underline-offset:3px }
.k-more-meta a:hover{ color:var(--gold-2) }

/* footer: the old site's inset rounded espresso panel (global) */
.ft{ max-width:calc(100% - clamp(20px, 2.6vw, 48px)); margin-inline:auto; border-radius:24px 24px 0 0 }
.ft-script{ display:none }
body:not(.page-home) .ft{ margin-top:clamp(40px, 5vw, 80px) }

/* ---------------------------------------------------------- v16 responsive */
@media (max-width:1020px){
  .k-hero{ padding-top:calc(72px + 1vh); padding-inline:clamp(14px, 3vw, 40px) }
  .k-hero-in{ display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:44px }
  .k-hcard{ position:static; margin-top:30px; width:min(360px, 100%) }
  .k-trust{ display:none }
  .k-drop-a{ top:calc(64px + 1vh); right:2vw }
  .k-trio-grid{ grid-template-columns:1fr 1fr }
  .k-prem{ grid-column:1 / -1; order:-1 }
  .k-who-grid{ grid-template-columns:1fr 1fr }
  .k-who-photo{ min-height:280px }
  .k-who-side{ grid-column:1 / -1; flex-direction:row }
  .k-who-tex{ flex:1 }
  .k-who-nums{ flex:1.2 }
  .k-ba-row{ grid-template-columns:repeat(3, 1fr) }
  .k-ba:nth-child(n+4){ display:none }
  .k-ask-grid, .k-partner-grid{ grid-template-columns:1fr }
  .k-partner-cut{ right:clamp(6px, 4vw, 60px); opacity:.9 }
}
@media (max-width:700px){
  .k-mark{ white-space:normal; font-size:clamp(2.9rem, 14vw, 3.9rem) }
  .k-mark-line{ white-space:normal } /* nowrap here CLIPPED the title off-screen at 390 */
  /* phones: the lockup flows — script (2 lines, left), then strip + ghost
     as their own row, then the title. No overlap games at this width. */
  .k-lock{ width:100%; max-width:none; margin-inline:0 }
  .k-lock-top{ height:auto; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:10px 14px; margin-bottom:10px }
  .k-script{ width:100%; align-items:flex-start; font-size:clamp(1.8rem, 8.2vw, 2.3rem) }
  .k-lock-top .k-strip{ width:min(52vw, 220px); height:44px }
  .k-lock .k-mark{ margin-top:0; text-align:left }
  .k-hero{ padding-inline:10px }
  .k-hero-panel{ border-radius:22px }
  /* copy starts BELOW the corner drop's zone (like the live mobile hero) */
  .k-hero-in{ padding-inline:22px; padding-top:96px }
  .k-cue{ display:none }
  .k-drop-b, .k-drop-c{ display:none }
  /* hug the panel's top-right corner — centered on the corner it was
     covering the script's last letters. right must NEVER go negative:
     that grows scrollWidth and reintroduces horizontal wiggle on phones */
  .k-drop-a{ top:calc(58px + 1vh); right:0; width:96px }
  .k-vid-play{ width:60px; height:60px; border-radius:14px }
  .k-trio-grid, .k-who-grid{ grid-template-columns:1fr }
  .k-trio-grid > *{ min-height:0 }
  .k-trio-aka{ padding-block:34px }
  .k-prem{ grid-column:auto; order:0 }
  .k-prem-row{ flex-direction:column; align-items:stretch }
  /* live's own mobile answer: the pill becomes a vertical list, every name
     visible, the cycling .on state highlights one row at a time */
  .k-prem-pill{ flex-direction:column; height:auto; border-radius:26px; padding:10px }
  .k-prem-it, .k-prem-it.on, .k-prem-it:hover{ flex:none; height:54px; justify-content:flex-start; padding-inline:18px; gap:14px }
  .k-prem-it{ border-radius:999px }
  .k-prem-it::before{ border-radius:999px; background:rgba(255,255,255,.08); opacity:0 }
  .k-prem-it.on::before{ opacity:1 }
  .k-prem-ic{ width:26px; height:26px }
  .k-prem-it .ic-off{ opacity:0 }
  .k-prem-it .ic-on{ opacity:1; transform:none }
  .k-prem-name{ max-width:none; opacity:1; transform:none; font-size:1.35rem }
  .k-navike{ padding-block:34px }
  .k-pill-esp, .k-pill-cream, .k-pill-white{ justify-content:center }
  .k-who-side{ flex-direction:column }
  .k-ba-row{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px }
  .k-ba{ flex:0 0 72vw; scroll-snap-align:start }
  .k-ba:nth-child(n+4){ display:block }
  .k-script-xxl{ font-size:clamp(3rem, 13vw, 3.9rem) }
  .k-script-lg{ font-size:clamp(2.9rem, 12vw, 3.6rem) }
  .k-partner-name{ min-height:340px; justify-content:flex-start; padding-top:38px }
  .k-partner-cut{ height:72%; right:0 }
  .k-more-list{ columns:1 }
}


/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important }
  html.js .fx, html.js .fx-clip, html.js .fx-clip img, html.js .hero-bg img,
  html.js .hero-script, html.js .hw > span, html.js .ww > span,
  html.js .hero-kicker, html.js .hero-cta, html.js .hero-note,
  html.js .k-hero-panel, html.js .k-hero-bg img, html.js .k-script, html.js .k-strip,
  html.js .k-kicker, html.js .k-sub, html.js .k-cta, html.js .k-hcard,
  html.js .k-trust, html.js .k-drop{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
  .k-drop{ animation:none !important }
}

/* ================================================================ SHOP
   Custom store, replaces WooCommerce. Concatenated into site.css at build
   time (see build.js) so there is still exactly one stylesheet.

   Product shots are cutouts on transparent PNG, so unlike treatment
   photography they get their own cream-2 ground and object-fit:contain.
   No card chrome anywhere: the image sits on the room ground exactly like
   .t-card does. The old WooCommerce grid's white shadowed cards are the
   thing this replaces. */
.p-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(26px, 3.4vw, 48px) clamp(20px, 3vw, 40px) }
.p-grid-3{ grid-template-columns:repeat(3, 1fr) }
.p-cell{ display:block }
.p-card{ display:block }
.p-media{
  display:block; border-radius:var(--r-card); overflow:hidden;
  aspect-ratio:1/1; background:var(--cream-2);
}
.p-media img{
  width:100%; height:100%; object-fit:contain; padding:clamp(14px, 2vw, 26px);
  transition:transform 800ms var(--e-enter);
}
.p-card:hover .p-media img{ transform:scale(1.055) }
.p-media-none{
  display:grid; place-items:center; color:var(--gold);
  border-radius:var(--r-card); aspect-ratio:1/1; background:var(--cream-2);
}
.p-media-none svg{ width:34px; height:34px; opacity:.5 }
.p-brand{
  display:block; margin-top:16px;
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-2);
}
.p-name{
  display:block; margin-top:7px;
  font-family:var(--f-disp); font-weight:500; font-size:1.2rem; line-height:1.3;
  transition:color var(--d-micro) ease-out;
}
.p-card:hover .p-name{ color:var(--gold-2) }
.p-size{ display:block; margin-top:6px; font-size:.85rem; color:var(--mut) }
.p-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:13px; padding-top:13px; border-top:1px solid var(--hair);
}
.p-meta b{ font-weight:600; font-size:.9rem; letter-spacing:.04em }
.p-meta i{ color:var(--gold-2); display:inline-flex }
.p-meta svg{ width:16px; height:16px }
.shop-chips{ margin-bottom:clamp(30px, 4vw, 46px) }
.shop-empty{ margin-top:40px; color:var(--mut) }
@media (max-width:900px){ .p-grid, .p-grid-3{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:520px){ .p-grid, .p-grid-3{ grid-template-columns:1fr } }

/* ------------------------------------------------------- shop sub-header
   The shop is its own area: retail lines plus a professional catalogue behind
   a partner login. The site header carries neither, so shop pages get a second
   row under it. It is in flow, not sticky: the site header is fixed and
   transparent until scrolled, so a sticky bar would slide under the logo.
   The `.shop-bar + ...` rules take back the top padding the first section
   reserves for that fixed header, which the bar now occupies. */
.shop-bar{ padding:calc(96px + 8px) clamp(14px, 6.6vw, 95px) 0 }
.shop-bar-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px, 3vw, 40px); flex-wrap:wrap;
  padding-bottom:14px; border-bottom:1px solid var(--hair);
}
.sb-mark{
  font-family:var(--f-disp); font-weight:500; font-size:1.06rem;
  letter-spacing:.02em; color:var(--esp); white-space:nowrap;
}
.sb-links{ display:flex; align-items:center; gap:clamp(12px, 2.2vw, 28px); flex-wrap:wrap }
.sb-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--mut); white-space:nowrap;
  transition:color var(--d-micro) ease-out, background var(--d-micro) ease-out, border-color var(--d-micro) ease-out;
}
.sb-link:hover, .sb-link.on{ color:var(--esp) }
.sb-link svg{ width:14px; height:14px; flex:none }
/* the professional catalogue is the one thing a visitor cannot discover by
   browsing, so it carries the padlock and reads as a button, not a link */
.sb-pro{ color:var(--esp); border:1px solid var(--hair); border-radius:var(--r-pill); padding:9px 18px }
.sb-pro:hover, .sb-pro.on{ background:var(--esp); color:var(--cream); border-color:var(--esp) }

.shop-bar + .p-hero{ padding-top:clamp(24px, 3vw, 40px) }
.shop-bar + .p-hero-dark{ margin-top:18px }
.shop-bar + .prod-sect{ padding-top:clamp(30px, 4vw, 54px) }

@media (max-width:760px){
  .shop-bar{ padding-top:calc(78px + 6px) }   /* the mobile header is shorter */
  .shop-bar-in{ gap:12px }
  .sb-links{ width:100%; gap:12px 18px }
}

/* professional card at the top of the shop index (the old store had this
   banner directly under the header; the band it replaces had drifted to the
   foot of the page, below 53 products, where nobody scrolled to it) */
.pro-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px, 3vw, 44px); flex-wrap:wrap;
  padding:clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px);
  margin-bottom:clamp(30px, 4vw, 46px);
  background:var(--cream-2); border-radius:var(--r-card);
  border-left:3px solid var(--esp);
  transition:background var(--d-micro) ease-out;
}
.pro-card:hover{ background:#E5DBC9 }
.pro-card b{ display:block; font-family:var(--f-disp); font-weight:500; font-size:clamp(1.1rem, 1.9vw, 1.4rem) }
.pro-card i{ display:block; margin-top:8px; font-style:normal; color:var(--mut); max-width:60ch; font-size:.95rem }
.pro-card-b{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:13px 26px; border-radius:var(--r-pill);
  background:var(--esp); color:var(--cream);
  font-size:.82rem; font-weight:500; letter-spacing:.02em;
}
.pro-card-b svg{ width:16px; height:16px; flex:none }



/* ---------------------------------------------------------- product page */
.prod-sect{ padding-top:calc(96px + clamp(30px, 5vw, 64px)) }
.prod-split{ display:grid; grid-template-columns:44fr 56fr; gap:clamp(30px, 5vw, 84px); align-items:start }
.prod-figure .p-media, .prod-figure .p-media-none{ aspect-ratio:1/1.06 }

/* ------------------------------------------------------- set gallery
   A kit is one SKU but several bottles, and the WooCommerce store showed a
   shot of every one of them. The switcher is radio inputs plus labels and no
   script at all: every photo is in the HTML, so it survives a JS failure, and
   the arrow keys walk the strip because a radio group already does that.
   The pairs below are written out to eight shots — the longest set today has
   six; a longer one needs another pair here or its extra photos will not
   show. */
.prod-gal-wrap{ position:relative }
/* focusable, not display:none — the label is the visible control but the
   radio is what the keyboard and the screen reader operate */
.pg-r{ position:absolute; top:0; left:0; width:1px; height:1px; opacity:0; margin:0 }
.prod-stage{ position:relative }
.prod-stage .pg-i{ position:absolute; inset:0; opacity:0; transition:opacity var(--d-micro) ease-out }
.pg-cap{
  margin-top:14px; min-height:1.3em; text-align:center;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mut);
}
.pg-c{ display:none }
.prod-gal{
  list-style:none; margin-top:12px; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr);
  gap:clamp(8px, 1.2vw, 12px);
}
.pg-t{
  display:block; cursor:pointer; overflow:hidden; opacity:.66; padding:0; width:100%;
  aspect-ratio:1/1; background:var(--cream-2);
  border:1px solid transparent; border-radius:calc(var(--r-card) - 10px);
  transition:opacity var(--d-micro) ease-out, border-color var(--d-micro) ease-out;
}
.pg-t img{ width:100%; height:100%; object-fit:contain; padding:clamp(6px, 1vw, 10px) }
.pg-t:hover{ opacity:1 }
/* the professional grid has no detail page, so the card carries the strip
   itself and swaps its own photo; .on is set by shop.js, not by :checked */
.pro-gal{
  list-style:none; margin-top:12px; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:8px;
}
.pg-t.on{ opacity:1; border-color:var(--gold-2) }
.pg-r:nth-of-type(1):checked ~ .prod-stage .pg-i:nth-child(1){ opacity:1 }
.pg-r:nth-of-type(1):checked ~ .pg-cap .pg-c:nth-child(1){ display:inline }
.pg-r:nth-of-type(1):checked ~ .prod-gal li:nth-child(1) .pg-t{ opacity:1; border-color:var(--gold-2) }
.pg-r:nth-of-type(1):focus-visible ~ .prod-gal li:nth-child(1) .pg-t{ outline:2px solid var(--gold-2); outline-offset:3px }
.pg-r:nth-of-type(2):checked ~ .prod-stage .pg-i:nth-child(2){ opacity:1 }
.pg-r:nth-of-type(2):checked ~ .pg-cap .pg-c:nth-child(2){ display:inline }
.pg-r:nth-of-type(2):checked ~ .prod-gal li:nth-child(2) .pg-t{ opacity:1; border-color:var(--gold-2) }
.pg-r:nth-of-type(2):focus-visible ~ .prod-gal li:nth-child(2) .pg-t{ outline:2px solid var(--gold-2); outline-offset:3px }
.pg-r:nth-of-type(3):checked ~ .prod-stage .pg-i:nth-child(3){ opacity:1 }
.pg-r:nth-of-type(3):checked ~ .pg-cap .pg-c:nth-child(3){ display:inline }
.pg-r:nth-of-type(3):checked ~ .prod-gal li:nth-child(3) .pg-t{ opacity:1; border-color:var(--gold-2) }
.pg-r:nth-of-type(3):focus-visible ~ .prod-gal li:nth-child(3) .pg-t{ outline:2px solid var(--gold-2); outline-offset:3px }
.pg-r:nth-of-type(4):checked ~ .prod-stage .pg-i:nth-child(4){ opacity:1 }
.pg-r:nth-of-type(4):checked ~ .pg-cap .pg-c:nth-child(4){ display:inline }
.pg-r:nth-of-type(4):checked ~ .prod-gal li:nth-child(4) .pg-t{ opacity:1; border-color:var(--gold-2) }
.pg-r:nth-of-type(4):focus-visible ~ .prod-gal li:nth-child(4) .pg-t{ outline:2px solid var(--gold-2); outline-offset:3px }
.pg-r:nth-of-type(5):checked ~ .prod-stage .pg-i:nth-child(5){ opacity:1 }
.pg-r:nth-of-type(5):checked ~ .pg-cap .pg-c:nth-child(5){ display:inline }
.pg-r:nth-of-type(5):checked ~ .prod-gal li:nth-child(5) .pg-t{ opacity:1; border-color:var(--gold-2) }
.pg-r:nth-of-type(5):focus-visible ~ .prod-gal li:nth-child(5) .pg-t{ outline:2px solid var(--gold-2); outline-offset:3px }
.pg-r:nth-of-type(6):checked ~ .prod-stage .pg-i:nth-child(6){ opacity:1 }
.pg-r:nth-of-type(6):checked ~ .pg-cap .pg-c:nth-child(6){ display:inline }
.pg-r:nth-of-type(6):checked ~ .prod-gal li:nth-child(6) .pg-t{ opacity:1; border-color:var(--gold-2) }
.pg-r:nth-of-type(6):focus-visible ~ .prod-gal li:nth-child(6) .pg-t{ outline:2px solid var(--gold-2); outline-offset:3px }
.pg-r:nth-of-type(7):checked ~ .prod-stage .pg-i:nth-child(7){ opacity:1 }
.pg-r:nth-of-type(7):checked ~ .pg-cap .pg-c:nth-child(7){ display:inline }
.pg-r:nth-of-type(7):checked ~ .prod-gal li:nth-child(7) .pg-t{ opacity:1; border-color:var(--gold-2) }
.pg-r:nth-of-type(7):focus-visible ~ .prod-gal li:nth-child(7) .pg-t{ outline:2px solid var(--gold-2); outline-offset:3px }
.pg-r:nth-of-type(8):checked ~ .prod-stage .pg-i:nth-child(8){ opacity:1 }
.pg-r:nth-of-type(8):checked ~ .pg-cap .pg-c:nth-child(8){ display:inline }
.pg-r:nth-of-type(8):checked ~ .prod-gal li:nth-child(8) .pg-t{ opacity:1; border-color:var(--gold-2) }
.pg-r:nth-of-type(8):focus-visible ~ .prod-gal li:nth-child(8) .pg-t{ outline:2px solid var(--gold-2); outline-offset:3px }
.prod-brand{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2) }
.prod-name{
  font-family:var(--f-disp); font-weight:400; letter-spacing:.01em;
  font-size:clamp(1.9rem, 4vw, 3rem); line-height:1.12; margin-top:14px;
}
.prod-lead{ margin-top:20px; color:var(--ink); font-size:1.04rem; line-height:1.7; max-width:60ch }
.prod-extra{ margin-top:14px; color:var(--mut); line-height:1.7; max-width:60ch }
.prod-buy{
  display:flex; align-items:center; gap:clamp(18px, 3vw, 34px); flex-wrap:wrap;
  margin-top:clamp(26px, 3.4vw, 40px); padding-top:clamp(22px, 3vw, 32px);
  border-top:1px solid var(--hair);
}
.prod-price b{ display:block; font-family:var(--f-disp); font-weight:500; font-size:clamp(1.5rem, 2.6vw, 2rem) }
.prod-price span{ display:block; margin-top:5px; font-size:.83rem; color:var(--mut); letter-spacing:.02em }
.prod-oos{ font-size:.86rem; color:var(--mut) }
.add-cart.is-added{ background:var(--gold-2) }
.prod-feats{ list-style:none; margin-top:clamp(24px, 3vw, 34px); display:flex; flex-direction:column; gap:11px }
.prod-feats li{ display:flex; gap:11px; align-items:flex-start; font-size:.94rem; line-height:1.6 }
.prod-feats svg{ width:15px; height:15px; margin-top:4px; flex:none; color:var(--gold-2) }
.prod-specs{ margin-top:clamp(30px, 4vw, 46px) }
.prod-specs h2{
  font-family:var(--f-disp); font-weight:500; font-size:1.25rem;
  padding-bottom:13px; border-bottom:1px solid var(--hair);
}
.prod-specs dl{ margin:0 }
.prod-specs dl div{
  display:flex; justify-content:space-between; gap:24px;
  padding:13px 0; border-bottom:1px solid var(--hair);
}
.prod-specs dt{ color:var(--mut); font-size:.88rem; flex:none }
.prod-specs dd{ margin:0; font-size:.9rem; font-weight:500; text-align:right }
@media (max-width:900px){ .prod-split{ grid-template-columns:1fr } }

/* ---------------------------------------------------------- cart */
.p-hero-sm{ padding-bottom:clamp(30px, 4vw, 52px) }
.cart-wrap{ max-width:960px }
.cart-empty{ text-align:center; padding-block:clamp(30px, 6vw, 70px) }
.cart-empty p{ color:var(--mut); margin-bottom:26px }
.cart-row{
  display:grid; grid-template-columns:88px 1fr auto auto;
  gap:clamp(14px, 2.4vw, 26px); align-items:center;
  padding:clamp(16px, 2.2vw, 24px) 0; border-bottom:1px solid var(--hair);
}
.cart-row:first-child{ border-top:1px solid var(--hair) }
.cart-thumb{ border-radius:calc(var(--r-card) - 6px); overflow:hidden; background:var(--cream-2); aspect-ratio:1/1 }
.cart-thumb img{ width:100%; height:100%; object-fit:contain; padding:8px }
.cart-t b{ display:block; font-family:var(--f-disp); font-weight:500; font-size:1.05rem }
.cart-t span{ display:block; margin-top:4px; font-size:.8rem; color:var(--mut) }
.cart-qty{ display:inline-flex; align-items:center; border:1px solid var(--hair); border-radius:var(--r-pill) }
.cart-qty button{
  width:34px; height:34px; display:grid; place-items:center; color:var(--ink);
  transition:color var(--d-micro) ease-out;
}
.cart-qty button:hover{ color:var(--gold-2) }
.cart-qty span{ min-width:26px; text-align:center; font-size:.9rem; font-weight:600 }
.cart-line{ text-align:right; min-width:100px }
.cart-line b{ font-weight:600; font-size:.95rem; display:block }
.cart-line button{ margin-top:6px; font-size:.76rem; color:var(--mut); transition:color var(--d-micro) ease-out }
.cart-line button:hover{ color:var(--gold-2) }
.cart-foot{ margin-top:clamp(26px, 3.4vw, 40px); display:flex; flex-direction:column; align-items:flex-end; gap:14px }
.cart-total{ display:flex; align-items:baseline; gap:18px }
.cart-total span{ font-size:.86rem; color:var(--mut); letter-spacing:.04em }
.cart-total b{ font-family:var(--f-disp); font-weight:500; font-size:clamp(1.4rem, 2.4vw, 1.9rem) }
.cart-note{ font-size:.82rem; color:var(--mut); max-width:46ch; text-align:right }
@media (max-width:640px){
  .cart-row{ grid-template-columns:64px 1fr; row-gap:12px }
  .cart-qty, .cart-line{ grid-column:2 }
  .cart-line{ text-align:left }
  .cart-foot{ align-items:stretch }
  .cart-note{ text-align:left }
}

/* ---------------------------------------------------------- checkout */
.co-split{ display:grid; grid-template-columns:1fr 380px; gap:clamp(30px, 5vw, 70px); align-items:start }
.co-flds{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 2vw, 22px) }
.fld{ display:block }
.fld-wide{ grid-column:1 / -1 }
.fld span{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-bottom:8px }
.fld input, .fld textarea{
  width:100%; padding:13px 16px; font:inherit; font-size:.95rem; color:var(--ink);
  background:transparent; border:1px solid var(--hair); border-radius:calc(var(--r-card) - 8px);
  transition:border-color var(--d-micro) ease-out;
}
.fld input:focus, .fld textarea:focus{ outline:none; border-color:var(--esp) }
/* placeholders must read as hints, clearly fainter than the fixed +381 prefix
   (--mut) — browser default is dark enough to pass for a typed value */
.fld input::placeholder, .fld textarea::placeholder{ color:rgba(56,34,15,.35); opacity:1 }
.fld textarea{ resize:vertical }
/* delivery country: shown, not chosen — Serbia only */
.fld-lock input{ background:var(--cream-2); color:var(--mut); cursor:default }
.fld-note{ display:block; margin-top:8px; font-size:.82rem; line-height:1.5; color:var(--mut); max-width:56ch }
/* phone: flag + fixed +381 drawn inside the field (Serbia-only shop); the two
   spans must undo the .fld span label styling they inherit */
.fld .tel-grp{
  display:flex; align-items:center; margin-bottom:0;
  font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--ink);
  border:1px solid var(--hair); border-radius:calc(var(--r-card) - 8px);
  transition:border-color var(--d-micro) ease-out;
}
.fld .tel-grp:focus-within{ border-color:var(--esp) }
.fld .tel-cc{
  display:flex; align-items:center; gap:8px; margin-bottom:0; padding:13px 0 13px 16px;
  font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--mut); white-space:nowrap;
}
.tel-cc svg{ width:20px; height:auto; border-radius:2px; box-shadow:0 0 0 1px var(--hair) }
.tel-grp input, .tel-grp input:focus{ border:none; padding-left:10px }
.co-pay{ margin-top:clamp(26px, 3.4vw, 38px) }
.co-pay h2{ font-family:var(--f-disp); font-weight:500; font-size:1.2rem; padding-bottom:12px; border-bottom:1px solid var(--hair) }
.co-pay-row{ padding-top:16px }
.co-pay-row b{ font-weight:600; font-size:.95rem }
.co-pay-row p{ margin-top:6px; font-size:.86rem; color:var(--mut); max-width:52ch }
.co-err{ margin-top:18px; font-size:.86rem; color:#8C2F1D }
.co-form .btn{ margin-top:clamp(22px, 3vw, 32px) }
.co-side{ background:var(--cream-2); border-radius:var(--r-card); padding:clamp(20px, 2.6vw, 30px) }
.co-side .cart-row{ grid-template-columns:56px 1fr auto; padding:14px 0 }
.co-side .cart-row:first-child{ border-top:0 }
.co-side .cart-qty{ display:none }
.co-side .cart-line button{ display:none }
.co-side .cart-total{ margin-top:18px; justify-content:space-between }
.co-side .cart-note{ text-align:left; margin-top:12px }
@media (max-width:900px){
  .co-split{ grid-template-columns:1fr }
  .co-side{ order:-1 }
}
@media (max-width:560px){ .co-flds{ grid-template-columns:1fr } }

/* ---------------------------------------------------------- thanks + pro */
.ty-wrap{ max-width:640px }
.ty-order{ display:flex; gap:12px; align-items:baseline; margin-bottom:18px }
.ty-order span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mut) }
.ty-order b{ font-family:var(--f-disp); font-weight:500; font-size:1.5rem }
.ty-p{ color:var(--mut); line-height:1.7; margin-bottom:30px }
.pro-login{ max-width:440px }
.pro-login h2{ font-family:var(--f-disp); font-weight:500; font-size:1.5rem }
.pro-login p{ margin-top:10px; margin-bottom:26px; color:var(--mut); font-size:.94rem }
.pro-login .fld + .fld{ margin-top:16px }
.pro-bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:18px; margin-bottom:clamp(26px, 3.4vw, 40px); border-bottom:1px solid var(--hair) }
.pro-bar span{ font-size:.86rem; color:var(--mut) }

/* cart count badge in the header */
.hd-cart{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; color:inherit }
.hd-cart svg{ width:20px; height:20px }
.hd-cart b{
  position:absolute; top:3px; right:2px; min-width:17px; height:17px; padding:0 4px;
  display:none; place-items:center; border-radius:var(--r-pill);
  background:var(--gold-2); color:var(--cream);
  font-size:.63rem; font-weight:700; line-height:1;
}
.hd-cart.has b{ display:grid }

/* ------------------------------------------------------- live stock / notify */
/* Sold-out card: muted photo + a small badge drawn from data-oos, so the
   label rides the locale strings baked into the markup. */
.p-card.is-oos{ position:relative }
.p-card.is-oos img{ filter:grayscale(.65); opacity:.72 }
.p-card.is-oos::after{
  content:attr(data-oos); position:absolute; top:14px; left:14px;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream); background:var(--esp); padding:5px 11px;
  border-radius:var(--r-pill); pointer-events:none }
.p-card.is-oos .p-meta b{ color:var(--mut) }

/* "Obavesti me" form under the sold-out notice on the product page */
.prod-notify{ margin-top:clamp(20px, 2.6vw, 30px); padding:clamp(16px, 2vw, 22px);
  background:var(--cream-2); border:1px solid var(--hair); border-radius:var(--r-card) }
.prod-notify h2{ font-family:var(--f-disp); font-size:1.05rem; color:var(--esp) }
.prod-notify p{ font-size:.87rem; color:var(--mut); margin-top:5px; line-height:1.55 }
.prod-notify .n-row{ display:flex; gap:10px; margin-top:13px; flex-wrap:wrap }
.prod-notify input[type=email]{ flex:1 1 200px; min-width:0; padding:12px 15px;
  border:1px solid var(--hair); border-radius:var(--r-pill); background:var(--cream);
  font:inherit; font-size:.9rem; color:var(--ink) }
.prod-notify input[type=email]:focus{ outline:none; border-color:var(--gold-2) }
/* honeypot: visually gone, still in the DOM for the bots that fill everything */
.prod-notify input[name=website]{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.prod-notify .n-note{ font-size:.85rem; margin-top:10px; color:var(--gold-2); min-height:1.2em }
.prod-notify .n-note:empty{ display:none }
.prod-notify.is-done .n-row{ display:none }

/* ------------------------------------------------------- order tracking */
/* /pracenje/?k=<token>: what the confirmation mail links to. No accounts and
   no login, so the page has to read as HERS at a glance and as nothing like a
   dashboard. Same cream ground, hairlines and Playfair headings as the cart,
   plus one vertical timeline. */
.trk-wrap{ max-width:760px }
.trk-msg{ color:var(--mut); line-height:1.7; max-width:56ch }

.trk-head{
  display:flex; flex-wrap:wrap; gap:clamp(20px, 5vw, 60px);
  padding-bottom:clamp(20px, 2.6vw, 28px); border-bottom:1px solid var(--hair);
}
.trk-kv span{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut) }
.trk-kv b{ display:block; margin-top:6px; font-family:var(--f-disp); font-weight:500; font-size:1.35rem }

/* Timeline. The dot column is a fixed width so the labels line up whatever
   the step is called, and the rule between two dots is drawn by the LOWER of
   the pair — that way it can take its colour from the step above it without
   a class on the connector itself. */
.trk-steps{ list-style:none; margin-top:clamp(26px, 3.4vw, 38px) }
.trk-step{
  position:relative; display:grid; grid-template-columns:22px 1fr auto;
  align-items:center; gap:14px; padding:11px 0;
}
.trk-step + .trk-step::before{
  content:''; position:absolute; left:10px; top:-15px; width:1px; height:30px;
  background:var(--hair);
}
.trk-step.is-done + .trk-step::before{ background:var(--gold-2) }
.trk-dot{
  width:22px; height:22px; border-radius:var(--r-pill); display:grid; place-items:center;
  border:1px solid var(--hair); background:var(--cream); color:transparent;
}
.trk-dot svg{ width:12px; height:12px }
.trk-step b{ font-weight:500; font-size:1rem; color:var(--mut) }
.trk-at{ font-size:.82rem; color:var(--mut) }
.trk-step.is-done .trk-dot{ background:var(--gold-2); border-color:var(--gold-2); color:var(--cream) }
.trk-step.is-done b{ color:var(--ink) }
.trk-step.is-now b{ font-weight:600 }
/* cancelled: the flow never finished, so nothing on it may read as progress */
.trk-steps.is-off{ opacity:.45 }

.trk-cancel{
  margin-top:clamp(20px, 2.6vw, 28px); padding:clamp(16px, 2vw, 22px);
  background:var(--cream-2); border-radius:var(--r-card);
}
.trk-cancel b{ font-family:var(--f-disp); font-weight:500; font-size:1.1rem }
.trk-cancel p{ margin-top:6px; font-size:.9rem; color:var(--mut); line-height:1.6 }

.trk-lead{ margin-top:clamp(22px, 3vw, 30px); color:var(--mut); line-height:1.7; max-width:60ch }

.trk-h2{
  font-family:var(--f-disp); font-weight:500; font-size:1.2rem;
  margin-top:clamp(30px, 4vw, 44px); padding-bottom:13px; border-bottom:1px solid var(--hair);
}
/* three columns, not the cart's four: the quantity sits under the price so the
   row never has to restack on a phone. grid-column is pinned because the cart's
   own <=640px rule would otherwise drop .cart-line under the title. */
.trk-rows .cart-row{ grid-template-columns:64px 1fr auto }
.trk-rows .cart-line{ grid-column:3; text-align:right }
.trk-q{ display:block; margin-top:5px; font-size:.8rem; color:var(--mut) }
.trk-sum{ margin-top:clamp(18px, 2.4vw, 24px); display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.trk-pay{ font-size:.85rem; color:var(--mut) }
/* auto-fit, not 1fr 1fr: most orders carry no note, and a hidden second
   cell would otherwise leave the address heading's rule stopping halfway
   across the page for no visible reason */
.trk-two{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:clamp(20px, 4vw, 50px) }
.trk-addr{ margin-top:14px; line-height:1.8; font-size:.95rem }
.trk-back{ margin-top:clamp(30px, 4vw, 44px) }
/* thank-you page: tracking first, back to the shop second */
.ty-btns{ display:flex; flex-wrap:wrap; gap:14px }
@media (max-width:640px){
  .trk-rows .cart-row{ grid-template-columns:56px 1fr auto }
}

/* ================================================================ CLINIC
   Booking + questionnaire forms. Same vocabulary as the shop: hairlines, one
   ground per room, --r-card corners, Italiana for headings. Concatenated into
   site.css at build time. */

.form-wrap{ max-width:820px }
.cform{ display:block }
.fset{ border:0; padding:0; margin:0 0 clamp(30px, 4vw, 46px) 0 }
.fset legend{
  display:block; width:100%; padding:0 0 14px 0; margin-bottom:22px;
  font-family:var(--f-disp); font-weight:500; font-size:clamp(1.2rem, 2.2vw, 1.5rem);
  color:var(--esp); border-bottom:1px solid var(--hair);
}
.fld-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 2vw, 22px) }
/* stacking margins apply only to fields laid out directly in a fieldset —
   a bare `.fld + .fld` also matches siblings INSIDE .fld-grid and .co-flds,
   where the margin pushes the second grid cell down and breaks alignment */
.fset > .fld-grid + .fld,
.fset > .fld-grid + .fld-grid,
.fset > .fld + .fld{ margin-top:clamp(14px, 2vw, 22px) }
.fld-sel{
  width:100%; padding:13px 16px; font:inherit; font-size:.95rem; color:var(--ink);
  background:transparent; border:1px solid var(--hair); border-radius:calc(var(--r-card) - 8px);
  transition:border-color var(--d-micro) ease-out;
}
.fld-sel:focus{ outline:none; border-color:var(--esp) }
.fnote{ margin-top:16px; font-size:.85rem; line-height:1.65; color:var(--mut); max-width:62ch }
.fnote.is-closed{ color:#8C2F1D }

/* service picker: two wide choices, not a dropdown */
.svc-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 2vw, 18px) }
.svc input{ position:absolute; opacity:0; pointer-events:none }
.svc-in{
  display:block; padding:clamp(16px, 2.4vw, 22px); cursor:pointer;
  border:1px solid var(--hair); border-radius:var(--r-card);
  transition:border-color var(--d-micro) ease-out;
}
.svc:hover .svc-in{ border-color:var(--esp) }
.svc.on .svc-in{ border-color:var(--esp); background:var(--cream-2) }
.svc-in b{ display:block; font-family:var(--f-disp); font-weight:500; font-size:1.15rem }
.svc-in em{ display:block; margin-top:6px; font-style:normal; font-size:.85rem; color:var(--mut); line-height:1.55 }
.svc input:focus-visible + .svc-in{ outline:2px solid var(--gold-2); outline-offset:3px }
.sub-wrap{ margin-top:clamp(14px, 2vw, 20px) }

.consent{ display:flex; gap:12px; align-items:flex-start; margin-top:clamp(18px, 2.4vw, 24px) }
.consent input{ margin-top:4px; flex:none; width:16px; height:16px; accent-color:var(--esp) }
.consent span{ font-size:.88rem; line-height:1.6; color:var(--mut) }

/* success panel replaces the form in place */
.cform-ok{ padding:clamp(24px, 4vw, 44px); background:var(--cream-2); border-radius:var(--r-card) }
.ok-kicker{ font-family:var(--f-script); font-size:1.9rem; color:var(--gold-2); line-height:1 }
.cform-ok h2{ font-family:var(--f-disp); font-weight:400; font-size:clamp(1.6rem, 3.2vw, 2.3rem); margin-top:8px }
.ok-ref{ display:flex; gap:12px; align-items:baseline; margin-top:18px }
.ok-ref span{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mut) }
.ok-ref b{ font-family:var(--f-disp); font-weight:500; font-size:1.4rem }
.ok-p{ margin:14px 0 26px; color:var(--mut); line-height:1.7; max-width:56ch }

/* ---------------------------------------------------------- questionnaire */
.qlegend{ margin-bottom:clamp(26px, 3.4vw, 38px); padding:clamp(16px, 2.4vw, 22px); background:var(--cream-2); border-radius:var(--r-card) }
.qlegend h2{ font-family:var(--f-disp); font-weight:500; font-size:1.1rem; margin-bottom:12px }
.qlegend ul{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 18px }
.qlegend li{ display:flex; gap:9px; align-items:baseline; font-size:.84rem; color:var(--mut) }
.qlegend b{
  flex:none; width:20px; height:20px; display:inline-grid; place-items:center;
  border:1px solid var(--hair); border-radius:50%; font-size:.72rem; color:var(--esp);
}

.qsec{ margin-bottom:clamp(24px, 3.2vw, 36px) }
.qsec-h{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:1px solid var(--hair) }
.qsec-h h2{ font-family:var(--f-disp); font-weight:500; font-size:1.15rem }
.qsec-sum{
  font-size:.8rem; font-weight:600; min-width:26px; text-align:center;
  padding:3px 9px; border-radius:var(--r-pill); color:var(--mut);
  transition:color var(--d-micro) ease-out;
}
.qsec-sum.hot{ color:var(--cream); background:var(--gold-2) }
.qrow{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(12px, 3vw, 30px);
  padding:11px 0; border-bottom:1px solid var(--hair);
}
.qtext{ font-size:.92rem; line-height:1.5 }
.qscale{ display:flex; gap:5px; flex:none }
.qopt input{ position:absolute; opacity:0; pointer-events:none }
.qopt span{
  display:grid; place-items:center; width:32px; height:32px; cursor:pointer;
  border:1px solid var(--hair); border-radius:50%;
  font-size:.82rem; color:var(--mut);
  transition:background var(--d-micro) ease-out;
}
.qopt input:checked + span{ background:var(--esp); color:var(--cream); border-color:var(--esp) }
.qopt input:focus-visible + span{ outline:2px solid var(--gold-2); outline-offset:2px }

.qtotal{
  position:sticky; bottom:0; z-index:5;
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:clamp(20px, 3vw, 30px) 0; padding:16px clamp(16px, 2.4vw, 22px);
  background:var(--esp); color:var(--cream); border-radius:var(--r-card);
}
.qtotal span{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-t) }
.qtotal b{ font-family:var(--f-disp); font-weight:500; font-size:1.8rem }
.qtotal em{ font-style:normal; font-size:.88rem; font-weight:600; margin-left:auto }

@media (max-width:760px){
  .fld-grid, .svc-row, .qlegend ul{ grid-template-columns:1fr }
  .qrow{ flex-direction:column; align-items:flex-start; gap:10px }
  .qscale{ width:100%; justify-content:space-between }
  .qopt span{ width:38px; height:38px }
}

/* ---------------------------------------------------------- kurs */
.soon-wrap{ max-width:680px }
.soon-p{ font-size:1.05rem; line-height:1.75; color:var(--ink) }
.soon-cta{ display:flex; align-items:center; gap:clamp(16px, 3vw, 30px); flex-wrap:wrap; margin-top:clamp(24px, 3.4vw, 36px) }

/* ================================================================ REFINE
   Chrome + landing refinements, concatenated LAST into site.css so each rule
   states which earlier rule it corrects and why. Kept in its own file rather
   than edited into the 84KB site.css blind.

   Added 2026-08-11 with the custom store: the header gained a cart button,
   which broke assumptions the old three-column header made. */

/* ---------------------------------------------------------- header layout
   WAS: .hd-in is `grid-template-columns:1fr auto 1fr`, which only centres the
   logo while BOTH side columns fit inside their 1fr. The cart button pushed
   the right side (cart 42 + gap 26 + CTA 134 = 202px) past its 148px column
   at 390px, so the logo drifted 69px left of centre and sat flush against the
   cart. Measured, not guessed.
   A ::before spacer is NOT the fix either: .hd-in is a grid, so the
   pseudo-element becomes a fourth grid item and auto-placement pushes the
   burger into column 3 and the right cluster onto a second row (seen live).
   NOW: flex with space-between for the two side clusters, the logo taken out
   of flow and centred on the header box, and an explicit min-height standing
   in for the height the logo no longer contributes. */
.hd-in{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px;
  transition:min-height var(--d-small) ease-out;
}
.hd.scrolled .hd-in{ min-height:52px }
.hd-logo{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  justify-self:unset; margin:0;
}

/* ---------------------------------------------------------- burger
   More restraint: hairline strokes, wider gap, and a letterspaced label that
   makes the control read as a designed mark rather than a generic icon. The
   two-line stagger (the site's existing signature) is kept, and hover still
   completes the short line — one property, per the motion rules.

   CAREFUL: site.css styles `.burger span` (specificity 0,1,1 — class+type),
   which now also matches the new .burger-lines wrapper and .burger-label,
   painting both as if they were bars. A plain `.burger-label` rule (0,1,0)
   LOSES to it, which is why the label stayed visible on mobile. Every rule
   below is therefore scoped through .burger to out-specify it. */
.burger{
  flex-direction:row; align-items:center; gap:14px;
  padding:12px 4px;
}
/* undo what `.burger span` does to the two new non-bar spans */
.burger > .burger-lines,
.burger > .burger-label{
  width:auto; height:auto; background:none; border-radius:0;
}
.burger > .burger-lines{
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
}
/* HEIGHT MUST BE AN INTEGER px. site.css already carried this warning:
   "2px integer heights (1.5px rendered one line fat, one thin)". A fractional
   height lands on a half pixel, so the browser rounds one bar up and the other
   down and they visibly disagree. This file set 1.5px and reintroduced exactly
   that bug (owner report). Do not make it fractional again. */
.burger .burger-lines span{
  display:block; width:28px; height:2px; border-radius:0;
  background:currentColor;
  transition:width var(--d-small) var(--e-enter), transform var(--d-small) var(--e-enter);
}
.burger .burger-lines span:last-child{ width:17px }
.burger:hover .burger-lines span:last-child{ width:28px }
.burger > .burger-label{
  display:block;
  font-size:.62rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  opacity:.66; transition:opacity var(--d-micro) ease-out;
}
.burger:hover > .burger-label{ opacity:1 }
/* The X state has to be re-declared: the bars live one level deeper now and
   the gap changed from 8px to 7px. Offset is derived, not guessed — two 2px
   bars with a 7px gap stack 11px tall, so each bar's centre sits 4.5px from
   the middle and that is exactly how far it has to travel to meet.

   FIRST kill the legacy rules. site.css still says
     body.menu-open .burger span:first-child { transform: ...rotate(45deg) }
   and with the new markup `.burger span:first-child` is the .burger-lines
   WRAPPER (and :last-child is the .burger-label). So the wrapper was being
   rotated 45deg while the bars inside it rotated too — the two transforms
   compound and the X comes out mangled. Measured live: wrapper matrix showed
   rotate(45deg) translateY(5px) on top of the bars' own rotation.

   NOTE the `span` in these selectors — it is load-bearing, not decoration.
   The legacy selector `body.menu-open .burger span:first-child` scores
   (0,3,2); writing the reset as `.burger > .burger-lines` scores (0,3,1) and
   LOSES on type-selector count, so the wrapper kept rotating. Adding the
   element name makes it (0,3,2), and being later in the file it now wins. */
body.menu-open .burger > span.burger-lines,
body.menu-open .burger > span.burger-label{
  transform:none; width:auto;
}
body.menu-open .burger .burger-lines span:first-child{ transform:translateY(4.5px) rotate(45deg) }
body.menu-open .burger .burger-lines span:last-child{ transform:translateY(-4.5px) rotate(-45deg); width:28px }

/* ---------------------------------------------------------- cart button
   The badge must never occupy layout when empty: an always-visible "0" reads
   as a broken counter. .hd-cart b is display:none until .has. */
.hd-cart{ margin-right:-4px }
.hd-cart:hover{ color:var(--gold-2) }
.hd-cart svg{ transition:transform var(--d-micro) ease-out }

@media (max-width:820px){
  /* room is tight at 390: trim the right cluster instead of letting it push
     the logo (which the absolute centring now prevents anyway) */
  .hd-right{ gap:6px }
  .hd-cta{ padding:9px 15px; font-size:.74rem; letter-spacing:.05em }
  .hd-cart{ width:38px; height:38px }
  .burger > .burger-label{ display:none }
  .burger{ gap:0 }
  .hd-in{ min-height:54px }
  .hd.scrolled .hd-in{ min-height:46px }
}
/* Phones: a centred mark does not fit next to a cart AND a full-word booking
   CTA. Measured at 390: burger ends at 56, the right cluster starts at 206,
   so the free middle is 150px centred on 131 — while a centred logo wants
   168-222 and overlaps the cart by 9px. The alternatives were shrinking
   "Zakazivanje" toward illegibility or hiding the primary conversion, so the
   mark moves beside the burger instead and everything gets its own space.
   Centred again from 620px up, where the room exists. */
@media (max-width:620px){
  .hd-logo{
    position:static; transform:none;
    left:auto; top:auto;
  }
  .hd-in{ justify-content:flex-start; gap:10px }
  .hd-right{ margin-left:auto }
}
@media (max-width:380px){
  .hd-cta{ padding:9px 13px; font-size:.71rem; letter-spacing:.04em }
  .hd-logo img{ width:46px; height:46px }
}

/* ---------------------------------------------------------- hero, mobile
   WAS: .k-lock-top wraps at <=820, so the face strip (a 302x74 crop designed
   to sit INSIDE a horizontal band next to the script) drops onto its own line
   and reads as a stray oval photo above the title. The band composition is
   the whole point of the element; once it wraps it is not that composition.
   NOW: the strip is dropped below 820 and the script/label/title stack as a
   clean three-step lockup. Desktop is untouched. */
@media (max-width:820px){
  .k-lock-top .k-strip{ display:none }
  .k-lock-top{ gap:0 6px; margin-bottom:6px }
  .k-script{ margin-bottom:2px }
  .k-mark-aka{
    align-self:flex-start;
    font-size:.68rem; letter-spacing:.24em; opacity:.78;
  }
  /* the hero ran very tall on a phone: the panel padding was tuned for a
     composition that no longer has the strip row */
  .k-hero-copy{ padding-block:clamp(18px, 5vw, 40px) }
}

/* ---------------------------------------------------------- landing polish */
/* price + action on a product page sat on different baselines because the
   Italiana price has a much larger cap height than the button label */
.prod-buy{ align-items:flex-end }
.prod-price b{ line-height:1.05 }

/* focus-visible was inherited from the UA on the new controls */
.hd-cart:focus-visible,
.burger:focus-visible,
.chip:focus-visible,
.add-cart:focus-visible,
.cart-qty button:focus-visible{
  outline:2px solid var(--gold-2); outline-offset:3px; border-radius:2px;
}

/* [hidden] is a User Agent rule, so ANY author `display:` beats it. Two places
   already lost that fight: .ty-order{display:flex} kept the empty "Broj
   porudžbine" label on screen for anyone who opened the thank-you page without
   an order behind it, and .btn{display:inline-flex} would have shown the new
   tracking button pointing at "#". One rule, last in the cascade: hidden means
   hidden, and toggling el.hidden in JS keeps working because that removes the
   attribute outright. */
[hidden]{ display:none !important }