:root{--ink:#0d0d0d;--mut:#737373;--line:#e8e8e8;--soft:#f5f5f4;--acc:#00b36b;--pad:clamp(20px,5vw,60px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Heebo,system-ui,sans-serif;background:#fff;color:var(--ink);font-size:16.5px;line-height:1.85;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:66ch}
a{color:inherit}
img{max-width:100%}

/* header */
header{position:absolute;top:0;left:0;right:0;z-index:20}
header.solid{position:static;border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:78px;gap:18px}
.brand{font-weight:900;font-size:20px;letter-spacing:-.03em;text-decoration:none;color:var(--ink);white-space:nowrap;line-height:1}
.nav{display:flex;gap:24px;font-size:14px;color:#5d5d5d}
.nav a{text-decoration:none}
.nav a:hover{color:var(--ink)}
.tel{color:var(--ink);font-weight:700;text-decoration:none;white-space:nowrap}
@media(max-width:860px){.nav{display:none}}

/* hero */
.hero{position:relative;min-height:clamp(430px,78vh,700px);display:flex;align-items:flex-end;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,.18) 54%,rgba(255,255,255,.88) 86%,#fff 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(34px,6vw,66px);padding-top:120px}
.crumb{font-size:11px;letter-spacing:.26em;color:#5d5d5d;margin-bottom:18px}
.crumb a{color:var(--acc);text-decoration:none}
h1{font-size:clamp(38px,8vw,78px);line-height:1.04;font-weight:900;color:var(--ink);letter-spacing:-.025em}
h1 em{font-style:normal;color:var(--acc)}
.sub{margin-top:18px;max-width:58ch;color:#3a3a3a;font-size:clamp(16px,2vw,19px)}
/* the isometric model is a drawing, not a photograph: cropping it to a hero box cuts
   the rooms off and the title lands on top of the furniture. So it runs full width as
   its own band and the title sits on white underneath it, at every screen size. */
.hero.model{min-height:0;display:block;background:#fff}
.hero.model img{position:static;width:100%;height:auto;display:block}
.hero.model::after{display:none}
.hero.model .wrap{padding-top:clamp(26px,3.6vw,44px);padding-bottom:clamp(30px,5vw,58px)}
.hero.model .crumb{color:#6a6a6a}

/* article head */
.ahead{padding:clamp(40px,7vw,86px) 0 clamp(16px,3vw,30px)}
.ahead h1{font-size:clamp(32px,6vw,56px)}
.ahead .sub{font-size:clamp(16px,2vw,19px)}

/* sections */
section{padding:clamp(44px,7vw,84px) 0}
.alt{background:var(--soft)}
h2{font-size:clamp(25px,4vw,40px);font-weight:900;letter-spacing:-.02em;line-height:1.16;margin-bottom:20px}
h2 em{font-style:normal;color:var(--acc)}
h3{font-size:18.5px;font-weight:700;margin-bottom:7px}
p{max-width:66ch}
p+p{margin-top:15px}
.prose h2{font-size:clamp(23px,3.4vw,32px);margin-top:12px}
.prose h3{font-size:19.5px;margin-top:26px}
.prose ul{margin:14px 22px 0 0}
.prose li{margin-bottom:8px;max-width:64ch}

.grid{display:grid;gap:clamp(22px,3.5vw,38px);grid-template-columns:repeat(auto-fit,minmax(235px,1fr));margin-top:36px}
@media(min-width:900px){#uses .grid,.two{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:26px 24px}
.card p{color:#454545;font-size:15.5px;line-height:1.75}
.card.link{text-decoration:none;display:block;transition:border-color .15s}
.card.link:hover{border-color:var(--acc)}
.card .kick{font-size:11px;letter-spacing:.2em;color:var(--acc);margin-bottom:10px}

.vs{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:34px}
.vs div{padding:26px;border-radius:2px;background:#fff}
.vs .a{border:2px solid var(--acc)}
.vs .b{border:1px solid var(--line)}
.tag{font-size:11px;letter-spacing:.2em;margin-bottom:12px;color:var(--mut)}
.vs .a .tag{color:var(--acc)}
ul{margin:10px 22px 0 0;color:#454545;font-size:15.5px}
li{margin-bottom:7px}

figure{margin:clamp(30px,5vw,56px) 0}
figure img{display:block;width:100%;height:auto;border-radius:2px}
/* a 1:1 photo at full width is taller than the screen — cap it and centre it */
figure.sq img{max-width:620px;margin-inline:auto}
figure.sq figcaption{max-width:620px;margin-inline:auto}
figcaption{font-size:13px;color:var(--mut);margin-top:10px}

table{width:100%;border-collapse:collapse;margin-top:18px;font-size:15.5px}
th,td{text-align:right;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{width:36%;font-weight:700;color:#2b2b2b}
td{color:#4a4a4a}

/* the room in numbers — the same block as the greenroom home page, in white */
.spec-big{display:grid;gap:14px;grid-template-columns:1.6fr 1fr 1fr;margin-top:34px}
.sb{background:#fff;border:1px solid var(--line);border-radius:2px;padding:28px 26px}
.sb-n{font-size:clamp(38px,4.6vw,62px);font-weight:900;line-height:1;letter-spacing:-.035em}
.sb-n span{font-size:.36em;font-weight:700;color:var(--acc);margin-right:9px;letter-spacing:-.01em}
.sb-l{margin-top:13px;font-size:14px;color:var(--mut);line-height:1.6}
.sb-wide{display:grid;grid-template-columns:auto auto;justify-content:start;gap:34px;align-items:center}
.sb-dims{margin:0;display:flex;flex-direction:column;gap:9px;padding-right:32px;border-right:1px solid var(--line)}
.sb-dims div{display:grid;grid-template-columns:42px auto;gap:14px;align-items:baseline;font-size:13.5px;color:var(--mut)}
.sb-dims dt,.sb-dims dd{margin:0}
.sb-dims dd{color:var(--ink);white-space:nowrap}
.sb-dims bdi{font-size:23px;font-weight:900;letter-spacing:-.03em;margin-left:4px}
@media(max-width:860px){
  .spec-big{grid-template-columns:repeat(2,1fr)}
  .sb-wide{grid-column:1/-1;gap:22px}
  .sb-dims{padding-right:20px}
}
@media(max-width:470px){.spec-big{grid-template-columns:1fr}}

/* youtube: a poster with a play button; the player loads only on click */
.ytbox{position:relative;aspect-ratio:16/9;background:#111;border-radius:2px;overflow:hidden}
.ytbox>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytfacade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#111;cursor:pointer;display:block}
.ytfacade img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.ytfacade .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:52px;border-radius:13px;background:rgba(13,13,13,.76);transition:background .15s}
.ytfacade .play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-42%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.ytfacade:hover .play,.ytfacade:focus-visible .play{background:var(--acc)}

/* spec columns — the same shape as the greenroom spec sheet, in white */
.specs-grid{display:grid;gap:clamp(22px,3vw,38px);grid-template-columns:repeat(auto-fit,minmax(245px,1fr));margin-top:38px}
.spec-col-title{font-size:11.5px;letter-spacing:.22em;color:var(--acc);padding-bottom:12px;border-bottom:1px solid var(--line)}
.spec-item{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.62;color:#4a4a4a;display:flex;gap:9px}
.spec-item::before{content:"—";color:var(--acc);flex-shrink:0}

.prices{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));margin-top:28px}
.pc{background:#fff;border:1px solid var(--line);border-radius:2px;padding:22px}
.pc b{display:block;font-size:29px;font-weight:900;letter-spacing:-.02em}
.pc small{display:block;color:var(--mut);font-size:13.5px;margin-top:3px}
.note{font-size:14px;color:var(--mut);margin-top:16px}
.note a,.card a,p a,li a{color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(0,179,107,.35)}

details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:left;color:var(--acc);font-weight:400}
details[open] summary::after{content:"\2013"}
details p{margin-top:10px;color:#454545;font-size:15.5px}

.cta{background:var(--ink);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta p{color:#c9c9c9;margin:0 auto}
.btn{display:inline-block;margin:18px 8px 0;padding:15px 32px;background:var(--acc);color:#07140e;text-decoration:none;font-weight:700;border-radius:2px}
.btn.g{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}

footer{padding:40px 0;font-size:14px;color:var(--mut);border-top:1px solid var(--line)}
footer a{color:var(--acc);text-decoration:none}
footer p+p{margin-top:6px}