:root{--ink:#231c15;--r:35,28,21;--b:#b88a4a;--acc:#b88a4a;--ac:184,138,74;--g:#f4f4f4;--mut:#625a52;--line:rgba(var(--r),.22);--serif:'Cormorant Garamond','Times New Roman',serif;--sans:'Jost',Arial,sans-serif;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px))}
body{margin:0;background:#fff;color:var(--ink);font:300 16px/1.6 var(--sans);letter-spacing:.03em;overflow-x:clip}
a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}h1,h2,h3,p{margin:0}
.w{padding:0 clamp(18px,3vw,48px)}
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
header::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:#fff;z-index:-1}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0}
.hl{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--ink);position:relative;padding:6px 0}
.hl::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--b);transition:width .35s}.hl:hover::after{width:100%}
.logo img{height:56px;width:auto;margin:0 auto}
.r{display:flex;justify-content:flex-end;align-items:center;gap:24px}
.btn{display:inline-block;border:1px solid var(--b);padding:12px 26px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:400;transition:.35s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}.btn.wh{border-color:#fff;color:#fff}.btn.wh:hover{background:#fff;color:var(--ink)}
header .btn.wh{background:var(--b);border-color:var(--b);color:var(--ink)}header .btn.wh:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dk{background:var(--b);border-color:var(--b);color:var(--ink)}.btn.dk:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.bg{display:none;background:transparent;border:1px solid var(--ink);width:46px;height:46px;position:relative;cursor:pointer}
.bg i{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:.3s}.bg i:nth-child(1){top:15px}.bg i:nth-child(2){top:22px}.bg i:nth-child(3){top:29px}.bg.o i:nth-child(1){top:22px;transform:rotate(45deg)}.bg.o i:nth-child(2){opacity:0}.bg.o i:nth-child(3){top:22px;transform:rotate(-45deg)}
.dr{position:fixed;inset:0;background:var(--ink);z-index:40;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;transform:translateY(-100%);transition:transform .6s cubic-bezier(.7,0,.2,1)}.dr.o{transform:none}.dr a{font:400 34px var(--serif);color:#fff}

/* HERO — scroll scrubbed video, text bottom-left */
.scrub{height:620vh;position:relative}.stick{position:sticky;top:0;height:100svh;overflow:hidden;background:#e6e9ef}.vb{display:none}
.stick video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cap{position:absolute;left:clamp(18px,3vw,48px);right:auto;top:auto;bottom:clamp(34px,8vh,84px);max-width:min(560px,86vw);z-index:3;color:var(--ink);text-shadow:0 0 22px rgba(255,255,255,.9),0 0 8px rgba(255,255,255,.7);opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;pointer-events:none}.cap.on{opacity:1;transform:none}
.eb{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;margin-bottom:16px;opacity:.95}
.cap h1,.cap h2{font:400 clamp(32px,4.2vw,62px)/1.04 var(--serif);max-width:15ch}.cap em{font-style:italic}
.cap p.s{max-width:46ch;margin-top:18px;font-size:16px;color:var(--ink);font-weight:400}
.prog{position:absolute;right:clamp(14px,2.5vw,36px);top:50%;transform:translateY(-50%);width:2px;height:130px;background:rgba(var(--r),.25);z-index:4}.prog i{display:block;width:100%;height:0;background:var(--b)}

.st{padding:clamp(100px,16vw,224px) 0}.st p{font:300 clamp(30px,4.2vw,64px)/1.18 var(--serif);max-width:22em}.st em{font-style:italic}.st small{display:block;margin-top:34px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut)}
.ul{border-color:var(--b);font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;border-bottom:1px solid currentColor;padding-bottom:4px;display:inline-block}
.cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Living / Bedroom tiles — image clean, text below */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{display:block;color:var(--ink)}
.tile .im{position:relative;height:min(84svh,860px);overflow:hidden;background:var(--g)}
.tile .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .tx{padding:26px clamp(4px,1vw,12px) 10px}.tile h3{font:400 clamp(34px,4vw,56px) var(--serif)}.tile p{margin:8px 0 18px;max-width:46ch;color:var(--mut)}

/* Collections */
.col{padding:clamp(90px,10vw,148px) 0 50px}
.hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px}.hd h2{font:400 clamp(34px,4.4vw,64px) var(--serif)}
.lay{display:grid;grid-template-columns:34fr 66fr;gap:8px}.lay.rt{grid-template-columns:66fr 34fr}.lay.rt .pr{order:2}
.pr{position:relative;min-height:560px;overflow:hidden;background:var(--g)}.pr .ss img{transition:opacity 1.2s}
.pr .ct{position:absolute;left:18px;bottom:18px;z-index:3}
.chip{display:inline-block;background:var(--b);color:var(--ink);padding:13px 22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;transition:.35s}.chip:hover{background:var(--ink);color:#fff}
.ss{position:absolute;inset:0}.ss>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s}.ss>.a{opacity:1}
.gr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cd .m{position:relative;aspect-ratio:6/7;overflow:hidden;background:var(--g)}.cd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s,transform 1.2s}.cd img+img{opacity:0}.cd:hover img+img{opacity:1}.cd:hover img{transform:scale(1.04)}
.cd b{display:block;font:400 22px var(--serif);margin-top:12px}.cd span{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}.cd span.sn{color:var(--ink);margin-top:4px;font-weight:500}

/* Editorial split (image | text) */
.ed{display:grid;grid-template-columns:1.25fr 1fr;min-height:min(92svh,920px);background:#fff;color:var(--ink)}
.ed>.ss{position:relative;inset:auto;min-height:560px;overflow:hidden}
.ed.rev>.ss{order:2}
.ed .fr{display:flex;flex-direction:column;justify-content:center;padding:clamp(30px,5vw,84px)}
.bx{max-width:540px}.bx p{margin-bottom:24px;color:var(--mut)}.bx .eb{color:var(--mut)}
.ed h2{font:400 clamp(34px,4vw,60px)/1.05 var(--serif);margin-bottom:18px}.ed em{font-style:italic}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin-top:40px;max-width:640px}
.step{border-top:1px solid var(--line);padding-top:14px;cursor:pointer;opacity:.6;transition:.4s}.step.o{opacity:1;border-top-color:var(--b)}
.step b{font:400 22px var(--serif);display:block}.step b span{font-size:13px;letter-spacing:.2em;margin-right:12px;font-family:var(--sans);color:var(--mut)}
.step p{max-height:0;overflow:hidden;transition:max-height .5s;font-size:14px;color:var(--mut)}.step.o p{max-height:90px;margin-top:6px}

/* Wide image band + closing statement */
.ban{position:relative;height:min(74svh,760px);background:var(--g);overflow:hidden}
.fin{text-align:center;padding:clamp(60px,8vw,116px) 20px}.fin h2{font:400 clamp(34px,4.4vw,64px)/1.05 var(--serif);margin:0 auto 28px;max-width:18ch}.fin img{height:62px;width:auto;margin:0 auto}

.sp>.spc{display:grid;grid-template-columns:1fr 1fr;min-height:100svh}.sp .im{position:relative;min-height:70svh;background:var(--g);overflow:hidden}.sp .tx{background:var(--g);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px 30px}
.sp .tx p{max-width:44ch;margin:18px 0 24px;color:var(--mut)}.eyb{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:400;margin-bottom:14px}.sp h2{font:400 clamp(34px,4vw,60px)/1.05 var(--serif);max-width:14ch}

/* Spin video + product viewer */
.spi{display:grid;grid-template-columns:1.05fr 1fr;min-height:100svh;background:#fff}
.vid{position:relative;background:#d9d9d9;overflow:hidden;cursor:grab;touch-action:pan-y;min-height:70svh}.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drag{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;color:var(--ink);font-size:12px;letter-spacing:.3em;text-transform:uppercase;pointer-events:none;white-space:nowrap;transition:opacity .4s;background:#fff;padding:9px 16px}
.pv{padding:clamp(76px,7vw,104px) clamp(20px,4vw,64px) clamp(30px,4vw,60px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.pv h2{font:400 clamp(30px,3.4vw,50px)/1.05 var(--serif)}
.big{position:relative;width:100%;height:min(46svh,500px);background:var(--g);overflow:hidden}
.big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}.big img.o{opacity:1}
.sw{display:flex;gap:10px;flex-wrap:wrap}
.sw button{width:62px;height:62px;border:2px solid transparent;padding:0;cursor:pointer;background-size:cover;background-position:center;background-color:var(--g);opacity:.7;transition:.3s}.sw button:hover{opacity:1}.sw button.o{border-color:var(--b);opacity:1}
.pn{font:400 clamp(26px,2.6vw,36px) var(--serif)}.pd{color:var(--mut);max-width:48ch;margin-top:-8px}
.pb{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.sts{display:flex;gap:30px}.sts b{display:block;font:400 clamp(26px,2.4vw,36px)/1 var(--serif)}.sts span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

.wd{padding:120px 0}.wd .hh{text-align:center;max-width:640px;margin:0 auto 56px}.wd h2{font:400 clamp(34px,4.4vw,64px) var(--serif);margin-bottom:12px}.wd .hh p{color:var(--mut)}
.wg{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.wg .m{aspect-ratio:2/3;overflow:hidden;position:relative;background:var(--g)}.wg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wg h3{font:400 30px var(--serif);margin:16px 0 6px}.wg p{color:var(--mut);margin-bottom:12px}

/* Our promise — image band, text on solid brand colour below */
.her{background:var(--ink);color:#fff}
.her .im{position:relative;height:min(70svh,700px);overflow:hidden}
.her .tx{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;padding:clamp(40px,6vw,84px) clamp(18px,3vw,48px)}
.her h2{font:400 clamp(36px,4.6vw,70px)/1.04 var(--serif);max-width:14ch;margin:12px 0 22px}.her .tx p.t{max-width:46ch;margin-bottom:34px}
.tl{display:flex;align-items:flex-start;gap:0}.ms{display:flex;flex-direction:column;gap:8px;min-width:110px}.ms i{width:11px;height:11px;border-radius:50%;background:var(--acc)}.ms b{font:400 26px var(--serif)}.ms span{font-size:12px;letter-spacing:.14em;text-transform:uppercase}.cn{width:70px;height:1px;background:rgba(255,255,255,.5);margin-top:5px}
.ig{padding:100px 0}.ig .hd{margin-bottom:40px}.mq{overflow:hidden}.tk{display:flex;gap:8px;width:max-content;animation:mq 40s linear infinite}.tk img{width:min(24vw,340px);aspect-ratio:4/5;object-fit:cover}@keyframes mq{to{transform:translateX(-50%)}}
.lg{padding:100px 0;text-align:center;background:var(--g)}.lg h2{font:400 clamp(30px,3.6vw,52px) var(--serif);margin-bottom:10px}.lg p{color:var(--mut)}.lr{display:flex;justify-content:center;gap:clamp(30px,8vw,120px);margin-top:44px;flex-wrap:wrap;font:400 clamp(26px,3vw,42px) var(--serif);letter-spacing:.12em;text-transform:uppercase}
footer{padding:90px 0 36px;background:#fff;color:var(--ink);border-top:1px solid var(--line)}footer .fm{border-color:var(--ink)}footer .fm input{color:var(--ink)}footer .fm input::placeholder{color:var(--mut)}footer .fm button{color:var(--ink)}footer .lw{border-color:var(--line)}.ft{display:grid;grid-template-columns:1.2fr 2fr;gap:60px}.ft h2{font:400 clamp(28px,3vw,44px)/1.1 var(--serif);margin-bottom:24px;max-width:14ch}
.fm{display:flex;border-bottom:1px solid var(--ink);max-width:460px}.fm input{flex:1;border:0;background:none;padding:14px 0;font:300 15px var(--sans);outline:0}.fm button{border:0;background:none;font:400 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.fc{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}.fc h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;margin:0 0 14px}.fc a,.fc p{display:block;font-size:15px;margin-bottom:6px}
.lw{margin-top:70px;padding-top:24px;border-top:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;letter-spacing:.08em}.lw img{height:46px;width:auto}
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;background:var(--b);color:var(--ink);padding:14px 22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 8px 24px rgba(var(--r),.25)}

/* Shop by category — label below image */
.cg{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.cg a{display:block;color:var(--ink)}
.cg .m{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--g)}.cg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}.cg a:hover img{transform:scale(1.06)}
.cg b{display:block;margin-top:12px;font:400 clamp(20px,1.7vw,24px)/1.15 var(--serif)}
.sh-page{padding:calc(76px + 48px) clamp(18px,3vw,48px) 80px;min-height:60vh}.admin-bar header{top:32px}

@media(max-width:989px){.cg{grid-template-columns:1fr 1fr}nav{display:none}.bg{display:block}.r .hide{display:none}.cats,.spc,.lay,.lay.rt,.ft,.ed,.spi,.her .tx{grid-template-columns:1fr}.lay.rt .pr{order:0}.ed.rev>.ss{order:0}.ed>.ss{min-height:420px}.pr{min-height:420px}.gr{grid-template-columns:1fr 1fr}.wg{grid-template-columns:1fr}.fc{grid-template-columns:1fr 1fr}.logo img{height:44px}.vb{display:none}.stick video.vm{object-fit:cover;object-position:50% 50%}.cap{bottom:calc(88px + env(safe-area-inset-bottom,0px));left:18px;right:18px;max-width:none;padding:0}.cap h1,.cap h2{font-size:30px;max-width:13ch}.cap p.s{font-size:14px;margin-top:10px}.tile .im{height:70svh}.vid{min-height:60svh}.big{height:62vw}.steps{grid-template-columns:1fr 1fr}.ban{height:50svh}.her .im{height:50svh}}
@media(max-width:560px){.steps{grid-template-columns:1fr}.gr{grid-template-columns:1fr 1fr}.sw button{width:54px;height:54px}}

html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}

/* ---- Section choreography (same system as the reference site) ----
   Sections need solid backgrounds because they slide over one another. */
.col,.wm{background:#fff}
.cw{position:relative;z-index:3}
.cats{background:transparent}
/* desktop (>=1025px, flagged by .sh-d from header.php): the statement slides over the held hero,
   then the categories zoom in over the statement. */
.sh-d .scrub{height:720vh}
.sh-d .st{position:relative;z-index:2;background:#fff;margin-top:-100svh;min-height:100svh;display:flex;align-items:center}
.sh-d .st .w{width:100%}
.sh-d .ed,.sh-d .wm{position:relative;overflow:hidden}
.sh-d .spc{position:relative;z-index:1}
.sh-d .spi{position:relative}
/* split-text hero sweep */
.sp-w{display:inline-block}
.tl .cn{transform-origin:0 50%}
.sh-d .cats:not(.armed) .tile{pointer-events:none}

/* ================= v2.1 — video + all-device responsive polish ================= */
.stick{background:#e6e9ef url(../images/hero-poster.jpg) center/cover no-repeat}
.stick video{background:transparent}
.vid{background:#d3d4d8}
.vid video{object-position:50% 50%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
video{-webkit-tap-highlight-color:transparent}
img{height:auto}
.cov,.tile .im img,.cd img,.cg img,.wg img,.big img,.ss>*,.tk img,.sp .im img,.her .im img{height:100%}
.tk img{height:auto}

/* tablet */
@media(max-width:989px){
  .spi{min-height:0}
  /* whole mattress stays in frame on narrow screens */
  .vid{min-height:0;aspect-ratio:16/9;max-height:none}
  .pv{padding:34px 20px 48px}
  .big{height:68vw;max-height:520px}
  .sp>.spc{min-height:0}.sp .im{min-height:56svh}.sp .tx{padding:56px 22px}
  .col{padding:72px 0 36px}.wd{padding:80px 0}.ig,.lg{padding:70px 0}
  .st{padding:84px 0}
  .tk img{width:min(46vw,300px)}
  .hd{flex-wrap:wrap;gap:10px 20px}
  .wg .m{aspect-ratio:4/5}
  .her .tx{gap:28px}
  footer{padding:64px 0 30px}.ft{gap:36px}
  .lw{margin-top:44px}
}
/* phone */
@media(max-width:560px){
  body{font-size:15px}
  .bar{height:66px}.logo img{height:38px}.r{gap:14px}
  header .hl{font-size:11px;letter-spacing:.16em}
  .bg{width:42px;height:42px}.bg i{left:10px;right:10px}.bg i:nth-child(1){top:13px}.bg i:nth-child(2){top:20px}.bg i:nth-child(3){top:27px}.bg.o i:nth-child(1),.bg.o i:nth-child(3){top:20px}
  .dr a{font-size:30px}
  .vid{aspect-ratio:16/9}
  .drag{bottom:14px;font-size:10px;letter-spacing:.2em;padding:8px 12px}
  .cap h1,.cap h2{font-size:28px}
  .gr{grid-template-columns:1fr 1fr;gap:6px}
  .cd b{font-size:18px}.cd span{font-size:10px;letter-spacing:.1em}
  .cg{gap:6px}.cg b{font-size:19px}
  .sts{gap:18px;flex-wrap:wrap}.pb{gap:16px}
  .sw button{width:50px;height:50px}
  .tl{flex-wrap:wrap;row-gap:18px}.ms{min-width:92px}.cn{width:34px}
  .lr{gap:18px 30px}
  .fc{grid-template-columns:1fr 1fr;gap:26px 18px}
  .lw{flex-direction:column;align-items:flex-start}
  .wa{right:12px;padding:12px 16px;font-size:11px}
  .btn{padding:12px 20px}
  .tile .im{height:62svh}
  .pr{min-height:380px}
  .tk img{width:62vw}
}
@media(max-width:360px){.cap h1,.cap h2{font-size:25px}.r .hl{font-size:10px}.gr,.cg{gap:4px}}
/* landscape phones: keep hero text readable */
@media(max-height:480px) and (orientation:landscape){.cap{bottom:20px}.cap h1,.cap h2{font-size:24px}.cap p.s{display:none}.tile .im{height:92svh}}
/* touch devices have no hover — show the second card photo is skipped, keep taps instant */
@media(hover:none){.cd:hover img{transform:none}.cd:hover img+img{opacity:0}.cg a:hover img{transform:none}}

/* stop scaled / animated blocks from widening the page on phones (caused the zoomed-out look) */
html{overflow-x:clip;max-width:100%}
.wm,.ed,.her,.sp,.spin,.st,.cw,.wd,.lg,.ig{overflow-x:clip}
.wm{overflow:hidden}

/* mattress video: full frame, never cropped or zoomed (video is 16:9, so the box is 16:9 too) */
.vid{aspect-ratio:16/9;min-height:0;align-self:center;width:100%}
.vid video{object-fit:contain;image-rendering:auto}
.spi{grid-template-columns:1.5fr 1fr;align-items:center}
@media(max-width:989px){.spi{grid-template-columns:1fr;align-items:stretch}.vid{align-self:stretch}}

/* ===== WhatsApp: round green icon button (no text) ===== */
.wa{display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border-radius:50%;background:#25d366;color:#fff;font-size:0;letter-spacing:0;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .25s,box-shadow .25s}
.wa:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(0,0,0,.34)}
.wa svg{display:block;width:30px;height:30px}
@media(max-width:560px){.wa{width:52px;height:52px;right:14px;padding:0}.wa svg{width:28px;height:28px}}
/* keep footer logo / legal line clear of the icon */
footer .lw{padding-right:84px}
@media(max-width:560px){footer .lw{padding-right:0;padding-bottom:70px}}

/* ===== Mattress video (portrait 704x1280): shown whole, never cropped or zoomed ===== */
.spi{grid-template-columns:1fr 1fr;align-items:stretch;min-height:100svh}
.vid{aspect-ratio:auto;align-self:stretch;width:100%;height:100svh;min-height:0;background:#e6e6e6}
.vid video{top:76px;height:calc(100% - 76px);object-fit:contain;background:#e6e6e6}
@media(min-width:600px){.vid video{-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}}
@media(max-width:989px){
  .spi{grid-template-columns:1fr;min-height:0}
  .vid{height:min(86svh,177vw);aspect-ratio:auto}
  .vid video{top:0;height:100%}
}

/* ===== Mattress video v3: exactly as the file is (704x1280), no coloured frame, no mask, no crop ===== */
.vid{background:#fff;display:flex;justify-content:center;align-items:center;height:auto;min-height:0;aspect-ratio:auto;align-self:center;overflow:hidden}
.vid video{position:static;inset:auto;display:block;background:none;object-fit:fill;-webkit-mask-image:none;mask-image:none;
  aspect-ratio:704/1280;height:calc(100svh - 96px);width:auto;max-width:100%;margin-top:76px}
@media(max-width:989px){
  .spi{grid-template-columns:1fr}
  .vid{align-self:stretch;margin-top:0}
  .vid video{margin-top:0;height:auto;width:min(100%,calc(86svh * .55));max-width:100%}
}
@media(max-width:560px){.vid video{width:100%}}