/* Company Hub v2 — login gate. Full-viewport two-pane split (form + staff
   photography), deliberately richer than the Staff Hub login. Navy field,
   magic-link (no password). Splits at ~940px; below that panes stack, form
   first. Gold is used only on the eyebrow; orange only on the button. */

body.ch-login { margin: 0; background: var(--navy); color: var(--cream); font-family: var(--font-display); -webkit-font-smoothing: antialiased; }
.ch-login * { box-sizing: border-box; }
.ch-login-split { display: flex; flex-wrap: wrap; min-height: 100vh; }

/* Left — form */
.ch-login-form { flex: 1 1 460px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: clamp(32px,4vw,60px) clamp(28px,4vw,64px); min-height: min(100vh, 720px); }
.ch-login-logo { width: 98px; height: 64px; object-fit: contain; align-self: flex-start; flex: 0 0 auto; display: block; }
.ch-login-block { max-width: 460px; }
.ch-login-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.ch-login-h1 { font-size: clamp(34px,4vw,48px); font-weight: 300; line-height: 1.12; letter-spacing: -.01em; color: var(--cream); margin: 0 0 20px; text-wrap: pretty; }
.ch-login-body { font-size: 16px; font-weight: 300; line-height: 1.55; color: rgba(244,239,230,.7); margin: 0 0 34px; text-wrap: pretty; }
.ch-login-error { font-size: 13.5px; font-weight: 500; line-height: 1.5; color: #F4EFE6; background: rgba(243,84,31,.14); border: 1px solid rgba(243,84,31,.42); border-radius: 9px; padding: 12px 14px; margin: 0 0 22px; }

.ch-login-label { display: block; font-size: 13px; font-weight: 600; color: var(--cream); margin-bottom: 8px; }
.ch-login-input { width: 100%; background: transparent; border: none; border-bottom: 1.5px solid rgba(244,239,230,.35); padding: 10px 2px; font: 400 16px var(--font-display); color: var(--cream); }
.ch-login-input::placeholder { color: rgba(244,239,230,.4); }
.ch-login-input:focus { outline: none; border-bottom-color: var(--gold); }
.ch-login-btn { width: 100%; background: var(--signal-orange); color: #fff; border: none; border-radius: 9px; padding: 15px 20px; font: 600 14.5px var(--font-display); cursor: pointer; margin-top: 26px; transition: opacity .15s ease, transform .08s ease; }
.ch-login-btn:hover { opacity: .9; }
.ch-login-btn:active { transform: scale(.98); }
.ch-login-hint { font-size: 12.5px; font-weight: 300; line-height: 1.5; color: rgba(244,239,230,.55); margin-top: 14px; }

/* Sent state */
.ch-sent { border: 1px solid rgba(201,169,97,.4); border-radius: 9px; padding: 22px; background: rgba(244,239,230,.05); }
.ch-sent-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.ch-sent-body { font-size: 15.5px; font-weight: 300; line-height: 1.5; color: var(--cream); margin: 0; }
.ch-sent-body b { font-weight: 600; }
.ch-sent-actions { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.ch-textbtn { background: none; border: none; padding: 0; font: 300 13.5px var(--font-display); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ch-textbtn.alt { color: rgba(244,239,230,.7); }
.ch-textbtn.demo { color: var(--signal-orange); font-weight: 600; }

/* Keeps the form's vertical rhythm where the offices line used to sit. */
.ch-login-spacer { flex: 0 0 auto; height: 8px; }

/* Right — photography. The source is 16:9 but the pane is portrait, so the
   cover-crop is biased left (object-position) to keep the lighthouse in frame
   rather than letting a centre crop push it to the edge. Navy backing matches
   the form pane, so any letterbox on odd aspect ratios is invisible. */
.ch-login-photo { flex: 1 1 460px; position: relative; min-height: 420px; background: var(--navy); overflow: hidden; }
.ch-login-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% center; display: block; }

.ch-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) { .ch-login-btn:active { transform: none; } }