/* ===== 16 Oct 2026 (Olia): "What we do" — one example brand (Maison Vérane) through seven pieces. Proposal layouts A / B / C ===== */
.wd{--paper:#F4EFE9;padding-block:clamp(72px,9vw,140px);background:var(--paper);color:var(--ink);position:relative}
.wd-head{display:grid;grid-template-columns:repeat(12,1fr);gap:16px 24px;margin-bottom:clamp(28px,4vw,56px)}
.wd-head .kick{grid-column:1/-1;color:var(--act)}
.wd-h{grid-column:1 / span 9;margin:0;font:300 clamp(40px,5.4vw,88px)/1.02 var(--serif);letter-spacing:-.03em}
.wd-h .rd{font-style:italic;font-weight:400;color:var(--red)}
.wd-lead{grid-column:10 / span 3;align-self:end;margin:0;font:400 clamp(17px,1.3vw,20px)/1.5 var(--serif);color:var(--ink-64)}
.wd-tabs{display:flex;gap:0;border-top:1px solid var(--hair);margin-bottom:clamp(20px,2.4vw,32px);overflow-x:auto;scrollbar-width:none}
.wd-tabs::-webkit-scrollbar{display:none}
.wd-tabs button{flex:1 1 0;min-width:max-content;position:relative;background:none;border:0;padding:16px 18px 14px 0;text-align:left;font:500 15px/1.25 var(--sans);color:var(--ink-64);cursor:pointer;display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.wd-tabs button span{font:600 11px/1 var(--sans);letter-spacing:.08em;color:var(--ink-64)}
.wd-tabs button::before{content:"";position:absolute;left:0;right:18px;top:-1px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left}
.wd-tabs button[aria-selected=true]{color:var(--ink)}
.wd-tabs button[aria-selected=true] span{color:var(--red)}
.wd-tabs button[aria-selected=true]::before{transform:scaleX(1);transition:transform var(--dur,10s) linear}
.wd.manual .wd-tabs button[aria-selected=true]::before{transition:none}
.wd-tabs button:hover{color:var(--ink)}
.wd-body{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
.wd-caps{grid-column:1 / span 4;position:relative;grid-row:1}
.wd-stagewrap{grid-column:5 / span 8;grid-row:1;position:relative}
.wd-cap{display:none}
.wd-cap.on{display:block;animation:wdUp .6s var(--ease) both}
.wd-cap .num{font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--red)}
.wd-cap h3{margin:12px 0 14px;font:300 clamp(32px,3.2vw,52px)/1.04 var(--serif);letter-spacing:-.02em}
.wd-cap h3 em{font-style:italic;font-weight:400}
.wd-cap p{margin:0;font:400 clamp(17px,1.35vw,20px)/1.5 var(--serif);color:var(--ink-64);max-width:30ch}
.wd-nav,.wd-count{display:none}

/* ---------- stage ---------- */
.wd-stage{color:var(--ink);position:relative;aspect-ratio:16/10;container-type:size;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -50px rgba(10,10,11,.45)}
.wd-sc{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s}
.wd-sc.on{opacity:1;visibility:visible;transition:opacity .45s}
.wd-sc .a-up{opacity:0}
.wd-sc.on .a-up{animation:wdUp .7s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes wdUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wdIn{from{opacity:0}to{opacity:1}}
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
.cnt{--n:0;counter-reset:n var(--n)}
.cnt::after{content:counter(n)}
.wd-sc.on .cnt{animation:wdCount 2.4s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes wdCount{to{--n:var(--to)}}

/* 01 brand book */
.sc-brand{background:#E9E1D6;display:grid;place-items:center}
.bb{width:88cqw;height:80cqh;display:grid;grid-template-columns:1fr 1fr;background:#FBF8F4;box-shadow:0 30px 60px -30px rgba(0,0,0,.35);border-radius:4px;position:relative}
.bb::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:6cqw;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent)}
.bb-p{padding:6cqh 4cqw;display:flex;flex-direction:column;min-width:0}
.bb-l{align-items:center;justify-content:center;gap:1.6cqh;text-align:center}
.mono{width:18cqw;height:18cqw;max-height:34cqh}
.mono .ring{fill:none;stroke:#9E0F18;stroke-width:1.6;stroke-dasharray:340;stroke-dashoffset:340}
.mono text{font:italic 400 40px var(--serif);fill:#0A0A0B;opacity:0}
.sc-brand.on .mono .ring{animation:wdDraw 1.4s var(--ease) .2s forwards}
.sc-brand.on .mono text{animation:wdIn .8s .9s forwards}
@keyframes wdDraw{to{stroke-dashoffset:0}}
.bb-word{margin:0;font:400 clamp(11px,2.1cqw,30px)/1 var(--serif);letter-spacing:.32em;padding-left:.32em}
.bb-l small{font:600 clamp(8px,.95cqw,12px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#8a7f73}
.bb-k{font:600 clamp(7px,.85cqw,11px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#8a7f73;margin:0 0 1.2cqh}
.sw{display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw;margin-bottom:3cqh}
.sw i{height:11cqh;background:var(--c);border-radius:2px;display:flex;align-items:flex-end;padding:.8cqw;font-style:normal}
.sw i b{font:600 clamp(7px,.9cqw,12px)/1 var(--sans);color:#fff}
.sw i.lt{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.sw i.lt b{color:#0A0A0B}
.ty2{display:flex;gap:3cqw;margin-bottom:3cqh}
.ty2 p{margin:0;font:400 clamp(20px,5.4cqw,74px)/1 var(--serif);display:flex;flex-direction:column}
.ty2 .t2{font-family:var(--sans);font-weight:500}
.ty2 small{font:500 clamp(7px,.85cqw,11px)/1.6 var(--sans);color:#8a7f73}
.use{display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:1.2cqw;align-items:end;flex:1}
.u-bag{height:17cqh;background:#9E0F18;border-radius:2px;display:grid;place-items:center;position:relative}
.u-bag i{position:absolute;top:-3cqh;left:30%;right:30%;height:4cqh;border:2px solid #9E0F18;border-bottom:0;border-radius:40px 40px 0 0}
.u-bag b{font:400 clamp(5px,.8cqw,11px)/1 var(--serif);letter-spacing:.2em;color:#fff}
.u-card{height:10cqh;background:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.3);display:flex;flex-direction:column;justify-content:center;padding:0 1cqw;gap:.6cqh}
.u-card b{font:italic 400 clamp(9px,1.6cqw,20px)/1 var(--serif);color:#9E0F18}
.u-card small{font:500 clamp(5px,.7cqw,9px)/1.2 var(--sans);color:#555}
.u-lab{height:17cqh;background:#0A0A0B;border-radius:3px 3px 2px 2px;display:grid;place-items:center}
.u-lab b{font:400 clamp(6px,1cqw,13px)/1.2 var(--serif);letter-spacing:.18em;color:#B89A5E;text-align:center}
@container (orientation:portrait){
 .bb{grid-template-columns:1fr;grid-template-rows:.8fr 1.2fr;width:86cqw;height:90cqh}
 .bb::after{display:none}
 .bb-p{padding:4cqh 6cqw}
 .bb-l{border-bottom:1px solid #eee4d8}
 .mono{width:26cqw;height:26cqw}
 .bb-word{font-size:4.2cqw}
 .sw i{height:8cqh}.sw i b{font-size:2.2cqw}
 .ty2 p{font-size:10cqw}.ty2 small,.bb-k,.bb-l small{font-size:2.2cqw}
 .u-bag,.u-lab{height:12cqh}.u-card{height:8cqh}
 .u-bag b{font-size:1.6cqw}.u-card b{font-size:3.4cqw}.u-card small{font-size:1.5cqw}.u-lab b{font-size:2.2cqw}
}

/* 02 website (kept from the Maison Vérane flow: add to bag, cursor books the consultation, typed booking) */
.sc-web{background:#F6F2EC;--x0:80cqw;--y0:94cqh;--x1:63cqw;--y1:66cqh;--x2:62cqw;--y2:77cqh;--x3:68cqw;--y3:79.5cqh}
.br{position:absolute;inset:0;font-family:var(--sans)}
.br-bar{height:6cqh;background:#ECE6DE;display:flex;align-items:center;gap:.7cqw;padding:0 1.6cqw}
.br-bar i{width:1cqw;height:1cqw;max-width:10px;max-height:10px;border-radius:50%;background:#cfc6bb}
.br-bar span{margin-left:2cqw;font:500 clamp(7px,1cqw,12px)/1 var(--sans);color:#8a7f73;background:#fff;padding:.6cqh 1.2cqw;border-radius:4px}
.br-nav{height:8cqh;display:flex;align-items:center;gap:2.4cqw;padding:0 4cqw;border-bottom:1px solid #e6ddd2;font:500 clamp(7px,1.05cqw,13px)/1 var(--sans);color:#555}
.br-nav b{font:400 clamp(9px,1.6cqw,20px)/1 var(--serif);letter-spacing:.28em;color:#0A0A0B;margin-right:auto}
.br-nav .bag{font-style:normal;position:relative;color:#0A0A0B}
.badge{position:absolute;right:-1.6cqw;top:-1.4cqh;width:2.2cqw;height:2.2cqw;max-width:20px;max-height:20px;border-radius:50%;background:var(--act);color:#fff;font:700 clamp(7px,1cqw,11px)/1 var(--sans);display:grid;place-items:center;font-style:normal;transform:scale(0)}
.sc-web.on .badge{animation:wdPop .35s 2.1s var(--ease) forwards}
@keyframes wdPop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.pp2{position:absolute;inset:14cqh 0 0 0}
.pp2-img{position:absolute;left:0;top:0;bottom:0;width:50cqw;overflow:hidden}
.pp2-img img{width:100%;height:100%;object-fit:cover}
.pp2-tx{position:absolute;left:56cqw;top:9cqh;right:4cqw}
.pp2-tx small{font:600 clamp(7px,.95cqw,12px)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#8a7f73}
.pp2-tx .ttl{margin:1.6cqh 0 1.4cqh;font:400 clamp(16px,4.2cqw,58px)/1 var(--serif);letter-spacing:-.01em}
.pp2-tx .ds{margin:0;font:400 clamp(8px,1.35cqw,17px)/1.5 var(--serif);color:#555;max-width:32ch}
.pp2-tx .pr{margin:1.6cqh 0 0;font:500 clamp(8px,1.3cqw,16px)/1 var(--sans)}
.pp2-buy{position:absolute;left:56cqw;top:49cqh;width:17cqw;height:8cqh;background:#0A0A0B;color:#fff;display:grid;place-items:center;font:600 clamp(7px,1.05cqw,13px)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.pp2-book{position:absolute;left:56cqw;top:61cqh;font:italic 400 clamp(8px,1.45cqw,18px)/1.3 var(--serif);border-bottom:1px solid #0A0A0B;padding-bottom:.4cqh}
.sc-web.on .pp2-buy{animation:wdPress 10s linear both}
@keyframes wdPress{0%,19%{transform:none}20%{transform:scale(.94);background:#333}23%,100%{transform:none;background:#0A0A0B}}
.sc-web.on .pp2-book{animation:wdPress2 10s linear both}
@keyframes wdPress2{0%,44%{color:#0A0A0B}45%,100%{color:var(--act);border-color:var(--act)}}
.toast2{position:absolute;right:3cqw;top:15cqh;background:#0A0A0B;color:#fff;padding:1.4cqh 1.6cqw;font:500 clamp(7px,1.05cqw,13px)/1.3 var(--sans);opacity:0;border-radius:4px}
.toast2 b{display:block;font:italic 400 clamp(8px,1.3cqw,16px)/1.3 var(--serif)}
.sc-web.on .toast2{animation:wdToast 10s linear both}
@keyframes wdToast{0%,21%{opacity:0;transform:translateY(-6px)}23%,34%{opacity:1;transform:none}37%,100%{opacity:0}}
.book2{position:absolute;right:0;top:14cqh;bottom:0;width:40cqw;background:#fff;box-shadow:-30px 0 60px -30px rgba(0,0,0,.35);padding:5cqh 3cqw;transform:translateX(102%)}
.sc-web.on .book2{animation:wdPanel 10s var(--ease) both}
@keyframes wdPanel{0%,46%{transform:translateX(102%)}52%,100%{transform:none}}
@keyframes wdPanelV{0%,46%{transform:translateY(102%)}52%,100%{transform:none}}
.book2 .h{margin:0 0 3cqh;font:400 clamp(11px,2.3cqw,30px)/1.1 var(--serif)}
.book2 label{display:block;font:600 clamp(6px,.85cqw,11px)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8a7f73;margin-bottom:2.4cqh}
.book2 label span{display:block;margin-top:.9cqh;border-bottom:1px solid #ddd;padding-bottom:.9cqh;min-height:4.4cqh;font:400 clamp(8px,1.5cqw,19px)/1.3 var(--sans);letter-spacing:0;text-transform:none;color:#0A0A0B}
.typ{font-style:normal;display:inline-block;clip-path:inset(0 100% 0 0)}
.sc-web.on .typ{animation:wdType .75s steps(16,end) forwards;animation-delay:var(--d)}
@keyframes wdType{to{clip-path:inset(0 0 0 0)}}
.req{position:absolute;left:3cqw;bottom:13cqh;width:15cqw;height:7.5cqh;background:var(--act);color:#fff;display:grid;place-items:center;font:600 clamp(7px,1.05cqw,13px)/1 var(--sans)}
.sc-web.on .req{animation:wdReq 10s linear both}
@keyframes wdReq{0%,80%{transform:none}81%{transform:scale(.94)}83%,100%{transform:none}}
.done{position:absolute;left:3cqw;bottom:5cqh;margin:0;font:italic 400 clamp(8px,1.4cqw,17px)/1.3 var(--serif);color:var(--act);opacity:0}
.sc-web.on .done{animation:wdIn .4s 8.5s forwards}
.cur2{position:absolute;width:2.8cqw;min-width:14px;left:var(--x0);top:var(--y0);opacity:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));z-index:5}
.sc-web.on .cur2{animation:wdCur 10s var(--ease) both}
@keyframes wdCur{
 0%{opacity:0;left:var(--x0);top:var(--y0);transform:none}
 5%{opacity:1;left:var(--x0);top:var(--y0)}
 17%{left:var(--x1);top:var(--y1);transform:none}
 20%{transform:scale(.82)}22%{transform:none}
 32%{left:var(--x1);top:var(--y1)}
 43%{left:var(--x2);top:var(--y2);transform:none}
 45%{transform:scale(.82)}47%{transform:none}
 70%{left:var(--x2);top:var(--y2)}
 79%{left:var(--x3);top:var(--y3);transform:none}
 81%{transform:scale(.82)}83%{transform:none;opacity:1}
 92%,100%{left:var(--x3);top:var(--y3);opacity:0}}
@container (orientation:portrait){
 .sc-web{--x0:80cqw;--y0:96cqh;--x1:24cqw;--y1:79cqh;--x2:22cqw;--y2:88cqh;--x3:22cqw;--y3:86cqh}
 .br-nav span{display:none}
 .br-nav b{font-size:3.4cqw}.br-nav{font-size:2.6cqw}.br-bar span{font-size:2.2cqw}
 .pp2-img{width:100%;height:40cqh;bottom:auto}
 .pp2-tx{left:7cqw;top:42cqh}
 .pp2-tx small{font-size:2.2cqw}.pp2-tx .ttl{font-size:8cqw;margin:1cqh 0}.pp2-tx .ds{font-size:2.9cqw}.pp2-tx .pr{font-size:3cqw;margin-top:1cqh}
 .pp2-buy{left:7cqw;top:61cqh;width:38cqw;height:6.5cqh;font-size:2.6cqw}
 .pp2-book{left:7cqw;top:71cqh;font-size:3.3cqw}
 .toast2{font-size:2.6cqw;padding:1.2cqh 3cqw}.toast2 b{font-size:3.2cqw}
 .book2{width:100%;top:38cqh;padding:3cqh 7cqw;transform:translateY(102%)}
 .sc-web.on .book2{animation-name:wdPanelV}
 .book2 .h{font-size:5.4cqw;margin-bottom:2cqh}.book2 label{font-size:2.1cqw;margin-bottom:1.6cqh}.book2 label span{font-size:3.4cqw}
 .req{left:7cqw;bottom:9cqh;width:34cqw;height:6cqh;font-size:2.8cqw}
 .done{left:7cqw;bottom:3cqh;font-size:3.2cqw}
 .cur2{width:6cqw}
}

/* 03 video */
.sc-vid{background:#0A0A0B}
.sc-vid video{width:100%;height:100%;object-fit:cover}
.vid-cap{position:absolute;left:4cqw;bottom:5cqh;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.vid-cap small{display:block;font:600 clamp(8px,1cqw,12px)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.vid-cap b{font:400 clamp(20px,4.6cqw,64px)/1.1 var(--serif)}

/* 04 social */
.sc-soc{background:#EFE8DF}
.feed{position:absolute;left:5cqw;top:50%;transform:translateY(-50%);width:28cqw;display:grid;grid-template-columns:1fr 1fr;gap:.8cqw}
.feed img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
.rph{position:absolute;left:50%;top:5cqh;bottom:5cqh;aspect-ratio:9/19;transform:translateX(-50%);background:#000;border-radius:3.4cqh;overflow:hidden;box-shadow:0 30px 60px -25px rgba(0,0,0,.55);border:.8cqh solid #111}
.rph video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-ui{position:absolute;left:0;right:0;bottom:0;padding:8cqh 1.6cqw 3cqh;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-family:var(--sans)}
.ph-ui b{font:600 clamp(7px,1.05cqw,13px)/1 var(--sans)}
.ph-ui p{margin:.8cqh 0 1.4cqh;font:400 clamp(6px,.95cqw,12px)/1.35 var(--sans)}
.shop{display:inline-block;background:#fff;color:#0A0A0B;font:600 clamp(6px,.9cqw,11px)/1 var(--sans);padding:1cqh 1.2cqw;border-radius:3px}
.ph-side{position:absolute;right:1.2cqw;bottom:16cqh;display:flex;flex-direction:column;gap:2.4cqh;color:#fff;align-items:center}
.ph-side i{font-style:normal;display:flex;flex-direction:column;align-items:center;gap:.4cqh}
.ph-side svg{width:2.4cqw;height:2.4cqw;min-width:12px;min-height:12px}
.ph-side em{font:600 clamp(6px,.85cqw,11px)/1 var(--sans);font-style:normal}
.ph-side .like svg{color:#fff}
.sc-soc.on .ph-side .like svg{animation:wdLike 10s linear both}
@keyframes wdLike{0%,20%{color:#fff;transform:none}22%{color:var(--red);transform:scale(1.35)}25%,100%{color:var(--red);transform:none}}
.story{position:absolute;right:5cqw;top:50%;transform:translateY(-50%);width:22cqw;aspect-ratio:9/16;border-radius:1.4cqw;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.45)}
.sc-soc.on .story{animation:wdUpC .7s var(--ease) both;animation-delay:var(--d)}
@keyframes wdUpC{from{opacity:0;transform:translateY(calc(-50% + 14px))}to{opacity:1;transform:translateY(-50%)}}
.story img{width:100%;height:100%;object-fit:cover}
.poll{position:absolute;left:8%;right:8%;bottom:10%;background:#fff;border-radius:6px;padding:1.4cqh 1.2cqw;font-family:var(--sans)}
.poll p{margin:0 0 1cqh;font:600 clamp(7px,1.1cqw,14px)/1.2 var(--sans);text-align:center}
.poll div{height:3.6cqh;background:#eee;border-radius:3px;margin-top:.8cqh;position:relative;overflow:hidden}
.poll i{position:absolute;inset:0;width:0;background:#f3d0d0}
.poll .b2{background:#eee5d6}
.poll em{position:absolute;left:.8cqw;top:50%;transform:translateY(-50%);font:600 clamp(6px,.9cqw,11px)/1 var(--sans);font-style:normal;white-space:nowrap}
.sc-soc.on .poll .b1{animation:wdBar1 1.4s 2s var(--ease) forwards}
.sc-soc.on .poll .b2{animation:wdBar2 1.4s 2s var(--ease) forwards}
@keyframes wdBar1{to{width:64%}}@keyframes wdBar2{to{width:36%}}
@container (orientation:portrait){
 .feed{display:none}
 .rph{left:36%;top:6cqh;bottom:6cqh}
 .story{right:4cqw;width:36cqw;top:62%}
 .ph-ui b{font-size:2.6cqw}.ph-ui p{font-size:2.4cqw}.shop{font-size:2.3cqw;padding:1cqh 2cqw}.ph-side em{font-size:2.2cqw}.ph-side svg{width:5cqw;height:5cqw}.ph-side{right:2.4cqw}
 .poll p{font-size:2.6cqw}.poll em{font-size:2.2cqw}.poll div{height:3cqh}
}

/* 05 lead generation */
.sc-lead{background:#F4EFE9;display:grid;grid-template-columns:1.15fr .9fr 1fr;gap:2.4cqw;padding:7cqh 4cqw 13cqh;align-items:center}
.lg{display:flex;flex-direction:column;gap:1.4cqh;min-height:0}
.lg .ch{font:600 clamp(7px,.95cqw,12px)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--act)}
.ml{background:#fff;padding-bottom:9cqh!important;border-radius:8px;padding:3cqh 2cqw;box-shadow:0 20px 40px -28px rgba(0,0,0,.4);position:relative;font-family:var(--sans)}
.ml small{font:600 clamp(7px,.95cqw,12px)/1 var(--sans);color:#8a7f73}
.ml b{display:block;margin:1.6cqh 0 1.2cqh;font:400 clamp(10px,1.9cqw,24px)/1.15 var(--serif)}
.ml p{margin:0;font:400 clamp(7px,1.1cqw,14px)/1.5 var(--sans);color:#555}
.ml em{position:absolute;bottom:3cqh;font:600 clamp(6px,.9cqw,11px)/1 var(--sans);font-style:normal;padding:.9cqh .9cqw;border-radius:3px;opacity:0}
.ml .op{left:2cqw;background:#eee;color:#333}.ml .bk{left:9cqw;background:var(--act);color:#fff}
.sc-lead.on .ml .op{animation:wdIn .3s 2.2s forwards}.sc-lead.on .ml .bk{animation:wdIn .3s 4.2s forwards}
.sph,.dm{height:62cqh;background:#fff;border-radius:2.4cqh;padding:2.4cqh 1.2cqw;box-shadow:0 20px 40px -28px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:1.2cqh;overflow:hidden}
.sph{border:.6cqh solid #111}
.dm b{font:600 clamp(7px,1cqw,13px)/1 var(--sans);padding-bottom:1.2cqh;border-bottom:1px solid #eee}
.msg{margin:0;max-width:88%;padding:1.2cqh 1cqw;border-radius:1.6cqh;font:400 clamp(6px,1cqw,13px)/1.35 var(--sans);opacity:0}
.msg.rx{background:#EFEDEA;align-self:flex-start}
.msg.tx{background:var(--act);color:#fff;align-self:flex-end}
.sc-lead.on .msg{animation:wdUp .45s var(--ease) both;animation-delay:var(--d)}
.lg-count{position:absolute;left:4cqw;bottom:4.4cqh;margin:0;font:400 clamp(9px,1.5cqw,19px)/1 var(--serif);color:#333}
.lg-count b{font:400 clamp(14px,2.6cqw,34px)/1 var(--serif);color:var(--act);margin-right:.6cqw}
@container (orientation:portrait){
 .sc-lead{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;padding:4cqh 5cqw 11cqh;gap:3cqw}
 .lg-mail{grid-column:1/-1}
 .ml{padding:2cqh 4cqw!important}.sph,.dm{height:100%}.sc-lead{align-items:stretch}.ml b{font-size:4.2cqw;margin:1cqh 0 .8cqh}.ml p{font-size:2.8cqw}.ml small,.lg .ch{font-size:2.2cqw}
 .ml em{position:static;display:inline-block;margin:1.4cqh 1.4cqw 0 0;font-size:2.2cqw;padding:.8cqh 1.6cqw}
 .msg{font-size:2.6cqw;padding:1cqh 2cqw}.dm b{font-size:2.6cqw}
 .lg-count{left:5cqw;font-size:3.6cqw}.lg-count b{font-size:6cqw}
}

/* 06 AI calling */
.sc-call{background:#0E0E10;color:#fff;display:grid;grid-template-columns:.75fr 1.25fr;gap:4cqw;padding:7cqh 5cqw;align-items:center}
.call{height:86cqh;aspect-ratio:9/18;justify-self:center;border-radius:3.4cqh;background:linear-gradient(170deg,#3a0d10,#0A0A0B 60%);border:.8cqh solid #222;display:flex;flex-direction:column;align-items:center;padding-top:9cqh;gap:1.2cqh;font-family:var(--sans)}
.call small{font:500 clamp(6px,.9cqw,11px)/1 var(--sans);color:rgba(255,255,255,.6)}
.call b{font:400 clamp(11px,2cqw,26px)/1.1 var(--serif)}
.call span{font:600 clamp(6px,.9cqw,11px)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.ctm{font:500 clamp(7px,1.1cqw,14px)/1 var(--sans);font-style:normal;color:rgba(255,255,255,.75);margin-top:1cqh}
.ctm{counter-reset:s var(--s)}.ctm::after{content:"00:" counter(s,decimal-leading-zero)}
@property --s{syntax:"<integer>";inherits:false;initial-value:0}
.sc-call.on .ctm{animation:wdSec 9s linear forwards}
@keyframes wdSec{to{--s:42}}
.wave{display:flex;gap:.5cqw;align-items:center;height:12cqh;margin-top:auto;margin-bottom:12cqh}
.wave i{width:.6cqw;min-width:3px;height:30%;background:#fff;border-radius:3px;opacity:.85}
.sc-call.on .wave i{animation:wdWave 1s ease-in-out infinite alternate}
.wave i:nth-child(2n){animation-delay:-.4s!important}.wave i:nth-child(3n){animation-delay:-.7s!important}.wave i:nth-child(4n+1){animation-duration:.8s!important}
@keyframes wdWave{from{height:18%}to{height:100%}}
.tr{display:flex;flex-direction:column;gap:2cqh}
.tr p{margin:0;font:400 clamp(9px,1.6cqw,21px)/1.4 var(--serif);opacity:0;max-width:44ch}
.tr p b{display:block;font:600 clamp(6px,.85cqw,11px)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.8cqh}
.tr .cl b{color:rgba(255,255,255,.55)}.tr .ag b{color:var(--red)}
.tr .cl{color:rgba(255,255,255,.8)}
.sc-call.on .tr p{animation:wdUp .5s var(--ease) both;animation-delay:var(--d)}
.cok{display:flex;gap:.8cqw;flex-wrap:wrap;margin-top:1cqh}
.cok i{font:600 clamp(6px,.95cqw,12px)/1 var(--sans);font-style:normal;padding:1.2cqh 1cqw;border:1px solid rgba(255,255,255,.3);border-radius:3px;opacity:0}
.cok i::before{content:"✓ ";color:var(--red)}
.sc-call.on .cok i{animation:wdUp .4s var(--ease) both;animation-delay:var(--d)}
@container (orientation:portrait){
 .sc-call{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:4cqh 6cqw;gap:2cqh;align-items:start}
 .call{height:auto;aspect-ratio:auto;width:100%;flex-direction:row;flex-wrap:wrap;padding:2.4cqh 4cqw;border-radius:2cqh;gap:1cqh 3cqw;align-items:center}
 .call small{display:none}.call b{font-size:5cqw}.call span{font-size:2.2cqw}.ctm{font-size:3cqw;margin:0 0 0 auto}
 .wave{height:5cqh;margin:0;width:100%;gap:1.4cqw}.wave i{width:1.4cqw}
 .tr{gap:1.6cqh}.tr p{font-size:3.5cqw}.tr p b{font-size:2.1cqw}.cok i{font-size:2.4cqw;padding:1cqh 2cqw}.cok{gap:2cqw}
}

/* 07 automations */
.sc-auto{background:#fff;padding:8cqh 6cqw;display:flex;flex-direction:column;justify-content:center;gap:9cqh}
.fl{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1.6cqw}
.ln{position:absolute;left:2cqw;right:2cqw;top:3cqh;height:2px;background:#eee}
.ln .fdot{position:absolute;left:0;top:50%;width:1.6cqw;height:1.6cqw;min-width:10px;min-height:10px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);box-shadow:0 0 0 .6cqw rgba(255,46,46,.18)}
.sc-auto.on .ln .fdot{animation:wdRun 4.6s .4s linear both}
@keyframes wdRun{to{left:100%}}
.nd{position:relative;padding-top:8cqh;font-family:var(--sans);opacity:.35;transition:opacity .3s}
.nd::before{content:"";position:absolute;left:0;top:1.6cqh;width:2.8cqh;height:2.8cqh;border-radius:50%;background:#fff;border:2px solid #ccc}
.sc-auto.on .nd{animation:wdLit .3s forwards;animation-delay:var(--d)}
@keyframes wdLit{to{opacity:1}}
.sc-auto.on .nd::before{animation:wdLitB .3s forwards;animation-delay:inherit}
@keyframes wdLitB{to{border-color:var(--red);background:var(--red)}}
.nd b{display:block;font:400 clamp(10px,2.1cqw,28px)/1.15 var(--serif);margin-bottom:.8cqh}
.nd small{font:500 clamp(6px,.95cqw,12px)/1.3 var(--sans);color:#777}
.crm2{border-top:1px solid #eee}
.crm2 .crow{display:grid;grid-template-columns:1.1fr 1.6fr auto;gap:2cqw;align-items:center;padding:3cqh 0;border-bottom:1px solid #eee;font-family:var(--sans)}
.crm2 b{font:500 clamp(8px,1.5cqw,19px)/1 var(--sans)}
.crm2 span{font:400 clamp(7px,1.15cqw,14px)/1 var(--sans);color:#666}
.st{font:600 clamp(6px,.9cqw,11px)/1 var(--sans);font-style:normal;padding:1cqh 1cqw;border-radius:3px;background:#f1f1f1;color:#333}
.st.stb{background:var(--act);color:#fff}
@container (orientation:portrait){
 .sc-auto{padding:5cqh 7cqw;gap:4cqh}
 .fl{grid-template-columns:1fr;gap:2.6cqh}
 .ln{left:1.4cqh;right:auto;top:2cqh;bottom:2cqh;width:2px;height:auto}
 .ln .fdot{left:50%;top:0;width:3.4cqw;height:3.4cqw}
 .sc-auto.on .ln .fdot{animation-name:wdRunV}
 .nd{padding:0 0 0 8cqw}.nd::before{top:.2cqh}
 .nd b{font-size:4.4cqw}.nd small{font-size:2.6cqw}
 .crm2 .crow{grid-template-columns:1fr auto;padding:1.6cqh 0}.crm2 span{display:none}.crm2 b{font-size:3.2cqw}.st{font-size:2.3cqw;padding:.9cqh 2cqw}
}
@keyframes wdRunV{to{top:100%}}

/* ---------- Layout B: one slide at a time on black, arrows at the edges ---------- */
.wd[data-layout=B]{background:var(--ink);color:#fff}
.wd[data-layout=B] .wd-head .kick{color:var(--red)}
.wd[data-layout=B] .wd-lead,.wd[data-layout=B] .wd-cap p{color:rgba(255,255,255,.72)}
.wd[data-layout=B] .wd-tabs{border-top-color:var(--w14)}
.wd[data-layout=B] .wd-tabs button,.wd[data-layout=B] .wd-tabs button span{color:rgba(255,255,255,.55)}
.wd[data-layout=B] .wd-tabs button[aria-selected=true]{color:#fff}
.wd[data-layout=B] .wd-tabs button[aria-selected=true] span{color:var(--red)}
.wd[data-layout=B] .wd-tabs button::before{transition:none!important}
.wd[data-layout=B] .wd-stage{box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.wd[data-layout=B] .wd-nav{display:grid;place-items:center;position:absolute;top:0;bottom:0;width:72px;background:none;border:0;color:#fff;cursor:pointer;z-index:3}
.wd[data-layout=B] .wd-nav svg{width:22px;height:44px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));transition:transform .3s}
.wd[data-layout=B] .wd-nav.prev{left:-84px}.wd[data-layout=B] .wd-nav.next{right:-84px}
.wd[data-layout=B] .wd-nav.prev:hover svg{transform:translateX(-4px)}.wd[data-layout=B] .wd-nav.next:hover svg{transform:translateX(4px)}
.wd[data-layout=B] .wd-count{display:block;margin:16px 0 0;text-align:right;font:500 14px/1 var(--sans);color:rgba(255,255,255,.55)}
.wd[data-layout=B] .wd-count b{color:#fff}
@media (max-width:1560px){.wd[data-layout=B] .wd-nav.prev{left:0}.wd[data-layout=B] .wd-nav.next{right:0}.wd[data-layout=B] .wd-nav{width:64px;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent)}.wd[data-layout=B] .wd-nav.next{background:linear-gradient(270deg,rgba(0,0,0,.28),transparent)}.wd[data-layout=B] .wd-nav{bottom:30px}}

/* ---------- Layout C: scroll story — chapters on the left, the stage stays while you scroll ---------- */
.wd[data-layout=C]{background:#fff}
.wd[data-layout=C] .wd-tabs{display:none}
.wd[data-layout=C] .wd-body{align-items:stretch}
.wd[data-layout=C] .wd-cap{display:flex;flex-direction:column;justify-content:center;min-height:72vh;opacity:.22;transition:opacity .4s;animation:none;border-top:1px solid var(--hair)}
.wd[data-layout=C] .wd-cap.on{opacity:1}
.wd[data-layout=C] .wd-cap.on .num::before{content:"";display:inline-block;width:28px;height:2px;background:var(--red);vertical-align:middle;margin-right:10px}
.wd[data-layout=C] .wd-stagewrap{position:sticky;top:max(100px,calc(50vh - 17vw));align-self:start}
.wd[data-layout=C] .wd-count{display:block;margin:14px 0 0;font:500 14px/1 var(--sans);color:var(--ink-64)}
.wd[data-layout=C] .wd-count b{color:var(--ink)}

/* ---------- phone ---------- */
@media (max-width:900px){
 .wd-h,.wd-lead{grid-column:1/-1}
 .wd-body{grid-template-columns:1fr}
 .wd-caps,.wd-stagewrap{grid-column:1}
 .wd-caps{grid-row:2}.wd-stagewrap{grid-row:1}
 .wd-stage{aspect-ratio:4/5}
 .wd-tabs{margin-inline:calc(-1 * var(--gL));padding-inline:var(--gL)}
 .wd-tabs button{flex:0 0 auto;padding-right:22px}
 .wd-cap h3{margin:8px 0 8px}
 .wd[data-layout=B] .wd-nav{width:44px;bottom:0}.wd[data-layout=B] .wd-nav svg{width:11px;height:22px}
 .wd[data-layout=C] .wd-caps{grid-row:2}
 .wd[data-layout=C] .wd-stagewrap{position:sticky;top:12px;z-index:2}
 .wd[data-layout=C] .wd-stage{aspect-ratio:1/1}
 .wd[data-layout=C] .wd-cap{min-height:62vh;justify-content:flex-start;padding-top:28px}
}

/* Maison Verane logo (ChatGPT, 16 Oct): monogram writes in, wordmark under it; seal as the brand's icon everywhere */
.bb-mono{width:22cqw;max-height:30cqh;object-fit:contain;clip-path:inset(0 100% 0 0)}
.sc-brand.on .bb-mono{animation:wdWipe 1.3s var(--ease) .2s forwards}
@keyframes wdWipe{to{clip-path:inset(0 0 0 0)}}
.bb-wm{width:28cqw;max-width:90%}
.u-bag img{width:60%;margin-top:1cqh}
.u-card{flex-direction:row!important;align-items:center;gap:.8cqw!important}
.u-card img{width:4.2cqw;height:4.2cqw}
.u-lab{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1cqh}
.u-lab img{width:60%}
.u-lab b{font-size:clamp(5px,.75cqw,10px)!important}
.br-bar .tab{display:flex;align-items:center;gap:.6cqw;background:#F6F2EC!important;color:#333!important;border-radius:6px 6px 0 0!important;align-self:flex-end;padding:1cqh 1.4cqw!important;margin-left:1.2cqw!important}
.br-bar .tab img{width:1.6cqw;height:1.6cqw;min-width:10px;min-height:10px}
.br-bar span+span{margin-left:1cqw!important}
.br-nav .wm{height:5.2cqh;width:auto;margin-right:auto}
.av{display:inline-block;width:2.2cqw;height:2.2cqw;min-width:12px;min-height:12px;border-radius:50%;vertical-align:middle;margin-right:.6cqw}
.ml small{display:flex;align-items:center}
.dm b{display:flex;align-items:center}
.ph-ui b{display:flex;align-items:center}
.call .av{width:9cqh;height:9cqh;margin:0 0 1cqh}
@container (orientation:portrait){
 .bb-mono{width:34cqw;max-height:22cqh}.bb-wm{width:56cqw}
 .br-bar .tab{display:none}.br-nav .wm{height:4.2cqh}
 .u-card img{width:8cqw;height:8cqw}.u-lab b{font-size:1.8cqw!important}
 .av{width:4.6cqw;height:4.6cqw}.call .av{width:7cqh;height:7cqh;margin:0}
}

/* 16 Oct 19:10 (Olia): social content that shows craft — hooks on every post, captions on the reel, a story that books samples, results */
.feed figure{margin:0;position:relative;aspect-ratio:1;overflow:hidden;border-radius:3px}
.feed figure img{width:100%;height:100%;object-fit:cover}
.feed .hk{position:absolute;left:0;right:0;bottom:0;padding:5cqh .8cqw .9cqh;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font:700 clamp(6px,.95cqw,12px)/1.15 var(--sans);letter-spacing:-.01em}
.feed .hk b{color:var(--red)}
.feed .qt{background:#9E0F18;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:1.2cqw}
.feed .qt p{margin:0;font:italic 400 clamp(9px,1.7cqw,22px)/1.1 var(--serif)}
.feed .qt small{margin-top:1cqh;font:600 clamp(5px,.75cqw,10px)/1.2 var(--sans);letter-spacing:.06em;opacity:.8}
.feed .dots{position:absolute;top:1cqh;right:.8cqw;display:flex;gap:3px}
.feed .dots b{width:4px;height:4px;border-radius:50%;background:#fff;opacity:.5}.feed .dots b:first-child{opacity:1}
.rp-top{position:absolute;left:1.2cqw;right:1.2cqw;top:2cqh;display:flex;align-items:center;gap:.6cqw;color:#fff;font:700 clamp(7px,1.05cqw,13px)/1 var(--sans)}
.rp-top img{width:2.4cqw;height:2.4cqw;min-width:12px;min-height:12px}
.cap1,.cap2{position:absolute;left:8%;right:8%;top:30%;text-align:center}
.cap1 .w,.cap2 .w{margin:0 0 .4cqh;font:800 clamp(9px,1.75cqw,22px)/1.12 var(--sans);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.55);opacity:0}
.cap1 em,.cap2 em{font-style:normal;background:var(--act);padding:0 .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.sc-soc.on .cap1 .w{animation:wdCapIn .35s var(--ease) forwards,wdCapOut .3s 4.2s forwards;animation-delay:var(--d),4.2s}
.sc-soc.on .cap2 .w{animation:wdCapIn .35s var(--ease) forwards;animation-delay:var(--d)}
@keyframes wdCapIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes wdCapOut{to{opacity:0}}
.ph-ui b i{font-style:normal;margin-left:.8cqw;border:1px solid rgba(255,255,255,.7);padding:.4cqh .6cqw;border-radius:3px;font-size:.85em}
.story .sbar{position:absolute;left:5%;right:5%;top:2%;display:flex;gap:3px}
.story .sbar i{flex:1;height:2px;background:rgba(255,255,255,.45);position:relative;overflow:hidden}
.story .sbar i:first-child::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.sc-soc.on .story .sbar i:first-child::after{animation:wdBar 6s linear 1s forwards}
@keyframes wdBar{to{transform:scaleX(1)}}
.st-h{position:absolute;left:8%;right:8%;top:14%;margin:0;color:#fff;font:400 clamp(10px,2cqw,26px)/1.05 var(--serif);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.st-h em{font-style:italic;color:#fff}
.story .link{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);background:#fff;color:#0A0A0B;font:700 clamp(6px,.95cqw,12px)/1 var(--sans);padding:1.3cqh 1.2cqw;border-radius:5px;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.story .link::before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:.45em;border:2px solid var(--act);border-radius:50%;vertical-align:-.05em}
.story .tap{position:absolute;left:58%;bottom:15%;width:3cqw;height:3cqw;border-radius:50%;background:rgba(255,255,255,.55);opacity:0}
.sc-soc.on .story .tap{animation:wdTap .9s 4.4s ease-out 2}
@keyframes wdTap{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}
.stats{position:absolute;right:3cqw;bottom:4cqh;background:#fff;border-radius:6px;padding:1.6cqh 1.4cqw;box-shadow:0 20px 40px -20px rgba(0,0,0,.45);display:grid;gap:.8cqh;min-width:15cqw;font-family:var(--sans)}
.stats small{font:600 clamp(5px,.8cqw,10px)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8a7f73}
.stats div{display:flex;align-items:baseline;gap:.5cqw}
.stats b{font:400 clamp(10px,1.9cqw,24px)/1 var(--serif)}
.stats .rd2{color:var(--act)}
.stats span{font:500 clamp(6px,.85cqw,11px)/1 var(--sans);color:#555}
.sc-soc .story{top:42%}
@container (orientation:portrait){
 .cap1 .w,.cap2 .w{font-size:3.6cqw}.rp-top{font-size:2.4cqw}.rp-top img{width:4.6cqw;height:4.6cqw}
 .st-h{font-size:4.2cqw}.story .link{font-size:2.2cqw;padding:1cqh 2cqw}
 .stats{right:auto;left:4cqw;bottom:3cqh;min-width:0;padding:1.2cqh 2.4cqw}.stats b{font-size:4.4cqw}.stats span{font-size:2.2cqw}.stats small{font-size:1.9cqw}
 .sc-soc .story{top:40%}
}

/* Section background follows the tab: black for every piece, warm beige for Social Media Content (layouts A and B) */
.wd[data-layout=A],.wd[data-layout=B]{background:var(--ink);color:#fff;transition:background-color .6s var(--ease),color .6s var(--ease)}
.wd[data-layout=A] .wd-head .kick,.wd[data-layout=B] .wd-head .kick{color:var(--red)}
.wd[data-layout=A] .wd-lead,.wd[data-layout=A] .wd-cap p{color:rgba(255,255,255,.72);transition:color .6s}
.wd[data-layout=A] .wd-tabs{border-top-color:var(--w14)}
.wd[data-layout=A] .wd-tabs button,.wd[data-layout=A] .wd-tabs button span{color:rgba(255,255,255,.55)}
.wd[data-layout=A] .wd-tabs button[aria-selected=true]{color:#fff}
.wd[data-layout=A] .wd-tabs button[aria-selected=true] span{color:var(--red)}
.wd[data-layout=A] .wd-stage,.wd[data-layout=B] .wd-stage{box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}
.wd.lite[data-layout=A],.wd.lite[data-layout=B]{background:var(--paper);color:var(--ink)}
.wd.lite[data-layout=A] .wd-lead,.wd.lite[data-layout=A] .wd-cap p,.wd.lite[data-layout=B] .wd-lead,.wd.lite[data-layout=B] .wd-cap p{color:var(--ink-64)}
.wd.lite[data-layout=A] .wd-tabs,.wd.lite[data-layout=B] .wd-tabs{border-top-color:var(--hair)}
.wd.lite[data-layout=A] .wd-tabs button,.wd.lite[data-layout=A] .wd-tabs button span,.wd.lite[data-layout=B] .wd-tabs button,.wd.lite[data-layout=B] .wd-tabs button span{color:var(--ink-64)}
.wd.lite[data-layout=A] .wd-tabs button[aria-selected=true],.wd.lite[data-layout=B] .wd-tabs button[aria-selected=true]{color:var(--ink)}
.wd.lite[data-layout=A] .wd-tabs button[aria-selected=true] span,.wd.lite[data-layout=B] .wd-tabs button[aria-selected=true] span{color:var(--red)}
.wd.lite .wd-stage{box-shadow:0 40px 80px -50px rgba(10,10,11,.45)!important}
.wd.lite[data-layout=B] .wd-count{color:var(--ink-64)}.wd.lite[data-layout=B] .wd-count b{color:var(--ink)}
.wd.lite[data-layout=B] .wd-nav{color:var(--ink)}

.stats .kk::after{content:counter(n) "k"}
@container (orientation:portrait){.stats{left:auto!important;right:3cqw!important;bottom:5cqh!important}}

/* 19:15 (Olia): reel = her face (no odd hand); hooks sit below the face */
.cap1,.cap2{top:57%}
.story::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(rgba(10,10,11,.62),transparent);pointer-events:none}
.story .sbar,.story .st-h,.story .link,.story .tap{z-index:2}

/* 16 Oct 19:30 (Olia) ---------------------------------------------------- */
/* tab row: seven equal columns, each label centred under its number */
@media (min-width:901px){
 .wd-tabs{display:grid;grid-template-columns:repeat(7,1fr);overflow:visible}
 .wd-tabs button{min-width:0;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;white-space:normal;gap:6px;padding:16px 8px 14px}
 .wd-tabs button::before{left:8px;right:8px}
}
/* brand book: the real logo, reversed versions, and how it shows up as an icon */
.bb-r{gap:0;justify-content:center}
.lv{display:grid;grid-template-columns:1fr 1fr .62fr;gap:1cqw;margin-bottom:3cqh}
.lv i{height:15cqh;display:grid;place-items:center;border-radius:2px}
.lv img{max-height:72%;max-width:78%;object-fit:contain}
.lv .l1{background:#F1E9DF}.lv .l2{background:#0A0A0B}.lv .l3{background:#9E0F18}
.lv .l3 img{max-height:62%}
.bb2{display:grid;grid-template-columns:1.25fr 1fr;gap:2cqw;margin-bottom:2.4cqh}
.bb2 .sw{margin-bottom:0}.bb2 .sw i{height:8cqh}
.bb2 .ty2{margin-bottom:0;gap:2cqw}.bb2 .ty2 p{font-size:clamp(16px,3.6cqw,50px)}
.ic{display:flex;align-items:center;gap:1.4cqw}
.btab{display:flex;align-items:center;gap:.7cqw;background:#ECE6DE;border-radius:7px 7px 0 0;padding:1.3cqh 1.2cqw;font:500 clamp(6px,.95cqw,12px)/1 var(--sans);color:#333;flex:1;min-width:0;box-shadow:inset 0 -2px 0 #fff}
.btab img{width:1.8cqw;height:1.8cqw;min-width:11px;min-height:11px}
.btab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.btab b{font-weight:400;color:#888}
.ic .app{width:6.4cqh;height:6.4cqh;border-radius:22%;background:#0A0A0B;display:grid;place-items:center;flex:none;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.ic .app img{width:70%}
.ic .avt{width:6.4cqh;height:6.4cqh;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 6px 14px -8px rgba(0,0,0,.4)}
.ic .avt img{width:92%}
@container (orientation:portrait){
 .lv i{height:9cqh}.bb2 .sw i{height:6cqh}.bb2 .ty2 p{font-size:7cqw}
 .btab{font-size:2.2cqw;padding:1cqh 2cqw}.btab img{width:3.6cqw;height:3.6cqw}
 .ic .app,.ic .avt{width:5.4cqh;height:5.4cqh}
}
/* website: a slim announcement bar says what Maison Verane is; breadcrumb on the product */
.br-ann{height:4cqh;background:#0A0A0B;color:#fff;display:grid;place-items:center;font:500 clamp(6px,.9cqw,11px)/1 var(--sans);letter-spacing:.06em}
.pp2{inset:18cqh 0 0 0}
.toast2{top:19cqh}.book2{top:18cqh}
.sc-web{--y1:70cqh;--y2:81cqh;--y3:83.5cqh}
.pp2-tx .crumb{display:block;margin-bottom:1.4cqh;letter-spacing:.04em;text-transform:none;font-weight:500;color:#9a8f83}
@container (orientation:portrait){
 .br-ann{font-size:2cqw}
 .sc-web{--y1:83cqh;--y2:92cqh;--y3:90cqh}
 .book2{top:42cqh}
 .pp2-tx .crumb{display:none}
}

/* 16 Oct 19:35 (Olia): headline one line across, sub-header under it across; the whole section fits one screen */
.wd-h{grid-column:1/-1;font-size:clamp(36px,4.6vw,72px);white-space:nowrap}
.wd-lead{grid-column:1/-1;align-self:start;font-size:clamp(17px,1.4vw,21px)}
@media (min-width:901px){
 .wd{padding-block:clamp(36px,4.5vh,64px)}
 .wd-head{margin-bottom:clamp(14px,2.2vh,28px);row-gap:clamp(6px,1.2vh,14px)}
 .wd-tabs{margin-bottom:clamp(12px,2vh,24px)}
 .wd-tabs button{padding-top:12px;padding-bottom:10px}
 .wd-stagewrap{display:flex;flex-direction:column;align-items:flex-end}
 .wd-stage{width:min(100%,calc((100svh - var(--wd-chrome,400px)) * 1.6))}
}
@media (max-width:900px){.wd-h{white-space:normal}}