:root{
  --navy-bg:#0D1A28;--navy:#1E2B3C;--navy-2:#263446;--strip:#2C3A4A;
  --orange:#FF4D00;--orange-hover:#e64500;--dark-grey:#4A5568;--mid-grey:#718096;
  --border:#E2E8F0;--bg-light:#F3F4F6;--white:#FFFFFF;--link:#3B6CB7;
  --ok-bg:#D4EDDA;--ok-tx:#155724;--err-bg:#FDE8E8;--err-tx:#7B1C1C;
  --font:system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:12px;
  --sh-card:0 8px 32px rgba(30,43,60,.15);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);color:var(--navy);background:var(--navy-bg);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100%}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── TOP STRIP ── */
.topstrip{background:var(--strip);color:rgba(255,255,255,.65);font-size:12px;flex-shrink:0}
.topstrip .in{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:18px;height:34px;flex-wrap:wrap}
.topstrip a{color:rgba(255,255,255,.75);display:inline-flex;align-items:center;gap:5px}
.topstrip a:hover{color:#fff}
.topstrip .sep{margin-left:auto;color:rgba(255,255,255,.55)}
.topstrip .sep strong{color:rgba(255,255,255,.85)}
.tp-ico{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* ── MAIN SPLIT ── */
.split{flex:1;display:grid;grid-template-columns:1.05fr .95fr;min-height:0}

/* LEFT — ring bg + hero + login box */
.left{position:relative;overflow:hidden;background:var(--navy-bg);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:56px 60px}
.left-bg{position:absolute;inset:0;background:var(--navy-bg);z-index:0}
.left-veil{display:none}
.left-in{position:relative;z-index:2;max-width:560px}
.hero-logo{width:250px;max-width:70vw;margin-bottom:32px}
.hero-tagline{font-size:16px;color:rgba(255,255,255,.82);margin-bottom:22px}
.hero-tagline em{color:var(--orange);font-style:italic;font-weight:700}
.hero-h1{font-size:34px;line-height:1.18;font-weight:700;margin-bottom:16px}
.hero-h1 .accent{color:var(--orange)}
.hero-sub{font-size:15px;color:rgba(255,255,255,.7);max-width:480px;margin-bottom:30px}

/* existing-clients login box (matches attachment) */
.existing-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);padding:22px;max-width:480px}
.existing-box .eb-label{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.6);margin-bottom:13px;font-weight:700}
.eb-note{font-size:13px;color:rgba(255,255,255,.55);margin-top:14px;line-height:1.5}
.eb-note a{color:#fff;text-decoration:underline}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:var(--r-md);cursor:pointer;border:1.5px solid transparent;transition:all .16s;white-space:nowrap;width:100%}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-hover);border-color:var(--orange-hover)}

/* RIGHT — form panel */
.right{background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:56px 60px;position:relative;overflow:hidden}
.right::before{content:'';position:absolute;right:-110px;top:-110px;width:320px;height:320px;border-radius:50%;border:38px solid rgba(255,77,0,.09)}
.right::after{content:'';position:absolute;left:-70px;bottom:-110px;width:260px;height:260px;border-radius:50%;border:30px solid rgba(255,255,255,.04)}
.form-card{position:relative;z-index:2;background:var(--white);color:var(--navy);border-radius:var(--r-xl);box-shadow:var(--sh-card);padding:32px 30px;max-width:460px;width:100%;margin:0 auto}
.form-card h3{font-size:20px;font-weight:700;margin-bottom:4px}
.form-card .fc-sub{font-size:13px;color:var(--mid-grey);margin-bottom:22px}
.field{margin-bottom:15px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--dark-grey);margin-bottom:5px}
.field input{width:100%;height:42px;border:.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg-light);
  padding:0 12px;font-size:14px;color:var(--navy);transition:border-color .15s,box-shadow .15s,background .15s}
.field input::placeholder{color:#a9b2bd}
.field input:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(255,77,0,.1)}
.field.invalid input{border-color:var(--err-tx);background:#fff}
.field .err{display:none;font-size:11px;color:var(--err-tx);margin-top:4px}
.field.invalid .err{display:block}
.form-note{font-size:11px;color:var(--mid-grey);margin-top:12px;text-align:center;line-height:1.5}
.form-success{display:none;background:var(--ok-bg);color:var(--ok-tx);border-radius:var(--r-md);padding:16px;font-size:14px;text-align:center;font-weight:600;line-height:1.5}
.form-success.show{display:block}

/* ── SLIM FOOTER ── */
.footer{flex-shrink:0;background:var(--navy-bg);color:rgba(255,255,255,.55);font-size:12px;border-top:1px solid rgba(255,255,255,.08)}
.footer .in{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer .fword{display:flex;align-items:center;gap:7px}
.footer .fring{width:18px;height:18px;border-radius:50%;border:2px solid var(--orange);position:relative}
.footer .fring::after{content:'';position:absolute;inset:3px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4)}
.footer .fw1{font-size:13px;font-weight:300;letter-spacing:.12em;color:#fff}
.footer .fw2{font-size:12px;font-style:italic;font-weight:700;background:var(--orange);padding:0 7px;border-radius:3px;color:#fff}
.footer a{color:rgba(255,255,255,.7)}
.footer a:hover{color:#fff}
.footer .fsep{margin-left:auto;color:rgba(255,255,255,.4)}
.footer .fdiv{color:rgba(255,255,255,.25)}

/* ── RESPONSIVE ── */
/* Stacked layout. Also triggered by a SHORT viewport: a phone turned to landscape (e.g. 956x440)
   is wider than 900px but has nowhere near the height the two-column grid needs. */
@media(max-width:900px),(max-height:600px){
  /* Stacked layout must size to its content, not the viewport. With the desktop rules
     (body height:100%, .split flex:1) the grid rows get squeezed to the screen height and the
     overflow:hidden sections clip the form card top and bottom - the card slid under the top
     strip and the Submit button fell off the bottom on phones. */
  html,body{height:auto;min-height:100%}
  .split{display:block;flex:none}
  .left,.right{padding:48px 32px;min-height:0;justify-content:flex-start}
  .hero-h1{font-size:30px}
  .left-in,.existing-box,.form-card{max-width:560px;margin-left:auto;margin-right:auto}
  .left-in{text-align:left}
}

/* Phones (either orientation - see the max-height clause). The client system is desktop-only, so the Existing Clients box (login button + its
   "trouble signing in" note) is not shown at all - a heading with no button under it would only
   confuse. Everything else is sized for a thumb: 16px inputs (stops iOS zooming the form), 48px
   tap targets, one column throughout.

   Vertical rhythm - one 40px unit between every stacked block:
     hero (40 top) -> [logo 16 / tagline 16 / h1 12 / sub] (40 bottom)
     -> form section (40 top, card, 40 bottom) -> footer (20 top/bottom, hairline above)  */
@media(max-width:767px),(max-height:500px){
  .existing-box{display:none}

  .topstrip{display:none} /* phone + email are repeated in the footer */

  .left,.right{padding:40px 20px}
  .left{border-bottom:1px solid rgba(255,255,255,.08)}
  .hero-logo{width:200px;margin:0 auto 28px}
  .hero-tagline{font-size:15px;margin-bottom:16px}
  .hero-h1{font-size:26px;margin-bottom:12px}
  .hero-sub{font-size:14px;line-height:1.55;margin-bottom:0}

  .right::before,.right::after{display:none}
  .form-card{padding:24px 20px;border-radius:var(--r-lg);box-shadow:0 4px 18px rgba(0,0,0,.25)}
  .form-card h3{font-size:18px}
  .form-card .fc-sub{margin-bottom:20px}
  .field{margin-bottom:14px}
  .field input{height:48px;font-size:16px}
  .field .err{font-size:12px}
  .btn{min-height:48px;font-size:16px}
  .form-note{margin-top:14px}

  .footer .in{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px}
  .footer .fdiv{display:none}
  .footer .fsep{margin-left:0;margin-top:4px}
}
@media(max-width:520px),(max-height:400px){
  .left,.right{padding:32px 16px}
  .hero-h1{font-size:24px}
}