/* =========================================================
   APEX PROPERTY SOLUTIONS — Brand Design System
   Shared by the public website and the employee portal.
   Palette + typography per the 2026 V1 brand guideline sheet.
   ========================================================= */

:root {
  /* ---- Core palette (from brand sheet) ---- */
  --navy:        #0D1B3D;
  --navy-900:    #08122b;
  --navy-800:    #0D1B3D;
  --navy-700:    #172a55;
  --navy-600:    #24396b;
  --navy-500:    #3a5187;

  --green:       #0E7C4B;
  --green-700:   #0b6a40;
  --green-600:   #0E7C4B;
  --green-500:   #16955c;
  --green-400:   #3FA96B;
  --green-300:   #6fc593;
  --green-50:    #eef8f2;

  --slate:       #5B616B;
  --slate-700:   #454b55;
  --slate-500:   #5B616B;
  --slate-400:   #838a95;
  --slate-300:   #aeb4bd;

  --line:        #E5E7EB;
  --line-soft:   #eef0f3;
  --paper:       #ffffff;
  --paper-2:     #F7F8FA;
  --paper-3:     #F1F3F6;

  --amber:       #B7791F;
  --amber-50:    #fdf6e8;
  --red:         #B42318;
  --red-50:      #fdeceb;
  --blue:        #1D4ED8;
  --blue-50:     #eef2ff;

  /* ---- Type ---- */
  --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-brand:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Space & shape ---- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-xs: 0 1px 2px rgba(13, 27, 61, .06);
  --shadow-sm: 0 2px 8px rgba(13, 27, 61, .07);
  --shadow:    0 10px 30px rgba(13, 27, 61, .10);
  --shadow-lg: 0 24px 60px rgba(13, 27, 61, .14);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Type scale ---- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 120;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.eyebrow {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow--muted { color: var(--slate-400); }
.eyebrow--light { color: var(--green-400); }

/* ---- Brand lockup ---- */
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lockup__mark { width: 40px; height: 34px; flex: none; }
.lockup__text { display: flex; flex-direction: column; line-height: 1; }
.lockup__name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .16em;
  color: var(--navy);
}
.lockup__sub {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: .28em;
  color: var(--slate);
  margin-top: 4px;
}
.lockup--light .lockup__name { color: #fff; }
.lockup--light .lockup__sub { color: rgba(255,255,255,.72); }

/* ---- Buttons ---- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  --btn-bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1.5px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--green-400); outline-offset: 3px; }
.btn--green { --btn-bg: var(--green); --btn-bd: var(--green); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: rgba(13,27,61,.22); }
.btn--ghost:hover { --btn-bd: var(--navy); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.btn--ghost-light:hover { --btn-bd: #fff; background: rgba(255,255,255,.08); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--navy); --btn-bd: #fff; }
.btn--sm { padding: 11px 18px; font-size: 11.5px; }
.btn--lg { padding: 18px 34px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* Icons inside buttons.
   An inline <svg> with a viewBox and no width or height has no intrinsic size,
   so inside a flex row it collapses to nothing — every icon on a button in the
   portal was rendering at 0x0 and simply not appearing. Worse, the moment such
   a button is stretched (`.view__actions .btn { flex: 1 }` on a phone) the
   aspect ratio takes over and the icon inflates to the button's full width,
   painting a navy blob down the screen over whatever follows. Two symptoms,
   one missing rule. */
.btn svg { width: 16px; height: 16px; flex: none; stroke-width: 2; }
.btn--sm svg { width: 15px; height: 15px; }
.btn--lg svg { width: 18px; height: 18px; }

/* ---- Utility ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1400px; }
.wrap--narrow { max-width: 820px; }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rule { height: 2px; width: 54px; background: var(--green); border: 0; margin: 0; }
.stack > * + * { margin-top: var(--stack, 16px); }

/* ---- Pills / badges ---- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-brand); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
  background: var(--green-50); color: var(--green-700);
  border: 1px solid rgba(14,124,75,.18);
}
.pill--navy { background: rgba(13,27,61,.06); color: var(--navy); border-color: rgba(13,27,61,.14); }
.pill--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.pill--amber { background: var(--amber-50); color: var(--amber); border-color: rgba(183,121,31,.22); }
.pill--red { background: var(--red-50); color: var(--red); border-color: rgba(180,35,24,.2); }
.pill--blue { background: var(--blue-50); color: var(--blue); border-color: rgba(29,78,216,.2); }
.pill--slate { background: var(--paper-3); color: var(--slate); border-color: var(--line); }