*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#e4c9a6;color:#fff;font-family:'Inter',Arial,sans-serif}

.home{min-height:100vh;overflow:hidden}
.hero{position:relative;min-height:100vh;background:#e4c9a6}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

/* Right-side panel — vertically centered. Because it grows downward AND
   upward symmetrically when a drawer opens (via flex), we keep it pinned
   to the visual center of the viewport. */
.home-panel{
  position:absolute;
  right:3.2vw;
  top:50%;
  transform:translateY(-50%);
  width:min(34rem,42vw);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.home-nav{display:flex;flex-direction:column;align-items:flex-start;gap:.05em;text-transform:uppercase}

/* Display type for nav links — Bebas Neue */
.nav-link{
  appearance:none;border:0;background:transparent;padding:0;margin:0;text-align:left;cursor:pointer;
  font-family:'Bebas Neue','Oswald','Arial Narrow',Impact,sans-serif;
  font-size:clamp(2.4rem,4.4vw,4.6rem);
  line-height:1;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  letter-spacing:.005em;
  font-weight:400;
  text-transform:uppercase;
  transition:color .2s ease,transform .25s ease;
  flex-shrink:0;
}
.nav-link:hover,.nav-link:focus-visible{color:#fff;transform:translateX(-8px);outline:0}

.form-toggle[aria-expanded="true"]{color:#fff}

/* Drawer flows in the document but animates open via max-height. */
.form-drawer{
  width:100%;
  overflow:hidden;
  max-height:0;
  opacity:0;
  margin:0;
  transition:max-height .42s cubic-bezier(.2,.8,.2,1),
             opacity .26s ease,
             margin .42s cubic-bezier(.2,.8,.2,1);
}
.form-drawer.is-open{
  max-height:50rem; /* large enough for any form */
  opacity:1;
  margin:.5rem 0 .8rem;
}

.enquiry-form{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:1rem;display:grid;gap:.65rem;
  text-transform:none;
  box-shadow:0 18px 45px rgba(89,58,28,.16);
}
.enquiry-form label{display:grid;gap:.25rem;color:rgba(255,255,255,.95);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-family:'Inter',Arial,sans-serif}
.enquiry-form input,.enquiry-form textarea{width:100%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.9);color:#5c452e;padding:.65rem .75rem;font:inherit;font-size:1rem;outline:none;border-radius:0}
.enquiry-form input:focus,.enquiry-form textarea:focus{border-color:#fff;background:#fff}
.enquiry-form input[aria-invalid="true"],.enquiry-form textarea[aria-invalid="true"]{border-color:#c0392b;background:#fff5f3}
.enquiry-form textarea{resize:vertical;min-height:5.5rem}

.enquiry-form button{
  justify-self:start;
  border:2px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.14);
  color:#fff;
  padding:.7rem 1rem;
  font-family:'Inter',Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:900;
  font-size:.78rem;
  cursor:pointer;
  transition:.2s ease;
}
.enquiry-form button:hover,.enquiry-form button:focus-visible{background:#fff;color:#b89161;outline:0}
.enquiry-form button:disabled{opacity:.55;cursor:not-allowed}

.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}

.form-status{margin:0;min-height:1.1em;font-size:.78rem;letter-spacing:.04em;color:#5c452e;font-family:'Inter',Arial,sans-serif;font-weight:600}
.form-status.is-error{color:#7a1f15}
.form-status.is-success{color:#1f5c2e}

.socials{position:absolute;right:2.55vw;bottom:3.1vh;display:flex;gap:.75rem;align-items:center;z-index:10}
.socials a{width:clamp(2rem,3.2vw,3.35rem);height:clamp(2rem,3.2vw,3.35rem);display:grid;place-items:center;color:rgba(255,255,255,.92);text-decoration:none;transition:.2s ease}
.socials a:hover{color:#fff;transform:translateY(-4px)}
.socials svg{width:100%;height:100%;fill:currentColor}

@media(max-width:850px){
  .home{overflow:auto}
  .hero{min-height:100svh}
  .hero-img{object-position:28% center}
  .home-panel{right:1.2rem;left:1.2rem;top:auto;bottom:5.5rem;transform:none;width:auto;max-height:none;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent);padding:1rem;justify-content:flex-start}
  .nav-link{font-size:clamp(2.2rem,10vw,3.8rem)}
  .enquiry-form{padding:.85rem;background:rgba(176,137,91,.7)}
  .socials{right:1.2rem;bottom:1rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}