/* Contact page (/contact) — the "Let's talk" destination. A ct- layer on the
   blog/work theme system: page chrome reads the --pg-* tokens (blog.css owns
   those), while the form card itself reuses the main.css primitives (.form-card,
   .field, .budget-pills) and stays the elevated WHITE card in both themes —
   white-on-deck carries its own edge, so no dark-theme keyline is needed.
   Only additions here are layout, the rail, and the drop-a-brief zone. */

.ct-shell{padding-bottom:0}
.ct-top{display:flex;align-items:center;justify-content:space-between;gap:24px}
.ct-head h1{font-weight:800;font-size:clamp(2.875rem,6vw,5.25rem);letter-spacing:-.045em;line-height:.95;
  margin:18px 0 0;max-width:14ch}
.ct-head h1 .ct-tail{color:var(--pg-accent-lg)}
.ct-cycle{display:inline-block;will-change:transform,opacity}

/* form takes the wider column — it's the point of the page */
.ct-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(44px,6vw,96px);
  align-items:start;padding:clamp(44px,6vw,72px) 0 clamp(70px,8vw,110px)}
.ct-rail{position:sticky;top:118px}
.ct-rail .lead{font-size:1.125rem;line-height:1.55;color:var(--pg-fg-2);max-width:38ch;margin:0 0 30px}
.ct-rail .fly-seal{margin-bottom:34px}
.ct-page .fly-ring text{fill:var(--pg-fg)} /* main.css pins the ring ink for the light break; here it follows the theme */

/* contact rows: mono utility label + the detail */
.ct-row{display:grid;grid-template-columns:86px 1fr;gap:18px;align-items:baseline;
  padding:15px 0;border-top:1px solid var(--pg-line)}
.ct-row:last-of-type{border-bottom:1px solid var(--pg-line)}
.ct-lab{font-family:'IBM Plex Mono',monospace;font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--pg-fg-2)}
.ct-val{font-family:var(--sans);font-weight:600;font-size:.9375rem;color:var(--pg-fg)}
a.ct-val{position:relative;display:inline-block;transition:transform .25s}
a.ct-val::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--orange);transition:width .3s}
a.ct-val:hover{transform:translateX(3px)} a.ct-val:hover::after{width:100%}

/* the card gets a little more room than its homepage cousin */
.ct-page .form-card{padding:clamp(30px,3.4vw,44px)}

/* the drop-a-brief zone + file chips live in main.css now — they're part of the
   shared form card (partials/contact-form.html) on every contact section */

@media(max-width:880px){
  .ct-grid{grid-template-columns:1fr;gap:44px}
  .ct-rail{position:static}
  .ct-rail .fly-seal{width:120px;margin-bottom:26px}
}