/* The Lab Hotel — mirrors www.thelabhotel.com (Wix) as of 2026-10-05.
   Measurements taken from the live site at a 1280px viewport.
   Palette: cream #FFFEF9 · taupe #EAE3DD · slate #464F5E · peach #FFEBD4
   Type: Cardo (headings) · Hanken Grotesk (body, nav, buttons) · Jost (form labels, stands in for Futura) */

:root{
  --cream:#fffef9; --taupe:#eae3dd; --slate:#464f5e; --peach:#ffebd4; --ink:#000;
  --rule:#4b5676;
  --serif:"Cardo",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --label:"Jost","Futura","Helvetica Neue",Arial,sans-serif;
  --head-h:108px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.67;
  font-weight:400;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;color:var(--ink);}
h2{font-size:38px;line-height:1.25;}
p{margin:0;}
.wrap{max-width:980px;margin:0 auto;}
.center{text-align:center;}

/* ---------- header ---------- */
.site-header{position:relative;z-index:50;height:var(--head-h);background:var(--cream);}
.hdr{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 38px 0 24px;}
.logo{justify-self:start;display:block;width:180px;}
.logo svg{display:block;width:100%;height:auto;}
.nav{display:flex;align-items:center;}
.nav a{font-size:14px;letter-spacing:1.4px;padding:0 10px;white-space:nowrap;line-height:18px;transition:color .2s;}
.nav a:hover,.nav a.active{color:var(--slate);}
.lang{justify-self:end;display:flex;align-items:center;gap:14px;}
.lang a{display:flex;align-items:center;gap:8px;font-size:14px;}
.lang a.active{color:var(--slate);}
.lang svg{width:22px;height:22px;}
.nav-toggle{display:none;justify-self:end;background:none;border:0;width:30px;height:22px;position:relative;cursor:pointer;padding:0;}
.nav-toggle span{position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s;}
.nav-toggle span:nth-child(1){top:0;}
.nav-toggle span:nth-child(2){top:50%;transform:translateY(-50%);}
.nav-toggle span:nth-child(3){bottom:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:42px;padding:0 20px;border-radius:50px;
  background:var(--slate);color:var(--cream);font-size:14px;letter-spacing:3.5px;white-space:nowrap;transition:background .2s,color .2s;}
.btn:hover{background:#2f3542;}
.btn svg{width:20px;height:20px;fill:currentColor;flex:none;}
.btn--wide{width:260px;}
.btn--mid{width:228px;}
.btn--sm{width:180px;}
.btn--ghost{background:transparent;border:2px solid var(--slate);color:var(--slate);font-size:15px;letter-spacing:3.75px;}
.btn--ghost:hover{background:var(--slate);color:var(--cream);}
.btn-row{display:flex;justify-content:center;margin-top:60px;}

/* ---------- sections ---------- */
.sec{padding:80px 0 85px;}
.cream{background:var(--cream);}
.taupe{background:var(--taupe);}
.peach{background:var(--peach);}
.slate{background:var(--slate);}

/* ---------- galleries (Wix horizontal sliders) ---------- */
.gal{position:relative;}
.gal__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;}
.gal__track::-webkit-scrollbar{display:none;}
.gal__track img{flex:none;object-fit:cover;scroll-snap-align:start;}
.gal--row .gal__track{gap:10px;}
.gal--row .gal__track img{width:480px;height:360px;}
.gal--strip .gal__track{gap:20px;}
.gal--strip .gal__track img{width:547px;height:410px;}
.gal--room{width:462px;max-width:100%;}
.gal--room .gal__track{gap:10px;}
.gal--room .gal__track img{width:100%;height:462px;}
.gal__nav{position:absolute;top:calc(50% - 20px);width:40px;height:40px;border:0;border-radius:50%;padding:0;
  background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.gal__nav[hidden]{display:none;}
.gal__nav svg{width:16.67px;height:16.67px;}
.gal__nav--next{right:28px;}
.gal__nav--prev{left:28px;}
.gal__nav--prev svg{transform:scaleX(-1);}

/* ---------- home ---------- */
.home-top{padding-top:35px;background:var(--cream);}
.home-h1{font-size:63px;line-height:78px;text-align:center;margin:0 auto 37px;max-width:980px;}
.home-top .gal + .gal{margin-top:16px;}
.intro .h2-lg{max-width:990px;margin:0 auto;}
@media (min-width:1001px){.intro .h2-lg{margin:0 -5px;max-width:none;}.loc-h2{margin:0 -13px !important;max-width:none !important;}}
.intro-p{max-width:570px;margin:30px auto 0;}
.narrow-p{max-width:453px;margin:30px auto 0;}
.features-sec{padding:100px 0 101px;}
.features{display:grid;grid-template-columns:repeat(4,280px);justify-content:center;row-gap:56px;margin-left:-24px;}
.feature{display:flex;flex-direction:column;align-items:center;text-align:center;}
.feature svg{height:43px;width:auto;max-width:62px;}
.feature p{color:var(--cream);font-size:14px;line-height:24.5px;margin-top:9px;}
.home-strip{padding-top:65px;background:var(--cream);}
.loc-h2{max-width:1005px;margin:0 auto;}
.loc{display:grid;grid-template-columns:450px 478px;column-gap:52px;align-items:center;margin-top:60px;}
.loc img{width:450px;height:420px;object-fit:cover;}
.loc__body p + p{margin-top:26.72px;}
.loc__body .btn{margin-top:40px;}
.peach{padding-bottom:91px;}
.home-spacer{height:420px;}

/* ---------- inner-page hero ---------- */
.hero{position:relative;height:800px;overflow:hidden;background:#bfbfbf;}
.hero img{width:100%;height:100%;object-fit:cover;}
.hero h1{position:absolute;left:0;right:0;top:var(--title-top,150px);margin:0 auto;max-width:980px;
  font-size:80px;line-height:1.25;text-align:center;}

/* two-column text that flows like the Wix original */
.flow{column-count:2;column-gap:55px;max-width:891px;margin:30px auto 0;text-align:left;}
.taupe .flow + .btn-row{margin-top:34px;}
.two-col{display:grid;grid-template-columns:418px 418px;column-gap:55px;justify-content:center;margin-top:30px;text-align:left;}
.sec:has(.two-col){padding-bottom:76px;}

/* ---------- rooms ---------- */
.rooms{padding-bottom:96px;}
.rooms-h2{margin-bottom:59px;}
.room{display:grid;grid-template-columns:462px 462px;column-gap:56px;justify-content:center;align-items:start;}
.room + .room{margin-top:84px;}
.room__body{display:flex;flex-direction:column;align-items:flex-start;min-height:482px;}
.room__body h3{font-size:30px;line-height:1.35;}
.room__meta{margin-top:0;}
.room__body ul{margin:14px 0 0;padding-left:29px;}
.room__body .btn{margin-top:auto;}
.closing{padding:98px 0 106px;}
.rooms + .closing{padding-top:0;}
.closing .btn-row{margin-top:30px;}

/* long-stay perks */
.perks-p{max-width:497px;margin:30px auto 0;}
.perks{display:grid;grid-template-columns:repeat(3,284px);column-gap:47px;justify-content:center;margin-top:49px;text-align:left;}
.perk{border-top:1px solid #000;min-height:165px;padding:28px 19px 0 22px;}
.perk h3{font-size:20px;line-height:25px;}
.perk p{font-size:14px;line-height:1.3;margin-top:19px;}
.perks + *{margin:0;}
.taupe:has(.perks){padding-bottom:70px;}

/* ---------- story ---------- */
.story{padding-bottom:79px;}
.story-h2{max-width:746px;margin:0 auto;}
.story-row{display:grid;grid-template-columns:465px 465px;column-gap:50px;align-items:center;justify-content:center;margin-top:60px;}
.story-row img{width:465px;height:363px;object-fit:cover;}

/* ---------- neighbourhood map ---------- */
.map{height:552px;background:var(--slate);}
.map iframe{display:block;width:100%;height:100%;border:0;}

/* ---------- contact ---------- */
.contact{padding-bottom:83px;}
.contact-p{max-width:743px;margin:30px auto 0;}
.card{width:661px;max-width:100%;margin:48px auto 0;background:#fff;border-radius:28px;padding:50px;text-align:left;}
.card__row{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;}
.card label{display:block;font-family:var(--label);font-size:14px;line-height:17px;}
.card input,.card textarea{display:block;width:100%;margin:8px 0 24px;border:0;border-radius:8px;background:var(--taupe);
  font:16px/1.4 var(--label);color:var(--ink);padding:8px 12px;}
.card input{height:36px;}
.card textarea{height:76px;resize:vertical;margin-bottom:32px;}
.card input:focus,.card textarea:focus{outline:2px solid var(--slate);outline-offset:0;}
.card button{display:block;width:100%;height:41px;border:0;border-radius:8px;background:var(--taupe);font:16px var(--sans);
  color:var(--ink);cursor:pointer;}
.card button:hover{background:#ddd3ca;}
.faq-sec{padding-bottom:100px;}
.faq{max-width:916px;margin:21px auto 0;}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:47px 0 30px;font-size:16px;line-height:21px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary svg{width:24px;height:24px;flex:none;fill:currentColor;transition:transform .25s;}
.faq details[open] summary svg{transform:rotate(180deg);}
.faq details p{padding:0 44px 30px 0;}

/* ---------- 404 ---------- */
.notfound{padding:120px 0 140px;}
.notfound h1{font-size:56px;line-height:1.2;margin-bottom:24px;}

/* ---------- footer ---------- */
.site-footer{background:var(--cream);padding:35px 0 56px;}
.ft{display:flex;justify-content:space-between;}
.ft-col{text-align:center;font-size:15px;line-height:26.25px;}
.ft-col a:hover{color:var(--slate);}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hdr{grid-template-columns:1fr auto auto;column-gap:24px;}
  .nav-toggle{display:block;}
  .nav{position:fixed;top:var(--head-h);left:0;right:0;bottom:0;z-index:60;background:var(--cream);flex-direction:column;
    align-items:center;justify-content:flex-start;gap:28px;padding:44px 20px;transform:translateX(100%);visibility:hidden;
    transition:transform .3s,visibility .3s;}
  .nav.open{transform:none;visibility:visible;}
  .nav a{font-size:16px;}
}
@media (max-width:1000px){
  .wrap{padding:0 20px;}
  .features{grid-template-columns:repeat(2,1fr);margin:0 auto;max-width:560px;}
  .loc,.story-row,.room,.two-col{grid-template-columns:1fr;row-gap:32px;justify-items:center;max-width:478px;margin-left:auto;margin-right:auto;}
  .room__body{min-height:0;width:100%;}
  .room__body .btn{margin-top:28px;}
  .room--flip .room__body{order:2;}
  .story-row--flip p{order:2;}
  .loc img,.story-row img{width:100%;height:auto;aspect-ratio:465/363;}
  .loc img{aspect-ratio:450/420;}
  .flow{column-count:1;}
  .perks{grid-template-columns:repeat(2,minmax(0,284px));column-gap:24px;}
}
@media (max-width:700px){
  :root{--head-h:72px;}
  .hdr{padding:0 16px;}
  .logo{width:140px;}
  .lang span{display:none;}
  h2{font-size:28px;}
  .home-h1{font-size:34px;line-height:1.25;margin-bottom:24px;}
  .sec{padding:56px 0 60px;}
  .wrap{padding:0 16px;}
  .btn-row{margin-top:36px;}
  .gal--row .gal__track img{width:78vw;height:58.5vw;}
  .gal--strip .gal__track img{width:82vw;height:61.5vw;}
  .gal--room .gal__track img{height:auto;aspect-ratio:1;}
  .gal__nav--next{right:12px;}
  .gal__nav--prev{left:12px;}
  .hero{height:62vh;min-height:380px;}
  .hero h1{font-size:40px;top:50%;transform:translateY(-50%);padding:0 16px;}
  .features-sec{padding:56px 16px;}
  .features{row-gap:36px;}
  .home-strip{padding-top:40px;}
  .home-spacer{height:80px;}
  .perks{grid-template-columns:1fr;}
  .perk{min-height:0;padding-bottom:24px;}
  .card{padding:28px 20px;}
  .card__row{grid-template-columns:1fr;}
  .faq summary{padding:28px 0 22px;}
  .map{height:420px;}
  .ft{flex-direction:column;gap:24px;}
  .btn--wide{width:auto;min-width:240px;}
}

/* contact form → /api/form (hostini-forms); honeypot hidden from people */
.card .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.card{position:relative;}
.form-status{margin:16px 0 0;font-size:15px;line-height:1.5;text-align:center;}
.form-status.err{color:#9b2c2c;}
.card button[disabled]{opacity:.6;cursor:default;}
