/* home page sections; shared carriers live in blocks.css */
.dua-drops{position:relative;overflow:hidden;background:var(--dua-bg)}
.dua-drops__deco{width:32rem;height:32rem;top:3rem;right:-13rem;opacity:.3;transform:rotate(-8deg)}
.dua-drops__deco2{width:13rem;height:13rem;left:-5.5rem;top:46%;opacity:.32;transform:rotate(14deg)}
.dua-drops__deco3{width:9.5rem;height:9.5rem;right:-3rem;top:54%;opacity:.32;transform:rotate(-20deg)}
.dua-drops__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(1.4rem,3vw,2.4rem)}
/* tablets and phones: the three drops become a swipe row below 861 (2 + 1 left a hole); each card still spans the five shared rows */
@media (max-width:860px){
  .dua-drops__grid{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(5,auto);grid-auto-columns:min(76vw,20rem);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--dua-pad);margin:clamp(1.4rem,3vw,2.4rem) calc(var(--dua-pad)*-1) -1.4rem;padding:.3rem var(--dua-pad) 2.2rem}
  .dua-drop--sub{scroll-snap-align:start}
}
/* the lenses: four in a row on a staircase (>=1100), a 2 x 2 zigzag on tablets, one column on phones.
   Each card is a subgrid of four rows (index, art, title, text), so titles and texts share their lines;
   the steps use `translate`, which the reveal animation (transform) leaves alone. The card is shared, see blocks.css */
.dua-lenses__grid{--lens-step:clamp(1.4rem,2.6vw,2.4rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(1rem,1.8vw,1.6rem);padding-bottom:calc(3*var(--lens-step))}
.dua-lenses__item{grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:.6rem;align-items:start;width:auto}
.dua-lenses__item:nth-child(2){--lens-x:33.333%;translate:0 var(--lens-step)}
.dua-lenses__item:nth-child(3){--lens-x:66.667%;translate:0 calc(2*var(--lens-step))}
.dua-lenses__item:nth-child(4){--lens-x:100%;translate:0 calc(3*var(--lens-step))}
@media (max-width:1099px){
  .dua-lenses__grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(1.6rem,3vw,2.4rem);padding-bottom:var(--lens-step)}
  .dua-lenses__item:nth-child(3){translate:none}
  .dua-lenses__item:nth-child(4){translate:0 var(--lens-step)}
}
@media (max-width:760px){
  .dua-lenses__grid{grid-template-columns:minmax(0,1fr);row-gap:1.1rem;padding-bottom:0}
  .dua-lenses__item:nth-child(n){translate:none}
}
.dua-lenses{position:relative;overflow:hidden;background:linear-gradient(140deg,#FCE6F4 0%,#F4CDE6 54%,#ECBCE2 100%)}
.dua-lenses__deco{width:26rem;height:26rem;left:-12rem;top:50%;opacity:.24;transform:translateY(-50%) rotate(10deg)}
.dua-desk{position:relative;overflow:hidden;background:var(--dua-bg)}
.dua-desk__deco{width:24rem;height:24rem;right:-12rem;top:50%;opacity:.22;transform:translateY(-50%) rotate(-12deg)}
.dua-letters{position:relative;overflow:hidden}
.dua-letters__deco{width:26rem;height:26rem;left:-12rem;top:46%;opacity:.14;transform:translateY(-50%) rotate(-10deg)}
.dua-letters__inner{position:relative;z-index:1;display:grid;grid-template-columns:.82fr 1.3fr;gap:clamp(1.6rem,3.5vw,3.2rem);align-items:center}
.dua-letters__media{display:flex;align-items:center;justify-content:center;min-height:16rem}
.dua-letters__img{width:auto;max-height:25rem;filter:drop-shadow(0 28px 50px rgba(0,0,0,.5))}
.dua-letters__slides{position:relative;display:grid;min-height:clamp(18rem,24vw,23rem)}
.dua-letters__slide{grid-area:1/1;display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.4rem);opacity:0;visibility:hidden;transition:opacity .45s ease}
.dua-letters__slide.is-active{opacity:1;visibility:visible}
.dua-motion .dua-letters__slide.is-active .dua-letters__quote{animation:dua-tab-copy .55s var(--dua-ease-out) backwards}
.dua-motion .dua-letters__slide.is-active .dua-letters__metrics{animation:dua-tab-copy .55s var(--dua-ease-out) 90ms backwards}
@media (max-width:760px){
  .dua-letters__inner{grid-template-columns:1fr;gap:1.5rem}
  .dua-letters__media{min-height:11rem}
  .dua-letters__img{max-height:15rem}
}
.dua-write{position:relative;overflow:hidden;background:linear-gradient(160deg,#FCE6F4 0%,#F4CDE6 100%)}
.dua-write__deco{width:26rem;height:26rem;right:-12rem;top:34%;opacity:.22;transform:rotate(-12deg)}
.dua-write__panel{padding:clamp(1.6rem,3vw,2.8rem)}
.dua-write__panel::before{content:"";position:absolute;width:28rem;height:28rem;right:-9rem;bottom:-11rem;border-radius:50%;background:var(--dua-glow-magenta);opacity:.5;pointer-events:none}
.dua-write__info{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.5vw,2.4rem);margin:clamp(1.6rem,3vw,2.4rem) -.8rem 0;padding:clamp(1.4rem,2.5vw,1.9rem) .8rem 0;border-top:2px solid var(--dua-line-strong)}
.dua-write__info-item{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.dua-write__info-head{display:flex;align-items:center;gap:.55rem}
.dua-write__info-label{font-family:var(--dua-display);font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dua-ink)}
.dua-write__info-text{font-size:.95rem;font-weight:600;line-height:1.45;color:var(--dua-ink-soft)}
.dua-write__info-link{font-family:var(--dua-display);font-weight:800;font-size:1.05rem;color:var(--dua-magenta-ink);word-break:break-word}
.dua-write__info-link:hover{color:var(--dua-magenta)}
@media (max-width:760px){
  .dua-write__info{grid-template-columns:1fr;gap:1.4rem}
}