/* Page · /za-najmladje — Hero over the illustrated Novi Sad artwork.
   Loaded only on this page; tokens, navbar and footer come from home.css.
   The artwork is anchored to the bottom of the hero so its organic wave always meets
   the porcelain page; the plain mint above it is the artwork's own background colour. */

.kh {
  --kh-mint: #9dc6bf;
  position: relative; overflow: hidden; background: var(--kh-mint);
  aspect-ratio: 1440 / 728;                       /* desktop: exactly the artwork, grows if content needs more */
  padding: var(--space-64) 0 15.8%;               /* bottom padding keeps content above the wave crest */
  display: flex; align-items: center;
}
.kh__art { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; }
.kh__art img { display: block; width: 100%; height: auto; }
.kh__inner { position: relative; width: 100%; }

.kh__grid { display: grid; grid-template-columns: minmax(0, 1fr) 44%; column-gap: var(--space-64); align-items: center; }
.kh__text .ds-h1 + .ds-actions { margin-top: var(--space-32); }   /* no body text: heading → CTA */
.kh__eyebrow { color: var(--charcoal); }            /* deep green is only ~2.8:1 on the mint */

.kh__cta { background: #ff8a4c; color: #ffffff; }
.kh__cta:hover { background: #f4793a; }

.kh__photo {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: 40px; border: 6px solid var(--porcelain); background: var(--porcelain);
}
.kh__photo picture { display: block; height: 100%; }
.kh__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 34px; }
.kh__photo-slot {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-16); text-align: center;
  border: 1px dashed var(--control-border); border-radius: 34px; background: var(--sage);
  font-size: var(--fs-support); line-height: 1.4; color: var(--text-body);
}

/* Tablet 768–1199: two columns, artwork band behind the lower half */
@media (max-width: 1199px) {
  .kh { aspect-ratio: auto; padding: var(--space-64) 0 140px; }
  .kh__grid { grid-template-columns: minmax(0, 1fr) 46%; column-gap: var(--space-32); }
  .kh__photo { border-radius: 32px; border-width: 5px; }
  .kh__text .ds-h1 + .ds-actions { margin-top: var(--space-24); }
  .kh__photo-slot, .kh__photo img { border-radius: 27px; }
}

/* Mobile <768: stacked; the artwork sits as a band below the photograph */
@media (max-width: 767px) {
  .kh { padding: var(--space-48) 0 calc(100vw * 728 / 1440 - 24px); align-items: flex-start; }
  .kh__grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-32); }
  .kh__photo { border-radius: 24px; border-width: 4px; }
  .kh__photo-slot, .kh__photo img { border-radius: 20px; }
}

/* ---------- Section 02 · Naše usluge (interactive) ----------
   Desktop: tooth in the centre, three nodes joined to it by dashed lines, one flip card open
   at a time. Tablet + mobile: tooth above three open cards. */
.ks { position: relative; isolation: isolate; background: var(--surface-page); padding: var(--section-y-desktop) 0; overflow: hidden; }
/* Decorations (all behind content, never interactive) */
.ks::before, .ks::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.ks::before {                                   /* soft sage shape from the left edge */
  left: -18%; top: 12%; width: 52%; aspect-ratio: 1.15;
  background: radial-gradient(closest-side, rgba(157, 198, 164, 0.30), rgba(157, 198, 164, 0.14) 55%, rgba(157, 198, 164, 0) 100%);
}
.ks::after {                                    /* and from the bottom-right corner */
  right: -14%; bottom: -26%; width: 44%; aspect-ratio: 1.25;
  background: radial-gradient(closest-side, rgba(157, 198, 164, 0.32), rgba(157, 198, 164, 0.12) 60%, rgba(157, 198, 164, 0) 100%);
}
.ks > .ds-container { position: relative; z-index: 1; }
.ks-heart { position: absolute; z-index: 0; left: 0; bottom: 7%; width: min(53%, 760px); height: auto; pointer-events: none; }
.ks__underline { display: block; width: 190px; height: 16px; margin: var(--space-12) auto 0; color: var(--fresh-green); }
.ks-watermark {
  position: absolute; z-index: 0; left: 50%; top: 58%; width: 34%; height: auto; transform: translate(-50%, -50%);
  color: #8fbf98; opacity: 0.12; pointer-events: none;
}
.ks-card__rays {
  position: absolute; z-index: 3; top: -48px; right: -50px; width: 58px; height: 58px; color: var(--fresh-green);
  opacity: 0; transform: scale(0.6); transform-origin: 0 100%; pointer-events: none;
  transition: opacity 250ms var(--ease-standard), transform 250ms var(--ease-standard);
}
.ks-card.is-open .ks-card__rays { opacity: 1; transform: none; transition-delay: 650ms; }
.ks__intro { max-width: 760px; margin: 0 auto; text-align: center; }

/* Stage: every position is a % of a 1240 × 560 board, so lines, nodes and cards stay aligned */
.ks-stage { position: relative; aspect-ratio: 1240 / 560; margin-top: var(--space-48); }
.ks-mobile { display: none; }

.ks-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ks-line__base { fill: none; stroke: #b9bfbb; stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; }
/* Active connection: faint green tint + a bright beam travelling tooth → node, 1.6s linear, forever */
.ks-line__tint, .ks-line__beam { fill: none; stroke-linecap: round; opacity: 0; }
.ks-line__tint { stroke: rgba(96, 179, 88, 0.28); stroke-width: 4; }
.ks-line__beam {
  --beam: 70px;
  stroke: #60b358; stroke-width: 4; stroke-dasharray: var(--beam) var(--len); stroke-dashoffset: var(--beam);
  filter: drop-shadow(0 0 3px rgba(96, 179, 88, 0.85)) drop-shadow(0 0 7px rgba(96, 179, 88, 0.45));
}
.ks-line.is-active .ks-line__tint, .ks-line.is-active .ks-line__beam { opacity: 1; }
.ks-line.is-active .ks-line__beam { animation: ks-beam 1.6s linear infinite; }
@keyframes ks-beam { from { stroke-dashoffset: var(--beam); } to { stroke-dashoffset: calc(var(--len) * -1); } }

/* Tooth: centred on its point, floats 6px */
.ks-tooth { position: absolute; width: 12.1%; transform: translate(-50%, -50%); }
.ks-tooth img, .ks-mobile__tooth img { display: block; width: 100%; height: auto; }
.ks-tooth__float { animation: ks-float 3.5s ease-in-out infinite alternate; }
@keyframes ks-float { from { transform: translateY(3px); } to { transform: translateY(-3px); } }

/* Nodes */
.ks-node {
  position: absolute; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0;
  border-radius: var(--radius-pill); background: transparent; display: grid; place-items: center; cursor: pointer;
}
.ks-node__dot { position: relative; width: 22px; height: 22px; border-radius: var(--radius-pill); background: #a9b0ac; box-shadow: 0 0 0 5px rgba(169, 176, 172, 0.22); transition: background-color 400ms var(--ease-standard), box-shadow 400ms var(--ease-standard); }
.ks-node__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #a9b0ac; animation: ks-pulse 2s ease-out infinite; }
.ks-node.is-active .ks-node__dot { background: var(--fresh-green); box-shadow: 0 0 0 6px rgba(96, 179, 88, 0.22); }
.ks-node.is-active .ks-node__dot::after { animation: none; opacity: 0; }
.ks-node:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@keyframes ks-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.1); opacity: 0; } }

/* Flip cards */
.ks-card { position: absolute; z-index: 2; perspective: 1200px; }
.ks-card__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 700ms var(--ease-standard); }
.ks-card.is-open .ks-card__inner { transform: rotateY(180deg); transition-delay: 200ms; }
.ks-card__face {
  position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-16);
  padding: var(--space-24); border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  text-align: left; font: inherit; color: var(--charcoal);
}
.ks-card__front { background: #d9ddda; border: 1px solid rgba(36, 40, 36, 0.08); cursor: pointer; }
.ks-card__back { background: var(--sage); border: 4px solid #60b358; box-sizing: border-box; transform: rotateY(180deg); }
.ks-card__icon { flex: none; width: 48px; height: 48px; color: var(--charcoal); }
.ks-card__icon svg { display: block; width: 100%; height: 100%; }
.ks-card__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--charcoal); }
.ks-card__front .ks-card__title { flex: 1; }
.ks-card__chev { flex: none; width: 20px; height: 20px; color: var(--charcoal); }
.ks-card__text { margin: var(--space-8) 0 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--warm-gray); }

/* Tablet + mobile (<1200): tooth above three open cards */
@media (max-width: 1199px) {
  .ks { padding: var(--section-y-tablet) 0; }
  .ks-heart { width: 60%; bottom: 2%; opacity: 0.7; }
  .ks::before { top: 20%; width: 70%; }
  .ks::after { width: 60%; }
  .ks-stage { display: none; }
  .ks-mobile { display: block; margin-top: var(--space-32); }
  .ks-mobile__tooth { width: 120px; margin: 0 auto; }
  .ks-list { list-style: none; margin: var(--space-32) auto 0; padding: 0; max-width: 560px; display: grid; gap: var(--space-16); }
  .ks-item {
    display: flex; align-items: flex-start; gap: var(--space-16); padding: var(--space-24);
    background: var(--sage); border: 1px solid rgba(96, 179, 88, 0.35); border-radius: 16px;
    opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard);
  }
  .ks.is-in .ks-item { opacity: 1; transform: none; }
  .ks.is-in .ks-item:nth-child(2) { transition-delay: 120ms; }
  .ks.is-in .ks-item:nth-child(3) { transition-delay: 240ms; }
}
@media (max-width: 767px) {
  .ks { padding: var(--section-y-mobile) 0; }
  .ks-heart { display: none; }
  .ks::before { left: -40%; top: 26%; width: 110%; }
  .ks::after { right: -40%; bottom: -12%; width: 100%; }
  .ks__underline { width: 150px; }
  .ks-mobile__tooth { width: 96px; }
  .ks-item { padding: var(--space-20); gap: var(--space-12); }
  .ks-item .ks-card__icon { width: 40px; height: 40px; }
  .ks-item .ks-card__title { font-size: 20px; }
}

/* Reduced motion: no float, pulse or flowing line; state changes are instant */
@media (prefers-reduced-motion: reduce) {
  .ks-tooth__float, .ks-node__dot::after, .ks-line.is-active .ks-line__beam { animation: none !important; }
  .ks-line.is-active .ks-line__beam { stroke-dasharray: none; stroke-dashoffset: 0; }
  .ks-card__inner, .ks-card__rays { transition: none; }
  .ks-item { opacity: 1; transform: none; transition: none; }
}

/* ---------- Section 03 · Pristup malim pacijentima ----------
   Three dashed cards above their illustrations, joined by one winding path. A paper airplane
   travels it once (desktop) or with scrolling (tablet/mobile), leaving a solid orange trail. */
.ka { background: var(--surface-page); padding: var(--section-y-desktop) 0; overflow-x: clip; }
.ka__intro { max-width: 760px; margin: 0 auto; text-align: center; }

.ka-steps {
  position: relative; margin-top: var(--space-64); padding-bottom: 84px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter-desktop); row-gap: 28px; align-items: start;
}
.ka-step { display: contents; }
.ka-step--1 > * { grid-column: 1; }
.ka-step--2 > * { grid-column: 2; }
.ka-step--3 > * { grid-column: 3; }

.ka-card {
  grid-row: 1; position: relative; z-index: 1; align-self: stretch;
  padding: var(--space-24) var(--space-28, 28px); background: var(--porcelain);
  border: 2px dashed var(--fresh-green); border-radius: 22px;
  rotate: var(--ka-r, 0deg); translate: 0 0;
  transition: translate 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ka-card--1 { --ka-r: -2deg; }
.ka-card--2 { --ka-r: 1.5deg; }
.ka-card--3 { --ka-r: -1deg; }
.ka-card.is-up { translate: 0 -12px; }
.ka-card__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.22; color: var(--charcoal); }
.ka-card__text { margin: var(--space-12) 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--warm-gray); }

.ka-scene { grid-row: 2; position: relative; z-index: 1; }
.ka-scene img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }

/* Journey path, trail, highlight and plane (behind the cards and illustrations; the plane flies above) */
.ka-path { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ka-path__base { fill: none; stroke: #c3c8c4; stroke-width: 2; stroke-dasharray: 7 8; stroke-linecap: round; }
.ka-path__trail { fill: none; stroke: #ff8a4c; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 0 100000; }
.ka-path__glow { fill: none; stroke: #ffb27f; stroke-width: 6; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255, 138, 76, 0.9)) drop-shadow(0 0 9px rgba(255, 138, 76, 0.5)); }
.ka-path--fly { z-index: 2; }   /* highlight + plane fly above the artwork */
.ka-plane { filter: drop-shadow(0 2px 3px rgba(36, 40, 36, 0.18)); }

/* Tablet + mobile (<1200): one column, card then its illustration */
@media (max-width: 1199px) {
  .ka { padding: var(--section-y-tablet) 0; }
  .ka-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: var(--space-48) auto 0; row-gap: var(--space-24); padding-bottom: var(--space-32); }
  .ka-step > * { grid-column: 1; grid-row: auto; }
  .ka-step + .ka-step .ka-card { margin-top: var(--space-24); }
  .ka-card--1 { --ka-r: -1deg; } .ka-card--2 { --ka-r: 1deg; } .ka-card--3 { --ka-r: -0.6deg; }
  .ka-scene img { max-width: 360px; }
}
@media (max-width: 767px) {
  .ka { padding: var(--section-y-mobile) 0; }
  .ka-steps { margin-top: var(--space-40); }
  .ka-card { padding: var(--space-20); border-radius: 18px; }
  .ka-card__title { font-size: 21px; }
  .ka-scene img { max-width: 300px; }
}

/* Reduced motion: the full journey is shown at once, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .ka-card { transition: none; }
  .ka-path__glow { display: none; }
}

/* ---------- Section 04 · Povrede zuba kod dece ----------
   Soft Sage band with one editorial case study: PRE / POSLE photographs left, case text right.
   Photo slots are 4:5 placeholders; a real <img> inside .kc-photo keeps its own proportions. */
.kc { background: var(--sage); padding: var(--section-y-desktop) 0; }
.kc__intro { max-width: 760px; margin: 0 auto; text-align: center; }
.kc__lead { margin: var(--space-16) auto 0; max-width: 640px; }

.kc-case {
  margin-top: var(--space-64); background: var(--porcelain); border-radius: 32px;
  padding: var(--space-48);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--space-64); align-items: center;
  box-shadow: 0 1px 2px rgba(36, 40, 36, 0.04), 0 18px 40px -24px rgba(36, 40, 36, 0.18);
}
.kc-case__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
.kc-photo { position: relative; margin: 0; border-radius: 20px; overflow: hidden; background: var(--sage); aspect-ratio: 4 / 5; }
.kc-photo:has(img) { aspect-ratio: auto; }
.kc-photo img { display: block; width: 100%; height: auto; }
.kc-photo__slot {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-16); text-align: center;
  border: 1px dashed var(--control-border); border-radius: 20px;
  font-size: var(--fs-support); line-height: 1.4; color: var(--text-body);
}
.kc-photo__tag {
  position: absolute; left: var(--space-16); top: var(--space-16);
  padding: 6px 14px; border-radius: var(--radius-pill); background: var(--porcelain);
  font-family: var(--font-sans); font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal);
}

.kc-case__text { max-width: 440px; }
.kc-case__title { margin: var(--space-12) 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.15; color: var(--charcoal); text-wrap: balance; }
.kc-case__desc { margin-top: var(--space-16); }
.kc-case__actions { margin-top: var(--space-32); }

/* Tablet (<1200): photos on top at full card width, text below */
@media (max-width: 1199px) {
  .kc { padding: var(--section-y-tablet) 0; }
  .kc-case { margin-top: var(--space-48); padding: var(--space-32); grid-template-columns: minmax(0, 1fr); row-gap: var(--space-32); border-radius: 28px; }
  .kc-case__text { max-width: 560px; }
  .kc-case__title { font-size: 34px; }
}
/* Mobile (<768): photos first, then text and a full-width CTA */
@media (max-width: 767px) {
  .kc { padding: var(--section-y-mobile) 0; }
  .kc-case { margin-top: var(--space-32); padding: var(--space-16); row-gap: var(--space-24); border-radius: 24px; }
  .kc-case__photos { gap: var(--space-8); }
  .kc-photo, .kc-photo__slot { border-radius: 14px; }
  .kc-photo__tag { left: var(--space-8); top: var(--space-8); padding: 5px 10px; font-size: 11px; }
  .kc-photo__slot { font-size: 13px; padding: var(--space-8); }
  .kc-case__text { padding: 0 var(--space-8) var(--space-8); }
  .kc-case__title { font-size: 28px; }
  .kc-case__actions { margin-top: var(--space-24); }
  .kc-case__cta { width: 100%; }
}

/* ---------- Section 05 · Najčešća pitanja ----------
   Heading left (40%), accordion right (60%). Hairline dividers, no cards; Fresh Green only on the open item.
   Open/close animates grid rows 0fr → 1fr in 300ms. */
.kf { background: var(--porcelain); padding: var(--section-y-desktop) 0; }
.kf__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: var(--space-64); align-items: start; }
.kf__head { max-width: 420px; }
.kf-list { border-top: 1px solid rgba(36, 40, 36, 0.14); }
.kf-item { border-bottom: 1px solid rgba(36, 40, 36, 0.14); }
.kf-item__h { margin: 0; font: inherit; }
.kf-q {
  width: 100%; min-height: 64px; margin: 0; padding: var(--space-24) 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-20, 20px); text-align: left; color: var(--charcoal);
}
.kf-q:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 6px; }
.kf-q__num { flex: none; width: 28px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--warm-gray); transition: color 300ms var(--ease-standard); }
.kf-q__text { flex: 1; font-family: var(--font-serif); font-weight: 400; font-size: 23px; line-height: 1.3; }
.kf-q__icon {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: var(--radius-pill);
  border: 1px solid rgba(36, 40, 36, 0.22); color: var(--charcoal);
  transition: background-color 300ms var(--ease-standard), border-color 300ms var(--ease-standard), color 300ms var(--ease-standard);
}
.kf-q__bar { position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--ease-standard); }
.kf-q__bar--v { transform: rotate(90deg); }
.kf-q:hover .kf-q__icon { border-color: rgba(36, 40, 36, 0.4); }

.kf-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-standard); }
.kf-a__inner { overflow: hidden; min-height: 0; }
.kf-a__text {
  margin: 0; padding: 0 56px var(--space-24) 48px; max-width: 640px;
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body);
  opacity: 0; transition: opacity 300ms var(--ease-standard);
}

/* Open item: the only place Fresh Green appears */
.kf-item.is-open .kf-a { grid-template-rows: 1fr; }
.kf-item.is-open .kf-a__text { opacity: 1; }
.kf-item.is-open .kf-q__num { color: var(--deep-green); }
.kf-item.is-open .kf-q__icon { background: var(--fresh-green); border-color: var(--fresh-green); color: #ffffff; }
.kf-item.is-open .kf-q__bar--v { transform: rotate(90deg) scaleX(0); }
.kf-item.is-open { border-bottom-color: rgba(96, 179, 88, 0.55); }

/* Tablet (<1200): heading above the accordion */
@media (max-width: 1199px) {
  .kf { padding: var(--section-y-tablet) 0; }
  .kf__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-40); }
  .kf__head { max-width: 560px; }
}
@media (max-width: 767px) {
  .kf { padding: var(--section-y-mobile) 0; }
  .kf__grid { row-gap: var(--space-32); }
  .kf-q { padding: var(--space-20) 0; gap: var(--space-12); align-items: flex-start; }
  .kf-q__num { width: 24px; padding-top: 4px; font-size: 13px; }
  .kf-q__text { font-size: 19px; }
  .kf-q__icon { width: 32px; height: 32px; }
  .kf-a__text { padding: 0 0 var(--space-20) 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-a, .kf-a__text, .kf-q__bar, .kf-q__icon, .kf-q__num { transition: none; }
}

/* ---------- Section 06 · Završni poziv ----------
   Soft Sage band, centred copy, one orange CTA. Two oversized organic shapes in existing colours
   (porcelain and a whisper of Fresh Green) sit behind the content. */
.kz { position: relative; isolation: isolate; overflow: hidden; background: var(--sage); padding: 152px 0; text-align: center; }
.kz::before, .kz::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.kz::before {                                   /* large porcelain form behind the copy */
  left: 50%; top: 50%; width: min(1180px, 92vw); aspect-ratio: 1.9; transform: translate(-50%, -50%) rotate(-6deg);
  border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%; background: var(--porcelain); opacity: 0.4;
}
.kz::after {                                    /* soft green echo, lower right */
  right: -12%; bottom: -38%; width: 46%; aspect-ratio: 1.2;
  border-radius: 44% 56% 48% 52% / 58% 42% 58% 42%; background: rgba(96, 179, 88, 0.05);
}
.kz__inner { display: flex; flex-direction: column; align-items: center; }
.kz__title {
  margin: var(--space-16) 0 0; max-width: 820px;
  font-family: var(--font-serif); font-weight: 400; font-size: 64px; line-height: 1.08; letter-spacing: -0.01em; color: var(--charcoal); text-wrap: balance;
}
.kz__text { margin: var(--space-24) 0 0; max-width: 580px; font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-body); text-wrap: pretty; }
.kz__actions { margin-top: var(--space-40); }
.kz__cta { min-height: 56px; padding: 0 var(--space-40); font-size: 17px; color: #ffffff; }
.kz__cta:hover { color: #ffffff; }

@media (max-width: 1199px) {
  .kz { padding: 112px 0; }
  .kz__title { font-size: 48px; max-width: 640px; }
  .kz::before { width: 118%; aspect-ratio: 1.5; }
}
@media (max-width: 767px) {
  .kz { padding: 88px 0; }
  .kz__title { font-size: 36px; line-height: 1.12; }
  .kz__text { font-size: var(--fs-body); }
  .kz__actions { width: 100%; margin-top: var(--space-32); }
  .kz__cta { width: 100%; }
  .kz::before { width: 170%; aspect-ratio: 1.1; }
  .kz::after { width: 90%; right: -40%; bottom: -20%; }
}