
:root{
  --bg:#080a0e; --panel:rgba(12,13,17,.95); --gold:#d2ae68;
  --gold2:#b58d50; --text:#f3eee6; --muted:#c8c1b7;
}
html,body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden}
body.ref-home{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.ref-home *{box-sizing:border-box}

/* HEADER: same visual weight as reference, compact */
.ref-header{
  height:62px;position:absolute;left:0;right:0;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3.9vw;background:linear-gradient(180deg,rgba(5,7,10,.92),rgba(5,7,10,.14));
  border-bottom:1px solid rgba(255,255,255,.05)
}
.ref-brand{display:flex;align-items:center;gap:11px;color:var(--gold);text-decoration:none}
.ref-star{font-size:27px;line-height:1}
.ref-brand-copy{display:flex;flex-direction:column;line-height:1}
.ref-brand-copy strong{font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:400;letter-spacing:.15em}
.ref-brand-copy span{font-size:8px;letter-spacing:.30em;margin-top:5px}
.ref-nav{display:flex;gap:28px;align-items:center;font-size:10px}
.ref-nav a{color:#fff;text-decoration:none}
.ref-nav a:first-child{color:var(--gold);border-bottom:2px solid var(--gold);padding-bottom:7px}
.ref-actions{display:flex;align-items:center;gap:15px;font-size:10px}
.ref-actions span{color:#fff}

/* HERO */
.ref-hero{
  position:relative;height:560px;
  background:
    linear-gradient(90deg,rgba(5,7,10,.54),rgba(5,7,10,.12) 55%,rgba(5,7,10,.18)),
    linear-gradient(180deg,rgba(5,7,10,.05),rgba(5,7,10,.18) 66%,rgba(5,7,10,.66)),
    url("assets/travel-home-clean.jpg") center 45%/cover no-repeat;
}
.ref-copy{position:absolute;left:5.2vw;top:108px;width:470px}
.ref-kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:19px}
.ref-kicker:after{content:"";display:block;width:96px;height:2px;background:var(--gold);margin-top:10px}
.ref-title{font-family:Georgia,"Times New Roman",serif;font-size:56px;line-height:.98;font-weight:400;margin:0 0 22px}
.ref-title em{display:block;color:var(--gold);font-weight:400}
.ref-sub{font-size:15px;margin:0;color:#f1ece4}
.ref-services{
  position:absolute;right:4.7vw;top:105px;width:190px;padding:14px 16px;
  background:rgba(17,18,22,.82);border:1px solid rgba(210,174,104,.65);
  border-radius:12px;backdrop-filter:blur(8px)
}
.ref-service{display:grid;grid-template-columns:33px 1fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(210,174,104,.25)}
.ref-service:last-child{border-bottom:0}
.ref-icon{width:30px;height:30px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:13px}
.ref-service strong{display:block;font-size:10px;margin-bottom:3px}
.ref-service small{font-size:8px;color:#d7d1c8}

/* BOOKING: compact, exactly under hero */
.ref-booking{
  width:82vw;max-width:1160px;margin:-118px auto 0;position:relative;z-index:10;
  background:var(--panel);border:1px solid rgba(210,174,104,.4);border-radius:10px;overflow:hidden;
  box-shadow:0 16px 42px rgba(0,0,0,.42)
}
.ref-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.07)}
.ref-tabs button{border:0;background:transparent;color:#fff;padding:13px 24px;font-size:10px}
.ref-tabs button.active{background:linear-gradient(#ddb96d,#b98f4e);color:#161109}
.ref-grid{display:grid;grid-template-columns:1.12fr 1.12fr .84fr .84fr 1.12fr 112px}
.ref-field{height:66px;padding:9px 13px;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;justify-content:center}
.ref-field label{font-size:7.5px;letter-spacing:.12em;color:#b9b3aa;margin-bottom:5px}
.ref-field input,.ref-field select{border:0;background:transparent;color:#fff;outline:0;font-size:11px;width:100%;padding:0}
.ref-field input::placeholder{color:#ddd8d0}
.ref-field select option{background:#111419}
.ref-search{border:0;background:linear-gradient(#dfbd74,#b88d4d);color:#15100a;font-size:11px;font-weight:700}
.ref-meta{height:32px;display:flex;align-items:center;justify-content:center;gap:24px;border-top:1px solid rgba(255,255,255,.07);font-size:8px;color:var(--gold)}

/* COLLECTIONS: four cards visible in same landscape viewport */
.ref-collections{padding:29px 4.8vw 30px;background:#0a0d12}
.ref-label{text-align:center;color:var(--gold);font-size:8px;letter-spacing:.18em}
.ref-collections h2{text-align:center;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:27px;margin:6px 0 18px}
.ref-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1190px;margin:0 auto}
.ref-card{position:relative;height:238px;border:1px solid rgba(210,174,104,.28);border-radius:5px;overflow:hidden;color:#fff;text-decoration:none;background:#0d1014}
.ref-card-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ref-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03) 30%,rgba(4,5,8,.93) 88%)}
.ref-card-copy{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.ref-card h3{font-size:15px;font-weight:400;margin:0 0 5px}
.ref-card p{font-size:9px;line-height:1.35;margin:0 0 6px;color:#ece8e0}
.ref-card b{font-size:18px;color:var(--gold);font-weight:400}
.ref-bottom{padding:0 4.8vw 22px;background:#080a0e}
.ref-line{height:1px;background:linear-gradient(90deg,var(--gold),rgba(210,174,104,.15),var(--gold));position:relative}
.ref-line:after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#080a0e;color:var(--gold);padding:0 14px}

/* iPad landscape target */
@media (min-width:900px) and (max-width:1400px) and (orientation:landscape){
  .ref-header{height:54px;padding:0 3.4vw}
  .ref-brand-copy strong{font-size:16px}
  .ref-brand-copy span{font-size:7px}
  .ref-nav{gap:20px;font-size:8.5px}
  .ref-actions{font-size:8.5px}
  .ref-hero{height:478px}
  .ref-copy{top:92px;left:5vw;width:420px}
  .ref-kicker{font-size:9px;margin-bottom:16px}
  .ref-title{font-size:48px;margin-bottom:17px}
  .ref-sub{font-size:12px}
  .ref-services{top:88px;right:4.2vw;width:172px;padding:10px 13px}
  .ref-service{grid-template-columns:28px 1fr;padding:8px 0}
  .ref-icon{width:26px;height:26px;font-size:11px}
  .ref-service strong{font-size:9px}
  .ref-service small{font-size:7px}
  .ref-booking{width:86vw;margin-top:-94px}
  .ref-tabs button{padding:11px 19px;font-size:8.5px}
  .ref-field{height:58px;padding:8px 10px}
  .ref-field label{font-size:6.7px}
  .ref-field input,.ref-field select{font-size:9.5px}
  .ref-grid{grid-template-columns:1.12fr 1.12fr .84fr .84fr 1.12fr 100px}
  .ref-meta{height:27px;font-size:7px;gap:18px}
  .ref-collections{padding:24px 4.2vw 24px}
  .ref-collections h2{font-size:23px;margin-bottom:14px}
  .ref-cards{gap:11px}
  .ref-card{height:196px}
  .ref-card h3{font-size:12px}
  .ref-card p{font-size:7.7px}
  .ref-card-copy{left:12px;right:12px;bottom:10px}
  .ref-bottom{padding-bottom:15px}
}

/* portrait tablets */
@media (min-width:701px) and (max-width:899px){
  .ref-header{position:relative;background:#090c11}.ref-nav{display:none}
  .ref-hero{height:520px}
  .ref-copy{top:72px;left:6vw;width:56vw}
  .ref-title{font-size:48px}
  .ref-services{top:68px;right:5vw;width:170px}
  .ref-booking{width:90vw;margin-top:-90px}
  .ref-grid{grid-template-columns:1fr 1fr 1fr}
  .ref-search{height:58px}
  .ref-cards{grid-template-columns:repeat(2,1fr)}
  .ref-card{height:230px}
}

/* phones */
@media (max-width:700px){
  .ref-header{position:relative;height:58px;background:#090c11;padding:0 18px}
  .ref-nav,.ref-actions{display:none}
  .ref-brand-copy strong{font-size:15px}
  .ref-brand-copy span{font-size:7px}
  .ref-hero{height:470px;background-position:center}
  .ref-copy{top:52px;left:6vw;width:82vw}
  .ref-kicker{font-size:8px}.ref-title{font-size:42px}.ref-sub{font-size:12px}
  .ref-services{left:6vw;right:6vw;top:auto;bottom:95px;width:auto;display:grid;grid-template-columns:repeat(3,1fr);padding:7px 9px}
  .ref-service{display:block;text-align:center;border:0;padding:6px 3px}
  .ref-icon{margin:0 auto 5px}.ref-service small{display:none}.ref-service strong{font-size:8px}
  .ref-booking{width:90vw;margin-top:-78px}
  .ref-tabs{overflow:auto}.ref-tabs button{white-space:nowrap;padding:11px 16px;font-size:8px}
  .ref-grid{grid-template-columns:1fr 1fr}
  .ref-field{height:58px}.ref-search{grid-column:1/-1;height:50px}
  .ref-meta{height:auto;min-height:30px;gap:9px;padding:8px;font-size:6.5px;flex-wrap:wrap}
  .ref-collections{padding:24px 5vw}
  .ref-collections h2{font-size:25px}
  .ref-cards{grid-template-columns:1fr}
  .ref-card{height:250px}
}
