/* ============================================================================
   contact.css — full-screen Contact overlay.  OWNED by the "contact" agent.
   Dark, cinematic, editorial. Vanilla; open/close driven by contact.js.
   Header/nav (hero.css) are z-index:130 and stay on top — we keep ~96px clear
   at the top so the chrome never collides with the content.
   ========================================================================== */
#contact-root:empty{ display:none; }

/* ---- scroll lock while open (page behind stays put) ---- */
body.contact-lock{ overflow:hidden; }

/* ---- scrim ---- */
.ct-scrim{ position:fixed; inset:0; z-index:100; background:#000000cc;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; }

/* ---- glass token (shared by close + copy + rows) ---- */
.ct-glass{ border:0; color:#fff; cursor:pointer; background:#000000bf;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px #ffffff33 inset;
  transition:box-shadow .3s cubic-bezier(.25,.46,.45,.94), opacity .3s cubic-bezier(.25,.46,.45,.94), transform .3s cubic-bezier(.25,.46,.45,.94); }
.ct-glass:hover{ box-shadow:0 0 13px #b2b2b2 inset; }
.ct-glass:focus-visible{ outline:0; box-shadow:0 0 0 1px #fff inset, 0 0 13px #b2b2b2 inset; }

/* ---- close (top-right) ---- */
.ct-close{ position:fixed; top:20px; right:24px; z-index:103;
  width:38px; height:38px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; }
.ct-close svg{ display:block; }

/* ---- overlay host ---- */
#contact-root{ position:fixed; inset:0; z-index:101; display:flex;
  align-items:center; justify-content:center; pointer-events:none; }
#contact-root .ct-scrim,
#contact-root .ct-close,
#contact-root .ct-panel{ pointer-events:auto; }

/* ---- panel (transparent editorial sheet; scrim provides the tint) ---- */
.ct-panel{ position:relative; z-index:101;
  width:min(920px,92vw); max-height:88vh; overflow:auto;
  padding:96px 6vw 72px; box-sizing:border-box;
  scrollbar-width:thin; scrollbar-color:#ffffff33 transparent;
  will-change:transform,opacity; }
.ct-panel::-webkit-scrollbar{ width:6px; }
.ct-panel::-webkit-scrollbar-thumb{ background:#ffffff22; border-radius:6px; }
.ct-panel:focus{ outline:0; }

/* open transition (set inline by JS; declared here for reduced-motion override) */

/* ---- eyebrow ---- */
.ct-eyebrow{ display:block; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; opacity:.5; margin-bottom:22px; }

/* ---- big statement line ---- */
.ct-statement{ font-size:clamp(44px,8vw,104px); font-weight:600; line-height:.98;
  letter-spacing:-.02em; margin:0 0 6px; }
.ct-role{ font-size:clamp(16px,2vw,20px); font-weight:500; line-height:1.4;
  opacity:.6; margin:0 0 48px; max-width:40ch; }

/* ---- email block ---- */
.ct-emailwrap{ display:flex; align-items:center; flex-wrap:wrap; gap:18px 20px;
  padding:26px 0; border-top:1px solid #ffffff14; }
.ct-email{ font-size:clamp(24px,4.4vw,44px); font-weight:600; letter-spacing:-.01em;
  line-height:1.04; color:#fff; text-decoration:none; word-break:break-word;
  opacity:.92; transition:opacity .3s cubic-bezier(.25,.46,.45,.94); }
.ct-email:hover{ opacity:1; text-decoration:underline; text-underline-offset:5px;
  text-decoration-thickness:1px; }
.ct-email:focus-visible{ outline:2px solid #fff; outline-offset:4px; border-radius:3px; }

.ct-copy{ display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:6px; font-family:inherit;
  font-size:12px; font-weight:600; letter-spacing:.04em; white-space:nowrap; }
.ct-copy svg{ display:block; opacity:.9; }
.ct-copy.is-copied{ box-shadow:0 0 13px #b2b2b2 inset; }
.ct-copy .ct-copy-label{ min-width:44px; text-align:left; }

/* ---- link rows ---- */
.ct-links{ display:flex; flex-direction:column; gap:10px;
  padding:30px 0 4px; border-top:1px solid #ffffff14; margin-top:8px; }
.ct-row{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; border-radius:6px; text-decoration:none; color:#fff; }
.ct-row-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ct-row-label{ font-size:10px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; opacity:.42; }
.ct-row-value{ font-size:16px; font-weight:500; opacity:.9;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-row-arrow{ flex:0 0 auto; opacity:.5;
  transition:transform .3s cubic-bezier(.25,.46,.45,.94), opacity .3s cubic-bezier(.25,.46,.45,.94); }
.ct-row:hover .ct-row-arrow{ transform:translate(3px,-3px); opacity:.9; }
.ct-row-arrow svg{ display:block; }

/* ---- location ---- */
.ct-location{ margin-top:34px; font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; opacity:.4; }

/* ---- copied toast (aria-live) ---- */
.ct-live{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:800px){
  .ct-panel{ padding:96px 26px 56px; }
  .ct-role{ margin-bottom:34px; }
  .ct-emailwrap{ gap:14px; }
  .ct-close{ top:14px; right:16px; }
  .ct-row{ padding:16px 18px; }
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  .ct-panel{ transition:opacity .24s linear !important; transform:none !important; }
  .ct-glass{ transition:box-shadow .2s linear, opacity .2s linear; }
  .ct-row-arrow{ transition:opacity .2s linear; }
  .ct-email{ transition:none; }
}