/* Holistic Nutri, pravac 3: DAH.
   Concept: the page breathes. Display type (Anybody, variable width 50-150) inhales and exhales on an
   8 second cycle; the page colour walks through the brand palette like one day, morning to evening.
   Colours: brand book only. Words: approved copy only (class .v = verbatim). */

@property --ink { syntax: '<color>'; inherits: true; initial-value: #974316; }
@property --acc { syntax: '<color>'; inherits: true; initial-value: #C14D36; }

:root {
  --bg: #F5EFE3;
  --ink: #974316;
  --acc: #C14D36;
  --hd: 74px;
  --pad: clamp(20px, 4.2vw, 76px);
  --line: color-mix(in srgb, var(--ink) 32%, transparent);
  --disp: 'Anybody', 'Arial Narrow', sans-serif;
  --text: 'Switzer', system-ui, sans-serif;
  transition: --ink .6s ease, --acc .6s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--text); font-size: clamp(17px, 1.22vw, 19.5px); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ol, ul, figure, blockquote, dl, dd { margin: 0; }
::selection { background: var(--ink); color: var(--bg); }

/* ---------- stage system ---------- */
.s { position: relative; color: var(--ink); overflow-x: clip; }
html:not(.journey) .s { --ink: var(--sink); --acc: var(--sacc); --line: color-mix(in srgb, var(--sink) 32%, transparent); background: var(--sbg); }

/* ---------- brand marks (brand files used as masks so they take the stage colour) ---------- */
.mk { display: inline-block; background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mk-word { --m: url(/assets/logo/wordmark-terra.svg); aspect-ratio: 516.61 / 96.49; }
.mk-sym { --m: url(/assets/logo/symbol-terra.svg); aspect-ratio: 394.25 / 400.93; }
.sig { display: block; --m: url(/assets/logo/potpis.png); aspect-ratio: 3285 / 627; background: var(--ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* ---------- shared type ---------- */
.lab, .def-idx, .loop-idx, .rp8-lab, .firme-lab, .guide-lab, .kontakt-dl dt, .letter-fig figcaption, .def-fig figcaption,
.hero-progs a, .menu-n, .blog-n, .ft-top, .meter, .hd-breath, .rad-h, .zam-h, .zam-sw, .stack-dob, .rp2-lab, .band-ml {
  font-family: var(--disp); font-weight: 600; font-stretch: 150%;
  font-size: 11.5px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase;
}
.ph {
  display: inline-flex; align-items: center; gap: .55em; vertical-align: middle;
  font-family: var(--text); font-weight: 500; font-style: normal; font-stretch: 100%;
  font-size: 13px; letter-spacing: .01em; line-height: 1; text-transform: none;
  padding: .62em 1em; border: 1px dashed currentColor; border-radius: 999px; white-space: nowrap; opacity: .9;
}
.ph::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }

/* ---------- header: a breath indicator in the middle ---------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 70; height: var(--hd);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--pad); color: var(--ink);
  transition: transform .6s cubic-bezier(.2,.75,.2,1), background-color .35s ease;
}
.hd.is-scrolled { background: var(--bg); }
.hd.is-hidden { transform: translateY(-102%); }
.hd-logo { display: block; width: clamp(122px, 10.5vw, 170px); line-height: 0; }
.hd-logo .mk-word { width: 100%; }
.hd-breath { justify-self: center; display: flex; align-items: center; gap: 12px; }
.hd-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--acc); transform: scale(calc(.45 + .95 * var(--b, .5))); }
.hd-word { min-width: 7.6em; }
.hd-right { justify-self: end; display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.hd-cta, .hd-menu {
  font-family: var(--disp); font-weight: 600; font-stretch: 125%; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: inherit;
}
.hd-cta { padding-bottom: 4px; border-bottom: 1.5px solid currentColor; }
.hd-menu { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px;
  font-family: var(--disp); font-weight: 600; font-stretch: 125%; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.hd-menu-c { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; transition: background-color .3s; }
.hd-menu-c::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: currentColor; transform: scale(calc(.25 + .6 * var(--b, .5))); }
.hd-menu:focus-visible, .hd-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.menu-open .hd { --ink: #974316; --acc: #C14D36; background: transparent; transform: none; }

/* ---------- menu: opens like an inhale from the button ---------- */
.menu {
  position: fixed; inset: 0; z-index: 65; background: #E3D7C4; color: #974316;
  --ink: #974316; --acc: #C14D36;
  display: grid; grid-template-columns: 1.5fr .7fr; gap: 4vw;
  padding: calc(var(--hd) + 5vh) var(--pad) 12vh;
  visibility: hidden; clip-path: circle(0px at calc(100% - var(--pad) - 13px) calc(var(--hd) / 2));
  transition: clip-path .9s cubic-bezier(.7,0,.25,1), visibility 0s linear .9s;
}
.menu.is-open { visibility: visible; clip-path: circle(160vmax at calc(100% - var(--pad) - 13px) calc(var(--hd) / 2)); transition: clip-path 1s cubic-bezier(.7,0,.25,1); }
.menu-nav ol { list-style: none; padding: 0; }
.menu-nav li { border-top: 1px solid rgba(151,67,22,.28); }
.menu-nav a { display: flex; align-items: baseline; gap: 2.4vw; padding: 1.2vh 0; text-decoration: none; }
.menu-t {
  font-family: var(--disp); font-size: clamp(42px, 9.6vh, 118px); line-height: .96;
  font-variation-settings: "wdth" 58, "wght" 300; transition: font-variation-settings .8s cubic-bezier(.3,.7,.2,1);
}
.menu-nav a:hover .menu-t, .menu-nav a:focus-visible .menu-t { font-variation-settings: "wdth" 150, "wght" 460; }
.menu-nav a:focus-visible { outline: none; }
.menu-side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 4vh; }
.menu-sym { width: min(26vw, 38vh); transform: scale(calc(.8 + .2 * var(--b, .5))); background: #D88269; }
.menu-progs { display: grid; gap: 10px; font-family: var(--disp); font-stretch: 120%; font-size: clamp(18px, 1.6vw, 24px); }
.menu-progs a { text-decoration: none; border-bottom: 1px solid rgba(151,67,22,.35); padding-bottom: 6px; }
.menu-cta { font-family: var(--disp); font-weight: 600; font-stretch: 150%; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; display: inline-grid; place-items: center; width: 150px; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid currentColor;
  transition: background-color .35s, color .35s; }
.menu-cta:hover { background: #974316; color: #F5EFE3; }

/* =========================================================
   01 HERO: three lines breathing in a wave
   ========================================================= */
.hero { min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--hd) + 3vh) var(--pad) calc(62px + 2.4vh); overflow: hidden; }
.hero-sym { position: absolute; right: -7vw; top: 50%; width: min(66vh, 52vw); translate: 0 -54%;
  background: #D88269; opacity: .55; transform: scale(calc(.8 + .2 * var(--b, .5))) rotate(calc(-8deg + 16deg * var(--b, .5))); }
.hero-h { align-self: center; position: relative; z-index: 1; font-family: var(--disp); font-weight: 300; line-height: .9; letter-spacing: -.005em; }
.bl { --k: 1; display: block; width: max-content; white-space: nowrap; font-size: 11vw;
  font-variation-settings: "wdth" calc(100 + var(--amp) * var(--k) * 50 * (2 * var(--b, .5) - 1)), "wght" calc(250 + 170 * var(--b, .5)); }
.bl + .bl { margin-top: .06em; }
.hero-foot { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 3vw;
  padding-top: 2.6vh; border-top: 1px solid var(--line); }
.hero-progs { display: flex; gap: 22px; flex-wrap: wrap; }
.hero-progs a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.meter { display: flex; align-items: center; gap: 14px; justify-self: center; }
.meter-w { min-width: 6.2em; text-align: right; }
.meter-bar { width: clamp(90px, 12vw, 190px); height: 1.5px; background: var(--line); position: relative; overflow: hidden; }
.meter-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--b, .5)); }
.meter-c { width: 1.2em; font-variant-numeric: tabular-nums; }
.hero-cue { justify-self: end; display: flex; align-items: center; gap: 12px; text-decoration: none;
  font-family: var(--disp); font-weight: 600; font-stretch: 150%; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.hero-cue-l { width: 1.5px; height: 46px; background: var(--ink); transform-origin: top; animation: cue 2.6s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* =========================================================
   02 WELCOME: one long sentence, read word by word
   ========================================================= */
.welcome { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; padding: 20vh var(--pad) 24vh; align-items: start; }
.welcome-t { grid-column: 2 / span 8; font-family: var(--disp); font-weight: 340; font-stretch: 94%; font-size: clamp(31px, 4.35vw, 76px); line-height: 1.06; letter-spacing: -.008em; }
.welcome-t .w { transition: none; }
.welcome-fig { grid-column: 11 / span 2; margin-top: 26vh; }
.welcome-fig img { width: 100%; height: auto; aspect-ratio: 2 / 4.4; object-fit: cover; object-position: 60% 50%; }

/* =========================================================
   03 HRANA: a single line that stretches from narrow to wide
   ========================================================= */
.hrana-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: calc(var(--hd) + 2vh) var(--pad) 10vh; }
.hrana-h { font-family: var(--disp); font-weight: 330; line-height: .88; }
.hl { display: block; width: max-content; margin: 0 auto; white-space: nowrap; font-size: 9vw;
  font-variation-settings: "wdth" var(--w, 150), "wght" var(--g, 400); }
.hrana-p { max-width: 36ch; margin-top: 6vh; font-size: clamp(18px, 1.45vw, 23px); line-height: 1.55; }

/* =========================================================
   04 SPLIT: one sentence that opens in the middle
   ========================================================= */
.split-pin { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 3vh; padding: calc(var(--hd) + 3vh) var(--pad) 10vh; position: relative; }
.split-lead { font-size: clamp(18px, 1.4vw, 22px); max-width: 30ch; }
.split-h { font-family: var(--disp); font-weight: 420; line-height: .9; white-space: nowrap; display: flex; justify-content: center; gap: .26em; font-size: 7vw;
  font-variation-settings: "wdth" 125, "wght" 420; }
.split-h .sa, .split-h .sb { display: inline-block; }
.split-mid { font-family: var(--disp); font-weight: 300; text-align: center; font-size: clamp(28px, 4.6vw, 80px); line-height: 1; font-variation-settings: "wdth" var(--w, 112), "wght" 330; }
.split-p { max-width: 38ch; align-self: flex-end; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; }
.motion .split-lead { position: absolute; left: var(--pad); top: calc(var(--hd) + 5vh); }
.motion .split-mid { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
.motion .split-p { position: absolute; right: var(--pad); bottom: 11vh; }

/* =========================================================
   05 DEFINITION: a dictionary entry
   ========================================================= */
.def { padding: 17vh var(--pad) 15vh; overflow: hidden; }
.def-pre { font-size: clamp(22px, 1.75vw, 28px); line-height: 1.35; max-width: 32ch; margin-bottom: 3.5vh; }
.def-h { font-family: var(--disp); font-weight: 560; line-height: .82; }
.def-w { display: block; width: max-content; white-space: nowrap; font-size: 9vw; font-variation-settings: "wdth" var(--w, 150), "wght" 560; }
.def-grid { display: grid; grid-template-columns: 2fr 6fr 3fr; gap: 3vw; margin-top: 4.5vh; padding-top: 2.4vh; border-top: 2px solid var(--ink); align-items: start; }
.def-text { font-family: var(--disp); font-weight: 370; font-stretch: 106%; font-size: clamp(26px, 2.95vw, 50px); line-height: 1.1; }
.def-fig img { width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; }
.def-fig figcaption { margin-top: 10px; }

/* =========================================================
   06 STAIRS: four breaths stepping out
   ========================================================= */
.stairs { display: grid; grid-template-columns: 17vw 1fr; column-gap: 2vw; padding: 9vh var(--pad) 7vh; }
.stairs-l { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 1; list-style: none; padding: 0; font-family: var(--disp); line-height: 1.05; }
.stairs-l li { padding: 1.4vh 0 1.4vh calc(var(--i) * 6.4vw); }
.stairs-l li .st { border-bottom: 1px solid var(--line); padding-bottom: .12em; }
.st { display: inline-block; white-space: nowrap; font-size: 3.2vw;
  font-variation-settings: "wdth" calc(84 + 32 * var(--b, .5)), "wght" calc(320 + 130 * var(--b, .5)); }
.stairs-fig { grid-column: 1; grid-row: 2; margin-top: calc(-2 * var(--rowh, 80px) + 1vh); }
.stairs-fig img { width: 100%; height: auto; aspect-ratio: 3 / 4.2; object-fit: cover; object-position: 50% 60%; }

/* =========================================================
   07 ORB: a small circle grows into the whole screen
   ========================================================= */
.orb-pin { position: relative; height: 100svh; overflow: hidden; }
.orb-media { position: absolute; inset: 0; overflow: hidden; }
.orb-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.orb-ring, .orb-word { display: none; }
.orb-txt { position: relative; }
.motion .orb-media { clip-path: circle(19vmin at 50% 50%); will-change: clip-path; }
.motion .orb-ring { display: block; position: absolute; left: 50%; top: 50%; width: 52vmin; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--ink);
  translate: -50% -50%; transform: scale(calc(.78 + .34 * var(--b, .5))); pointer-events: none; }
.motion .orb-word { display: block; position: absolute; left: 50%; top: calc(50% + 31vmin); translate: -50% 0;
  font-family: var(--disp); font-weight: 600; font-stretch: 150%; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; }
.motion .orb-txt { position: absolute; left: var(--pad); top: 50%; translate: 0 -50%; width: min(41vw, 680px); }
.orb-t { font-family: var(--disp); font-weight: 360; font-stretch: 104%; font-size: clamp(30px, 3.7vw, 64px); line-height: 1.02; }
.orb-t2 { margin-top: 3.4vh; max-width: 38ch; font-size: clamp(17px, 1.3vw, 20.5px); line-height: 1.6; }
html:not(.motion) .orb-pin { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; padding: 14vh var(--pad); align-items: center; }
html:not(.motion) .orb-media { position: relative; aspect-ratio: 3 / 4; border-radius: 50%; }

/* =========================================================
   08 ZAMISLI: the "Ne" list exhales, the new list breathes in
   ========================================================= */
.zam-pin { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; gap: 4vh; padding: calc(var(--hd) + 5vh) var(--pad) 12vh; }
.zam-h { max-width: 34ch; font-size: clamp(12px, 1vw, 15px); }
.zam-stage { display: grid; align-content: center; }
.zam-a, .zam-b { list-style: none; padding: 0; }
.zam-a li { font-family: var(--disp); font-size: clamp(25px, 3vw, 52px); line-height: 1.12; padding: .36em 0; border-top: 1px solid var(--line);
  font-variation-settings: "wdth" var(--w, 100), "wght" var(--g, 330); }
.zam-bwrap { margin-top: 8vh; }
.zam-sw { margin-bottom: 2.4vh; }
.zam-b li { font-family: var(--disp); font-size: clamp(25px, 2.7vw, 48px); line-height: 1.12; padding: .2em 0;
  font-variation-settings: "wdth" var(--w, 112), "wght" var(--g, 430); }
.zam-b li::before { content: ""; display: inline-block; width: .42em; height: .42em; border-radius: 50%; background: var(--acc); margin-right: .45em; vertical-align: .14em; }
.zam-end { justify-self: end; font-family: var(--disp); font-weight: 500; font-stretch: 130%; font-size: clamp(20px, 1.9vw, 30px); }
@media (min-width: 1000px) {
  .motion .zam-a, .motion .zam-bwrap { grid-area: 1 / 1; }
  .motion .zam-bwrap { margin-top: 0; }
  .motion .zam-a li, .motion .zam-b li { white-space: nowrap; width: max-content; }
  .motion .zam-a li { border-top: 0; }
}

/* =========================================================
   09 RAD: seven parts on a horizontal track
   ========================================================= */
.rad-pin { padding-top: calc(var(--hd) + 2vh); }
.rad-head { display: flex; align-items: baseline; gap: 3vw; padding: 0 var(--pad) 2.2vh; position: relative; }
.rad-h { font-size: clamp(12px, 1vw, 15px); }
.rad-count { margin-left: auto; font-family: var(--disp); font-weight: 300; font-stretch: 150%; font-size: clamp(26px, 2.6vw, 44px); line-height: 1; display: none; }
.rad-of { opacity: .55; margin-left: .3em; }
.rad-prog { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 1px; background: var(--line); display: none; }
.rad-prog-f { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }
.rad-track { display: grid; gap: 0; padding: 0 var(--pad) 12vh; }
.rp { position: relative; padding: 7vh 0; border-top: 1px solid var(--line); display: grid; align-content: start; gap: 2.4vh; }
.rp-n { font-family: var(--disp); font-weight: 200; font-size: clamp(110px, 20vh, 230px); line-height: .78; font-variation-settings: "wdth" var(--w, 150), "wght" 220; }
.rp-t { font-family: var(--disp); font-weight: 520; font-stretch: 118%; font-size: clamp(22px, 2vw, 34px); line-height: 1.08; }
.rp-strong { font-weight: 600; }
.rp p { max-width: 46ch; }
.rp1-big { font-family: var(--disp); font-weight: 300; font-stretch: 140%; font-size: clamp(34px, 4.3vw, 76px); line-height: .96; max-width: none !important; }
.rp1-cols { columns: 3 20ch; column-gap: 2.6vw; font-size: clamp(15.5px, 1.05vw, 17.5px); line-height: 1.55; }
.rp1-cols p { break-inside: avoid; margin-bottom: .9em; max-width: none; }
.rp2-fig img, .rp3-fig img { width: 100%; height: 100%; object-fit: cover; }
.rp2-fig, .rp3-fig { max-width: 560px; }
.rp2-l { list-style: none; padding: 0; font-family: var(--disp); font-weight: 380; font-stretch: 130%; font-size: clamp(22px, 2.1vw, 36px); line-height: 1.12; }
.rp2-l li { border-bottom: 1px solid var(--line); padding: .25em 0; }
.rp2-txt { display: grid; gap: 2.2vh; align-content: start; font-size: clamp(15.5px, 1.05vw, 17.5px); }
.rp3-big, .rp5-big, .rp4-big { font-family: var(--disp); font-weight: 330; font-stretch: 112%; font-size: clamp(30px, 3.4vw, 60px); line-height: 1.02; max-width: 20ch !important; }
.rp3-txt { display: grid; gap: 2.4vh; align-content: start; }
.rp4-p, .rp5-p { font-size: clamp(16px, 1.2vw, 19px); }
.rp6-breath { display: grid; place-items: center; position: relative; }
.rp6-sym { width: min(42vh, 30vw); background: var(--acc); transform: scale(calc(.62 + .38 * var(--b, .5))); }
.rp6-word { position: absolute; inset: auto 0 4vh 0; text-align: center; font-family: var(--disp); font-weight: 600; font-stretch: 150%; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.rp6-txt { display: grid; gap: 2vh; align-content: center; font-size: clamp(16px, 1.15vw, 19px); }
.rp7-l { list-style: none; padding: 0; font-family: var(--disp); font-weight: 300; font-size: clamp(30px, 3.6vw, 64px); line-height: 1; }
.rp7-l li { padding: .12em 0; font-variation-settings: "wdth" 150, "wght" 300; }
.rp7-l li:nth-child(even) { font-variation-settings: "wdth" 62, "wght" 420; }
.rp7-p, .rp7-p2 { font-size: clamp(15.5px, 1.08vw, 18px); }
.rp8 { align-content: center; justify-items: start; }
.rp8-name { font-family: var(--disp); font-weight: 320; font-stretch: 140%; font-size: clamp(34px, 3.6vw, 64px); line-height: 1; }
.rp8-ph .ph { font-size: 15px; }
.rp8-cta, .price-cta {
  display: inline-grid; place-items: center; text-align: center; width: clamp(140px, 11vw, 190px); aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid currentColor; text-decoration: none; font-family: var(--disp); font-weight: 600; font-stretch: 150%; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; transition: background-color .4s, color .4s, transform .6s cubic-bezier(.2,.8,.2,1);
}
.rp8-cta:hover { background: var(--ink); color: #974316; transform: scale(1.06); }

@media (min-width: 1000px) {
  .motion .rad-count, .motion .rad-prog { display: block; }
  .motion .rad-pin { height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--hd) + .4vh); }
  .motion .rad-head { padding-bottom: 1.4vh; }
  .motion .rad-track { will-change: transform; display: flex; width: max-content; height: 100%; padding: 2.6vh 0 calc(92px + 1vh) var(--pad); }
  .motion .rp { flex: none; height: 100%; padding: 0 4.2vw; border-top: 0; border-left: 1px solid var(--line); gap: 1.5vh; }
  .motion .rp .rp-n { font-size: clamp(56px, 12.5vh, 200px); }
  .motion .rp .rp-t { font-size: clamp(17px, min(1.9vw, 3vh), 32px); }
  .motion .rp .rp1-big { font-size: clamp(28px, min(4.1vw, 6.4vh), 74px); }
  .motion .rp .rp3-big, .motion .rp .rp4-big, .motion .rp .rp5-big { font-size: clamp(22px, min(3vw, 4.7vh), 56px); }
  .motion .rp1-cols, .motion .rp2-txt, .motion .rp3-txt, .motion .rp4-p, .motion .rp5-p, .motion .rp6-txt, .motion .rp7-p, .motion .rp7-p2 { font-size: clamp(13.5px, min(1.06vw, 2vh), 18px); line-height: 1.5; }
  .motion .rp2-l { font-size: clamp(17px, min(1.9vw, 3.1vh), 32px); }
  .motion .rp7-l { font-size: clamp(22px, min(3.3vw, 5.4vh), 60px); }
  .motion .rp6-sym { width: min(38vh, 27vw); }
  .motion .rp8-name { font-size: clamp(30px, min(3.4vw, 5.6vh), 62px); }
  .motion .rp:first-child { border-left: 0; padding-left: 0; }
  .motion .rp1 { width: 96vw; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 3vw; }
  .motion .rp1 .rp-n { grid-row: 1 / 3; }
  .motion .rp1 .rp-t { align-self: end; }
  .motion .rp1-big { grid-column: 2; }
  .motion .rp1-cols { grid-column: 1 / -1; align-self: end; columns: 4 17ch; }
  .motion .rp2 { width: 92vw; grid-template-columns: .9fr 1.6fr; grid-template-rows: auto auto 1fr; column-gap: 3vw; }
  .motion .rp2-txt { grid-template-columns: 1.25fr 1fr; column-gap: 2.6vw; row-gap: 1.6vh; }
  .motion .rp2-txt > * { grid-column: 1; }
  .motion .rp2-txt > p:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .motion .rp2 .rp-n, .motion .rp2 .rp-t { grid-column: 2; }
  .motion .rp2-fig { grid-column: 1; grid-row: 1 / -1; min-height: 0; max-width: none; }
  .motion .rp2-txt { grid-column: 2; }
  .motion .rp3 { width: 70vw; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto 1fr; column-gap: 3vw; }
  .motion .rp3 .rp-n, .motion .rp3 .rp-t, .motion .rp3-txt { grid-column: 1; }
  .motion .rp3-fig { grid-column: 2; grid-row: 2 / -1; align-self: end; height: min(46vh, 100%); max-width: none; }
  .motion .rp4 { width: 56vw; align-content: space-between; }
  .motion .rp4 .rp-n { justify-self: end; }
  .motion .rp5 { width: 58vw; grid-template-rows: 1fr auto auto auto; }
  .motion .rp5 .rp-n { align-self: start; }
  .motion .rp6 { width: 76vw; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: 4vw; }
  .motion .rp6 .rp-n, .motion .rp6 .rp-t { grid-column: 1; }
  .motion .rp6-breath { grid-column: 2; grid-row: 1 / -1; }
  .motion .rp6-txt { grid-column: 1; }
  .motion .rp7 { width: 70vw; grid-template-columns: 1fr 1.3fr; column-gap: 4vw; }
  .motion .rp7 .rp-n, .motion .rp7 .rp-t, .motion .rp7-p { grid-column: 1; }
  .motion .rp7-l { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .motion .rp7-p2 { grid-column: 1; }
  .motion .rp8 { width: 44vw; padding-right: calc(var(--pad) + 4vw); }
}

/* =========================================================
   10 LETTER: "Zašto da radiš baš sa mnom?"
   ========================================================= */
.letter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; padding: 15vh var(--pad) 10vh; }
.letter-h { grid-column: 1 / -1; font-family: var(--disp); font-weight: 300; line-height: .9; margin-bottom: 9vh; }
.lh { display: block; width: max-content; white-space: nowrap; font-size: 8vw; font-variation-settings: "wdth" var(--w, 100), "wght" 300; }
.lh + .lh { margin-left: auto; }
.letter-fig { grid-column: 1 / span 4; position: sticky; top: calc(var(--hd) + 4vh); align-self: start; }
.letter-fig img { width: 100%; height: auto; aspect-ratio: 3 / 4.3; object-fit: cover; object-position: 40% 30%; }
.letter-fig figcaption { margin-top: 12px; }
.letter-body { grid-column: 6 / -1; }
.letter-first { font-family: var(--disp); font-weight: 450; font-stretch: 122%; font-size: clamp(36px, 4.4vw, 76px); line-height: .98; margin-bottom: 5vh; }
.letter-cols { columns: 2 24ch; column-gap: 3.2vw; font-size: clamp(17px, 1.18vw, 19px); line-height: 1.64; }
.letter-cols p { margin-bottom: 1.05em; break-inside: avoid; }
.letter-cols .letter-pull { column-span: all; margin: 4.5vh 0 5vh; padding: 3.2vh 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  font-family: var(--disp); font-weight: 360; font-stretch: 112%; font-size: clamp(28px, 3.1vw, 54px); line-height: 1.04; color: var(--acc); }

/* =========================================================
   11 BROJ: one sentence, then her hand
   ========================================================= */
.broj { padding: 18vh var(--pad) 20vh; display: grid; gap: 7vh; }
.broj-q { font-family: var(--disp); }
.bq1 { display: block; width: max-content; white-space: nowrap; font-size: 9vw; font-weight: 300; line-height: .9; font-variation-settings: "wdth" var(--w, 100), "wght" 300; }
.bq2 { display: block; max-width: 30ch; margin: 5vh 0 0 auto; font-weight: 380; font-stretch: 108%; font-size: clamp(22px, 2.15vw, 36px); line-height: 1.2; }
.broj-sig .sig { width: min(560px, 72vw); margin-left: 6vw; }

/* =========================================================
   12 LOOP: the Monday that keeps coming back
   ========================================================= */
.loop { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: center; padding: 14vh var(--pad) 12vh; overflow: hidden; }
.loop-ring { position: relative; width: min(46vw, 80vh); aspect-ratio: 1; justify-self: start; margin-left: -4vw; }
.loop-ring svg { width: 100%; height: 100%; overflow: visible; }
.loop-tp { font-family: var(--disp); font-weight: 400; font-stretch: 128%; font-size: 31px; fill: var(--ink); letter-spacing: .02em; }
.loop-name { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--disp); font-weight: 300; font-stretch: 150%; font-size: clamp(22px, 2.4vw, 40px); }
.loop-txt { display: grid; gap: 2.6vh; max-width: 40ch; }
.loop-h { font-family: var(--disp); font-weight: 380; font-stretch: 104%; font-size: clamp(32px, 3.6vw, 62px); line-height: 1.02; margin-bottom: 1.5vh; }
.loop-p1 { font-family: var(--disp); font-weight: 450; font-stretch: 120%; font-size: clamp(20px, 1.7vw, 28px); line-height: 1.2; }
.loop-p2, .loop-p3 { font-size: clamp(17px, 1.3vw, 20.5px); }
.loop-p3 { padding-left: 4vw; }

/* =========================================================
   13 WHOLE: zoom out to the whole picture
   ========================================================= */
.whole-pin { display: grid; grid-template-columns: 5fr 7fr; gap: 3.5vw; padding: calc(var(--hd) + 3vh) var(--pad) 12vh; align-items: center; }
.whole-txt { display: grid; gap: 3vh; align-content: center; }
.whole-p, .whole-p2 { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; max-width: 36ch; }
.whole-p2 { padding-left: 3vw; }
.whole-h { font-family: var(--disp); font-weight: 340; font-size: clamp(36px, 4.6vw, 80px); line-height: .96; margin-top: 2vh;
  font-variation-settings: "wdth" var(--w, 118), "wght" 360; }
.whole-view { position: relative; height: min(76vh, 52vw); overflow: hidden; }
.whole-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; }
.wg { overflow: hidden; }
.wg img { width: 100%; height: 100%; object-fit: cover; }
.wg1 { grid-area: 1 / 1 / 2 / 2; }
.wg2 { grid-area: 1 / 2 / 3 / 3; }
.wg3 { grid-area: 1 / 3 / 2 / 5; }
.wg4 { grid-area: 2 / 1 / 4 / 2; }
.wg5 { grid-area: 2 / 3 / 4 / 4; }
.wg6 { grid-area: 2 / 4 / 4 / 5; }
.wg7 { grid-area: 3 / 2 / 4 / 3; }
.motion .whole-pin { height: 100svh; }
.motion .whole-view { height: 100%; max-height: 78vh; }

/* =========================================================
   14 LENS: the list comes into focus as you pass it
   ========================================================= */
.lens { display: grid; grid-template-columns: 3fr 9fr; column-gap: 3vw; padding: 13vh var(--pad) 15vh; }
.lens-pre { grid-column: 2; max-width: 44ch; margin-bottom: 10vh; font-size: clamp(18px, 1.45vw, 23px); line-height: 1.5; }
.lens-h { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--hd) + 5vh); align-self: start; font-family: var(--disp); font-weight: 520; font-stretch: 122%;
  font-size: clamp(26px, 2.5vw, 44px); line-height: 1.02; }
.lens-l { grid-column: 2; grid-row: 2; list-style: none; padding: 0; }
.lens-l li { position: relative; padding: 2.3vh 0 2.3vh 1.5em; border-top: 1px solid var(--line); font-family: var(--disp); font-size: clamp(22px, 2.3vw, 40px); line-height: 1.12;
  opacity: var(--o, 1); font-variation-settings: "wdth" 100, "wght" var(--g, 400); }
.lens-l li::before { content: ""; position: absolute; left: 0; top: calc(2.3vh + .34em); width: .5em; height: .5em; border-radius: 50%; border: 1.5px solid currentColor; background: var(--acc);
  transform: scale(var(--s, 1)); }
.lens-end { grid-column: 2; margin-top: 9vh; font-family: var(--disp); font-weight: 420; font-stretch: 116%; font-size: clamp(28px, 3.3vw, 58px); line-height: 1.02; color: var(--acc); }
.lens-end2 { grid-column: 2; margin-top: 3vh; max-width: 40ch; font-size: clamp(17px, 1.3vw, 21px); }

/* =========================================================
   15 STACK: six layers settle on each other
   ========================================================= */
.stack { padding: 10vh 0 6vh; }
.stack-head { display: grid; grid-template-columns: auto 1fr; column-gap: 4vw; align-items: end; padding: 0 var(--pad) 7vh; }
.stack-h { grid-row: 1 / 4; font-family: var(--disp); font-weight: 600; font-stretch: 150%; font-size: clamp(46px, 8.6vw, 150px); line-height: .82; }
.stack-sub { font-family: var(--disp); font-weight: 380; font-stretch: 110%; font-size: clamp(20px, 1.8vw, 30px); line-height: 1.15; max-width: 26ch; }
.stack-dob { margin-top: 2vh; }
.stack-l { list-style: none; padding: 0 var(--pad); }
.band { position: sticky; top: calc(var(--hd) + 1.6vh + var(--k, 0) * 1.4vh); min-height: 56vh; margin-bottom: 5vh;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.4fr) minmax(0, 3.2fr); column-gap: 3.2vw; align-content: start;
  padding: 5vh 4vw 6vh; background: var(--band); color: #264B64; transform-origin: 50% 0; }
.b1 { --band: #F5EFE3; --k: 0; } .b2 { --band: #E3D7C4; --k: 1; } .b3 { --band: #D1E3E2; --k: 2; }
.b4 { --band: #F5EFE3; --k: 3; } .b5 { --band: #E3D7C4; --k: 4; } .b6 { --band: #D1E3E2; --k: 5; }
.band-n { grid-row: 1 / 4; font-family: var(--disp); font-weight: 200; font-stretch: 150%; font-size: clamp(96px, 15vw, 260px); line-height: .76; color: #974316; }
.band-t { font-family: var(--disp); font-weight: 460; font-stretch: 110%; font-size: clamp(28px, 3.1vw, 54px); line-height: 1; }
.band-p { font-size: clamp(18px, 1.42vw, 23px); line-height: 1.55; max-width: 38ch; }
.b2 .band-t, .b5 .band-t { grid-column: 2 / 4; }
.b2 .band-p { grid-column: 3; margin-top: 6vh; }
.b3 .band-p { grid-column: 2; margin-top: 4vh; }
.b3 .band-t { grid-column: 2 / 4; text-align: left; }
.b1, .b2, .b3, .b6 { min-height: 42vh; }
.b3 .band-p { font-family: var(--disp); font-weight: 340; font-stretch: 104%; font-size: clamp(22px, 2vw, 34px); line-height: 1.15; max-width: 30ch; }
.b4 .band-fig { grid-column: 3; grid-row: 1 / 4; }
.b4 .band-fig img { width: 100%; height: 50vh; object-fit: cover; }
.b4 .band-t, .b4 .band-p { grid-column: 2; }
.b4 .band-p { margin-top: 3vh; }
.band-cols { grid-column: 2 / 4; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3vw; margin-top: 4vh; }
.band-mail ul { list-style: none; padding: 0; margin-top: 1.4vh; font-family: var(--disp); font-weight: 380; font-stretch: 112%; font-size: clamp(19px, 1.5vw, 25px); line-height: 1.25; }
.band-mail li { border-bottom: 1px solid rgba(38,75,100,.25); padding: .28em 0; }
.b1 .band-p, .b6 .band-p { grid-column: 3; }
.b1 .band-t, .b6 .band-t { grid-column: 2; }
.b6 .band-p { font-family: var(--disp); font-weight: 340; font-stretch: 104%; font-size: clamp(22px, 2vw, 34px); line-height: 1.15; max-width: 26ch; }

/* =========================================================
   16 RING: seven goals around her symbol
   ========================================================= */
.ring { display: grid; grid-template-columns: 4fr 8fr; column-gap: 4vw; align-items: center; padding: 14vh var(--pad) 12vh; overflow: hidden; }
.ring-h { font-family: var(--disp); font-weight: 600; font-stretch: 150%; font-size: clamp(19px, 1.75vw, 30px); letter-spacing: .05em; line-height: 1.16; margin-bottom: 5vh; }
.ring-p { font-family: var(--disp); font-weight: 340; font-size: clamp(26px, 2.5vw, 44px); line-height: 1.06; margin-bottom: 3vh; }
.ring-p2 { font-family: var(--disp); font-weight: 420; font-size: clamp(22px, 1.8vw, 30px); line-height: 1.15; }
.ring-wrap { position: relative; width: min(100%, 92vh); aspect-ratio: 1; justify-self: center; }
.ring-sym { position: absolute; inset: 27%; background: var(--acc); transform: scale(calc(.84 + .16 * var(--b, .5))) rotate(var(--r, 0deg)); }
.ring-l { list-style: none; padding: 0; position: absolute; inset: 0; }
.ring-l li { --a: calc(var(--k) / var(--n) * 360deg - 90deg); position: absolute; left: calc(50% + 39% * cos(var(--a))); top: calc(50% + 39% * sin(var(--a)));
  translate: -50% -50%; width: 12em; text-align: center; font-family: var(--disp); font-weight: 520; font-stretch: 104%; font-size: clamp(19px, 1.6vw, 27px); line-height: 1.14; }

/* =========================================================
   17 PRICE: set like a poster
   ========================================================= */
.price { display: grid; grid-template-columns: 6fr 3fr 3fr; column-gap: 3vw; row-gap: 3vh; padding: 13vh var(--pad) 12vh; align-items: start; overflow: hidden; }
.price-l { grid-column: 1; grid-row: 1; display: grid; gap: 2.2vh; }
.price-big { font-family: var(--disp); font-weight: 420; font-stretch: 116%; font-size: clamp(32px, 3.6vw, 62px); line-height: 1; margin-bottom: 2vh; }
.price-p { font-size: clamp(17px, 1.3vw, 20.5px); max-width: 40ch; }
.price-fig { grid-column: 2; grid-row: 1; margin-top: 10vh; }
.price-fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.price-cta { grid-column: 3; grid-row: 1; justify-self: end; align-self: end; }
.price-cta { display: inline-grid; align-content: center; gap: 8px; }
.price-cta-s { font-size: 9.5px; letter-spacing: .14em; opacity: .75; }
.price-cta:hover { background: var(--ink); color: #557987; transform: scale(1.06); }
.price-tag { grid-column: 1 / -1; grid-row: 2; margin-top: 7vh; padding-top: 2vh; border-top: 2px solid var(--ink); }
.pt-l { display: block; font-family: var(--disp); font-weight: 600; font-stretch: 150%; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 2vh; }
.pt-n { display: block; width: max-content; white-space: nowrap; font-family: var(--disp); line-height: .8; font-size: 13vw;
  font-variation-settings: "wdth" calc(66 + 84 * var(--b, .5)), "wght" calc(240 + 200 * var(--b, .5)); }

/* =========================================================
   18 FIRME: two photos in front of a breathing word
   ========================================================= */
.firme { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2vw; padding: 12vh var(--pad) 14vh; overflow: hidden; }
.firme-h { grid-column: 1 / -1; grid-row: 1; font-family: var(--disp); line-height: .8; position: relative; z-index: 0; }
.firme-w { display: block; width: max-content; white-space: nowrap; font-size: 17vw;
  font-variation-settings: "wdth" calc(58 + 92 * var(--b, .5)), "wght" calc(180 + 320 * var(--b, .5)); }
.firme-a { grid-column: 8 / span 4; grid-row: 2; margin-top: -8vh; position: relative; z-index: 1; }
.firme-b { grid-column: 2 / span 5; grid-row: 2 / span 2; margin-top: 12vh; position: relative; z-index: 1; }
.firme-a img, .firme-b img { width: 100%; height: auto; object-fit: cover; }
.firme-a img { aspect-ratio: 3 / 3.8; }
.firme-b img { aspect-ratio: 4 / 3.3; }
.firme-t { grid-column: 8 / span 4; grid-row: 3; margin-top: 6vh; display: grid; gap: 2vh; justify-items: start; }

/* =========================================================
   19 BLOG: an index with a floating preview
   ========================================================= */
.blog { padding: 10vh var(--pad) 14vh; position: relative; }
.blog-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 3vw; padding-bottom: 3vh; border-bottom: 1.5px solid var(--ink); }
.blog-h { font-family: var(--disp); font-weight: 600; font-stretch: 150%; font-size: clamp(60px, 10vw, 180px); line-height: .78; }
.blog-l { list-style: none; padding: 0; }
.blog-l a { display: grid; grid-template-columns: 9ch 1fr auto; align-items: center; gap: 2vw; padding: 3.4vh 0; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: padding-left .6s cubic-bezier(.2,.8,.2,1); }
.blog-l a:hover, .blog-l a:focus-visible { padding-left: 2.6vw; outline: none; }
.blog-t .ph { font-size: clamp(16px, 1.7vw, 26px); padding: .55em 1.1em; }
.blog-float { position: absolute; left: 0; top: 0; width: clamp(180px, 17vw, 300px); aspect-ratio: 4 / 5; pointer-events: none; z-index: 3; opacity: 0;
  transform: translate(-50%, -50%) scale(.82); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); overflow: hidden; border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%; }
.blog-float img { width: 100%; height: 100%; object-fit: cover; }
.blog-float.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* =========================================================
   20 GUIDE: a thin strip
   ========================================================= */
.guide { display: grid; grid-template-columns: auto 1fr auto; gap: 3vw; align-items: center; padding: 8vh var(--pad); border-bottom: 1px solid var(--line); }
.guide-t .ph { font-size: clamp(15px, 1.5vw, 22px); }
.guide-f { display: flex; align-items: center; gap: 14px; }
.guide-in { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid currentColor; padding: 10px 2px; font-family: var(--disp); font-weight: 600; font-stretch: 150%;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.guide-in input { all: unset; width: 15ch; font-family: var(--text); font-size: 16px; letter-spacing: 0; text-transform: none; color: inherit; }
.guide-in input::placeholder { color: inherit; opacity: .55; }
.guide-f button { all: unset; cursor: not-allowed; padding: 13px 24px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--disp); font-weight: 600; font-stretch: 150%;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }

/* =========================================================
   21 KONTAKT: dusk
   ========================================================= */
.kontakt { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto auto; column-gap: 5vw; align-content: center; min-height: 100svh; padding: 14vh var(--pad) 12vh; overflow: hidden; }
.kontakt-sym { grid-column: 1; grid-row: 1 / 3; width: min(34vw, 66vh); align-self: center; background: var(--acc); transform: scale(calc(.76 + .24 * var(--b, .5))); }
.kontakt-h { grid-column: 2; font-family: var(--disp); font-weight: 320; font-size: clamp(36px, 4.7vw, 84px); line-height: .98; }
.kontakt-dl { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3vw; margin-top: 7vh; }
.kontakt-dl div { border-top: 1px solid var(--line); padding: 2.2vh 0 3vh; }
.kontakt-dl dd { margin-top: 1.2vh; }

/* ---------- footer ---------- */
.ft { display: grid; grid-template-columns: auto 1fr auto; column-gap: 5vw; row-gap: 5vh; align-items: end; padding: 9vh var(--pad) 15vh; border-top: 1px solid var(--line); }
.ft-logo { width: clamp(110px, 10vw, 170px); height: auto; }
.ft-nav { display: flex; flex-wrap: wrap; gap: 1.1em 2.4em; font-family: var(--disp); font-weight: 340; font-stretch: 128%; font-size: clamp(18px, 1.55vw, 26px); }
.ft-nav a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s; }
.ft-nav a:hover { border-color: currentColor; }
.ft-sig { width: min(340px, 56vw); grid-column: 3; }
.ft-top { grid-column: 1 / -1; justify-self: start; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }

/* ---------- reveal helper (only when JS motion is on) ---------- */
.motion [data-rise] { opacity: 0; transform: translateY(34px); }

/* =========================================================
   tablet + phone
   ========================================================= */
@media (max-width: 999px) {
  .ring { grid-template-columns: 1fr; row-gap: 6vh; }
  .ring-wrap { width: min(92vw, 640px); }
  .price { grid-template-columns: 1fr 1fr; }
  .price-l { grid-column: 1 / -1; grid-row: 1; }
  .price-fig { grid-column: 1; grid-row: 2; margin-top: 2vh; }
  .price-cta { grid-column: 2; grid-row: 2; align-self: center; justify-self: center; }
  .price-tag { grid-row: 3; }
}

@media (max-width: 760px) {
  :root { --hd: 62px; --pad: 20px; }
  body { font-size: 17px; }
  .hd-breath { display: none; }
  .hd { grid-template-columns: 1fr auto; }
  .hd-right { gap: 14px; }
  .hd-logo { width: 112px; }
  .hd-cta, .hd-menu { font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; }
  .hd-menu { gap: 8px; }
  .hd-menu-c { width: 22px; height: 22px; }
  .hd-menu-c::after { inset: 6px; }
  .menu { grid-template-columns: 1fr; padding-top: calc(var(--hd) + 3vh); }
  .menu-t { font-size: clamp(40px, 12.6vw, 64px); }
  .menu-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .menu-sym { width: 26vw; }
  .menu-progs { display: none; }
  .menu-cta { width: 120px; }

  .hero { padding-top: calc(var(--hd) + 2vh); padding-bottom: 3vh; }
  .hero-sym { width: 104vw; right: -38vw; top: 40%; opacity: .3; }
  .bl { --k: .62; }
  .bl .bw { display: block; width: max-content; }
  .hero-foot { grid-template-columns: 1fr auto; row-gap: 2.4vh; }
  .hero-progs { grid-column: 1 / -1; }
  .meter { justify-self: start; }
  .meter-bar { width: 80px; }

  .hl { font-variation-settings: "wdth" var(--w, 118), "wght" var(--g, 400); }
  .welcome { padding: 13vh var(--pad) 14vh; }
  .welcome-t { grid-column: 1 / -1; font-size: clamp(29px, 8.4vw, 40px); }
  .welcome-fig { grid-column: 7 / -1; margin-top: 6vh; }
  .welcome-fig img { aspect-ratio: 3 / 4.4; }

  .split-h { flex-direction: column; align-items: flex-start; gap: 0; }
  .split-h .sb { align-self: flex-end; }
  .motion .split-p { left: var(--pad); right: var(--pad); bottom: 9vh; }

  .def { padding: 12vh var(--pad) 11vh; }
  .def-w span { display: block; }
  .def-grid { grid-template-columns: 1fr 1fr; row-gap: 3vh; }
  .def-text { grid-column: 1 / -1; grid-row: 1; font-size: clamp(25px, 7vw, 34px); }
  .def-idx { grid-row: 2; }
  .def-fig { grid-row: 2; }

  .stairs { grid-template-columns: 1fr; padding: 4vh var(--pad) 14vh; }
  .stairs-l li { padding-left: calc(var(--i) * 4vw); }
  .st { white-space: normal; font-size: clamp(25px, 7.6vw, 36px); font-variation-settings: "wdth" 96, "wght" calc(320 + 130 * var(--b, .5)); }
  .stairs-fig { grid-column: 1; width: 56vw; margin: 5vh 0 0 auto; }

  .motion .orb-txt { left: var(--pad); right: var(--pad); width: auto; top: auto; bottom: 10vh; translate: none; }
  .orb-t { font-size: clamp(26px, 7.4vw, 34px); }
  .orb-t2 { font-size: 16px; margin-top: 2vh; }
  html:not(.motion) .orb-pin { grid-template-columns: 1fr; }

  .zam-pin { min-height: 0; padding-top: 12vh; }
  .zam-a li { font-size: clamp(23px, 6.6vw, 30px); }
  .zam-b li { font-size: clamp(22px, 6.2vw, 28px); }

  .rp1-cols { columns: 1; }
  .rp-n { font-size: 120px; }
  .rp2-fig { margin: 1vh 0; }
  .rp2-fig img { aspect-ratio: 1; }
  .rp3-fig img { aspect-ratio: 5 / 4; }
  .rp6-sym { width: 62vw; }
  .rp6-breath { padding: 3vh 0 4vh; }

  .letter { padding-top: 11vh; }
  .letter-fig { grid-column: 1 / span 9; position: relative; top: 0; margin-bottom: 6vh; }
  .letter-body { grid-column: 1 / -1; }
  .letter-cols { columns: 1; }

  .broj { padding: 12vh var(--pad) 14vh; }
  .bq2 { margin-top: 4vh; }
  .broj-sig .sig { margin-left: 0; }

  .loop { grid-template-columns: 1fr; padding: 10vh var(--pad); }
  .loop-ring { width: 108vw; margin-left: -14vw; justify-self: center; }
  .loop-p3 { padding-left: 8vw; }

  .whole-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 3vh; padding: calc(var(--hd) + 2vh) var(--pad) 10vh; }
  .whole-view { height: 54vh; }
  .motion .whole-view { height: 100%; max-height: none; min-height: 0; }
  .whole-h { font-size: clamp(30px, 8.6vw, 42px); }
  .whole-p { font-size: 16px; }
  .whole-p2 { font-size: 16px; padding-left: 0; }

  .lens { grid-template-columns: 1fr; }
  .lens-pre, .lens-l, .lens-end, .lens-end2 { grid-column: 1; }
  .lens-h { grid-column: 1; grid-row: auto; position: relative; top: 0; margin-bottom: 3vh; }
  .lens-l { grid-row: auto; }
  .lens-l li { font-size: clamp(21px, 6vw, 27px); }

  .stack-head { grid-template-columns: 1fr; }
  .stack-h { grid-row: auto; margin-bottom: 3vh; }
  .stack-l { padding: 0 12px; }
  .band { grid-template-columns: 1fr; min-height: 0; padding: 4vh 6vw 5vh; top: calc(var(--hd) + 1vh + var(--k, 0) * 1vh); }
  .band > * { grid-column: 1 !important; grid-row: auto !important; }
  .band-n { font-size: 84px; margin-bottom: 1vh; }
  .band-p, .b2 .band-p, .b3 .band-p { margin-top: 2vh; }
  .b4 .band-fig img { height: 30vh; margin-top: 2vh; }
  .band-cols { grid-template-columns: 1fr; margin-top: 2vh; }

  .ring-wrap { width: 100%; aspect-ratio: auto; display: grid; gap: 3vh; }
  .ring-sym { position: relative; inset: auto; width: 40vw; justify-self: center; }
  .ring-l { position: relative; inset: auto; display: grid; gap: 0; }
  .ring-l li { position: relative; left: auto; top: auto; translate: none; width: auto; text-align: left; padding: 1.3vh 0; border-top: 1px solid var(--line); font-size: 24px; line-height: 1.12; }

  .price { grid-template-columns: 1fr 1fr; padding-top: 10vh; }
  .price-fig { margin-top: 0; }

  .firme { padding: 10vh var(--pad) 12vh; }
  .firme-a { grid-column: 1 / span 7; margin-top: -5vh; }
  .firme-b { grid-column: 5 / -1; grid-row: 3; margin-top: -8vh; }
  .firme-a { grid-row: 2; }
  .firme-t { grid-column: 1 / -1; grid-row: 4; }

  .blog-l a { grid-template-columns: 5ch 1fr; }
  .blog-d { grid-column: 2; }
  .blog-float { display: none; }

  .guide { grid-template-columns: 1fr; gap: 3vh; }
  .guide-f { flex-wrap: wrap; }

  .kontakt { grid-template-columns: 1fr; min-height: 0; padding: 12vh var(--pad) 10vh; }
  .kontakt-sym { grid-row: auto; width: 62vw; margin-bottom: 5vh; }
  .kontakt-h, .kontakt-dl { grid-column: 1; }
  .kontakt-dl { grid-template-columns: 1fr; }

  .ft { grid-template-columns: 1fr; }
  .ft-sig { grid-column: 1; }
}

/* reduced motion: hold the breath at its middle, keep everything visible */
@media (prefers-reduced-motion: reduce) {
  .hero-cue-l { animation: none; }
  .menu, .menu.is-open { transition: none; }
}