:root{
  --navy:#4a1522;
  --navy2:#6b2236;
  --gold:#d9b972;
  --teal:#6fc3cb;
  --ivory:#faf6ee;
  --ink:#2a1a1e;
  --muted:#6b5b60;
  --line:#e4dcc9;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.6;font-size:16px}
a{color:inherit}
img,svg{max-width:100%}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff;border-bottom:1px solid rgba(217,185,114,.35)}
.top .in{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo svg{width:42px;height:42px;flex:none}
.top .logo img{border-radius:4px;outline:1px solid rgba(217,185,114,.55)}
.logo span{display:flex;flex-direction:column;line-height:1.1}
.logo b{font-family:var(--serif);font-size:24px;letter-spacing:.18em;color:var(--gold);font-weight:600}
.logo small{font-size:9.5px;letter-spacing:.32em;color:#e8d9dc}
.top nav{margin-left:auto;display:flex;gap:22px}
.top nav a{text-decoration:none;font-size:14px;letter-spacing:.06em;color:#f3e9eb;padding:6px 0;border-bottom:1px solid transparent}
.top nav a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- buttons ---------- */
.btn{font:500 14px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:var(--navy);border:0;border-radius:3px;padding:12px 22px;cursor:pointer;transition:.2s}
.btn:hover{background:#e6c987}
.btn:disabled{opacity:.7;cursor:wait}
.ghost{font:500 14px var(--sans);background:transparent;color:var(--navy);border:1px solid var(--navy);border-radius:3px;padding:11px 20px;cursor:pointer}
.ghost:hover{background:var(--navy);color:#fff}

/* ---------- hero ---------- */
.hero{background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 60%,#8c3a4e 100%);color:#fff;text-align:center;padding:90px 20px 100px}
.hero .brand{font-size:13px;letter-spacing:.4em;color:var(--gold);margin-bottom:18px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,60px);line-height:1.1;margin:0 auto 18px;max-width:780px}
.hero p{max-width:640px;margin:0 auto 30px;color:#ecdfe2;font-size:18px}

/* ---------- main content ---------- */
main{max-width:1180px;margin:0 auto;padding:30px 20px 60px}
main h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,38px);color:var(--navy);margin:54px 0 8px;position:relative;padding-bottom:12px}
main h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;background:var(--gold)}
.lead{color:var(--muted);margin:0 0 24px;max-width:720px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.dept{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:4px;padding:20px 20px 10px}
.dept h3{font-family:var(--serif);font-size:23px;color:var(--navy);margin:0 0 10px}
.dept ul{list-style:none;margin:0;padding:0}
.dept li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #efe9da;font-weight:500}
.dept li>span{display:flex;flex-direction:column;min-width:0}
.qual{font-weight:400;font-size:13px;color:var(--muted)}
.dept li button{flex:none;font:500 13px var(--sans);background:transparent;color:var(--navy);border:1px solid var(--gold);border-radius:3px;padding:6px 14px;cursor:pointer;transition:.2s}
.dept li button:hover{background:var(--gold)}

.steps{counter-reset:s;list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px;color:var(--muted);font-size:15px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--gold);font-family:var(--serif);font-size:18px;margin-bottom:10px}
.steps b{display:block;color:var(--navy);font-size:17px;margin-bottom:4px}

.req{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px 26px}
.req li{position:relative;padding-left:26px}
.req li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--gold)}

.where{margin-top:54px;background:var(--navy);color:#fff;border-radius:4px;padding:30px;text-align:center}
.where h3{font-family:var(--serif);font-size:28px;color:var(--gold);margin:0}
.where p{margin:6px 0 0;color:#ecdfe2}
.where .btn{margin-top:16px}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#e8d9dc;text-align:center;padding:40px 20px;font-size:14px}
footer .logo{justify-content:center;margin-bottom:10px}
footer p{margin:4px 0}
footer a{color:var(--gold)}
footer .logo{color:#fff}
.fade{opacity:.7;margin-top:14px}

/* ---------- thank-you / error banner ---------- */
#thanks{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:60;background:#1f7a4d;color:#fff;padding:14px 22px;border-radius:4px;max-width:92vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
#thanks[hidden]{display:none}

/* ---------- dialog / form ---------- */
dialog{border:0;border-radius:6px;padding:0;width:min(520px,94vw);max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(58,16,28,.7);backdrop-filter:blur(2px)}
dialog form{padding:26px 26px 22px}
dialog h2{font-family:var(--serif);font-size:30px;color:var(--navy);margin:0 0 2px}
dialog small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
dialog label{display:block;font-weight:500;font-size:14px;margin:16px 0 6px;color:var(--navy)}
dialog input,dialog select,dialog textarea{width:100%;font:400 15px var(--sans);padding:11px 12px;border:1px solid #cfc6b0;border-radius:3px;background:#fff;color:var(--ink)}
dialog input:focus,dialog select:focus,dialog textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
dialog input[type=file]{padding:9px;background:#faf8f2}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.msg{color:#b3261e;font-size:14px;min-height:20px;margin-top:12px}
.row{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .top nav{display:none}
  .top .btn{margin-left:auto}
  .hero{padding:64px 18px 72px}
}
@media (max-width:420px){
  .logo b{font-size:20px}
  .logo svg{width:36px;height:36px}
  .top .btn{padding:10px 14px;font-size:12px}
  .dept li{flex-wrap:wrap}
}


/* ---------- MOBILE HERO FIX ---------- */

@media (max-width: 540px) {

  .hero {
    min-height: 0;
    padding: 55px 20px 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;

    /* Keep the cartoon hotel background visible */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Rich overlay for readable text */
    background-image:
      linear-gradient(
        180deg,
        rgba(74, 21, 34, 0.78) 0%,
        rgba(107, 34, 54, 0.66) 55%,
        rgba(74, 21, 34, 0.48) 100%
      ),
      url('./bg.png');
  }

  .hero .brand {
    font-size: 10px;
    letter-spacing: 0.22em;
    line-height: 1.6;
    margin: 0 0 18px;
    text-align: center;
  }

  .hero h1 {
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.12;
    max-width: 360px;
    margin: 0 auto 18px;
    text-align: center;
  }

  .hero p {
    width: 100%;
    max-width: 360px;
    font-size: 15px;
    line-height: 1.75;
    margin: 0 auto 24px;
    text-align: center;
  }

  .hero .btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 12px;
    margin: 0 auto;
  }

  /* Header spacing on mobile */
  .top .in {
    padding: 8px 12px;
    gap: 8px;
  }

  .top .logo img {
    width: 38px;
    height: auto;
  }

  .top .btn {
    margin-left: auto;
    padding: 9px 12px;
    font-size: 10px;
  }

  .top nav {
    display: none;
  }

  /* Prevent content from touching screen edges */
  main {
    padding: 20px 16px 40px;
  }

  main h2 {
    font-size: 29px;
    margin-top: 30px;
  }
}

/* Extra-small phones */
@media (max-width: 380px) {

  .hero {
    padding: 45px 16px 38px;
    background-position: 60% center;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p {
    font-size: 14px;
  }

  .hero .brand {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
}
/* Header: logo left, Apply Now right */
.top .in {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Hero fills the screen under the header */
.hero {
  min-height: calc(100vh - 86px); /* 86px = your header height, adjust if needed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding-left: 8%;
  padding-right: 8%;
}

/* Keep the text on the left, away from the characters */
.hero h1,
.hero p {
  max-width: 560px;
}

.hero h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
}

/* Mobile: center text again and darken the image for readability */
@media (max-width: 768px) {
  .hero {
    align-items: center;
    text-align: center;
    padding: 60px 6%;
  }
}
/* Align everything to the same left edge */
.hero .brand,
.hero h1,
.hero p {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* Narrower text block so it stays clear of the characters */
.hero h1,
.hero p {
  max-width: 480px;
}

.hero h1 {
  margin-bottom: 18px;
}

.hero p {
  margin-bottom: 28px;
}

/* Match the content's left edge to the logo in the header */
.hero {
  padding-left: max(24px, calc((100vw - 1100px) / 2));
}

/* ---------- Contact card ---------- */
.contact {
  margin: 56px 0;
  padding: 36px 28px;
  text-align: center;
  background: linear-gradient(135deg, #4a1522 0%, #7a2234 100%);
  border-radius: 14px;
  border: 1px solid rgba(212, 176, 106, .45);
  box-shadow: 0 12px 30px rgba(74, 21, 34, .25);
}
.contact h2 { color: #fff; margin: 0 0 6px; }
.contact .lead { color: #f1dcc0; margin: 0 0 24px; }

.contact-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.2;
  transition: transform .2s, box-shadow .2s;
}
.c-btn small {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 2px;
}
.c-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .3); }

.c-wa   { background: #25d366; color: #fff; }
.c-call { background: #d4b06a; color: #4a1522; }

/* ---------- Floating buttons ---------- */
.float-contact {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.f-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  transition: transform .2s;
}
.f-btn:hover { transform: scale(1.1); }
.f-wa   { background: #25d366; }
.f-call { background: #7a2234; border: 2px solid #d4b06a; }

@media (max-width: 520px) {
  .c-btn { width: 100%; justify-content: center; }
}