/* ============================================================
   NEWBLADE — site stylesheet
   Light, editorial advisory aesthetic. Red as a sharp accent.
   Type: Archivo (display) · Hanken Grotesk (body)
   ============================================================ */

:root{
  --red:       #e31b23;
  --red-deep:  #b50f18;
  --red-tint:  #fcecec;

  --ink:       #1f2125;
  --slate:     #5b6068;
  --line:      #e6e4e0;
  --line-soft: #efedea;

  --paper:     #ffffff;
  --soft:      #f7f6f3;
  --soft-2:    #f0eee9;
  --coal:      #1d1f24;
  --coal-2:    #26282e;

  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --maxw:  1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --r:     20px;
  --r-lg:  28px;
  --ease:  cubic-bezier(.22,.61,.25,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,0.97rem + 0.2vw,1.075rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---- layout primitives ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(3.75rem,8vw,7rem); position:relative; }
.section--tight{ padding-block:clamp(2.25rem,4vw,3.5rem); }
.section--soft{ background:var(--soft); }
.section--coal{ background:var(--coal); color:#e9e9ec; }

/* ---- type ---- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.section--coal h1,.section--coal h2,.section--coal h3,.section--coal h4{ color:#fff; }

.display{
  font-size:clamp(2.7rem,1.7rem + 4.6vw,5.1rem);
  font-weight:800;
  line-height:0.98;
  letter-spacing:-0.04em;
}
h2.heading{ font-size:clamp(2.1rem,1.4rem + 2.8vw,3.5rem); letter-spacing:-0.035em; }
h3{ font-size:clamp(1.3rem,1.15rem + 0.7vw,1.55rem); }

.eyebrow{
  font-family:var(--font-display);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex; align-items:center; gap:0.6rem;
}
.eyebrow::before{
  content:""; width:1.7rem; height:2px; background:var(--red);
  border-radius:2px; flex:none;
}
.section--coal .eyebrow{ color:#ff6168; }
.section--coal .eyebrow::before{ background:#ff6168; }

.lead{
  font-size:clamp(1.1rem,1rem + 0.55vw,1.4rem);
  line-height:1.5;
  color:var(--slate);
  font-weight:400;
}
.section--coal .lead{ color:#c5c6cb; }
p + p{ margin-top:1rem; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--font-display);
  font-size:0.92rem; font-weight:700; letter-spacing:-0.01em;
  padding:0.95rem 1.6rem;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .2s var(--ease), background .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease),
             box-shadow .25s var(--ease);
}
.btn .arw{ transition:transform .25s var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }
.btn--solid{
  background:var(--red); color:#fff;
  box-shadow:0 12px 26px -10px rgba(227,27,35,.55);
}
.btn--solid:hover{ background:var(--red-deep); transform:translateY(-2px);
  box-shadow:0 16px 30px -10px rgba(227,27,35,.6); }
.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.section--coal .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.section--coal .btn--ghost:hover{ border-color:#fff; }

.tlink{
  font-family:var(--font-display); font-weight:700;
  font-size:0.95rem; color:var(--red);
  display:inline-flex; align-items:center; gap:0.45rem;
}
.tlink .arw{ transition:transform .25s var(--ease); }
.tlink:hover .arw{ transform:translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:#ffffff;
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{ display:inline-flex; align-items:center; color:var(--ink); }
.brand__logo{
  display:block; height:50px; width:auto; fill:currentColor;
}
@media (max-width:880px){ .brand__logo{ height:39px; } }

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.3rem); }
.nav a{
  font-family:var(--font-display);
  font-size:0.94rem; font-weight:600; color:var(--slate);
  position:relative; padding:0.3rem 0;
  transition:color .22s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-1px;
  width:100%; height:2px; background:var(--red); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav .nav__cta{
  background:var(--red); color:#fff;
  padding:0.72rem 1.3rem; border-radius:999px;
  box-shadow:0 10px 22px -10px rgba(227,27,35,.55);
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.nav .nav__cta::after{ display:none; }
.nav .nav__cta:hover{ background:var(--red-deep); color:#fff; transform:translateY(-2px); }

.nav-toggle{
  display:none; width:46px; height:46px; cursor:pointer;
  border:1px solid var(--line); border-radius:13px; background:#fff;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--ink);
  border-radius:2px; transition:.22s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:880px){
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:0.5rem var(--gutter) 1.6rem;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:.26s var(--ease);
  }
  .nav.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:1rem 0; font-size:1.05rem; border-bottom:1px solid var(--line-soft); }
  .nav a::after{ display:none; }
  .nav .nav__cta{ margin-top:1rem; text-align:center; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:clamp(3.5rem,7vw,6rem) clamp(3rem,6vw,5rem); }
.hero__grid{
  display:grid; grid-template-columns:1.08fr 0.92fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__text h1{ margin:1.4rem 0 1.5rem; }
.hero__text .lead{ max-width:36ch; }
.hero__actions{ margin-top:2.1rem; display:flex; flex-wrap:wrap; gap:0.9rem; }

.hero__card{
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 30px 60px -34px rgba(20,20,25,.28);
}
.hero__card h2{ font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);
  letter-spacing:-0.03em; }
.hero__card p{ color:var(--slate); margin-top:0.85rem; font-size:1rem; }
.signal-list{ display:grid; gap:0.7rem; margin-top:1.5rem; }
.signal{
  display:flex; align-items:center; gap:0.8rem;
  background:#fff; border:1px solid var(--line);
  border-radius:13px; padding:0.85rem 1rem;
  font-family:var(--font-display); font-weight:600; font-size:0.95rem;
}
.signal::before{
  content:""; width:8px; height:8px; flex:none;
  background:var(--red); border-radius:3px;
}

@media (max-width:840px){
  .hero__grid{ grid-template-columns:1fr; }
}

/* page-load reveal */
.reveal{ opacity:0; transform:translateY(16px);
  animation:rise .85s var(--ease) forwards; }
.reveal.d1{ animation-delay:.04s; }
.reveal.d2{ animation-delay:.14s; }
.reveal.d3{ animation-delay:.26s; }
.reveal.d4{ animation-delay:.38s; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
}

/* interior page head */
.pagehead{ padding-block:clamp(3rem,6vw,5.25rem) clamp(1.75rem,3vw,2.5rem); }
.pagehead h1{ margin-top:1.3rem; max-width:16ch; }
.pagehead .lead{ margin-top:1.4rem; max-width:60ch; }

/* ============================================================
   GENERIC BLOCKS
   ============================================================ */
.block-head{ max-width:760px; }
.block-head h2{ margin-top:1.1rem; }
.block-head .lead{ margin-top:1.15rem; }

.split{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:clamp(2rem,5vw,4rem); align-items:start;
}
@media (max-width:800px){ .split{ grid-template-columns:1fr; } }

/* card grid */
.grid{ display:grid; gap:1.1rem; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--top{ margin-top:clamp(2.25rem,4.5vw,3.25rem); }
@media (max-width:860px){ .grid--3{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .grid--3,.grid--2{ grid-template-columns:1fr; } }

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.6vw,2.1rem);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             border-color .25s var(--ease);
}
.section--soft .card{ background:#fff; }
.card:hover{
  transform:translateY(-4px);
  border-color:var(--line);
  box-shadow:0 24px 44px -26px rgba(20,20,25,.3);
}
.card__no{
  font-family:var(--font-display); font-weight:800;
  font-size:0.82rem; color:var(--red); letter-spacing:0.04em;
  display:flex; align-items:center; gap:0.55rem; margin-bottom:1.05rem;
}
.card__no::after{ content:""; flex:1; height:1px; background:var(--line); }
.card h3{ margin-bottom:0.6rem; }
.card p{ color:var(--slate); font-size:0.98rem; }

/* group label */
.grouplabel{
  font-family:var(--font-display); font-weight:700;
  font-size:0.82rem; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--slate);
  display:flex; align-items:center; gap:0.9rem;
  margin:clamp(2.5rem,5vw,3.5rem) 0 1.4rem;
}
.grouplabel::after{ content:""; flex:1; height:1px; background:var(--line); }
.grouplabel:first-of-type{ margin-top:clamp(2.25rem,4.5vw,3.25rem); }

/* spec / deliverables list */
.spec-list{ list-style:none; margin-top:clamp(2rem,4vw,2.75rem); }
.spec-list li{
  display:grid; grid-template-columns:auto 1fr; gap:1.3rem;
  padding:1.3rem 0; border-top:1px solid var(--line);
}
.spec-list li:last-child{ border-bottom:1px solid var(--line); }
.section--coal .spec-list li{ border-color:rgba(255,255,255,.13); }
.spec-list .num{
  font-family:var(--font-display); font-weight:800; font-size:0.92rem;
  color:var(--red);
}
.spec-list h3{ font-size:1.15rem; }
.spec-list p{ color:var(--slate); font-size:0.96rem; margin-top:0.3rem; }
.section--coal .spec-list p{ color:#b9babf; }

/* steps */
.steps{ margin-top:clamp(2.25rem,4.5vw,3.25rem); }
.step{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(1.4rem,3vw,2.4rem);
  padding:1.9rem 0; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step__no{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.3rem,4vw,3.2rem); color:var(--red-tint);
  -webkit-text-stroke:1.5px var(--red); line-height:0.9;
}
.step h3{ margin-bottom:0.4rem; }
.step p{ color:var(--slate); max-width:54ch; }

/* offer card (on coal section) */
.offer{
  background:#fff; color:var(--ink);
  border-radius:var(--r-lg);
  padding:clamp(1.8rem,3vw,2.6rem);
  box-shadow:0 40px 70px -36px rgba(0,0,0,.6);
}
.offer h3{ font-size:clamp(1.5rem,1.2rem + 1vw,2rem); }
.offer .price{
  display:inline-block; margin-top:0.85rem;
  font-family:var(--font-display); font-weight:700; font-size:0.92rem;
  color:var(--red); background:var(--red-tint);
  padding:0.4rem 0.85rem; border-radius:999px;
}
.offer ul{ list-style:none; margin-top:1.4rem; }
.offer li{
  position:relative; padding:0.6rem 0 0.6rem 1.7rem;
  border-top:1px solid var(--line-soft); color:var(--slate);
  font-size:0.98rem;
}
.offer li:first-child{ border-top:0; }
.offer li::before{
  content:""; position:absolute; left:0; top:1.05rem;
  width:9px; height:9px; background:var(--red); border-radius:3px;
}

/* proof row */
.proof{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
  margin-top:clamp(2.25rem,4.5vw,3rem);
}
@media (max-width:760px){ .proof{ grid-template-columns:1fr 1fr; } }
.proof div{
  background:var(--soft); border-radius:18px;
  border-top:3px solid var(--red);
  padding:1.3rem 1.2rem;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:-0.02em;
}

/* statement */
.statement{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem);
  line-height:1.1; letter-spacing:-0.035em;
  max-width:20ch;
}
.statement em{ font-style:normal; color:var(--red); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{ background:var(--soft); }
.cta-band__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2.5rem; flex-wrap:wrap;
  padding-block:clamp(3rem,6vw,4.5rem);
}
.cta-band h2{ font-size:clamp(1.8rem,1.3rem + 2vw,2.85rem); max-width:18ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.form{ margin-top:clamp(1.75rem,3.5vw,2.5rem); }
.field{ margin-bottom:1.25rem; }
.field label{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:0.74rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--slate); margin-bottom:0.45rem;
}
.field label .opt{ text-transform:none; letter-spacing:0; font-weight:600; opacity:.6; }
.field input,.field textarea{
  width:100%;
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:14px;
  padding:0.85rem 1rem;
  transition:border-color .2s var(--ease), background .2s var(--ease),
             box-shadow .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:#a8a8a4; }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--red); background:#fff;
  box-shadow:0 0 0 4px rgba(227,27,35,.09);
}
.field textarea{ min-height:140px; resize:vertical; }
.form .btn{ margin-top:0.4rem; }
.form-note{
  margin-top:1.1rem; font-size:0.85rem; color:var(--slate); opacity:.85;
}

.contact-rail .item{ padding:1.15rem 0; border-top:1px solid var(--line); }
.contact-rail .item:last-child{ border-bottom:1px solid var(--line); }
.contact-rail .k{
  font-family:var(--font-display); font-weight:700;
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--red); display:block; margin-bottom:0.3rem;
}
.contact-rail .v{ font-size:1.02rem; color:var(--ink); }

.thanks{ min-height:58vh; display:flex; flex-direction:column;
  justify-content:center; }

/* ============================================================
   FOOTER  (dark — anchors the light site)
   ============================================================ */
.site-footer{ background:var(--coal); color:#cfd0d4; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 0.8fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-block:clamp(3rem,5vw,4.25rem) 0;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand{ margin-bottom:26px; color:#fff; }
.footer-brand .brand__logo{ height:43px; }
.footer-brand p{ font-size:0.94rem; color:#9c9ea4; max-width:38ch; }
.footer-col h4{
  font-family:var(--font-display); font-weight:700;
  font-size:0.74rem; letter-spacing:0.13em; text-transform:uppercase;
  color:#fff; margin-bottom:1rem;
}
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:0.65rem; font-size:0.94rem; }
.footer-col a{ color:#b6b7bc; transition:color .2s var(--ease); }
.footer-col a:hover{ color:#ff6168; }
.footer-col .meta-k{
  display:block; font-size:0.66rem; letter-spacing:0.12em;
  text-transform:uppercase; color:#74767d; font-weight:700;
  font-family:var(--font-display); margin-bottom:0.15rem;
}
.footer-col .meta-row{ margin-bottom:0.85rem; line-height:1.45; color:#c2c3c8; }
.footer-col .meta-pair{ display:flex; gap:1.7rem; flex-wrap:wrap; }
.footer-col .meta-pair .meta-row{ margin-bottom:0.85rem; }
.footer-base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem;
  margin-top:clamp(2.5rem,4.5vw,3.25rem);
  padding-block:1.4rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:0.8rem; color:#85868c;
}

/* utilities */
.mt-s{ margin-top:0.9rem; }
.mt-m{ margin-top:1.6rem; }
.mt-l{ margin-top:3.2rem; }

/* essay rhythm — used on long-form prose pages */
.essay-rule{
  border:0; border-top:1px solid var(--line);
  margin:clamp(2.2rem,4vw,3.2rem) 0;
}
.essay h3{ margin-top:clamp(2.4rem,4.5vw,3.4rem); margin-bottom:0.55rem; }
.essay h3 + p{ margin-top:0; }
.maxw-md{ max-width:720px; }

/* ============================================================
   CONTACT MODAL
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:rgba(22,23,28,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
.modal.open{ opacity:1; visibility:visible; }
.modal__card{
  position:relative;
  background:#fff; border-radius:var(--r-lg);
  width:min(560px,100%); max-height:90vh; overflow-y:auto;
  padding:clamp(1.7rem,3.5vw,2.6rem);
  box-shadow:0 50px 90px -34px rgba(0,0,0,.5);
  transform:translateY(16px) scale(.985);
  transition:transform .28s var(--ease);
}
.modal.open .modal__card{ transform:none; }
.modal__close{
  position:absolute; top:14px; right:14px;
  width:42px; height:42px; flex:none;
  border-radius:11px;
  border:1px solid var(--line); background:var(--soft);
  font-size:1.6rem; line-height:1; color:var(--slate);
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.modal__close:hover{ background:var(--soft-2); color:var(--ink); }
.modal__title{
  font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);
  margin:0.85rem 0 0.55rem;
}
.modal__lead{ color:var(--slate); font-size:1rem; max-width:42ch; }
.modal__card .form{ margin-top:1.4rem; }
.modal__success .btn{ margin-top:1.6rem; }
.form-error{
  margin-top:0.95rem; font-size:0.9rem; color:var(--red-deep);
}
@media (prefers-reduced-motion:reduce){
  .modal,.modal__card{ transition:none; }
}

/* ============================================================
   HERO — motion-image background
   ============================================================ */
.hero--media{ position:relative; isolation:isolate; overflow:hidden; }
.hero--media .hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__frame{
  position:absolute; inset:0;
  background-image:url(hero-skyline.jpg);
  background-size:cover;
  background-position:0% 50%;
  animation:heroPan 56s ease-in-out infinite alternate;
}
@keyframes heroPan{
  from{ background-position:0% 50%; }
  to{   background-position:100% 50%; }
}
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,14,12,.30), rgba(20,14,12,.46));
}
/* dark anchor — the text column always sits on its own dark bed,
   while the rest of the photo stays vivid */
.hero--media .hero__text{ position:relative; }
.hero--media .hero__text::before{
  content:""; position:absolute; z-index:-1;
  inset:-2.4rem -3.4rem -2.6rem -3.4rem;
  background:rgba(12,9,9,.86);
  border-radius:40px;
  filter:blur(40px);
  pointer-events:none;
}
.hero--media .hero__text h1{ color:#fff; }
.hero--media .lead{ color:rgba(255,255,255,.82); }
.hero--media .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.32); }
.hero--media .btn--ghost:hover{ border-color:#fff; }
.hero--media .hero__card{
  background:rgba(18,16,18,.52);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.6);
}
.hero--media .hero__card h2{ color:#fff; }
.hero--media .hero__card p{ color:rgba(255,255,255,.74); }
.hero--media .signal{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:#fff;
}
@media (prefers-reduced-motion:reduce){
  .hero__frame{ animation:none; background-position:50% 50%; }
}


/* ---- login page ---------------------------------------- */
.login-card{ display:flex; flex-direction:column; }
.login-card h3{ margin-top:1rem; }
.login-card p{ margin-top:.55rem; margin-bottom:1.7rem; }
.login-card .btn{ margin-top:auto; align-self:flex-start; }
.login-help{
  text-align:center; color:var(--slate);
  font-size:.96rem; margin-top:clamp(2rem,4vw,3rem);
}
.login-help a{ color:var(--red); font-weight:600; }