:root{
  --accent:#8a4b2e;
  --ink:#1d1814;
  --paper:#f5f1ea;
  --grey:#6e6258;
  --line:#d9cfc0;
  --dark:#2a211b;      
  --light:#ebe4d8;     
  --wood:#4a2a1c;
  --pad:27px;
  --maxw:1226px;
  --hero:46px;
  --display:34px;
  --h2:32px;
  --h3:30px;
  --body:17px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 var(--body)/1.45 "Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0;padding:0}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.wrap{width:min(var(--maxw), 100% - var(--pad)*2); margin-inline:auto}

.promo{
  background:var(--dark); color:#fff;
  min-height:52px; display:flex; align-items:center; gap:14px;
  padding:10px 24px;
}
.promo.gone{display:none}
.promo-x{color:#fff; display:flex; opacity:.92; flex:0 0 auto}
.promo-x:hover{opacity:1}
.promo-t{flex:1; font-size:14px; text-align:center; line-height:1.5}
.promo-a{flex:0 0 auto; font-size:14px; text-decoration:underline; text-underline-offset:3px}
.promo-a:hover{opacity:.75}

.hd{
  height:78px; display:flex; align-items:center; gap:16px;
  padding-inline:28px; background:var(--paper); position:relative;
}
.mark{font-weight:700; font-size:17px; letter-spacing:.24em}
.nav{display:none; flex:1; justify-content:center; gap:40px; font-size:17px}
.nav a{padding:0 2px; position:relative; height:100%; display:flex; align-items:center}
.nav a::after{content:""; position:absolute; left:-9px; right:-9px; bottom:-27px; height:4px; background:var(--accent); opacity:0}
.nav a:hover{color:var(--accent)}
.nav a:hover::after{opacity:1}
.hd-ic{margin-left:auto; display:flex; align-items:center; gap:18px}
.hd-ic a{display:flex; opacity:.92}
.hd-ic a:hover{opacity:.55}
.burger{display:flex}
.drawer{background:var(--paper); border-top:1px solid var(--line); padding:8px 28px 22px; display:flex; flex-direction:column}
.drawer a{padding:13px 0; font-size:19px; border-bottom:1px solid #eee}
.drawer a:hover{color:var(--accent)}

.btn{
  display:inline-flex; align-items:center; gap:9px;
  border-radius:999px; font-size:16px; font-weight:500; line-height:1;
  padding:14px 22px; border:1px solid transparent; white-space:nowrap;
  transition:background-color .18s ease, color .18s ease;
}
.btn-w{background:#fbf8f3; color:var(--ink); border-color:rgba(29,24,20,.85)}
.btn-w:hover{background:#e6d9c6}
.btn-o{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-o:hover{background:#e6d9c6}
.btn-d{background:transparent; color:#fff; border-color:#fff}
.btn-d:hover{background:#f5f1ea; color:var(--ink)}
.btn-s{background:#f5f1ea; color:var(--ink); padding:18px 40px}
.btn-s:hover{background:#e6d9c6}

.hero{position:relative; aspect-ratio:4/5; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:#2a211b}
.hero-v{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-in{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:0 22px; text-align:center}
.hero-in h1{color:#fff; font-size:var(--hero); font-weight:500; line-height:1.14; letter-spacing:-.012em}
.hero-foot{position:sticky; bottom:130px; align-self:flex-end; padding:0 24px 22px; z-index:2}

.vbtn{
  width:29px; height:29px; border-radius:50%; border:1.4px solid rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center; position:relative; opacity:.95;
}
.vbtn::before,.vbtn::after{content:""; position:absolute; width:2px; height:11px; background:#fff}
.vbtn::before{transform:translateX(-3px)} .vbtn::after{transform:translateX(3px)}
.vbtn.paused::before{width:0;height:0;background:none;border-left:8px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;transform:translateX(1px)}
.vbtn.paused::after{display:none}
.vbtn:hover{opacity:1; background:rgba(255,255,255,.16)}
.vbtn.on-light{border-color:rgba(80,80,80,.6)}
.vbtn.on-light::before,.vbtn.on-light::after{background:#6a6a6a}
.vbtn.on-light.paused::before{border-left-color:#6a6a6a;background:none}

.s27{padding:38px 0 0}
.s27-card{position:relative; border-radius:22px; overflow:hidden; background:var(--wood)}
.s27-card>img{width:100%; height:auto; display:block}
.s27-t{padding:30px 26px 34px; color:#fff}
.s27-t h2{font-size:var(--h2); font-weight:500; line-height:1.12; letter-spacing:-.01em}
.s27-t p{margin:16px 0 0; font-size:var(--body); line-height:1.42; max-width:34em}
.s27-t .btn{margin-top:24px}

.sound{padding:58px 0 0}
.display{
  font-size:var(--display); font-weight:500; line-height:1.14; letter-spacing:-.014em;
  text-align:center; width:min(var(--maxw),100% - var(--pad)*2); margin:0 auto 42px;
}
.clear-t h3, .tuned-t h3, .balanced-t h3,
.breeze-t h3, .stream-t h3, .radio-t h3, .control-t h3, .sets-mix h3{
  font-size:var(--h3); font-weight:500; line-height:1.12; letter-spacing:-.012em;
}
.clear-t p, .tuned-t p, .balanced-t p, .breeze-t p, .stream-t p, .radio-t p, .control-t p, .sets-mix p{
  margin-top:16px; font-size:var(--body); line-height:1.42;
}
.stat{
  margin-top:26px; display:inline-flex; align-items:baseline; gap:12px;
  border:1px solid var(--line); border-radius:11px; padding:16px 20px;
}
.stat strong{font-size:29px; font-weight:600; letter-spacing:-.012em}
.stat span{font-size:15px}

.explode{
  --k:.40; position:relative; margin:22px auto 0;
  width:calc(845px * var(--k)); height:calc(700px * var(--k));
}
.exp{
  position:absolute; inset:0; opacity:0;
  background-image:var(--src); background-repeat:no-repeat;
  background-size:100% 100%;
  background-position:0 0;
  mix-blend-mode:multiply;
}
.exp:first-child{opacity:1}

.tuned{margin-top:54px; position:relative}
.tuned-img{width:100%; height:auto}
.tuned-t{margin-top:26px}
.quote{
  margin-top:26px; background:#fbf8f3; border:1px solid #e3d9ca; border-radius:12px;
  padding:20px 22px 22px; box-shadow:0 2px 14px rgba(0,0,0,.05);
}
.quote blockquote{font-size:var(--body); line-height:1.4}
.quote figcaption{margin-top:7px; display:flex; flex-direction:column; gap:3px}
.quote b{font-weight:600; font-size:16px}
.quote span{font-size:16px; line-height:1.36}

.balanced{margin-top:58px}
.balanced-v{position:relative; margin-top:26px}
.balanced-v video{width:100%; height:auto; background:#e6ddd0}
.balanced-v .vbtn{position:absolute; right:16px; bottom:16px}

.play{padding:72px 0 0; overflow:hidden}
.play-head{
  width:min(var(--maxw),100% - var(--pad)*2); margin:0 auto 22px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
}
.play-head h2{font-size:var(--h2); font-weight:500; letter-spacing:-.012em; line-height:1.12}
.arrows{display:none; gap:22px; color:#9a9a9a}
.arw{display:flex; padding:6px 2px}
.arw:hover{color:var(--ink)}
.rail{
  display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth;
  padding-inline:var(--pad); scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.rail::-webkit-scrollbar{display:none}
.pcard{flex:0 0 82vw; scroll-snap-align:start}
.pcard img{width:100%; aspect-ratio:3/2; object-fit:cover}
.pcard h3{margin-top:18px; font-size:19px; font-weight:500; line-height:1.3}
.shop{margin-top:9px; display:inline-flex; align-items:center; gap:9px; font-size:17px}
.shop span{transition:transform .2s ease; display:inline-block}
.shop:hover span{transform:translateX(4px)}
.dots{display:none; justify-content:center; gap:10px; margin-top:30px}
.dots i{width:6px; height:6px; border-radius:50%; background:#cbbfae; display:block}
.dots i.on{background:var(--ink)}

.sets{padding:78px 0 0}
.sets-top h2{font-size:var(--h2); font-weight:500; line-height:1.12; letter-spacing:-.012em}
.sets-img{width:100%; height:auto; margin-top:6px}
.sets-mix{margin-top:8px}
.sets-btn{margin-top:26px; order:3}
.sets-cards{margin-top:52px; display:grid; gap:44px}
.sets-cards img{width:100%; aspect-ratio:1/1; object-fit:cover}
.sets-cards figcaption{margin-top:16px; font-size:var(--body); line-height:1.42}

.whole{position:relative; aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden; background:#111}
.whole video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.whole h2{
  position:relative; color:#fff; text-align:center; font-size:var(--display);
  font-weight:500; line-height:1.14; letter-spacing:-.014em; padding:0 22px;
}
.whole .vbtn{position:absolute; right:24px; bottom:20px}

.dark{background:#17120e; color:#fff; padding:64px 0 78px}
.breeze-i{position:relative; margin-top:34px}
.b-room{width:100%; height:auto}
.b-phone{position:absolute; right:-4%; bottom:-16%; width:36%; height:auto}
.breeze-t .btn{margin-top:26px}

.stream{position:relative; margin-top:120px}
.stream-bg{width:100%; height:auto; object-fit:cover}
.stream-in{position:absolute; inset:0; display:flex; align-items:center}
.stream-t{max-width:460px}
.stream-t .btn{margin-top:24px}
.services{width:100%; height:auto; margin-top:-38px; position:relative}

.radio{position:relative; margin-top:64px; overflow:hidden}
.radio-cols{display:flex; gap:40px; justify-content:center; height:520px; overflow:hidden}
.rcol{flex:0 0 auto; will-change:transform; transform:translateY(-60px)}
.rcol img{width:110px; height:640px; object-fit:cover; max-width:none}
.rcol.c-a img{width:38px}
.radio::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(23,18,14,.9) 0%,rgba(23,18,14,.64) 44%,rgba(23,18,14,.5) 100%)}
.radio-t{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:2}
.radio-t p{max-width:430px}
.radio-t .btn{margin-top:24px}

.control{margin-top:70px}
.control-i{position:relative; padding-bottom:16px}
.control-i .c1{width:62%; height:auto}
.control-i .c2{width:80%; height:auto; margin-top:-22%; margin-left:20%}
.control-i .c3{width:58%; height:auto; margin-top:-14%}
.pill{
  position:absolute; left:5%; top:16%; background:#fff; color:#000; border-radius:999px;
  padding:11px 17px; font-size:14px; white-space:nowrap; color:var(--ink); background:#f5f1ea;
}
.knob{position:absolute; left:62%; top:13%; width:44px; height:44px; border-radius:50%; background:#f5f1ea; color:var(--ink); display:grid; place-items:center}
.control-t{margin-top:34px}
.control-t .btn{margin-top:26px}

.sys{padding:74px 0 78px; text-align:center}
.sys h2{font-size:var(--display); font-weight:500; letter-spacing:-.014em; line-height:1.12; padding:0 var(--pad)}
.sys-cards{margin-top:44px; display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.scard{
  border:1px solid #ddd2c2; border-radius:14px; padding:22px 14px 20px; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:16px;
  aspect-ratio:1/1.05; transition:border-color .18s ease, box-shadow .18s ease;
}
.scard img{width:64%; height:auto; margin:auto 0}
.scard span{font-size:16px}
.scard:hover{border-color:#a8927a; box-shadow:0 3px 14px rgba(60,40,20,.08)}

.why{background:var(--light); padding:52px 0 60px; text-align:center}
.why>h2{font-size:26px; font-weight:500; letter-spacing:-.01em}
.why-grid{margin-top:34px; display:grid; gap:34px; text-align:left}
.why-grid .ico{margin-bottom:14px}
.why-grid h3{font-size:19px; font-weight:600}
.why-grid p{margin-top:9px; font-size:var(--body); line-height:1.42}
.why-grid a{text-decoration:underline; text-underline-offset:3px}

.ft{background:var(--dark); color:#e9e9e9; padding:62px 0 40px; font-size:16px}
.ft h2{color:#fff; font-size:var(--h2); font-weight:500; line-height:1.14; letter-spacing:-.012em}
.news p{margin-top:14px; line-height:1.42; color:#dcdcdc}
.news-f{margin-top:30px}
.news-f input{
  width:100%; background:none; border:0; border-bottom:1px solid #8d8d8d; color:#fff;
  font:400 17px/1.4 inherit; padding:8px 0 12px; outline:none;
}
.news-f input::placeholder{color:#b6b6b6; font-style:italic}
.news-f .btn{margin-top:26px}
.fine{margin-top:22px; font-size:14px; line-height:1.5; color:#cfcfcf}
.fine a{text-decoration:underline; text-underline-offset:3px}

.cols{margin-top:52px}
.col h4{font-size:16px; font-weight:600; color:#fff}
.col h4 span{display:block; padding:17px 0; position:relative; cursor:pointer}
.col h4 span::after{
  content:""; position:absolute; right:2px; top:50%; width:9px; height:9px;
  border-right:1.5px solid #c9c9c9; border-bottom:1.5px solid #c9c9c9;
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.col{border-bottom:1px solid #454545}
.col ul{display:none; padding-bottom:14px}
.col.open ul{display:block}
.col.open h4 span::after{transform:translateY(-20%) rotate(225deg)}
.col li a{display:block; padding:9px 0; color:#c9c9c9}
.col li a:hover{color:#fff}

.social{margin-top:36px; display:flex; gap:20px; color:#e9e9e9}
.social a:hover{opacity:.7}
.legal{margin-top:34px; border-top:1px solid #4a4a4a; padding-top:26px; display:flex; flex-direction:column; gap:20px; font-size:14px}
.cr{font-weight:600; color:#fff}
.legal-n{display:flex; flex-wrap:wrap; gap:10px 22px; color:#d6d6d6}
.legal-n a:hover{color:#fff}
.ctry{display:flex; align-items:center; gap:8px; color:#e9e9e9; font-size:14px}
.ctry .car{margin-left:4px}
.ctry:hover{color:#fff}

@media (min-width:600px){
  :root{--pad:33px; --hero:46px; --display:46px; --h2:44px; --h3:44px; --body:19px}
  .hd{height:100px; padding-inline:40px}
  .promo{padding-inline:38px}
  .drawer{padding-inline:40px}
  .s27{padding-top:56px}
  .s27-card{border-radius:26px}
  .s27-t{padding:34px 34px 40px}
  .pcard{flex:0 0 87vw}
  .sets-cards{grid-template-columns:repeat(3,1fr); gap:26px}
  .sys-cards{grid-template-columns:repeat(4,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr); gap:40px 34px}
  .cols{display:block}
  .radio-cols{height:620px; gap:60px}
  .rcol img{width:132px; height:740px}
  .rcol.c-a img{width:44px}
  .explode{--k:.60}
  .stream-t{max-width:520px}
  .control-i .c1{width:46%}
  .control-i .c2{width:62%; margin-left:30%; margin-top:-16%}
  .control-i .c3{width:44%; margin-top:-10%}
}

@media (min-width:1024px){
  :root{
    --pad:40px; --hero:104px; --display:101px; --h2:76px; --h3:67px; --body:21px;
  }
  .promo{padding-inline:55px}
  .hd{height:100px; padding-inline:53px; gap:0}
  .mark{font-size:19px}
  .nav{display:flex; gap:40px; font-size:16.5px}
  .burger,.drawer{display:none !important}
  .hd-ic{gap:24px}
  .btn{font-size:19px; padding:15px 50px}

  .hero{aspect-ratio:16/9}
  .hero-in{gap:34px}
  .hero-foot{padding:0 38px 38px}

  
  .s27{padding-top:112px}
  .s27-card{border-radius:28px}
  .s27-card>img{aspect-ratio:1226/375; object-fit:cover}
  .s27-t{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 0 0 56px}
  .s27-t h2{font-size:42px}
  .s27-t p{max-width:460px; margin-top:18px; font-size:18px; line-height:1.39}
  .s27-t .btn{margin-top:26px; align-self:flex-start}
  .brkn{display:none}

  .sound{padding-top:130px}
  .display{max-width:760px; margin-bottom:0}
  .stat{margin-top:30px; padding:19px 20px; border-radius:12px; gap:14px}
  .stat strong{font-size:38px}
  .stat span{font-size:17px}

  .clear{position:relative; margin-top:0}
  .clear-t{width:470px; padding-top:92px}
  .clear-t p{max-width:470px}
  .explode{
    --k:1; position:absolute; top:3px; margin:0;
    right:max(calc((100vw - min(var(--maxw), 100vw - var(--pad)*2))/-2), -107px);
  }
  .sound .wrap.clear{position:relative}

  .tuned{margin-top:330px; display:grid; grid-template-columns:532px 1fr; column-gap:108px; align-items:start}
  .tuned-img{width:532px; height:532px; object-fit:cover}
  .tuned-t{margin-top:186px}
  .tuned-t p{max-width:500px}
  .quote{
    position:absolute; left:480px; top:458px; width:532px; margin:0;
    padding:20px 26px 19px; border-radius:12px;
  }
  .quote blockquote{font-size:20px}
  .quote b,.quote span{font-size:17px}

  .balanced{margin-top:225px; display:grid; grid-template-columns:1fr 587px; column-gap:106px; align-items:center}
  .balanced-t p{max-width:520px}
  .balanced-t .btn{margin-top:32px}
  .balanced-v{margin-top:0}
  .balanced-v video{width:587px; height:391px; object-fit:cover}

  .play{padding-top:190px}
  .play-head{display:block; text-align:center; margin-bottom:0; position:relative}
  .play-head h2{font-size:66px}
  .arrows{display:flex; position:absolute; right:0; bottom:-56px}
  .rail{padding-inline:0; margin-left:calc((100vw - min(var(--maxw), 100vw - var(--pad)*2))/2); margin-top:87px; scroll-snap-type:none}
  .pcard{flex:0 0 456px}
  .pcard h3{margin-top:22px; font-size:21px}
  .dots{display:flex; margin-top:40px; gap:10px}

  .sets{padding-top:119px}
  .sets-top{position:absolute; z-index:2; padding-top:10px}
  .sets-top h2{max-width:700px}
  .sets .wrap{position:relative}
  .sets-img{margin-top:0}
  .sets-btn{margin-top:34px}
  .sets-mix{margin-top:6px; display:grid; grid-template-columns:1fr 480px; column-gap:106px; align-items:start}
  .sets-mix p{margin-top:0}
  .sets-cards{margin-top:114px; gap:40px}
  .sets-cards img{aspect-ratio:1/1}

  .whole{aspect-ratio:16/9; margin-top:107px}
  .whole h2{font-size:var(--display)}
  .whole .vbtn{right:38px; bottom:38px}
  .whole .brk{display:inline}

  .dark{padding:0 0 156px}
  .breeze{display:grid; grid-template-columns:1fr 611px; column-gap:0; align-items:center; padding-top:224px}
  .breeze-t p{max-width:440px}
  .breeze-i{margin-top:0}
  .b-room{width:611px; margin-left:auto}
  .b-phone{width:267px; right:-46px; bottom:-72px}

  .stream{margin-top:224px}
  .stream-in{align-items:center}
  .stream-t{margin-left:auto; max-width:470px}
  .services{margin-top:-208px}

  .radio{margin-top:0}
  .radio-cols{gap:80px; height:748px}
  .rcol{transform:translateY(-61px)}
  .rcol img{height:870px}
  .rcol.c-a img{width:44px}
  .radio-t h3{max-width:520px}

  .control{margin-top:81px; display:grid; grid-template-columns:640px 1fr; column-gap:106px; align-items:center}
  .control-i{height:600px}
  .control-i .c1{position:absolute; left:0; top:0; width:267px}
  .control-i .c2{position:absolute; left:240px; top:122px; width:427px; margin:0}
  .control-i .c3{position:absolute; left:0; top:388px; width:293px; margin:0}
  .pill{left:14px; top:56px; font-size:15px}
  .knob{left:236px; top:44px}
  .control-t{margin-top:0}
  .control-t p{max-width:470px}

  .sys{padding:132px 0 113px}
  .sys h2{font-size:var(--display)}
  .sys-cards{margin-top:104px; gap:56px}
  .scard{aspect-ratio:265/325; border-radius:16px; padding:0 0 32px; justify-content:flex-start}
  .scard img{width:100%; margin:0}
  .scard span{font-size:19px}

  .why{padding:87px 0 93px}
  .why>h2{font-size:41px}
  .why-grid p{font-size:18px}
  .why-grid{margin-top:50px; grid-template-columns:repeat(4,1fr); gap:38px}
  .why-grid h3{font-size:21px}

  .ft{padding:152px 0 58px; font-size:17px}
  .ft h2{font-size:44px}
  .news{display:grid; grid-template-columns:1fr 585px; column-gap:56px; align-items:start}
  .news-f{margin-top:6px; display:grid; grid-template-columns:1fr auto; column-gap:24px; align-items:start}
  .news-f input{padding-bottom:14px}
  .news-f .btn{margin-top:0}
  .fine{grid-column:1/2; margin-top:24px; max-width:560px}
  .cols{margin-top:110px; display:grid; grid-template-columns:repeat(6,1fr); gap:0 8px}
  .col{border:0}
  .col h4 span{padding:0; cursor:default}
  .col h4 span::after{display:none}
  .col ul{display:block !important; margin-top:16px; padding-bottom:0}
  .col li a{padding:7px 0}
  .social{margin-top:70px; justify-content:flex-end; gap:22px}
  .legal{margin-top:36px; flex-direction:row; align-items:center; gap:34px; padding-top:28px; font-size:15px}
  .legal-n{flex:1; gap:34px}
  .ctry{margin-left:auto}
}

@media (min-width:1440px){
  :root{--pad:107px}
  .hd{padding-inline:53px}
}

.drawer[hidden]{display:none !important}

.b-room{width:100%}
.stream-bg{width:100%}
.radio-cols.narrow{display:none}

@media (max-width:1023px){
  
  .s27 .wrap{width:min(var(--maxw), 100% - var(--pad))}
  .s27-card{background:transparent}
  .s27-t{position:absolute; left:0; right:0; bottom:0; padding:0 26px 38px}
  .radio-cols:not(.narrow){display:none}
  .radio-cols.narrow{display:flex; height:auto; gap:2%; align-items:flex-start; overflow:visible;
    width:min(var(--maxw), 100% - var(--pad)*2); margin-inline:auto}
  .radio-cols.narrow .rcol{transform:none !important}
  .radio-cols.narrow img{width:100%; height:auto}
  .radio-cols.narrow .n1{flex:0 0 26%}
  .radio-cols.narrow .n2{flex:0 0 43.5%}
  .radio-cols.narrow .n3{flex:0 0 26%}
  .radio{margin-top:90px}
  .radio-t{position:absolute; top:auto; bottom:7%; transform:none}
  .sets-cards{grid-template-columns:minmax(0,1fr) !important}
  .sys-cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  
  .sets-img{width:calc(100% + var(--pad)*2); max-width:none; margin-left:calc(var(--pad)*-1)}
  .stream-in{padding-inline:0}
  .services{margin-top:-11%}
}

@media (min-width:600px) and (max-width:1023px){
  :root{--pad:66px}
}

.brk{display:none}
@media (min-width:1024px){ .brk{display:inline} }

.promo{padding-inline:20px}
.s27-t{padding-inline:calc(var(--pad)/2)}
@media (max-width:1023px){
  .s27-t h2{font-size:52px; line-height:1.08}
  .s27-t p{margin-top:20px}
  .s27-t .btn{margin-top:28px}
}
@media (max-width:599px){
  :root{--hero:52px}
  .mark{font-size:18px}
}
@media (min-width:600px){ .promo{padding-inline:38px} }
@media (min-width:1024px){ .promo{padding-inline:55px} }

.s27-card .narrow{aspect-ratio:640/1170; object-fit:cover}
.s27-card .wide{aspect-ratio:1226/375; object-fit:cover}
.tuned-img{aspect-ratio:1/1; object-fit:cover}
.sets-img{aspect-ratio:2880/2222; object-fit:contain}
.b-room.narrow{aspect-ratio:1500/1412; object-fit:contain}
.b-room.wide{aspect-ratio:2560/1708; object-fit:contain}
.b-phone{aspect-ratio:960/1892; object-fit:contain}
.stream-bg.narrow{aspect-ratio:2200/2750; object-fit:cover}
.stream-bg.wide{aspect-ratio:4000/2250; object-fit:cover}
.services{aspect-ratio:4892/308; object-fit:contain}
.control-i .c1{aspect-ratio:2715/3394; object-fit:cover}
.control-i .c2{aspect-ratio:1/1; object-fit:cover}
.control-i .c3{aspect-ratio:3000/2775; object-fit:cover}
.scard img{aspect-ratio:1/1; object-fit:contain}
.radio-cols.narrow .n1 img{aspect-ratio:333/3020}
.radio-cols.narrow .n2 img{aspect-ratio:537/3020}
.radio-cols.narrow .n3 img{aspect-ratio:332/3020}
@media (min-width:1024px){
  .hero-foot{position:sticky; bottom:86px; padding:0 24px 38px}
  .btn{padding:15px 47px}
}

.services-row{position:absolute; left:0; right:0; bottom:6%}
.services{margin-top:0 !important}
.radio{background:#17120e}

.sys-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.sets-cards{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .sys-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sets-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .why-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cols{grid-template-columns:repeat(6,minmax(0,1fr))}
}

@media (max-width:1023px){ .rail{scroll-padding-left:20px} }

img.wide{display:none}
img.narrow{display:block}
@media (min-width:1024px){
  img.wide{display:block}
  img.narrow{display:none}
}
.s27-card img{width:100%; height:auto}

h1,h2,h3,.display,.stat strong,.quote blockquote{font-family:"Fraunces",Georgia,serif; font-weight:400; font-variation-settings:"opsz" 96}
.why-grid h3,.pcard h3{font-family:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif; font-weight:600}
.pcard h3{font-weight:500}
.stat strong{font-weight:500}
.sets-img,.scard img{mix-blend-mode:multiply}
.whole::after{content:""; position:absolute; inset:0; background:rgba(15,11,8,.32); pointer-events:none}
.whole h2{z-index:1}
.whole .vbtn{z-index:2}
.stream::after{content:""; position:absolute; inset:0; background:linear-gradient(270deg,rgba(15,11,8,.62) 0%,rgba(15,11,8,.3) 45%,rgba(15,11,8,0) 70%); pointer-events:none}
.stream-in,.services-row{z-index:1}
@media (max-width:1023px){ .stream::after{background:rgba(15,11,8,.5)} }