/* ============================================================
   MILLE BACI · D3 · PRIČA — iz Rima, kući (roze editorial)
   ============================================================ */

body{
  background:
    radial-gradient(44% 30% at 92% 6%,rgba(234,138,150,.25),transparent 70%),
    radial-gradient(36% 24% at 4% 34%,rgba(246,162,43,.12),transparent 70%),
    var(--paper);
}

/* ---------- hero ---------- */
.shero{width:var(--w);margin:0 auto;padding:8rem 0 2rem}
.shero-grid{display:grid;grid-template-columns:52fr 40fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.shero-h{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(2.7rem,9vw,7rem);line-height:.97;letter-spacing:-.01em;margin-bottom:1.4rem;
}
.shero-h span,.shero-h em{display:block;font-style:normal}
.shero-h em{color:var(--pink)}
.shero-fig{margin:0;position:relative;transform:rotate(1.8deg)}
.shero-fig img{
  border-radius:22px;border:4px solid var(--pink);width:100%;
  box-shadow:10px 12px 0 rgba(234,138,150,.5);
}
.shero-cap{
  position:absolute;left:50%;bottom:-1.2rem;transform:translateX(-50%) rotate(-2deg);
  background:var(--paper);border:3px solid var(--pink);border-radius:14px;
  padding:.35rem .9rem;white-space:nowrap;color:var(--ink);
}

/* passport stamps */
.stamps{display:flex;align-items:center;gap:1.2rem;margin-top:2rem;flex-wrap:wrap}
.stamp{
  font-family:var(--disp);font-weight:800;font-size:1rem;letter-spacing:.14em;
  padding:.7rem 1.2rem;border-radius:12px;display:inline-flex;flex-direction:column;
  align-items:center;gap:.15rem;text-transform:uppercase;
  transform:rotate(-6deg);position:relative;will-change:transform;
}
.stamp small{font-size:.58rem;letter-spacing:.28em;font-weight:600;opacity:.85}
.st-roma{border:3.5px double #B3232E;color:#B3232E;background:rgba(179,35,46,.05)}
.st-pg{border:3.5px double var(--teal);color:var(--teal);transform:rotate(4deg);background:rgba(38,161,156,.06)}
.stamp-arrow{font-size:1.4rem;color:var(--ink);opacity:.6}

/* ---------- quote ---------- */
.squote{position:relative}
.squote::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pink)}
.squote-in{color:var(--paper);position:relative}
.squote-mark{
  position:absolute;top:1rem;left:-1rem;font-family:var(--disp);font-weight:800;
  font-size:clamp(6rem,14vw,11rem);line-height:1;color:var(--pink);opacity:.9;user-select:none;
}
.squote blockquote{margin:0;padding-left:clamp(2.5rem,7vw,5rem)}
.squote blockquote p{
  font-family:var(--disp);font-weight:600;letter-spacing:0;
  font-size:clamp(1.1rem,2.4vw,1.7rem);line-height:1.5;max-width:56ch;
}
.squote cite{
  display:block;margin-top:1.6rem;font-style:normal;font-family:var(--disp);font-weight:600;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:#FFD98E;
}
/* the two waves inside the quote draw one after the other */
.squote .wv::after{bottom:-.08em}
.squote .wv2::after{transition-delay:1.05s}
@media (max-width:640px){
  .squote blockquote{padding-left:2.1rem}
  .squote blockquote p{font-size:1rem}
}

/* ---------- timeline ---------- */
.tl{list-style:none;margin-top:2.6rem;position:relative;padding-left:2.2rem}
.tl::before{
  content:"";position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:4px;border-radius:4px;
  background:repeating-linear-gradient(180deg,rgba(228,72,124,.35) 0 14px,transparent 14px 24px);
}
/* solid line that draws over the dashed track as you scroll */
.tl-prog{
  position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:4px;border-radius:4px;
  background:var(--pink);transform:scaleY(0);transform-origin:top center;
}
.tl-item{position:relative;padding:0 0 2.4rem}
.tl-item:last-child{padding-bottom:.4rem}
.tl-dot{
  position:absolute;left:-2.2rem;top:.2rem;width:22px;height:22px;border-radius:50%;
  background:var(--pink);border:3.5px solid var(--pink);
  transition:transform .4s var(--spring),background .3s;
}
.tl-item.lit .tl-dot{transform:scale(1.25);background:var(--mango)}
.tl-item h3{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.2rem,2.4vw,1.7rem);margin-bottom:.5rem;
}
.tl-item p{max-width:60ch;opacity:.92}
.tl-next h3{color:var(--pink)}

/* ---------- awards ---------- */
.sawards{position:relative}
.sawards::before{content:"";position:absolute;inset:0;z-index:-1;background:#FFF3C4}
.sawards-in{
  display:grid;grid-template-columns:38fr 34fr 24fr;gap:clamp(1.4rem,3.5vw,3rem);
  align-items:center;color:#1E2A66;
}
.sa-fig,.sa-fig2{margin:0}
.sa-fig{transform:rotate(-1.6deg)}
.sa-fig img{border-radius:20px;border:4px solid #E4487C;box-shadow:8px 10px 0 rgba(228,72,124,.25)}
.sa-copy .sec-h{color:#1E2A66}
.sa-copy .kicker{color:var(--amber)}
.sa-copy p:not(.kicker){max-width:44ch;margin-bottom:.8rem}
.sa-copy .hl{color:#1E2A66}
.sa-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:1.4rem 0 1.2rem}
.sa-stat{
  border:3px solid #E4487C;border-radius:16px;background:rgba(255,255,255,.55);
  padding:.9rem .7rem;text-align:center;
}
.sa-num{font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1;display:block;color:var(--amber)}
.sa-stat p{font-family:var(--disp);font-weight:600;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;margin:.45rem 0 0 !important;opacity:.85}
.sa-fig2{transform:rotate(2deg) translateY(1.4rem)}
.sa-fig2 img{border-radius:18px;border:3px solid #E4487C}

/* ---------- press wall ---------- */
.press-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.1rem,2.4vw,2rem);
  margin-top:2.6rem;align-items:start;
}
.clip{
  margin:0;background:#fff;border:3px solid var(--pink);border-radius:14px;
  padding:.7rem .7rem .9rem;position:relative;
  box-shadow:5px 6px 0 rgba(228,72,124,.16);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.clip:nth-child(odd){transform:rotate(-1.4deg)}
.clip:nth-child(even){transform:rotate(1.2deg)}
.clip:hover{transform:rotate(0) translateY(-6px);box-shadow:8px 11px 0 rgba(228,72,124,.4);z-index:2}
.tape{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:86px;height:26px;background:rgba(246,162,43,.75);border:1px solid rgba(228,72,124,.18);
  border-radius:2px;z-index:3;
}
.clip img{border-radius:8px;width:100%}
.clip figcaption{
  font-family:var(--disp);font-weight:600;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;padding-top:.7rem;opacity:.8;
}
.clip-wide{grid-column:2/4}

/* ---------- values ---------- */
.vals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.8rem)}
.val{
  border:3px solid var(--pink);border-radius:20px;background:#fff;
  padding:1.6rem 1.4rem;box-shadow:6px 7px 0 rgba(228,72,124,.14);
  transition:transform .35s var(--spring),box-shadow .35s var(--spring);
}
.val:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:9px 12px 0 var(--vc)}
.val-n{
  font-family:var(--disp);font-weight:800;font-size:.72rem;width:34px;height:34px;
  border-radius:50%;background:var(--vc);color:#fff;border:3px solid var(--pink);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
}
.val h3{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:1.25rem;margin-bottom:.6rem;
}
.val p{font-size:.98rem;opacity:.9}
.vals-cta{text-align:center;margin-top:2.4rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .shero-grid{grid-template-columns:1fr}
  .shero-fig{max-width:430px;margin-top:1rem}
  .sawards-in{grid-template-columns:1fr 1fr}
  .sa-copy{grid-column:1/3;order:-1}
  .press-grid{grid-template-columns:1fr 1fr}
  .clip-wide{grid-column:1/3}
  .vals-grid{grid-template-columns:1fr}
}