/* darila.css — ONLY the rules that do not already exist in the site's CSS (poslovna-darila.html).
   Everything else (chips, h2 scale, buttons, panes, .quote, .vals, .ph, .io reveal, footer) comes from the site's inline <style>
   and assets/pastel-switch.css. Tokens only: --ink --mut --mut2 --line --scrim --orange --eo --spr --rim --rim-2 --hl.
   Loaded AFTER pastel-switch.css. */

/* ---------- Lenis (inlined subset of vendor/lenis.css) ---------- */
html.lenis, html.lenis body{ height:auto; }
html.lenis{ scroll-behavior:auto; }
.lenis.lenis-stopped{ overflow:clip; }
.lenis [data-lenis-prevent]{ overscroll-behavior:contain; }

/* ---------- STAGE: fixed full-viewport scrubbed video ---------- */
.dstage{
  position:fixed; inset:0; z-index:2; overflow:hidden; pointer-events:none;
  background:var(--pastelTint, #dbe9de);
  --stageDim:0;
}
.dstage.is-out{ visibility:hidden; }
/* stage 2 (print products): arrived at by scrolling, so it fades in (opacity driven by darila.js); no entrance scale, no idle breathing */
.dstage-2{ opacity:0; }
.dstage-2 .dstage-in{ inset:0; animation:none; will-change:auto; }
.dstage-in{
  position:absolute; inset:-1.2%; will-change:transform;
  /* idle breathing (transform) + load entrance (individual scale/opacity properties, so the two never fight) */
  animation:dBreathe 7s ease-in-out infinite alternate, dEnter 1.2s var(--eo) .15s both;
}
.dstage.is-moving .dstage-in{ animation-play-state:paused, running; }
.dstage-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 60%; display:block;
}
.dstage.is-portrait .dstage-media{ object-position:50% 100%; }
video.dstage-media{ opacity:0; transition:opacity .25s ease; background:transparent; }
video.dstage-media.is-ready{ opacity:1; }
/* sharp end still above the video, same fit/position (opacity 0 -> 1 over scroll p .80-.86, driven by darila.js) */
.dstage-end{ opacity:0; }
/* soft hand-off veil in the page tint (driven by --stageDim from JS) */
.dstage::after{
  content:""; position:absolute; inset:0; background:var(--pastelTint, #dbe9de);
  opacity:var(--stageDim); pointer-events:none;
}
@keyframes dEnter{
  from{ opacity:0; scale:1.04; }
  to  { opacity:1; scale:1; }
}
@keyframes dBreathe{
  from{ transform:scale(1) translate3d(0,0,0); }
  to  { transform:scale(1.012) translate3d(0,-6px,0); }
}

/* automatic BARVA switch (darila.js sets html.is-autotint for ~1 s): the page tint eases over 600 ms, none under reduced motion */
html.is-autotint body{ transition:background-color .6s ease; }
html.is-reduce.is-autotint body{ transition:none; }

/* ---------- RUNWAY + overlays ---------- */
#zlaganje{ position:relative; height:180vh; }
#zlaganje2{ position:relative; height:170vh; }
.zl-ov{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  --dgut:calc(max(0px, (100vw - 1180px) / 2) + clamp(20px, 4.5vw, 64px));   /* the site's content gutter */
}
.zl-ov > *{ position:absolute; will-change:opacity, transform; }
.zl-ov .is-off{ visibility:hidden; }

.dpane{
  background:var(--scrim);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  border-radius:22px;
}
/* hero pane — scrim pane carrying the .phero h1 / .sub scale */
.dhero{
  left:var(--dgut);
  bottom:max(8vh, 64px); top:auto;      /* bottom-left (~8vh up, never under the scroll cue): the landscape clip's lower-left is empty floor + plinths */
  width:min(500px, calc(100vw - 40px)); padding:24px 26px;
  pointer-events:auto;
}
.dhero .chip{ margin-bottom:0; }
.dhero h1, .dhero h2{
  margin:14px 0 10px;
  font-size:clamp(28px, 2.9vw, 42px);
  line-height:1.07; font-weight:300; letter-spacing:-.022em;
  text-wrap:balance; color:#f7f6fb; max-width:20ch;
}
.dhero h1 em, .dhero h2 em{ font-family:var(--fg); font-style:italic; font-weight:501; letter-spacing:-.005em; color:#f6eede; white-space:nowrap; }
.dhero .sub{ font-size:clamp(14.5px, 1.25vw, 17px); line-height:1.6; color:var(--mut); max-width:56ch; margin-bottom:16px; }
.dhero .cta-row{ gap:12px 16px; }
@media (min-width:768px){      /* the bottom-left pane is 500px wide: keep both CTAs on one row */
  .dhero .btn-go{ padding:15px 24px; }
  .dhero .cta-sec{ gap:11px; }
  .dhero .cta-sec .circ{ width:40px; height:40px; font-size:15px; }
}
/* stage 2 pane: top-left (the lower half of that picture is full of objects, the upper part is empty table); phones use the .dhero phone rules */
.dhero-2{ opacity:0; }
@media (min-width:768px){
  .dhero-2{ top:96px; bottom:auto; }
}
[data-theme="light"] .dhero h1, [data-theme="light"] .dhero h2, [data-theme="light"] .dbeat h2{ color:#1d1a20; }
[data-theme="light"] .dhero h1 em, [data-theme="light"] .dhero h2 em, [data-theme="light"] .dbeat h2 em{ color:#2a2330; }

.dbeat{ opacity:0; padding:20px 30px; max-width:min(560px, calc(100vw - 32px)); }
.dbeat h2{
  font-size:clamp(26px, 3vw, 40px); font-weight:300; letter-spacing:-.018em; line-height:1.16;
  color:#f7f6fb; text-wrap:balance;
}
.dbeat h2 em{ font-family:var(--fg); font-style:italic; font-weight:501; color:#f6eede; }
.dbeat-1{ right:var(--dgut); bottom:max(8vh, 64px); }          /* mirrors the hero pane (bottom right); phones: bottom centre */
.dbeat-2{ left:50%; top:88px; translate:-50% 0; text-align:center; max-width:min(720px, calc(100vw - 32px)); }

.dcue{
  left:50%; bottom:10px; translate:-50% 0;           /* bottom centre, low enough to sit under the hero pane's bottom edge (8vh up) */
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-family:var(--fm); font-size:9px; line-height:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink);
  padding:9px 18px 0; border-radius:16px; background:var(--scrim);
  -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
}
.dcue i{ display:block; width:1px; height:14px; background:var(--ink); transform-origin:top; animation:dCue 2.2s var(--eo) infinite; }
@keyframes dCue{
  0%{ transform:scaleY(0); opacity:.9; } 55%{ transform:scaleY(1); opacity:.9; } 100%{ transform:scaleY(1); opacity:0; }
}

/* .section-head .lead as on ponudba.html (not part of the o-nas inline CSS the skeleton was copied from) */
.section-head h2{ text-wrap:balance; }
.section-head .lead{ margin-top:18px; font-size:14.5px; line-height:1.72; color:var(--mut); max-width:68ch; }

/* first section head sits on the fading stage: site scrim-card pattern (as .section-head on the home page) */
.dsec-first{ padding:34px clamp(20px, 3vw, 40px); max-width:720px; }
/* print section: the head (just the paragraph) follows the runway, so it carries the section's top spacing itself */
.dsec-tisk{ margin-top:clamp(54px, 7.5vh, 90px); }
.dsec-tisk .lead{ margin-top:0; }
#tiskovine{ padding-top:0; }

/* ---------- 01 · rows (editorial hairlines) ---------- */
.drows{ list-style:none; margin-top:clamp(8px, 1.6vw, 18px); }
.drows li{ border-top:1px solid var(--line); }
.drows li:last-child{ border-bottom:1px solid var(--line); }
.drows li a{
  position:relative; display:grid; grid-template-columns:clamp(72px, 9vw, 128px) minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(14px, 3vw, 40px); align-items:baseline;
  padding:clamp(20px, 2.4vw, 30px) 0; color:inherit; text-decoration:none;
}
/* each row links to its chapter in the catalog (katalog-daril.html): a quiet arrow on hover / focus */
.drows li a::after{
  content:"→"; position:absolute; right:0; top:50%; translate:-8px -50%; opacity:0;
  font-size:20px; line-height:1; color:var(--mut);
  transition:opacity .3s ease, translate .35s var(--eo), color .3s ease;
}
.drows li a:hover::after, .drows li a:focus-visible::after{ opacity:1; translate:0 -50%; color:var(--ink); }
@media (hover:none){ .drows li a::after{ opacity:.45; translate:0 -50%; } }
.drows + .btn-go{ margin-top:clamp(22px, 2.8vw, 34px); }
.btn-go small{ margin-left:12px; font-family:var(--fm); font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.6; }
.drows .n{
  font-size:clamp(34px, 3.4vw, 50px); font-weight:200; line-height:1; letter-spacing:-.03em;
  color:var(--mut2); font-variant-numeric:tabular-nums;
}
.drows h3{ font-size:clamp(20px, 2vw, 26px); font-weight:300; letter-spacing:-.015em; line-height:1.2; color:var(--ink); }
.drows p{ font-size:14px; line-height:1.72; color:var(--mut); max-width:52ch; }
.dsec-quote{ margin-top:clamp(30px, 4vw, 48px); }

/* gallery */
.dgal-head{ margin-top:clamp(54px, 7vw, 88px); margin-bottom:22px; }
.dgal{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px, 1.4vw, 18px); list-style:none; }
.gcard{ position:relative; aspect-ratio:4/5; border-radius:18px; background:var(--scrim); overflow:hidden; }
.gcard img{
  position:absolute; inset:0; width:100%; height:100%; padding:12%; object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(35,31,32,.18));
  transition:transform .7s var(--eo);
}
.gcard span{
  position:absolute; left:16px; bottom:14px;
  font-family:var(--fm); font-size:8.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--mut);
}
@media (hover:hover){ .gcard:hover img{ transform:translateY(-6px) rotate(-1.5deg); } }

/* ---------- ticket (coupon) ---------- */
.dgrid{
  display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 1fr);
  gap:clamp(32px, 6vw, 90px); align-items:center;
}
.dgrid .section-head{ margin-bottom:0; }
.dgrid .section-head .lead{ margin-bottom:28px; }
.ticket-wrap{ width:min(420px, 100%); filter:drop-shadow(0 26px 30px rgba(0,0,0,.32)); }
.ticket{
  --cut:66.666%;
  position:relative; width:100%; aspect-ratio:420/440; border-radius:22px;
  display:grid; grid-template-rows:2fr 1fr;
  color:rgba(248,247,252,.96);
  background:linear-gradient(180deg, rgba(38,38,46,.94) 0%, rgba(9,9,13,.96) 100%);
  -webkit-mask-image:radial-gradient(circle at 0 var(--cut), transparent 12px, #000 12.6px), radial-gradient(circle at 100% var(--cut), transparent 12px, #000 12.6px);
  -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat; -webkit-mask-composite:source-in;
          mask-image:radial-gradient(circle at 0 var(--cut), transparent 12px, #000 12.6px), radial-gradient(circle at 100% var(--cut), transparent 12px, #000 12.6px);
          mask-size:100% 100%; mask-repeat:no-repeat; mask-composite:intersect;
}
.ticket::before{ /* the same faint iridescent rim as .btn-go */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from 230deg, rgba(255,154,213,.55), rgba(159,216,255,.6), rgba(255,226,168,.5), rgba(201,184,255,.6), rgba(255,154,213,.55));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude;
  opacity:.42;
}
.ticket::after{ /* perforation */
  content:""; position:absolute; left:20px; right:20px; top:var(--cut); height:0;
  border-top:1.5px dashed rgba(248,247,252,.3);
}
.t-top{ padding:clamp(22px, 2.4vw, 30px) clamp(22px, 2.6vw, 32px) 0; display:flex; flex-direction:column; justify-content:space-between; min-height:0; }
.t-bot{ padding:0 clamp(22px, 2.6vw, 32px); display:flex; flex-direction:column; justify-content:center; gap:10px; min-height:0; }
.t-lbl{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--fm); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(248,247,252,.62);
}
.t-lbl i{ width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px rgba(246,136,31,.9); }
.t-num{
  font-weight:300; font-size:clamp(72px, 9vw, 120px); letter-spacing:-.03em; line-height:.92;
  font-variant-numeric:tabular-nums; white-space:nowrap; margin-top:6px;
}
.t-num .pct{ font-size:55%; letter-spacing:0; }
/* drawn minus: the font's "−" is as wide as an em dash (the real sign stays in aria-label on .t-num) */
.t-minus{ display:inline-block; width:.34em; height:.05em; background:currentColor; vertical-align:.31em; margin:0 .04em 0 .008em; }   /* .008em = the italic line's left side-bearing, so the bar's left edge lines up with it */
.t-sub{ font-family:var(--fg); font-style:italic; font-weight:501; font-size:clamp(16px, 1.5vw, 19px); line-height:1.3; color:rgba(248,247,252,.86); padding-bottom:clamp(14px, 1.8vw, 22px); }
.t-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.t-code{
  font-family:var(--fm); font-size:22px; letter-spacing:.14em; line-height:1; padding:11px 18px 11px 20px;
  border:1px solid rgba(248,247,252,.3); border-radius:999px; user-select:all; -webkit-user-select:all; cursor:text;
}
.t-copy{
  min-width:132px; text-align:center;
  font-family:var(--fm); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(248,247,252,.9);
  background:rgba(255,255,255,.07); border:1px solid rgba(248,247,252,.22); border-radius:999px;
  min-height:44px; padding:0 18px; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.t-copy:hover{ background:rgba(255,255,255,.14); border-color:rgba(248,247,252,.4); }
.t-copy.is-done{ border-color:rgba(246,136,31,.75); color:#fff; }
.t-copy:focus-visible{ outline:1.5px solid rgba(246,136,31,.85); outline-offset:3px; }
/* Črna: the black button inverts to a light pill — the ticket follows */
html[data-pastel="black"] .ticket{
  color:#15131a; background:linear-gradient(180deg, rgba(252,252,255,.97) 0%, rgba(232,231,238,.95) 100%);
}
html[data-pastel="black"] .ticket::before{ opacity:.32; mix-blend-mode:multiply; }
html[data-pastel="black"] .ticket::after{ border-top-color:rgba(21,19,26,.32); }
html[data-pastel="black"] .t-lbl{ color:rgba(21,19,26,.62); }
html[data-pastel="black"] .t-sub{ color:rgba(21,19,26,.78); }
html[data-pastel="black"] .t-code{ border-color:rgba(21,19,26,.3); }
html[data-pastel="black"] .t-copy{ color:#15131a; background:rgba(21,19,26,.06); border-color:rgba(21,19,26,.25); }
html[data-pastel="black"] .t-copy:hover{ background:rgba(21,19,26,.12); }
html[data-pastel="black"] .t-copy.is-done{ color:#15131a; }

/* ---------- 02 · process ---------- */
.dproc{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px, 3.4vw, 48px); }
.pcol{ border-top:1px solid var(--line); padding-top:22px; }
.pcol .n{ display:block; font-size:clamp(34px, 3.4vw, 50px); font-weight:200; line-height:1; letter-spacing:-.02em; color:var(--mut2); margin-bottom:22px; }
.pcol h3{ font-size:clamp(19px, 1.7vw, 23px); font-weight:400; letter-spacing:-.012em; color:var(--ink); margin-bottom:10px; }
.pcol p{ font-size:14px; line-height:1.66; color:var(--mut); max-width:38ch; }

/* ---------- 03 · tiskovine ---------- */
.dprod{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 clamp(18px, 3vw, 44px); margin:clamp(8px, 1.4vw, 16px) 0 clamp(44px, 5vw, 72px); list-style:none; }
.dprod li{ border-top:1px solid var(--line); padding:20px 0 26px; display:flex; flex-direction:column; gap:14px; }
.dprod svg{ width:28px; height:28px; flex:none; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; color:var(--ink); }
.dprod strong{ font-size:15.5px; font-weight:500; color:var(--ink); letter-spacing:-.005em; line-height:1.3; }
.dprod small{ display:block; margin-top:4px; font-size:12.5px; font-weight:400; color:var(--mut); letter-spacing:0; }
.dtxt h3{ font-size:clamp(21px, 2.4vw, 31px); font-weight:300; letter-spacing:-.015em; line-height:1.2; color:var(--ink); max-width:24ch; text-wrap:balance; }
.dtxt p{ font-size:14.5px; line-height:1.72; color:var(--mut); max-width:52ch; margin-top:16px; }
.dtxt p.fine{ font-size:12.5px; line-height:1.6; margin-top:14px; }
.dvals{ margin-top:clamp(44px, 5.5vw, 76px); }

/* ---------- final ---------- */
.final-md .lead{ text-wrap:balance; font-size:14.5px; line-height:1.72; color:var(--mut); margin:-8px auto 28px; max-width:52ch; }
.final-md .cta-row{ gap:20px 30px; }
.final-md .fine{ margin-top:26px; font-size:12.5px; line-height:1.6; color:var(--mut); }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .dgal{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dgrid{ grid-template-columns:1fr; }
  .dprod{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .dproc{ grid-template-columns:1fr; max-width:560px; }
  .pcol .n{ margin-bottom:14px; }
}
@media (max-width: 860px){ .vals{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 767px){
  #zlaganje{ height:170vh; }
  #zlaganje2{ height:160vh; }
  /* phones: pane stays at the top under the nav; compacted so it ends above the floating products of the portrait clip (start frame) */
  .dhero{ left:16px; right:16px; width:auto; top:68px; bottom:auto; translate:none; padding:13px 14px 14px; border-radius:20px; }
  .dhero .chip{ padding:5px 13px; }
  .dhero h1, .dhero h2{ margin:9px 0 6px; font-size:clamp(26px, 7.6vw, 31px); max-width:none; }
  .dhero .sub{ font-size:13.5px; line-height:1.45; margin-bottom:10px; }
  .dhero .cta-row{ gap:6px 8px; }
  .dhero .btn-go{ padding:0 13px; min-height:44px; font-size:13px; }
  .dhero .cta-sec{ gap:6px; min-height:44px; }
  .dhero .cta-sec .circ{ width:24px; height:24px; font-size:12px; }
  .dhero .cta-sec .lbl strong{ font-size:12.5px; }
  .dhero .cta-sec .lbl small{ font-size:7.5px; letter-spacing:.12em; }
  .dbeat{ padding:16px 20px; }
  .dbeat-1{ left:50%; right:auto; translate:-50% 0; text-align:center; bottom:76px; width:calc(100vw - 32px); }
  .dbeat-2{ top:76px; width:calc(100vw - 32px); }
  .drows li a{ grid-template-columns:52px minmax(0,1fr); gap:6px 16px; padding:20px 34px 20px 0; }
  .drows p{ grid-column:2; }
  .gcard span{ left:12px; bottom:11px; }
  .t-code{ font-size:20px; padding:11px 14px 11px 16px; }
}
@media (max-width: 560px){
  .dprod strong{ font-size:14.5px; }
}
@media (max-width: 387px){     /* narrowest phones: drop the decorative arrow so both hero CTAs stay on one row */
  .dhero .cta-sec .circ{ display:none; }
}

/* short desktop viewports (height < 760, e.g. 1280x720): the pane (bottom edge ~8vh up) must never rise above 45% of the height
   measured from the bottom edge, so it stays clear of the floating products and the nav */
@media (min-width:768px) and (max-height:759px){
  .dhero{ padding:18px 22px; }
  .dhero h1, .dhero h2{ font-size:clamp(25px, 2.5vw, 32px); margin:11px 0 7px; max-width:none; }
  .dhero .sub{ font-size:14px; line-height:1.5; margin-bottom:13px; }
  .dhero .btn-go{ padding:12px 22px; }
  .dhero .cta-sec .circ{ width:36px; height:36px; font-size:14px; }
}

/* ---------- reduced motion: static poster, short runway, hero only ---------- */
/* the static still shows the assembled group: the hero pane moves to the empty backdrop above it (top-left, under the nav) */
@media (min-width:768px){
  .is-reduce .dhero{ top:72px; bottom:auto; }
}
.is-reduce #zlaganje{ height:120vh; }
.is-reduce #zlaganje2{ height:120vh; }
@media (min-width:768px){ .is-reduce .dhero-2{ top:96px; } }
.is-reduce .dstage-in{ animation:none; }
.is-reduce .dstage-end{ display:none; }
.is-reduce .dcue, .is-reduce .dbeat{ display:none; }
.is-reduce video.dstage-media{ display:none; }
@media (prefers-reduced-motion: reduce){
  .drows li a::after{ transition:none; }
  .dstage-in, .dcue i{ animation:none; }
  .dstage-end{ display:none; }
  .gcard img{ transition:none; }
}

/* ---------- gallery with real catalog products (opaque white packshots): white tile, no drop shadow, whole card links to the product ---------- */
.dgal.katalog .gcard{ background:#fff; border:1px solid var(--rim-2); }
.dgal.katalog .gcard a{ position:absolute; inset:0; display:block; color:inherit; text-decoration:none; }
.dgal.katalog .gcard img{ filter:none; padding:10%; }
.dgal.katalog .gcard span{ color:rgba(28,25,30,.62); }