/* kroz.hr, every page. Headings in Fraunces (self-hosted, SIL OFL: /fonts/OFL.txt), text in the system sans. */
@font-face {
  font-family:"Fraunces"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/fonts/fraunces-v38-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;
}
/* latin-ext holds č ć đ š ž */
@font-face {
  font-family:"Fraunces"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url(/fonts/fraunces-v38-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --bg:#fdfaf5; --card:#fffdf9; --ink:#2a221c; --muted:#75685c; --line:#e8dccd;
  --accent:#b4532a; --accent2:#e2733f; --accent-d:#9a4522; --soft:#f8efe4; --plate:#f1ebe2;
  --green:#4a9d62; --amber:#e2a23a; --grey:#c4b8a8;
  --night:#0f141c; --night2:#1b2230;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --focus: 0 0 0 3px rgba(180,83,42,.35);
  --ease: cubic-bezier(.2,.7,.2,1);
  /* card and inner radius, one shadow, one gap between stacked blocks */
  --r-card:16px; --r-in:10px;
  --lift:0 28px 50px -34px rgba(42,34,28,.6);
  --block-gap:clamp(28px, 3vw, 40px);
  /* the side margin of the header and of the hero caption on wide screens */
  --edge:clamp(20px, 3.6vw, 56px);
  /* one heading scale: 68 / 40 / 26 / 20 px on desktop, scaled down on phones */
  --fs-1:clamp(34px, 5.2vw, 68px); --fs-2:clamp(26px, 3.2vw, 40px); --fs-3:clamp(22px, 2.2vw, 26px); --fs-4:clamp(18px, 1.6vw, 20px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
/* smooth wheel scrolling on desktop (smooth.js, Lenis): the rules of its lenis.css that apply here (it is never stopped) */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth iframe { pointer-events:none; }
/* #primjer holding the page between its steps (stage.js): no panning (pinch zoom stays), and on touch screens the
   page also stops coasting */
html.hold { touch-action:pinch-zoom; overscroll-behavior:none; }
@media (pointer:coarse) { html.hold { overflow:hidden; } }
a, button, summary, input, label, .step { touch-action:manipulation; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip; font-variant-numeric:lining-nums; }
[hidden] { display:none !important; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
h1,h2,h3 { font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-.01em; text-wrap:balance; }
p, li, summary small { text-wrap:pretty; }
h1 { font-size:var(--fs-1); line-height:1.04; }
h2 { font-size:var(--fs-2); line-height:1.12; }
h3 { font-size:var(--fs-4); line-height:1.2; }
.eyebrow { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 10px; }
.eyebrow::before { content:""; display:inline-block; width:34px; height:6px; margin:0 12px 2px 0; vertical-align:middle; background:linear-gradient(currentColor, currentColor) 0 50%/24px 2px no-repeat, radial-gradient(circle closest-side, currentColor 73.33%, transparent 93.33%) 28px 50%/6px 6px no-repeat; }
.muted { color:var(--muted); }
.small { font-size:14px; }
.num { font-variant-numeric:lining-nums tabular-nums; }
.nw { white-space:nowrap; }

/* visible focus everywhere */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
section:focus, [tabindex="-1"]:focus { outline:none; }
/* on the dark film, the dark band and the dark price card the ring is white */
.hero a:focus-visible, .hero button:focus-visible, .hero input:focus-visible, body.home.over-hero header.top a:focus-visible, body.home.over-hero header.top button:focus-visible, section.dark a:focus-visible, .notfound a:focus-visible { outline-color:#fff; }
.skip { position:absolute; left:16px; top:-60px; z-index:50; background:var(--ink); color:#fff; padding:10px 14px; border-radius:var(--r-in); font-weight:600; }
.skip:focus { top:12px; }

/* ---------- header: solid, transparent over the hero film until the page scrolls ---------- */
header.top { position:sticky; top:0; z-index:20; background:rgba(253,250,245,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:background .35s ease, border-color .35s ease; }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; height:60px; }
/* wide screens: the wordmark and the hero caption share one left edge */
@media (min-width:1024px) { header.top .wrap { max-width:none; padding:0 var(--edge); } }
.brand { display:flex; align-items:center; min-height:44px; gap:10px; font-family:var(--serif); font-size:25px; letter-spacing:.02em; color:var(--ink); transition:color .35s ease; }
.brand:hover { text-decoration:none; }
.brand svg { height:26px; width:auto; flex:none; display:block; }
@media (min-width:1024px) { header.top .brand svg { height:30px; } }
.brand svg .a { fill:var(--accent); }
body.home.over-hero header.top .brand svg .a { fill:var(--accent2); }
nav.main { position:relative; display:flex; align-items:center; gap:22px; font-size:15px; }
/* the dot under the link of the section in view (nav.js: --nav-x, "dot") */
nav.main::after { content:""; position:absolute; left:0; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--accent); translate:var(--nav-x, 0) 0; opacity:0; transition:opacity .2s ease; pointer-events:none; }
nav.main.dot::after { opacity:1; transition:translate .45s var(--ease), opacity .2s ease; }
nav.main a { padding:11px 2px; color:var(--ink); transition:color .35s ease; }
nav.main a.wa { background:var(--ink); color:#fff; padding:12px 18px; border:1px solid transparent; border-radius:999px; font-size:15px; font-weight:600; line-height:1.2; transition:background .2s ease, color .35s ease; }
nav.main a.wa:hover { background:var(--accent); text-decoration:none; }
@media (max-width:760px) { nav.main a.hide-m, nav.main::after { display:none; } }
body.home.over-hero header.top { background:linear-gradient(rgba(15,20,28,.55), rgba(15,20,28,0)); background-repeat:no-repeat; backdrop-filter:none; -webkit-backdrop-filter:none; border-color:transparent; }
body.home.over-hero header.top .brand, body.home.over-hero nav.main a { color:#fff; }
body.home.over-hero nav.main a.wa { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); }
body.home.over-hero nav.main a.wa:hover { background:var(--accent); border-color:var(--accent); }
/* the live example in the hero: the header turns night, the live bar in the navigation's place */
body.home.over-hero.hero-live header.top { background:var(--night); border-color:rgba(255,255,255,.08); }
header.top .live-bar { display:flex; flex:1; min-width:0; align-items:center; justify-content:space-between; gap:12px; margin-left:clamp(16px, 3vw, 48px); }
body:not(.over-hero) header.top .live-bar { display:none; }
body.hero-live.over-hero nav.main { display:none; }
.live-title { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:14px; color:rgba(255,255,255,.72); }
.live-actions { display:flex; gap:8px; flex:none; }

/* ---------- buttons ---------- */
.cta { display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:24px; align-items:center; }
.cta.tight { margin-top:0; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px; font:inherit; font-weight:600; font-size:15px; border:1px solid transparent; line-height:1.2; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .25s var(--ease), box-shadow .25s ease; }
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn.primary { background:var(--accent); color:#fff; box-shadow:0 10px 24px -12px rgba(180,83,42,.8); }
.btn.primary:hover { background:var(--accent-d); }
.btn.ghost { border-color:var(--line); color:var(--ink); background:var(--card); }
.btn.ghost:hover { border-color:var(--ink); }
.btn.big { font-size:17px; padding:17px 28px; }
.btn .play { width:0; height:0; border-left:12px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:2px; }

/* ---------- intro (home page, first visit; docs/LOGO_AND_HOUSE.md) ----------
   no scripts: no veil; no intro.js (no html.intro-js): the failsafe clears it after 6.5 s; html.intro-rm: a fade */
@property --ir { syntax:'<length>'; inherits:true; initial-value:0px; }
@property --if { syntax:'<length>'; inherits:true; initial-value:0px; }
.intro-veil { display:none; }
html.intro .intro-veil { display:grid; place-items:center; position:fixed; inset:0; z-index:60; color:#fff; animation:intro-failsafe .4s ease 6.5s forwards; }
html.intro .intro-veil::before { content:""; position:absolute; inset:0; background:var(--night); transition:opacity .4s ease; }
html.intro-iris .intro-veil::before { --m:radial-gradient(circle at var(--ix) var(--iy), transparent var(--ir), #000 calc(var(--ir) + var(--if))); -webkit-mask-image:var(--m); mask-image:var(--m); }
.intro-mark { position:relative; opacity:0; }
.intro-mark svg { display:block; width:auto; height:clamp(88px, 10.8vw, 152px); }
.intro-veil .wordmark .a { fill:var(--accent2); }
.intro-veil { --wm-glint:#ffe2cf; }
html.intro-play .intro-mark, html.intro-rm .intro-mark { opacity:1; }
html.intro-plain .intro-mark { animation:intro-rise .7s var(--ease) both; }
html.intro-open .intro-veil { pointer-events:none; }
html.intro-fade .intro-veil::before { opacity:0; }
html.intro-fly .intro-mark { animation:none; opacity:1; translate:var(--fx) 0; transition:translate .62s cubic-bezier(.75, 0, .25, 1); }
html.intro-fly .intro-mark svg { translate:0 var(--fy); scale:var(--fs); transition:translate .62s cubic-bezier(.45, 0, .2, 1), scale .62s cubic-bezier(.45, 0, .2, 1); }
html.intro-landed .intro-mark { visibility:hidden; }
html.intro-landed header.top { z-index:61; }
html.intro-rm.intro-open .intro-veil { opacity:0; transition:opacity .3s ease; }
html.intro-done .intro-veil { display:none; }
/* the copy arrives as the window opens: eyebrow line and dot, title, lede, button, links */
html.intro-copy .hero .eyebrow::before { animation:eb-draw .42s var(--ease) .56s both; }
html.intro-copy .hero .eyebrow span { animation:intro-in .36s ease .62s both; }
html.intro-copy .hero h1 { animation:intro-up .6s var(--ease) .62s both; }
html.intro-copy .hero .lede { animation:intro-up .5s var(--ease) .72s both; }
html.intro-copy .hero .cta { animation:intro-up .44s var(--ease) .8s both; }
html.intro-copy nav.main a { animation:intro-in .3s ease .84s both; }
html.intro-copy nav.main a + a { animation-delay:.88s; }
html.intro-copy nav.main a + a + a { animation-delay:.92s; }
html.intro-copy nav.main a + a + a + a { animation-delay:.96s; }
/* the header's wordmark waits until the flying one lands on it (or the failsafe) */
html.intro:not(.intro-rm):not(.intro-landed) header.top .brand svg { opacity:0; animation:intro-back 0s linear 6.9s forwards; }
html.intro.intro-js .intro-veil, html.intro.intro-js header.top .brand svg { animation:none; }
@keyframes intro-failsafe { to { opacity:0; visibility:hidden; } }
@keyframes intro-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes intro-back { to { opacity:1; } }
@keyframes intro-in { from { opacity:0; } }
@keyframes intro-up { from { opacity:0; translate:0 12px; } }
@keyframes eb-draw { from { background-size:0 2px, 0 0; background-position:0 50%, 31px 50%; } 60% { background-size:24px 2px, 0 0; background-position:0 50%, 31px 50%; } }

/* ---------- hero: the film, then the live example in the same frame ---------- */
.hero { --live-top:61px; position:relative; margin-top:-61px; min-height:100vh; min-height:100svh; display:grid; align-items:end; color:#fff; background:var(--night); overflow:hidden; isolation:isolate; }
.hero .screen { position:absolute; inset:0; z-index:0; background:var(--night); }
.hero .screen img, .hero .screen video, .hero .screen iframe { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border:0; }
/* the poster is frame 0 of the film: a short switch (a long one ghosts) */
.hero .screen video { opacity:0; transition:opacity .25s ease; }
.hero.film .screen video { opacity:1; }
/* the poster only once decoded (hero.js: "poster"), never scan by scan */
.hero .screen picture { opacity:0; transition:opacity .35s ease; }
.hero.poster .screen picture { opacity:1; }
@media (scripting: none) { .hero .screen picture { opacity:1; } }
/* the live example under the header, never taller than the screen; 1 px wide with a min-width (iOS Safari) */
.hero .screen iframe { top:var(--live-top); height:calc(min(100%, 100svh) - var(--live-top)); width:1px; min-width:100%; opacity:0; transition:opacity .8s ease; }
.hero.live .screen iframe { opacity:1; }
/* the film stays under the fading example until covered */
.hero.live .screen video, .hero.live .screen picture { visibility:hidden; transition:visibility 0s .85s; }
/* bright frames in the film: the copy on a scrim (from the left on wide screens, a band on phones) */
.hero .veil { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(15,20,28,.72) 0%, rgba(15,20,28,.6) 36%, rgba(15,20,28,.42) 50%, rgba(15,20,28,.04) 70%, rgba(15,20,28,0) 100%), linear-gradient(180deg, rgba(15,20,28,.22) 0%, rgba(15,20,28,0) 30%, rgba(15,20,28,.2) 60%, rgba(15,20,28,.86) 100%); transition:opacity .6s ease; }
.hero .copy { position:relative; z-index:2; width:100%; padding-top:120px; padding-bottom:clamp(72px, 10vh, 120px); transform:translate(var(--px, 0), var(--py, 0)); transition:opacity .5s ease, visibility 0s; text-shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.3); }
.hero .copy .btn { text-shadow:none; }
.hero .eyebrow { color:#fff; }
.hero .eyebrow::before { color:var(--accent2); }
.hero h1 { max-width:17ch; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.hero .lede { font-size:clamp(16px, 1.4vw, 19px); color:rgba(255,255,255,.92); margin:18px 0 0; max-width:52ch; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.hero .cta-note { font-size:14px; color:rgba(255,255,255,.92); text-shadow:0 1px 3px rgba(0,0,0,.55); }
/* two calls side by side, each note under its button: the tour, then the free flat (white on the film) */
.hero .cta.two { display:grid; grid-template-columns:repeat(2, max-content); grid-template-rows:auto auto; grid-auto-flow:column; gap:8px 14px; align-items:center; }
.hero .cta.two .btn { justify-content:center; }
.hero .cta.two .cta-note { padding-left:6px; }
.hero .btn.ghost.free { background:rgba(15,20,28,.28); border-color:rgba(255,255,255,.62); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero .btn.ghost.free:hover { background:#fff; border-color:#fff; color:var(--ink); }
.hero.live .copy, .hero.live .veil, .hero.live .scroll-hint { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility 0s .3s; }
/* loading: the film dimmed by a layer, the walking O and one line */
.hero-load { position:absolute; z-index:3; inset:0; display:grid; align-content:start; justify-items:center; gap:16px; padding:30svh 20px 0; text-align:center; background:rgba(15,20,28,.6); opacity:0; visibility:hidden; transition:opacity .5s ease, visibility 0s .5s; pointer-events:none; }
.hero-load .ko { width:60px; height:60px; color:#fff; --ko-a:var(--accent2); filter:drop-shadow(0 2px 10px rgba(0,0,0,.4)); }
.hero-load p { margin:0; font-family:var(--serif); font-size:24px; line-height:1.25; text-shadow:0 1px 14px rgba(0,0,0,.6); }
.hero-load p span { display:block; margin-top:6px; font-family:var(--sans); font-size:15px; color:rgba(255,255,255,.88); }
.hero.loading .hero-load { opacity:1; visibility:visible; transition:opacity .3s ease; }
@media (max-height:700px) { .hero.loading .copy { opacity:0; } } /* short screens: the line would sit on the headline */
.hero.loading #open3d { pointer-events:none; }
.hero.loading #open3d .play { animation:spin 1s linear infinite; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; width:14px; height:14px; margin:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.scroll-hint { position:absolute; left:50%; bottom:18px; z-index:2; width:28px; height:44px; margin-left:-14px; border:2px solid rgba(255,255,255,.5); border-radius:16px; }
.scroll-hint i { position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:#fff; animation:hint 1.8s ease-in-out infinite; }
@keyframes hint { 0% { transform:translateY(0); opacity:1 } 70% { transform:translateY(14px); opacity:0 } 100% { opacity:0 } }
@media (max-width:760px) { .scroll-hint { display:none; } }
.hero .fail { position:absolute; left:20px; right:20px; bottom:24px; z-index:3; margin:0; background:rgba(253,250,245,.95); color:var(--ink); border-radius:var(--r-in); padding:12px 16px; font-size:14px; }

/* the pills of the live bar in the header */
.pill { font:inherit; font-size:14px; font-weight:600; line-height:1.2; padding:13px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
.pill:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45); }
.pill.close { background:#fff; border-color:#fff; color:var(--ink); }
.pill.close:hover { background:var(--soft); }
@media (max-width:900px) { .hide-s { display:none; } }
/* phones: the three pills alone, centred */
@media (max-width:560px) { .live-title, body.hero-live.over-hero header.top .brand { display:none; } header.top .live-bar { justify-content:center; margin-left:0; } .live-actions { gap:6px; } .pill { padding:13px 11px; font-size:14px; } }
i.dot-ok, i.dot-res, i.dot-sold { width:10px; height:10px; border-radius:50%; display:inline-block; flex:none; }
.dot-ok { background:var(--green); } .dot-res { background:var(--amber); } .dot-sold { background:var(--grey); }
/* desktop: the copy a caption in the lower left on a scrim, the headline in two lines */
@media (min-width:1024px) and (orientation:landscape) {
  .hero .veil { background:radial-gradient(1000px 640px at 0 100%, rgba(15,20,28,.78) 0%, rgba(15,20,28,.62) 40%, rgba(15,20,28,.3) 70%, rgba(15,20,28,0) 100%), linear-gradient(180deg, rgba(15,20,28,.3) 0%, rgba(15,20,28,0) 16%); }
  .hero .copy { max-width:none; margin:0; padding-left:var(--edge); padding-right:var(--edge); padding-bottom:clamp(48px, 7.5vh, 96px); }
  .hero .copy > * { max-width:540px; }
  /* 54 px: "Kupac prošeta stanom" still fits 540 px, two lines up to 2560 */
  .hero h1 { font-size:clamp(40px, calc(2.2vw + 20px), 54px); line-height:1.06; }
  /* the lede ends left of the building's wall (29.1 % of the film's width) */
  .hero .lede { font-size:clamp(16px, calc(.4vw + 11px), 19px); margin-top:14px; max-width:min(540px, max(300px, min(29.1vw, 50vw - 37.15vh) - var(--edge) - 16px)); text-wrap:balance; }
  .hero .cta { margin-top:22px; }
}
/* Portrait tablets: the headline in three lines instead of four. */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait) {
  .hero { padding-bottom:0; }
  .hero h1 { max-width:18ch; font-size:clamp(34px, 6.5vw, 68px); }
  .hero .copy { padding-bottom:96px; }
}
/* phones and portrait screens: the upright film, the building on top, the copy on its own dark band */
@media (max-width:760px), (orientation:portrait) {
  .hero .veil { background:linear-gradient(180deg, rgba(15,20,28,.28) 0%, rgba(15,20,28,0) 16%, rgba(15,20,28,0) 58%, rgba(15,20,28,.55) 100%); }
  .hero .copy::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(15,20,28,0) 0, rgba(15,20,28,.46) 46px, rgba(15,20,28,.78) 84px, rgba(15,20,28,.86) 50%, rgba(15,20,28,.92) 100%); }
}
/* Phones: the copy sits in the bottom two fifths of the screen. */
@media (max-width:760px) {
  .hero { padding:0; }
  .hero .copy { padding-top:88px; padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px)); text-shadow:0 1px 2px rgba(0,0,0,.3); }
  .hero .eyebrow { font-size:11px; letter-spacing:.15em; margin-bottom:12px; }
  .hero h1 { max-width:none; font-size:clamp(31px, 9.1vw, 38px); line-height:1.06; letter-spacing:-.01em; }
  .hero .lede { font-size:17px; line-height:1.45; margin-top:12px; color:rgba(255,255,255,.9); }
  .hero .cta { margin-top:20px; gap:10px 16px; }
  .hero .btn.big { font-size:16px; padding:14px 22px; flex:none; }
  .hero .cta-note { font-size:15px; line-height:1.35; color:rgba(255,255,255,.9); }
  .hero .cta.two { grid-template-columns:minmax(0, 1fr); grid-template-rows:none; grid-auto-flow:row; gap:0; }
  .hero .cta.two .btn { justify-self:start; min-width:min(100%, 272px); }
  .hero .cta.two .cta-note { padding-left:0; margin:6px 0 12px; }
  .hero .cta.two .cta-note.free { margin-bottom:0; }
}

@media (orientation:landscape) and (max-height:560px) {
  .hero { padding:0; }
  .hero .copy { padding-top:76px; padding-bottom:20px; }
  .hero .eyebrow { margin-bottom:8px; }
  .hero h1 { font-size:clamp(26px, 8svh, 38px); max-width:22ch; }
  .hero .lede { margin-top:8px; font-size:17px; max-width:60ch; }
  .hero .cta { margin-top:14px; }
  .hero .btn.big { padding:13px 22px; font-size:16px; }
  .hero-load { padding-top:20svh; }
  .scroll-hint { display:none; }
}

/* ---------- sections ---------- */
section { padding:clamp(56px, 8vw, 96px) 0; position:relative; }
.sec-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.sec-head h2 { max-width:24ch; }
.sec-head p:not(.eyebrow) { margin:12px 0 0; color:var(--muted); max-width:62ch; font-size:17px; }
.art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
section > .wrap { position:relative; z-index:1; }
/* sections on the same background: one gap, not two */
#kalkulator + #pitanja, #pitanja + #kontakt { padding-top:0; }

/* reveal on scroll: hidden only when scripts run */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .8s var(--ease); transition-delay:calc(var(--i, 0) * 90ms); }
  [data-reveal].in { opacity:1; transform:none; }
  [data-reveal].now { transition:none; }
  .why li:nth-child(2) { --i:1; }
  .why li:nth-child(3) { --i:2; }
  .why li:nth-child(4) { --i:3; }
  .why li:nth-child(5) { --i:4; }
  .why li:nth-child(6) { --i:5; }
  /* headings open from their middle line (the gap); at rest no clip-path (carons, descenders) */
  .sec-head[data-reveal] { opacity:1; transform:none; }
  .sec-head[data-reveal]:not(.in) :is(h2, p:not(.eyebrow), .eyebrow > span:not(.ko)) { opacity:0; }
  .sec-head[data-reveal]:not(.in) .eyebrow::before { background-size:0 2px, 0 0; }
  :is(.sec-head, .contact).in .eyebrow::before { animation:eb-draw .46s var(--ease) backwards; }
  :is(.sec-head, .contact).in .eyebrow > span:not(.ko) { animation:intro-in .4s ease .12s backwards; }
  :is(.sec-head, .contact).in h2 { animation:gap .7s cubic-bezier(.45, 0, .2, 1) .26s backwards; }
  .sec-head.in p:not(.eyebrow), .contact.in .lede { animation:intro-up .6s var(--ease) .52s backwards; }
  .in.instant :is(h2, p, .eyebrow > span), .in.instant .eyebrow::before { animation:none; }
}
@keyframes gap { from { opacity:0; clip-path:inset(48% 0 52% 0); } 12% { opacity:1; clip-path:inset(46% 0 50% 0); } to { clip-path:inset(-12% 0 -12% 0); } }

/* ---------- the showcase: the phone plays the example chapter by chapter beside the steps (showcase.js) ---------- */
#primjer { background:var(--soft); }
.show-grid { display:grid; align-items:start; }
.device-col { position:sticky; display:grid; justify-items:center; gap:12px; }
.devices { position:relative; display:grid; place-items:center; width:100%; }
.devices > * { grid-area:1 / 1; transition:opacity .45s ease, transform .6s var(--ease), visibility 0s; }
.devices[data-device="phone"] .laptop, .devices[data-device="laptop"] .phone { opacity:0; visibility:hidden; transform:scale(.96); transition:opacity .3s ease, transform .4s var(--ease), visibility 0s .4s; }
/* the phone: bezel, island, status bar, home bar */
.phone { --bezel:7px; position:relative; aspect-ratio:300 / 624; border-radius:46px; padding:var(--bezel); background:#14110f; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 0 0 1px rgba(42,34,28,.28), 0 40px 70px -36px rgba(42,34,28,.55), 0 80px 120px -70px rgba(180,83,42,.4); }
.phone::before, .phone::after { content:""; position:absolute; width:3px; border-radius:2px; background:#14110f; }
.phone::before { right:-3px; top:26%; height:12%; }
.phone::after { left:-3px; top:21%; height:7%; }
.phone .screen { position:absolute; inset:var(--bezel); overflow:hidden; border-radius:39px; background:#ece6dc; isolation:isolate; }
.phone .screen video, .phone .screen iframe, .phone .snap { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; border:0; }
/* a jump in the film: the last frame on a canvas fades once the new one is up */
.phone .snap { z-index:1; opacity:0; transition:opacity .3s ease; pointer-events:none; }
.phone .snap.on { opacity:1; transition:none; }
.phone .screen::after { content:""; position:absolute; z-index:2; left:50%; bottom:7px; width:100px; height:4px; margin-left:-50px; border-radius:2px; background:rgba(29,26,23,.72); pointer-events:none; }
.phone .island { position:absolute; z-index:3; left:50%; top:calc(var(--bezel) + 10px); width:84px; height:24px; margin-left:-42px; border-radius:14px; background:#050505; }
.phone .sbar { position:absolute; z-index:2; left:0; right:0; top:0; height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 24px 0 32px; font-size:12px; font-weight:600; color:#1d1a17; background:linear-gradient(rgba(255,255,255,.62), rgba(255,255,255,0)); pointer-events:none; }
.phone .sbar i { width:22px; height:11px; border:1px solid rgba(29,26,23,.5); border-radius:3px; background:linear-gradient(#1d1a17, #1d1a17) 1px 1px / 14px 7px no-repeat; }
/* the live example loading into the phone */
.ko-load { position:absolute; z-index:3; left:50%; top:46%; width:76px; height:76px; margin:-12px 0 0 -38px; padding:12px; border-radius:50%; background:#fdfaf5; color:var(--ink); opacity:0; transition:opacity .3s ease; }
.show.is-loading .ko-load { opacity:1; }
/* the live example in the phone starts under the status bar */
.phone .screen iframe { z-index:1; top:44px; height:calc(100% - 44px); width:1px; min-width:100%; opacity:0; transition:opacity .6s ease; }
.show.is-live .phone .screen iframe { opacity:1; }
.show.is-live .phone .sbar { background:#fff; }
.show.is-live .phone .screen video { visibility:hidden; transition:visibility 0s .65s; }
/* the laptop: the same example at desk size, the wide film */
.laptop { width:100%; max-width:440px; }
.laptop .lid { padding:10px 10px 14px; border-radius:14px 14px 4px 4px; background:#14110f; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -30px rgba(42,34,28,.6); }
.laptop .screen { position:relative; aspect-ratio:16 / 10; overflow:hidden; border-radius:4px; background:var(--night); }
.laptop .screen video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.laptop .base { position:relative; height:12px; margin:0 -7%; border-radius:0 0 12px 12px; background:linear-gradient(#ddd6cc, #b8afa3); box-shadow:0 18px 30px -18px rgba(42,34,28,.6); }
.laptop .base::before { content:""; position:absolute; left:41%; top:0; width:18%; height:5px; border-radius:0 0 6px 6px; background:#a59b8f; }
.device-cta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 18px; }
.device-cta .full { display:inline-block; padding:12px 0; font-size:15px; font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:#d3c4b2; text-underline-offset:4px; }
.device-cta .full:hover { text-decoration-color:var(--accent); }
/* "Pošaljite na mobitel": the build's QR code in a popover (only where popovers work) */
.device-cta [data-qr], .qr-pop { display:none; }
@supports selector(:popover-open) { .device-cta [data-qr] { display:inline-flex; } }
.qr-pop:popover-open { display:block; margin:auto; padding:22px 22px 16px; border:0; border-radius:var(--r-card); background:#fff; color:var(--ink); box-shadow:0 24px 60px rgba(15,20,28,.28); text-align:center; }
.qr-pop::backdrop { background:rgba(15,20,28,.35); }
.qr-pop img { display:block; width:200px; height:200px; }
.qr-pop p { margin:10px 0 0; font-size:15px; }
.show.is-loading [data-try] { pointer-events:none; opacity:.8; }
.show.is-loading [data-try] .play { animation:spin 1s linear infinite; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; width:14px; height:14px; margin:0; }
/* the steps: a quiet rail on the left, the active step lit and marked on it */
.steps { position:relative; list-style:none; margin:0; padding:6vh 0 16vh; }
.steps::before { content:""; position:absolute; left:0; top:6vh; bottom:16vh; width:2px; border-radius:1px; background:var(--line); }
/* the dot on the rail at the active number, the rail above it lit (showcase.js: --rail-y, --rail-h) */
.steps::after { content:""; position:absolute; left:-2px; top:-3px; width:6px; height:6px; border-radius:50%; background:var(--accent); translate:0 var(--rail-y, 0); opacity:0; transition:translate .6s var(--ease), opacity .3s ease; }
.steps.rail::after { opacity:1; }
.steps.rail::before { background:linear-gradient(var(--accent), var(--accent)) 0 0 / 100% var(--rail-h, 0) no-repeat, var(--line); transition:background-size .6s var(--ease); }
.step { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:min(30vh, 320px); padding:0 0 0 32px; outline-offset:8px; border-radius:2px; }
.cap { position:relative; }
.cap::before { content:""; position:absolute; left:-32px; top:calc(50% - 44px); width:2px; height:88px; border-radius:1px; background:var(--accent); transform:scaleY(0); transition:transform .45s var(--ease); }
/* the number in the split O, which opens on the active step */
.step .no { position:relative; display:grid; place-items:center; width:42px; height:42px; margin:0 0 12px -2px; font-family:var(--serif); font-size:14px; letter-spacing:.06em; color:var(--accent-d); }
.step .no::before, .step .no::after { content:""; position:absolute; inset:0; border:2px solid; border-radius:50%; clip-path:inset(0 0 55%); transition:transform .45s var(--ease); }
.step .no::after { clip-path:inset(55% 0 0); }
.show.ready .step.on .no::before { transform:translateY(-3px); }
.show.ready .step.on .no::after { transform:translateY(3px); }
.step h3 { font-size:var(--fs-3); margin-bottom:10px; }
.step p { margin:0; max-width:46ch; font-size:17px; color:var(--muted); }
.show.ready .step { cursor:pointer; opacity:.5; transition:opacity .4s ease; }
@media (hover:hover) { .show.ready .step:hover { opacity:.75; } }
.show.ready .step.on { opacity:1; }
.show.ready .step.on .cap::before { transform:none; }
.counts { list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin:16px 0 0; padding:0; font-size:15px; color:var(--muted); }
.counts li { display:inline-flex; align-items:center; gap:7px; }
.counts b { min-width:1.2em; font-weight:600; color:var(--ink); }
.step .seg { margin-top:18px; align-self:flex-start; }
.show .disclaimer { margin:0 0 0 32px; max-width:52ch; }
/* wider screens: the phone as large as the window allows; the box keeps its height for the laptop */
@media (min-width:761px) {
  .show { --pw:min(420px, 42vw, max(240px, (100vh - 135px) / 2)); --ph:calc(var(--pw) * 2); --lh:calc(36px + (min(var(--pw), 440px) - 20px) * .625); --gap:clamp(40px, 6vw, 96px); }
  .show-grid { grid-template-columns:var(--pw) minmax(0, 1fr); gap:var(--gap); }
  .device-col { top:max(69px, calc(61px + (100vh - 61px - var(--ph) - 58px) / 2)); }
  .phone { width:var(--pw); aspect-ratio:1 / 2; }
  .devices { height:var(--ph); grid-template-rows:100%; }
  .device-cta { transition:transform .5s var(--ease); }
  .devices[data-device="laptop"] + .device-cta { transform:translateY(calc((var(--lh) - var(--ph)) / 2)); }
  .device-cta.m { display:none; }
  .show .disclaimer { margin-left:calc(var(--pw) + var(--gap) + 32px); }
}
/* a short landscape window: the phone fits the height */
@media (min-width:761px) and (max-height:560px) {
  .show { --pw:max(150px, (100svh - 130px) / 2); }
  .device-col { top:68px; }
}
/* phones: the phone held at the top, the active .cap under it; a short screen: a plain list (.flat) */
@media (max-width:760px) {
  .show { --cap:clamp(256px, 34svh, 320px); --dev:calc(100svh - 60px - var(--cap)); }
  .device-col { top:60px; z-index:2; height:var(--dev); align-content:center; margin:0 -20px; padding:6px 20px 22px; background:linear-gradient(var(--soft) calc(100% - 22px), rgba(248,239,228,0)); }
  .device-col .device-cta, .device-cta [data-qr] { display:none; }
  .phone { --bezel:6px; width:calc((var(--dev) - 28px) * .48); border-radius:36px; }
  .phone .screen { border-radius:30px; }
  .phone .island { top:calc(var(--bezel) + 8px); width:30%; height:18px; margin-left:-15%; } /* in scale: a small phone keeps the time clear of it */
  .phone .sbar { height:34px; padding:0 8% 0 11%; font-size:10px; }
  .phone .sbar i { width:18px; height:9px; background-size:11px 5px; }
  .phone .screen iframe { top:34px; height:calc(100% - 34px); }
  .phone .screen::after { width:72px; margin-left:-36px; bottom:5px; height:3px; }
  .laptop { max-width:calc(100% - 40px); } /* the base is 14 % wider than the lid and stays inside the gutter */
  .steps { padding:0; }
  .steps::before { top:0; bottom:0; }
  .show:not(.flat, .stage) .steps::after, .show:not(.flat, .stage) .steps::before { transition:none; } /* placed on every scroll frame */
  .step { display:block; min-height:calc(var(--cap) + 20svh); padding-left:24px; }
  .step:first-child { min-height:calc(var(--cap) + 36svh); } /* held longer: a flick from the hero still lands on it */
  .step:focus-visible { outline:0; }
  .step:focus-visible .cap { outline:2px solid var(--accent); outline-offset:-2px; }
  .cap { position:sticky; top:calc(60px + var(--dev)); min-height:var(--cap); display:grid; grid-template-columns:34px minmax(0, 1fr); gap:0 12px; align-content:start; padding:14px 0 10px; }
  .cap > :not(.no, h3) { grid-column:1 / -1; }
  .cap::before { left:-24px; top:14px; height:56px; }
  .step .no { width:34px; height:34px; margin:0; font-size:13px; }
  .step .seg { justify-self:start; }
  .show.ready .step { opacity:1; }
  .step h3 { align-self:center; margin:0; font-size:22px; }
  .step p { margin-top:10px; }
  .show.flat .device-col { position:relative; top:auto; height:auto; padding-bottom:24px; }
  .show.flat .phone { width:min(60vw, 240px); }
  .show.flat .step { min-height:0; padding-block:16px; }
  .show.flat .cap { position:relative; top:auto; min-height:0; padding:0; }
  .device-cta.m { display:flex; justify-content:flex-start; margin:24px 0 0 24px; }
  .show .disclaimer { margin:12px 0 0 24px; }
  /* live: the column fills the screen, the steps stay in place */
  .show.is-live:not(.flat) .device-col { height:calc(100svh - 60px); margin-bottom:calc(0px - var(--cap)); background:var(--soft); }
  .show.is-live .device-col .device-cta { display:flex; }
  .show.is-live .device-cta.m { visibility:hidden; } /* the close button is under the phone then */
  .show.is-live .phone { width:min(100%, calc((100svh - 150px) * .48)); }
}
@media (max-width:420px) { .device-cta.m .full { flex-basis:100%; } }
/* under 390 px the buttons take two rows */
@media (max-width:389px) { .show.is-live .phone { width:min(100%, calc((100svh - 205px) * .48)); } }

/* after the steps: the free flat, the offer in one card */
.your-flat { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:20px 48px; align-items:center; margin-top:var(--block-gap); padding:clamp(24px, 3.4vw, 40px); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); box-shadow:var(--lift); scroll-margin-top:96px; }
.your-flat:focus { outline:none; }
.your-flat h3 { font-size:var(--fs-2); margin-bottom:10px; }
.your-flat p { margin:0; max-width:58ch; font-size:17px; color:var(--muted); }
.your-flat-cta { display:grid; justify-items:start; gap:10px; max-width:300px; }
.your-flat-cta p { font-size:14px; }
@media (max-width:760px) { .your-flat { grid-template-columns:1fr; } }

/* Stage mode (showcase.js, stage.js): the phone and the steps fill the window under the header (--hdr, measured),
   the page holds and the steps glide past one at a time, the active one in the middle (phones: at the top of the
   caption area under the phone). "Preskočite primjer" jumps past it. */
.show { --hdr:61px; --stage-h:calc(100svh - var(--hdr)); }
.show-skip { display:none; }
.show.stage .show-grid { position:relative; height:var(--stage-h); }
.show.stage .device-col { position:relative; top:auto; }
.show.stage .steps-col { height:100%; min-height:0; overflow:hidden; overflow:clip; }
.show.stage .steps { padding:0; translate:0 var(--list-y, 0); transition:translate .9s cubic-bezier(.65, 0, .25, 1); }
.show.stage .steps.still { transition:none; }
.show.stage .steps::before { top:0; bottom:0; }
.show.stage .show-skip { display:flex; justify-content:center; gap:24px; position:absolute; z-index:3; font-size:14px; font-weight:600; }
.show-skip a { padding:12px 0; color:var(--muted); text-decoration:underline; text-decoration-color:#d3c4b2; text-underline-offset:4px; }
.show-skip a:hover { color:var(--ink); text-decoration-color:var(--accent); }
.show-skip .show-try { display:none; align-items:center; gap:7px; color:var(--accent); }
.show-skip .show-try::before { content:""; border-left:9px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; }
@media (min-width:761px) {
  /* the phone leaves room for its buttons (one row, the full-screen link under them); the column is wide enough
     for the two buttons side by side even when a short window makes the phone narrow */
  .show.stage { --pw:min(420px, 42vw, max(200px, (var(--stage-h) - 140px) / 2)); --col:max(var(--pw), 400px); }
  .show.stage .show-grid { grid-template-columns:var(--col) minmax(0, 1fr); align-items:center; }
  .show.stage .laptop { max-width:min(440px, var(--pw)); }
  .show.stage .device-cta .full { flex-basis:100%; padding:2px 0; font-size:14px; text-align:center; }
  .show.stage .disclaimer { margin-left:calc(var(--col) + var(--gap) + 32px); }
  .show.stage .steps-col { -webkit-mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent); }
  .show.stage .step { min-height:min(30vh, 300px); }
  .show.stage .show-skip { right:0; bottom:6px; }
}
@media (max-width:760px) {
  /* the phone a little smaller, for the skip link under it */
  .show.stage { --dev:calc(var(--stage-h) - var(--cap)); }
  .show.stage .show-grid { grid-template-rows:minmax(0, 1fr) var(--cap); }
  .show.stage .device-col { height:auto; padding-bottom:34px; }
  .show.stage .phone { width:calc((var(--dev) - 62px) * .48); }
  .show.stage .steps-col { --stage-at:top; }
  .show.stage .step, .show.stage .step:first-child { min-height:0; height:var(--cap); }
  .show.stage .cap { position:relative; top:auto; min-height:0; }
  .show.stage .show-skip { left:0; right:0; top:calc(var(--dev) - 40px); font-size:13px; }
  .show.stage .show-skip a { padding:10px 0; }
  .show.stage .show-try:not([hidden]) { display:inline-flex; } /* the phone's own buttons wait after the steps */
  .show.stage.is-live .device-col { height:var(--stage-h); padding-bottom:22px; }
  .show.stage.is-live .show-skip { visibility:hidden; }
  .show.stage.is-live .phone { width:min(100%, calc((var(--stage-h) - 90px) * .48)); }
}
@media (max-width:389px) { .show.stage.is-live .phone { width:min(100%, calc((var(--stage-h) - 145px) * .48)); } }

/* ---------- why 3D: the dark band, the house on the left, six arguments on the right ---------- */
section.dark { background:var(--night2); color:#fff; overflow:hidden; overflow:clip; isolation:isolate; } /* clip, not a scroll box: the house panel sticks */
section.dark::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(27,34,48,.4), rgba(27,34,48,.9) 70%); z-index:-1; }
section.dark .eyebrow { color:#ffb98f; }
section.dark .sec-head p:not(.eyebrow) { color:rgba(255,255,255,.8); }
#zasto .sec-head h2 { max-width:none; }
#zasto h2 span { display:block; text-wrap:balance; } /* one sentence per line where it fits */
.why-grid { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); align-items:start; }
/* house.js draws into .house; the facade drawing stays until is-ready (for good if it cannot run) */
.house-panel { position:sticky; top:96px; aspect-ratio:16 / 10; overflow:hidden; border-radius:var(--r-card); border:1px solid rgba(255,255,255,.1); background:radial-gradient(120% 90% at 50% 100%, #2b3343 0%, #1b2230 62%, #161c27 100%); }
.house-fallback { position:absolute; left:6%; bottom:9%; width:88%; height:auto; opacity:.7; transition:opacity .2s ease, visibility 0s .2s; }
.house { position:absolute; inset:0; }
.house canvas { display:block; width:100%; height:100%; }
/* the drawing leaves quickly before the see-through canvas fades in, never behind the house */
.house-panel.ready .house-fallback, .house-panel:has(.house.is-ready) .house-fallback { opacity:0; visibility:hidden; }
/* the pill under the house: once it is drawn, until the first drag (why.js .turned) */
.house-hint { position:absolute; left:50%; bottom:14px; translate:-50% 0; z-index:1; display:flex; align-items:center; gap:8px; margin:0; padding:7px 14px 7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(14,18,27,.62); color:rgba(255,255,255,.88); font-size:13px; font-weight:600; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .5s ease; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.house-hint svg { flex:none; color:#ffb98f; }
.house-hint .coarse { display:none; }
@media (hover:none) and (pointer:coarse) { .house-hint .fine { display:none; } .house-hint .coarse { display:inline; } }
.house-panel.ready .house-hint { opacity:1; transition-delay:.6s; }
.house-panel.ready.turned .house-hint { opacity:0; transition-delay:0s; }
.house > .house-fade { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.why { list-style:none; margin:0; padding:0; }
.why li { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:0 12px; padding:20px 0; border-top:1px solid rgba(255,255,255,.12); }
.why li:first-child { padding-top:2px; border-top:0; }
.why .no { padding-top:3px; font-family:var(--serif); font-size:15px; letter-spacing:.1em; color:#ffb98f; }
.why h3 { margin-bottom:6px; color:#fff; }
.why p { margin:0; max-width:52ch; font-size:17px; color:rgba(255,255,255,.8); }
.why-end { display:flex; align-items:center; gap:14px; margin:var(--block-gap) 0 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:17px; color:rgba(255,255,255,.88); }
.why-end .ko { width:40px; height:40px; color:#fff; --ko-a:var(--accent2); }
.why-end a { color:#ffd2b6; text-decoration:underline; text-underline-offset:3px; padding:12px 0; }
@media (max-width:900px) {
  .why-grid { grid-template-columns:1fr; }
  /* 5:4 keeps the house its size (it fits the width) with room under it for the pill */
  .house-panel { position:relative; top:auto; aspect-ratio:5 / 4; }
  .house-hint { bottom:10px; padding:6px 12px 6px 10px; font-size:12px; }
}
/* desktop: the panel held near the middle of the window while the arguments are read. 10:11 lets the house fit its
   width; poses.js gives the list the room under 06 (--why-pad) for the panel to stay in place until 06 is read. */
@media (min-width:901px) {
  .house-panel { align-self:start; aspect-ratio:10 / 11; max-height:max(360px, 100vh - 160px); top:max(96px, 50vh - 260px); }
  .house-fallback { bottom:auto; top:50%; translate:0 -50%; }
  .why { padding-bottom:var(--why-pad, 0px); }
}

/* drawn art (the 404 page) */
.art.draw { inset:auto; right:3%; top:clamp(24px, 5vw, 72px); width:min(42vw, 520px); height:auto; object-fit:contain; }

/* price list, folded under the calculator */
.pricelist { margin-top:var(--block-gap); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); overflow:hidden; }
.pricelist summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 20px; }
.pricelist summary::-webkit-details-marker { display:none; }
.pricelist summary span { font-family:var(--serif); font-size:var(--fs-4); }
.pricelist summary small { color:var(--muted); font-size:14px; flex:1; }
@media (max-width:560px) { .pricelist summary { display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; } .pricelist summary small { grid-row:2; } .pricelist summary::after { grid-column:2; grid-row:1 / span 2; } }
.pricelist summary::after { content:"+"; font-family:var(--serif); font-size:24px; line-height:1; color:var(--accent); }
.pricelist[open] summary::after { content:"−"; }
.pricelist summary:hover { background:var(--soft); }
.pricelist .table-wrap { border:0; border-top:1px solid var(--line); border-radius:0; }
.pricelist .note { padding:0 20px 16px; margin-top:10px; }
.table-wrap { overflow-x:auto; border-radius:var(--r-card); border:1px solid var(--line); background:var(--card); }
table { width:100%; border-collapse:collapse; background:var(--card); }
th,td { text-align:left; padding:13px 16px; border-top:1px solid var(--line); vertical-align:top; font-size:15px; }
thead th { border-top:0; background:var(--soft); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
tbody tr { transition:background .2s ease; }
tbody tr:hover { background:var(--soft); }
td.p, thead th:last-child { text-align:right; }
td.p { white-space:nowrap; font-family:var(--serif); font-size:var(--fs-4); }
td .s { display:block; color:var(--muted); font-size:14px; font-family:var(--sans); }
.note { margin-top:12px; font-size:14px; color:var(--muted); }

/* the stepper fields, shared by the home calculator and /kalkulator/ */
.field { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.field:first-child { border-top:0; padding-top:0; }
.field label { font-size:15px; }
.field label small { display:block; color:var(--muted); font-size:14px; }
.stepper { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; flex:none; }
.stepper button { font:inherit; width:44px; height:44px; border:0; background:var(--soft); cursor:pointer; color:var(--ink); font-size:18px; transition:background .15s ease; }
.stepper button:hover { background:var(--line); }
.stepper button:active { background:var(--accent); color:#fff; }
.stepper button:focus-visible { outline-offset:-3px; border-radius:999px; }
.stepper input { align-self:stretch; width:56px; text-align:center; border:0; font:inherit; font-size:16px; background:transparent; color:var(--ink); }
@media (max-width:400px) { .calc .stepper input { width:46px; } }

/* ---------- price: the calculator inline (pricing.js, as /kalkulator/) ---------- */
/* the inputs card grows to the dark card's height, Više at its foot, no blank gap (not ".in": reveal.js uses it) */
.calc { display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas:"in out" "pr out"; grid-template-rows:1fr auto; gap:16px 20px; align-items:start; }
.calc .inputs { grid-area:in; align-self:stretch; display:flex; flex-direction:column; padding:22px 22px 14px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); }
.calc .inputs > .fields:not([hidden]) { flex:1 1 auto; display:flex; flex-direction:column; }
.calc .inputs > .fields > .field { flex:1 1 auto; }
.calc .out { grid-area:out; display:flex; flex-direction:column; align-self:stretch; padding:24px; border-radius:var(--r-card); background:var(--ink); color:#fff; box-shadow:var(--lift); }
.calc .promise { grid-area:pr; }
@media (max-width:860px) { .calc { grid-template-columns:1fr; grid-template-areas:"in" "out" "pr"; grid-template-rows:none; } }
.calc .field label, .calc .field .lbl { flex:1; font-size:15px; }
.calc .field .lbl small { display:block; color:var(--muted); font-size:14px; }
.calc .more { margin-top:auto; border-top:1px solid var(--line); }
.calc .more summary { list-style:none; display:flex; align-items:baseline; gap:10px; padding:14px 0 12px; cursor:pointer; font-size:15px; font-weight:600; }
.calc .more summary::-webkit-details-marker { display:none; }
.calc .more summary small { font-size:14px; font-weight:400; color:var(--muted); }
.calc .more summary::after { content:"+"; margin-left:auto; font-family:var(--serif); font-size:22px; line-height:1; color:var(--accent); }
.calc .more[open] summary::after { content:"−"; }
.calc .more .seg button { padding:11px 14px; }
.calc .kalk-link { margin:6px 0 4px; font-size:14px; color:var(--muted); }
.calc .kalk-link a, .calc .ask .addr, .kalk .cta .addr, .contact .mail a, footer .f-links a { padding:12px 0; }
.calc .fig { margin:0 0 16px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12); white-space:nowrap; color:#ffd2b6; }
.calc .fig .num { font-family:var(--serif); font-weight:500; font-size:clamp(40px, 3.8vw, 54px); line-height:1.05; }
.calc .fig .pre { font-family:var(--serif); font-size:clamp(18px, 1.6vw, 22px); margin-right:.3em; }
.calc .fig small { display:block; margin-top:4px; font-size:14px; line-height:1.35; color:rgba(255,255,255,.72); white-space:normal; }
.calc .line { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-top:1px dashed rgba(255,255,255,.14); font-size:15px; color:rgba(255,255,255,.78); }
.calc .line:first-child { border-top:0; padding-top:0; }
.calc .line b { white-space:nowrap; font-weight:500; }
.calc .line.sum { border-top-style:solid; color:#fff; font-weight:600; }
.calc .line.off, .calc .line.off b { color:#f6c7a8; }
.calc .line.total { border-top-style:solid; padding-top:8px; color:#fff; font-size:16px; font-weight:600; }
.calc .line.total b { font-weight:600; }
.calc .line.total + .line { border-top-style:solid; }
.calc .min { margin:12px 0 0; font-size:14px; color:rgba(255,255,255,.72); }
/* the note when an input is held to its limit */
.clamp { margin:6px 0 0; font-size:14px; color:var(--accent-d); }
.clamp:empty { display:none; }
.calc .ask { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:auto; padding-top:20px; }
.calc .ask .btn.ghost { background:transparent; border-color:rgba(255,255,255,.36); color:#fff; }
.calc .ask .btn.ghost:hover { border-color:#fff; }
.calc .ask .addr { font-size:14px; color:rgba(255,255,255,.86); text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; }
.calc .out a:focus-visible, .calc .out button:focus-visible { outline-color:#fff; }
@media (max-width:560px) { .calc .ask .btn { flex:1 1 auto; justify-content:center; } .calc .ask .addr { flex-basis:100%; text-align:center; } }
.promise { display:flex; align-items:center; gap:12px; margin:0; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); font-size:17px; color:var(--muted); }
.promise b { color:var(--ink); font-weight:600; }
.promise .ko { width:34px; height:34px; color:var(--ink); }
/* the shared two-way switch (stanovi / kuće, mobitel / računalo) */
.seg { display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--plate); }
.seg button { font:inherit; font-size:15px; font-weight:600; padding:11px 18px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; transition:background .15s, color .15s; }
.seg button[aria-pressed="true"] { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(42,34,28,.14); }
.seg button:focus-visible { box-shadow:var(--focus); }

#primjer .eyebrow, .contact .eyebrow { color:var(--accent-d); }
/* the capacity line: how many new projects we still take this month (capacity.js) */
.limit { display:flex; align-items:center; gap:14px; margin:clamp(28px, 4vw, 44px) 0 0; padding:16px 20px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--soft); }
.limit .ko { width:34px; height:34px; flex:none; color:var(--ink); }
.limit p { margin:0; font-size:17px; color:var(--muted); }
.limit span[data-capacity] { color:var(--ink); }
.limit a { font-weight:600; color:var(--accent-d); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

/* questions */
.qa { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 32px; align-items:start; }
@media (max-width:760px) { .qa { grid-template-columns:1fr; } }
.qa details { border-top:1px solid var(--line); padding:4px 0; }
.qa summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:""; width:10px; height:10px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .25s ease; flex:none; margin-right:4px; }
.qa details[open] summary::after { transform:translateY(3px) rotate(-135deg); }
.qa p { margin:0 0 14px; color:var(--muted); font-size:17px; }
.qa p a { font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* contact */
/* the text on top with the walking O beside it (small, in the corner, on phones), then the free-flat form and the
   other ways to send (request.js), then who we are */
.contact { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-card); padding:clamp(28px, 4vw, 48px); display:grid; grid-template-columns:minmax(0, 1fr) 180px; gap:28px 56px; align-items:center; background:var(--soft); scroll-margin-top:80px; }
.contact .mark { grid-column:2; grid-row:1; justify-self:center; width:150px; height:150px; color:#dccdb9; }
.contact .text { grid-column:1; }
.contact .req-wrap, .contact > .cta, .contact .who { grid-column:1 / -1; }
@media (max-width:820px) { .contact { grid-template-columns:1fr; } .contact .mark { position:absolute; right:20px; top:24px; width:52px; height:52px; } .contact h2 { padding-right:56px; } }
/* one sentence per line where both fit */
.contact h2 > span { display:inline-block; }
.contact .lede { margin:10px 0 0; color:var(--muted); font-size:17px; max-width:60ch; }
.contact > .cta { margin-top:0; }
.contact .mail { margin:4px 0 0; font-size:15px; }
.contact .mail a { display:inline-block; color:var(--ink); font-weight:600; }
.contact .who { padding-top:20px; border-top:1px solid var(--line); }
.contact .who p { margin:0; max-width:68ch; font-size:16px; line-height:1.55; color:var(--muted); }
.contact .who b { color:var(--ink); font-weight:600; }

/* the free-flat form: the fields on a card, the other ways to send beside it */
.req-wrap { display:grid; grid-template-columns:minmax(0, 1fr) minmax(240px, 300px); gap:24px 40px; align-items:start; }
.req, .req-done { padding:clamp(20px, 2.6vw, 32px); border:1px solid var(--line); border-radius:var(--r-card); background:var(--card); box-shadow:var(--lift); }
.req-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 18px; }
.rf { min-width:0; }
.rf.wide { grid-column:1 / -1; }
.rf label, .rf .lbl { display:block; margin:0 0 6px; font-size:15px; font-weight:600; color:var(--ink); }
.req input:not([type="file"]), .req select { box-sizing:border-box; width:100%; height:48px; margin:0; padding:0 14px; font:inherit; font-size:16px; color:var(--ink); background:#fff; border:1px solid #dccdb9; border-radius:var(--r-in); transition:border-color .15s ease, box-shadow .15s ease; }
.req select { -webkit-appearance:none; appearance:none; padding-right:40px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2375685c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center; cursor:pointer; }
.req input::placeholder { color:#a99a8a; }
.req input:hover, .req select:hover { border-color:#c4b09a; }
.req input:focus, .req select:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus); }
.req [aria-invalid] { border-color:#b3261e; box-shadow:0 0 0 3px rgba(179,38,30,.16); }
/* the file: a dashed drop area, the real input invisible on top of it */
.drop { position:relative; display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 16px; color:var(--muted); background:var(--bg); border:1.5px dashed #cdbba6; border-radius:var(--r-in); transition:border-color .15s ease, background .15s ease; }
.drop svg { flex:none; color:var(--accent); }
.drop-t { min-width:0; font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.drop-t b { color:var(--ink); font-weight:600; }
.drop-t small { font-size:14px; }
.drop input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.drop:hover, .drop.over { border-color:var(--accent); background:#fff; }
.drop:focus-within { border-color:var(--accent); box-shadow:var(--focus); }
.drop.has { border-style:solid; background:#fff; }
.drop:has(input[aria-invalid]) { border-color:#b3261e; }
.drop-x { margin:4px 0 0; padding:10px 0; font:inherit; font-size:14px; color:var(--muted); background:none; border:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.drop-x:hover { color:var(--ink); }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.req-send { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:22px; }
.req-send .btn { font-size:16px; padding:15px 28px; }
.req-send .btn:disabled { opacity:.7; cursor:progress; transform:none; }
.req-send p { flex:1 1 240px; margin:0; font-size:14px; line-height:1.45; }
.req-send p a { color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.req-msg { margin:14px 0 0; font-size:15px; line-height:1.45; }
.req-msg:empty { display:none; }
.req-msg.err { color:#a3261b; font-weight:500; }
.req-msg.wait { color:var(--muted); }
.req-msg a { font-weight:600; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.req-done { display:grid; justify-items:start; gap:8px; }
.req-done:focus { outline:none; }
.req-done .ko { width:44px; height:44px; color:var(--accent); }
.req-done h3 { font-size:var(--fs-3); }
.req-done p { margin:0; font-size:17px; color:var(--muted); }
/* the other ways: WhatsApp, a call, e-mail; then the pilot for whoever wants it on their site now */
.routes { display:grid; gap:10px; align-content:start; }
.routes-h { margin:0 0 2px; font-weight:600; }
.routes .btn { justify-content:center; }
.pilot { margin-top:12px; padding-top:16px; border-top:1px solid var(--line); }
.pilot p { margin:0; font-size:15px; line-height:1.5; color:var(--muted); }
.pilot b { color:var(--ink); font-weight:600; }
@media (max-width:900px) { .req-wrap { grid-template-columns:1fr; } .routes { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); } .routes-h, .routes .mail, .pilot { grid-column:1 / -1; } }
@media (max-width:560px) {
  .contact { padding:24px 20px; }
  .req-grid { grid-template-columns:1fr; }
  .req-send .btn { flex:1 1 100%; justify-content:center; }
}

/* one footer on every page (src/partials/footer.html) */
footer { padding:32px 0 40px; color:var(--muted); font-size:14px; border-top:1px solid var(--line); background:var(--bg); }
footer .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px 32px; flex-wrap:wrap; }
footer .brand svg { height:22px; }
footer .f-links { display:flex; flex-wrap:wrap; align-items:center; gap:0 24px; font-size:15px; }
footer .f-links a { color:var(--ink); }
footer .f-note { flex:1 1 100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 24px; margin:0; padding-top:16px; border-top:1px solid var(--line); }

/* legal pages and the 404 page */
.page { padding:48px 0 64px; }
.page .wrap { max-width:760px; }
.page h1 { font-size:clamp(30px, 3.4vw, 40px); margin-bottom:8px; }
.page .lede { color:var(--muted); font-size:17px; margin:0 0 28px; }
.page h2 { font-size:var(--fs-3); margin:32px 0 10px; }
.page p, .page li { color:var(--ink); }
.page .eyebrow { color:var(--accent); }
.page dl { display:grid; grid-template-columns:minmax(140px, 1fr) 2fr; gap:8px 20px; margin:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:18px 20px; }
.page dt { color:var(--muted); font-size:14px; }
.page dd { margin:0; }
@media (max-width:520px) { .page dl { grid-template-columns:1fr; gap:2px 0; } .page dt { margin-top:10px; } .page dt:first-child { margin-top:0; } }
.page .back { display:inline-block; margin-top:28px; }
/* the 404 page fills the screen; the drawing under the buttons */
body.nf { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
body.nf main { flex:1; }
.notfound { position:relative; min-height:70vh; display:grid; place-items:center; text-align:center; padding:60px 20px calc(min(84vw, 820px) * .47 + 48px); overflow:hidden; color:#fff; background:var(--night2); }
.notfound .art.draw { opacity:.5; top:auto; bottom:0; right:50%; width:min(84vw, 820px); transform:translateX(50%); }
.notfound > div { position:relative; }
.notfound .code { font-family:var(--serif); font-size:clamp(72px, 14vw, 140px); line-height:1; color:#ffb98f; letter-spacing:-.02em; margin:0; }
.notfound .code .ko { width:.8em; height:.8em; margin:0 .04em; vertical-align:-.04em; color:inherit; --ko-a:var(--accent2); }
.notfound p { color:rgba(255,255,255,.85); max-width:44ch; margin:10px auto 0; }
.notfound .cta { justify-content:center; }
.notfound .btn.ghost { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4); }

/* phones: running text at 17 px at least */
@media (max-width:760px) { body, .contact .who p { font-size:17px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .hero .screen picture, .hero .screen video, .hero .screen iframe, .btn, .why li, .step, .cap::before, .step .no::before, .step .no::after, .devices, .devices > *, .device-cta, .phone .snap, .house-fallback, .hero-load, .ko-load, .steps.rail::before, .show.stage .steps, .steps::after, nav.main.dot::after { transition:none; }
  .scroll-hint i, .hero.loading #open3d .play, .show.is-loading [data-try] .play, html.intro-plain .intro-mark { animation:none; }
}
@media print {
  header.top, .intro-veil, .live-bar, .scroll-hint, .skip, .art, .device-col, .house-panel { display:none !important; }
  .hero { min-height:auto; color:var(--ink); background:none; }
  .hero .screen { position:static; }
  .hero .screen img { position:static; height:auto; }
  .show.ready .step { opacity:1; }
  section { break-inside:avoid; }
}

/* kalkulator page (/kalkulator/): the full offer calculator, two columns */
.kalk .wrap { max-width:1120px; }
.kalk .lede { max-width:64ch; }
.kalk .seg { margin:20px 0 22px; }
.kalk .cols { display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:start; }
@media (max-width:860px) { .kalk .cols { grid-template-columns:1fr; } }
.kalk .left { display:grid; gap:24px; }
/* phones: the price straight after the inputs, then what is included */
@media (max-width:860px) {
  .kalk .left { display:contents; }
  .kalk .left > .panel:first-child { order:1; }
  .kalk .result { order:2; }
  .kalk .left > .panel:last-child { order:3; }
}
.kalk .panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; }
.kalk .panel h2 { font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 14px; }
.kalk .chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.kalk .chip { font:inherit; display:inline-flex; flex-direction:column; align-items:flex-start; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:var(--r-in); padding:8px 12px; cursor:pointer; text-align:left; line-height:1.25; transition:border-color .15s, background .15s; }
.kalk .chip b { font-size:14px; font-weight:600; }
.kalk .chip span { font-size:13px; color:var(--muted); }
.kalk .chip:hover { border-color:var(--accent); }
.kalk .chip.on { border-color:var(--accent); background:var(--soft); box-shadow:inset 0 0 0 1px var(--accent); }
.kalk .chip.on span { color:var(--accent-d); }
.kalk .field label { flex:1; }
.kalk .field label small { max-width:44ch; }
.kalk .stepper input { width:60px; }
.kalk .toggle { position:relative; width:46px; height:26px; flex:none; }
.kalk .toggle input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.kalk .toggle span { position:absolute; inset:0; background:#d9ccbc; border-radius:26px; pointer-events:none; transition:.15s; }
.kalk .toggle span::after { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; }
.kalk .toggle input:checked + span { background:var(--accent); }
.kalk .toggle input:checked + span::after { transform:translateX(20px); }
.kalk .toggle input:focus-visible + span { box-shadow:var(--focus); }
.kalk .bands { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:-2px 0 12px; padding:0; list-style:none; }
.kalk .bands li { border:1px solid var(--line); border-radius:var(--r-in); padding:6px 8px; text-align:center; font-size:13px; color:var(--muted); line-height:1.3; }
.kalk .bands li b { display:block; color:var(--ink); font-size:15px; font-variant-numeric:lining-nums tabular-nums; }
.kalk .bands li.on { border-color:var(--accent); background:var(--soft); color:var(--accent-d); }
.kalk .bands li.on b { color:var(--accent-d); }
.kalk .bands-note { margin:-6px 0 12px; font-size:14px; color:var(--muted); }
@media (max-width:420px) { .kalk .bands { grid-template-columns:repeat(2, 1fr); } }
.kalk .illu { width:100%; height:auto; display:block; font-family:var(--sans); }
/* phones: labels would be 6 px, so the list below names the parts */
@media (max-width:520px) { .kalk .illu text:not([text-anchor="middle"]), .kalk .illu line[stroke="#75685c"], .kalk .illu circle[fill="#75685c"], .kalk .illu rect { display:none; } }
.kalk .included { margin:16px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:5px 16px; font-size:15px; }
.kalk .included li { color:var(--muted); }
.kalk .included li::before { content:"✓ "; color:var(--accent); font-weight:700; }
@media (max-width:520px) { .kalk .included { grid-template-columns:1fr; } }
.kalk .result { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-card); background:linear-gradient(180deg, #fff7ee 0%, var(--card) 40%); box-shadow:var(--lift); padding:22px; }
@media (min-width:861px) and (min-height:820px) { .kalk .result { position:sticky; top:76px; } }
.kalk .result::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg, var(--accent), var(--accent2)); }
.kalk .result h2 { font-size:var(--fs-3); margin:4px 0 2px; }
.kalk .result .sub { margin:0 0 12px; color:var(--muted); font-size:14px; min-height:1.4em; }
.kalk .hero-num { background:var(--ink); color:#fff; border-radius:var(--r-in); padding:14px 16px; margin:0 0 14px; }
.kalk .hero-num em { font-style:normal; display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.kalk .hero-num strong { display:block; font-family:var(--serif); font-weight:500; font-size:40px; line-height:1.05; margin:4px 0 2px; font-variant-numeric:lining-nums tabular-nums; }
.kalk .hero-num small { display:block; font-size:14px; color:rgba(255,255,255,.75); }
.kalk .lines div { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:15px; }
.kalk .lines div span:last-child { white-space:nowrap; font-variant-numeric:lining-nums tabular-nums; }
.kalk .lines div.sum { border-bottom:none; font-weight:600; font-size:16px; padding-top:9px; }
.kalk .lines div.off { color:var(--accent); font-weight:600; }
.kalk .monthly { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.kalk .big { background:var(--soft); border-radius:var(--r-in); padding:10px 14px; margin:0 0 6px; }
.kalk .big em { font-style:normal; color:var(--muted); font-size:14px; display:block; }
.kalk .big strong { font-family:var(--serif); font-weight:500; color:var(--accent); font-size:30px; line-height:1.2; font-variant-numeric:lining-nums tabular-nums; }
.kalk .big strong small { font-family:var(--sans); font-size:14px; color:var(--muted); font-weight:400; }
.kalk .monthly .lines div { font-size:15px; }
.kalk .min { margin:10px 0 0; font-size:14px; color:var(--muted); }
.kalk .note { color:var(--muted); margin-top:14px; }
.kalk .cta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:16px; }
.kalk .cta .btn { flex:1 1 auto; justify-content:center; }
.kalk .cta .addr { flex-basis:100%; text-align:center; font-size:14px; color:var(--muted); }
/* narrow phones: the examples two by two, a narrower number field */
@media (max-width:400px) { .kalk .chips { display:grid; grid-template-columns:1fr 1fr; } .kalk .stepper input { width:46px; } }

/* ---------- house.css ---------- */
/* ---------- the spinning house (src/js/house.js, see docs/LOGO_AND_HOUSE.md) ----------
   site.css places and sizes the container (.house in .house-panel, 16:10) and fades the drawing under it once the
   container has .is-ready. These rules cover the canvas the module puts into it: it fills the container, fades in
   over the drawing when the first frame is drawn, and takes a horizontal drag (vertical swipes still scroll). */
.house > .house-gl { display:block; width:100%; height:100%; opacity:0; transition:opacity .7s ease; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.house.is-ready > .house-gl { opacity:1; }
.house > .house-gl.is-dragging { cursor:grabbing; }
@media (prefers-reduced-motion: reduce) {
  .house > .house-gl { transition:none; }
}

/* ---------- logo.css ---------- */
/* ---------- the animated wordmark (logo.js, docs/LOGO_AND_HOUSE.md); at rest none of this applies ----------
   .is-pre: the intro's first frame (in the HTML); .is-through: 0.9 s, the light along the line. viewBox units. */
.wordmark .wm-line { transform-box:fill-box; transform-origin:0 50%; }
.wordmark .wm-dot { transform-box:fill-box; transform-origin:50% 50%; }
/* small sizes (header, footer, the flying intro mark): letters 3 units off the line, the line 4: never struck-through */
.brand .wordmark .wm-top, html.intro-fly .intro-mark .wm-top { translate:0 -3px; }
.brand .wordmark .wm-bot, html.intro-fly .intro-mark .wm-bot { translate:0 3px; }
.brand .wordmark .wm-line, .brand .wordmark .wm-glint, html.intro-fly .intro-mark .wm-line { scale:1 .8; }
.wordmark .wm-glint { transform-box:fill-box; transform-origin:50% 50%; }
.intro-mark .wm-top, .intro-mark .wm-bot, .intro-mark .wm-line { transition:translate .6s cubic-bezier(.65, 0, .25, 1), scale .6s cubic-bezier(.65, 0, .25, 1); }
/* the light along the line: brighter orange on light grounds, nearly white on dark */
.wordmark .wm-g { stop-color:var(--wm-glint, #f0925a); }
body.home.over-hero header.top, section.dark, .wordmark.on-dark { --wm-glint:#ffe2cf; }

@media (prefers-reduced-motion: no-preference) {
  .wordmark.is-pre .wm-line { transform:scaleX(0); }
  .wordmark.is-pre > g, .wordmark.is-pre .wm-dot { opacity:0; }

  .wordmark.is-through { overflow:visible; animation:wm-clock .9s linear both; }

  /* through */
  .wordmark.is-through .wm-glint { animation:wm-th-glint .9s both, wm-th-glint-o .9s linear both; }
  .wordmark.is-through .wm-o .wm-top { animation:wm-th-o-top .9s both; }
  .wordmark.is-through .wm-o .wm-bot { animation:wm-th-o-bot .9s both; }
  .wordmark.is-through .wm-house { animation:wm-th-house .9s both; }
  .wordmark.is-through .wm-k .wm-top { animation:wm-th-k-top .9s both; }
  .wordmark.is-through .wm-k .wm-bot { animation:wm-th-k-bot .9s both; }
  .wordmark.is-through .wm-r .wm-top { animation:wm-th-r-top .9s both; }
  .wordmark.is-through .wm-r .wm-bot { animation:wm-th-r-bot .9s both; }
  .wordmark.is-through .wm-z .wm-top { animation:wm-th-z-top .9s both; }
  .wordmark.is-through .wm-z .wm-bot { animation:wm-th-z-bot .9s both; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark, .wordmark * { animation:none !important; transition:none !important; }
}

/* the clock: its animationend tells logo.js the play is over */
@keyframes wm-clock { from { --wm-clock:0; } to { --wm-clock:1; } }
/* the light reaches the dot at 72 % (K 15 %, R 24 %, O 32 %, Z 44 %) */
@keyframes wm-th-glint {
  0% { transform:none; animation-timing-function:cubic-bezier(.4,0,.3,1); }
  72%, 100% { transform:translateX(386.43px); }
}
@keyframes wm-th-glint-o { 0% { opacity:0; } 10%, 62% { opacity:1; } 78%, 100% { opacity:0; } }
@keyframes wm-th-o-top {
  0%, 22% { transform:none; animation-timing-function:cubic-bezier(.25,.6,.3,1); }
  36%, 46% { transform:translateY(-6px); animation-timing-function:cubic-bezier(.45,0,.3,1); }
  88%, 100% { transform:none; }
}
@keyframes wm-th-o-bot {
  0%, 22% { transform:none; animation-timing-function:cubic-bezier(.25,.6,.3,1); }
  36%, 46% { transform:translateY(6px); animation-timing-function:cubic-bezier(.45,0,.3,1); }
  88%, 100% { transform:none; }
}
@keyframes wm-th-house {
  0%, 26% { transform:none; animation-timing-function:cubic-bezier(.25,.6,.3,1); }
  40%, 50% { transform:translateY(-2.5px); animation-timing-function:cubic-bezier(.45,0,.3,1); }
  88%, 100% { transform:none; }
}
@keyframes wm-th-k-top { 0%, 11% { transform:none; animation-timing-function:cubic-bezier(.3,0,.3,1); } 19% { transform:translateY(-1.8px); animation-timing-function:cubic-bezier(.45,0,.3,1); } 38%, 100% { transform:none; } }
@keyframes wm-th-k-bot { 0%, 11% { transform:none; animation-timing-function:cubic-bezier(.3,0,.3,1); } 19% { transform:translateY(1.8px); animation-timing-function:cubic-bezier(.45,0,.3,1); } 38%, 100% { transform:none; } }
@keyframes wm-th-r-top { 0%, 19% { transform:none; animation-timing-function:cubic-bezier(.3,0,.3,1); } 27% { transform:translateY(-1.8px); animation-timing-function:cubic-bezier(.45,0,.3,1); } 46%, 100% { transform:none; } }
@keyframes wm-th-r-bot { 0%, 19% { transform:none; animation-timing-function:cubic-bezier(.3,0,.3,1); } 27% { transform:translateY(1.8px); animation-timing-function:cubic-bezier(.45,0,.3,1); } 46%, 100% { transform:none; } }
@keyframes wm-th-z-top { 0%, 39% { transform:none; animation-timing-function:cubic-bezier(.3,0,.3,1); } 47% { transform:translateY(-1.8px); animation-timing-function:cubic-bezier(.45,0,.3,1); } 66%, 100% { transform:none; } }
@keyframes wm-th-z-bot { 0%, 39% { transform:none; animation-timing-function:cubic-bezier(.3,0,.3,1); } 47% { transform:translateY(1.8px); animation-timing-function:cubic-bezier(.45,0,.3,1); } 66%, 100% { transform:none; } }

/* ---------- marks.css ---------- */
/* The O as a living sign (marks.js, docs/LOGO_AND_HOUSE.md): the dot walks round the ring, which never turns. */
/* no weight (:where): a placement such as .ko-load sets its own size */
:where(.ko) { position:relative; display:inline-block; flex:none; width:1em; height:1em; vertical-align:middle; color:var(--grey); }
.ko svg { display:block; width:100%; height:100%; overflow:visible; }
.ko .k-ring { fill:currentColor; }
.ko .k-a { fill:var(--ko-a, var(--accent)); }
.ko .k-walk, .ko .k-lift { transform-box:view-box; transform-origin:60px 60px; }
.eyebrow.orbit::before { content:none; }
.eyebrow .ko { width:24px; height:24px; margin:-6px 10px -4px -2px; }
/* the O opening onto the live example (openOnto): the frame inside the circle, the loader cut */
.hero.iris .screen iframe, .show.iris .phone .screen iframe { --m:radial-gradient(circle at var(--ix) var(--iy), #000 var(--ir), transparent calc(var(--ir) + var(--if))); }
.hero.iris .hero-load, .show.iris .ko-load { --m:radial-gradient(circle at var(--ix) var(--iy), transparent var(--ir), #000 calc(var(--ir) + var(--if))); }
.hero.iris .screen iframe, .show.iris .phone .screen iframe, .hero.iris .hero-load, .show.iris .ko-load { -webkit-mask-image:var(--m); mask-image:var(--m); opacity:1; transition:none; }
.hero.iris .screen video, .hero.iris .screen picture, .show.iris .phone .screen video { visibility:visible; }
@media (prefers-reduced-motion: no-preference) {
  .ko.run .k-walk { animation:k-walk 9.6s infinite; }
  .ko.run .k-lift { animation:k-lift 9.6s infinite; }
  .hero.loading .hero-load .k-walk, .show.is-loading .ko-load .k-walk { animation:k-load 1.6s infinite; }
}
/* the ease segments meet the linear one at 50 degrees a second: no hitch */
@keyframes k-walk {
  0%, 12.5% { transform:rotate(0deg); animation-timing-function:cubic-bezier(.333, 0, .667, .333); }
  25% { transform:rotate(30deg); animation-timing-function:linear; }
  87.5% { transform:rotate(330deg); animation-timing-function:cubic-bezier(.333, .667, .667, 1); }
  100% { transform:rotate(360deg); }
}
@keyframes k-lift {
  0%, 30% { transform:none; animation-timing-function:cubic-bezier(.3, 0, .2, 1); }
  37.5%, 42% { transform:translateY(-5px); animation-timing-function:cubic-bezier(.4, 0, .2, 1); }
  50%, 100% { transform:none; }
}
@keyframes k-load { 0%, 16% { transform:rotate(0deg); animation-timing-function:cubic-bezier(.45, 0, .55, 1); } 100% { transform:rotate(360deg); } }