/* ============================================================
   AIHG · Version 1.3 (Final) — contact drawer
   ------------------------------------------------------------
   One form behind every contact CTA. A right-hand drawer on
   desktop, a full-screen sheet at 860px and below. Shared by
   Option J and Option K, so nothing here is option-scoped and
   nothing here changes either option's own layout.

   Markup:    the-site-v13.html (static, so Netlify detects the form)
   Behaviour: v13/contact-drawer.js
   ============================================================ */
:root{
  --cd-canvas:#F5F4F1;
  --cd-white:#FFFFFF;
  --cd-line:rgba(6,11,17,.14);
  --cd-line-2:rgba(6,11,17,.24);
  --cd-mute:rgba(6,11,17,.58);
  --cd-err:#8C2F1E;
  --cd-err-fill:rgba(140,47,30,.07);
}

/* ---------- background page, while the drawer is open ----------
   body goes fixed at the offset it was scrolled to, so the page cannot
   scroll behind the drawer and comes back to the same pixel on close.
   overflow-y:scroll keeps the scrollbar gutter, so nothing shifts. */
html.cd-lock{overflow-y:scroll}
html.cd-lock body{position:fixed;left:0;right:0;width:100%}

/* ---------- the dialog ---------- */
/* <dialog> lives in the top layer, so it clears the prototype Options
   panel (z-index 2147483000) without competing with it. The z-index is
   only for the no-top-layer fallback in the script. */
.cd{
  position:fixed;inset:0;z-index:2147483600;
  width:100vw;height:100dvh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:transparent;overflow:visible;
  color:var(--ink);font-family:var(--text)
}
.cd::backdrop{background:rgba(6,11,17,.18);opacity:0;transition:opacity .34s ease}
/* several parts of the drawer carry their own display, so the hidden
   attribute needs the weight to beat them in every loading order */
.cd [hidden]{display:none!important}
.cd.is-open::backdrop{opacity:1}

.cd__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(520px,100vw);
  display:flex;flex-direction:column;
  background:var(--cd-canvas);
  border-left:1px solid var(--cd-line);
  box-shadow:-30px 0 70px rgba(6,11,17,.18);
  padding-right:env(safe-area-inset-right,0px);
  transform:translateX(101%);
  transition:transform .4s cubic-bezier(.4,0,.2,1)
}
.cd.is-open .cd__panel{transform:none}

/* ---------- header ---------- */
.cd__head{
  flex:none;display:flex;align-items:flex-start;gap:16px;
  padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,32px) 18px;
  border-bottom:1px solid var(--cd-line)
}
.cd__intro{flex:1;min-width:0}
/* focus lands here when the drawer opens, so the heading is what gets read;
   it is not a control, so it draws no ring — the close button is the first stop */
.cd__intro:focus,.cd__intro:focus-visible{outline:none}
.cd__intro .label{display:block;font-size:11px;color:var(--gold)}
.cd__title{
  margin:10px 0 0;font-family:var(--display);font-weight:700;
  font-size:clamp(25px,2.5vw,31px);letter-spacing:-.022em;line-height:1.08;text-wrap:balance
}
.cd__x{
  flex:none;display:grid;place-items:center;width:42px;height:42px;margin:-4px -6px 0 0;
  border:1px solid var(--cd-line-2);background:transparent;color:var(--ink);
  cursor:pointer;transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent
}
.cd__x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
@media(hover:hover){.cd__x:hover{background:var(--cd-white);border-color:var(--ink)}}

/* ---------- scrolling body ---------- */
.cd__body{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scroll-padding-bottom:40px;
  padding:clamp(20px,2.2vw,26px) clamp(22px,2.4vw,32px) calc(30px + env(safe-area-inset-bottom,0px))
}
.cd__sub{margin:0 0 22px;font-size:15px;line-height:1.55;color:var(--muted-on-paper);max-width:46ch}

/* ---------- form ---------- */
.cd__field{margin-bottom:17px}
.cd__label{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)
}
.cd__opt{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--cd-mute)}
.cd__req{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--gold)}
.cd__input{
  display:block;width:100%;padding:13px 14px;
  border:1px solid var(--cd-line-2);background:var(--cd-white);
  font-family:var(--text);font-size:15px;line-height:1.5;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;border-radius:0
}
.cd__input::placeholder{color:rgba(6,11,17,.38)}
.cd__input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(166,128,46,.18)}
textarea.cd__input{min-height:118px;resize:vertical}
select.cd__input{
  padding-right:40px;cursor:pointer;color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23060B11' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px
}
select.cd__input:invalid,select.cd__input option[value=""]{color:rgba(6,11,17,.42)}
.cd__hint{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--cd-mute)}

/* error: a glyph and a sentence carry it, not the colour alone */
.cd__err{display:flex;align-items:flex-start;gap:7px;margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--cd-err)}
.cd__err::before{
  content:"!";flex:none;display:grid;place-items:center;width:15px;height:15px;margin-top:1px;
  border:1px solid currentColor;border-radius:50%;
  font-family:var(--mono);font-size:10px;font-weight:700;line-height:1
}
.cd__input[aria-invalid="true"]{border-color:var(--cd-err);background:var(--cd-err-fill)}
.cd__input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(140,47,30,.16)}

/* honeypot — present for Netlify, never shown or reachable */
.cd__pot{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- submit ---------- */
.cd__submit{
  display:block;width:100%;margin-top:24px;padding:17px 22px;border:0;
  background:var(--goldl);color:var(--midnight);
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:background .2s
}
@media(hover:hover){.cd__submit:hover{background:var(--gold)}}
.cd__submit[disabled]{background:rgba(166,128,46,.4);color:rgba(6,11,17,.58);cursor:default}
.cd__fine{margin:13px 0 0;font-size:12px;line-height:1.5;color:var(--cd-mute)}
.cd__fine a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cd__fine a:hover{color:var(--ink)}

/* ---------- submission failed ---------- */
.cd__fail{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px;padding:15px 16px;
  border:1px solid var(--cd-err);background:var(--cd-err-fill)
}
.cd__fail p{margin:0;flex:1 1 220px;font-size:13.5px;line-height:1.5;color:var(--cd-err)}
.cd__retry{
  flex:none;padding:11px 18px;border:1px solid var(--cd-err);background:transparent;color:var(--cd-err);
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:background .15s,color .15s
}
@media(hover:hover){.cd__retry:hover{background:var(--cd-err);color:var(--cd-white)}}

/* ---------- success ---------- */
.cd__done{padding-top:6px}
.cd__done:focus,.cd__done:focus-visible{outline:none}
.cd__done h3{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(23px,2.2vw,28px);letter-spacing:-.02em;line-height:1.1
}
.cd__done p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--muted-on-paper);max-width:42ch}
.cd__done .cd__submit{margin-top:28px}

/* ---------- mobile and narrow tablets: a full-screen sheet ---------- */
@media(max-width:860px){
  .cd__panel{
    width:100%;border-left:0;box-shadow:none;
    padding-left:env(safe-area-inset-left,0px)
  }
  .cd__head{padding:calc(18px + env(safe-area-inset-top,0px)) 20px 16px}
  .cd__title{font-size:26px}
  .cd__x{width:46px;height:46px;margin:-6px -8px 0 0}
  .cd__body{padding:20px 20px calc(34px + env(safe-area-inset-bottom,0px))}
  .cd__sub{font-size:15px;margin-bottom:20px}
  /* 16px stops iOS zooming the page when a field takes focus */
  .cd__input{font-size:16px;padding:14px}
  textarea.cd__input{min-height:126px}
  .cd__field{margin-bottom:18px}
  .cd__submit{padding:18px 22px}
  .cd__retry{width:100%;padding:14px 18px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .cd__panel{transition:none}
  .cd::backdrop{transition:none}
}