/* Contact page redesign, approved 2026-09-27: the Threads hero and a bigger,
 * wider enquiry form. Loaded after site.css so these rules are the ones that
 * win; nothing here is touched by any other page, and this file touches no
 * selector outside the contact hero and the enquiry form. */

/* ---- the dark hero: Threads canvas + the title over it ------------------ */
.cx-dark{position:relative;overflow:hidden;min-height:clamp(440px,62vh,640px);display:flex;align-items:flex-end;
  background:radial-gradient(120% 90% at 95% 45%,#1E3A5F 0%,#0E1C2A 55%,#08121E 100%)}
.cx-bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.cx-dark::after{content:"";position:absolute;inset:auto 0 0 0;height:140px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,18,30,0),rgba(8,18,30,.45))}
.cx-dark .subhero{position:relative;z-index:1;width:100%;padding-top:170px;padding-bottom:88px;border:0}
.cx-dark .eyebrow{color:#A9C1DA;letter-spacing:.2em}
.cx-dark h1.setwide{color:#F4F7FB}
.cx-dark h1.setwide span{color:#F4F7FB}
/* The brand Tally blue (#1F6BFF) in place of the preview's sky blue
   (#3B8CFF) — same gradient, DDX's own accent colour; it reads just as well
   against the dark navy. */
.cx-dark h1.setwide .accent{background:linear-gradient(92deg,#FFFFFF 0%,#BFD8FF 38%,#6FAAFF 70%,#1F6BFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:cxRise 1.1s cubic-bezier(.2,.7,.2,1) .18s both}
/* Opacity and transform only, so the browser can hand it to the GPU. Until
   9 October 2026 the rise also unblurred, and the accent ran an endless
   sheen across its gradient. Text painted through background-clip has to be
   repainted on the page's own thread for every frame of either; a trace on
   Dixon's machine put single paints of that one word at 200-500ms, and the
   page dropped to a few frames a second. The gradient itself stays. */
@keyframes cxRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.cx-dark h1.setwide span:first-child{animation:cxRise 1.1s cubic-bezier(.2,.7,.2,1) both}
.cx-dark .eyebrow{animation:cxRise .9s cubic-bezier(.2,.7,.2,1) both}
/* Rise-and-unblur is an entrance; reduced motion gets the still, final frame
   only — the canvas script makes the same call for the thread field. */
@media (prefers-reduced-motion:reduce){.cx-dark .eyebrow,.cx-dark h1.setwide span{animation:none!important}}

/* ---- the form: today's words, a bigger and wider column ------------------ */
/* Wider than the rest of the site (1160px), so a big screen is not two
   empty margins either side of the form (Dixon, 9 October 2026). The hero
   and the form use .wrap, so they still line up with each other here.
   The top bar is left out: site-wide it runs the full width (site.css
   .nav-in{max-width:none}), and the plain .wrap rule, loaded after it,
   capped it at 1480px on this page alone, so the logo and buttons moved
   when you arrived here (Dixon, 10 October 2026). */
.wrap:not(.nav-in){max-width:1480px}
.contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(56px,6vw,104px)}
@media (max-width:960px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

.form-card{background:#fff;border:1px solid #C2C9D2;border-radius:6px;
  box-shadow:0 22px 60px -30px rgba(11,15,25,.35)}
.form-card .cx-head{display:grid;grid-template-columns:1fr auto;gap:12px 16px;align-items:baseline;
  padding:24px 32px 20px;border-bottom:1px solid #E6E6E6;border-radius:6px 6px 0 0;
  font:500 15px/1.4 "Switzer",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#44536A}
.form-card .cx-head #wizName{font-size:21px;font-weight:600;color:#0B0F19;letter-spacing:-.01em}
.form-card .cx-head span.cx-direct{font-size:15px;letter-spacing:0;text-transform:none;color:#44536A}
.cx-progress{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.cx-progress i{height:6px;border-radius:3px;background:#DCE1E7}
.cx-progress[data-step="1"] i:nth-child(1),
.cx-progress[data-step="2"] i:nth-child(-n+2),
.cx-progress[data-step="3"] i{background:#1D2638}
.form-body{padding:28px 32px 32px;gap:24px}
.fstep.on{gap:24px}
.frow{gap:24px}
.lbl{display:block;font:600 17px/1.35 "Switzer",system-ui,sans-serif;letter-spacing:0;
  text-transform:none;color:#0B0F19;margin-bottom:10px}
.fld{height:58px;font:400 18px/1.4 "Switzer",system-ui,sans-serif;padding:0 18px;
  border:1.5px solid #7B8898;border-radius:4px;background:#fff;color:#0B0F19}
textarea.fld{height:auto;min-height:140px;padding:14px 18px;line-height:1.5}
select.fld{padding-right:44px}
.fld::placeholder{color:#5B6576;opacity:1}
.fld:focus{outline:none;border-color:#0B0F19;box-shadow:0 0 0 4px rgba(29,38,56,.2)}
.fld-err{font-size:15.5px;margin-top:8px;color:#A3382E}
.pick{min-height:50px;padding:12px 20px;font-size:16.5px;border:1.5px solid #7B8898;border-radius:4px;color:#0B0F19}
.pick.on{background:#1D2638;border-color:#1D2638;color:#fff}
.chiprow{gap:10px}
.meet-month{font-size:17px}
.meet-arrow{width:44px;height:44px;font-size:18px}
.meet-dow span{font-size:14px}
.meet-day{min-height:46px;font-size:16.5px}
.meet-slot{min-height:48px;font-size:16.5px}
.meet-picked{font-size:15px}
.meet-note{font-size:16px;line-height:1.55;color:#1D2638}
.optin{font-size:16.5px;line-height:1.55;color:#1D2638}
.optin input{width:22px;height:22px}
.wizfoot{margin-top:6px;padding-top:22px;border-top:1px solid #E6E6E6}
.wizfoot .note{font:500 15.5px/1.4 "Switzer",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#44536A}
.wizfoot .btn,.wizfoot .btn-ghost{height:56px;padding:0 30px;font-size:17px;font-weight:600;border-radius:4px}

@media (max-width:760px){
  .form-card .cx-head{padding:18px 20px 16px;grid-template-columns:1fr}
  .form-body{padding:22px 20px 24px}
  .frow{grid-template-columns:1fr}
  /* Square 46px days made a week 334px wide, wider than a 390px phone has
     room for, and the whole last step scrolled sideways. On a phone the days
     share the width instead; they still come out about 40px square. */
  .meet-dow,.meet-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .meet-day{min-height:0}
  .wizfoot>span{width:100%}
  .wizfoot .btn,.wizfoot .btn-ghost{flex:1}
}