/* contact.css */

/* ================= NAV ================= */

/* ================= SERVICE CARD ================= */
.card{display:flex;flex-direction:column;background:#fdfbff;text-decoration:none;color:#23004c;
  position:relative;box-shadow:0 0 0 1px rgba(35,0,76,.12);
  transition:box-shadow .18s ease,transform .18s ease}
.card:hover{box-shadow:0 0 0 1px #7200d7,0 14px 30px -18px rgba(35,0,76,.4);transform:translateY(-2px)}
.card .tile{position:relative;display:block;aspect-ratio:16/9}
.card .clip{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;display:block}
.card .photo{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#e4d9f8;
  background-size:cover;background-position:center;transition:transform .45s ease}
.card:hover .photo{transform:scale(1.045)}
.card .icontile{position:absolute;top:0;right:0;bottom:0;left:0;background:#f2e8fe;
  display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(rgba(114,0,215,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(114,0,215,.07) 1px,transparent 1px);
  background-size:16px 16px;transition:background-color .18s ease}
.card:hover .icontile{background-color:#e9dcfb}
.card .veil{position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg,rgba(35,0,76,0) 55%,rgba(35,0,76,.28) 100%);
  opacity:0;transition:opacity .25s ease}
.card:hover .veil{opacity:1}
.card .nobadge{padding-top:22px}
.card .badge{position:absolute;left:16px;bottom:-18px;width:40px;height:40px;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(35,0,76,.14);
  transition:background .18s ease}
.card .badge svg{stroke:#23004c;transition:stroke .18s ease}
.card:hover .badge{background:#7200d7}
.card:hover .badge svg{stroke:#fff}
.card .wipe{position:absolute;left:0;bottom:0;height:3px;width:0;background:#7200d7;transition:width .28s ease}
.card:hover .wipe{width:100%}
.card:hover .cta{color:#7200d7}
/* ================= FORM FIELDS ================= */
.fld{font-family:inherit;font-size:14px;padding:12px;border:0;border-radius:4px;background:#fff;
  color:#23004c;box-shadow:inset 0 0 0 1px rgba(35,0,76,.2);transition:box-shadow .16s ease}
.fld:focus{outline:none;box-shadow:inset 0 0 0 2px #7200d7}
.fld::placeholder{color:#8e7cab}
.plan{background:#fdfbff;box-shadow:0 0 0 1px rgba(35,0,76,.12);padding:22px 24px;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;transition:box-shadow .18s ease}
.plan:hover{box-shadow:0 0 0 1px #7200d7}
.faqq{width:100%;background:none;border:0;padding:20px 0;display:flex;justify-content:space-between;
  align-items:center;gap:20px;cursor:pointer;text-align:left;font-family:inherit;font-size:16.5px;
  font-weight:500;color:#23004c;letter-spacing:-.01em;transition:color .16s ease}
.faqq:hover{color:#7200d7}
/* deep solid tier, for the secondary CTA the inner pages already used */
.btn-ink{background:#23004c;color:#fff;box-shadow:0 8px 20px -10px rgba(35,0,76,.7)}
.btn-ink .chip{background:rgba(255,255,255,.16)}
.btn-ink:hover{background:#7200d7;color:#fff}
.btn-ink:hover .chip{background:rgba(255,255,255,.26)}
/* ================= CONTACT: the studio console =================
   The page's one real differentiator is that two hemispheres keep it
   staffed, so the left column is built as a working console rather than
   a list of details: live clocks, an open/closed marker, hairline grid.
   The form stays a light card -- it is the conversion surface and has to
   stay calm and legible against all of that. */

.cx{position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 12% 0%,#3a0074 0%,#2a0057 38%,#1b0038 100%)}
/* the grid: two hairline sets, fading out before they reach the form */
.cx-grid{position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,rgba(203,170,247,.13) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(to bottom,rgba(203,170,247,.10) 0 1px,transparent 1px 88px);
  -webkit-mask-image:radial-gradient(85% 70% at 18% 30%,#000 0%,transparent 78%);
  mask-image:radial-gradient(85% 70% at 18% 30%,#000 0%,transparent 78%)}
/* one warm bloom so the field is not flat purple */
.cx-glow{position:absolute;width:760px;height:760px;left:-240px;top:-300px;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,147,51,.22) 0%,rgba(255,147,51,0) 62%)}
.cx-in{position:relative;max-width:1280px;margin:0 auto;padding:54px 40px 68px;
  display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:start}
/* ---- the clock rail ---- */
.cx-rail{display:flex;align-items:stretch;gap:0;margin-bottom:26px;
  border:1px solid rgba(203,170,247,.22);border-radius:12px;overflow:hidden;
  background:rgba(12,0,28,.42);backdrop-filter:blur(2px)}
.cx-cell{flex:1;padding:13px 16px;border-right:1px solid rgba(203,170,247,.16)}
.cx-cell:last-child{border-right:0}
.cx-city{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:#b394e0;margin-bottom:5px}
.cx-time{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:19px;
  font-weight:500;color:#fff;letter-spacing:.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.cx-state{display:flex;align-items:center;gap:7px;margin-top:7px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:#ffb066}
.cx-dot{width:6px;height:6px;border-radius:50%;background:#ff9333;flex:none;
  box-shadow:0 0 0 0 rgba(255,147,51,.55);animation:cxpulse 2.4s ease-out infinite}
@keyframes cxpulse{
  0%{box-shadow:0 0 0 0 rgba(255,147,51,.5)}
  70%{box-shadow:0 0 0 7px rgba(255,147,51,0)}
  100%{box-shadow:0 0 0 0 rgba(255,147,51,0)}}
/* ---- display type ---- */
.cx-eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#ff9333;margin-bottom:16px;
  display:flex;align-items:center;gap:12px}
.cx-eyebrow::after{content:"";flex:1;height:1px;max-width:120px;
  background:linear-gradient(90deg,rgba(255,147,51,.5),transparent)}
.cx-h1{font-weight:700;font-size:58px;line-height:1.02;letter-spacing:-.042em;
  margin:0 0 20px;color:#fff}
.cx-h1 em{font-style:normal;color:#ff9333}
.cx-lede{margin:0 0 30px;max-width:450px;font-size:16.5px;line-height:1.62;
  color:#d8c8f0}
/* ---- assurances, as console readouts ---- */
.cx-list{display:flex;flex-direction:column;gap:0;margin-bottom:30px;
  border-top:1px solid rgba(203,170,247,.2)}
.cx-item{display:flex;gap:13px;align-items:baseline;padding:12px 2px;
  border-bottom:1px solid rgba(203,170,247,.12);
  font-size:13.5px;line-height:1.5;color:#e2d6f6}
.cx-tick{flex:none;width:14px;height:14px;color:#ff9333;transform:translateY(2px)}
/* ---- detail cells ---- */
.cx-blocks{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(203,170,247,.18);
  border:1px solid rgba(203,170,247,.18);border-radius:12px;overflow:hidden}
.cx-block{background:rgba(16,0,38,.72);padding:18px 20px;transition:background .2s ease}
.cx-block:hover{background:rgba(44,0,92,.8)}
.cx-bhead{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;color:#b394e0;margin-bottom:8px}
.cx-bbody{font-size:14px;line-height:1.5;color:#fff;
  white-space:pre-line}
 /* the office cells put the number on its own line */
.cx-block a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,147,51,.5)}
.cx-block a:hover{color:#ff9333}
/* ---- the form card ---- */
.cx-form{background:#fdfbff;border-radius:14px;
  box-shadow:0 0 0 1px rgba(203,170,247,.28),0 34px 70px -34px rgba(0,0,0,.75);
  padding:32px 30px;display:flex;flex-direction:column;gap:17px}
.cx-fhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-bottom:1px solid rgba(35,0,76,.12);padding-bottom:15px}
.cx-ftitle{font-size:18px;font-weight:600;margin:0;letter-spacing:-.015em;color:#23004c}
.cx-fnote{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:#9c3807}
.cx-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cx-lab{display:flex;flex-direction:column;gap:7px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:#6b5a8c}
.cx-field{font-family:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14.5px;padding:12px 13px;border:1px solid rgba(35,0,76,.22);
  border-radius:8px;background:#fff;color:#23004c;width:100%;box-sizing:border-box;
  transition:border-color .16s ease,box-shadow .16s ease}
.cx-field::placeholder{color:#6b5a8c;opacity:1}
 /* browser default is 3.9:1 */
.cx-field:hover{border-color:rgba(35,0,76,.4)}
.cx-field:focus{outline:0;border-color:#c94c0b;box-shadow:0 0 0 3px rgba(255,147,51,.28)}
.cx-chip{font-family:inherit;font-size:12.5px;padding:9px 14px;border-radius:100px;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease;
  border:1px solid rgba(35,0,76,.24);background:#fff;color:#33204f;position:relative;user-select:none}
/* chips are checkboxes: the box is visually hidden, the label shows the state */
.cx-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cx-chip:has(input:checked){border-color:#23004c;background:#23004c;color:#f6f1fd}
.cx-chip:has(input:focus-visible){outline:2px solid #c94c0b;outline-offset:2px}
.cx-chip:hover{transform:translateY(-1px)}
.cx-chip:focus-visible{outline:2px solid #c94c0b;outline-offset:2px}
.cx-fine{font-size:11.5px;color:#6b5a8c;text-align:center}
@media (max-width:980px){
  .cx-in{grid-template-columns:1fr;gap:38px;padding:40px 24px 52px}
  .cx-h1{font-size:40px}
  .cx-glow{width:460px;height:460px;left:-180px;top:-200px}
}
@media (max-width:640px){
  .cx-in{padding:32px 18px 44px}
  .cx-h1{font-size:33px}
  .cx-rail{flex-direction:column}
  .cx-cell{border-right:0;border-bottom:1px solid rgba(203,170,247,.16)}
  .cx-cell:last-child{border-bottom:0}
  .cx-blocks,.cx-row{grid-template-columns:1fr}
  .cx-form{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  .cx-dot{animation:none}
  .cx-chip,.cx-field,.cx-block{transition:none}
}

/* honeypot field, kept off screen */
.cx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* form result message */
.cx-status{margin:0;padding:12px 14px;border-radius:8px;font-size:13.5px;line-height:1.5;background:#f6f1fd;color:#23004c}
.cx-status.is-error{background:#fdecea;color:#8a1c12}
.cx-form button[disabled]{opacity:.7;cursor:progress}