/* onlyrentalthailand.com, onlyrentalbangkok.com, onlyrentalphuket.com */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.hub{margin:0;min-height:100vh;display:flex;flex-direction:column;background-color:#0B0D24;color:#FFFFFF;
  font-family:'Outfit','Noto Sans Thai',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.hub a{color:#FFFFFF}
.hub-wrap{width:100%;max-width:1312px;margin:0 auto;padding:0 24px}
@media(min-width:900px){.hub-wrap{padding:0}body.hub{padding:0 64px}}
@media(min-width:900px) and (max-width:1440px){body.hub{padding:0 48px}}

/* backgrounds */
body.hub-home{position:relative;isolation:isolate}
body.hub-home::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:900px;
  background-image:linear-gradient(90deg,rgba(11,13,36,.94) 0%,rgba(11,13,36,.78) 45%,rgba(11,13,36,.35) 100%),
    linear-gradient(0deg,#0B0D24 0%,rgba(11,13,36,0) 45%),url("../img/hub/pattaya.3b41e61ac750.webp");
  background-size:cover;background-repeat:no-repeat;background-position:center 60%}
body.hub-soon{background-color:#0B0D24;background-size:cover;background-repeat:no-repeat}
body.soon-bangkok{background-image:linear-gradient(90deg,rgba(11,13,36,.94) 0%,rgba(11,13,36,.8) 42%,rgba(11,13,36,.4) 100%),
  linear-gradient(0deg,rgba(11,13,36,.85) 0%,rgba(11,13,36,0) 35%),url("../img/hub/bangkok.1965f2cdbbf0.webp");background-position:center 65%}
body.soon-phuket{background-image:linear-gradient(90deg,rgba(11,13,36,.94) 0%,rgba(11,13,36,.8) 42%,rgba(11,13,36,.4) 100%),
  linear-gradient(0deg,rgba(11,13,36,.85) 0%,rgba(11,13,36,0) 35%),url("../img/hub/phuket.cb8f6b5aa9e0.webp");background-position:center 55%}
@media(max-width:899px){
  body.hub-home::before{height:560px;background-image:linear-gradient(180deg,rgba(11,13,36,.55) 0%,rgba(11,13,36,.82) 55%,#0B0D24 100%),url("../img/hub/pattaya.3b41e61ac750.webp");background-position:center top}
  .soon-bangkok,body.soon-phuket{background-image:linear-gradient(180deg,rgba(11,13,36,.5) 0%,rgba(11,13,36,.75) 45%,rgba(11,13,36,.94) 75%,#0B0D24 100%),var(--bg)}
  body.soon-bangkok{--bg:url("../img/hub/bangkok.1965f2cdbbf0.webp");background-position:62% center}
  body.soon-phuket{--bg:url("../img/hub/phuket.cb8f6b5aa9e0.webp");background-position:40% center}
}

/* header, footer, logo lockup (city name sits under "rental") */
.hub-head{height:88px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lockup{display:inline-flex;flex-direction:column;align-items:flex-end;text-decoration:none;flex:none}
.lockup img{display:block;height:40px;width:auto}
.lockup span{margin-top:-4px;padding-right:2px;font-size:11px;font-weight:600;letter-spacing:3px;color:#C9D0E4;line-height:1.2}
.lockup.sm img{height:34px}.lockup.sm span{color:#FFFFFF;margin-top:-3px}
.lockup.xl img{height:auto;width:min(520px,100%)}.lockup.xl span{margin-top:-10px;padding-right:4px;font-size:16px;letter-spacing:7px}
.hub-langs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.hub-langs a{min-width:40px;height:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  font-size:13px;font-weight:600;color:#C9D0E4;text-decoration:none;border:1px solid transparent}
.hub-langs a:hover{border-color:rgba(255,255,255,.3)}
.hub-langs a[aria-current]{color:#FFFFFF;border-color:rgba(255,255,255,.35);background:rgba(11,13,36,.4)}
.hub-foot{min-height:64px;padding-top:16px;padding-bottom:16px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;font-size:13px;color:#A9B2CC}
.hub-foot a{color:#C9D0E4;text-decoration:none}

/* shared bits */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:13px;font-weight:600;color:#C9D0E4;white-space:nowrap}
.pill.on{background:#0F8A4B;border-color:#0F8A4B;color:#FFFFFF}
.pill i{width:6px;height:6px;border-radius:50%;background:#FFFFFF}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:64px;padding:0 30px;border-radius:18px;background:#0F8A4B;
  color:#FFFFFF;font-size:19px;font-weight:600;text-decoration:none;box-shadow:0 14px 34px rgba(15,138,75,.4)}
.cta:hover{background:#0C7A42}

/* hub home */
.hero{min-height:calc(900px - 88px);display:grid;grid-template-columns:minmax(0,1fr) 440px;align-items:center;gap:64px;padding-bottom:32px}
.kinds{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.kinds li{display:flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:999px;background:rgba(11,13,36,.55);border:1px solid rgba(255,255,255,.16);font-size:15px;font-weight:600}
.kinds i{width:9px;height:9px;border-radius:50%}
.hero h1{margin:28px 0 0;font-size:96px;line-height:.98;font-weight:800;letter-spacing:-4px}
.hero h1 span,.cities h2 span,.sign p span{font-weight:300;color:#FFC21A}
.lead{margin:24px 0 0;max-width:520px;font-size:20px;line-height:1.5;color:#E3E7F4}
.cta-row{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.cta-dom{font-size:15px;color:#C9D0E4}
.picker{padding:26px;border-radius:28px;background:rgba(11,13,36,.72);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:10px}
.eyebrow{margin:0 0 6px 4px;font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#A9B2CC}
.pick{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:92px;padding:0 20px;border-radius:18px;border:1px solid rgba(255,255,255,.12);text-decoration:none}
.pick .lockup{opacity:.6}
.pick:hover{border-color:rgba(255,255,255,.35)}
.pick.live{background:rgba(15,138,75,.2);border:1.5px solid #0F8A4B}
.pick.live .lockup{opacity:1}
.cities{padding-top:88px;padding-bottom:72px;border-top:1px solid rgba(255,255,255,.1)}
.cities-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.cities h2{margin:0;font-size:56px;line-height:1;font-weight:800;letter-spacing:-2px}
.cities-top p{margin:0;max-width:420px;font-size:17px;line-height:1.55;color:#C9D0E4}
.cards{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{display:flex;flex-direction:column;padding:30px;border-radius:24px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}
.card.live{border:1.5px solid #0F8A4B;background:rgba(15,138,75,.12)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.city{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;letter-spacing:3px}
.ic{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.card.live .ic{background:#0F8A4B}
.card h3{margin:18px 0 0;font-size:40px;line-height:1.05;font-weight:800;letter-spacing:-1.4px}
.card p{margin:12px 0 0;font-size:16px;line-height:1.55;color:#C9D0E4}
.card-link{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;text-decoration:none}
.card:not(.live) .card-link{color:#A9B2CC}
.sign{padding-top:72px;padding-bottom:64px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.sign p{margin:0;font-size:22px;font-weight:600;letter-spacing:-.4px}

/* coming soon */
.soon{flex-grow:1;display:flex;flex-direction:column;justify-content:center;padding-top:24px;padding-bottom:24px}
.soon h1{margin:0;font-size:clamp(88px,17vw,240px);line-height:.85;font-weight:800;letter-spacing:-.05em}
.soon h1.soon-logo{margin:0;font-size:16px;line-height:1;letter-spacing:0}
.soon-logo a{display:inline-flex;flex-direction:column;align-items:flex-end;text-decoration:none}
.soon-logo img{display:block;width:min(760px,100%);height:auto}
.soon-logo span{margin-top:-6px;font-size:clamp(16px,2vw,28px);font-weight:600;letter-spacing:.34em;margin-right:-.34em;color:#FFFFFF}
.soon-row{margin-top:40px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px}
.soon-copy{max-width:560px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#FFC21A;color:#111827;font-size:14px;font-weight:600}
.badge i{width:7px;height:7px;border-radius:50%;background:#111827}
.soon-copy p{margin:18px 0 0;font-size:22px;line-height:1.45;color:#E3E7F4}
.soon-btns{display:flex;flex-wrap:wrap;gap:12px}
.soon-btns .cta{height:56px;font-size:17px;padding:0 26px;border-radius:16px}
.ghost{height:56px;padding:0 22px;display:inline-flex;align-items:center;border-radius:16px;border:1.5px solid rgba(255,255,255,.4);font-size:17px;font-weight:600;text-decoration:none}
.soon-cities{margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;gap:28px;font-size:18px}
.soon-cities a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#8C95B0;font-weight:300}
.soon-cities a.live,.soon-cities a.on{color:#FFFFFF;font-weight:600}
.soon-cities i{width:7px;height:7px;border-radius:50%;background:#0F8A4B}

/* phones and tablets */
@media(max-width:899px){
  .hub-head{height:auto;min-height:68px;padding-top:12px;padding-bottom:12px;align-items:flex-start}
  .lockup img{height:30px}.lockup span{font-size:9px;letter-spacing:2.5px;margin-top:-3px}
  .hub-langs{max-width:200px}.hub-langs a{min-width:36px;height:32px;padding:0 8px;font-size:12px}
  .hero{min-height:0;grid-template-columns:1fr;gap:36px;padding-top:18px;padding-bottom:8px}
  .kinds{gap:7px}.kinds li{height:32px;padding:0 11px;font-size:13px}
  .hero h1{margin-top:18px;font-size:clamp(44px,13vw,64px);letter-spacing:-2px}
  .lead{font-size:16px}
  .cta-row{margin-top:22px}.cta{width:100%;height:58px;font-size:17px}.cta-dom{display:none}
  .picker{padding:0;background:none;border:0;gap:8px}
  .pick{min-height:72px;padding:0 16px;border-radius:16px}
  .lockup.sm img{height:28px}
  .cities{padding-top:48px;padding-bottom:40px;margin-top:40px}
  .cities h2{font-size:34px;letter-spacing:-1.2px}
  .cities-top p{font-size:15px}
  .cards{grid-template-columns:1fr;gap:12px;margin-top:22px}
  .card{padding:22px}.card h3{font-size:30px}.ic{width:40px;height:40px}
  .sign{padding-top:40px;padding-bottom:28px}.lockup.xl span{font-size:13px;letter-spacing:5px;margin-top:-6px}.sign p{font-size:17px}
  .soon-copy p{font-size:17px}
  .soon-btns{width:100%;flex-direction:column}.soon-btns .cta,.ghost{width:100%;justify-content:center}
  .soon-cities{justify-content:center;gap:22px;font-size:15px;margin-top:32px}
}