/* Deep Clean · Ozoniranje (service page). The hero frame holds the molecule: three atoms drawn as the site's own white

   round buttons; the aqua one leaves (O3 -> O2 + O) and the pair settles. No photo of ozone work exists, so none is shown as one. */

/* ---------------------------------------------------------------- hero molecule */
.oz-frame { background: var(--stone); }
.oz-stage { position: absolute; inset: 0; }
.oz-svg { position: absolute; left: 50%; top: 47%; height: 80%; width: auto; max-width: 90%; overflow: visible; transform: translate(-50%, -50%); }
.oz-o { font-family: Manrope, system-ui, sans-serif; font-weight: 800; font-size: 50px; letter-spacing: -.04em; fill: #101518; text-anchor: middle; dominant-baseline: central; }
.oz-pair, .oz-free { transform-box: fill-box; transform-origin: center; }
.oz-lab { position: absolute; left: clamp(18px, 3vw, 46px); top: clamp(10px, 2vw, 30px); display: grid; margin: 0; font-weight: 800; font-size: clamp(54px, 7.6vw, 128px); letter-spacing: -.05em; line-height: 1; }
.oz-lab span { grid-area: 1 / 1; }
.oz-lab sub { position: relative; top: .22em; margin-left: .03em; font-size: .44em; line-height: 0; vertical-align: baseline; }
.oz-l2 { opacity: 0; }
.oz-cap sub, .oz-lab sub { font-feature-settings: normal; }
.oz-cap sub { font-size: .75em; line-height: 0; }
.mo .oz-free { animation: oz-leave 7.2s infinite; }
.mo .oz-pair { animation: oz-pair 7.2s infinite; }
.mo .oz-l3 { animation: oz-l3 7.2s infinite; }
.mo .oz-l2 { animation: oz-l2 7.2s infinite; }
.oz-stage:not(.is-vis) .oz-free, .oz-stage:not(.is-vis) .oz-pair, .oz-stage:not(.is-vis) .oz-l3, .oz-stage:not(.is-vis) .oz-l2 { animation-play-state: paused; }
@keyframes oz-leave {
  0%, 22% { transform: translate(0, 0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.34, 1.42, .52, 1); }
  42% { transform: translate(150px, -116px) scale(.9); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  70% { transform: translate(196px, -150px) scale(.86); opacity: 1; animation-timing-function: ease-in; }
  80% { transform: translate(214px, -162px) scale(.78); opacity: 0; }
  88% { transform: translate(0, 0) scale(.5); opacity: 0; animation-timing-function: cubic-bezier(.34, 1.42, .52, 1); }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes oz-pair {
  0%, 24% { transform: translate(0, 0) rotate(0deg); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  48%, 80% { transform: translate(54px, 14px) rotate(31.6deg); animation-timing-function: cubic-bezier(.76, 0, .24, 1); }
  94%, 100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes oz-l3 { 0%, 24% { opacity: 1; transform: none; } 34%, 86% { opacity: 0; transform: translateY(-14px); } 96%, 100% { opacity: 1; transform: none; } }
@keyframes oz-l2 { 0%, 28% { opacity: 0; transform: translateY(14px); } 40%, 82% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(14px); } }
/* phones: the photo caption moves to the top (site.css), so the formula moves to the bottom */
@media (max-width: 699px) { .oz-svg { top: 46%; height: auto; width: 100%; max-width: none; } .oz-lab { top: auto; bottom: 12px; left: 16px; } }

/* ---------------------------------------------------------------- why ozone */
.oz-st { padding-bottom: clamp(30px, 4vw, 60px); }
.oz-st-l { margin-bottom: clamp(18px, 2.2vw, 30px); }
.oz-st-list { list-style: none; margin: 0; padding: 0; }
.oz-st-i { display: grid; grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 1fr); gap: clamp(12px, 2vw, 30px); align-items: center; padding: clamp(18px, 2.4vw, 34px) 0; border-top: 1px solid var(--line); }
.oz-st-i:last-child { border-bottom: 1px solid var(--line); }
.oz-st-n { display: flex; align-items: center; gap: 5px; }
.oz-st-n i { width: clamp(13px, 1.3vw, 19px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.oz-st-n i:last-child { background: var(--aqua); }
.oz-st-t { font-weight: 800; font-size: clamp(28px, 4.2vw, 70px); letter-spacing: -.05em; line-height: 1.04; text-wrap: balance; }
.oz-st-i:nth-child(2) { transition-delay: .08s; }
.oz-st-i:nth-child(3) { transition-delay: .16s; }

/* ---------------------------------------------------------------- where ozone helps */
.oz-wh { padding-top: clamp(50px, 6vw, 100px); }
.oz-bento { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: clamp(280px, 27vw, 420px) auto; gap: 14px; margin-top: clamp(28px, 3.4vw, 52px); }
.oz-c { position: relative; min-width: 0; margin: 0; border-radius: var(--Rc); overflow: hidden; background: var(--white); }
.oz-c1 { grid-column: 1; grid-row: 1 / 3; min-height: 560px; border-radius: var(--R); }
.oz-c2 { grid-column: 2; grid-row: 1; }
.oz-trio { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.oz-ph { position: absolute; inset: 0; overflow: hidden; background: var(--stone); }
.oz-ph img { position: absolute; inset: -7% 0; width: 100%; height: 114%; object-fit: cover; }
.oz-ct { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: min(440px, calc(100% - 24px)); padding: 18px 22px 20px; border-radius: calc(var(--Rc) - 12px); background: rgba(255, 255, 255, .96); }
.oz-c1 .oz-ct { border-radius: calc(var(--R) - 12px); }
.oz-t { font-weight: 800; font-size: clamp(21px, 1.8vw, 28px); letter-spacing: -.03em; line-height: 1.15; }
.oz-p { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.oz-c--t { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 230px; padding: clamp(20px, 2.2vw, 30px); }
.oz-mol { position: relative; display: block; width: 44px; height: 32px; margin-bottom: auto; }
.oz-mol i { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--stone); }
.oz-mol i:nth-child(1) { left: 0; top: 13px; }
.oz-mol i:nth-child(2) { left: 13px; top: 0; }
.oz-mol i:nth-child(3) { left: 26px; top: 13px; background: var(--aqua); }
.oz-c--t .oz-t { margin-top: 26px; }
@media (max-width: 1099px) { .oz-trio { grid-template-columns: minmax(0, 1fr); } .oz-c--t { min-height: 0; } .oz-mol { display: none; } .oz-c--t .oz-t { margin-top: 0; } }
@media (max-width: 899px) {
  .oz-bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .oz-c1, .oz-c2, .oz-trio { grid-column: 1; grid-row: auto; }
  .oz-c1 { min-height: 0; aspect-ratio: 4 / 4.6; }
  .oz-c2 { aspect-ratio: 4 / 3.4; }
  .oz-trio { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- booking and price, cross links */
.oz-ak { padding: clamp(50px, 7vw, 110px) 0 clamp(50px, 6vw, 100px); }
.oz-ak-in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; padding: clamp(26px, 3vw, 46px) clamp(26px, 3vw, 46px) clamp(26px, 3vw, 46px) clamp(34px, 4.4vw, 70px); border-radius: 999px; background: var(--white); }
.oz-ak-t { max-width: 640px; }
.oz-ak-p { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--muted); }
.oz-ak-b { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1199px) { .oz-ak-in { border-radius: clamp(32px, 4vw, 56px); } }
.oz-xl { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 30px; margin-top: clamp(24px, 3vw, 40px); }
.oz-xl-p { max-width: 42ch; font-weight: 600; font-size: 16.5px; }
.oz-xl-r { display: flex; flex-wrap: wrap; gap: 10px; }

/* hero headline: between 1000 and 1199 px the two-column hero is narrow; long Cyrillic words must not be clipped */
@media (min-width: 1000px) and (max-width: 1199px) { .oz-hero .ph-h1 { font-size: 6.2vw; } }