/* JOY'S BOX V60 — deterministic adaptive header + desktop contact modal */

/* --------------------------------------------------------------------------
   HEADER THEME
   Explicit colors prevent old inherited states from leaving nav links stuck.
   JS samples the actual section beneath the fixed header on every scroll frame.
   -------------------------------------------------------------------------- */
.site-header.header-v14{
  --v60-header-color:#f7f2e9;
  color:var(--v60-header-color)!important;
}
.site-header.header-v14.is-light{
  --v60-header-color:#11110f;
  color:var(--v60-header-color)!important;
}
.site-header.header-v14 .header-v14__nav a{
  color:var(--v60-header-color)!important;
  transition:color .22s ease,opacity .58s ease,transform .78s cubic-bezier(.22,1,.36,1),filter .58s ease!important;
}

/* Desktop contact replaces the menu trigger; mobile keeps the authored menu. */
.header-contact-v60{
  display:flex;
  justify-self:end;
  height:46px;
  min-width:124px;
  padding:0 16px 0 18px;
  border:1px solid color-mix(in srgb,var(--v60-header-color) 38%,transparent);
  border-radius:999px;
  background:transparent;
  color:var(--v60-header-color)!important;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font:700 8.5px/1 var(--sans);
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  pointer-events:auto;
  transition:color .22s ease,border-color .22s ease,background .22s ease,transform .28s cubic-bezier(.22,.8,.22,1)!important;
}
.header-contact-v60 b{
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:50%;
  font:500 13px/1 var(--sans);
  letter-spacing:0;
  transform:translate3d(0,0,0);
  transition:transform .28s cubic-bezier(.22,.8,.22,1),background .22s ease;
}
.header-contact-v60:hover{
  transform:translateY(-2px);
  border-color:var(--v14-gold);
  background:color-mix(in srgb,var(--v14-gold) 9%,transparent);
}
.header-contact-v60:hover b{
  transform:translate(2px,-2px);
  background:color-mix(in srgb,var(--v14-gold) 16%,transparent);
}

@media(min-width:901px){
  .site-header.header-v14 .menu-toggle-v14{display:none!important}
  .menu-full-v12{display:none!important}
}
@media(max-width:900px){
  .header-contact-v60{display:none!important}
  .site-header.header-v14 .menu-toggle-v14{display:flex!important}
}

/* --------------------------------------------------------------------------
   CONTACT MODAL
   -------------------------------------------------------------------------- */
.contact-modal-v60{
  position:fixed;
  z-index:1800;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(18px,3vw,44px);
  visibility:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .32s ease,visibility .32s;
}
.contact-modal-v60.is-open{
  visibility:visible;
  pointer-events:auto;
  opacity:1;
}
.contact-modal-v60__backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,5,4,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.contact-modal-v60__panel{
  position:relative;
  width:min(1080px,94vw);
  max-height:min(820px,92svh);
  overflow:auto;
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(430px,1.22fr);
  background:#f0ede4;
  color:#11110f;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 34px 100px rgba(0,0,0,.48);
  transform:translateY(22px) scale(.985);
  opacity:0;
  transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
.contact-modal-v60.is-open .contact-modal-v60__panel{
  transform:none;
  opacity:1;
}
.contact-modal-v60__intro{
  position:relative;
  min-height:610px;
  padding:clamp(34px,4vw,62px);
  color:#f6f1e8;
  background:
    linear-gradient(180deg,rgba(6,6,5,.14),rgba(6,6,5,.82)),
    url('../assets/detail-lounge.webp') center/cover no-repeat;
  overflow:hidden;
}
.contact-modal-v60__intro::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(75% 55% at 72% 22%,rgba(210,173,77,.19),transparent 70%);
  pointer-events:none;
}
.contact-modal-v60__intro>*{position:relative;z-index:1}
.contact-modal-v60__kicker{
  display:block;
  font:700 7px/1 var(--sans);
  letter-spacing:.19em;
  color:#d4b967;
}
.contact-modal-v60__intro h2{
  margin:32px 0 0;
  max-width:7ch;
  font:600 clamp(58px,5.9vw,94px)/.78 var(--cond);
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.contact-modal-v60__intro h2 i{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  color:#d0ad51;
}
.contact-modal-v60__intro p{
  position:absolute;
  left:clamp(34px,4vw,62px);
  right:clamp(34px,4vw,62px);
  bottom:clamp(34px,4vw,56px);
  margin:0;
  max-width:34ch;
  color:rgba(255,255,255,.68);
  font:500 11px/1.65 var(--sans);
}
.contact-modal-v60__form-wrap{
  padding:clamp(34px,4vw,62px);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.contact-modal-v60__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  margin-bottom:38px;
}
.contact-modal-v60__top>div span{
  display:block;
  margin-bottom:9px;
  font:700 7px/1 var(--sans);
  letter-spacing:.18em;
  color:#9b7c31;
}
.contact-modal-v60__top>div p{
  margin:0;
  max-width:44ch;
  color:#6d6961;
  font:500 11px/1.55 var(--sans);
}
.contact-modal-v60__close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid rgba(15,15,13,.18);
  border-radius:50%;
  background:transparent;
  color:#11110f;
  cursor:pointer;
  font:400 22px/1 var(--sans);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.contact-modal-v60__close:hover{
  transform:rotate(8deg);
  border-color:#b8953d;
  background:rgba(184,149,61,.07);
}
.contact-form-v60{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px 20px;
}
.contact-form-v60__field{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
}
.contact-form-v60__field--full{grid-column:1/-1}
.contact-form-v60 label{
  font:700 7px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8e897f;
}
.contact-form-v60 input,
.contact-form-v60 select,
.contact-form-v60 textarea{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(18,18,15,.18);
  border-radius:0;
  padding:2px 0 12px;
  outline:0;
  background:transparent;
  color:#11110f;
  font:500 14px/1.45 var(--sans);
  transition:border-color .22s ease;
  appearance:none;
}
.contact-form-v60 textarea{
  min-height:92px;
  resize:vertical;
}
.contact-form-v60 input:focus,
.contact-form-v60 select:focus,
.contact-form-v60 textarea:focus{border-color:#b8953d}
.contact-form-v60 input::placeholder,
.contact-form-v60 textarea::placeholder{color:#aaa59b}
.contact-form-v60__submit{
  grid-column:1/-1;
  margin-top:10px;
  min-height:58px;
  padding:0 18px 0 22px;
  border:1px solid #11110f;
  background:#11110f;
  color:#f4efe5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  cursor:pointer;
  font:700 9px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.contact-form-v60__submit b{
  font:400 18px/1 var(--sans);
  transition:transform .25s ease;
}
.contact-form-v60__submit:hover{
  background:#c2a04a;
  border-color:#c2a04a;
  color:#11110f;
}
.contact-form-v60__submit:hover b{transform:translate(3px,-3px)}
.contact-form-v60__note{
  grid-column:1/-1;
  margin:-8px 0 0;
  color:#918c82;
  font:500 8px/1.5 var(--sans);
}
body.contact-modal-open{overflow:hidden!important}

@media(max-width:700px){
  .contact-modal-v60{padding:0;align-items:end}
  .contact-modal-v60__panel{
    width:100%;
    max-height:94svh;
    grid-template-columns:1fr;
    box-shadow:0 -24px 70px rgba(0,0,0,.42);
  }
  .contact-modal-v60__intro{
    min-height:230px;
    padding:28px 22px;
  }
  .contact-modal-v60__intro h2{font-size:52px;margin-top:20px}
  .contact-modal-v60__intro p{display:none}
  .contact-modal-v60__form-wrap{padding:26px 22px 28px}
  .contact-modal-v60__top{margin-bottom:26px}
  .contact-form-v60{grid-template-columns:1fr;gap:22px}
  .contact-form-v60__field--full,.contact-form-v60__submit,.contact-form-v60__note{grid-column:1}
}

@media(prefers-reduced-motion:reduce){
  .contact-modal-v60,.contact-modal-v60__panel,.header-contact-v60{transition:none!important}
}