/* ============================================================
   Capstone Strata — Original brand override (Peaceful)
   Palette: #0039A6 (navy) + #A2AAAD (cool grey)
   Lighter weights, calmer rhythm
   ============================================================ */

:root {
  /* Palette swap — peaceful */
  --cream: #F5F6F8;       /* warm off-white background */
  --cream-2: #ECEEF1;     /* secondary surface */
  --paper: #FAFBFC;
  --ink: #0039A6;          /* brand navy */
  --ink-2: #0039A6;        /* primary text accent */
  --sage: #75787B;         /* cool grey — secondary (darkened from #A2AAAD for readability) */
  --sage-soft: #9CA3A8;    /* darkened from #C5CACC */
  --tan: #75787B;          /* keep palette to two colours */
  --tan-2: #9CA3A8;
  --rule: rgba(0, 57, 166, 0.12);
  --rule-strong: rgba(0, 57, 166, 0.28);
  --bg: var(--cream);
  --fg: #2A2F36;            /* soft dark body text, not pure black */
}

body {
  background: var(--cream);
  color: #3C4147;
  font-weight: 350;
  letter-spacing: -0.005em;
}

/* Keyboard-visible focus ring. :focus-visible only paints for keyboard
   nav so mouse users see no change. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== Type system — lighter, calmer ===== */
.display, .h1, .hero-display, .cta-display {
  font-weight: 300 !important;
  letter-spacing: -0.035em !important;
  color: var(--ink) !important;
}
.h2, .h3 { font-weight: 400 !important; color: var(--ink) !important; }
.display em, .h1 em, .h2 em, .hero-display em, .cta-display em,
.statement-quote em, .founder-quote em, .marquee-track em,
.svc.dark .h1 em, .pricing-card .quote em {
  color: var(--sage) !important;
  font-style: normal !important;
  font-weight: 300 !important;
}

.lede { font-weight: 350; color: #3C4147; }
.body { color: rgba(60, 65, 71, 0.82); font-weight: 350; }

/* Eyebrow / kicker — softer */
.eyebrow, .kicker, .field-label, .label-line, .tl-year {
  color: var(--sage);
  font-weight: 400;
  letter-spacing: 0.16em;
}
.kicker::before { background: var(--sage); }

/* ===== Nav ===== */
.nav { background: color-mix(in oklab, var(--cream) 82%, transparent); }
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-link {
  font-weight: 400;
  color: var(--sage);
}
.nav-link.active { background: var(--ink); color: #FFFFFF; }
.nav-cta {
  background: var(--ink); color: #FFFFFF;
  font-weight: 400;
}
.nav-cta:hover { background: #0046C8; }

/* === Brand logo image === */
.nav-logo { gap: 0; }
.nav-logo .glyph { display: none; }
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
  user-select: none;
}
@media (max-width: 880px) {
  .brand-logo { height: 34px; }
}
.brand-logo-footer {
  height: 40px;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .brand-logo-footer { height: 32px; }
}

/* ===== Buttons — softer ===== */
.btn { font-weight: 400; }
.btn-primary { background: var(--ink); color: #FFFFFF; }
.btn-primary:hover { background: #0046C8; }
.btn-ghost { color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* BMC dark section — softer */
.svc.dark { background: var(--ink); color: #FFFFFF; }
.svc.dark .h1, .svc.dark .h2, .svc.dark .h3 {
  color: #FFFFFF !important; font-weight: 300 !important;
}
.svc.dark .h1 em { color: var(--sage) !important; }
.svc.dark .body { color: rgba(255,255,255,.78); font-weight: 350; }
.svc.dark .kicker, .svc.dark .num-big { color: var(--sage); }
.svc.dark .kicker::before { background: var(--sage); }
.svc.dark .svc-list-item h4 { font-weight: 400; }

/* Pricing card */
.pricing-card { background: var(--ink); color: #FFFFFF; }
.pricing-card .label { color: var(--sage); }
.pricing-card .quote { font-weight: 300; }
.pricing-card .quote em { color: var(--sage); font-weight: 300; }

/* Carousel overlay */
.carousel-overlay {
  background: linear-gradient(to top, rgba(0,30,90,.78), rgba(0,30,90,0));
}
.carousel-name { font-weight: 300; }
.carousel-stage { background: var(--ink); }
.carousel-controls .progress { background: var(--rule); }
.carousel-controls .progress::after { background: var(--ink); }

/* Service row hover bar */
.service-row::before { background: var(--ink); }
.service-row .title { font-weight: 400 !important; }

/* Footer — anthracite */
.footer { background: #2A2D33; color: #FFFFFF; }
.footer-mark { font-weight: 300 !important; letter-spacing: -0.03em; color: #FFFFFF; }
.footer-mark em { color: #A2AAAD; font-weight: 300 !important; }
.footer-col h5 { color: #A2AAAD; font-weight: 400; }
.footer-col li, .footer-col p { color: rgba(255, 255, 255, 0.72); font-weight: 350; }
.footer-col a:hover { color: #FFFFFF; }
.footer-bottom { color: rgba(255, 255, 255, 0.4); }

/* Footer form on anthracite */
.footer-form-block { border-bottom-color: rgba(255, 255, 255, 0.12); }
.footer-headline { color: #FFFFFF; }
.footer-headline em { color: #A2AAAD; }
.footer-body { color: rgba(255, 255, 255, 0.72); }
.footer-direct a { color: #FFFFFF; }
.footer-direct a:hover { color: rgba(255, 255, 255, 0.65); }
.footer-field-label { color: rgba(255, 255, 255, 0.5); }
.footer-field {
  color: #FFFFFF;
  border-bottom-color: rgba(255, 255, 255, 0.22);
}
.footer-field::placeholder { color: rgba(255, 255, 255, 0.35); }
.footer-field:hover { border-bottom-color: rgba(255, 255, 255, 0.4); }
.footer-field:focus { border-bottom-color: #FFFFFF; }
.footer-submit {
  background: #FFFFFF;
  color: #2A2D33;
}
.footer-submit:hover { background: var(--cream); color: #2A2D33; }
.footer-form.sent .footer-submit {
  background: transparent;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.footer-form-note { color: rgba(255, 255, 255, 0.5); }
.footer-nav-block { padding-top: 64px; }
.footer-nav-block .footer-col h5 { color: #A2AAAD; }

.brand-logo-footer { content: url("logo-white.png"); }

/* Filter / chips */
.chip { color: var(--ink); border-color: var(--rule-strong); font-weight: 400; }
.chip.active { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.filter-bar { background: color-mix(in oklab, var(--cream) 88%, transparent); }
.filter-meta { color: var(--sage); }

.subj-chip { color: var(--ink); border-color: var(--rule-strong); font-weight: 400; }
.subj-chip.active { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* Building card pill */
.b-card .type {
  background: rgba(0, 30, 90, .55);
  color: #FFFFFF;
  font-weight: 400;
}
.b-card .idx { color: var(--ink); font-weight: 400; }
.b-card .info h3 { color: var(--ink); font-weight: 400; }
.b-card .info .lots { color: var(--ink); }
.b-card .reveal-info {
  background: linear-gradient(to top, rgba(0,30,90,.85), rgba(0,30,90,0));
}

.bg-card .info h4 { color: var(--ink); font-weight: 400; }
.bg-card .index { background: rgba(0,30,90,.55); }

/* Inputs */
.field { color: var(--ink); border-bottom-color: var(--rule-strong); font-weight: 350; }
.field::placeholder { color: rgba(0,57,166,.32); }
.field:focus { border-color: var(--ink); }

/* Marquee — softer */
.marquee-track > * {
  color: var(--ink);
  font-weight: 300;
  letter-spacing: -0.025em;
}
.marquee-track .dot { background: var(--sage); }

/* Statement quote */
.statement-quote { font-weight: 300; }
.statement-quote em { color: var(--sage); }

/* Founder quote */
.founder-quote { font-weight: 300; }
.founder-quote em { color: var(--sage); }

/* About hero meta */
.about-hero .meta strong { color: var(--ink); font-weight: 400; }

/* Values numbers */
.value .num { color: var(--sage); }
.value h3 { font-weight: 400; color: var(--ink); }

/* Timeline */
.tl-title { font-weight: 400; }
.tl-year { color: var(--sage); }

/* Service-page num-big */
.num-big { color: var(--sage) !important; }

/* Offices */
.office { background: var(--cream-2); }
.office h3 { font-weight: 400; color: var(--ink); }
.office .city { color: var(--sage); }

/* Hero image bg */
.hero-img { background: var(--cream-2); }

/* Hero meta items */
.hero-meta { color: var(--sage); }
.hero-meta .meta-item span:last-child { color: var(--ink); font-weight: 400; }

/* Section dividers softer */
.divider { background: var(--rule); }

/* Word-reveal animation — even more subtle */
.word-reveal .w { transform: translateY(20%); }

/* Slight refinement: lift the body weight on display sizes */
.hero-display, .display, .cta-display, .h1 {
  font-feature-settings: "ss01" 1, "cv11" 1;
}

/* Carousel name in overlay */
.carousel-name {
  font-weight: 300 !important;
  letter-spacing: -0.03em;
}

/* Success message box */
#successMsg { background: var(--ink) !important; }
#successMsg .label, #successMsg div:first-child { color: var(--sage) !important; }

/* Closing */
.closing .word-reveal { font-weight: 300 !important; }

/* ===== Login modal ===== */
button.nav-login { padding: 0; font: inherit; cursor: pointer; }
.login-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s ease;
}
.login-modal.open { display: flex; opacity: 1; }
body.login-open { overflow: hidden; }
.login-modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ink-2) 55%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.login-modal-panel {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 44px 36px 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
  transform: translateY(8px) scale(.98);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.login-modal.open .login-modal-panel { transform: translateY(0) scale(1); }
.login-modal-close {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  padding: 0;
  border: 0; background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 50%;
  transition: background .2s ease;
}
.login-modal-close:hover { background: rgba(45,59,44,.08); }
.login-modal-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sage);
}
.login-modal-title {
  margin: 10px 0 28px;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.05;
  color: var(--ink-2);
}
.login-modal-title em { font-style: normal; font-weight: 400; color: var(--sage); }
.login-form { display: grid; gap: 16px; }
.login-field { display: grid; gap: 6px; }
.login-field-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage);
}
.login-field input {
  padding: 12px 14px;
  font-family: var(--sans); font-size: 15px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  transition: border-color .2s ease;
}
.login-field input:focus { outline: 0; border-color: var(--ink-2); }
.login-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  margin-top: 4px;
  font-size: 13px;
}
.login-remember {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-2); cursor: pointer;
}
.login-remember input { accent-color: var(--ink-2); }
.login-link {
  color: var(--sage); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.login-link:hover { color: var(--ink-2); border-color: var(--ink-2); }
.login-submit {
  margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px;
  background: var(--ink-2); color: var(--cream);
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.login-submit:hover { background: var(--sage); transform: translateY(-1px); }
.login-submit .arr { transition: transform .25s ease; }
.login-submit:hover .arr { transform: translate(2px, -2px); }
.login-foot {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.login-foot a {
  color: var(--ink-2); text-decoration: none;
  opacity: .65;
  transition: opacity .2s ease;
}
.login-foot a:hover { opacity: 1; }
@media (max-width: 480px) {
  .login-modal-panel { padding: 36px 24px 24px; }
  .login-row { flex-direction: column; align-items: flex-start; }
}