/* ============================================================
   AIforBusinessBanking.com — Brand Identity
   Wordmark · Monogram · Tagline · Signature

   Local file — website repo only. Served directly by Netlify.
   Gradient: linear-gradient(135deg, #1E3A6E 0%, #3B4FC8 60%, #5B4FBE 100%)
   Font: DM Sans (already loaded by the site)
   ============================================================ */


/* ── WORDMARK ──────────────────────────────────────────────
   Structure:
   <div class="brand-wordmark brand-wordmark--nav">
     <span class="brand-wordmark__ai">AI</span>
     <span class="brand-wordmark__rest">forBusinessBanking</span>
   </div>
────────────────────────────────────────────────────────── */

.brand-wordmark {
  font-family:     'Cormorant Garamond', Georgia, serif;
  font-weight:     600;
  font-size:       1.55rem;         /* AI inherits this */
  letter-spacing:  -0.01em;
  line-height:     1;
  text-decoration: none;
  display:         inline-flex;
  align-items:     baseline;
  user-select:     none;
  white-space:     nowrap;
}

/* "AI" — gradient */
.brand-wordmark__ai {
  background:              linear-gradient(135deg, #1E3A6E 0%, #3B4FC8 60%, #5B4FBE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

/* "for Business Banking" — navy, smaller, spaced from AI */
.brand-wordmark__rest {
  color:       #1a2340;
  font-size:   0.78em;      /* scales with parent — nav: ~1.21rem, display: ~2.5rem */
  margin-left: 3px;
}

/* Nav context */
.brand-wordmark--nav {
  font-size: 1.55rem;
}

/* Display context — loading screen */
.brand-wordmark--display {
  font-size: 3.4rem;
}

/* On dark backgrounds */
.brand-wordmark--on-dark .brand-wordmark__rest {
  color: #ffffff;
}


/* ── TAGLINE  —  rule + text below wordmark ────────────────
   Structure:
   <div class="brand-tagline">
     <span class="brand-tagline__rule"></span>
     <span class="brand-tagline__text">Re-architecting Business Banking with AI</span>
   </div>
────────────────────────────────────────────────────────── */

.brand-tagline {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin-top:  4px;
}

/* Gradient rule line */
.brand-tagline__rule {
  display:    block;
  width:      20px;
  height:     1.5px;
  background: linear-gradient(90deg, #1E3A6E 0%, #3B4FC8 60%, #5B4FBE 100%);
  flex-shrink: 0;
}

/* Tagline text */
.brand-tagline__text {
  font-family:    'DM Sans', system-ui, sans-serif;
  font-size:      0.58rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          #5A5650;
  white-space:    nowrap;
}

/* Display variant — loading screen */
.brand-tagline--display {
  margin-top: 10px;
  gap:        12px;
}
.brand-tagline--display .brand-tagline__rule {
  width:  36px;
  height: 2px;
}
.brand-tagline--display .brand-tagline__text {
  font-size:      0.78rem;
  letter-spacing: 0.14em;
  color:          #5A5650;
}

/* On dark backgrounds */
.brand-tagline--on-dark .brand-tagline__text  { color: rgba(255,255,255,0.5); }


/* ── LOCKUP CONTAINER ──────────────────────────────────────
   Wraps wordmark + tagline as a column
   <div class="brand-lockup"> ... </div>
────────────────────────────────────────────────────────── */

.brand-lockup {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

.brand-lockup--display {
  align-items: center;
  text-align:  center;
}
.brand-lockup--display .brand-tagline {
  justify-content: center;
}


/* ── MONOGRAM  —  Stacked AI × BB ─────────────────────────
   Structure:
   <span class="brand-monogram brand-monogram--sm">
     <span class="bm-ai">AI</span>
     <span class="bm-sep">×</span>
     <span class="bm-bb">BB</span>
   </span>
────────────────────────────────────────────────────────── */

.brand-monogram {
  display:         inline-flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  font-family:     'DM Sans', system-ui, sans-serif;
  font-weight:     700;
  line-height:     1;
  color:           #ffffff;
  background:      linear-gradient(135deg, #1E3A6E 0%, #3B4FC8 60%, #5B4FBE 100%);
  border-radius:   8px;
  flex-shrink:     0;
  user-select:     none;
  width:           36px;
  height:          36px;
}

.bm-ai, .bm-bb {
  font-size:      0.62rem;
  font-weight:    700;
  letter-spacing: -0.02em;
  line-height:    1.1;
  color:          #ffffff;
  display:        block;
}

.bm-sep {
  font-size:   0.28rem;
  font-weight: 400;
  color:       rgba(255,255,255,0.6);
  display:     flex;
  align-items: center;
  gap:         2px;
  line-height: 1.4;
}
.bm-sep::before,
.bm-sep::after {
  content:    '';
  display:    block;
  height:     0.5px;
  background: rgba(255,255,255,0.4);
}

/* Size variants */
.brand-monogram--xs { width:22px; height:22px; border-radius:4px; }
.brand-monogram--xs .bm-ai,
.brand-monogram--xs .bm-bb  { font-size:0.38rem; }
.brand-monogram--xs .bm-sep { font-size:0.18rem; }

.brand-monogram--sm { width:34px; height:34px; border-radius:7px; }
.brand-monogram--sm .bm-ai,
.brand-monogram--sm .bm-bb  { font-size:0.6rem; }
.brand-monogram--sm .bm-sep { font-size:0.26rem; }
.brand-monogram--sm .bm-sep::before,
.brand-monogram--sm .bm-sep::after { width:5px; }

.brand-monogram--md { width:36px; height:36px; border-radius:8px; }
.brand-monogram--md .bm-ai,
.brand-monogram--md .bm-bb  { font-size:0.62rem; }
.brand-monogram--md .bm-sep { font-size:0.28rem; }
.brand-monogram--md .bm-sep::before,
.brand-monogram--md .bm-sep::after { width:5px; }

.brand-monogram--lg { width:52px; height:52px; border-radius:11px; }
.brand-monogram--lg .bm-ai,
.brand-monogram--lg .bm-bb  { font-size:0.9rem; }
.brand-monogram--lg .bm-sep { font-size:0.4rem; }
.brand-monogram--lg .bm-sep::before,
.brand-monogram--lg .bm-sep::after { width:8px; }

.brand-monogram--xl { width:72px; height:72px; border-radius:14px; }
.brand-monogram--xl .bm-ai,
.brand-monogram--xl .bm-bb  { font-size:1.3rem; }
.brand-monogram--xl .bm-sep { font-size:0.55rem; }
.brand-monogram--xl .bm-sep::before,
.brand-monogram--xl .bm-sep::after { width:12px; }

.brand-monogram--circle { border-radius:9999px; }

.brand-monogram--outlined {
  background: transparent;
  border:     1.5px solid #3B4FC8;
}
.brand-monogram--outlined .bm-ai,
.brand-monogram--outlined .bm-bb  { color:rgba(59,79,200,1); }
.brand-monogram--outlined .bm-sep { color:rgba(59,79,200,0.6); }
.brand-monogram--outlined .bm-sep::before,
.brand-monogram--outlined .bm-sep::after { background:rgba(59,79,200,0.4); }


/* ── LOGO LOCKUP  (nav: monogram + lockup side by side) ────
   <a href="/" class="logo-lockup"> ... </a>
────────────────────────────────────────────────────────── */

.logo-lockup {
  display:         inline-flex;
  align-items:     center;
  gap:             0.65rem;
  text-decoration: none;
  color:           inherit;
  transition:      opacity 160ms ease;
}
.logo-lockup:hover { opacity: 0.8; }

@media (max-width: 380px) {
  .logo-lockup .brand-monogram { display: none; }
}

/* Hide tagline on narrower screens to save space */
@media (max-width: 900px) {
  .brand-tagline { display: none; }
  .brand-wordmark--nav { font-size: 1.3rem; }
}


/* ── BRAND SIGNATURE ───────────────────────────────────────
   <span class="brand-signature">AI Built - Human Directed</span>
────────────────────────────────────────────────────────── */

.brand-signature {
  font-family:    'DM Sans', system-ui, sans-serif;
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          #9B9590;
  display:        inline-block;
}

.brand-signature--on-dark { color: rgba(255,255,255,0.4); }

.brand-signature--footer {
  display:     block;
  text-align:  center;
  color:       rgba(255,255,255,0.28);
  padding-top: 1rem;
  margin-top:  1rem;
  border-top:  1px solid rgba(255,255,255,0.08);
  width:       100%;
}