/* Slide-out contact panel, on every page. The handle lives on the right edge;
   back-to-top is bottom-left, so the two never meet. */

/* ---------- the handle ---------- */
.ctab{
  position:fixed;z-index:75;
  right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  margin:0;padding:18px 11px;
  border:0;border-radius:4px 0 0 4px;
  background:var(--accent-solid);color:#fff;
  font-family:var(--f-display);font-size:.76rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;line-height:1;
  cursor:pointer;
  box-shadow:-4px 0 18px rgba(6,10,20,.24);
  transition:background .16s ease,padding .16s ease;
}
.ctab span{writing-mode:vertical-rl;text-orientation:mixed}
.ctab svg{width:16px;height:16px;flex:0 0 auto}
.ctab:hover{background:var(--accent-solid-2);padding-inline:14px 11px}
.ctab:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* The handle slides out of the way rather than sitting under the open panel. */
.cpanel.is-open ~ .ctab,
body.cpanel-open .ctab{transform:translateY(-50%) translateX(110%)}

@media (max-width:560px){
  .ctab{
    top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    transform:none;flex-direction:row;gap:8px;
    padding:13px 16px;border-radius:4px 0 0 4px;
  }
  .ctab span{writing-mode:horizontal-tb}
  body.cpanel-open .ctab{transform:translateX(110%)}
}

/* ---------- the panel ---------- */
.cpanel{
  position:fixed;inset:0;z-index:90;
  visibility:hidden;pointer-events:none;
}
.cpanel.is-open{visibility:visible;pointer-events:auto}

.cscrim{
  position:absolute;inset:0;
  background:rgba(6,10,20,.55);
  opacity:0;transition:opacity .26s ease;
}
.cpanel.is-open .cscrim{opacity:1}

.cbox{
  position:absolute;top:0;right:0;bottom:0;
  width:min(430px,100%);
  background:var(--paper);
  border-left:3px solid var(--copper);
  box-shadow:-18px 0 50px rgba(6,10,20,.32);
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(26px,3.4vw,38px) clamp(22px,3vw,34px) 40px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.7,.28,1);
}
.cpanel.is-open .cbox{transform:none}

body.cpanel-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .cscrim,.cbox,.ctab{transition:none}
}

/* ---------- panel chrome ---------- */
.cclose{
  position:absolute;top:14px;right:14px;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:4px;
  background:var(--surface);color:var(--ink-2);
  cursor:pointer;font-size:1.1rem;line-height:1;
}
.cclose:hover{border-color:var(--copper);color:var(--copper)}
.cclose svg{width:15px;height:15px}

.cbox h2{font-size:clamp(1.5rem,3vw,1.9rem);letter-spacing:-.022em;max-width:11ch}
.cbox .eyebrow{margin-bottom:9px}
.cintro{
  margin-top:13px;font-size:.99rem;line-height:1.55;color:var(--ink-2);
  padding-bottom:20px;border-bottom:1px solid var(--rule);
}
.cintro b{color:var(--ink);font-weight:600}

/* ---------- fields ---------- */
.cbox form{margin-top:20px;display:flex;flex-direction:column;gap:15px}
.cbox .row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media (max-width:420px){ .cbox .row{grid-template-columns:1fr} }
.cbox .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cbox label{
  font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
}
.cbox label .opt{color:var(--ink-3);font-weight:400;letter-spacing:.04em}
.cbox input[type=text],
.cbox input[type=email],
.cbox input[type=tel],
.cbox select,
.cbox textarea{
  font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:4px;padding:10px 11px;width:100%;
}
.cbox textarea{min-height:110px;resize:vertical;line-height:1.5}
.cbox select{font-family:var(--f-display);font-size:.95rem}
.cbox input:focus-visible,
.cbox select:focus-visible,
.cbox textarea:focus-visible{
  outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper);
}
.cbox input:user-invalid,.cbox textarea:user-invalid{border-color:var(--copper)}

/* The consent line is a sentence, not a field label, so it opts out of the
   uppercase treatment the other labels get. */
.cbox .check{
  display:flex;gap:10px;align-items:flex-start;
  font-family:var(--f-body);font-size:.93rem;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--ink-2);line-height:1.45;
}
.cbox .check input{margin-top:3px;flex:0 0 auto;accent-color:var(--copper);width:auto}

/* the honeypot: off-screen, never announced, never tabbable */
.cbox .pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cbox button[type=submit]{width:100%;margin-top:3px}
.cbox button[type=submit][disabled]{opacity:.6;cursor:default}

.cnote{font-size:.85rem;line-height:1.5;color:var(--ink-3)}
.cnote a{color:var(--ink-2)}
.cnote a:hover{color:var(--copper)}

/* ---------- status ---------- */
.cstatus{font-size:.94rem;line-height:1.55}
.cstatus:empty{display:none}
.cstatus.is-ok,.cstatus.is-warn,.cstatus.is-bad,.cstatus.is-busy{
  padding:15px 16px;border-radius:4px;border-left:3px solid;
}
.cstatus.is-ok{background:color-mix(in srgb,var(--patina) 12%,transparent);border-color:var(--patina);color:var(--ink-2)}
.cstatus.is-warn{background:var(--surface-2);border-color:var(--steel);color:var(--ink-2)}
.cstatus.is-bad{background:color-mix(in srgb,var(--copper) 12%,transparent);border-color:var(--copper);color:var(--ink-2)}
.cstatus.is-busy{background:var(--surface-2);border-color:var(--rule-strong);color:var(--ink-3)}
.cstatus b{color:var(--ink);font-weight:600}
.cstatus a{color:var(--copper)}

.clink{
  border:0;background:none;padding:0;margin-left:4px;cursor:pointer;
  font-family:var(--f-display);font-size:.82rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--copper);text-decoration:underline;
}