/* ==========================================================================
   Longevity Carpe Diem — stylesheet
   Every colour, size, weight, line-height, letter-spacing, radius and spacing
   value below is taken directly from the Web_Claude.fig source file.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
/* Manrope is a variable font: one file serves 200–800. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/manrope-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;
}
/* Neuton: static weights. 200 covers the ExtraLight/Light display type. */
@font-face {
  font-family: 'Neuton';
  font-style: normal;
  font-weight: 200 300;
  font-display: swap;
  src: url('../assets/fonts/neuton-200-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: 'Neuton';
  font-style: normal;
  font-weight: 200 300;
  font-display: swap;
  src: url('../assets/fonts/neuton-200-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: 'Neuton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/neuton-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: 'Neuton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/neuton-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;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* brand palette, exactly as in the file's colour sheet */
  --ink:          #19262E;
  --black:        #0D0D12;
  --gold-dark:    #B39C6A;
  --gold-light:   #C8B17E;
  --beige-dark:   #E4DFD9;
  --beige-light:  #F0EEEB;
  --white:        #FFFFFF;
  --off-white:    #FBFBFB;

  /* supporting values used in the layouts */
  --card:         #F0F0EE;
  --muted:        #6E6862;
  --grey:         #6B7280;
  --taupe:        #8C7D70;
  --rule:         #E8E8E8;
  /* the approach rings only — 10% darker than --rule, so they hold up against
     the gradient without darkening the tier borders and timeline rail too */
  --rule-ring:    #D1D1D1;

  --font-display: 'Neuton', 'Times New Roman', serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* page geometry: 1440 frame, 80px gutters -> 1280 content */
  --page:      1440px;
  --content:   1280px;
  --narrow:    1200px;
  --measure:   720px;
  --gutter:    80px;
  --header-h:  100px;
  /* Clearance for the scroll-back header. It docks to the viewport on the first
     upward scroll, on every page, so anything that pins to the top of the
     screen has to be set below it — by the same gap everywhere, or each pinned
     section meets the bar differently. --pin-gap is the breathing space under
     the bar; --pin-top is where a pinned heading's box starts. */
  --pin-gap:   20px;
  --pin-top:   calc(var(--header-h) + var(--pin-gap));

  --r-pill:    500px;
  --r-btn:     40px;
  --r-card:    40px;
  --r-post:    75px;
  --r-input:   100px;
}

/* --- Reset / base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;             /* Figma body default: 16/26 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Type scale (all values from the file) -------------------------------- */
.display-64 { font-family: var(--font-display); font-weight: 200; font-size: 64px; line-height: 72px; }
.display-60 { font-family: var(--font-display); font-weight: 200; font-size: 60px; line-height: 75px; }
.display-55 { font-family: var(--font-display); font-weight: 200; font-size: 55px; line-height: 68px; }
.display-50 { font-family: var(--font-display); font-weight: 200; font-size: 50px; line-height: 72px; }
.display-43 { font-family: var(--font-display); font-weight: 200; font-size: 43px; line-height: 1; }
.display-40 { font-family: var(--font-display); font-weight: 200; font-size: 40px; line-height: 40px; }
.display-40-56 { font-family: var(--font-display); font-weight: 200; font-size: 40px; line-height: 56px; }
.display-35 { font-family: var(--font-display); font-weight: 200; font-size: 35px; line-height: 1.2; letter-spacing: -0.02em; }
.display-32 { font-family: var(--font-display); font-weight: 200; font-size: 32px; line-height: 40px; }

.serif-40 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 56px; }
.serif-36 { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 44px; }
.serif-32 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 40px; }

.lead      { font-size: 20px; line-height: 30px; }
.body-18   { font-size: 18px; line-height: 30px; letter-spacing: 0.02em; }
.body-17   { font-size: 17px; line-height: 30px; }
.body-16   { font-size: 16px; line-height: 26px; }
.body-15   { font-size: 15px; line-height: 24px; }
.body-14   { font-size: 14px; line-height: 22px; }
.eyebrow   { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 2px; text-transform: uppercase; color: var(--taupe); }

/* --- Layout -------------------------------------------------------------- */
.container   { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: 24px; }
.container--narrow { max-width: var(--narrow); }
.measure     { max-width: var(--measure); }
.section     { padding-block: 80px; }
/* the guide sits right above the closing photo — the picture is its own full
   stop, so the usual 80px under it only opens a hole */
.section--guide { padding-bottom: 8px; }
.section--guide .promo { padding-bottom: 24px; }
/* Zvitek se v sličicah nagiba, zato ga sredina mreže ne postavi tja, kamor ga
   postavi oko: nekaj ga gre v levo, da je zrak ob njem na obeh straneh enak.
   Besedilo ob njem pa nižje, da ne stoji na isti črti kot vrh slike. Oboje s
   premikom in ne z razmikom — postavitve to ne sme premakniti. */
@media (min-width: 641px) {
  .section--guide .promo__anim { transform: translateX(-1.5%); }
  .section--guide .promo__body { transform: translateY(48px); }
}
/* pri načrtovani širini je zvitka v stolpcu več, ob strani pa ga čaka širši rob
   — takrat gre lahko dlje v levo, da je zraka na obeh straneh enako */
@media (min-width: 1440px) {
  .section--guide .promo__anim { transform: translateX(-7%); }
}
.section--lg { padding-block: 120px; }
.center      { text-align: center; }
.stack > * + * { margin-top: var(--gap, 24px); }

/* --- Buttons ("Gumb" in the file: 1px border, 40px radius, 8/22 padding) -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  padding: 8px 22px;
  border: 1px solid currentColor;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--ink);
  font-size: 14px; line-height: 20px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--lg { padding: 10px 20px; font-size: 18px; line-height: 32px; }
.btn--on-dark { color: var(--white); }
.btn--on-dark:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--solid { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--ink); }

/* chips / category pills (13px, 8/20 padding) */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 20px;
  border: 1px solid var(--black);
  border-radius: var(--r-btn);
  font-size: 13px; line-height: 20px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.chip:hover, .chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip--plain { border-color: transparent; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center;
}
.site-header__inner {
  /* The Figma frame is 1440 wide with 61px gutters — 4.2% of it. That is kept
     as a proportion rather than as the frame width plus a fixed gutter: capping
     the bar at 1440 and centring it left 205px of dead space either side of a
     16-inch laptop's 1728, so the header floated in the middle of a full-bleed
     hero. Fluid to 1800, where the gutter tops out and the bar centres. */
  width: 100%; max-width: 1800px; margin-inline: auto;
  padding-inline: clamp(32px, 4.2vw, 80px);
  display: flex; align-items: center; justify-content: space-between;
}
/* Logos are the decoded Figma vector paths, applied as masks so they can take
   any brand colour via `background-color`.

   The mask art is embedded as a data URI rather than linked to the files in
   assets/svg/ (which tools/extract.js still writes, and which stay the source
   of truth). Mask images are CORS-checked in a way background images are not,
   and a file:// document treats even a sibling file as another origin — so a
   linked mask failed to load and the browser masked the element away to
   nothing, leaving an empty gap where the logo should be whenever the page was
   opened straight off disk instead of over http. A data URI carries no origin
   to fail, so the logo draws the same either way. To refresh it after a new
   export, re-encode the SVG: strip newlines, then percent-encode % < > " #. */
.logo {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
/* sam znak brez napisa — isti štirje listi kot v zloženem logotipu */
.logo--mark {
  width: 44px; aspect-ratio: 1;
  /* ?v=2: znak je imel pomanjkljiv viewBox in je bil odrezan na desni in
     spodaj — datoteka je popravljena, oznaka za različico pa poskrbi, da
     brskalniki, ki imajo staro shranjeno, poberejo novo */
  -webkit-mask-image: url("../assets/svg/logo-mark.svg?v=2");
          mask-image: url("../assets/svg/logo-mark.svg?v=2");
}
.logo--wordmark {
  width: 214px; aspect-ratio: 214 / 21.4;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 214 21.42%22 fill=%22none%22%3E%3Cpath d=%22M36.85 33.95L20.04 12.94C19.72 12.29 15.19 7.44 16.81 3.56C17.78 1.3 19.07 0.65 19.4 0.65L19.4 0L0 0L0 0.65C0.32 0.65 3.56 3.56 5.5 5.18C8.41 8.09 11.32 11.97 11.97 12.62L30.07 37.19L30.07 54C30.07 54.97 30.07 59.5 29.1 60.79C28.13 62.41 26.84 63.38 25.22 64.35L25.22 65C28.45 65 30.72 64.68 33.95 64.68C37.18 64.68 40.09 64.68 43.97 65L43.97 64.35C42.03 63.7 41.38 62.73 40.09 61.12C39.44 60.47 38.8 56.92 38.8 54.33L38.8 35.58Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 196.623 1.8436)%22/%3E%3Cpath d=%22M67.25 12.94C65.63 9.71 56.91 2.92 46.88 2.92C43.32 2.92 39.12 3.24 39.12 6.48L39.12 54.65C39.12 58.21 40.09 60.15 41.38 61.76C43 63.38 43.97 64.02 46.23 64.67L46.23 65.32C42.35 65.32 39.44 65 35.24 65C31.04 65 28.45 65 23.6 65.32L23.6 64.67C25.86 64.02 27.16 63.05 28.77 61.11C30.06 59.49 30.71 56.91 30.71 54.32L30.71 6.15C30.71 3.56 26.51 2.59 22.95 2.59C10.99 2.59 2.91 9.7 1.29 12.61L0 12.61L3.88 0L64.98 0L68.54 12.61L67.57 12.61L67.25 12.93L67.25 12.94Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 174.9398 1.754)%22/%3E%3Cpath d=%22M25.53 34.59L19.06 34.59L19.06 25.86C22.62 24.57 25.2 21.66 26.17 17.78L22.61 17.78C21.96 19.72 20.67 21.01 19.05 21.98L19.05 15.19L25.52 15.19C31.02 15.19 34.9 19.39 34.9 24.89C34.9 30.39 30.7 34.59 25.52 34.59L25.53 34.59Z M3.54 34.59L3.54 22.63C5.8 25.22 9.36 26.83 13.56 26.83C17.76 26.83 15.18 26.83 15.82 26.83L15.82 34.59L3.54 34.59Z M25.53 11.96L15.51 11.96L15.51 23.27L13.25 23.27C7.75 23.27 3.23 19.07 3.23 13.25C3.23 7.43 7.43 3.23 13.25 3.23C19.07 3.23 21.01 5.17 22.3 9.05L25.86 9.05C24.57 3.55 19.39 0 13.25 0C7.11 0 0 5.82 0 13.25C0 20.68 0 13.25 0 13.57L0 37.17L25.54 37.17C32.98 37.17 38.47 31.67 38.47 24.24C38.47 16.81 32.97 11.31 25.54 11.31L25.54 11.96L25.53 11.96Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 11.3303 0)%22/%3E%3Cpath d=%22M7.76 0L0 0L0 0.65C2.59 1.62 3.23 2.59 4.2 4.53C4.52 5.5 4.52 7.12 4.2 8.73L4.2 15.52C5.17 14.23 6.14 12.93 7.11 11.32C8.4 9.06 10.34 6.15 11.96 4.53C13.25 2.91 15.52 0.97 15.84 0.65L15.84 0L7.43 0L7.75 0L7.76 0Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 209.6992 1.9305)%22/%3E%3Cpath d=%22M72.09 34.26C70.47 34.26 69.18 34.91 68.21 36.2C66.59 37.82 66.27 39.76 66.27 42.02L66.92 58.83L65.95 59.48C58.84 64.65 53.67 67.56 40.73 68.21C21.66 69.18 0 57.22 0 34.27C0 15.52 14.55 0.33 37.5 0C46.55 0 59.81 3.56 64.01 6.79L65.63 8.08L63.04 17.46L62.39 17.46L61.74 15.84C59.15 10.99 51.72 1.62 37.17 1.94C18.74 2.26 10.34 15.84 10.34 33.3C10.34 51.73 20.36 67.24 40.41 66.27C53.34 65.62 58.84 62.71 57.87 48.17C57.55 42.35 58.84 36.86 49.14 34.92L46.88 34.92C46.88 34.6 46.23 32.98 46.23 32.98C52.37 33.63 55.93 33.95 62.07 33.95C68.21 33.95 68.21 33.95 72.09 33.63L72.09 34.28L72.09 34.26Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 98.3998 1.4064)%22/%3E%3Cpath d=%22M12.94 2.9L19.41 2.9L19.41 11.63C15.85 12.92 13.27 15.83 12.3 19.71L15.86 19.71C16.51 17.77 17.8 16.48 19.42 15.51L19.42 22.3L12.95 22.3C7.45 22.3 3.57 18.1 3.57 12.6C3.57 7.1 7.77 2.9 12.95 2.9L12.94 2.9Z M34.93 2.9L34.93 14.86C32.67 12.27 29.11 10.66 24.91 10.66C20.71 10.66 23.29 10.66 22.65 10.66L22.65 2.9L34.93 2.9Z M12.94 25.21L22.96 25.21L22.96 13.9L25.22 13.9C30.72 13.9 35.24 18.1 35.24 23.92C35.24 29.74 31.04 33.94 25.22 33.94C19.4 33.94 17.46 32 16.17 28.12L12.61 28.12C13.9 33.62 19.08 37.17 25.22 37.17C31.36 37.17 38.47 31.35 38.47 23.92C38.47 16.49 38.47 23.92 38.47 23.6L38.47 0L12.93 0C5.49 0 0 5.5 0 12.93C0 20.36 5.5 25.86 12.93 25.86L12.93 25.21L12.94 25.21Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 0 11.3249)%22/%3E%3Cpath d=%22M61.1 64.99L23.28 64.99C19.08 64.99 16.81 64.67 12.61 64.67C8.41 64.67 4.85 64.67 0 64.99L0 64.34C1.94 63.69 2.91 62.72 4.2 61.11C5.82 59.17 5.82 52.06 5.82 51.09L5.82 7.77C5.82 6.8 5.17 4.86 3.88 3.24C2.91 1.95 1.94 0.98 1.62 0.65L1.62 0L55.28 0L58.84 10.99L57.87 10.99L56.9 10.02C53.02 6.14 51.08 5.82 47.2 4.2C42.35 2.26 27.8 2.26 15.52 2.26L13.9 2.26L13.9 29.42L34.27 29.42C38.47 29.42 42.03 29.42 44.94 27.48C46.88 26.19 48.17 24.57 49.14 22.31L50.11 22.31C50.11 25.22 49.79 27.48 49.79 30.39C49.79 33.3 49.79 35.24 50.11 38.15L49.14 38.15C47.85 36.21 46.88 34.59 43.97 32.98C41.71 31.69 39.44 31.36 34.27 31.36L13.9 31.36L14.55 53.99C14.87 63.04 19.08 62.4 27.48 62.4C48.17 62.72 58.52 58.2 63.69 51.09L64.66 51.09L60.46 64.99L61.11 64.99L61.1 64.99Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 121.3971 1.8409)%22/%3E%3Cpath d=%22M42.02 53.68C42.02 53.68 41.7 53.36 41.7 53.03L41.7 53.68L15.84 7.77C15.19 6.8 14.87 4.86 15.84 3.24C16.49 1.95 18.1 0.65 18.43 0.65L18.43 0L0 0L0 0.65C0.65 0.65 2.26 2.27 3.56 3.24C5.18 4.86 6.47 6.47 7.12 7.77L32.01 54L37.18 65.64L38.15 65.64L43.32 55.29C43 54.64 42.35 54.32 42.03 53.67L42.02 53.68Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 142.5535 1.9278)%22/%3E%3Cpath d=%22M7.76 0L0 0L0 0.65C2.59 1.62 3.23 2.59 4.2 4.53C4.52 5.5 4.52 7.12 4.2 8.73L4.2 15.52C5.17 14.23 6.14 12.93 7.11 11.32C8.4 9.06 10.34 6.15 11.96 4.53C13.25 2.91 15.52 0.97 15.84 0.65L15.84 0L7.43 0L7.75 0L7.76 0Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 158.0869 1.9305)%22/%3E%3Cpath d=%22M19.39 5.5C17.77 3.56 16.8 2.27 15.19 0C12.93 0 11.31 0.32 9.05 0.32C6.79 0.32 4.2 0.32 1.29 0L1.29 0.65C1.61 0.65 3.23 2.27 4.2 3.24C4.85 3.89 6.79 6.47 6.79 8.41L6.79 50.11C6.79 52.05 6.14 58.84 4.2 60.78C2.91 62.07 1.94 63.04 0 64.01L0 64.66C3.56 64.66 5.5 64.34 9.05 64.34C12.6 64.34 13.9 64.34 16.81 64.66L16.81 64.01C14.55 63.36 13.25 62.72 11.96 60.78C11.31 60.13 9.7 54.96 9.7 50.11L9.05 6.47C9.05 5.82 31.68 31.04 45.9 46.56C52.69 54 56.24 58.52 63.03 66.28L64.32 66.28L64.32 53.03L61.73 50.12C61.73 51.09 21.64 8.09 19.38 5.18L19.38 5.5L19.39 5.5Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 75.845 1.8436)%22/%3E%3Cpath d=%22M36.85 1.61C17.45 1.61 10.02 17.77 10.02 34.26C10.02 50.75 17.46 67.23 36.85 66.91C56.57 66.59 62.39 51.39 63.04 35.55C63.69 18.09 55.28 1.93 36.85 1.61Z M37.18 68.53C17.46 68.85 0 53.66 0 33.94C0 14.22 16.16 0 37.18 0C58.2 0 73.39 15.19 73.06 34.59C73.06 53.66 57.54 68.21 37.18 68.53Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 52.0549 1.4064)%22/%3E%3Cpath d=%22M34.91 12.93C34.91 18.43 30.71 22.63 25.53 22.63L19.06 22.63L19.06 15.84C20.68 16.81 21.97 18.43 22.62 20.04L26.18 20.04C25.21 16.48 22.62 13.57 19.07 11.96L19.07 3.23L25.54 3.23C31.04 3.23 34.92 7.43 34.92 12.93L34.91 12.93Z M15.51 3.23L15.51 10.99L13.25 10.99C9.05 10.99 5.81 12.61 3.23 15.19L3.23 3.23L15.51 3.23Z M38.47 12.93C38.47 5.49 32.97 0 25.54 0L0 0L0 23.92C0 31.36 5.82 37.17 13.25 37.17C20.68 37.17 24.56 33.61 25.86 28.12L22.3 28.12C21.01 31.68 17.45 33.94 13.25 33.94C9.05 33.94 3.23 29.74 3.23 23.92C3.23 18.1 7.43 13.9 13.25 13.9C19.07 13.9 14.87 13.9 15.51 13.9L15.51 25.21L25.53 25.21C32.97 25.21 38.46 19.71 38.46 12.28L38.46 12.93L38.47 12.93Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 11.3276 11.2353)%22/%3E%3Cpath d=%22M58.83 65.31L23.59 65.31C19.39 65.31 16.8 64.99 12.28 64.99C7.76 64.99 4.84 64.99 0 65.31L0 64.66C2.26 64.01 3.56 63.04 4.85 61.1C5.82 59.81 6.14 55.28 6.14 54.31L6.14 10.35C6.14 9.38 6.14 6.15 4.85 4.21C3.88 2.59 2.26 0.98 1.94 0.65L1.94 0C5.5 0.32 7.44 0.65 10.99 0.65C13.9 0.65 15.84 0.65 18.75 0L18.75 0.65C18.43 0.65 17.46 1.3 16.16 3.24C14.54 5.5 13.9 6.8 13.9 10.03L14.87 54C14.87 60.47 17.46 62.41 27.8 62.73C39.76 62.73 54.96 60.79 61.42 51.74L62.07 51.74L58.19 64.67L58.84 65.32L58.83 65.31Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 31.7808 1.754)%22/%3E%3Cpath d=%22M10.02 64.35C6.14 64.35 3.88 64.35 0 64.67L0 64.02C1.94 63.05 2.91 62.08 3.88 60.46C5.17 58.2 5.17 54.64 5.17 53.67L5.17 7.77C5.49 6.8 5.17 4.86 4.2 3.24C3.55 2.27 2.26 0.65 1.94 0.65L1.94 0C4.85 0.32 6.47 0.65 9.38 0.65C12.29 0.65 13.91 0.65 16.49 0L16.49 0.65C16.17 0.65 14.87 2.27 14.23 3.24C13.26 4.86 13.26 7.12 13.26 7.77L13.26 54C13.91 56.59 15.2 60.14 15.52 60.79C16.49 62.08 17.46 63.05 18.75 64.02L18.75 64.67C15.19 64.67 13.25 64.35 9.7 64.35L10.02 64.35Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 166.5147 1.9278)%22/%3E%3Cpath d=%22M3.56 24.24C3.56 18.74 7.76 14.54 12.94 14.54L19.41 14.54L19.41 21.33C17.79 20.36 16.5 18.74 15.85 17.13L12.29 17.13C13.26 20.69 15.85 23.6 19.4 25.21L19.4 33.94L12.93 33.94C7.43 33.94 3.55 29.74 3.55 24.24L3.56 24.24Z M22.96 33.94L22.96 26.18L25.22 26.18C29.42 26.18 32.66 24.56 35.24 21.98L35.24 33.94L22.96 33.94Z M0 24.24C0 31.68 5.5 37.17 12.93 37.17L38.47 37.17L38.47 13.25C38.47 5.81 32.65 0 25.22 0C17.79 0 13.91 3.56 12.61 9.05L16.17 9.05C17.46 5.49 21.02 3.23 25.22 3.23C29.42 3.23 35.24 7.43 35.24 13.25C35.24 19.07 31.04 23.27 25.22 23.27C19.4 23.27 23.6 23.27 22.96 23.27L22.96 11.96L12.94 11.96C5.5 11.96 0.01 17.46 0.01 24.89L0.01 24.24L0 24.24Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 0.0027 0.0896)%22/%3E%3Cpath d=%22M7.76 0L0 0L0 0.65C2.59 1.62 3.23 2.59 4.2 4.53C4.52 5.5 4.52 7.12 4.2 8.73L4.2 15.52C5.17 14.23 6.14 12.93 7.11 11.32C8.4 9.06 10.34 6.15 11.96 4.53C13.25 2.91 15.52 0.97 15.84 0.65L15.84 0L7.43 0L7.75 0L7.76 0Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 91.8155 1.9305)%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 214 21.42%22 fill=%22none%22%3E%3Cpath d=%22M36.85 33.95L20.04 12.94C19.72 12.29 15.19 7.44 16.81 3.56C17.78 1.3 19.07 0.65 19.4 0.65L19.4 0L0 0L0 0.65C0.32 0.65 3.56 3.56 5.5 5.18C8.41 8.09 11.32 11.97 11.97 12.62L30.07 37.19L30.07 54C30.07 54.97 30.07 59.5 29.1 60.79C28.13 62.41 26.84 63.38 25.22 64.35L25.22 65C28.45 65 30.72 64.68 33.95 64.68C37.18 64.68 40.09 64.68 43.97 65L43.97 64.35C42.03 63.7 41.38 62.73 40.09 61.12C39.44 60.47 38.8 56.92 38.8 54.33L38.8 35.58Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 196.623 1.8436)%22/%3E%3Cpath d=%22M67.25 12.94C65.63 9.71 56.91 2.92 46.88 2.92C43.32 2.92 39.12 3.24 39.12 6.48L39.12 54.65C39.12 58.21 40.09 60.15 41.38 61.76C43 63.38 43.97 64.02 46.23 64.67L46.23 65.32C42.35 65.32 39.44 65 35.24 65C31.04 65 28.45 65 23.6 65.32L23.6 64.67C25.86 64.02 27.16 63.05 28.77 61.11C30.06 59.49 30.71 56.91 30.71 54.32L30.71 6.15C30.71 3.56 26.51 2.59 22.95 2.59C10.99 2.59 2.91 9.7 1.29 12.61L0 12.61L3.88 0L64.98 0L68.54 12.61L67.57 12.61L67.25 12.93L67.25 12.94Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 174.9398 1.754)%22/%3E%3Cpath d=%22M25.53 34.59L19.06 34.59L19.06 25.86C22.62 24.57 25.2 21.66 26.17 17.78L22.61 17.78C21.96 19.72 20.67 21.01 19.05 21.98L19.05 15.19L25.52 15.19C31.02 15.19 34.9 19.39 34.9 24.89C34.9 30.39 30.7 34.59 25.52 34.59L25.53 34.59Z M3.54 34.59L3.54 22.63C5.8 25.22 9.36 26.83 13.56 26.83C17.76 26.83 15.18 26.83 15.82 26.83L15.82 34.59L3.54 34.59Z M25.53 11.96L15.51 11.96L15.51 23.27L13.25 23.27C7.75 23.27 3.23 19.07 3.23 13.25C3.23 7.43 7.43 3.23 13.25 3.23C19.07 3.23 21.01 5.17 22.3 9.05L25.86 9.05C24.57 3.55 19.39 0 13.25 0C7.11 0 0 5.82 0 13.25C0 20.68 0 13.25 0 13.57L0 37.17L25.54 37.17C32.98 37.17 38.47 31.67 38.47 24.24C38.47 16.81 32.97 11.31 25.54 11.31L25.54 11.96L25.53 11.96Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 11.3303 0)%22/%3E%3Cpath d=%22M7.76 0L0 0L0 0.65C2.59 1.62 3.23 2.59 4.2 4.53C4.52 5.5 4.52 7.12 4.2 8.73L4.2 15.52C5.17 14.23 6.14 12.93 7.11 11.32C8.4 9.06 10.34 6.15 11.96 4.53C13.25 2.91 15.52 0.97 15.84 0.65L15.84 0L7.43 0L7.75 0L7.76 0Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 209.6992 1.9305)%22/%3E%3Cpath d=%22M72.09 34.26C70.47 34.26 69.18 34.91 68.21 36.2C66.59 37.82 66.27 39.76 66.27 42.02L66.92 58.83L65.95 59.48C58.84 64.65 53.67 67.56 40.73 68.21C21.66 69.18 0 57.22 0 34.27C0 15.52 14.55 0.33 37.5 0C46.55 0 59.81 3.56 64.01 6.79L65.63 8.08L63.04 17.46L62.39 17.46L61.74 15.84C59.15 10.99 51.72 1.62 37.17 1.94C18.74 2.26 10.34 15.84 10.34 33.3C10.34 51.73 20.36 67.24 40.41 66.27C53.34 65.62 58.84 62.71 57.87 48.17C57.55 42.35 58.84 36.86 49.14 34.92L46.88 34.92C46.88 34.6 46.23 32.98 46.23 32.98C52.37 33.63 55.93 33.95 62.07 33.95C68.21 33.95 68.21 33.95 72.09 33.63L72.09 34.28L72.09 34.26Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 98.3998 1.4064)%22/%3E%3Cpath d=%22M12.94 2.9L19.41 2.9L19.41 11.63C15.85 12.92 13.27 15.83 12.3 19.71L15.86 19.71C16.51 17.77 17.8 16.48 19.42 15.51L19.42 22.3L12.95 22.3C7.45 22.3 3.57 18.1 3.57 12.6C3.57 7.1 7.77 2.9 12.95 2.9L12.94 2.9Z M34.93 2.9L34.93 14.86C32.67 12.27 29.11 10.66 24.91 10.66C20.71 10.66 23.29 10.66 22.65 10.66L22.65 2.9L34.93 2.9Z M12.94 25.21L22.96 25.21L22.96 13.9L25.22 13.9C30.72 13.9 35.24 18.1 35.24 23.92C35.24 29.74 31.04 33.94 25.22 33.94C19.4 33.94 17.46 32 16.17 28.12L12.61 28.12C13.9 33.62 19.08 37.17 25.22 37.17C31.36 37.17 38.47 31.35 38.47 23.92C38.47 16.49 38.47 23.92 38.47 23.6L38.47 0L12.93 0C5.49 0 0 5.5 0 12.93C0 20.36 5.5 25.86 12.93 25.86L12.93 25.21L12.94 25.21Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 0 11.3249)%22/%3E%3Cpath d=%22M61.1 64.99L23.28 64.99C19.08 64.99 16.81 64.67 12.61 64.67C8.41 64.67 4.85 64.67 0 64.99L0 64.34C1.94 63.69 2.91 62.72 4.2 61.11C5.82 59.17 5.82 52.06 5.82 51.09L5.82 7.77C5.82 6.8 5.17 4.86 3.88 3.24C2.91 1.95 1.94 0.98 1.62 0.65L1.62 0L55.28 0L58.84 10.99L57.87 10.99L56.9 10.02C53.02 6.14 51.08 5.82 47.2 4.2C42.35 2.26 27.8 2.26 15.52 2.26L13.9 2.26L13.9 29.42L34.27 29.42C38.47 29.42 42.03 29.42 44.94 27.48C46.88 26.19 48.17 24.57 49.14 22.31L50.11 22.31C50.11 25.22 49.79 27.48 49.79 30.39C49.79 33.3 49.79 35.24 50.11 38.15L49.14 38.15C47.85 36.21 46.88 34.59 43.97 32.98C41.71 31.69 39.44 31.36 34.27 31.36L13.9 31.36L14.55 53.99C14.87 63.04 19.08 62.4 27.48 62.4C48.17 62.72 58.52 58.2 63.69 51.09L64.66 51.09L60.46 64.99L61.11 64.99L61.1 64.99Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 121.3971 1.8409)%22/%3E%3Cpath d=%22M42.02 53.68C42.02 53.68 41.7 53.36 41.7 53.03L41.7 53.68L15.84 7.77C15.19 6.8 14.87 4.86 15.84 3.24C16.49 1.95 18.1 0.65 18.43 0.65L18.43 0L0 0L0 0.65C0.65 0.65 2.26 2.27 3.56 3.24C5.18 4.86 6.47 6.47 7.12 7.77L32.01 54L37.18 65.64L38.15 65.64L43.32 55.29C43 54.64 42.35 54.32 42.03 53.67L42.02 53.68Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 142.5535 1.9278)%22/%3E%3Cpath d=%22M7.76 0L0 0L0 0.65C2.59 1.62 3.23 2.59 4.2 4.53C4.52 5.5 4.52 7.12 4.2 8.73L4.2 15.52C5.17 14.23 6.14 12.93 7.11 11.32C8.4 9.06 10.34 6.15 11.96 4.53C13.25 2.91 15.52 0.97 15.84 0.65L15.84 0L7.43 0L7.75 0L7.76 0Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 158.0869 1.9305)%22/%3E%3Cpath d=%22M19.39 5.5C17.77 3.56 16.8 2.27 15.19 0C12.93 0 11.31 0.32 9.05 0.32C6.79 0.32 4.2 0.32 1.29 0L1.29 0.65C1.61 0.65 3.23 2.27 4.2 3.24C4.85 3.89 6.79 6.47 6.79 8.41L6.79 50.11C6.79 52.05 6.14 58.84 4.2 60.78C2.91 62.07 1.94 63.04 0 64.01L0 64.66C3.56 64.66 5.5 64.34 9.05 64.34C12.6 64.34 13.9 64.34 16.81 64.66L16.81 64.01C14.55 63.36 13.25 62.72 11.96 60.78C11.31 60.13 9.7 54.96 9.7 50.11L9.05 6.47C9.05 5.82 31.68 31.04 45.9 46.56C52.69 54 56.24 58.52 63.03 66.28L64.32 66.28L64.32 53.03L61.73 50.12C61.73 51.09 21.64 8.09 19.38 5.18L19.38 5.5L19.39 5.5Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 75.845 1.8436)%22/%3E%3Cpath d=%22M36.85 1.61C17.45 1.61 10.02 17.77 10.02 34.26C10.02 50.75 17.46 67.23 36.85 66.91C56.57 66.59 62.39 51.39 63.04 35.55C63.69 18.09 55.28 1.93 36.85 1.61Z M37.18 68.53C17.46 68.85 0 53.66 0 33.94C0 14.22 16.16 0 37.18 0C58.2 0 73.39 15.19 73.06 34.59C73.06 53.66 57.54 68.21 37.18 68.53Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 52.0549 1.4064)%22/%3E%3Cpath d=%22M34.91 12.93C34.91 18.43 30.71 22.63 25.53 22.63L19.06 22.63L19.06 15.84C20.68 16.81 21.97 18.43 22.62 20.04L26.18 20.04C25.21 16.48 22.62 13.57 19.07 11.96L19.07 3.23L25.54 3.23C31.04 3.23 34.92 7.43 34.92 12.93L34.91 12.93Z M15.51 3.23L15.51 10.99L13.25 10.99C9.05 10.99 5.81 12.61 3.23 15.19L3.23 3.23L15.51 3.23Z M38.47 12.93C38.47 5.49 32.97 0 25.54 0L0 0L0 23.92C0 31.36 5.82 37.17 13.25 37.17C20.68 37.17 24.56 33.61 25.86 28.12L22.3 28.12C21.01 31.68 17.45 33.94 13.25 33.94C9.05 33.94 3.23 29.74 3.23 23.92C3.23 18.1 7.43 13.9 13.25 13.9C19.07 13.9 14.87 13.9 15.51 13.9L15.51 25.21L25.53 25.21C32.97 25.21 38.46 19.71 38.46 12.28L38.46 12.93L38.47 12.93Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 11.3276 11.2353)%22/%3E%3Cpath d=%22M58.83 65.31L23.59 65.31C19.39 65.31 16.8 64.99 12.28 64.99C7.76 64.99 4.84 64.99 0 65.31L0 64.66C2.26 64.01 3.56 63.04 4.85 61.1C5.82 59.81 6.14 55.28 6.14 54.31L6.14 10.35C6.14 9.38 6.14 6.15 4.85 4.21C3.88 2.59 2.26 0.98 1.94 0.65L1.94 0C5.5 0.32 7.44 0.65 10.99 0.65C13.9 0.65 15.84 0.65 18.75 0L18.75 0.65C18.43 0.65 17.46 1.3 16.16 3.24C14.54 5.5 13.9 6.8 13.9 10.03L14.87 54C14.87 60.47 17.46 62.41 27.8 62.73C39.76 62.73 54.96 60.79 61.42 51.74L62.07 51.74L58.19 64.67L58.84 65.32L58.83 65.31Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 31.7808 1.754)%22/%3E%3Cpath d=%22M10.02 64.35C6.14 64.35 3.88 64.35 0 64.67L0 64.02C1.94 63.05 2.91 62.08 3.88 60.46C5.17 58.2 5.17 54.64 5.17 53.67L5.17 7.77C5.49 6.8 5.17 4.86 4.2 3.24C3.55 2.27 2.26 0.65 1.94 0.65L1.94 0C4.85 0.32 6.47 0.65 9.38 0.65C12.29 0.65 13.91 0.65 16.49 0L16.49 0.65C16.17 0.65 14.87 2.27 14.23 3.24C13.26 4.86 13.26 7.12 13.26 7.77L13.26 54C13.91 56.59 15.2 60.14 15.52 60.79C16.49 62.08 17.46 63.05 18.75 64.02L18.75 64.67C15.19 64.67 13.25 64.35 9.7 64.35L10.02 64.35Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 166.5147 1.9278)%22/%3E%3Cpath d=%22M3.56 24.24C3.56 18.74 7.76 14.54 12.94 14.54L19.41 14.54L19.41 21.33C17.79 20.36 16.5 18.74 15.85 17.13L12.29 17.13C13.26 20.69 15.85 23.6 19.4 25.21L19.4 33.94L12.93 33.94C7.43 33.94 3.55 29.74 3.55 24.24L3.56 24.24Z M22.96 33.94L22.96 26.18L25.22 26.18C29.42 26.18 32.66 24.56 35.24 21.98L35.24 33.94L22.96 33.94Z M0 24.24C0 31.68 5.5 37.17 12.93 37.17L38.47 37.17L38.47 13.25C38.47 5.81 32.65 0 25.22 0C17.79 0 13.91 3.56 12.61 9.05L16.17 9.05C17.46 5.49 21.02 3.23 25.22 3.23C29.42 3.23 35.24 7.43 35.24 13.25C35.24 19.07 31.04 23.27 25.22 23.27C19.4 23.27 23.6 23.27 22.96 23.27L22.96 11.96L12.94 11.96C5.5 11.96 0.01 17.46 0.01 24.89L0.01 24.24L0 24.24Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 0.0027 0.0896)%22/%3E%3Cpath d=%22M7.76 0L0 0L0 0.65C2.59 1.62 3.23 2.59 4.2 4.53C4.52 5.5 4.52 7.12 4.2 8.73L4.2 15.52C5.17 14.23 6.14 12.93 7.11 11.32C8.4 9.06 10.34 6.15 11.96 4.53C13.25 2.91 15.52 0.97 15.84 0.65L15.84 0L7.43 0L7.75 0L7.76 0Z%22 fill=%22%23000%22 transform=%22matrix(0.2715 0 0 0.2715 91.8155 1.9305)%22/%3E%3C/svg%3E");
}
.logo--stacked {
  width: 472px; aspect-ratio: 472 / 218;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 472 218%22 fill=%22none%22%3E%3Cpath d=%22M0 0L5.88 0L18.62 21.07L31.36 0L37.12 0L37.12 34.79L32.59 34.79L32.59 6.61L19.97 27.56L17.4 27.56L4.78 6.61L4.78 34.79L0.13 34.79L0.13 0L0 0Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 341.3211 185.0773)%22/%3E%3Cpath d=%22M0 0.12L22.3 0.12L22.3 4.41L4.66 4.41L4.66 15.18L20.7 15.18L20.7 19.47L4.66 19.47L4.66 30.5L22.54 30.5L22.54 34.78L0 34.78L0 0L0 0.12Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 313.6828 185.0133)%22/%3E%3Cpath d=%22M31.85 42.63L23.89 42.63L23.89 31.85C28.3 30.01 31.48 26.58 32.71 21.93L28.18 21.93C27.45 24.26 25.85 25.97 23.89 27.2L23.89 18.63L31.85 18.63C38.59 18.63 43.73 23.77 43.73 30.63C43.73 37.49 38.59 42.63 31.85 42.63Z M4.29 42.63L4.29 27.81C7.35 31.12 11.76 33.2 16.78 33.2C21.8 33.2 18.62 33.2 19.6 32.96L19.6 42.64L4.29 42.64L4.29 42.63Z M31.85 14.7L19.48 14.7L19.48 28.79C18.62 28.91 17.64 29.03 16.66 29.03C9.68 29.03 4.29 23.64 4.29 16.54C4.29 9.44 9.56 4.05 16.66 4.05C23.76 4.05 26.34 6.62 27.93 11.15L32.46 11.15C30.75 4.29 24.5 0 16.66 0C8.82 0 0 7.1 0 16.54C0 25.98 0 16.91 0 17.03L0 46.55L31.85 46.55C41.16 46.55 48.02 39.69 48.02 30.63C48.02 21.57 41.04 14.71 31.85 14.71L31.85 14.7Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 239.2803 13.8507)%22/%3E%3Cpath d=%22M73.5 81.46L29.4 81.46C24.01 81.46 20.83 81.09 15.31 81.09C9.79 81.09 6 81.09 0 81.58L0 80.6C2.69 79.99 4.41 78.64 6 76.31C7.1 74.84 7.59 69.08 7.59 67.98L7.59 13.23C7.59 12.01 7.59 7.96 6 5.39C4.9 3.43 2.82 1.35 2.33 0.98L2.33 0C6.74 0.49 9.31 0.61 13.84 0.61C17.51 0.61 19.84 0.61 23.76 0L23.76 0.98C23.27 1.35 22.29 1.84 20.45 4.41C18.49 7.23 17.63 8.82 17.63 12.86L18.98 67.86C19.22 75.94 22.41 78.52 35.27 78.76C50.34 79.13 69.32 76.43 77.41 65.04L78.39 65.04L73.74 81.21L73.5 81.45L73.5 81.46Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 11.945 101.2587)%22/%3E%3Cpath d=%22M4.65 4.41L4.65 17.03L14.82 17.03C18.37 17.03 21.07 14.34 21.07 10.78C21.07 7.22 18.38 4.53 14.82 4.53L4.65 4.53L4.65 4.41Z M0 0L14.94 0C21.19 0 25.84 4.53 25.84 10.66C25.84 16.79 21.92 20.21 16.65 20.95L26.82 34.91L21.06 34.91L11.14 21.07L4.65 21.07L4.65 34.91L0 34.91L0 0Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 164.4875 185.0773)%22/%3E%3Cpath d=%22M16.17 3.92L24.13 3.92L24.13 14.7C19.72 16.54 16.54 19.97 15.31 24.62L19.84 24.62C20.57 22.29 22.17 20.58 24.13 19.35L24.13 27.92L16.17 27.92C9.43 27.92 4.29 22.78 4.29 15.92C4.29 9.06 9.43 3.92 16.17 3.92Z M43.73 3.92L43.73 18.74C40.67 15.43 36.26 13.35 31.24 13.35C26.22 13.35 29.4 13.35 28.42 13.59L28.42 3.91L43.73 3.91L43.73 3.92Z M16.17 31.85L28.54 31.85L28.54 17.76C29.4 17.64 30.38 17.52 31.36 17.52C38.34 17.52 43.73 22.91 43.73 30.01C43.73 37.11 38.46 42.5 31.36 42.5C24.26 42.5 21.68 39.93 20.09 35.4L15.56 35.4C17.27 42.26 23.52 46.55 31.36 46.55C39.2 46.55 48.02 39.45 48.02 30.01C48.02 20.57 48.02 29.64 48.02 29.52L48.02 0L16.17 0C6.86 0 0 6.86 0 15.92C0 24.98 6.98 31.84 16.17 31.84L16.17 31.85Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 211.3801 41.2213)%22/%3E%3Cpath d=%22M4.65 4.42L4.65 17.65L15.06 17.65C18.73 17.65 21.55 14.83 21.55 11.04C21.55 7.25 18.73 4.43 15.06 4.43L4.65 4.43L4.65 4.42Z M0 0.01L15.19 0.01C21.56 0.01 26.34 4.66 26.34 10.91C26.34 17.16 21.56 21.81 15.19 21.81L4.66 21.81L4.66 34.79L0.01 34.79L0.01 0L0 0.01Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 193.7619 185.072)%22/%3E%3Cpath d=%22M0 0.12L22.29 0.12L22.29 4.41L4.66 4.41L4.66 15.18L20.7 15.18L20.7 19.47L4.66 19.47L4.66 30.5L22.54 30.5L22.54 34.78L0 34.78L0 0L0 0.12Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 222.9722 185.0133)%22/%3E%3Cpath d=%22M4.65 4.42L4.65 30.51L13.35 30.51C20.7 30.51 26.33 24.88 26.33 17.4C26.33 9.92 20.7 4.29 13.35 4.29L4.65 4.29L4.65 4.41L4.65 4.42Z M0 0.01L13.47 0.01C23.51 0.01 31.11 7.48 31.11 17.4C31.11 27.32 23.52 34.79 13.47 34.79L0 34.79L0 0L0 0.01Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 262.5983 185.072)%22/%3E%3Cpath d=%22M46.051 1.83C21.801 1.59 12.491 22.04 12.491 42.37C12.491 62.7 21.921 83.65 46.181 83.04C70.801 82.55 77.911 63.56 78.641 43.97C79.501 21.92 68.721 1.83 46.061 1.83L46.051 1.83Z M46.421 85.37C21.921 85.86 -0.129 66.87 0.001 42.38C0.241 18 19.971 0.12 46.181 0C72.031 0 91.381 18.99 91.011 43.24C90.771 67 71.661 85.13 46.421 85.38L46.421 85.37Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 61.8583 100.3467)%22/%3E%3Cpath d=%22M23.76 22.17L16.9 5.14L10.04 22.17L23.76 22.17Z M14.21 0L19.72 0L33.93 34.79L28.79 34.79L25.36 26.34L8.33 26.34L4.9 34.79L0 34.79L14.21 0Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 131.7376 185.0773)%22/%3E%3Cpath d=%22M43.61 15.92C43.61 22.78 38.47 27.92 31.73 27.92L23.77 27.92L23.77 19.35C25.73 20.57 27.2 22.41 28.06 24.62L32.59 24.62C31.49 19.97 28.18 16.54 23.77 14.7L23.77 3.92L31.73 3.92C38.47 3.92 43.61 9.06 43.61 15.92Z M19.48 3.91L19.48 13.59C18.62 13.47 17.64 13.35 16.66 13.35C11.64 13.35 7.23 15.43 4.17 18.74L4.17 3.92L19.48 3.92L19.48 3.91Z M48.02 15.92C48.02 6.86 41.04 0 31.85 0L0 0L0 30.01C0 39.44 7.23 46.55 16.66 46.55C26.09 46.55 30.75 42.26 32.46 35.4L27.93 35.4C26.34 39.93 21.93 42.5 16.66 42.5C11.39 42.5 4.29 37.11 4.29 30.01C4.29 22.91 9.56 17.52 16.66 17.52C23.76 17.52 18.5 17.52 19.48 17.76L19.48 31.85L31.85 31.85C41.16 31.85 48.02 24.99 48.02 15.93L48.02 15.92Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 239.3445 41.2267)%22/%3E%3Cpath d=%22M0 18.01C0 7.72 7.84 0 18.25 0C28.66 0 33.56 5.27 35.4 12.74L30.5 12.74C28.79 7.84 24.01 4.41 18.13 4.41C12.25 4.41 4.66 10.29 4.66 18.01C4.66 25.73 10.42 31.61 18.13 31.61C25.84 31.61 28.79 28.18 30.5 23.28L35.4 23.28C33.56 30.75 26.7 36.02 18.25 36.02C9.8 36.02 0 28.3 0 18.01Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 100.2335 184.8107)%22/%3E%3Cpath d=%22M0 0L4.65 0L4.65 34.79L0 34.79L0 0%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 294.6905 185.0773)%22/%3E%3Cpath d=%22M4.41 30.63C4.41 23.77 9.55 18.63 16.29 18.63L24.25 18.63L24.25 27.2C22.29 25.98 20.82 24.14 19.96 21.93L15.43 21.93C16.53 26.58 19.84 30.01 24.25 31.85L24.25 42.63L16.29 42.63C9.55 42.63 4.41 37.49 4.41 30.63Z M28.54 42.63L28.54 32.95C29.4 33.07 30.38 33.19 31.36 33.19C36.38 33.19 40.79 31.11 43.85 27.8L43.85 42.62L28.54 42.62L28.54 42.63Z M0 30.63C0 39.69 6.98 46.55 16.17 46.55L48.02 46.55L48.02 16.54C48.02 7.11 40.79 0 31.36 0C21.93 0 17.27 4.29 15.56 11.15L20.09 11.15C21.68 6.62 26.09 4.05 31.36 4.05C36.63 4.05 43.73 9.44 43.73 16.54C43.73 23.64 38.46 29.03 31.36 29.03C24.26 29.03 29.52 29.03 28.54 28.79L28.54 14.7L16.17 14.7C6.86 14.7 0 21.56 0 30.62L0 30.63Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 211.4442 13.7173)%22/%3E%3Cpath d=%22M90.16 42.76C88.08 43 86.61 43.62 85.14 45.09C83.06 47.17 82.69 49.5 82.81 52.56L83.42 73.51L82.07 74.49C73.01 80.74 66.51 84.53 50.71 85.39C26.95 86.61 -0.12 71.79 0 42.89C0 19.62 18.13 0.75 46.91 0.02C58.18 -0.35 74.59 4.55 80.11 8.35L82.19 9.82L78.76 21.58L77.78 21.21L76.8 19.5C73.62 13.38 64.18 1.74 45.93 2.23C23.02 2.72 12.61 19.75 12.37 41.55C12 64.58 24.99 83.81 50.1 82.71C66.27 81.85 73.13 78.18 72.03 59.93C71.54 52.46 73.38 45.72 61.25 43.52L58.43 43.03L57.7 41.32C65.29 42.05 69.95 42.42 77.67 42.42C85.39 42.42 85.39 42.42 90.29 41.93L90.05 42.91L90.17 42.79L90.16 42.76Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 175.7479 100.3415)%22/%3E%3Cpath d=%22M75.95 81.33L28.91 81.33C23.77 81.33 20.83 80.96 15.68 80.96C10.53 80.96 6 80.96 0 81.33L0 80.47C2.33 79.61 3.67 78.51 5.27 76.55C7.35 74.22 7.23 65.28 7.23 64.18L7.23 9.79C7.23 8.57 6.25 6.12 5.03 4.16C3.93 2.32 2.58 1.34 2.21 0.98L2.21 0L69.21 0L73.74 13.96L72.39 13.72L71.17 12.5C66.39 7.72 63.94 7.23 58.92 5.03C52.92 2.58 34.67 2.58 19.23 2.58L17.27 2.58L17.27 36.63L42.87 36.63C48.01 36.63 52.55 36.63 56.1 34.3C58.67 32.46 60.14 30.75 61.49 27.81L62.71 27.81C62.34 31.61 62.34 34.06 62.34 37.85C62.34 41.64 62.34 43.85 62.71 47.77L61.49 47.77C59.9 45.2 58.67 43.48 54.88 41.52C52.19 40.05 49 39.56 42.75 39.56L17.52 39.56L18.38 67.86C18.75 79.01 24.26 78.15 34.67 78.39C60.52 78.88 73.25 73.25 79.87 64.18L81.09 63.94L75.82 81.33L75.94 81.33L75.95 81.33Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 232.5967 101.328)%22/%3E%3Cpath d=%22M52.92 67.62C52.68 67.38 52.55 67.01 52.31 66.76L51.94 67.37L20.09 10.17C19.48 8.95 18.99 6.5 19.85 4.41C20.46 2.82 22.54 1.23 23.03 0.98L23.03 0C19.48 0.24 17.4 0.24 13.84 0.37C8.57 0.37 5.39 0.37 0 0L0 0.98C0.61 1.22 2.94 2.94 4.41 4.41C6.37 6.37 8.08 8.45 8.94 10.17L39.93 67.99L46.54 82.44L47.89 82.44L54.38 69.7C53.89 68.97 53.4 68.35 52.79 67.62L52.91 67.62L52.92 67.62Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 284.2106 101.3227)%22/%3E%3Cpath d=%22M9.55 0.37C5.88 0.37 0 0 0 0L0 0.98C3.31 2.2 4.04 3.18 5.14 5.63C5.63 6.73 5.63 8.69 5.38 10.9C5.5 19.23 5.38 16.66 5.5 19.23C6.85 17.64 8.07 15.92 9.17 14.09C10.76 11.4 13.33 7.6 15.05 5.64C16.76 3.68 19.46 1.23 20.07 0.99L20.07 0.01C20.07 0.01 13.7 0.38 9.66 0.38L9.54 0.38L9.55 0.37Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 322.6603 101.3227)%22/%3E%3Cpath d=%22M12.37 81.1C7.59 81.1 4.78 81.1 0 81.47L0 80.61C2.2 79.51 3.55 78.41 4.78 76.32C6.62 73.5 6.62 69.09 6.62 67.99L6.99 10.17C6.99 8.95 6.38 6.5 5.15 4.41C4.29 3.06 2.7 1.35 2.33 0.98L2.33 0C6 0.49 8.21 0.61 11.76 0.61C15.31 0.61 17.27 0.37 20.58 0L20.58 0.98C20.21 1.35 18.62 2.94 17.76 4.41C16.66 6.37 16.41 9.31 16.41 10.17L16.9 67.99C16.9 71.42 18.61 75.71 19.23 76.56C20.45 78.15 21.56 79.38 23.39 80.48L23.39 81.34C19.1 80.97 16.53 80.97 12.24 80.97L12.36 81.09L12.37 81.1Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 343.3529 101.2533)%22/%3E%3Cpath d=%22M84.39 15.93C82.43 12.01 71.28 3.31 58.79 3.44C54.5 3.44 48.87 3.81 48.87 7.97L48.87 68.11C48.87 72.4 50.09 74.97 51.69 76.81C53.65 78.77 55.12 79.75 57.81 80.61L57.81 81.47C53.03 81.1 49.36 81.1 43.97 81.1C38.58 81.1 35.64 81.1 29.64 81.47L29.64 80.61C32.46 79.88 34.05 78.65 36.01 76.32C37.6 74.36 38.34 71.05 38.34 67.87L38.34 7.48C38.34 4.17 32.95 3.07 28.79 3.19C13.97 3.56 3.68 12.25 1.84 15.68L0 15.68L4.9 0L81.09 0L85.38 15.68L84.16 15.68L84.4 15.92L84.39 15.93Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 363.6606 101.2587)%22/%3E%3Cpath d=%22M46.07 42.38L25.12 16.29C24.75 15.68 19 9.31 21.2 4.65C22.55 1.96 23.89 1.1 24.26 0.98L24.26 0C19.73 0.24 16.79 0.37 12.13 0.37C7.47 0.37 4.66 0.37 0 0L0 0.98C0.49 1.35 4.41 4.65 6.74 6.86C10.54 10.41 14.09 15.31 14.7 16.29L37.12 46.79L37.12 67.98C37.12 69.08 36.88 74.72 35.9 76.31C34.68 78.27 33.21 79.74 31 80.6L31 81.46C35.16 81.09 37.74 81.09 41.9 81.09C46.06 81.09 49.62 81.09 54.52 81.46L54.52 80.6C52.32 79.74 51.09 78.52 49.5 76.68C48.89 75.82 47.66 71.41 47.66 68.23L47.66 44.96Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 417.3544 101.392)%22/%3E%3Cpath d=%22M9.55 0.37C5.88 0.37 0 0 0 0L0 0.98C3.31 2.2 4.04 3.18 5.14 5.63C5.63 6.73 5.63 8.69 5.38 10.9C5.5 19.23 5.38 16.66 5.5 19.23C6.85 17.64 8.07 15.92 9.17 14.09C10.76 11.4 13.33 7.6 15.05 5.64C16.76 3.68 19.46 1.23 20.07 0.99L20.07 0.01C20.07 0.01 13.7 0.38 9.66 0.38L9.54 0.38L9.55 0.37Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 449.4574 101.3227)%22/%3E%3Cpath d=%22M24.25 6.74C22.29 4.17 20.94 2.58 18.98 0C16.16 0.37 14.33 0.37 11.39 0.37C8.45 0.37 5.39 0.37 1.84 0L1.84 0.98C2.33 1.35 4.04 3.06 5.39 4.41C6.25 5.39 8.45 8.33 8.45 11.02L8.45 63.08C8.45 65.41 7.47 73.98 5.27 76.55C3.56 78.39 2.33 79.37 0 80.47L0 81.33C4.41 80.96 6.98 80.96 11.51 80.96C16.04 80.96 17.51 80.96 21.31 81.33L21.31 80.47C18.62 79.49 16.9 78.63 15.31 76.55C14.7 75.69 12.49 69.32 12.37 63.2L11.39 8.69C11.39 7.71 39.56 39.31 57.45 58.67C65.9 67.86 70.56 73.61 78.76 83.17L80.35 83.17L80.35 66.51L76.92 62.96C76.92 64.18 26.82 10.41 24.25 6.98L24.25 6.74Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 120.3433 101.3227)%22/%3E%3Cpath d=%22M9.55 0.37C5.88 0.37 0 0 0 0L0 0.98C3.31 2.2 4.04 3.18 5.14 5.63C5.63 6.73 5.63 8.69 5.38 10.9C5.5 19.23 5.38 16.66 5.5 19.23C6.85 17.64 8.07 15.92 9.17 14.09C10.76 11.4 13.33 7.6 15.05 5.64C16.76 3.68 19.46 1.23 20.07 0.99L20.07 0.01C20.07 0.01 13.7 0.38 9.66 0.38L9.54 0.38L9.55 0.37Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 159.6432 101.3227)%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 472 218%22 fill=%22none%22%3E%3Cpath d=%22M0 0L5.88 0L18.62 21.07L31.36 0L37.12 0L37.12 34.79L32.59 34.79L32.59 6.61L19.97 27.56L17.4 27.56L4.78 6.61L4.78 34.79L0.13 34.79L0.13 0L0 0Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 341.3211 185.0773)%22/%3E%3Cpath d=%22M0 0.12L22.3 0.12L22.3 4.41L4.66 4.41L4.66 15.18L20.7 15.18L20.7 19.47L4.66 19.47L4.66 30.5L22.54 30.5L22.54 34.78L0 34.78L0 0L0 0.12Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 313.6828 185.0133)%22/%3E%3Cpath d=%22M31.85 42.63L23.89 42.63L23.89 31.85C28.3 30.01 31.48 26.58 32.71 21.93L28.18 21.93C27.45 24.26 25.85 25.97 23.89 27.2L23.89 18.63L31.85 18.63C38.59 18.63 43.73 23.77 43.73 30.63C43.73 37.49 38.59 42.63 31.85 42.63Z M4.29 42.63L4.29 27.81C7.35 31.12 11.76 33.2 16.78 33.2C21.8 33.2 18.62 33.2 19.6 32.96L19.6 42.64L4.29 42.64L4.29 42.63Z M31.85 14.7L19.48 14.7L19.48 28.79C18.62 28.91 17.64 29.03 16.66 29.03C9.68 29.03 4.29 23.64 4.29 16.54C4.29 9.44 9.56 4.05 16.66 4.05C23.76 4.05 26.34 6.62 27.93 11.15L32.46 11.15C30.75 4.29 24.5 0 16.66 0C8.82 0 0 7.1 0 16.54C0 25.98 0 16.91 0 17.03L0 46.55L31.85 46.55C41.16 46.55 48.02 39.69 48.02 30.63C48.02 21.57 41.04 14.71 31.85 14.71L31.85 14.7Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 239.2803 13.8507)%22/%3E%3Cpath d=%22M73.5 81.46L29.4 81.46C24.01 81.46 20.83 81.09 15.31 81.09C9.79 81.09 6 81.09 0 81.58L0 80.6C2.69 79.99 4.41 78.64 6 76.31C7.1 74.84 7.59 69.08 7.59 67.98L7.59 13.23C7.59 12.01 7.59 7.96 6 5.39C4.9 3.43 2.82 1.35 2.33 0.98L2.33 0C6.74 0.49 9.31 0.61 13.84 0.61C17.51 0.61 19.84 0.61 23.76 0L23.76 0.98C23.27 1.35 22.29 1.84 20.45 4.41C18.49 7.23 17.63 8.82 17.63 12.86L18.98 67.86C19.22 75.94 22.41 78.52 35.27 78.76C50.34 79.13 69.32 76.43 77.41 65.04L78.39 65.04L73.74 81.21L73.5 81.45L73.5 81.46Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 11.945 101.2587)%22/%3E%3Cpath d=%22M4.65 4.41L4.65 17.03L14.82 17.03C18.37 17.03 21.07 14.34 21.07 10.78C21.07 7.22 18.38 4.53 14.82 4.53L4.65 4.53L4.65 4.41Z M0 0L14.94 0C21.19 0 25.84 4.53 25.84 10.66C25.84 16.79 21.92 20.21 16.65 20.95L26.82 34.91L21.06 34.91L11.14 21.07L4.65 21.07L4.65 34.91L0 34.91L0 0Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 164.4875 185.0773)%22/%3E%3Cpath d=%22M16.17 3.92L24.13 3.92L24.13 14.7C19.72 16.54 16.54 19.97 15.31 24.62L19.84 24.62C20.57 22.29 22.17 20.58 24.13 19.35L24.13 27.92L16.17 27.92C9.43 27.92 4.29 22.78 4.29 15.92C4.29 9.06 9.43 3.92 16.17 3.92Z M43.73 3.92L43.73 18.74C40.67 15.43 36.26 13.35 31.24 13.35C26.22 13.35 29.4 13.35 28.42 13.59L28.42 3.91L43.73 3.91L43.73 3.92Z M16.17 31.85L28.54 31.85L28.54 17.76C29.4 17.64 30.38 17.52 31.36 17.52C38.34 17.52 43.73 22.91 43.73 30.01C43.73 37.11 38.46 42.5 31.36 42.5C24.26 42.5 21.68 39.93 20.09 35.4L15.56 35.4C17.27 42.26 23.52 46.55 31.36 46.55C39.2 46.55 48.02 39.45 48.02 30.01C48.02 20.57 48.02 29.64 48.02 29.52L48.02 0L16.17 0C6.86 0 0 6.86 0 15.92C0 24.98 6.98 31.84 16.17 31.84L16.17 31.85Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 211.3801 41.2213)%22/%3E%3Cpath d=%22M4.65 4.42L4.65 17.65L15.06 17.65C18.73 17.65 21.55 14.83 21.55 11.04C21.55 7.25 18.73 4.43 15.06 4.43L4.65 4.43L4.65 4.42Z M0 0.01L15.19 0.01C21.56 0.01 26.34 4.66 26.34 10.91C26.34 17.16 21.56 21.81 15.19 21.81L4.66 21.81L4.66 34.79L0.01 34.79L0.01 0L0 0.01Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 193.7619 185.072)%22/%3E%3Cpath d=%22M0 0.12L22.29 0.12L22.29 4.41L4.66 4.41L4.66 15.18L20.7 15.18L20.7 19.47L4.66 19.47L4.66 30.5L22.54 30.5L22.54 34.78L0 34.78L0 0L0 0.12Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 222.9722 185.0133)%22/%3E%3Cpath d=%22M4.65 4.42L4.65 30.51L13.35 30.51C20.7 30.51 26.33 24.88 26.33 17.4C26.33 9.92 20.7 4.29 13.35 4.29L4.65 4.29L4.65 4.41L4.65 4.42Z M0 0.01L13.47 0.01C23.51 0.01 31.11 7.48 31.11 17.4C31.11 27.32 23.52 34.79 13.47 34.79L0 34.79L0 0L0 0.01Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 262.5983 185.072)%22/%3E%3Cpath d=%22M46.051 1.83C21.801 1.59 12.491 22.04 12.491 42.37C12.491 62.7 21.921 83.65 46.181 83.04C70.801 82.55 77.911 63.56 78.641 43.97C79.501 21.92 68.721 1.83 46.061 1.83L46.051 1.83Z M46.421 85.37C21.921 85.86 -0.129 66.87 0.001 42.38C0.241 18 19.971 0.12 46.181 0C72.031 0 91.381 18.99 91.011 43.24C90.771 67 71.661 85.13 46.421 85.38L46.421 85.37Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 61.8583 100.3467)%22/%3E%3Cpath d=%22M23.76 22.17L16.9 5.14L10.04 22.17L23.76 22.17Z M14.21 0L19.72 0L33.93 34.79L28.79 34.79L25.36 26.34L8.33 26.34L4.9 34.79L0 34.79L14.21 0Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 131.7376 185.0773)%22/%3E%3Cpath d=%22M43.61 15.92C43.61 22.78 38.47 27.92 31.73 27.92L23.77 27.92L23.77 19.35C25.73 20.57 27.2 22.41 28.06 24.62L32.59 24.62C31.49 19.97 28.18 16.54 23.77 14.7L23.77 3.92L31.73 3.92C38.47 3.92 43.61 9.06 43.61 15.92Z M19.48 3.91L19.48 13.59C18.62 13.47 17.64 13.35 16.66 13.35C11.64 13.35 7.23 15.43 4.17 18.74L4.17 3.92L19.48 3.92L19.48 3.91Z M48.02 15.92C48.02 6.86 41.04 0 31.85 0L0 0L0 30.01C0 39.44 7.23 46.55 16.66 46.55C26.09 46.55 30.75 42.26 32.46 35.4L27.93 35.4C26.34 39.93 21.93 42.5 16.66 42.5C11.39 42.5 4.29 37.11 4.29 30.01C4.29 22.91 9.56 17.52 16.66 17.52C23.76 17.52 18.5 17.52 19.48 17.76L19.48 31.85L31.85 31.85C41.16 31.85 48.02 24.99 48.02 15.93L48.02 15.92Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 239.3445 41.2267)%22/%3E%3Cpath d=%22M0 18.01C0 7.72 7.84 0 18.25 0C28.66 0 33.56 5.27 35.4 12.74L30.5 12.74C28.79 7.84 24.01 4.41 18.13 4.41C12.25 4.41 4.66 10.29 4.66 18.01C4.66 25.73 10.42 31.61 18.13 31.61C25.84 31.61 28.79 28.18 30.5 23.28L35.4 23.28C33.56 30.75 26.7 36.02 18.25 36.02C9.8 36.02 0 28.3 0 18.01Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 100.2335 184.8107)%22/%3E%3Cpath d=%22M0 0L4.65 0L4.65 34.79L0 34.79L0 0%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 294.6905 185.0773)%22/%3E%3Cpath d=%22M4.41 30.63C4.41 23.77 9.55 18.63 16.29 18.63L24.25 18.63L24.25 27.2C22.29 25.98 20.82 24.14 19.96 21.93L15.43 21.93C16.53 26.58 19.84 30.01 24.25 31.85L24.25 42.63L16.29 42.63C9.55 42.63 4.41 37.49 4.41 30.63Z M28.54 42.63L28.54 32.95C29.4 33.07 30.38 33.19 31.36 33.19C36.38 33.19 40.79 31.11 43.85 27.8L43.85 42.62L28.54 42.62L28.54 42.63Z M0 30.63C0 39.69 6.98 46.55 16.17 46.55L48.02 46.55L48.02 16.54C48.02 7.11 40.79 0 31.36 0C21.93 0 17.27 4.29 15.56 11.15L20.09 11.15C21.68 6.62 26.09 4.05 31.36 4.05C36.63 4.05 43.73 9.44 43.73 16.54C43.73 23.64 38.46 29.03 31.36 29.03C24.26 29.03 29.52 29.03 28.54 28.79L28.54 14.7L16.17 14.7C6.86 14.7 0 21.56 0 30.62L0 30.63Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 211.4442 13.7173)%22/%3E%3Cpath d=%22M90.16 42.76C88.08 43 86.61 43.62 85.14 45.09C83.06 47.17 82.69 49.5 82.81 52.56L83.42 73.51L82.07 74.49C73.01 80.74 66.51 84.53 50.71 85.39C26.95 86.61 -0.12 71.79 0 42.89C0 19.62 18.13 0.75 46.91 0.02C58.18 -0.35 74.59 4.55 80.11 8.35L82.19 9.82L78.76 21.58L77.78 21.21L76.8 19.5C73.62 13.38 64.18 1.74 45.93 2.23C23.02 2.72 12.61 19.75 12.37 41.55C12 64.58 24.99 83.81 50.1 82.71C66.27 81.85 73.13 78.18 72.03 59.93C71.54 52.46 73.38 45.72 61.25 43.52L58.43 43.03L57.7 41.32C65.29 42.05 69.95 42.42 77.67 42.42C85.39 42.42 85.39 42.42 90.29 41.93L90.05 42.91L90.17 42.79L90.16 42.76Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 175.7479 100.3415)%22/%3E%3Cpath d=%22M75.95 81.33L28.91 81.33C23.77 81.33 20.83 80.96 15.68 80.96C10.53 80.96 6 80.96 0 81.33L0 80.47C2.33 79.61 3.67 78.51 5.27 76.55C7.35 74.22 7.23 65.28 7.23 64.18L7.23 9.79C7.23 8.57 6.25 6.12 5.03 4.16C3.93 2.32 2.58 1.34 2.21 0.98L2.21 0L69.21 0L73.74 13.96L72.39 13.72L71.17 12.5C66.39 7.72 63.94 7.23 58.92 5.03C52.92 2.58 34.67 2.58 19.23 2.58L17.27 2.58L17.27 36.63L42.87 36.63C48.01 36.63 52.55 36.63 56.1 34.3C58.67 32.46 60.14 30.75 61.49 27.81L62.71 27.81C62.34 31.61 62.34 34.06 62.34 37.85C62.34 41.64 62.34 43.85 62.71 47.77L61.49 47.77C59.9 45.2 58.67 43.48 54.88 41.52C52.19 40.05 49 39.56 42.75 39.56L17.52 39.56L18.38 67.86C18.75 79.01 24.26 78.15 34.67 78.39C60.52 78.88 73.25 73.25 79.87 64.18L81.09 63.94L75.82 81.33L75.94 81.33L75.95 81.33Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 232.5967 101.328)%22/%3E%3Cpath d=%22M52.92 67.62C52.68 67.38 52.55 67.01 52.31 66.76L51.94 67.37L20.09 10.17C19.48 8.95 18.99 6.5 19.85 4.41C20.46 2.82 22.54 1.23 23.03 0.98L23.03 0C19.48 0.24 17.4 0.24 13.84 0.37C8.57 0.37 5.39 0.37 0 0L0 0.98C0.61 1.22 2.94 2.94 4.41 4.41C6.37 6.37 8.08 8.45 8.94 10.17L39.93 67.99L46.54 82.44L47.89 82.44L54.38 69.7C53.89 68.97 53.4 68.35 52.79 67.62L52.91 67.62L52.92 67.62Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 284.2106 101.3227)%22/%3E%3Cpath d=%22M9.55 0.37C5.88 0.37 0 0 0 0L0 0.98C3.31 2.2 4.04 3.18 5.14 5.63C5.63 6.73 5.63 8.69 5.38 10.9C5.5 19.23 5.38 16.66 5.5 19.23C6.85 17.64 8.07 15.92 9.17 14.09C10.76 11.4 13.33 7.6 15.05 5.64C16.76 3.68 19.46 1.23 20.07 0.99L20.07 0.01C20.07 0.01 13.7 0.38 9.66 0.38L9.54 0.38L9.55 0.37Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 322.6603 101.3227)%22/%3E%3Cpath d=%22M12.37 81.1C7.59 81.1 4.78 81.1 0 81.47L0 80.61C2.2 79.51 3.55 78.41 4.78 76.32C6.62 73.5 6.62 69.09 6.62 67.99L6.99 10.17C6.99 8.95 6.38 6.5 5.15 4.41C4.29 3.06 2.7 1.35 2.33 0.98L2.33 0C6 0.49 8.21 0.61 11.76 0.61C15.31 0.61 17.27 0.37 20.58 0L20.58 0.98C20.21 1.35 18.62 2.94 17.76 4.41C16.66 6.37 16.41 9.31 16.41 10.17L16.9 67.99C16.9 71.42 18.61 75.71 19.23 76.56C20.45 78.15 21.56 79.38 23.39 80.48L23.39 81.34C19.1 80.97 16.53 80.97 12.24 80.97L12.36 81.09L12.37 81.1Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 343.3529 101.2533)%22/%3E%3Cpath d=%22M84.39 15.93C82.43 12.01 71.28 3.31 58.79 3.44C54.5 3.44 48.87 3.81 48.87 7.97L48.87 68.11C48.87 72.4 50.09 74.97 51.69 76.81C53.65 78.77 55.12 79.75 57.81 80.61L57.81 81.47C53.03 81.1 49.36 81.1 43.97 81.1C38.58 81.1 35.64 81.1 29.64 81.47L29.64 80.61C32.46 79.88 34.05 78.65 36.01 76.32C37.6 74.36 38.34 71.05 38.34 67.87L38.34 7.48C38.34 4.17 32.95 3.07 28.79 3.19C13.97 3.56 3.68 12.25 1.84 15.68L0 15.68L4.9 0L81.09 0L85.38 15.68L84.16 15.68L84.4 15.92L84.39 15.93Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 363.6606 101.2587)%22/%3E%3Cpath d=%22M46.07 42.38L25.12 16.29C24.75 15.68 19 9.31 21.2 4.65C22.55 1.96 23.89 1.1 24.26 0.98L24.26 0C19.73 0.24 16.79 0.37 12.13 0.37C7.47 0.37 4.66 0.37 0 0L0 0.98C0.49 1.35 4.41 4.65 6.74 6.86C10.54 10.41 14.09 15.31 14.7 16.29L37.12 46.79L37.12 67.98C37.12 69.08 36.88 74.72 35.9 76.31C34.68 78.27 33.21 79.74 31 80.6L31 81.46C35.16 81.09 37.74 81.09 41.9 81.09C46.06 81.09 49.62 81.09 54.52 81.46L54.52 80.6C52.32 79.74 51.09 78.52 49.5 76.68C48.89 75.82 47.66 71.41 47.66 68.23L47.66 44.96Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 417.3544 101.392)%22/%3E%3Cpath d=%22M9.55 0.37C5.88 0.37 0 0 0 0L0 0.98C3.31 2.2 4.04 3.18 5.14 5.63C5.63 6.73 5.63 8.69 5.38 10.9C5.5 19.23 5.38 16.66 5.5 19.23C6.85 17.64 8.07 15.92 9.17 14.09C10.76 11.4 13.33 7.6 15.05 5.64C16.76 3.68 19.46 1.23 20.07 0.99L20.07 0.01C20.07 0.01 13.7 0.38 9.66 0.38L9.54 0.38L9.55 0.37Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 449.4574 101.3227)%22/%3E%3Cpath d=%22M24.25 6.74C22.29 4.17 20.94 2.58 18.98 0C16.16 0.37 14.33 0.37 11.39 0.37C8.45 0.37 5.39 0.37 1.84 0L1.84 0.98C2.33 1.35 4.04 3.06 5.39 4.41C6.25 5.39 8.45 8.33 8.45 11.02L8.45 63.08C8.45 65.41 7.47 73.98 5.27 76.55C3.56 78.39 2.33 79.37 0 80.47L0 81.33C4.41 80.96 6.98 80.96 11.51 80.96C16.04 80.96 17.51 80.96 21.31 81.33L21.31 80.47C18.62 79.49 16.9 78.63 15.31 76.55C14.7 75.69 12.49 69.32 12.37 63.2L11.39 8.69C11.39 7.71 39.56 39.31 57.45 58.67C65.9 67.86 70.56 73.61 78.76 83.17L80.35 83.17L80.35 66.51L76.92 62.96C76.92 64.18 26.82 10.41 24.25 6.98L24.25 6.74Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 120.3433 101.3227)%22/%3E%3Cpath d=%22M9.55 0.37C5.88 0.37 0 0 0 0L0 0.98C3.31 2.2 4.04 3.18 5.14 5.63C5.63 6.73 5.63 8.69 5.38 10.9C5.5 19.23 5.38 16.66 5.5 19.23C6.85 17.64 8.07 15.92 9.17 14.09C10.76 11.4 13.33 7.6 15.05 5.64C16.76 3.68 19.46 1.23 20.07 0.99L20.07 0.01C20.07 0.01 13.7 0.38 9.66 0.38L9.54 0.38L9.55 0.37Z%22 fill=%22%23000%22 transform=%22matrix(0.5347 0 0 0.5333 159.6432 101.3227)%22/%3E%3C/svg%3E");
}
.site-header__logo { color: var(--black); }
.site-header__actions { display: flex; align-items: center; gap: 48px; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a { font-size: 14px; line-height: 17px; color: var(--black); position: relative; }
.site-nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 1px; background: currentColor; transition: right .3s ease;
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }

/* light-text variant (Figma "Property 1=Light") — used over dark/photo heroes */
.site-header--light .site-header__logo,
.site-header--light .site-nav a { color: var(--white); }
.site-header--light .btn { color: var(--white); }
.site-header--light .btn:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* Pages that open straight into content rather than a hero: the bar keeps its
   own band at the top of the page, and the content below is set clear of it so
   nothing sits under the bar in its resting state. */
.site-header--inline + main { padding-top: var(--header-h); }
/* same, where the page's content sits inside a full-page gradient wrapper
   rather than directly in a <main> (za-vas.html) */
.site-header--inline + .page-bg { padding-top: var(--header-h); }

/* --- Scroll-back header ---------------------------------------------------
   Past the hero the bar leaves its place on the page and docks to the viewport:
   out of the way while you read downwards, back on the first upward scroll. It
   then sits over live content rather than a hero, so it carries a frosted panel
   — a light wash plus a blur of whatever is behind it — instead of the
   transparent treatment it has at the top. The wash is light enough, and the
   blur shallow enough, that what is behind still reads through as an image
   rather than as a flat tint. Both the slide and the panel are transitioned,
   so returning to the top dissolves the glass rather than snapping it off. */
.site-header {
  transition: transform .4s cubic-bezier(.22,.61,.36,1),
              background-color .4s ease, box-shadow .4s ease,
              -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
.site-header[data-docked] {
  position: fixed;
  background: rgba(255,255,255,.45);
  -webkit-backdrop-filter: blur(6px) saturate(180%);
  backdrop-filter: blur(6px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(13,13,18,.07), 0 8px 30px rgba(13,13,18,.06);
}
/* stowed: away far enough that the shadow clears the top edge too */
.site-header[data-docked][data-stowed] { transform: translateY(-110%); }

/* the glass is light whatever it covers, so the light variant reverts to ink */
.site-header--light[data-docked] .site-header__logo,
.site-header--light[data-docked] .site-nav a,
.site-header--light[data-docked] .btn { color: var(--ink); }
.site-header--light[data-docked] .btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
  .site-header[data-docked][data-stowed] { transform: none; }
}

.nav-toggle { display: none; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 908px;                 /* Figma homepage hero frame */
  display: grid; place-items: center;
  padding: calc(var(--header-h) + 40px) 24px 303px;
  background: var(--beige-light) center/cover no-repeat;
  isolation: isolate;
  overflow: hidden;
}
.hero--page { min-height: 921px; padding-bottom: 303px; }
/* The homepage hero is the whole first screen — the Figma frame's 908px left a
   strip of the section below showing on a 16-inch laptop's ~1000px viewport.
   svh rather than vh so a phone's address bar cannot push it into a scroll;
   the plain vh above it is the fallback where svh is not understood. */
.hero:not(.hero--page) {
  min-height: 100vh;
  min-height: 100svh;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* legibility scrim: only where the file puts white type on a light photograph */
.hero--scrim::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(25,38,46,.42) 0%, rgba(25,38,46,.20) 45%, rgba(25,38,46,.38) 100%);
}
.hero__inner { position: relative; z-index: 1; text-align: center; max-width: 920px; }
/* Homepage hero: the LOGO is centred on the image and the tagline sits down at
   the foot of it — the two are placed against the hero independently, not
   spaced off each other.
   The hero's padding is asymmetric (140px top vs 303px bottom, left over from
   the Figma frame), so `place-items:center` centres the block inside that
   lopsided padding box rather than on the section — and a margin big enough to
   correct it just grew the section instead of moving the content. Centring on
   the hero box directly sidesteps the padding entirely, and stays correct at
   every breakpoint (the responsive rules re-declare that padding).
   Scoped to :not(.hero--page): .hero__inner is reused on brezplacni-vodic.html
   for a phone-mockup image that already sits correctly. */
.hero:not(.hero--page) .hero__inner {
  position: absolute; top: 50%; left: 50%;
  width: min(920px, 100% - 48px);
  translate: -50% -50%;
}
.hero:not(.hero--page) .hero__logo { margin-bottom: 0; }
/* held off the bottom edge rather than hung under the logo, so it stays put
   when the hero shortens and when the line wraps (it takes two below ~480px) */
.hero:not(.hero--page) .hero__tagline {
  position: absolute; left: 24px; right: 24px; bottom: clamp(64px, 12vh, 116px);
  z-index: 1; text-align: center;
}
/* Programi, O kliniki and Blog heroes: the title takes the homepage logo's
   anchor (centre of the hero) and any standfirst takes the tagline's (held off
   the bottom edge), so flipping between the pages leaves the hero type in the
   same place. Only Programi carries a standfirst, so the last rule bites there
   alone — the others wear the modifier to be placed by the same code rather
   than by a copy of it, which is what keeps the pages from drifting.
   Same absolute positioning as above and for the same reason — place-items on
   a box with 140/303 padding centres inside the padding, not on the section.
   The height rule is copied too: the homepage hero is 100svh at every width,
   so leaving these at 921px would only line them up on a 900px-ish viewport
   and drift further apart the taller the window gets. */
.hero--page.hero--split { min-height: 100vh; min-height: 100svh; }
.hero--split .hero__inner {
  position: absolute; top: 50%; left: 50%;
  width: min(920px, 100% - 48px);
  translate: -50% -50%;
}
.hero--split .hero__sub {
  position: absolute; left: 24px; right: 24px; bottom: clamp(64px, 12vh, 116px);
  margin-top: 0; z-index: 1; text-align: center;
}
.hero__logo { max-width: 100%; margin: 0 auto 118px; color: var(--off-white); }   /* Figma gap: 118px */
.hero__tagline { color: var(--white); font-size: 16px; line-height: 26px; }
.hero__title { color: var(--white); }
/* white type on a dark hero blooms and reads larger than the black titles on
   the other heroes; a ~9% trim puts them at the same optical size. */
.hero__title--optical { font-size: 58px; line-height: 66px; }
.hero__title--ink { color: var(--ink); }
.hero__title--black { color: var(--black); }
.hero__sub { margin-top: 32px; font-size: 20px; line-height: 30px; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--white); padding: 64px var(--gutter) 40px; color: var(--black);
  /* the same 40px the cards carry, on the top corners only — the foot of the
     page has no bottom edge to round */
  border-radius: var(--r-card) var(--r-card) 0 0;
}
/* On the pages carrying a full-page gradient the footer sits inside .page-bg,
   so the gradient runs behind it and finishes at the bottom edge of the page
   instead of cutting off where the footer starts. It takes a wash of white
   rather than a colour of its own: enough to lift it off the gradient and read
   as its own panel, while the gradient still shows through it and around the
   rounded shoulders. */
.page-bg .site-footer { background: rgba(255, 255, 255, .28); }

.site-footer__inner { max-width: var(--content); margin-inline: auto; }
.site-footer__cols {
  display: grid; grid-template-columns: 400px 240px 240px 240px;
  gap: 80px; justify-content: space-between;
}
.site-footer p, .site-footer a, .site-footer li { font-size: 14px; line-height: 22px; }
.site-footer__col h2 { font-size: 14px; line-height: 20px; font-weight: 400; margin-bottom: 12px; }
.site-footer__social { display: flex; gap: 24px; margin-top: 16px; }
.site-footer__social a { position: relative; }
.site-footer__social a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: currentColor; transition: right .3s ease;
}
.site-footer__social a:hover::after { right: 0; }
.site-footer__divider { height: 1px; background: var(--black); margin: 48px 0; border: 0; }
.site-footer__legal { font-size: 14px; line-height: 20px; }

/* --- "Naš pristop" — three alternating rows over concentric rings -------- */
/* `clip` (not `hidden`) — `hidden` makes this a scroll container, which would
   cancel the sticky stack at the bottom of this file. Both clip the rings. */
.approach { position: relative; overflow: hidden; overflow: clip; }
/* the title arrives out of focus and pulls in, the same entrance the Prednosti
   title has; the cells defocus again as the section hands over. js/main.js
   writes --a-blur, so with JS off both are simply sharp. */
.approach__heading { padding: 80px var(--gutter); text-align: center; filter: blur(var(--a-blur, 0px)); }
.approach__rings {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 934px; height: 934px; pointer-events: none; z-index: 0;
}
/* 10 concentric rings, sized as ratios of the 934px Figma group so the whole
   composition scales with its container instead of overflowing */
.approach__rings span {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  border: 1px solid var(--rule-ring); border-radius: 50%;
  aspect-ratio: 1;
}
.approach__rings span:nth-child(1)  { width: 100%;    opacity: 1;   }  /* 934   */
.approach__rings span:nth-child(2)  { width: 88.705%; opacity: .9;  }  /* 828.5 */
.approach__rings span:nth-child(3)  { width: 77.419%; opacity: .85; }  /* 723.1 */
.approach__rings span:nth-child(4)  { width: 67.741%; opacity: .8;  }  /* 632.7 */
.approach__rings span:nth-child(5)  { width: 58.062%; opacity: .7;  }  /* 542.3 */
.approach__rings span:nth-child(6)  { width: 50%;     opacity: .6;  }  /* 467   */
.approach__rings span:nth-child(7)  { width: 40.321%; opacity: .5;  }  /* 376.6 */
.approach__rings span:nth-child(8)  { width: 30.835%; opacity: .4;  }  /* 288   */
.approach__rings span:nth-child(9)  { width: 21.199%; opacity: .3;  }  /* 198   */
.approach__rings span:nth-child(10) { width: 13.062%; opacity: .2;  }  /* 122   */
.approach__rows { position: relative; z-index: 1; }
.approach__row { display: grid; grid-template-columns: 1fr 1fr; min-height: 330px; align-items: center; }
.approach__row--right > .approach__cell { grid-column: 2; text-align: left; }
.approach__row--left  > .approach__cell { grid-column: 1; text-align: right; }
.approach__cell { padding: 80px; display: flex; flex-direction: column; gap: 24px; }
/* nas-pristop.html marks these up as h2 (the section owns the page's h1), the
   other two pages as h3 — style both so the typeface matches across pages */
.approach__cell :is(h2, h3) { font-family: var(--font-display); font-weight: 200; font-size: 32px; line-height: 40px; }
.approach__cell p  { font-size: 16px; line-height: 26px; max-width: 480px; }
.approach__row--left .approach__cell p { margin-left: auto; }

/* --- Feature (image) card: 1386x791, 40px radius ------------------------- */
.feature-card {
  position: relative;
  max-width: 1386px; margin-inline: auto;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--beige-light) center/cover no-repeat;
  min-height: 791px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 95px;
}
.feature-card__body { display: flex; flex-direction: column; gap: 37px; max-width: 816px; }
.feature-card__body h2 { font-family: var(--font-display); font-weight: 200; font-size: 50px; line-height: 72px; }
.feature-card__body p  { font-size: 20px; line-height: 30px; max-width: 640px; }
.feature-card .btn { align-self: flex-start; margin-top: 40px; }

/* Full-bleed variant — the photo runs edge to edge, so no card width, radius
   or 791px floor. The band carries the photo's own 2400x1596 ratio so the
   whole frame is visible, uncropped, at every width. */
.feature-card--bleed {
  max-width: none; margin-inline: 0; border-radius: 0;
  aspect-ratio: 2400 / 1300; min-height: 0;   /* the photo, cropped at the top */
  background: none;              /* the photo moves to ::before, which can be faded */
  padding: 5.5vw;                /* the gutter as a share of the width, like the type below */
  isolation: isolate;
}
/* the photo sits on its own layer so it can be faded to 85% — a background on
   the card itself would take the copy down with it */
.feature-card--bleed::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* The photo is baked at 85% over the page's own beige rather than being set
     to opacity .85 here: the section rides up over the approach stack as that
     hands over, and a see-through band let the copy underneath read through it. */
  background: url('../assets/img/homepage-1-06-cdl-back.jpg') center bottom/cover no-repeat;
}
/* The photo keeps its bubbles in the top half and its bottom-left corner
   clear, so the copy is held to that corner: everything here is sized in vw
   so the block stays the same fraction of the photo at every width and never
   creeps under a bubble. */
.feature-card--bleed .feature-card__body { max-width: 46%; gap: 1.6vw; }
/* the heading holds one line — it is the widest thing in the corner, so its
   size is what the clear width allows rather than the page's display scale */
.feature-card--bleed .feature-card__body h2 { font-size: 2.7vw; line-height: 1.25; white-space: nowrap; }
.feature-card--bleed .feature-card__body p  { font-size: clamp(15px, 1.35vw, 20px); line-height: 1.5; max-width: 90%; }
.feature-card--bleed .btn { margin-top: 1.8vw; }

/* --- the band as a whole screen ----------------------------------------- */
/* The one full-bleed picture in the middle of the page is given the window
   entire: photo to all four edges, with nothing of the sections either side
   showing alongside it. Its own 2400/1300 ratio goes with the change — at that
   ratio the band was taller than the window on anything but a very wide screen,
   so the frame could never be seen whole anyway. The floor is for a window too
   short to seat the copy: there the band keeps its height and simply scrolls.
   The section's 80px of air goes too, or the band would be a screen plus. */
.section--screen { padding-block: 0; }
.section--screen > .feature-card--bleed {
  aspect-ratio: auto;
  height: max(100svh, 560px);
}

/* Easing onto the band as you arrive is js/main.js's: CSS scroll-snap settles
   from both sides and picks its own range, which here swallowed a whole
   three-notch scroll off the band and put the page back where it started. */

/* --- Benefits list (heading centred over 6 items with + markers) --------- */
.benefits {
  max-width: var(--narrow); margin-inline: auto;
  padding: 40px 62px;
  display: grid; justify-items: center;
}
/* The heading and the points are one centred column rather than two columns
   side by side. The box is as wide as one marker plus the copy's measure, so
   the stack of + marks and titles the section collapses to on wide screens
   sits under the middle of the heading instead of off to one side of it. */
.benefits__stage { width: 100%; max-width: 560px; }
.benefits__title {
  font-family: var(--font-display); font-weight: 200; font-size: 40px; line-height: 56px;
  text-align: center; margin-bottom: 56px;
}
.benefits__list { display: flex; flex-direction: column; gap: 32px; }
.benefit { display: grid; grid-template-columns: 24px 1fr; gap: 32px; align-items: start; padding: 32px 0; }
.benefit__marker { position: relative; width: 24px; height: 24px; margin-top: 8px; }
.benefit__marker::before, .benefit__marker::after {
  content: ''; position: absolute; background: var(--black);
  left: 0; top: 11px; width: 24px; height: 2px;
}
.benefit__marker::after { rotate: 90deg; }
.benefit h3 { font-family: var(--font-display); font-weight: 200; font-size: 32px; line-height: 40px; margin-bottom: 16px; }
.benefit p  { font-size: 16px; line-height: 26px; }

/* --- Field of + marks behind the benefits -------------------------------- */
/* The same + the items are marked with, laid out as a soft grid behind them.
   Two copies of the grid are stacked, each masked by a gentle vertical wave;
   js/main.js slides the two waves through at different speeds and in opposite
   directions, so the marks swell up and fade away in bands as you scroll,
   and where the waves coincide the field is briefly denser. Everything is
   driven off custom properties, so with JS off (or under reduced motion) the
   field is simply a still, even pattern. */
.section--plus { position: relative; isolation: isolate; }
.plus-field {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--pf-in, .6);
}
/* the section is a pinned stage on wide screens, so the field is held in view
   with it rather than scrolling away behind the pinned list */
.plus-field > span {
  position: sticky; top: 0; display: block; height: 100vh; overflow: hidden;
}
.plus-field > span::before,
.plus-field > span::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 23.5v13M23.5 30h13' stroke='%2319262E' stroke-opacity='.42' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  /* a single soft swell, tiled — one band of marks visible, fading out both
     ways into nothing, which is what travels when the position is moved */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 22%, #000 50%, rgba(0,0,0,.18) 78%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 22%, #000 50%, rgba(0,0,0,.18) 78%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.plus-field > span::before {
  opacity: .62;
  -webkit-mask-size: 100% 620px; mask-size: 100% 620px;
  -webkit-mask-position: 0 var(--pf-w1, 0px); mask-position: 0 var(--pf-w1, 0px);
}
.plus-field > span::after {
  opacity: .48;
  -webkit-mask-size: 100% 380px; mask-size: 100% 380px;
  -webkit-mask-position: 0 var(--pf-w2, 0px); mask-position: 0 var(--pf-w2, 0px);
}

/* --- Programme preview (two blocks + thin ring outlines) ------------------ */
/* Replaces the old tabbed card: both programmes' copy shown at once, no
   switching. No frame: the section is not clipped, so it sits straight on the
   page background with nothing cutting the rings off — each one is sized and
   positioned to stay fully inside the section's own box instead. The rings are
   the same motif as "Spoznajte naš pristop" (thin outline, no fill) rather than
   the filled/blurred circles used the first time round, and js/main.js fades
   and lifts them in as the section scrolls into view. Colours are the brand
   gold/beige tokens, not the blue used in the source reference, to stay
   consistent with every other section on the page. */
.programs-preview {
  position: relative;
  max-width: var(--content); margin-inline: auto;
  padding: 140px var(--gutter);
  display: grid; grid-template-columns: 520px 1fr; align-items: center; gap: 40px;
}
.programs-preview__decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.programs-preview__ring {
  position: absolute; border: 1px solid var(--rule-ring); border-radius: 50%;
  translate: -50% -50%; will-change: opacity, scale;
}
/* centres as %/of the section box, sized so even the largest stays clear of
   every edge — verified against the rendered box, not just this arithmetic */
.programs-preview__ring--1 { width: 320px; height: 320px; left: 74%; top: 32%; }
.programs-preview__ring--2 { width: 220px; height: 220px; left: 84%; top: 74%; }
.programs-preview__ring--3 { width: 150px; height: 150px; left: 58%; top: 88%; }

.programs-preview__list { display: flex; flex-direction: column; gap: 88px; position: relative; z-index: 1; }
.programs-preview__item h3 {
  font-family: var(--font-display); font-weight: 200; font-size: 32px; line-height: 40px;
  margin-top: 8px; margin-bottom: 16px;
}
.programs-preview__item p:not(.eyebrow) { font-size: 16px; line-height: 26px; color: var(--muted); max-width: 460px; }
.programs-preview__cta { justify-self: center; position: relative; z-index: 1; }

/* --- CTA band ------------------------------------------------------------ */
.cta { padding: 80px var(--gutter); text-align: center; }
.cta--mark { padding-block: clamp(96px, 12vw, 150px); }
.cta__inner { max-width: 740px; margin-inline: auto; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.cta__mark { color: var(--ink); margin-bottom: 8px; }
.cta__inner h2 { font-family: var(--font-display); font-weight: 200; font-size: 40px; line-height: 40px; }
.cta__inner p { font-size: 16px; line-height: 26px; }

/* --- "Rezervirajte uvodni posvet" ---------------------------------------- */
/* The Bohinj photograph sits behind this section on every page that carries
   it — the CTA band on the homepage, Naš pristop and Programi, and the booking
   form on Kontakt — so the same invitation reads the same way throughout.
   Two selectors rather than one shared utility because the CTA band and the
   form section are different blocks; everything below is written once. */
/* Obravnava je ena sama in zapisana enkrat, slika pa je pri vsaki svoja: dokler
   se naloži, drži polje barva --ink, tako da belo besedilo bere tudi tedaj. */
.posvet-photo, .zdravje-photo {
  position: relative;
  isolation: isolate;
  background: var(--ink) center / cover no-repeat;
  color: var(--white);
}
.posvet-photo { background-image: url('../assets/img/cta-posvet-bled.webp'); }
/* A closing photograph that has to arrive out of the page's own ground rather
   than against a cut edge. So the photo is not a background on the block — it
   is a layer of its own, masked away at the top, and the scrim is faded in over
   the same distance. Both then start from whatever the page is carrying at that
   point, with no colour of the ground written down here to drift out of step
   with the gradient above.
   The homepage closes on the sunset ridge and Programi on the lake; the two
   differ only in which picture --photo names, so the treatment is written once.
   The ink ground goes with them, or it would show through the faded top. */
.posvet-photo.posvet-photo--sunset,
.posvet-photo.posvet-photo--lake { background: none; }
.posvet-photo.posvet-photo--sunset::after,
.posvet-photo.posvet-photo--lake::after {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: var(--photo) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--sunset-fade));
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--sunset-fade));
}
.posvet-photo--sunset,
.posvet-photo--lake {
  --sunset-fade: clamp(160px, 26vh, 300px);
}
.posvet-photo--sunset { --photo: url('../assets/img/homepage-1-07-cta-sunset.jpg'); }
.posvet-photo--lake   { --photo: url('../assets/img/cta-posvet-bled.webp'); }
/* both classes again, so this outweighs the shared scrim declared below */
.posvet-photo.posvet-photo--sunset::before,
.posvet-photo.posvet-photo--lake::before {
  background: linear-gradient(180deg,
    rgba(13, 13, 18, 0) 0,
    rgba(13, 13, 18, .26) var(--sunset-fade),
    rgba(13, 13, 18, .50) 100%);
}
/* White type through the footer as well, over the photo. Both classes are
   named so this outweighs the .foot-photo rule further down that hands the
   footer back its ink. */
.foot-photo.posvet-photo--sunset > .site-footer :is(h2, p, a, li) { color: var(--white); }
.foot-photo.posvet-photo--sunset > .site-footer .site-footer__divider { background: rgba(255, 255, 255, .5); }
/* "Investirajte v svoje zdravje" na strani O kliniki */
.zdravje-photo { background-image: url('../assets/img/CD-Web-Program-3.webp'); }
/* legibility scrim: the photo's sky is light enough that white type needs one,
   weighted the same way as the hero's (.hero--scrim) so the pages match */
.posvet-photo::before, .zdravje-photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,13,18,.44) 0%, rgba(13,13,18,.26) 45%, rgba(13,13,18,.50) 100%);
}
.posvet-photo h2, .posvet-photo p,
.zdravje-photo h2, .zdravje-photo p { color: var(--white); }
/* znak nad naslovom je maska, obarvana s color — čez sliko mora biti bel */
.zdravje-photo .cta__mark { color: var(--white); }

/* --- Photo carried to the foot of the page ------------------------------- */
/* Where the photo section is the last thing on a page, the picture runs on
   behind the footer rather than stopping at a seam above it. The section and
   the footer are wrapped together and .posvet-photo is put on that wrapper, so
   a single `cover` frame spans both — the alternative, extending the section's
   own background downwards, would need the footer's height to be known and
   would reframe the crop as that height changed.

   The block is also held to a screen, so that scrolling to the end of the page
   arrives at the picture and the footer alone with nothing of the section above
   them still showing. The footer keeps its own height and the CTA takes up
   whatever is left, which puts its copy on the middle of the picture rather
   than against the top of it. */
.foot-photo {
  position: relative;
  min-height: 100vh;
  /* on phones, the bar-excluding height — 100vh there is the *largest* the
     viewport gets, which would push the footer under the browser's own chrome */
  min-height: 100svh;
  display: flex; flex-direction: column;
}
.foot-photo > .cta { flex: 1; display: flex; align-items: center; }
/* The footer is unchanged by any of this: it keeps the same wash, ink type and
   rounded shoulders it wears on every other page, and the photo simply passes
   behind it. Only the white type .posvet-photo hands down to its headings and
   copy has to be turned back — that rule is meant for the CTA over the picture,
   and the wrapper now puts the footer in its reach as well. */
.foot-photo > .site-footer :is(h2, p) { color: var(--black); }

/* Kontakt: the booking form runs over the photo, so the fields go on-dark. */
.posvet-photo .field label { color: var(--white); }
.posvet-photo .field input,
.posvet-photo .field textarea,
.posvet-photo .field select {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .08);
  color: var(--white);
}
.posvet-photo .field input::placeholder,
.posvet-photo .field textarea::placeholder { color: rgba(255, 255, 255, .6); }
/* the native dropdown list paints on the OS's own white sheet */
.posvet-photo .field select option { color: var(--ink); }
.posvet-photo .field input:focus,
.posvet-photo .field textarea:focus,
.posvet-photo .field select:focus {
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22);
}
.posvet-photo .field--error input,
.posvet-photo .field--error textarea { border-color: #F2B8B5; }
.posvet-photo .field__error { color: #F2B8B5; }
.posvet-photo .form__status[data-state="ok"] { color: #A7D7BE; }

/* --- Guide promo (phone mockup + copy) ----------------------------------- */
/* No card behind this one: the mockup and the copy sit straight on the page
   gradient, and the phone runs 40% wider than its column. The mockup is cut
   out on transparency with a wide margin around the handset, so all that
   overhangs is empty pixels — clipped here so they cannot push the document
   sideways. `clip` rather than `hidden`: hidden would make this a scroll
   container on both axes and cut the phone off top and bottom. */
.promo {
  position: relative;
  max-width: 1386px; margin-inline: auto;
  overflow-x: clip;
  min-height: 769px;
  display: grid; grid-template-columns: 1fr 624px; align-items: center; gap: 40px;
  padding: 60px 95px;
}
/* Centred on the grid rather than by absolute inset, so the row grows with the
   scaled-up phone instead of it spilling over whatever sits above and below. */
.promo__art { display: grid; place-items: center; min-height: 500px; }
.promo__art img { width: 140%; max-width: none; height: auto; }
/* The scroll-driven booklet (js/booklet.js) is painted on a canvas laid over
   the still, in the same grid cell so neither can shift the other. The canvas
   paints the page's own ground under each frame and multiplies the frame onto
   it, so it needs no blend mode of its own here — see the note in that file. */
.promo__art > * { grid-area: 1 / 1; }
/* Narrower than the still: the frames are cropped to the booklet itself, so
   the canvas is only as wide as the picture needs — it paints its own ground
   and would otherwise lie over the left edge of the copy beside it. */
.promo__anim { width: 108%; max-width: none; height: auto; pointer-events: none; }
.promo__art[data-booklet-on] > img { visibility: hidden; }
.promo__body { display: flex; flex-direction: column; gap: 32px; }
.promo__body p { font-size: 16px; line-height: 26px; }
.promo__body .btn { align-self: flex-start; }

/* --- Values circles (O kliniki) ----------------------------------------- */
/* four 260px circles arranged as an arc — exact Figma offsets (outer pair +284px) */
/* Štiri vrednote stojijo v eni vrsti, vsaka pod svojim naslovom — brez okvirja,
   tako da jih drži skupaj le razmik in skupna sredinska poravnava. */
.values { padding: clamp(96px, 12vw, 169px) var(--gutter) clamp(96px, 12vw, 160px); }
/* the wreaths are measured against the row, not against the value they sit on:
   how far they have to reach to meet each other is set by the distance between
   the four columns. cqw gives them that measure directly (see --wreath below). */
.values__grid {
  max-width: var(--content); margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  container-type: inline-size;
}
.value { text-align: center; max-width: 266px; margin-inline: auto; }
/* Za vsako vrednoto stoji isti venec krogov kot pod "Spoznajte naš pristop",
   le s središčem na sami vrednoti. Ležijo za besedilom, klik gre skoznje.
   Njihovo gibanje piše js/values.js. */
.value { position: relative; isolation: isolate; }
/* Kazalec pa ne: venec sam je pod besedilom in prosojen, zato ima vsaka
   vrednota svoj krog za lovljenje kazalca — velik kot razmik med stolpci, tako
   da se sosednji ne pobijajo med sabo in val požene tista vrednota, ki ji je
   kazalec najbližje, ne le tista, ki ji je zadel besedilo. */
.value::before {
  content: ''; position: absolute; z-index: -1;
  top: 50%; left: 50%; translate: -50% -50%;
  width: 125%; aspect-ratio: 1; border-radius: 50%;
}
.value__rings {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: var(--wreath, 125%); aspect-ratio: 1; pointer-events: none; z-index: -1;
}
.value__rings span {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  /* ista črta kot pri vencu pod "Spoznajte naš pristop" na domači strani */
  border: 1px solid var(--rule-ring); border-radius: 50%;
  aspect-ratio: 1;
}
/* Šest krogov, ki se proti robu zgoščajo: razmiki rastejo navznoter, vsak za
   petnajstino več od prejšnjega. Najožji razmik je zunanji in je natanko tak,
   kot so bili prej vsi (5,8 % premera) — nobeden torej ni tesnejši od prej,
   notranji pa so širši, tako da se venec proti sredini odpre in jo prepusti
   besedilu. Razmiki po polmeru, od zunaj navznoter: 5,80 / 6,67 / 7,67 / 8,82 /
   10,14 % premera; širine spodaj so dvakratniki polmerov, ki iz njih sledijo.
   Tretji krog je tisti, ki se ga dotakne zunanji krog soseda, zato ga ni mogoče
   premakniti sam zase — z njim je treba na novo izpeljati --wreath (glej spodaj).

   Barva in prosojnost sta prevzeti od velikega venca na domači strani: ista
   siva črta (--rule-ring) in ista razpetina prosojnosti, 1 na zunanjem krogu do
   .2 na notranjem — le da je tam razdeljena na deset krogov, tu na šest, zato
   so koraki enakomerni po .16. Venec je tako proti sredini vse šibkejši in se v
   njej skoraj izteče. Te vrednosti bere tudi js/values.js kot mirno stanje, s
   katerega požene val — enako kot js/main.js na domači strani. */
.value__rings span:nth-child(1)  { width: 100%;     opacity: 1;   }
.value__rings span:nth-child(2)  { width: 88.4%;    opacity: .84; }
.value__rings span:nth-child(3)  { width: 75.06%;   opacity: .68; }
.value__rings span:nth-child(4)  { width: 59.719%;  opacity: .52; }
.value__rings span:nth-child(5)  { width: 42.077%;  opacity: .36; }
.value__rings span:nth-child(6)  { width: 21.788%;  opacity: .2;  }

/* --- one wreath behind all four (phones) --------------------------------- */
/* Where the four values stand in a column there is no row for the four wreaths
   to chain along, so they give way to a single composition drawn behind the
   lot: the same ten rings, ratios and opacity ramp as "Spoznajte naš pristop"
   on the homepage, and js/values.js sends the same ripple out through them as
   the section is scrolled. The outer ring is as tall as the column of text —
   the grid's own height — which puts its waist off both edges of the screen and
   leaves the inner rings standing behind the type, as they do on the homepage.
   Hidden by default: from 641px up each value keeps its own wreath. */
.values__rings {
  display: none;
  position: absolute; pointer-events: none;
  top: 0; left: 50%; translate: -50% 0;
  height: 100%; aspect-ratio: 1;
}
.values__rings span {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  border: 1px solid var(--rule-ring); border-radius: 50%;
  aspect-ratio: 1;
  will-change: opacity, transform;
}
/* the ten ratios of the 934px Figma group, read outermost → innermost */
.values__rings span:nth-child(1)  { width: 100%;    opacity: 1;   }
.values__rings span:nth-child(2)  { width: 88.705%; opacity: .9;  }
.values__rings span:nth-child(3)  { width: 77.419%; opacity: .85; }
.values__rings span:nth-child(4)  { width: 67.741%; opacity: .8;  }
.values__rings span:nth-child(5)  { width: 58.062%; opacity: .7;  }
.values__rings span:nth-child(6)  { width: 50%;     opacity: .6;  }
.values__rings span:nth-child(7)  { width: 40.321%; opacity: .5;  }
.values__rings span:nth-child(8)  { width: 30.835%; opacity: .4;  }
.values__rings span:nth-child(9)  { width: 21.199%; opacity: .3;  }
.values__rings span:nth-child(10) { width: 13.062%; opacity: .2;  }

.value h3 { font-family: var(--font-display); font-weight: 200; font-size: 24px; line-height: 30px; }
.value p { font-size: 14px; line-height: 20px; margin-top: 16px; color: var(--ink); }

/* --- the four wreaths, linked ring to ring ------------------------------- */
/* Where the four values stand in a row, each wreath is drawn wide enough that
   its outer circle comes to rest exactly on its neighbour's third circle, so
   the four hang off one another as a chain rather than sitting as four separate
   marks. That tangency is what fixes the size: the outer circle has radius
   0.5 * wreath and the third has 0.3753 * wreath, so the two touch when the
   distance between centres is 0.8753 * wreath. Neighbouring centres sit
   (row + gap) / 4 apart, a steady ~26.1cqw across every width the four-across
   layout covers, which puts the wreath at 26.1 / 0.8753 = 29.85cqw.
   So this number is not free: change the third ring's width above, or the gap
   between the columns, and it has to be re-derived or the circles stop meeting.
   Only in the four-across layout: at two columns and one the row is no longer a
   row, and the wreaths go back to sitting on their own values. */
@media (min-width: 1025px) {
  .values { --wreath: 29.85cqw; }
  /* every value the same height, so the four wreaths sit on one centre line —
     with `start` each box was only as tall as its own copy and the circles sat
     at four different heights, which made the overlaps look accidental */
  .values__grid { align-items: stretch; }
}

/* --- Team --------------------------------------------------------------- */
/* Vrsta portretov je širša od strani in se vleče vodoravno. Da se to vidi, ne
   da bi bilo treba karkoli pisati zraven, sta oba robova zamegljena in zbledita
   v podlago — kar je zunaj, je videti kot da čaka za robom. */
.team { padding: 118px 0 80px; text-align: center; }
.team h2 {
  font-family: var(--font-display); font-weight: 200;
  font-size: 40px; line-height: 1.2; letter-spacing: 0.02em;
  padding-inline: var(--gutter);
}
.team__scroller { position: relative; margin-top: 74px; }
.team__row {
  /* Razmik je tolikšen, da četrti portret ne pride več cel na zaslon: pol ga
     ostane v meglici ob robu, in prav to pove, da se vrsta vleče naprej. Zato
     raste z zaslonom — pri fiksnem razmiku bi na širokem zaslonu spet vsi štirje
     stali celi in vrsta bi bila videti končana. */
  display: flex; gap: clamp(40px, 7vw, 120px);
  margin: 0; padding: 4px var(--gutter);
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* drsnik je pri tem odveč — robova že povesta, da gre naprej */
  scrollbar-width: none;
}
.team__row::-webkit-scrollbar { display: none; }
.team__member { flex: 0 0 auto; width: 283px; scroll-snap-align: center; }
.team__photo {
  width: 283px; height: 283px; border-radius: 50%; overflow: hidden;
  background: var(--beige-light);
}
/* Krog pokaže le sredinski kvadrat posnetka, zato mora vsak portret povedati,
   kje v kadru stoji človek — sicer ga sredinski izrez potisne ob rob. Privzeto
   je sredina, posamezna slika pa si --focus popravi kar v svoji kartici. */
.team__photo { --focus: 50%; }
.team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus) center; }
.team__name {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.02em;
  margin-top: 24px;
}
.team__role { font-size: 16px; line-height: 24px; color: var(--muted); }

/* Meglica sama zbledi proti sredini, zato se robu ne pozna, kje se neha. Barvni
   preliv pod njo pobere še ostanek, tudi tam, kjer brskalnik backdrop-filter ne
   pozna. */
.team__fade {
  position: absolute; top: 0; bottom: 0; width: clamp(72px, 16vw, 260px);
  pointer-events: none;
  transition: opacity .3s ease;
}
/* na koncu vrste ni več ničesar, kar bi se moralo zabrisati (js/main.js) */
.team__scroller[data-at-start] .team__fade--start,
.team__scroller[data-at-end] .team__fade--end { opacity: 0; }
.team__fade--start {
  left: 0;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 45%, transparent 100%);
  background: linear-gradient(90deg, var(--about-cream, #F4F1EC) 20%, rgba(245, 244, 242, 0) 100%);
}
.team__fade--end {
  right: 0;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent 100%);
          mask-image: linear-gradient(270deg, #000 45%, transparent 100%);
  background: linear-gradient(270deg, var(--about-cream, #F4F1EC) 20%, rgba(245, 244, 242, 0) 100%);
}
/* Na telefonu meglice ni: vrsta zbledi kar sama, robova pa pisani spodaj (glej
   .team__row v bloku max-width: 640px). Da se dasta prehajati — vrsta jih ob
   prihodu na konec umakne — morata biti zapisani kot dolžini. */
@property --team-haze-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --team-haze-r { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* --- "O kliniki": temna glava strani in preliv pod njo -------------------- */
/* Isti preliv kot na Kontaktu (bela -> --beige-dark), da se strani berejo kot
   ena. --about-cream ni več barva podlage, ampak barva, v katero se stopita
   robova vrste portretov (.team__fade zgoraj): odkar podlaga ni več enotna, je
   to vrednost preliva na tisti višini, kjer stoji ekipa, in ne barva vse
   strani. Če se ekipa premakne po strani, jo je treba znova odmeriti. */
.about-bg {
  --about-cream: #F5F4F2;   /* preliv na 35 % višine, kjer stoji ekipa */
  background: linear-gradient(180deg, var(--white) 0%, var(--beige-dark) 100%);
}
/* Uvod stoji na isti kremni podlagi kot vse pod njim — edina temna ploskev na
   strani je junak nad njim. */
.about-intro {
  padding: clamp(96px, 11vw, 150px) var(--gutter) clamp(96px, 12vw, 170px);
}
/* ožja mera od splošne proze pod njo — .prose stoji pozneje v datoteki */
.about-intro .about-intro__copy { max-width: 497px; margin-inline: auto; }
.about-intro__copy p { font-size: 16px; line-height: 26px; }
.about-intro__copy p + p { margin-top: 26px; }

/* --- Long-form prose ---------------------------------------------------- */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose p { font-size: 18px; line-height: 30px; letter-spacing: 0.02em; }
.prose p + p { margin-top: 30px; }
.prose--signature { text-align: right; margin-top: 50px; font-size: 16px; line-height: 26px; }

/* --- Programme tiers ---------------------------------------------------- */
/* Base layout: a plain stacked list. This is what shows on narrow screens,
   under reduced motion and with JS off — the arc below is an enhancement. */
.tiers { padding: 80px var(--gutter); }
.tiers__stage { max-width: var(--content); margin-inline: auto; display: flex; flex-direction: column; gap: 56px; }
.tiers__ring { display: none; }
.tier__marker { display: flex; align-items: center; gap: 22px; }
.tier__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.tier__name { font-family: var(--font-display); font-weight: 200; line-height: 1; font-size: 43px; color: var(--ink); }
.tier__text { font-size: 18px; line-height: 30px; max-width: 520px; margin-top: 16px; }

/* Scope meter — how much of the full protocol a programme covers, sat above
   its copy. The fill's gradient is sized to the fill, not to the track, so
   every bar runs the whole pale-to-blue ramp and ends on the same blue however
   far along it stops. */
.tier__scope { max-width: 520px; margin-top: 26px; }
.tier__scope-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-size: 18px; line-height: 30px; color: var(--ink);
}
.tier__scope-value { flex: none; font-variant-numeric: tabular-nums; }
.tier__scope-track {
  margin-top: 10px; height: 14px; border-radius: var(--r-pill);
  background: #F2F2F2; overflow: hidden;
}
.tier__scope-fill {
  display: block; height: 100%; width: var(--scope-w, 0%); border-radius: inherit;
  background: linear-gradient(90deg,
    #F3F6FC 0%, #E9F0FD 38%, #D8E6FD 68%, #C3D9FC 88%, #B6D0FB 100%);
}
.tier__scope + .tier__text { margin-top: 24px; }

/* The bar draws itself as its programme arrives, and unwinds again as it
   leaves, so stepping back up through the programmes replays it rather than
   showing a bar that is simply already there. js/main.js owns the timing — on
   the arc that is the programme reaching the point, below the breakpoint it is
   the meter in or out of view — and arms these itself, so with no script (or
   under reduced motion) the bars are simply drawn at their value. */
[data-scope-armed] .tier__scope-head {
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-scope-armed] .tier__scope-fill {
  width: 0;
  transition: width 1.1s cubic-bezier(.215, .61, .355, 1) .1s;
}
[data-scope-in] .tier__scope-head { opacity: 1; transform: none; }
[data-scope-in] .tier__scope-fill { width: var(--scope-w, 0%); }

/* Alchemy only, once its bar has arrived: js/main.js walks --scope-w between
   figures instead of leaving it at one. Eased at both ends and with none of
   the entrance's lead-in delay, so it reads as a figure still being settled on
   rather than the bar drawing itself over and over. */
[data-scope-drift] .tier__scope-fill {
  transition: width 1.5s cubic-bezier(.65, 0, .35, 1);
}

/* --- Numbered process (8 steps on one rail) ------------------------------ */
/* One vertical rail down the left: the numbers sit to its left, every heading
   and body to its right. --p-num is the width of the number column, so the
   rail, the dots and the copy all key off that single value. --p-size is the
   display size shared by the number and its heading, which is also what puts
   the dot on their first line. */
/* --p-gap is the breathing space around the run of steps: it sets the space
   under the heading, and the same value is what closes the section under the
   last step, so the block is bracketed by an equal gap top and bottom. */
.process { position: relative; --p-num: 148px; --p-pad: 28px; --p-size: 32px; --p-gap: 57px; }
.process__heading { padding: var(--p-gap) var(--gutter); text-align: center; }
.process__heading h2 { font-family: var(--font-display); font-weight: 200; font-size: 40px; line-height: 40px; }
.process__list {
  position: relative; max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter);
  /* the steps carry --p-pad of their own below the last one, so only the
     remainder is needed to match the gap above the first */
  padding-bottom: calc(var(--p-gap) - var(--p-pad));
}
/* The rail runs from the centre of the first dot to the centre of the last, so
   it is strung between the steps rather than overshooting them top and bottom.
   Those two points depend on the steps' own heights, so js/main.js measures
   them into --p-rail-top / --p-rail-len; the fallbacks below span the list.
   Over the rail sits the ink-filled part, which grows as the steps arrive
   (--p-fill, also written by js/main.js — without it there is simply no fill). */
.process__list::before,
.process__list::after {
  content: ''; position: absolute; top: var(--p-rail-top, 0px);
  left: calc(var(--gutter) + var(--p-num)); width: 2px;
}
/* The rail's length is split in two so the halves can behave differently.
   --p-rail-len is the measured span between the first and last dot and only
   moves on a resize; --p-rail-push is how far an opened step has carried the
   last dot down, which changes on a click and nothing else, so it is the half
   that can carry a transition (see the .process__list rule in the pinned-stack
   block). The ink is stored as a fraction rather than a length for the same
   reason: it is rewritten on every scroll frame as the steps arrive, so it has
   to land instantly, while still stretching with the half that animates.
   Both are inherited on purpose — a registered property set on .process__list
   with inherits:false would never reach these pseudo-elements. */
@property --p-rail-push { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --p-fill-frac { syntax: '<number>'; inherits: true; initial-value: 0; }
.process__list::before {
  height: calc(var(--p-rail-len, 100%) + var(--p-rail-push));
  background: rgba(25, 38, 46, .22);
}
.process__list::after {
  height: calc(var(--p-fill-frac) * (var(--p-rail-len, 0px) + var(--p-rail-push)));
  background: var(--ink);
}
.step {
  position: relative; display: grid; grid-template-columns: var(--p-num) 1fr;
  align-items: start; padding-block: var(--p-pad);
}
.step__num {
  grid-column: 1; text-align: right; padding-right: 40px;
  font-family: var(--font-display); font-weight: 200;
  font-size: var(--p-size); line-height: 1.25; color: var(--black);
}
.step__body { grid-column: 2; padding-left: 40px; display: flex; flex-direction: column; gap: 16px; }
.step__body h3 { font-family: var(--font-display); font-weight: 200; font-size: var(--p-size); line-height: 1.25; color: var(--black); }
.step__body p  { font-size: 16px; line-height: 26px; color: var(--black); max-width: 560px; }
.step__dot {
  position: absolute; left: calc(var(--p-num) + 1px);
  /* centre of the first line: half of the 1.25 line box */
  top: calc(var(--p-pad) + var(--p-size) * .625);
  translate: -50% -50%;
  width: 12px; height: 12px; border-radius: 50%;
  /* solid, in the rail's own ink — beads on the line, not holes in it */
  background: var(--ink);
}

/* --- Kontakt: details beside the doorway ----------------------------------
   A white sheet that settles into the page's own grey, holding the photograph
   on the left and the contact details on the right. The details are a
   two-column grid rather than a row of blocks, so the labels line up down the
   page and "Sledi nam" sits under the phone number in the first column. */
.contact-panel {
  background: linear-gradient(180deg, var(--white) 0%, var(--beige-dark) 100%);
  /* Manj zraka nad podatki kot pod njimi: vrh je stal na 27vh, nato na 20vh, in
     fotografija s podatki se je še vedno začela prenizko — zdaj na 10vh, tako
     da je vsebina blizu vrha zaslona, spodaj pa ostane prostor do noge. */
  padding-block: clamp(40px, 10vh, 112px) clamp(96px, 22vh, 300px);
}
.contact-panel__inner {
  /* the Figma frame puts the content on a 1200 measure with 120px either side
     of a 1440 page; the 24px here is what keeps it off the edge on smaller
     screens, so the cap carries it rather than the gutter */
  width: 100%; max-width: calc(var(--narrow) + 48px);
  margin-inline: auto; padding-inline: 24px;
  /* The photograph leads and the details follow it. The gap is smaller than the
     map's was because the plate no longer ends where its box does — it has
     already faded out across its own right-hand side, and that dissolve is what
     separates the two now. */
  display: grid; grid-template-columns: clamp(300px, 34vw, 440px) minmax(0, 1fr);
  /* centred on the plate rather than hung from its top edge: the photograph is
     a good deal taller than four lines of contact detail, and aligning to the
     start left the whole bottom-right quarter of the panel empty */
  column-gap: clamp(24px, 3.5vw, 56px); align-items: center;
}
.contact-info {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5.5vw, 88px); row-gap: 56px;
}
.contact-info__item .eyebrow { margin-bottom: 14px; }
.contact-info__value { font-size: 17px; line-height: 28px; color: var(--black); }
.contact-info__value a:hover { color: var(--taupe); }
/* held to the first column so it sits under the phone number, not beside it */
.contact-info__item--social { grid-column: 1; }
.social-icons { display: flex; align-items: center; gap: 20px; list-style: none; }
.social-icons a {
  display: grid; place-items: center; width: 24px; height: 24px;
  color: var(--black); transition: color .25s ease, transform .25s ease;
}
.social-icons a:hover { color: var(--taupe); transform: translateY(-2px); }
.social-icons svg { width: 21px; height: 21px; display: block; }
/* The photograph beside the details: a plain plate with its own edges. It read
   as a squarer crop of the doorway than the source file's portrait, so the box
   sets the shape and the picture is covered into it, centred — the wordmark on
   the glass sits comfortably inside a square. */
.contact-plate {
  position: relative; margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  /* Pulled out of the centred 1200 measure and onto the page gutter. Inside the
     measure the photograph sat a long way in from the side on a wide screen —
     at 1440 it started 120px in, while everything else on the site meets the
     edge at --gutter. The width is stated so the pull only moves the plate
     rather than stretching it into the space, and min() collapses the pull to
     nothing on narrower screens, where the plate is already near the edge and
     dragging it further would run it off. */
  width: 100%;
  margin-left: min(0px, calc(var(--gutter) - 24px - max((100vw - (var(--narrow) + 48px)) / 2, 0px)));
}
.contact-plate img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}

@media (max-width: 1024px) {
  /* the photograph sits above the details rather than beside them */
  .contact-panel__inner { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  /* brought up with the wide screens' top padding — stacked, the photograph is
     the first thing on the page and does not need a quarter-screen run-up */
  .contact-panel { padding-block: 48px 120px; }
  /* held to a portrait's worth of column: run edge to edge it would be a screen
     and a half of glass before the reader reaches a phone number */
  .contact-plate { width: min(360px, 72%); }
}
@media (max-width: 640px) {
  .contact-info { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .contact-info__item--social { grid-column: auto; }
  .contact-plate { width: min(300px, 82%); }
}

/* --- Blog ---------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 29px; padding: 120px var(--gutter) 80px; }
.post-grid { max-width: 1400px; margin-inline: auto; padding: 0 40px 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.post-card {
  position: relative; min-height: 480px; border-radius: var(--r-post); overflow: hidden;
  background: var(--card) center/cover no-repeat;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 40px; text-align: center; isolation: isolate;
  transition: transform .4s ease;
}
.post-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.30) 45%, rgba(255,255,255,.62));
}
.post-card:hover { transform: translateY(-6px); }
/* Klikljiva je cela kartica, ne le gumb: povezava ostane ena sama — v drevesu
   in za bralnik je še naprej tisti gumb — le njena ploskev se raztegne čez ves
   pravokotnik. Kartica ima position: relative že od prej, zato se plast meri
   po njej. Ker je postavljena, leži nad vsebino v toku: cela ploskev kartice
   je povezava, besedilo pod njo pa se ne da več označiti — to je cena tega
   zapisa in tu je prav, saj je kartica namenjena kliku. */
.post-card > .chip[href]::after { content: ''; position: absolute; inset: 0; }
/* in kartica se tudi vede klikljivo: kazalec čez ves pravokotnik, gumb pa ob
   tem prevzame svoje stanje ob prehodu miške — isti zapis kot pri karticah
   na strani "Za vas" */
.post-card { cursor: pointer; }
.post-card:hover .chip[href] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.post-card__title { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 56px; color: var(--ink); }
/* Zadnja kartica stoji sama v vrsti in je zato sredinjena — a v isti meri kot
   tisti dve nad njo, ne širša. Razpne se čez oba stolpca zato, da se lahko
   sredini, mero pa si vzame natanko enega: odstotek se pri postavki v mreži
   meri po njenem polju, torej po dveh stolpcih in reži med njima (gap: 16px),
   in pol tega je en stolpec — pri vsaki širini okna, brez trdih vrednosti. */
.post-card--wide { grid-column: span 2; width: calc((100% - 16px) / 2); margin-inline: auto; }
/* the display rule above outranks the UA [hidden] default, so filtering needs this */
.post-card[hidden] { display: none; }
.post-empty { text-align: center; padding: 0 24px 120px; font-size: 16px; line-height: 26px; color: var(--muted); }

/* --- Article ------------------------------------------------------------ */
.article-header { text-align: center; padding: 244px 80px 40px; }
.article-header__inner {
  max-width: var(--content); margin-inline: auto;
  padding: 80px; display: flex; flex-direction: column; gap: 24px; align-items: center;
}
.article-header__kicker { font-size: 14px; line-height: 20px; color: var(--black); }
.article-header h1 { font-family: var(--font-display); font-weight: 200; font-size: 55px; line-height: 68px; color: var(--ink); max-width: 1120px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; font-size: 14px; line-height: 1; color: var(--black); }
.article-body { padding: 60px 24px 80px; }
.article-body__inner { max-width: var(--measure); margin-inline: auto; }
.article-body p { font-size: 17px; line-height: 30px; }
.article-body > .article-body__inner > * + * { margin-top: 20px; }
.article-body h2 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 40px; margin-top: 48px; }
.article-points { padding-left: 24px; display: flex; flex-direction: column; gap: 4px; }
.article-points h3 { font-size: 17px; line-height: 26px; font-weight: 600; margin-top: 20px; }
.article-points h3:first-child { margin-top: 0; }
.article-bullets { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.article-bullets li { font-size: 17px; line-height: 28px; }
.article-bullets li::before { content: '– '; }
.article-refs { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--black); }
.article-refs h3 { font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.article-refs ol { list-style: decimal; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.article-refs li { font-size: 14px; line-height: 22px; color: var(--muted); }

.related { padding: 80px 40px 60px; }
.related__head { max-width: 1400px; margin: 0 auto 40px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.related__head h2 { font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1.2; }
.related__link { font-size: 13px; line-height: 20px; }

/* --- Guide page: form + list ------------------------------------------- */
.guide-intro { padding: 0 100px; display: grid; grid-template-columns: 607px 624px; gap: 117px; justify-content: center; align-items: start; min-height: 523px; align-content: center; }
.guide-intro__label { text-align: center; display: flex; flex-direction: column; gap: 10px; }
.guide-intro__label span { font-size: 16px; line-height: 26px; letter-spacing: .08em; }
.guide-intro__label h2 { font-family: var(--font-display); font-weight: 200; font-size: 32px; line-height: 40px; }
.guide-intro__text p { font-size: 16px; line-height: 26px; }
.guide-intro__text p + p { margin-top: 26px; }

.guide-split { display: grid; grid-template-columns: 1fr 1fr; }
.guide-form-wrap { display: grid; place-items: center; padding: 100px 80px; }
.guide-list { padding: 100px 80px 100px 0; display: flex; flex-direction: column; gap: 24px; }
.guide-list > h2 { font-family: var(--font-display); font-weight: 200; font-size: 40px; line-height: 40px; margin-bottom: 26px; }
.guide-item { display: grid; grid-template-columns: 24px 1fr; gap: 32px; padding: 60px 0; align-items: start; }
.guide-item h3 { font-family: var(--font-display); font-weight: 200; font-size: 32px; line-height: 40px; margin-bottom: 16px; }
.guide-item p { font-size: 16px; line-height: 26px; max-width: 480px; }

/* --- Forms -------------------------------------------------------------- */
.form { width: 100%; max-width: 559px; display: flex; flex-direction: column; gap: 24px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 16px; line-height: 26px; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 8px 18px;
  min-height: 36px;
  border: 1px solid var(--black);
  border-radius: var(--r-input);
  background: transparent;
  font-family: var(--font-body); font-size: 15px; line-height: 20px; color: var(--ink);
}
.field textarea { border-radius: 20px; min-height: 120px; resize: vertical; padding: 12px 18px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(25,38,46,.12); }
.field--error input, .field--error textarea { border-color: #B3261E; }
.field__error { font-size: 13px; line-height: 18px; color: #B3261E; min-height: 0; }
.form__status { font-size: 14px; line-height: 22px; }
.form__status[data-state="ok"] { color: #2E6B4F; }
.form .btn { align-self: center; }

/* --- Contact ------------------------------------------------------------ */
.contact-hero { position: relative; min-height: 921px; display: grid; place-items: center; padding: calc(var(--header-h) + 40px) 24px 80px; background: var(--beige-light) center/cover no-repeat; }
.contact-grid { position: relative; z-index: 1; max-width: var(--narrow); width: 100%; display: grid; grid-template-columns: 520px 600px; gap: 80px; align-items: center; justify-content: center; }
.contact-photo { width: 520px; height: 580px; object-fit: cover; border-radius: 8px; }
.contact-details { display: flex; flex-direction: column; gap: 32px; }
.contact-block { display: flex; flex-direction: column; gap: 12px; }
.contact-block__value { font-size: 32px; line-height: 1.1; color: var(--ink); }
.contact-block__value--sm { font-size: 28px; }
.contact-block__note { font-size: 14px; line-height: 22px; color: var(--muted); }
.contact-block a.contact-block__value:hover { text-decoration: underline; text-underline-offset: 4px; }

/* pill contact cards (Figma "contact-cards": 200px radius, 24px padding) */
.contact-cards { display: grid; grid-template-columns: 271px 271px 315px 271px; gap: 24px; justify-content: center; }
.contact-card {
  border: 1px solid var(--black); border-radius: 200px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  background: var(--white);
}
.contact-card__label { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .6px; color: var(--grey); }
.contact-card__value { font-size: 16px; font-weight: 600; line-height: 1.5; color: #111827; }
.contact-card__value a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- "Za vas" offer cards ------------------------------------------------ */
/* Two grey panels side by side, each a centred stack: title, mockup, one
   sentence, one button. The 1440 frame puts them in 61px gutters with an 86px
   channel between, which is the same 4.2% gutter the header bar uses. */
.offers-section { padding-block: 24px 120px; }
.offers {
  /* soseda se med razpiranjem pribije na svoje mesto v tej škatli */
  position: relative;
  width: 100%; max-width: var(--page); margin-inline: auto;
  padding-inline: clamp(24px, 4.2vw, 61px);
  /* minmax(0, …) namesto golega 1fr: gola fr vrstica ima za spodnjo mejo auto,
     torej mero svoje vsebine, in se ob razpiranju ne more skrčiti pod kartico,
     ki v njej stoji — stolpec bi ostal odprt do konca poteze in bi se sesedel
     šele na koncu, v enem skoku (glej zamrznitev sosede v js/ocena.js) */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 86px;
}
.offer-card {
  /* holds the fading copy in place while the ocena panel opens (see below) */
  position: relative;
  /* the mockup below is wider than the panel and hangs over it on both sides,
     so the column has to be allowed to shrink under its own content — without
     this the two 1fr tracks size themselves to the exports, not to the page */
  min-width: 0;
  /* a neutral grey, a shade below the page's own gradient — not one of the
     warm beiges, which read as a tint against the grey field behind them */
  background: #DDDDDD;
  border-radius: 50px;
  min-height: 772px;
  padding: 48px 40px 42px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.offer-card__title { font-family: var(--font-display); font-weight: 200; font-size: 40px; line-height: 48px; }
/* Both mockups are exported with transparent margin around the artwork, so the
   box is sized to the whole export and pulled up by that margin — that lands
   the artwork itself, rather than its bounding box, where the design has it. */
/* The artwork is taken out of flow and centred from its own midpoint: a grid or
   flex item that is wider than its track is aligned to the start rather than
   centred, which would hang the whole overhang off one side. */
.offer-card__art {
  position: relative; width: 100%; min-width: 0;
  --art-h: 544px; height: var(--art-h);
  /* the export's transparent margin runs to 2.4% of its height, so the pull-up
     is written as that share rather than as a number tuned to one size — the
     artwork then lands in the same place at every height the box is given */
  margin-top: calc(var(--art-h) * -0.024);
}
/* Sized by height, and deliberately not capped at the panel width: the export
   is wider than its artwork, so the sides that hang over the padding are empty.
   Capping the width would shrink the artwork instead of trimming the margin.
   One height serves both cards — the exports carry the same proportion of
   margin, so their artwork lands at the two different sizes the design has,
   sitting on a common baseline. */
.offer-card__art img {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  height: 100%; width: auto; max-width: none;
}
/* Zvitek v izvozu ne stoji na sredini svoje slike (zaseda 18,3–76 %), zato bi
   sredinsko postavljena slika pustila zvitek levo od sredine kartice. Slika je
   zato zamaknjena za toliko, da je na sredini kartice zvitek sam. */
.offer-card--vodic .offer-card__art img { translate: -47.15% 0; }

/* 344px is the measure the design's two-line break falls out of on both cards */
.offer-card__text { max-width: 344px; font-size: 14px; line-height: 20px; }
.offer-card .btn { margin-top: 25px; }

/* --- both cards on one screen -------------------------------------------
   Side by side the two cards are the whole page, so they should stand on one
   screen with their buttons showing rather than running under the fold.
   Everything but the artwork is type at a fixed size, so the artwork is what
   gives: above and below it the card spends a fixed 352px — 48 title, 40 copy,
   25 + 38 button, 48 + 42 card padding, less the artwork's own 13px pull-up,
   plus the 24 at the top of the section and the 100 the header reserves — so
   the artwork may have whatever a screen has left over that, and the 48 below
   keeps the cards off the very bottom edge. Capped at the designed 544, and
   floored at 300 so a short window shrinks the picture only so far before it
   goes back to scrolling. */
@media (min-width: 1025px) {
  .offers-section { padding-block: 24px 48px; }
  /* the designed 772 is exactly the closed card's own content height, so it
     only stands in the way once the artwork is allowed to shrink */
  .offer-card { min-height: 0; }
  .offer-card__art { --art-h: clamp(300px, calc(100svh - 400px), 544px); }
}

/* booking block: intro left, form right */
.booking { display: grid; grid-template-columns: 493px 1fr; gap: 80px; align-items: start; }
.booking__intro { display: flex; flex-direction: column; gap: 24px; }

/* ==========================================================================
   Responsive — the source file contains desktop (1440) frames only, so the
   breakpoints below are an adaptation: the grid goes fluid, columns stack and
   the display sizes step down. Colours, fonts and content are unchanged.
   ========================================================================== */

/* below the 1440px design width the layout goes fluid; at 1440 it is exact */
@media (max-width: 1439px) {
  .hero, .hero--page { min-height: 76vh; padding-bottom: 18vh; }
  /* The article hero keeps the 921px frame, which is what the inline height on
     the section used to hold it at — 76vh cropped the picture on every window
     under the design width. It is a rule now rather than an inline style so the
     phone can hand the picture the whole screen instead (see .hero--article in
     the max-width: 640px block); an inline height would outrank that. */
  .hero--article { min-height: 921px; }
  .feature-card, .promo { min-height: 0; }
  .feature-card { padding: 6vw; aspect-ratio: 1386 / 791; }
  .feature-card--bleed { aspect-ratio: 2400 / 1300; }
}

@media (max-width: 1280px) {
  .site-header__inner { padding-inline: 32px; }
  .benefits { padding: 40px 32px; }
  .site-footer { padding: 64px 32px 40px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .promo { grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact-photo { width: 100%; height: auto; aspect-ratio: 520/580; }
  .contact-cards { grid-template-columns: 1fr 1fr; }
  .booking { grid-template-columns: 1fr; gap: 40px; }
  .offers { gap: 40px; padding-inline: 32px; }
  .offer-card { padding: 40px 32px 40px; }
  .guide-intro { grid-template-columns: 1fr; gap: 48px; padding: 80px 32px; }
  .guide-split { grid-template-columns: 1fr; }
  .guide-list { padding: 0 32px 80px; }
  .guide-form-wrap { padding: 64px 32px; }
  .approach__rings { width: 700px; height: 700px; }
}

@media (max-width: 1024px) {
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .about-intro { padding-inline: 32px; }
  .team h2 { padding-inline: 32px; }
  .team__row { padding-inline: 32px; }
  .display-64 { font-size: 44px; line-height: 52px; }
  .hero__title--optical { font-size: 40px; line-height: 47px; }
  .display-60 { font-size: 40px; line-height: 50px; }
  .display-55 { font-size: 38px; line-height: 48px; }
  .display-50 { font-size: 36px; line-height: 48px; }
  .display-40, .display-40-56 { font-size: 32px; line-height: 40px; }
  .serif-40 { font-size: 30px; line-height: 42px; }
  .post-card__title { font-size: 30px; line-height: 42px; }
  .feature-card__body h2 { font-size: 34px; line-height: 44px; }
  .article-header h1 { font-size: 36px; line-height: 46px; }
  .article-header { padding: calc(var(--header-h) + 80px) 24px 40px; }
  .article-header__inner { padding: 24px; }

  /* mobile navigation */
  /* The sheet wears the docked header's glass rather than a solid white panel:
     it drops from under the bar and covers the bar's own strip, so anything
     else reads as a second surface sitting on the first. Same recipe as
     .site-header[data-docked] — light wash, saturated blur, hairline under the
     bottom edge — only deeper, because this one has a column of type over it
     rather than a logo, and the bar's 6px leaves the picture behind still
     legible enough to fight the menu. */
  .site-header__actions {
    position: fixed; inset: 0 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    padding: calc(var(--header-h) + 24px) 32px 32px;
    transform: translateY(-100%);
    transition: transform .38s cubic-bezier(.4,0,.2,1);
    box-shadow: inset 0 -1px 0 rgba(13,13,18,.07), 0 8px 30px rgba(13,13,18,.06);
  }
  .site-header__actions[data-open] { transform: translateY(0); }
  /* the sheet already covers the bar's strip, so a docked bar would stack its
     own glass on top of the sheet's and print a darker band across the top */
  .site-header[data-docked][data-nav-open] {
    background: transparent; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .site-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { color: var(--black); padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 18px; line-height: 26px; }
  .site-nav a::after { display: none; }
  .site-header__actions .btn { color: var(--ink); margin-top: 24px; align-self: flex-start; }
  .site-header--light .site-nav a, .site-header--light .site-header__actions .btn { color: var(--black); }

  /* keep the logo above the open panel, and flip it to ink on the white sheet */
  .site-header__logo { position: relative; z-index: 60; }
  .site-header[data-nav-open] .site-header__logo,
  .site-header--light[data-nav-open] .site-header__logo { color: var(--black); }

  .nav-toggle {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-right: -10px;
    background: transparent; border: 0; cursor: pointer; z-index: 60;
    color: var(--black);
  }
  .site-header--light .nav-toggle { color: var(--white); }
  .site-header--light[data-nav-open] .nav-toggle,
  .site-header--light[data-docked] .nav-toggle { color: var(--black); }
  .nav-toggle span { position: relative; display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s ease, opacity .2s ease; }
  .nav-toggle span::before, .nav-toggle span::after {
    content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor;
    transition: transform .3s ease;
  }
  .nav-toggle span::before { top: -7px; }
  .nav-toggle span::after  { top: 7px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

  /* stack the alternating rows */
  .approach__row, .approach__row--right > .approach__cell, .approach__row--left > .approach__cell {
    grid-template-columns: 1fr; grid-column: 1; text-align: left;
  }
  .approach__cell { padding: 48px 32px; }
  .approach__row--left .approach__cell p { margin-left: 0; }
  .approach__rings { width: 560px; height: 560px; opacity: .55; }

  /* same rail, tightened: the number column shrinks to what "08" needs */
  .process { --p-num: 52px; --p-pad: 22px; --p-size: 20px; --p-gap: 40px; }
  .process__heading { padding: var(--p-gap) 32px; }
  .process__list { padding-inline: 24px; }
  .process__list::before, .process__list::after { left: calc(24px + var(--p-num)); }
  .step__num { padding-right: 20px; }
  .step__body { padding-left: 24px; gap: 12px; }
  .step__dot { width: 10px; height: 10px; }

  /* single column now, much taller relative to its width than the desktop
     two-column box — the ring positions above are tuned for that wider
     proportion, so this gets its own safe placement rather than reusing them */
  .programs-preview { grid-template-columns: 1fr; padding: 96px 32px; gap: 56px; }
  .programs-preview__list { gap: 56px; }
  .programs-preview__cta { justify-self: start; }
  .programs-preview__ring--1 { width: 200px; height: 200px; left: 86%; top: 80%; }
  .programs-preview__ring--2, .programs-preview__ring--3 { display: none; }

  /* one card per row: the panel keeps its proportions rather than stretching */
  /* Both mockups are exported wider than the card and hang over its sides on
     purpose — the overhang is the export's transparent margin. On a phone the
     card is narrow enough that the overhang clears the page as well, and a page
     wider than the screen is one the browser lets you scroll sideways: it
     stretches the layout viewport to fit, and the header, laid out across that
     wider viewport, carries its burger off the side of the screen. Clipped at
     the section, so the artwork may still hang over the card itself.
     `overflow-x: clip` rather than `hidden`, and with no `hidden` fallback:
     `hidden` would make this a scroll container, and the vodič steps pin
     against the viewport from inside it. */
  .offers-section { overflow-x: clip; padding-block: 20px 80px; }
  .offers { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .offer-card { min-height: 0; }
  .offer-card__title { font-size: 32px; line-height: 40px; }
  .offer-card__art { --art-h: 460px; }

  .post-grid { grid-template-columns: 1fr; padding: 0 24px 40px; }
  /* en stolpec: kartica spet zavzame vso širino vrste */
  .post-card--wide { grid-column: span 1; width: auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-hero { min-height: 0; padding-block: calc(var(--header-h) + 64px) 64px; }
  .values { padding: 80px 32px; }
  .team { padding: 80px 32px; }
  .prose p { font-size: 16px; line-height: 28px; }
  .cta { padding: 80px 32px; }
  .related__head h2 { font-size: 30px; }
  .tier__name { font-size: 34px; }
  .tiers__stage { gap: 40px; }
  .tiers { padding: 64px 32px; }
}

@media (max-width: 640px) {
  .display-64 { font-size: 34px; line-height: 42px; }
  .hero__title--optical { font-size: 31px; line-height: 38px; }
  .display-55, .display-50, .display-40, .display-40-56 { font-size: 28px; line-height: 36px; }
  .display-32, .serif-32 { font-size: 24px; line-height: 32px; }
  .serif-40, .post-card__title { font-size: 26px; line-height: 34px; }
  .lead, .hero__sub { font-size: 17px; line-height: 27px; }
  .body-18, .prose p { font-size: 16px; line-height: 27px; }
  .article-header h1 { font-size: 28px; line-height: 36px; }
  .article-body p, .article-bullets li, .article-points h3 { font-size: 16px; line-height: 27px; }

  .site-header__inner { padding-inline: 20px; }
  /* the mask sits on the span, so the width has to go there — setting it on
     the wrapping link left the logo at its full 214px and hanging out of it */
  .site-header__logo .logo { width: 170px; }
  .hero { padding: calc(var(--header-h) + 32px) 20px 96px; min-height: 620px; }
  .hero__logo { width: 260px; }
  .feature-card { aspect-ratio: auto; min-height: 520px; padding: 28px; justify-content: flex-end; }
  /* the copy sits off the bottom edge rather than on it — the picture is a full
     screen tall here and the block read as though it had slipped off the frame */
  .feature-card--bleed { aspect-ratio: auto; min-height: 560px; padding: 28px 28px 96px; }
  .feature-card--bleed::before { background-position: left bottom; }
  .feature-card--bleed .feature-card__body { max-width: 100%; gap: 20px; }
  .feature-card--bleed .feature-card__body h2 { font-size: 26px; line-height: 34px; white-space: normal; }
  .feature-card--bleed .feature-card__body p  { font-size: 16px; line-height: 26px; }
  .feature-card--bleed .btn { margin-top: 24px; }
  .feature-card__body { gap: 20px; }
  .feature-card__body h2 { font-size: 26px; line-height: 34px; }
  .feature-card__body p { font-size: 16px; line-height: 26px; }
  .benefit { grid-template-columns: 20px 1fr; gap: 20px; padding: 20px 0; }
  .benefits__list { gap: 8px; }
  .promo { grid-template-columns: 1fr; padding: 28px; }
  /* one column, so the button has no second column to be read against — it is
     centred under the copy rather than hanging off its left edge */
  .promo__body .btn { align-self: center; }
  .promo__art { min-height: 320px; }
  .offers { padding-inline: 20px; }
  .offer-card { padding: 32px 24px; border-radius: 36px; }
  .offer-card__title { font-size: 28px; line-height: 36px; }
  .offer-card__art { --art-h: 340px; }
  .form__row { grid-template-columns: 1fr; }
  .site-footer { padding: 48px 20px 32px; }
  .site-footer__cols { grid-template-columns: 1fr; gap: 32px; }
  .site-footer__divider { margin: 32px 0; }
  .values__grid { grid-template-columns: 1fr; justify-items: center; row-gap: 64px; }
  /* One wreath behind the four rather than a wreath behind each. Stacked in a
     single column the four reached down past one another's titles and the
     drawing came apart; one composition, as tall as the column of text itself,
     holds them together instead. It is wider than a phone at its waist — the
     sides run off both edges and what is left on screen is the outer rings
     closing over the first value and under the last, with the inner ones
     standing behind the text. See .values__rings for the rings themselves. */
  .value__rings { display: none; }
  .values__grid { position: relative; }
  .values__rings { display: block; }
  /* The wreath is half again as wide as the screen, and left to hang out over
     the right edge it widened the page itself: the document became scrollable
     sideways, the browser stretched the layout viewport to fit it, and the
     header — laid out across that wider viewport — carried its burger off the
     side of the screen. Only the docked bar showed it, and only over the hero.
     Clipped at the section, as "Spoznajte naš pristop" clips its own rings.
     `clip`, not `hidden`: `hidden` would make this a scroll container. */
  .values { overflow: hidden; overflow: clip; }
  .about-intro { padding-inline: 20px; }
  /* The row of portraits runs to the edges of the screen: inset, its hard clip
     edge stood a few pixels inside the page and drew a thin vertical line down
     the side of the haze. At the screen edge there is nothing left to cut
     against, and the full width also buys most of the next portrait. */
  .team { padding-inline: 0; }
  .team h2, .team__row { padding-inline: 20px; }
  .team__member, .team__photo { width: 240px; }
  .team__photo { height: 240px; }
  /* A phone fits one portrait and part of the next, and at the desktop spacing
     that part landed entirely inside the edge haze — so the row read as a
     single portrait with nothing after it. The gap is closed up until a
     recognisable arc of the next circle clears the haze, and the haze itself is
     pulled in and softened so what it covers still reads as a face. */
  .team__row { gap: 28px; }
  /* The haze is a strip of flat cream laid over the page, and the page here is
     a gradient — so the strip can only match it at one height, and either side
     of that it stood as a pale panel down each edge of the row with a visible
     seam where it ended. Nothing to match if nothing is painted: the row fades
     out its own content instead, and the page runs on behind it untouched.
     The mask has to give way at the ends of the run, or the first portrait
     would sit half dissolved before the row has been scrolled at all — it is
     keyed to the same two attributes the strips were (js/main.js), and eased
     over the same .3s, hence the registered lengths. */
  .team__fade { display: none; }
  .team__row {
    --team-haze-l: 44px; --team-haze-r: 44px;
    transition: --team-haze-l .3s ease, --team-haze-r .3s ease;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--team-haze-l),
      #000 calc(100% - var(--team-haze-r)), transparent 100%);
            mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--team-haze-l),
      #000 calc(100% - var(--team-haze-r)), transparent 100%);
  }
  .team__scroller[data-at-start] .team__row { --team-haze-l: 0px; }
  .team__scroller[data-at-end]   .team__row { --team-haze-r: 0px; }
  .filters { padding: 64px 20px 40px; gap: 12px; }
  .post-card { min-height: 400px; padding: 28px; border-radius: 48px; }
  /* The ring composition stands behind the stack here as it does on the wide
     screens — it was the only place the drawing was dropped altogether. Sized
     wider than the screen on purpose: the outer rings run off both edges, so
     what shows behind the three points is the middle of the composition rather
     than a small mark floating in it. */
  .approach__rings { width: 420px; opacity: .45; }
  .programs-preview__ring { display: none; }
  .guide-item { grid-template-columns: 20px 1fr; gap: 20px; padding: 32px 0; }
  /* the inline header already reserves its own height above this, so the 96px
     the wide screens open with left the first line the best part of a quarter
     of a screen down with nothing in between */
  .contact-panel { padding-block: 40px 120px; }
  .contact-block__value { font-size: 24px; }
  .contact-block__value--sm { font-size: 21px; }
  .contact-cards { grid-template-columns: 1fr; }
  .contact-card { border-radius: 28px; }
  /* The article opens on the picture and nothing else: it stands exactly one
     screen tall, and the three lines are spread over it rather than stacked in
     the middle of it — section above the fold, title across the centre, byline
     down at the foot. `display: contents` dissolves the inner wrapper so the
     three lines become rows of the header's own grid and can be placed on it.
     The 921px frame and the centred block stay as they are from 641px up. */
  .hero--article { min-height: 100vh; min-height: 100svh; }
  .hero--article .article-header {
    box-sizing: border-box;
    min-height: 100vh; min-height: 100svh;
    padding: calc(var(--header-h) + 20px) 20px 28px;
    display: grid; grid-template-rows: auto 1fr auto;
  }
  .hero--article .article-header__inner { display: contents; }
  .hero--article .article-header h1 { align-self: center; margin-block: 24px; }
  .article-body { padding: 40px 20px 64px; }
  .related { padding: 48px 20px; }
  /* the 60px grid only fits six marks across a phone — tighten it so the field
     still reads as a texture rather than as a handful of crosses */
  .plus-field > span::before, .plus-field > span::after { background-size: 44px 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .post-card:hover { transform: none; }
}

/* --- "Naš pristop" — sticky stack --------------------------------------- */
/* The title pins to the top and the three points build up underneath it one
   after another, each staying on screen once it has arrived — so the section
   ends with all three visible together. The padding-bottom on .approach is the
   scroll runway that the pinned composition is held through; js/main.js maps
   scroll progress across it onto the three reveals. With JS off all three are
   simply visible from the start.
   Under reduced motion the original flow layout is kept. On a phone the stack
   runs too: the section is the page's introduction to what the clinic does and
   the build is how it is told, so leaving the three points to fade past one
   another there made the same section read as a plain list. The measures it
   needs on that width — the cell's own padding, and a runway short enough that
   the pin does not outlast the reader's patience — follow in their own block.
   This block sits last on purpose: it has to outrank the ring sizes set in the
   1280 / 1024 breakpoints above. */
@media (prefers-reduced-motion: no-preference) {
  /* the runway has to be an in-flow child, not padding: a sticky element is
     constrained to its containing block's *content* box, so padding-bottom
     here would buy no extra sticky range at all */
  .approach::after { content: ''; display: block; height: 230vh; }

  /* --pin sets the stack clear of the docked site header, by the same gap the
     Prednosti stack leaves; js/main.js re-measures the bar on resize */
  .approach { --pin: var(--pin-top); }
  /* --pin now holds the box clear of the header, so the 40px that used to do
     that above the title is not needed twice. 8px is left, matching the
     half-leading the Prednosti title's 40/56 carries over its glyphs, so the
     first line of type lands the same distance under the bar in both stacks;
     the other 32 goes below, leaving the box the height the rows are spaced
     against. */
  .approach__heading { position: sticky; top: var(--pin); z-index: 2; padding-block: 8px 40px; }

  /* rings pin to the middle of the viewport so one ring composition sits behind
     the whole stack. Zero height keeps them out of the flow; the spans centre
     on that line. Width stays as set by the breakpoints above. */
  .approach__rings {
    position: sticky; top: 50%; left: auto; height: 0;
    margin-inline: auto; translate: none;
  }

  /* A section that rides up over the one before it as that one fades, so the
     two overlap and the handover reads as one continuous scroll rather than two
     stacked blocks. --cover is how far it comes up. Lives here rather than in
     the Prednosti block below because both handovers use it and this is the
     wider breakpoint of the two. js/main.js only ever applies the class while
     the accompanying fade is running: on its own the negative margin would
     simply bury live content. */
  .section--covers { position: relative; z-index: 1; margin-top: calc(-1 * var(--cover, 66vh)); }
  /* the homepage feature card over the approach stack — shorter than the
     Prednosti handover so it stays clear of the third point until it has gone */
  .approach + .section { --cover: 52vh; }
  /* The CTA over the Prednosti stack. Much shorter than the default, because
     that default was set for a section whose first screen was decorative and
     could be allowed to sit over live text — the CTA leads with its heading, and
     at 66vh that heading crosses the list while the list is still at full
     opacity. This brings it up just as the stack fades, so the two cross over
     rather than collide. */
  .cta.section--covers { --cover: 20vh; }

  /* The three points pin as one block directly under the title. 120px is the
     designed gap and what it is at the 900-tall frame; capped in vh below that
     so the block does not simply walk off the bottom of a short laptop window
     now that --pin has spent 120px of it clearing the header. */
  .approach__rows { position: sticky; top: calc(var(--pin) + min(120px, 13.3vh)); }
  .approach__row { min-height: 0; }
  .approach__cell { padding: 18px 80px; gap: 14px; will-change: opacity, transform, filter; filter: blur(var(--a-blur, 0px)); }
}

/* The same stack on a phone, on its own measures. The 80px side padding is the
   desktop gutter and would leave a phone's line barely a word wide, and 230vh
   of runway is over two full flicks of the thumb for three short points — both
   are cut to what the width actually carries. The gap between the title and the
   points closes up too: with the bar, the title and three points all sharing an
   812px window there is no room for the designed 120px. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .approach::after { height: 170vh; }
  /* the 80px design gutter left the title 215px to stand in, which is exactly
     what it needed at the old size and a line and a half at the new one — and
     the pinned box is built for one line, so the second ran into the first
     point. Inset to the same 20px the points are */
  .approach__heading { padding-block: 4px 20px; padding-inline: 20px; }
  .approach__rows { top: calc(var(--pin) + min(56px, 7vh)); }
  .approach__cell { padding: 14px 20px; gap: 10px; }
  /* The picture band waits until the stack has finished. At the wide screens'
     52vh it began climbing while the third point was still arriving, which on a
     window this short meant the two were on screen together for most of the
     handover; 20vh lets the section be read out before the band starts. */
  .approach + .section { --cover: 20vh; }
  /* The two sizes trade places on a phone: the section title takes the weight
     the three point titles carry on the wide screens, and they step down under
     it. In one narrow column the points are read as a list under one heading
     rather than as three headings of their own, so the heading is the one that
     has to be the largest thing on screen. */
  .approach__heading h2 { font-size: 32px; line-height: 40px; }
  .approach__cell :is(h2, h3) { font-size: 28px; line-height: 36px; }
}

/* --- Programme tiers — the names carried round an arc -------------------- */
/* The section pins and the programmes ride a circle whose centre sits off the
   left edge, so only its right side shows. The one at the rightmost point of
   the arc is the current one: it and its dot are 40% larger (43 → 60px, the two
   display sizes the Figma already used for these names), and its copy fades and
   focuses in on the right. Scrolling turns the arc, carrying the next programme
   into that point and the previous one up and away.
   js/main.js drives it; positions are written as --x/--y so the CSS keeps the
   geometry and the JS only supplies the angle. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .tiers {
    position: relative;
    /* Top clears the hero before the first programme arrives, so the arc is not
       sitting right under the video when it comes to rest on VITA.
       Bottom holds the next section off the screen while the last programme is
       still the one being read: at that point the stage has run to the end of
       its sticky range, so what is left below it is exactly one --tier-pin short
       of the fold — that much again, plus a little, keeps the heading under it
       out of sight until you scroll on. The stops are unaffected: the runway is
       measured inside the padding (see aStops in js/main.js). */
    padding-top: 280px;
    padding-bottom: calc(var(--tier-pin) + 120px);
    --tier-gap: 70vh;                /* scroll runway spent turning one programme to the next */
    --tier-steps: 3;                 /* gaps between programmes — one fewer than there are names */
    --tier-pin: calc(50vh - 280px);  /* where the stage parks once pinned */
  }
  /* Scroll runway — in flow, so it extends the sticky range (padding would not).
     The JS spreads the whole runway across the gaps between programmes, so this
     is sized per gap rather than as a fixed total: a fixed total would make every
     programme turn faster each time another name is added. */
  .tiers::after {
    content: ''; display: block;
    height: calc(var(--tier-gap) * var(--tier-steps));
  }

  .tiers__stage {
    --arc-r: 264px;          /* circle radius */
    --copy-x: 620px;         /* where the copy column starts */
    /* The circle is centred on the viewport's left edge, so exactly its right
       half shows. The stage is centred in the page, so its own middle sits on
       the viewport's middle — half the stage back from there is the edge.
       (50% is of the stage, 50vw of the window; the difference is the stage's
       left inset, which is what has to be undone.) */
    --arc-x: calc(50% - 50vw);
    position: sticky; top: var(--tier-pin);
    display: block; height: 560px;
  }

  .tiers__ring {
    display: block; position: absolute; left: calc(var(--arc-x) - var(--arc-r)); top: 50%;
    width: calc(var(--arc-r) * 2); height: calc(var(--arc-r) * 2);
    margin-top: calc(-1 * var(--arc-r));
    border: 1px solid var(--ink); border-radius: 50%;
  }

  /* the article itself lays nothing out — its two halves sit in the two columns */
  .tier { display: contents; }

  .tier__marker {
    position: absolute; left: var(--arc-x); top: 50%; gap: 22px; white-space: nowrap;
    /* --x/--y put the dot's centre on the arc; the second translate backs off
       by half a dot and half a line so the dot, not the row, lands on it */
    transform: translate(var(--x, 0px), var(--y, 0px))
               translate(calc(var(--dot, 10px) / -2), -50%);
    will-change: transform;
  }
  .tier__dot { width: var(--dot, 10px); height: var(--dot, 10px); }
  .tier__name { font-size: var(--size, 43px); }

  /* meter and copy travel as one block, centred on the arc's point */
  .tier__copy {
    position: absolute; left: var(--copy-x); right: 0; top: 50%;
    transform: translateY(-50%);
    opacity: 0; filter: blur(10px); will-change: opacity, filter;
  }
  .tier__scope { margin-top: 0; }
}

@media (min-width: 1025px) and (max-width: 1279px) and (prefers-reduced-motion: no-preference) {
  .tiers__stage { --arc-r: 210px; --copy-x: 480px; }
}

/* --- "Prednosti" — sticky stack ----------------------------------------- */
/* The heading pins at the top of the window and the six items build up under
   it, each arriving one step below the last, so the finished stack is a
   centred column of + markers and titles beneath the heading. js/main.js fades
   each item in and drops its body copy as the next one arrives, leaving only
   the header line stacked.
   Note the staircase is NOT six sticky items: they would all clamp to the same
   containing-block bottom and print on top of each other as the section left.
   Instead the heading and the list pin together as one sticky stage whose
   items sit in flow at one step each, so the whole thing pins and releases as
   a unit — and the heading cannot outlast the list the way it could when the
   two were sticky siblings. Row 2 of the grid is the runway; the stage spans
   both rows because a grid item's sticky range is its grid area, not the
   container. */
@media (prefers-reduced-motion: no-preference) {
  .benefits {
    --b-top: var(--pin-top); --b-step: 64px;
    /* --b-open je bralni zalogaj: ko so točke odprte, je zadnja vrstica seznama
       toliko nižje, in za toliko se podaljša tudi steza, da je mogoče do nje
       priti z drsenjem. Piše ga js/main.js, zaprto je 0. */
    grid-template-rows: auto calc(340vh + var(--b-open, 0px)); align-items: start;
  }

  /* --b-out walks the pinned stage back up the screen at exactly the speed the
     page is scrolling, which is how the section leaves when a point has been
     opened: it reads as the stack simply scrolling away. It has to be a
     transform rather than a shorter runway, because changing the runway moves
     where the pin ends — and if that lands above where the reader already is,
     the whole stack jumps up under their cursor as they click. */
  .benefits__stage {
    grid-row: 1 / span 2; position: sticky; top: var(--b-top); align-self: start;
    transform: translateY(calc(-1 * var(--b-out, 0px)));
  }

  /* the stack has to fit a screen along with the heading, so the gap under the
     heading is tighter here than in the flow layout */
  .benefits__title { margin-bottom: 40px; }
  .benefits__list { gap: 0; }

  /* one step tall each — the body copy overflows below, into the space the
     items that have not arrived yet will occupy */
  .benefit {
    height: var(--b-step); min-height: 0; padding: 0;
    align-content: start; will-change: opacity, transform;
    /* --b-in is rewritten every frame by the scroll so it must not transition;
       --b-push only changes on a click, and does */
    transform: translateY(calc(var(--b-in, 0px) + var(--b-push, 0px)));
  }
  .benefit h3 { margin-bottom: 12px; }
  .benefit p { will-change: opacity; }

  /* defocused row by row by js/main.js as the section hands over — on the rows
     and the heading themselves, not the list, so the front can move up them */
  .benefits__title, .benefit { filter: blur(var(--b-blur, 0px)); }

  .benefit__marker, .benefit__toggle { cursor: pointer; }
  /* the + closes into a − while that item's copy is showing */
  .benefit[data-open] .benefit__marker::after { transform: scaleX(0); }
}

/* The staircase on a phone. Everything here is the same figure asked of a
   narrower column and a shorter window: the step has to hold one line of the
   title and nothing more, and at 32px the longest of the six ran onto a second
   line and the stack came apart. The title comes down with it, and the gap
   under the heading closes, so heading plus six steps plus the copy hanging off
   the last of them still stands inside one screen — which is the whole premise
   of the pin. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .benefits { --b-step: 56px; padding: 32px 20px; }
  .benefits__title { font-size: 28px; line-height: 36px; margin-bottom: 24px; }
  .benefit { grid-template-columns: 20px 1fr; gap: 16px; }
  .benefit__marker { width: 20px; height: 20px; margin-top: 6px; }
  .benefit__marker::before, .benefit__marker::after { width: 20px; top: 9px; }
  .benefit h3 { font-size: 21px; line-height: 28px; margin-bottom: 8px; }
  .benefit p { font-size: 15px; line-height: 24px; }
}

/* the header line doubles as the show/hide control for its body copy. The
   button is built by js/main.js, so with JS off the titles stay plain text and
   every body stays visible. */
@property --b-push { syntax: '<length>'; inherits: false; initial-value: 0px; }
.benefit { --b-push: 0px; transition: --b-push .4s cubic-bezier(.4, 0, .2, 1); }
.benefit__marker::after { transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.benefit__toggle {
  font: inherit; color: inherit; letter-spacing: inherit;
  background: none; border: 0; margin: 0; padding: 0;
  display: block; width: 100%; text-align: left; cursor: default;
}
.benefit__toggle[disabled] { color: inherit; opacity: 1; }

/* --- "Kako poteka pristop" — sticky stack -------------------------------- */
/* The heading and the eight steps pin as one stage while the section's runway
   scrolls past. Each step slides up from below into the slot under the one
   before it and stays there, its body copy clearing as the next step arrives —
   so the section finishes with 01 through 08 stacked together on the rail.
   Note this is one sticky stage, not nine sticky pieces: separate sticky
   children would all clamp to the same containing-block bottom and print on
   top of each other on the way out. The runway is an in-flow ::after rather
   than padding, because a sticky element is held only through its containing
   block's *content* box.
   Under reduced motion the flow layout above is kept and every step is simply
   visible. The phone runs the stack too, on the measures in the max-width: 640px
   block that follows. */
@media (prefers-reduced-motion: no-preference) {
  .process {
    --p-pin: var(--pin-top);
    /* eight of these plus the heading have to fit one screen, so the step and
       the type in it are held to a share of the viewport height */
    --p-step: clamp(56px, 8.2vh, 78px);
    --p-size: clamp(19px, 2.7vh, 26px);
    --p-num: 132px;
    /* the paragraph measure, which is also what sets the width of the centred
       box — kept a little under the copy's natural 640 so that the collapsed
       stack of numbers and titles still reads as centred under the heading */
    --p-measure: 540px;
    --p-gap: clamp(32px, 6.5vh, 72px);
  }
  .process::after { content: ''; display: block; height: 380vh; }

  /* The stack is exactly as wide as one number column plus one paragraph, and
     that box is centred — so the composition sits under the middle of the
     heading rather than being stranded on the left of the 1280 measure. */
  .process__list { max-width: calc(var(--p-num) + 40px + var(--p-measure)); padding-inline: 0; }
  /* Opening a step pushes everything under it down with a transform, and a
     transform paints outside the layout — the stage stayed its closed height,
     so the tail of the stack hung past the section and printed over the CTA
     below it. js/main.js totals the open copy into --p-open and the stage
     reserves it here as real height. The runway after the stage is unchanged,
     so the section grows by exactly the same amount as the stack does and the
     pinned scroll range comes out identical — the build is unaffected, the
     section simply ends lower and carries the CTA down with it. */
  /* Here the steps are fixed-height boxes the copy overflows out of, so the
     space left under the last one cannot be worked out from --p-pad — how far
     the last line actually falls depends on whether that step is open. So
     js/main.js measures it and rolls the gap and the opened copy into one
     figure: --p-open already resolves to --p-gap under the closed stack. */
  .process__list {
    padding-bottom: var(--p-open, var(--p-gap));
    /* the same .4s curve the dots ride on, so the line and the beads it joins
       arrive together instead of the line snapping ahead of them */
    transition: padding-bottom .4s cubic-bezier(.4, 0, .2, 1),
                --p-rail-push .4s cubic-bezier(.4, 0, .2, 1);
  }
  .process__list::before, .process__list::after { left: var(--p-num); }
  .step__body p { max-width: var(--p-measure); }

  .process__stage { position: sticky; top: var(--p-pin); }
  /* Sitting the composition lower on the screen is --p-pin's job now, and it
     leaves the same gap under the header every other pinned stack does — so
     the heading keeps only the 8px of its own the approach heading keeps, and
     the eight steps under it still have a screen to fit in. The gap below is
     untouched: it is what makes the stack read as its own block. */
  .process__heading { padding-block: 8px var(--p-gap); }
  .process__heading h2 { font-size: clamp(26px, 4vh, 36px); line-height: 1.2; }

  /* one step tall each — the body copy overflows below it, into the space the
     steps that have not arrived yet will take */
  .step {
    height: var(--p-step); padding-block: 0; align-content: start;
    /* --p-in is rewritten every frame by the scroll so it must not transition;
       --p-push only changes on a click, and does */
    transform: translateY(calc(var(--p-in, 0px) + var(--p-push, 0px)));
    will-change: opacity, transform;
  }
  .step__body { gap: 8px; }
  .step__body p { font-size: 15px; line-height: 24px; will-change: opacity; }
  .step__dot { top: calc(var(--p-size) * .625); }

  .step__dot, .step__toggle { cursor: pointer; }
  /* the bead stays solid while its copy is showing — an open step is marked by
     a halo around the bead rather than by hollowing it out, so the rail reads
     as one unbroken run of filled dots however many steps are open */
  .step[data-open] .step__dot {
    background: var(--ink);
    box-shadow: 0 0 0 4px rgba(25, 38, 46, .22);
  }
}

/* The same stage on a phone. The rail keeps the tightened number column the
   flow layout already uses there — 132px of it is most of a phone's width —
   and the list goes back to being as wide as the screen, so --p-measure has
   nothing left to cap. Eight steps and a heading still have to stand inside one
   window, and a window here is short: the step, the type in it and the gap
   under the heading all come down to a share of it that leaves the eighth step
   on screen when it lands. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .process {
    --p-num: 56px;
    --p-step: clamp(46px, 6.4vh, 58px);
    --p-size: clamp(16px, 2.2vh, 19px);
    --p-gap: clamp(18px, 3vh, 28px);
  }
  .process::after { height: 300vh; }
  .process__heading { padding-inline: 20px; }
  .process__heading h2 { font-size: clamp(22px, 3.2vh, 28px); }
  .process__list { max-width: none; padding-inline: 20px; }
  .process__list::before, .process__list::after { left: calc(20px + var(--p-num)); }
  .step__num { padding-right: 16px; }
  .step__body { padding-left: 20px; gap: 6px; }
  .step__body p { max-width: none; font-size: 14px; line-height: 22px; }
  .step__dot { width: 10px; height: 10px; }
}

/* the header line doubles as the show/hide control for its body copy. The
   button is built by js/main.js, so with JS off the titles stay plain text and
   every body stays visible. Mirrors .benefit__toggle on the homepage. */
@property --p-push { syntax: '<length>'; inherits: false; initial-value: 0px; }
.step { --p-push: 0px; transition: --p-push .4s cubic-bezier(.4, 0, .2, 1); }
.step__dot { transition: background .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1); }
.step__toggle {
  font: inherit; color: inherit; letter-spacing: inherit;
  background: none; border: 0; margin: 0; padding: 0;
  display: block; width: 100%; text-align: left; cursor: default;
}
.step__toggle[disabled] { color: inherit; opacity: 1; }

/* ==========================================================================
   Booking overlay — "Naročite se na pregled"
   A 560px sheet that slides in from the right over a dimmed page, holding the
   read-only service summary, a month calendar and the free slots for the
   chosen day. The whole panel is built by js/main.js so all pages share one
   copy; with JS off the header button stays an ordinary link to the booking
   form on kontakt.html.
   ========================================================================== */
.booking-overlay { position: fixed; inset: 0; z-index: 200; }
.booking-overlay[hidden] { display: none; }

.booking-overlay__scrim {
  position: absolute; inset: 0;
  background: rgba(13, 13, 18, .32);
  opacity: 0;
  transition: opacity .4s ease;
  cursor: pointer;
}
.booking-overlay.is-open .booking-overlay__scrim { opacity: 1; }

.booking-panel {
  position: absolute; inset: 0 0 0 auto;
  width: 560px; max-width: 100%;
  background: var(--beige-light);
  color: var(--ink);
  box-shadow: -24px 0 64px rgba(13, 13, 18, .16);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), width .45s cubic-bezier(.4, 0, .2, 1);
}
.booking-overlay.is-open .booking-panel { transform: translateX(0); }
/* the sheet is what takes focus when the overlay opens, so that neither the
   close control nor any field starts out ringed */
.booking-panel:focus { outline: none; }
.booking-step[hidden] { display: none; }

/* close control sits in the panel's top-left corner, clear of the copy */
.booking-panel__close {
  position: absolute; top: 8px; left: 8px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  color: var(--ink); cursor: pointer;
  transition: opacity .25s ease;
}
.booking-panel__close:hover { opacity: .6; }

.booking-panel__inner { padding: 34px 44px 44px; }

.booking-panel__title {
  font-family: var(--font-display); font-weight: 200;
  font-size: 28px; line-height: 36px;
  text-align: center;
  margin-bottom: 46px;
}

/* service summary: fixed label column, value column beside it */
.booking-meta { display: grid; row-gap: 8px; }
.booking-meta > div { display: grid; grid-template-columns: 158px 1fr; column-gap: 16px; }
.booking-meta dt { font-size: 15px; line-height: 26px; color: var(--ink); }
.booking-meta dd { margin: 0; font-size: 15px; line-height: 26px; color: var(--muted); }

/* --- calendar ------------------------------------------------------------ */
.booking-cal { margin-top: 60px; }
.booking-cal__head { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; }
.booking-cal__month { grid-column: 2; text-align: center; font-size: 18px; line-height: 24px; }
.booking-cal__nav {
  width: 24px; height: 24px; display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  color: var(--ink); cursor: pointer;
  transition: opacity .25s ease;
}
.booking-cal__nav:hover { opacity: .6; }
.booking-cal__nav[disabled] { visibility: hidden; }
.booking-cal__nav--prev { grid-column: 1; }
.booking-cal__nav--next { grid-column: 3; }

.booking-cal__weekdays,
.booking-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.booking-cal__weekdays { margin-top: 32px; }
.booking-cal__weekdays span { text-align: center; font-size: 15px; line-height: 24px; }
.booking-cal__grid { margin-top: 12px; row-gap: 6px; justify-items: center; }

.booking-day {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  border-radius: 50%;
  font-family: var(--font-body); font-size: 15px; line-height: 1;
  color: var(--ink); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.booking-day:hover { background: rgba(25, 38, 46, .08); }
.booking-day[disabled] { color: rgba(25, 38, 46, .28); cursor: default; background: none; }
.booking-day[aria-pressed="true"] { background: var(--ink); color: var(--white); }

.booking-panel__rule { border: 0; border-top: 1px solid var(--rule-ring); margin: 32px 0; }

/* --- time slots ---------------------------------------------------------- */
.booking-slots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 16px 12px; justify-items: center;
}
.booking-slot {
  min-width: 74px; padding: 5px 18px;
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-body); font-size: 14px; line-height: 20px;
  color: var(--ink); cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.booking-slot:hover { background: rgba(25, 38, 46, .08); }
.booking-slot[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.booking-slots__empty { font-size: 15px; line-height: 24px; color: var(--muted); text-align: center; }

.booking-panel__cta { display: flex; margin: 40px auto 0; }
.booking-panel__cta[disabled] { opacity: .35; cursor: default; }
.booking-panel__cta[disabled]:hover { background: transparent; color: var(--ink); border-color: currentColor; }

/* --- step 2: reservation details ----------------------------------------
   The sheet widens to 1280px and splits: the booked appointment summarised on
   the left, the guest's details on the right, divided by a hairline rule. */
.booking-panel[data-step="2"] { width: 1280px; }

/* Both blocks are held to the sheet's own 44px gutters — the summary against
   the left edge, the form against the right — and the slack between them is a
   track of its own, so the hairline rides exactly down its centre. */
.booking-step2 { display: grid; grid-template-columns: 451px 1fr 558px; }
.booking-step2 .booking-panel__title { margin-bottom: 30px; }
.booking-step2__rule { width: 1px; justify-self: center; background: var(--rule-ring); }
.booking-step2__pane { max-width: 558px; }

/* the summary sits low in its column, clear of the title */
.booking-step2__summary .booking-meta { margin-top: 166px; row-gap: 34px; }
.booking-step2__summary .booking-meta > div { grid-template-columns: 138px 1fr; }
.booking-step2__summary .booking-meta dt,
.booking-step2__summary .booking-meta dd { font-size: 16px; line-height: 26px; }

.booking-form { display: flex; flex-direction: column; gap: 31px; }
.booking-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/* day / month / year: three short fields held to the left of the column */
.booking-form__row--dob { grid-template-columns: repeat(3, 1fr); gap: 21px; max-width: 408px; }
.booking-form .field { gap: 10px; }
.booking-form .field input {
  min-height: 44px; padding: 9px 18px;
  border-color: var(--rule-ring);
  font-size: 16px; line-height: 24px;
}
.booking-form .field input:focus { border-color: var(--ink); }
.booking-form .field--error input { border-color: #B3261E; }
.booking-form .form__status:empty { display: none; }
.booking-form .form__status { text-align: center; }
.booking-form__submit { align-self: center; margin-top: 14px; }

/* consent: a round check to match the pill geometry used everywhere else */
.booking-consent { display: grid; grid-template-columns: 46px 1fr; column-gap: 28px; align-items: center; }
/* scoped past `.booking-form .field input` so the round check keeps its own
   size instead of inheriting the text fields' height and padding */
.booking-form .booking-consent input {
  appearance: none; -webkit-appearance: none;
  width: 46px; height: 46px; min-height: 0; padding: 0; margin: 0;
  display: grid; place-items: center;
  border: 1px solid var(--rule-ring); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.booking-form .booking-consent input::after {
  content: ''; width: 14px; height: 8px;
  border-left: 1.5px solid var(--white); border-bottom: 1.5px solid var(--white);
  transform: rotate(-45deg) translate(1px, -2px);
  opacity: 0; transition: opacity .2s ease;
}
.booking-form .booking-consent input:checked { background: var(--ink); border-color: var(--ink); }
.booking-form .booking-consent input:checked::after { opacity: 1; }
.booking-consent label { font-size: 16px; line-height: 26px; }
.booking-consent a { text-decoration: underline; text-underline-offset: 3px; }
.booking-consent .field__error { grid-column: 2; }

/* the two columns stack once the wide sheet no longer fits */
@media (max-width: 1100px) {
  .booking-panel[data-step="2"] { width: 100%; }
  .booking-step2 { grid-template-columns: 1fr; }
  .booking-step2__summary .booking-meta { margin-top: 0; row-gap: 20px; }
  .booking-step2__rule { display: none; }
  .booking-step2__details {
    border-top: 1px solid var(--rule-ring);
    margin-top: 48px; padding-top: 48px;
  }
}

/* the sheet takes the full width on phones and tightens its gutters */
@media (max-width: 600px) {
  .booking-panel__inner { padding: 40px 24px 32px; }
  .booking-panel__title { margin-bottom: 36px; }
  .booking-meta > div { grid-template-columns: 1fr; row-gap: 2px; }
  .booking-meta { row-gap: 16px; }
  .booking-cal { margin-top: 40px; }
  .booking-step2__summary .booking-meta > div { grid-template-columns: 1fr; }
  .booking-form__row { grid-template-columns: 1fr; }
  .booking-consent { grid-template-columns: 36px 1fr; column-gap: 18px; }
  .booking-form .booking-consent input { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .booking-overlay__scrim, .booking-panel { transition: none; }
}

/* ==========================================================================
   Ocena življenjskega sloga — vprašalnik v razprti kartici ("Za vas")

   Kartica "Ocena življenjskega sloga" se ob kliku razpre čez celo sekcijo:
   sosednja kartica se zloži, mreža preide v en stolpec in v panelu teče
   celoten vprašalnik. Vsi zasloni (uvod, osnovni podatki, vprašanja, povzetki
   sklopov, rezultat) uporabljajo isto tipografijo, gumbe in polja kot ostala
   stran — grafika orodja je prevedena v jezik te strani, ne obratno.
   ========================================================================== */

.offers { transition: grid-template-columns .55s cubic-bezier(.4, 0, .2, 1), gap .55s cubic-bezier(.4, 0, .2, 1); }
/* razpre se lahko katerakoli od obeh kartic: umakne se tista, ki je ne držimo,
   in stolpec pod njo se sesede na nič */
.offers[data-open-side] { gap: 0; }
.offers[data-open-side="right"] { grid-template-columns: minmax(0, 0fr) minmax(0, 1fr); }
.offers[data-open-side="left"]  { grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); }
/* mesti sta zapisani, ker soseda med potezo za hip zapusti mrežo (js/card-morph.js)
   in bi se odprta kartica sicer samodejno prestavila v prvi stolpec. Le tam,
   kjer sta stolpca dva — niže se kartici zložita in si mesti poiščeta sami. */
@media (min-width: 1025px) {
  .offers > .offer-card--vodic { grid-column: 1; }
  .offers > .offer-card--ocena { grid-column: 2; }
}
/* umaknjena kartica: brez višine, brez podloge in obrezana — potezo do sem
   odpelje zamrznitev v js/card-morph.js, to je stanje, v katerem obstane */
.offer-card[data-collapsed] {
  max-height: 0; min-height: 0; padding-block: 0; padding-inline: 0;
  overflow: hidden; opacity: 0;
}

.offer-card[data-open] {
  min-height: 620px;
  padding: 40px clamp(24px, 4vw, 64px) 48px;
  text-align: left;
  align-items: stretch;
  justify-content: center;
}
.offer-card[data-open] .offer-card__teaser { display: none; }
.offer-card__teaser { display: contents; }

/* Med zapiranjem vprašalnik stoji še tako kot v odprtem stanju — le podloga se
   že seli nazaj proti zaprti meri. Brez tega bi ob prvem trenutku poteze skočil
   na vrh kartice in se prelomil na sredinsko poravnavo. */
.offer-card[data-morph="close"] {
  text-align: left;
  align-items: stretch;
  justify-content: center;
}
/* Panel razpne čez vso višino kartice (vsebino znotraj sebe še naprej postavlja
   na sredino), da križec za zapiranje visi na kotu kartice in ne na robu
   vsebine — tako obstane na istem mestu ne glede na to, kako visok je zaslon
   vprašalnika pod njim. */
.offer-card[data-open] .card-panel,
.offer-card[data-morph="close"] .card-panel { flex: 1 0 auto; }

/* --- razpiranje: kartica se prelije, ne prelomi ---------------------------
   Širino animira mreža zgoraj, višino izmeri in pelje js/ocena.js (auto → auto
   se ne da prehajati). Med potezo je škatla obrezana, obe vsebini pa se
   prekrijeta: tista, ki odhaja, dobi lastno škatlo zunaj toka in zbledi, tista,
   ki prihaja, se vzdigne vanjo. */
.offers.is-measuring, .offers.is-measuring * { transition: none !important; }

/* `clip`, ne `hidden` — enako kot pri "Spoznajte naš pristop" na domači strani:
   `hidden` naredi iz kartice drsni okvir, in ta okvir postane merilo za vse
   `position: sticky` v njej. Kartica sama se ne premika, zato se pripeti stolpec
   v vodiču ni imel na kaj pripeti in gradnja korakov je obstala. `clip` reže
   natanko tako, drsnega okvirja pa ne odpre. Prva vrstica je za brskalnike, ki
   `clip` še ne poznajo. */
.offer-card[data-morph] { overflow: hidden; overflow: clip; }
/* Odprta kartica reže tudi potem, ko je poteza mimo: zvitek in telefon sta v
   posnetku širša od svoje škatle in ga prerasteta na levo, posnetek pa ima —
   drugače kot mirna slika — svoje ozadje. Brez tega se to ozadje pri širšem
   oknu vidi kot siva ploskev ob kartici. */
.offer-card[data-open] { overflow: hidden; overflow: clip; }

/* .offer-card__teaser je display:contents in ga kot celoto ni mogoče zbledeti —
   za čas poteze zato dobi svojo škatlo. Ta je ves čas tista, ki je zunaj toka,
   v obe smeri: vprašalnik tako ostane v toku in se pod njim nič ne premakne,
   križec vred. Postavitev povzame po kartici sami — absolutna škatla se meri od
   njenega roba, podedovana podloga pa jo postavi točno tja, kjer je vsebina
   stala v toku, na vseh širinah in brez podvojenih vrednosti po prelomnih
   točkah. Animacija (in ne prehod), ker škatla v tistem trenutku šele nastane. */
.offer-card[data-morph] .offer-card__teaser {
  display: flex; flex-direction: column; align-items: center;
  position: absolute; inset: 0 0 auto;
  padding: inherit;
  text-align: center;
  pointer-events: none;
}
.offer-card[data-morph="open"] .offer-card__teaser { animation: ocena-morph-out .26s ease both; }
.offer-card[data-morph="open"] .card-panel { animation: ocena-morph-in .4s ease .12s both; }
/* Panel vodiča je višji od kartice, zato ga ni treba postavljati na sredino —
   in ne sme se: dokler višina kartice teče proti svoji meri, bi sredinska
   poravnava panel ves čas prestavljala in zvitek bi med potjo drsel z njim.
   Poravnan na vrh stoji pri miru in poteza ga lahko odnese natanko tja, kamor
   je namenjen. Videz v mirovanju je isti — panel je tako in tako višji. */
.offer-card--vodic[data-open],
.offer-card--vodic[data-morph="close"] { justify-content: flex-start; }

/* Telefon je ista izjema kot zvitek na levi kartici: pripotuje s kartice, zato
   ne zbledi s panelom in se tisti na kartici umakne takoj. Zbledi vse drugo v
   panelu — besedilo, gumb in križec. */
.offer-card--ocena[data-morph="open"] .card-panel { animation: none; }
.offer-card--ocena[data-morph="open"] .card-panel__close,
.offer-card--ocena[data-morph="open"] .ocena__close,
.offer-card--ocena[data-morph="open"] .ocena-intro__copy,
.offer-card--ocena[data-morph="open"] .ocena-actions,
.offer-card--ocena[data-morph="open"] .ocena-fineprint { animation: ocena-morph-in .4s ease .12s both; }
.offer-card--ocena[data-morph="open"] .offer-card__teaser .offer-card__art { opacity: 0; }

/* Zvitek je izjema: ne vznikne, ampak pripotuje s kartice, zato ne sme niti
   zbledeti s panelom niti podvojiti tistega na kartici — ta se umakne takoj. */
.offer-card--vodic[data-morph="open"] .card-panel { animation: none; }
.offer-card--vodic[data-morph="open"] .card-panel__close,
.offer-card--vodic[data-morph="open"] .vodic__intro,
.offer-card--vodic[data-morph="open"] .vodic__lower { animation: ocena-morph-in .4s ease .12s both; }
.offer-card--vodic[data-morph="open"] .offer-card__teaser .offer-card__art { opacity: 0; }

/* pri zapiranju gresta vlogi narobe: vprašalnik odhaja, teaser prihaja */
.offer-card[data-morph="close"] .offer-card__teaser { animation: ocena-morph-in .4s ease .14s both; }
.offer-card[data-morph="close"] .card-panel { animation: ocena-morph-out .24s ease both; }

@keyframes ocena-morph-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ocena-morph-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* zaprta kartica je v celoti klikljiva, zato se tudi vede tako: kazalec čez ves
   pravokotnik, gumb pa ob tem prevzame svoje stanje ob prehodu miške */
.offer-card:not([data-open]) { cursor: pointer; }
.offer-card:not([data-open]):hover .btn {
  background: var(--ink); color: var(--white); border-color: var(--ink);
}

.card-panel { position: relative; width: 100%; color: var(--ink); display: flex; flex-direction: column; justify-content: center; }
.card-panel[hidden] { display: none; }
/* width: 100% je nujen, ne odveč: oder je postavka v stolpčnem flexu in ga
   margin-inline:auto vzame iz raztega, tako da se skrči na vsebino zaslona.
   Mera odra bi tedaj tekla za najdaljšo vrstico vprašanja, korakovnik nad njim
   pa bi ob vsakem koraku spremenil dolžino. S polno mero stoji oder pri 720 na
   vseh zaslonih vprašalnika, korakovnik pri svojih 620. */
.ocena__stage { width: 100%; max-width: 720px; margin-inline: auto; }
.card-panel__close, .ocena__close {
  position: absolute; top: -8px; right: 0;
  /* Above the panel's own drawings. The button is the panel's first child, and
     the booklet's box carries z-index: 0 — in two columns that box is off to
     the left and the two never met, but stacked it runs the full width of the
     card and, painting later at the same level, covered the cross. */
  z-index: 2;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.card-panel__close:hover, .ocena__close:hover { color: var(--ink); border-color: var(--ink); }

/* --- uvodni zaslon: besedilo | telefon | besedilo ------------------------- */
/* Odprta kartica mora stati na enem zaslonu — ob kliku se torej razpre le v
   širino, v višino pa ne. Vse drugo na tem zaslonu je besedilo stalne velikosti,
   zato popusti risba telefona: nad in pod njo kartica porabi stalnih 241 px
   (88 obroba kartice, 24 nad risbo, 63 gumb, 18 drobni tisk, 48 razmiki), nad
   njo pa je 124 px do vrha strani in 48 px zraka pod njo — kar risbi pusti
   natanko toliko, kolikor je zaslonu ostane.
   Meri se prek srednjega stolpca in ne prek same risbe: risba je 280 % svojega
   stolpca in visoka 75 % svoje širine, torej 2,1-kratnik stolpca. Tako se z njo
   sorazmerno skrči tudi njena škatla in poteza s kartice (js/ocena.js) meri
   naprej isto reč. Spodnja meja stolpca je 150 px: pod približno 730 px visokim
   oknom se telefon ne drobi več, temveč se zaslon spet podaljša. */
.ocena .ocena-intro {
  --intro-col: min(360px, calc((100svh - 413px) / 2.1));
  padding-top: 24px;
  display: grid; grid-template-columns: 1fr minmax(150px, var(--intro-col)) 1fr;
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.ocena__stage:has(.ocena-intro) { max-width: var(--content); }
.ocena-intro__copy { font-size: 16px; line-height: 26px; }
/* Telefon potuje s kartice v panel in se med potjo obrne — posnetek leži čez
   mirno sliko in prevzame, ko se zavrti; kadr sličic je isti kot pri sliki,
   zato se ob prevzemu nič ne premakne. Pot z zaprte kartice piše js/ocena.js. */
/* Kader izvoza je precej širši od telefona na njem, zato škatlo raztegnemo čez
   svoj stolpec in jo v njem poravnamo na sredino: telefon zraste za polovico,
   presežek pa je prosojen rob, ki leži nad besedilom, ne čezenj. Slika in
   posnetek merita 100 % te škatle, torej rasteta skupaj in ostaneta poravnana.
   Meri jo js/ocena.js sproti (getBoundingClientRect), zato poteza s kartice
   sama najde novo velikost. */
.ocena-intro__art {
  display: flex; justify-content: center; position: relative;
  width: 280%; justify-self: center; pointer-events: none;
  /* Prosojni rob izvoza leži čez besedilo ob sebi. V brskalniku, ki prosojnosti
     v posnetku ne prebere, to ni več prosojen rob, ampak siva ploskev — zato
     gre risba pod besedilo in ne čezenj. */
  z-index: 0;
}
.ocena-intro__copy { position: relative; z-index: 1; }
.ocena-intro__art img,
.ocena-intro__anim {
  width: 100%; height: auto;
  transform: var(--art-flip, none);
  transform-origin: top left;
  transition: transform var(--art-flip-ms, 0ms) var(--art-flip-ease, linear);
}
.ocena-intro__anim {
  position: absolute; top: 0; left: 0;
  opacity: 0; pointer-events: none;
}
.ocena-intro__art[data-anim] .ocena-intro__anim { opacity: 1; }
.ocena-intro__art[data-anim] img { opacity: 0; }

/* --- skupni gradniki ------------------------------------------------------ */
.ocena-head { text-align: center; margin-bottom: 28px; }
.ocena-head h2 {
  font-family: var(--font-display); font-weight: 200;
  font-size: 40px; line-height: 48px; margin: 0 0 10px;
}
.ocena-head p { font-size: 16px; line-height: 26px; margin: 0 auto; max-width: 560px; }

.ocena-eyebrow {
  font-size: 12px; line-height: 20px; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--muted); margin: 0;
}
.ocena-eyebrow--center { text-align: center; }

.ocena-h3 {
  font-family: var(--font-display); font-weight: 200;
  font-size: 32px; line-height: 40px; text-align: center; margin: 0 0 12px;
}
.ocena-h4 { font-size: 16px; line-height: 26px; font-weight: 600; text-align: center; margin: 24px 0 8px; }

.ocena-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 32px; }
.ocena-dot { width: 9px; height: 9px; border-radius: 50%; background: #C6C6C6; }
.ocena-dot.is-on { background: var(--ink); }

.ocena-actions { display: flex; gap: 16px; margin-top: 32px; }
.ocena-q + .ocena-actions, .ocena-scale + .ocena-actions { margin-top: 64px; }
.ocena .btn[disabled] { opacity: .35; cursor: default; }
.ocena .btn[disabled]:hover { background: transparent; color: var(--ink); border-color: currentColor; }
.ocena-actions--center { justify-content: center; }

.ocena-fineprint { font-size: 12px; line-height: 18px; color: var(--muted); text-align: center; margin: 16px auto 0; max-width: 620px; }
.ocena-note { font-size: 12px; line-height: 18px; color: var(--muted); margin: 0; }

.ocena-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; line-height: 20px; color: var(--muted);
  transition: color .2s ease;
}
.ocena-link:hover:not(:disabled) { color: var(--ink); }
.ocena-link:disabled { opacity: .35; cursor: default; }
.ocena-link--center { display: block; margin: 18px auto 0; }

/* --- obrazca z osnovnimi podatki ----------------------------------------- */
.ocena-form { display: flex; flex-direction: column; gap: 24px; }
.ocena-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ocena-form__row--narrow { grid-template-columns: 160px; }
.ocena .field input { background: rgba(255, 255, 255, .35); }

.ocena-choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ocena-choice legend { padding: 0; font-size: 16px; line-height: 26px; color: var(--ink); }
.ocena-choice__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ocena-choice__btn {
  padding: 8px 18px; min-height: 36px;
  border: 1px solid var(--black); border-radius: var(--r-input);
  background: rgba(255, 255, 255, .35); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 20px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ocena-choice__btn:hover { background: rgba(255, 255, 255, .8); }
.ocena-choice__btn.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* --- korakovnik čez šest stebrov ----------------------------------------- */
/* šest pik na tanki črti — isti mirni zapis kot dve piki na koraku z
   osnovnimi podatki, le da tu nosijo še imena stebrov */
.ocena-stepper {
  list-style: none; margin: 0 auto 64px; padding: 0; max-width: 620px;
  display: grid; grid-template-columns: repeat(6, 1fr); position: relative;
}
.ocena-stepper::before {
  content: ''; position: absolute; top: 5px; left: 8.33%; right: 8.33%;
  height: 1px; background: #D2D2D2;
}
.ocena-stepper__item { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.ocena-stepper__mark {
  width: 11px; height: 11px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: #C6C6C6; color: transparent; font-size: 0; line-height: 0;
  transition: background-color .3s ease, transform .3s ease;
}
.ocena-stepper__mark svg { display: none; }
.ocena-stepper__item.is-done .ocena-stepper__mark { background: #8E8E8E; }
.ocena-stepper__item.is-current .ocena-stepper__mark { background: var(--ink); transform: scale(1.25); }
.ocena-stepper__label { font-size: 11px; line-height: 16px; letter-spacing: .3px; color: #BDBDBD; }
.ocena-stepper__item.is-done .ocena-stepper__label { color: var(--muted); }
.ocena-stepper__item.is-current .ocena-stepper__label { color: var(--ink); }

.ocena-pillar-intro {
  max-width: 520px; margin: 0 auto 28px; text-align: center;
  font-size: 14px; line-height: 22px; font-style: italic; color: var(--muted);
}

/* --- vprašanje ------------------------------------------------------------ */
.ocena-q { text-align: center; }
.ocena-q__lead { max-width: 520px; margin: 0 auto 16px; font-size: 14px; line-height: 22px; font-style: italic; color: var(--muted); }
.ocena-q__lead .ocena-q__source { display: block; margin-top: 4px; font-style: normal; font-size: 11px; letter-spacing: .4px; color: #B0B0B0; }
.ocena-q__text {
  font-family: var(--font-display); font-weight: 200;
  font-size: 30px; line-height: 40px; margin: 0 0 14px;
}
.ocena-q__source { font-size: 12px; line-height: 18px; color: var(--muted); margin: -8px 0 0; }

.ocena-hint { margin: -4px auto 8px; max-width: 560px; font-size: 12px; line-height: 20px; color: var(--muted); }
.ocena-hint summary { cursor: pointer; list-style: none; text-align: center; }
.ocena-hint summary::-webkit-details-marker { display: none; }
.ocena-hint summary::before { content: 'ⓘ '; }
.ocena-hint summary:hover { color: var(--ink); }
.ocena-hint p { margin: 12px 0 0; text-align: left; }

/* odgovori nosijo isto obliko kot vnosna polja na prvih dveh korakih:
   ista pilula, ista tanka obroba, isti prosojni notranji ton */
.ocena-options {
  display: flex; flex-direction: column; gap: 34px; text-align: left;
  max-width: 560px; margin: 56px auto 0;
}
.ocena-option {
  display: flex; align-items: center; gap: 18px;
  width: 100%; min-height: 48px; padding: 12px 28px;
  border: 1px solid #B9B9B9; border-radius: var(--r-input);
  background: rgba(255, 255, 255, .28); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 22px; text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.ocena-option:hover { border-color: var(--ink); background: rgba(255, 255, 255, .6); }
.ocena-option__mark {
  width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%;
  border: 1px solid #A9A9A9; background: rgba(255, 255, 255, .5);
  display: grid; place-items: center;
}
.ocena-option.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
/* izbrani odgovor nosi polno belo piko, ne pike v piki */
.ocena-option.is-on .ocena-option__mark { border-color: var(--white); background: var(--white); }

/* sedemstopenjska lestvica */
.ocena-scale { margin: 56px auto 0; max-width: 560px; }
.ocena-scale__row { display: flex; justify-content: space-between; gap: 8px; }
.ocena-scale__dot {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #B9B9B9; background: rgba(255, 255, 255, .28); color: var(--muted);
  font-family: var(--font-body); font-size: 13px; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.ocena-scale__dot:hover { border-color: var(--ink); }
.ocena-scale__dot.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ocena-scale__legend {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 12px;
  font-size: 11px; line-height: 16px; color: var(--muted);
}
.ocena-scale__legend span { max-width: 30%; }
.ocena-scale__legend span:nth-child(2) { text-align: center; font-style: italic; }
.ocena-scale__legend span:last-child { text-align: right; }

.ocena-footbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-top: 32px;
}
.ocena-footbar__label { font-size: 12px; line-height: 20px; color: var(--muted); text-align: center; }
.ocena-footbar > :first-child { justify-self: start; }

/* --- povzetek sklopa ------------------------------------------------------ */
.ocena-summary { text-align: center; }
.ocena-check {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 20px;
  display: grid; place-items: center; background: var(--ink); color: var(--white);
}
.ocena-check svg { width: 26px; height: 26px; }
.ocena-summary__title {
  font-family: var(--font-display); font-weight: 200;
  font-size: 40px; line-height: 48px; margin: 8px 0 0;
}
.ocena-summary__sub { font-size: 14px; line-height: 22px; color: var(--muted); margin: 6px 0 0; }

.ocena-score {
  background: var(--white); border: 1px solid var(--rule); border-radius: 24px;
  padding: 20px 24px; margin: 28px 0 24px; text-align: left;
}
.ocena-score__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ocena-score__head > span:first-child { font-size: 14px; color: var(--muted); }
.ocena-score__value { font-family: var(--font-display); font-weight: 200; font-size: 32px; line-height: 1; }
.ocena-score__value span { font-family: var(--font-body); font-size: 13px; color: var(--muted); }
.ocena-bar { display: block; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; margin-top: 14px; }
.ocena-bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; transition: width 1s cubic-bezier(.4, 0, .2, 1); }
.ocena-bar i.is-good { background: #2E6B4F; }
.ocena-bar i.is-mid { background: var(--gold-dark); }
.ocena-bar i.is-low { background: #B3261E; }

.ocena-summary__good { font-size: 17px; line-height: 27px; margin: 0 0 10px; }
.ocena-summary__reserve { font-size: 15px; line-height: 25px; color: var(--muted); margin: 0; }
.ocena-tips { list-style: none; counter-reset: tip; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.ocena-tips li {
  counter-increment: tip;
  background: var(--white); border: 1px solid var(--rule); border-radius: 24px;
  padding: 14px 22px 14px 52px; position: relative;
  font-size: 14px; line-height: 22px;
}
.ocena-tips li::before {
  content: counter(tip) '.'; position: absolute; left: 22px; top: 14px;
  font-size: 13px; color: var(--muted);
}

/* --- rezultat ------------------------------------------------------------- */
.ocena-results { text-align: center; }
.ocena-total {
  width: 180px; height: 180px; margin: 20px auto 18px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--white);
  display: grid; place-content: center; gap: 2px;
}
.ocena-total.is-good { border-color: #2E6B4F; }
.ocena-total.is-mid { border-color: var(--gold-dark); }
.ocena-total.is-low { border-color: #B3261E; }
.ocena-total__num { font-family: var(--font-display); font-weight: 200; font-size: 68px; line-height: 1; }
.ocena-total__unit { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.ocena-segment {
  display: inline-block; padding: 8px 20px; margin: 0 0 8px;
  border: 1px solid var(--rule); border-radius: var(--r-btn); background: var(--white);
  font-size: 14px; line-height: 22px;
}

.ocena-block { margin-top: 56px; }
.ocena-block--center { text-align: center; }
.ocena-block__lead { font-size: 14px; line-height: 24px; color: var(--muted); margin: 0 auto 24px; max-width: 620px; }

.ocena-pillarbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ocena-pillarbar {
  display: grid; grid-template-columns: 120px 1fr 32px; align-items: center; gap: 18px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 32px; padding: 14px 24px;
}
.ocena-pillarbar__name { font-size: 14px; color: var(--muted); text-align: left; }
.ocena-pillarbar .ocena-bar { margin-top: 0; }
.ocena-pillarbar__score { font-size: 14px; font-weight: 600; text-align: right; }

.ocena-pattern { font-size: 14px; line-height: 24px; font-style: italic; color: var(--muted); margin: 0 0 10px; }

.ocena-insight {
  background: var(--white); border: 1px solid var(--rule); border-radius: 32px;
  padding: 28px 32px; margin-top: 16px; text-align: left;
}
.ocena-insight__note { font-size: 12px; line-height: 18px; font-style: italic; color: var(--muted); margin: 6px 0 10px; }
.ocena-insight p:last-child { font-size: 15px; line-height: 25px; margin: 0; }

.ocena-flag {
  background: var(--white); border: 1px solid var(--gold-light); border-radius: 24px;
  padding: 20px 24px; margin-bottom: 12px; text-align: left;
}
.ocena-flag__label { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.ocena-flag__desc { font-size: 14px; line-height: 22px; color: var(--muted); margin: 0 0 8px; }
.ocena-flag p:last-child { font-size: 14px; line-height: 22px; margin: 0; }
.ocena-alert {
  border: 1px solid var(--ink); border-radius: 24px; padding: 18px 24px; margin-top: 16px;
  font-size: 13px; line-height: 21px;
}

.ocena-recs { list-style: none; counter-reset: rec; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; text-align: left; }
.ocena-recs li {
  counter-increment: rec;
  background: var(--white); border: 1px solid var(--rule); border-radius: 32px;
  padding: 22px 28px 22px 64px; position: relative;
}
.ocena-recs li::before {
  content: counter(rec); position: absolute; left: 26px; top: 22px;
  width: 24px; height: 24px; border: 1px solid var(--ink); border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
}
.ocena-recs h4 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.ocena-recs p { font-size: 14px; line-height: 22px; color: var(--muted); margin: 0; }

.ocena-ref { border: 1px solid var(--rule); border-radius: 24px; background: var(--white); margin-bottom: 10px; text-align: left; }
.ocena-ref summary { padding: 16px 24px; cursor: pointer; font-size: 15px; }
.ocena-ref[open] summary { border-bottom: 1px solid var(--rule); }
.ocena-ref__intro { font-size: 14px; line-height: 22px; font-style: italic; color: var(--muted); margin: 16px 24px; }
.ocena-ref ul { list-style: none; margin: 0; padding: 0 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.ocena-ref li { display: flex; flex-direction: column; gap: 3px; }
.ocena-ref a { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ocena-ref__meta, .ocena-ref__sum { font-size: 12px; line-height: 18px; color: var(--muted); }

.ocena-cta {
  margin-top: 64px; padding: 64px clamp(24px, 4vw, 56px);
  background: var(--ink); color: var(--white); border-radius: var(--r-card);
}
.ocena-cta h3 {
  font-family: var(--font-display); font-weight: 200;
  font-size: 36px; line-height: 46px; margin: 14px 0 18px;
}
.ocena-cta p { font-size: 15px; line-height: 25px; color: rgba(255, 255, 255, .8); margin: 0 auto 26px; max-width: 560px; }
.ocena-cta .ocena-eyebrow { color: rgba(255, 255, 255, .6); }
.ocena-fineprint--on-dark { color: rgba(255, 255, 255, .6); }

.ocena-send { font-size: 15px; line-height: 25px; margin: 0 0 6px; }
.ocena-send.is-ok { color: #2E6B4F; }
.ocena-send.is-error { color: #B3261E; }

/* ==========================================================================
   Brezplačni vodič v kartici (js/vodic.js)

   Ista kartica, ista poteza kot pri oceni — le da v njej stoji vodič: risba in
   obrazec na eni strani, uvod in seznam vsebine na drugi. Seznam je zložen kot
   koraki na strani "Programi": pike na skupni črti, naslov je gumb, besedilo
   pod njim se odpre in zapre.
   ========================================================================== */

/* Zgornji del in spodnji oder stojita na istih dveh stolpcih: obrazec pade pod
   risbo, seznam pod uvodnim besedilom. */
.vodic__top, .vodic__pin {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
/* Zraka nad risbo je toliko, kolikor je je treba: zgornji del in razmik pod
   njim skupaj odločata, kje se začne spodnji oder, ta pa mora ob odprtju gledati
   čez rob zaslona — sicer ni videti, da je pod uvodom še kaj.
   Besedilo ob knjižici stoji na njeni sredini in ne pri njenem vrhu: knjižica je
   od njega precej višja, zato je ob poravnavi na vrh visel ves preostanek pod
   besedilom. Velja le tu — spodnji oder ostane poravnan na vrh, ker se obrazec
   in seznam korakov v njem ravnata po prvi vrstici. */
.vodic__top { padding-top: clamp(16px, 2%, 32px); align-items: center; }
/* Risba je izvožena s široko prozorno obrobo (sama knjižica zaseda 18–76 %
   izvoza), zato je škatla širša od stolpca in potegnjena čez njegov levi rob —
   tako pristane knjižica sama tam, kjer jo ima načrt, in ne njen okvir. */
.vodic__art { grid-column: 1; position: relative; z-index: 0; }
/* besedilo ob risbi stoji nad njo — glej isto opombo pri .ocena-intro__art */
.vodic__intro, .vodic__list, .vodic__form { position: relative; z-index: 1; }
.vodic__art img,
.vodic__art-anim {
  display: block; width: 173%; max-width: none; height: auto;
  /* Zamik je odmerjen tako, da je zraka med robom kartice in zvitkom toliko kot
     med zvitkom in besedilom na desni. Šteje seveda zvitek sam, ne izvoz okoli
     njega — ta zaseda 18,3–76 % slike. */
  margin-left: -30.2%; margin-top: -8%;
  /* pot z zaprte kartice sem piše js/vodic.js; brez nje je to mirovanje */
  transform: var(--art-flip, none);
  transform-origin: top left;
  transition: transform var(--art-flip-ms, 0ms) var(--art-flip-ease, linear);
}
/* Posnetek leži čez sliko in prevzame šele, ko se zavrti; kadr je odmerjen po
   sliki, zato se ob prevzemu nič ne premakne. Safarijeva kopija je brez
   prosojnosti — položena je na sivo kartice — zato je pravokotnik obrezan na
   kartico, da ne moli čez njen rob. */
.vodic__art-anim {
  position: absolute; top: 0; left: 0;
  opacity: 0; pointer-events: none;
}
/* Posnetek in mirna slika sta izrezana enako — oba brez sence — in prva
   sličica je natanko ta slika, zato se ob prevzemu ne zgodi nič vidnega.
   Prelivanje ostane kot varovalka za šiv, če se posnetek naloži z zamikom. */
.vodic__art-anim, .vodic__art img { transition: opacity .18s ease; }
.vodic[data-anim] .vodic__art-anim { opacity: 1; }
.vodic[data-anim] .vodic__art img { opacity: 0; }
.vodic__intro { grid-column: 2; }
.vodic__form { grid-column: 1; }
/* seznam stoji nekoliko bolj desno od uvodnega besedila nad njim — piko in
   naslov pusti dihati proti robu obrazca */
.vodic__list { grid-column: 2; padding-left: 5%; }

.vodic__label {
  text-align: center;
  font-size: 13px; line-height: 20px; letter-spacing: 1.4px; color: var(--muted);
}
.vodic__title {
  margin-top: 6px; text-align: center;
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2;
}
.vodic__copy { margin-top: 14%; display: flex; flex-direction: column; gap: 18px; }
.vodic__copy p { font-size: 15px; line-height: 25px; max-width: 620px; }
.vodic__form .form { max-width: 460px; }
.vodic__form .btn { align-self: center; margin-top: 4px; }
.vodic__list-title {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2;
  margin-bottom: 20px;
}

/* --- spodnji del: pripet obrazec, koraki se zlagajo ob njem --------------- */
/* ...in prav zato je ta razmik manjši, kot ga hoče oko na mirni strani: z njim
   se oder dvigne toliko, da ga ob odprtju kakih 140 px gleda izpod uvoda. */
.vodic__lower { position: relative; margin-top: clamp(32px, 3.5vw, 56px); }


/* --- koraki: pike na skupni črti ----------------------------------------- */
.vsteps { list-style: none; margin: 0; padding: 0; }
/* mera naslova je tudi mera, po kateri se ravna pika: sredina prve vrstice */
.vstep { --v-title: clamp(20px, 1.7vw, 24px); --v-lead: 14px; position: relative; padding: var(--v-lead) 0 var(--v-lead) 40px; }
/* Brez gradnje vsak korak nariše svoj kos črte — od svoje pike do pike
   naslednjega. Ker je odmerjen v deležu lastne višine, se črta sama razteza in
   krči, ko se besedila pod naslovi odpirajo in zapirajo. (V gradnji to vlogo
   prevzame ena sama črta čez ves seznam, glej spodaj — koraki se tam premikajo
   vsak zase in bi se kosi razšli.) */
.vstep:not(:last-child)::before {
  content: ''; position: absolute; left: 5px; height: 100%;
  top: calc(var(--v-lead) + var(--v-title) * .65);
  width: 1px; background: #C6C6C6;
}
.vstep__dot {
  position: absolute; left: 0;
  top: calc(var(--v-lead) + var(--v-title) * .65 - 5.5px);
  width: 11px; height: 11px; border-radius: 50%;
  /* polna pika v isti barvi kot črta pod njo — kot koraki na "Programi" */
  background: var(--ink); cursor: pointer;
  transition: background-color .35s cubic-bezier(.4, 0, .2, 1),
              box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}
/* odprt korak je označen s krogom okrog pike, ne z izpraznjeno piko — črta
   tako ostane neprekinjen niz polnih pik, kolikor jih je pač odprtih */
.vstep[data-open] .vstep__dot {
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(25, 38, 46, .22);
}
.vstep__title {
  margin: 0;                               /* h5 ni v splošnem resetu */
  font-family: var(--font-display); font-weight: 200;
  font-size: var(--v-title); line-height: 1.3;
}
.vstep__toggle {
  font: inherit; color: inherit; letter-spacing: inherit;
  background: none; border: 0; margin: 0; padding: 0;
  display: block; width: 100%; text-align: left; cursor: pointer;
}
/* Besedilo je vedno postavljeno; vidno ga naredi prosojnost, ki jo v gradnji
   vodi drsenje (js/vodic.js). Brez gradnje stoji odprto. */
.vstep__copy { transition: opacity .25s ease; }
.vstep__copy p {
  padding-top: 10px;
  font-size: 15px; line-height: 24px; color: var(--muted); max-width: 520px;
}

/* --- gradnja: oder obvisi, koraki prihajajo drug za drugim ----------------
   Enako kot na strani "Programi": pod odrom teče steza, kolikor je strani do
   nje zdrsnjeno, toliko korakov je gori. Koraki so tu škatle stalne višine, iz
   katerih besedilo gleda navzdol — zato se zložba ne premika, ko se besedila
   prižigajo in ugašajo. Vse deleže piše js/vodic.js.
   Pri zmanjšani animaciji ostane navadna zložba. Na telefonu gradnja teče
   enako, le z merami iz bloka max-width: 640px, ki sledi temu. */
@media (prefers-reduced-motion: no-preference) {
  .vodic__lower {
    --v-step: clamp(58px, 8.4vh, 82px);
    --v-run: 180vh;                      /* steza, po kateri teče gradnja */
  }
  .vodic__lower::after { content: ''; display: block; height: var(--v-run); }
  .vodic__pin { position: sticky; top: var(--pin-top); }

  .vsteps { position: relative; }
  /* ena črta čez ves seznam, čez njo pa njen napolnjeni del */
  .vsteps::before, .vsteps::after {
    content: ''; position: absolute; left: 5px; width: 1px;
    top: var(--v-rail-top, 0px);
  }
  .vsteps::before {
    height: calc(var(--v-rail-len, 100%) + var(--v-rail-push));
    background: #C6C6C6;
  }
  .vsteps::after {
    height: calc(var(--v-fill-frac) * (var(--v-rail-len, 0px) + var(--v-rail-push)));
    background: var(--ink);
  }
  .vstep:not(:last-child)::before { display: none; }

  .vstep {
    --v-title: clamp(19px, 2.7vh, 26px);
    height: var(--v-step); padding-block: 0;
    /* --v-in piše drsenje in ne sme prehajati, --v-push pa se spremeni le ob
       kliku in zato sme */
    transform: translateY(calc(var(--v-in, 0px) + var(--v-push, 0px)));
    will-change: opacity, transform;
  }
  .vstep__dot { top: calc(var(--v-title) * .65 - 5.5px); }
  .vstep__copy p { will-change: opacity; }
}

/* Ista gradnja, kjer sta obrazec in seznam eden pod drugim. Razlika je v tem,
   kaj visi: zložena sta skupaj skoraj cel zaslon in za gradnjo ne ostane nič,
   zato .vodic__pin odpade in obvisi sam seznam — obrazec se prebere in odide
   izpod njega, koraki pa se sezidajo na njegovem mestu. (Mreža mora odpasti in
   ne le izgubiti stolpcev: element mreže visi le znotraj svojega polja, torej
   lastne vrstice, in stezo pod njim bi zamudil. js/vodic.js prebere iz sloga,
   kateri od obeh je pripet, in stezo odmeri od njega.) */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .vodic__pin { display: contents; }
  .vodic__form { margin-bottom: 40px; }
  .vodic__list { position: sticky; top: var(--pin-top); }
}

/* Mere, ki jih nese telefonov stolpec: dva naslova od petih se v tej širini
   prelomita v dve vrstici, zato je korak odmerjen na dve in ne na eno — pri
   eni je druga vrstica silila v korak pod sabo. Skupaj z naslovom seznama jih
   pet tako še vedno stoji v enem zaslonu, kar je ves smisel pripetja. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .vodic__lower { --v-step: clamp(58px, 7.6vh, 68px); --v-run: 150vh; }
  .vodic__list-title { font-size: 22px; line-height: 1.2; margin-bottom: 14px; }
  .vstep { --v-title: clamp(15px, 2vh, 17px); padding-left: 28px; }
  .vstep__copy p { padding-top: 6px; font-size: 14px; line-height: 22px; }
}

@property --v-rail-push { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --v-fill-frac { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --v-push { syntax: '<length>'; inherits: false; initial-value: 0px; }
.vstep { transition: --v-push .4s cubic-bezier(.4, 0, .2, 1); }

@media (max-width: 1024px) {
  .offers[data-open-side] { grid-template-columns: minmax(0, 1fr); }
  .vodic__top, .vodic__pin { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .vodic__art, .vodic__intro, .vodic__form, .vodic__list { grid-column: 1; }
  .vodic__top { padding-top: 0; }
  /* zložen panel: slika je sredinjena, zvitek v njej pa ne — isti popravek kot
     na zaprti kartici ga postavi na sredino */
  .vodic__art img, .vodic__art-anim {
    width: 100%; margin-left: 0; max-width: 420px; margin-inline: auto;
    translate: 2.85% 0;
  }
  .vodic__art-anim { left: 50%; translate: -50% 0; }
  .vodic__copy { margin-top: 28px; }
  .vodic__list { padding-left: 0; }
  .vodic__lower { margin-top: 40px; }
  .ocena .ocena-intro { grid-template-columns: 1fr; }
  .ocena-intro__art { order: -1; max-width: 320px; margin-inline: auto; }
}

@media (max-width: 700px) {
  .offer-card[data-open] { padding: 32px 20px 40px; border-radius: 36px; }
  /* The phone is 30% of the width of the frame it is exported in, so the box
     has to be a good deal wider than the phone that comes to rest in it: 560
     lands the phone at about 170, which is the size it has to be to read as the
     card's subject rather than as a thumbnail. The surplus is transparent
     margin and the card clips it, so the box may run well past the card's own
     measure; only the phone in the middle of it is seen.
     `margin-inline: auto` has to go with it. Auto margins resolve to zero when
     there is no free space to share, so once the box was wider than the card
     they stopped centring it and simply left it against the left edge, with the
     whole overhang — and the phone with it — pushed off to the right. The
     `justify-self: center` the box carries centres it either way. */
  .ocena-intro__art { max-width: 560px; margin-inline: 0; }
  /* The booklet is 58% of the width of its own export, so the same reasoning as
     the phone: the box has to run well past the card for the drawing in it to
     come to rest at a size that matches. 480 lands the booklet at the phone's
     width. Centred by hand for the same reason too — auto margins give up once
     the box is wider than what holds it and simply leave it against the left
     edge. And it is the booklet that is centred, not the export it sits in: the
     drawing occupies 18.3–76% of the frame, so 47.2% of the box is the point
     brought to the middle. The still and the canvas over it take the same
     offset, or the booklet would step sideways as the animation takes over. */
  .vodic__art img, .vodic__art-anim {
    width: 480px; max-width: none; margin-inline: 0;
    left: 50%; translate: -47.2% 0;
  }
  /* relative, not absolute: the still is what gives .vodic__art its height */
  .vodic__art img { position: relative; }
  .ocena-head h2, .ocena-summary__title { font-size: 30px; line-height: 38px; }
  .ocena-q__text { font-size: 26px; line-height: 34px; }
  .ocena-h3 { font-size: 26px; line-height: 34px; }
  .ocena-form__row { grid-template-columns: 1fr; }
  .ocena-choice__row { grid-template-columns: 1fr; gap: 12px; }
  .ocena-stepper__label { display: none; }
  .ocena-stepper { grid-template-columns: repeat(6, 1fr); margin-bottom: 32px; }
  .ocena-scale__row { flex-wrap: wrap; justify-content: center; }
  .ocena-pillarbar { grid-template-columns: 92px 1fr 28px; gap: 12px; padding: 12px 18px; }
  .ocena-total { width: 150px; height: 150px; }
  .ocena-total__num { font-size: 56px; }
  .ocena-cta { padding: 44px 24px; }
  .ocena-cta h3 { font-size: 28px; line-height: 36px; }
  .ocena-actions { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .offers, .ocena-bar i { transition: none; }
  .offer-card[data-morph] .offer-card__teaser,
  .offer-card[data-morph] .card-panel { animation: none; }
  .vstep__copy, .vstep__dot { transition: none; }
  .vodic__pin { position: static; }
}