/* Maison Volodymyr — premium one-page vitrine
   Fonts: Neue Haas Grotesk Display (Light) is a licensed face. If it is installed it is used;
   otherwise Helvetica Neue → Inter Tight (Google Fonts) → Arial. See README. */
:root{
  --bg:#060102; --bg2:#0d0305; --ink:#fff; --mut:rgba(255,255,255,.62); --dim:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.14); --ruby:#7d1730; --wine:#2a0610; --gold:#e2bb6c; --gold-hi:#f7dfa4; --gold-lo:#a9782e; --ember:#ff6a2a; --cream:#f3ece2;
  --f:"Neue Haas Grotesk Display Pro","Neue Haas Grotesk Display","Neue Haas Unica","Helvetica Neue",HelveticaNeue,"Inter Tight",Inter,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  --pad:clamp(18px,4vw,64px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:300 16px/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
.ico{width:1.15em;height:1.15em;flex:none}
.ico--gold{color:var(--gold)} .ico--ember{color:var(--ember)}
::selection{background:var(--ruby);color:#fff}

/* gradient text: white in the middle, darker toward the edges */
.grad{color:#fff;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.34),#000 26%,#000 74%,rgba(0,0,0,.34));mask-image:linear-gradient(90deg,rgba(0,0,0,.34),#000 26%,#000 74%,rgba(0,0,0,.34))}

/* film grain */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* custom cursor (fine pointers only) */
.cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;display:none;mix-blend-mode:normal}
@media (hover:hover) and (pointer:fine){.cursor{display:block} html.has-cursor,html.has-cursor *{cursor:none!important}}
.cursor__dot{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;transition:opacity .2s}
.cursor__ring{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),left .35s var(--ease),top .35s var(--ease),background .3s,border-color .3s}
.cursor__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#1a0609;opacity:0;transition:opacity .2s;white-space:nowrap}
.cursor.is-link .cursor__ring{left:-30px;top:-30px;width:60px;height:60px;border-color:var(--gold)}
.cursor.is-label .cursor__ring{left:-40px;top:-40px;width:80px;height:80px;background:var(--gold);border-color:var(--gold)}
.cursor.is-label .cursor__label{opacity:1}
.cursor.is-label .cursor__dot{opacity:0}

/* header */
.top{position:fixed;z-index:60;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:20px var(--pad);transition:background .4s,backdrop-filter .4s,padding .4s}
.top.is-stuck{background:rgba(6,1,2,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;font-size:15px;letter-spacing:.2em;font-weight:400}
.brand img{width:44px;height:44px;transition:transform .8s var(--ease)}
.brand:hover img{transform:rotate(360deg)}
.nav{display:flex;gap:clamp(16px,2.6vw,40px)}
.roll{position:relative;display:inline-block;overflow:hidden;height:1.4em;font-size:15px;color:rgba(255,255,255,.86)}
.roll span{display:block;transition:transform .5s var(--ease)}
.roll span::after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--gold-hi)}
.roll:hover span{transform:translateY(-100%)}
.top__right{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.bagbtn{position:relative;width:48px;height:48px;border-radius:50%;background:#fff;color:#14070a;display:grid;place-items:center;transition:transform .4s var(--ease),background .3s}
.bagbtn .ico{width:20px;height:20px}
.bagbtn:hover{background:var(--gold-hi)}
.bagbtn__n{position:absolute;right:-4px;top:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ember);color:#fff;font-size:11px;font-weight:400;display:grid;place-items:center;transform:scale(0);transition:transform .4s var(--ease)}
.bagbtn.has-items .bagbtn__n{transform:scale(1)}
.bagbtn.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.18)}}

/* buttons: gold fill, white wipe on hover */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 28px;height:52px;border-radius:999px;font-size:15px;font-weight:400;letter-spacing:.01em;isolation:isolate;transition:transform .4s var(--ease),box-shadow .4s}
.btn--sm{height:48px;padding:0 24px}
.btn--block{width:100%}
.btn--gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 70%,#cfa150);color:#2a0710}
.btn--gold::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateY(101%);border-radius:50% 50% 0 0/100% 100% 0 0;transition:transform .55s var(--ease),border-radius .55s var(--ease)}
.btn--gold:hover::before{transform:none;border-radius:0}
.btn--gold:hover{box-shadow:0 14px 40px rgba(226,187,108,.28)}
.btn--ghost{border:1px solid var(--line)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn .ico{transition:transform .4s var(--ease)} .btn:hover .ico{transform:translateX(4px)}

/* ======================= HERO ======================= */
.hero{--hh:max(100svh,700px);--sw:max(100vw,calc(var(--hh)*1.6));--sh:calc(var(--sw)/1.6);
  --st:min(0px,calc(var(--hh)*.54 - var(--sh)*.52));
  --mt:calc(var(--st) + var(--sh)*.337); --mh:calc(var(--sh)*.40); --mb:calc(var(--st) + var(--sh)*.77);
  --fs:clamp(54px,8.2vw,190px);
  position:relative;height:var(--hh);overflow:hidden;background:#050102;isolation:isolate}
.stage{position:absolute;z-index:0;left:50%;top:var(--st);width:var(--sw);height:var(--sh);transform:translateX(-50%);pointer-events:none}
.stage--fx{z-index:3}
.stage__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);animation:bgin 2.4s var(--ease) both}
@keyframes bgin{from{transform:scale(1.14);filter:brightness(.4)}to{transform:scale(1.04);filter:none}}
.stage__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,1,2,.55) 0,rgba(5,1,2,0) 24%,rgba(5,1,2,0) 70%,rgba(5,1,2,.5) 100%)}
.layer,.mugclip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mugclip{clip-path:inset(0 0 20% 0);transition:clip-path .01s linear .3s}
.layer--mug{opacity:0;transform:translateY(32%);transition:transform .9s cubic-bezier(.5,0,.8,.3) 0s,opacity .2s linear .7s}
.layer--base{transition:opacity .45s ease .15s,transform .6s var(--ease) 0s}
.layer--lid{transition:transform 1s var(--ease) .55s,opacity .45s ease .55s;will-change:transform}
.hero.is-open .mugclip{clip-path:inset(0 0 0 0);transition:clip-path .5s ease 1.55s}
.hero.is-open .layer--mug{opacity:1;transform:none;transition:transform 1.3s cubic-bezier(.16,.86,.2,1) .4s,opacity .15s linear .35s}
.hero.is-open .layer--base{opacity:0;transform:translateY(2.5%);transition:opacity .9s ease 1.35s,transform 1.3s ease 1.25s}
.hero.is-open .layer--lid{opacity:0;transform:translate(9%,-30%) rotate(8deg) scale(1.05);transition:transform 1.1s cubic-bezier(.3,.7,.2,1) 0s,opacity .7s ease .4s}
.sparks{position:absolute;inset:0}
.sparks i{position:absolute;left:50%;top:48%;width:5px;height:5px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 12px 2px rgba(255,200,120,.8);pointer-events:none}

.headline{position:absolute;z-index:2;inset:0;font-weight:200;font-size:var(--fs);line-height:.8;letter-spacing:-.035em;pointer-events:none}
.headline__w{position:absolute;display:block;white-space:nowrap;color:#fff;pointer-events:auto;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.4),#000 22%,#000 70%,rgba(0,0,0,.45));mask-image:linear-gradient(90deg,rgba(0,0,0,.4),#000 22%,#000 70%,rgba(0,0,0,.45))}
.headline__w--a{left:calc(var(--pad) - .04em);top:calc(var(--mt) - var(--fs)*.46)}
.headline__w--b{right:calc(var(--pad)*.7);top:calc(var(--mt) + var(--mh)*.20);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.45),#000 30%,#000 80%,rgba(0,0,0,.4));mask-image:linear-gradient(90deg,rgba(0,0,0,.45),#000 30%,#000 80%,rgba(0,0,0,.4))}
.ch{display:inline-block;transform:translateY(105%);opacity:0;transition:transform .55s var(--ease),color .3s,opacity .4s}
.headline__w{overflow:hidden;padding:.06em .04em .1em;margin:-.06em -.04em -.1em}
.is-ready .ch{transform:none;opacity:1;transition-delay:calc(var(--i)*55ms + 500ms),0s,calc(var(--i)*55ms + 500ms)}
.is-ready .ch:hover{transform:translateY(-.05em);color:var(--gold-hi);transition-delay:0s}

.hit{position:absolute;z-index:4;left:calc(50% - var(--sw)*.2);top:calc(var(--st) + var(--sh)*.24);width:calc(var(--sw)*.4);height:calc(var(--sh)*.52);border-radius:40px;background:transparent}
.hint{position:absolute;z-index:5;left:50%;top:calc(var(--mt) - var(--sh)*.15);transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);pointer-events:none;transition:opacity .5s}
.hint__dot{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 0 rgba(255,106,42,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(255,106,42,0)}100%{box-shadow:0 0 0 0 rgba(255,106,42,0)}}
.hero.is-open .hint{opacity:0}

.tag{position:absolute;z-index:5;right:calc(var(--pad)*1.1);top:calc(var(--mt) - var(--fs)*.2);width:min(19vw,260px);display:grid;gap:14px;font-size:clamp(11px,1vw,14px);letter-spacing:.06em;line-height:1.3;font-weight:400;color:rgba(255,255,255,.85)}
.tag .ico{width:30px;height:15px}
.about{position:absolute;z-index:5;left:var(--pad);top:calc(var(--mt) + var(--mh)*.52);width:clamp(150px,15.5vw,250px);text-align:start;display:grid;gap:12px}
.about__img{position:relative;display:block;aspect-ratio:1.62;overflow:hidden;border-radius:4px;outline:1px solid rgba(255,255,255,.18)}
.about__img img{width:100%;height:100%;object-fit:cover;object-position:center 55%;transition:transform 1.2s var(--ease)}
.about:hover .about__img img{transform:scale(1.12)}
.about__play{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;transition:transform .5s var(--ease)}
.about:hover .about__play{transform:scale(1.18)}
.about__cap{font-size:13px;letter-spacing:.04em;font-weight:400}
.lead{position:absolute;z-index:5;left:var(--pad);bottom:clamp(28px,6vh,64px);display:flex;gap:clamp(20px,3.6vw,56px);align-items:flex-start;font-size:clamp(20px,2.3vw,40px);line-height:1.08;letter-spacing:-.03em;font-weight:300;max-width:min(38vw,640px)}
.lead__dot{flex:none;width:clamp(26px,2.4vw,40px);height:clamp(26px,2.4vw,40px);margin-top:.12em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd9a8,var(--ember) 60%,#a02d0a);box-shadow:0 0 0 6px rgba(255,106,42,.18),0 0 30px rgba(255,106,42,.6)}
.plaques{position:absolute;z-index:5;right:var(--pad);bottom:clamp(20px,4vh,48px);display:flex;gap:clamp(10px,1.4vw,22px);align-items:flex-end}
.plaque{position:relative;overflow:hidden;display:block;width:clamp(180px,17.5vw,310px);height:clamp(140px,14.5vw,250px);padding:clamp(14px,1.6vw,26px);border-radius:3px;transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s}
.plaque--img{background:linear-gradient(160deg,#6b1226,#2a0610);color:#fff}
.plaque--img img{position:absolute;left:0;right:0;bottom:-6%;width:100%;height:78%;object-fit:cover;object-position:50% 40%;transition:transform 1s var(--ease)}
.plaque--img:hover img{transform:scale(1.1) rotate(-1.5deg)}
.plaque__top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;font-size:clamp(18px,1.9vw,30px);letter-spacing:-.02em}
.plaque__top .ico{transition:transform .5s var(--ease)} .plaque:hover .plaque__top .ico{transform:translate(4px,-4px) scale(1.2)}
.plaque__sub{position:relative;z-index:1;display:block;margin-top:4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.plaque--cream{background:var(--cream);color:#1a0609;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding-block:clamp(18px,2vw,32px)}
.plaque--cream::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,106,42,.28),transparent 60%);opacity:0;transition:opacity .4s}
.plaque--cream:hover::before{opacity:1}
.plaque__ico{width:clamp(34px,3.4vw,54px);height:clamp(34px,3.4vw,54px);color:#c8872c!important;transition:transform .8s var(--ease)}
.plaque--cream:hover .plaque__ico{transform:rotate(90deg) scale(1.12)}
.plaque__lbl{font-size:clamp(11px,1vw,15px);letter-spacing:.06em;font-weight:400}
.plaque__big{font-size:clamp(40px,5vw,84px);line-height:1;letter-spacing:-.04em;font-weight:300}
.scrollhint{position:absolute;z-index:5;left:50%;bottom:14px;width:1px;height:40px;background:rgba(255,255,255,.18);overflow:hidden}
.scrollhint span{position:absolute;left:0;top:-50%;width:1px;height:50%;background:#fff;animation:sh 2s ease-in-out infinite}
@keyframes sh{to{top:110%}}

/* page-load choreography */
.top,.tag,.about,.lead,.plaques,.hint{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-ready .top,.is-ready .tag,.is-ready .about,.is-ready .lead,.is-ready .plaques,.is-ready .hint{opacity:1;transform:none}
.is-ready .tag{transition-delay:.9s}.is-ready .about{transition-delay:1s}.is-ready .lead{transition-delay:1.1s}.is-ready .plaques{transition-delay:1.25s}.is-ready .hint{transition-delay:1.6s}
.hero.is-open .hint{opacity:0!important}

/* ======================= MARQUEE ======================= */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;background:var(--bg)}
.marquee__track{display:flex;width:max-content;gap:34px;align-items:center;font-size:clamp(26px,4vw,64px);font-weight:200;letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;animation:mq 38s linear infinite;will-change:transform}
.marquee__track i{width:10px;height:10px;border-radius:50%;background:var(--ember);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ======================= SECTIONS ======================= */
.sec{position:relative;padding:clamp(70px,9vw,140px) var(--pad)}
.sec__head{margin-bottom:clamp(36px,5vw,72px)}
.sec__head--row{display:flex;gap:40px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.sec__lede{max-width:34em;color:var(--mut);font-size:clamp(15px,1.25vw,18px)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:400}
.h2{font-size:clamp(40px,6.4vw,112px);line-height:.98;letter-spacing:-.045em;font-weight:200}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .12em;margin:-.04em -.02em -.12em}
.wi{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*70ms)}
.in .wi{transform:none}
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* creations index */
.creations{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.index{border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a{position:relative;display:grid;grid-template-columns:48px minmax(0,1.3fr) minmax(0,1.4fr) 90px 28px;align-items:center;gap:20px;padding:clamp(22px,2.8vw,40px) 0;transition:opacity .4s,padding .5s var(--ease)}
.index a::before{content:"";position:absolute;inset:0 calc(var(--pad)*-1);background:linear-gradient(90deg,rgba(125,23,48,.34),rgba(125,23,48,0));opacity:0;transform:scaleX(.96);transform-origin:left;transition:opacity .5s,transform .6s var(--ease);z-index:-1}
.index:hover a{opacity:.32}
.index a:hover{opacity:1;padding-inline-start:clamp(10px,2vw,32px)}
.index a:hover::before{opacity:1;transform:none}
.index__n{font-size:13px;color:var(--dim);letter-spacing:.1em}
.index__t{font-size:clamp(30px,4.6vw,78px);line-height:1;letter-spacing:-.04em;font-weight:200}
.index__d{color:var(--mut);font-size:clamp(14px,1.1vw,17px);max-width:26em}
.index__p{text-align:end;font-size:clamp(15px,1.3vw,20px)}
.index .ico{transition:transform .5s var(--ease),color .3s} .index a:hover .ico{transform:translate(4px,-4px) scale(1.3);color:var(--gold-hi)}
.float{position:fixed;left:0;top:0;z-index:40;width:clamp(220px,22vw,340px);aspect-ratio:4/5;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .35s,scale .35s;border-radius:3px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.float.on{opacity:1}
.float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.float img.show{opacity:1}

/* shop */
.shop{background:var(--bg2)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(28px,3vw,48px)}
.chip{height:42px;padding:0 20px;border:1px solid var(--line);border-radius:999px;font-size:14px;transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.chip:hover{border-color:#fff;transform:translateY(-2px)}
.chip.is-on{background:#fff;color:#1a0609;border-color:#fff}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,26px)}
.card{position:relative;display:flex;flex-direction:column;border-radius:6px;background:linear-gradient(180deg,#14060a,#0b0305);border:1px solid var(--line);overflow:hidden;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),border-color .4s,opacity .5s,box-shadow .5s}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,190,140,.16),transparent 60%);opacity:0;transition:opacity .4s}
.card:hover{border-color:rgba(226,187,108,.6);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.card:hover::after{opacity:1}
.card.is-hidden{display:none}
.card__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:#000}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card__img img{transform:scale(1.08)}
.card__badge{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(6,1,2,.6);backdrop-filter:blur(8px);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.card__badge .ico{width:16px;height:16px;color:var(--gold)}
.card__body{display:grid;gap:12px;padding:clamp(16px,1.6vw,24px);flex:1}
.card__name{font-size:clamp(22px,1.9vw,30px);letter-spacing:-.03em;line-height:1.05;font-weight:300}
.card__desc{color:var(--mut);font-size:14px;line-height:1.45}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;letter-spacing:.02em;transition:all .3s}
.opt:hover{border-color:#fff}
.opt.is-on{background:var(--gold);border-color:var(--gold);color:#2a0710}
.card__buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px}
.price{font-size:clamp(22px,1.9vw,30px);letter-spacing:-.03em}
.price small{font-size:12px;color:var(--dim);margin-inline-end:4px;letter-spacing:.04em}
.add{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border-radius:999px;background:#fff;color:#1a0609;font-size:14px;font-weight:400;transition:transform .4s var(--ease),background .3s}
.add .ico{width:18px;height:18px;transition:transform .5s var(--ease)}
.add:hover{background:var(--gold-hi)} .add:hover .ico{transform:rotate(90deg)}
.add.done{background:var(--gold);}

/* coffrets */
.box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:start;background:radial-gradient(80% 60% at 20% 30%,rgba(125,23,48,.35),transparent 70%),var(--bg)}
.box__visual{position:sticky;top:12vh}
.box__visual:hover .box__visual:hover .box__body .sec__lede{margin:26px 0 clamp(26px,3vw,48px)}
.coffs{border-top:1px solid var(--line)}
.coff{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),background .4s}
.coff:hover{padding-inline-start:16px;background:linear-gradient(90deg,rgba(226,187,108,.09),transparent)}
.coff__n{font-size:clamp(20px,1.8vw,28px);letter-spacing:-.03em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.coff__r{font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--gold);color:#2a0710}
.coff__c{display:block;margin-top:4px;font-size:13px;color:var(--mut);line-height:1.4}
.coff__o{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.coff__p{text-align:end;font-size:clamp(18px,1.6vw,26px)}
.coff__p s{display:block;font-size:12px;color:var(--dim)}

/* atelier */
.atelier{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.atelier__cols{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,6vw,110px);margin-bottom:clamp(50px,7vw,110px)}
.atelier__txt{font-size:clamp(20px,2.1vw,34px);line-height:1.25;letter-spacing:-.025em;font-weight:200;color:rgba(255,255,255,.86)}
.info{display:grid;gap:22px;align-content:start}
.info li{display:flex;gap:16px;align-items:flex-start;padding-bottom:22px;border-bottom:1px solid var(--line);font-size:15px;color:var(--mut)}
.info .ico{width:24px;height:24px;color:var(--gold);margin-top:2px}
.info a{color:#fff;border-bottom:1px solid var(--line);transition:border-color .3s}.info a:hover{border-color:var(--gold-hi)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.steps li{position:relative;padding:clamp(20px,2vw,32px);border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),border-color .4s,background .4s}
.steps li:hover{border-color:rgba(226,187,108,.55);background:linear-gradient(180deg,rgba(226,187,108,.08),rgba(255,255,255,0))}
.steps .ico{width:42px;height:42px;margin-bottom:56px}
.steps b{position:absolute;right:22px;top:20px;font-size:13px;font-weight:400;color:var(--dim);letter-spacing:.1em}
.steps h3{font-size:clamp(20px,1.7vw,26px);letter-spacing:-.025em;font-weight:300;margin-bottom:10px;line-height:1.1}
.steps p{font-size:14px;color:var(--mut);line-height:1.5}


/* gift builder */
.build{background:radial-gradient(70% 50% at 80% 20%,rgba(125,23,48,.28),transparent 70%),var(--bg2)}
.build__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,90px);align-items:start}
.build__stage{position:sticky;top:11vh}
.bs{position:relative;aspect-ratio:1400/1100;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(70% 60% at 50% 78%,rgba(255,90,40,.38),rgba(125,23,48,.18) 55%,transparent 80%),linear-gradient(180deg,#0f0307,#2a0610 90%)}
.bs__glow{position:absolute;inset:0;background:radial-gradient(40% 30% at 50% 96%,rgba(0,0,0,.6),transparent 70%)}
.bs__back,.bs__slots,.bs__front,.bs__lid,.bs__shine,.bs__sparks{position:absolute;inset:0;width:100%;height:100%}
.bs__in{position:absolute;inset:0;transform:scale(1.3);transform-origin:50% 60%}
.bs__slots{z-index:1}
.slot{position:absolute;width:auto;transform:translateX(-50%);filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));transition:left .55s var(--ease),bottom .55s var(--ease),height .55s var(--ease)}
.bs__back{z-index:0;pointer-events:none}
.bs__front{z-index:2;pointer-events:none}
.bs__lid{z-index:3;opacity:0;pointer-events:none;will-change:transform}
.bs__shine{z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,235,190,.55) 50%,transparent 60%);transform:translateX(-120%);mix-blend-mode:overlay}
.bs__shine.go{animation:shine 1.3s ease-out .1s}
@keyframes shine{to{transform:translateX(120%)}}
.bs__sparks{z-index:5;pointer-events:none}
.bs__sparks i{position:absolute;left:50%;top:34%;width:5px;height:5px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 12px 2px rgba(255,200,120,.8)}
.bs__status{position:absolute;z-index:6;left:0;right:0;bottom:14px;text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.bs[data-state=closed] .bs__status{color:var(--gold-hi)}
.build__panel{display:grid;gap:22px}
.pick{border-top:1px solid var(--line)}
.pk{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);transition:background .4s,padding .5s var(--ease)}
.pk:hover{padding-inline-start:12px;background:linear-gradient(90deg,rgba(226,187,108,.08),transparent)}
.pk__img{width:56px;height:56px;object-fit:contain;transition:transform .6s var(--ease)}
.pk:hover .pk__img{transform:rotate(-8deg) scale(1.12)}
.pk__m{display:grid;gap:6px;min-width:0}
.pk__n{font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em;line-height:1.1}
.pk__sub{font-size:12px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.pk__o{display:flex;flex-wrap:wrap;gap:5px}
.pk__opt{height:28px;padding:0 11px;border:1px solid var(--line);border-radius:999px;font-size:12px;transition:all .3s}
.pk__opt:hover{border-color:#fff}.pk__opt.is-on{background:var(--gold);border-color:var(--gold);color:#2a0710}
.pk__p{font-size:18px;min-width:3.2em;text-align:end}
.pk__q{margin:0}.pk__q button:disabled{opacity:.3;cursor:not-allowed}
.pk.has .pk__n{color:var(--gold-hi)}
.bsum{display:grid;gap:6px;font-size:14px;color:var(--mut)}
.bsum div{display:flex;justify-content:space-between}
.bsum__tot{color:#fff;font-size:24px;padding-top:10px;border-top:1px solid var(--line);margin-top:4px}
.bact{display:flex;gap:12px;flex-wrap:wrap}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
@media (max-width:860px){.build__grid{grid-template-columns:1fr}.build__stage{position:relative;top:0}}
@media (max-width:760px){.pk{grid-template-columns:48px minmax(0,1fr) auto}.pk__p{display:none}.pk__img{width:48px;height:48px}.nav{display:none}}


/* coffret showcase */
.bs--show .bs__slots{z-index:1}
.bs__cap{position:absolute;z-index:6;left:18px;right:18px;top:16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bs__capn{font-size:clamp(20px,2vw,30px);letter-spacing:-.03em}
.bs__capo{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.bs__capp{margin-inline-start:auto;font-size:clamp(20px,2vw,30px);letter-spacing:-.03em}
.coff{cursor:pointer;outline-offset:-2px}
.coff.is-active{background:linear-gradient(90deg,rgba(226,187,108,.12),transparent);padding-inline-start:16px}
.coff__ic{display:flex;flex-wrap:wrap;gap:6px 8px;margin:8px 0 6px}
.ic{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--mut);background:rgba(255,255,255,.03);transition:border-color .3s,color .3s}
.ic img{width:24px;height:24px;object-fit:contain}
.coff:hover .ic,.coff.is-active .ic{border-color:rgba(226,187,108,.5);color:#fff}

/* offer */
.offre{padding-block:clamp(60px,8vw,120px)}
.offre__in{position:relative;overflow:hidden;display:grid;justify-items:center;text-align:center;gap:20px;padding:clamp(50px,7vw,110px) var(--pad);border-radius:8px;background:radial-gradient(70% 90% at 50% 120%,#d8381c,#6a0f1e 45%,#1d040a 80%);border:1px solid rgba(255,255,255,.12);transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.offre__big{font-size:clamp(90px,17vw,300px);line-height:.85;letter-spacing:-.06em;font-weight:200;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.4),#000 30%,#000 70%,rgba(0,0,0,.4))}
.offre__t{max-width:30em;color:rgba(255,255,255,.82);font-size:clamp(15px,1.3vw,19px)}

/* footer */
.foot{padding:clamp(60px,8vw,110px) var(--pad) 28px;background:var(--bg);border-top:1px solid var(--line);overflow:hidden}
.foot__big{font-size:clamp(30px,8.6vw,160px);line-height:.9;font-weight:200;letter-spacing:-.05em;white-space:nowrap;margin-bottom:clamp(40px,5vw,80px);text-align:center}
.foot__row{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px;color:var(--mut);font-size:15px}
.foot__row img{margin-bottom:16px}
.foot__h{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.lnk{display:flex;align-items:center;gap:8px;width:max-content;color:#fff;padding:3px 0;border-bottom:1px solid transparent;margin-bottom:6px;transition:gap .4s var(--ease),border-color .3s}
.lnk:hover{gap:16px;border-color:var(--gold-hi)}
.foot__copy{margin-top:clamp(40px,5vw,80px);font-size:13px;color:var(--dim)}

/* dialog */
.dlg{border:1px solid var(--line);border-radius:10px;background:#12050a;color:#fff;padding:clamp(28px,4vw,48px);width:min(520px,calc(100vw - 32px));text-align:start}
.dlg::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
.dlg[open]{animation:dlg .5s var(--ease)}
@keyframes dlg{from{opacity:0;transform:translateY(20px) scale(.97)}}
.dlg img{margin-bottom:20px}.dlg h3{font-size:34px;letter-spacing:-.03em;font-weight:200;margin-bottom:14px}.dlg p{color:var(--mut);margin-bottom:14px}.dlg .btn{margin-top:10px}
.dlg__x{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:background .3s}.dlg__x:hover{background:rgba(255,255,255,.1)}

/* cart */
.veil{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .5s}
.veil.on{opacity:1;pointer-events:auto}
.cart{position:fixed;z-index:80;right:0;top:0;bottom:0;width:min(460px,100vw);display:flex;flex-direction:column;background:#0f0407;border-left:1px solid var(--line);transform:translateX(102%);transition:transform .7s var(--ease);visibility:hidden}
.cart.on{transform:none;visibility:visible}
.cart__head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.cart__head h3{font-size:26px;font-weight:200;letter-spacing:-.03em}
.iconbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,transform .5s var(--ease)}.iconbtn:hover{background:rgba(255,255,255,.1);transform:rotate(90deg)}
.cart__body{flex:1;overflow:auto;padding:8px 24px}
.empty{display:grid;justify-items:center;text-align:center;gap:14px;padding:60px 10px;color:var(--mut)}
.empty .ico{width:44px;height:44px;color:var(--gold)}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);animation:li .5s var(--ease)}
@keyframes li{from{opacity:0;transform:translateX(24px)}}
.line img{width:72px;height:90px;object-fit:cover;border-radius:3px}
.line__n{font-size:17px;letter-spacing:-.02em;line-height:1.15}
.line__o{font-size:12px;color:var(--mut);margin-top:2px}
.qty{display:inline-flex;align-items:center;margin-top:8px;border:1px solid var(--line);border-radius:999px}
.qty button{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;transition:background .3s}.qty button:hover{background:rgba(255,255,255,.12)}
.qty .ico{width:14px;height:14px}.qty span{min-width:22px;text-align:center;font-size:14px}
.line__r{text-align:end;display:grid;gap:10px;justify-items:end}
.line__p{font-size:17px}
.line__x{font-size:12px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}.line__x:hover{color:#fff}
.cart__foot{padding:18px 24px 24px;border-top:1px solid var(--line);display:grid;gap:12px;background:#0b0305}
.cart__foot.is-empty{display:none}
.field{display:grid;gap:6px;font-size:12px;color:var(--mut);letter-spacing:.04em}
.field input,.field textarea{width:100%;padding:12px 14px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:15px;resize:none;transition:border-color .3s,background .3s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.07)}
.check{display:flex;align-items:center;gap:12px;font-size:14px;cursor:pointer}
.check input{position:absolute;opacity:0}
.check__box{width:24px;height:24px;border-radius:6px;border:1px solid var(--dim);display:grid;place-items:center;transition:all .3s;color:transparent}
.check__box .ico{width:16px;height:16px}
.check input:checked+.check__box{background:var(--gold);border-color:var(--gold);color:#2a0710}
.check input:focus-visible+.check__box{outline:2px solid var(--gold-hi);outline-offset:3px}
.sum{display:grid;gap:6px;font-size:14px;color:var(--mut)}
.sum div{display:flex;justify-content:space-between}
.sum__tot{color:#fff;font-size:22px;padding-top:8px;border-top:1px solid var(--line);margin-top:4px}
.cart__fine{font-size:12px;color:var(--dim);line-height:1.45}
.toast{position:fixed;left:50%;bottom:24px;z-index:130;transform:translate(-50%,30px);padding:12px 20px;border-radius:999px;background:#fff;color:#1a0609;font-size:14px;font-weight:400;opacity:0;pointer-events:none;transition:all .5s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ======================= RESPONSIVE ======================= */
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index a{grid-template-columns:36px minmax(0,1fr) 80px 24px}.index__d{display:none}
  .tag{display:none}
}
@media (max-width:860px){
  .box{grid-template-columns:1fr}.box__visual{position:relative;top:0}
  .atelier__cols{grid-template-columns:1fr}
  .foot__row{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero{--hh:max(100svh,640px);--sw:max(205vw,calc(var(--hh)*1.1));--mt:calc(var(--hh) - var(--sh)*.663);--mh:calc(var(--sh)*.40);--fs:clamp(50px,17vw,110px)}
  .stage{top:auto;bottom:0}
  .stage__bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
  .hit{top:calc(var(--hh) - var(--sh)*.78);height:calc(var(--sh)*.56)}
  .headline__w--a{left:var(--pad);top:calc(var(--mt) - var(--fs)*1.95)}
  .headline__w--b{right:var(--pad);top:calc(var(--mt) - var(--fs)*1.0)}
  .hint{top:calc(var(--mt) - var(--fs)*2.55);font-size:11px}
  .about,.tag{display:none}
  .nav{display:none}.top{grid-template-columns:1fr auto}.brand span{font-size:12px;letter-spacing:.16em}.brand img{width:38px;height:38px}
  .top__right .btn{display:none}
  .lead{max-width:none;left:var(--pad);right:var(--pad);bottom:auto;top:110px;font-size:19px;gap:14px}
  .lead__dot{width:20px;height:20px;margin-top:.2em}
  .plaques{left:var(--pad);right:var(--pad);bottom:16px}
  .plaque{flex:1;width:auto;height:118px;padding:12px}
  .plaque__top{font-size:17px}.plaque__sub{font-size:10px}
  .plaque__big{font-size:38px}.plaque__ico{width:28px;height:28px}
  .scrollhint{display:none}
  .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}.steps .ico{margin-bottom:30px}
  .index a{grid-template-columns:28px minmax(0,1fr) auto}.index a .ico{display:none}
  .coff{grid-template-columns:minmax(0,1fr) auto}.coff .add{grid-column:1 / -1;justify-self:start}
  .float{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto}.marquee__track{animation:none}
}

/* ======================= LANGUAGES / RTL ======================= */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.marquee{direction:ltr}
.lang{position:relative}
.lang__btn{height:48px;min-width:58px;padding:0 14px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px;letter-spacing:.06em;font-weight:400;transition:border-color .3s,background .3s}
.lang__btn:hover,.lang.open .lang__btn{border-color:#fff;background:rgba(255,255,255,.06)}
.lang__chev{width:14px;height:14px;transition:transform .4s var(--ease)}
.lang.open .lang__chev{transform:rotate(180deg)}
.lang__list{position:absolute;z-index:70;top:calc(100% + 10px);inset-inline-end:0;min-width:210px;padding:8px;border-radius:14px;border:1px solid var(--line);background:rgba(14,3,6,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 70px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .4s var(--ease),visibility .3s}
.lang.open .lang__list{opacity:1;visibility:visible;transform:none}
.lang__list button{width:100%;display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:9px;text-align:start;font-size:15px;transition:background .3s,padding .4s var(--ease)}
.lang__list button:hover{background:rgba(255,255,255,.08);padding-inline-start:18px}
.lang__list b{min-width:28px;font-weight:400;color:var(--gold);font-size:13px;letter-spacing:.06em}
.lang__list [aria-selected=true] button{background:rgba(226,187,108,.14)}
/* per-language headline sizes (words differ in length) */
html[lang=en] .hero{--fs:clamp(54px,8.6vw,200px)}
html[lang=uk] .hero,html[lang=ru] .hero{--fs:clamp(44px,6.3vw,150px)}
html[lang=ar] .hero{--fs:clamp(54px,8.6vw,200px)}
/* Arabic: its own face, joined letters (no tracking), taller line box */
html[lang=ar]{--f:"IBM Plex Sans Arabic","Noto Sans Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif}
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] .headline{line-height:1.15}
html[lang=ar] .headline__w{padding-block:.1em .15em}
html[lang=ar] .h2,html[lang=ar] .index__t{line-height:1.25}
html[lang=ar] .eyebrow,html[lang=ar] .hint,html[lang=ar] .plaque__lbl,html[lang=ar] .coff__o,html[lang=ar] .bs__capo{text-transform:none}
/* mirrored layout */
html[dir=rtl] .dirico{scale:-1 1}
html[dir=rtl] .headline__w--a{left:auto;right:calc(var(--pad) - .04em)}
html[dir=rtl] .headline__w--b{right:auto;left:calc(var(--pad)*.7)}
html[dir=rtl] .tag{right:auto;left:calc(var(--pad)*1.1)}
html[dir=rtl] .about{left:auto;right:var(--pad)}
html[dir=rtl] .lead{left:auto;right:var(--pad)}
html[dir=rtl] .plaques{right:auto;left:var(--pad)}
html[dir=rtl] .bagbtn__n{right:auto;left:-4px}
html[dir=rtl] .card__badge{left:auto;right:14px}
html[dir=rtl] .steps b{right:auto;left:22px}
html[dir=rtl] .dlg__x{right:auto;left:16px}
html[dir=rtl] .index a::before{background:linear-gradient(270deg,rgba(125,23,48,.34),rgba(125,23,48,0));transform-origin:right}
html[dir=rtl] .coff:hover,html[dir=rtl] .coff.is-active{background:linear-gradient(270deg,rgba(226,187,108,.12),transparent)}
html[dir=rtl] .pk:hover{background:linear-gradient(270deg,rgba(226,187,108,.08),transparent)}
html[dir=rtl] .cart{right:auto;left:0;border-left:0;border-right:1px solid var(--line);transform:translateX(-102%)}
html[dir=rtl] .cart.on{transform:none}
html[dir=rtl] .line{animation-name:li-rtl}
@keyframes li-rtl{from{opacity:0;transform:translateX(-24px)}}
html[dir=rtl] .btn:hover .ico{transform:translateX(-4px)}
@media (max-width:760px){
  html[lang=uk] .hero,html[lang=ru] .hero{--fs:clamp(40px,13.5vw,96px)}
  html[dir=rtl] .headline__w--a{left:auto;right:var(--pad)}
  html[dir=rtl] .headline__w--b{right:auto;left:var(--pad)}
  html[dir=rtl] .lead{left:var(--pad);right:var(--pad)}
  html[dir=rtl] .plaques{left:var(--pad);right:var(--pad)}
  .top__right{gap:8px}.lang__btn{height:44px;min-width:50px;padding:0 10px}.bagbtn{width:44px;height:44px}
}
.plaque__big,.offre__big{direction:ltr;unicode-bidi:isolate}
html[lang=uk] .lead,html[lang=ru] .lead{font-size:clamp(18px,1.9vw,32px);max-width:min(44vw,640px)}
@media (max-width:760px){
  html[lang=ar] .hero{--fs:clamp(44px,14.5vw,96px)}
  html[lang=ar] .headline__w--a{top:calc(var(--mt) - var(--fs)*2.35)}
  html[lang=ar] .headline__w--b{top:calc(var(--mt) - var(--fs)*1.2)}
  html[lang=uk] .lead,html[lang=ru] .lead{font-size:17px}
}