/* Upstate Property Works — brand tokens + the logo, drawn entirely in CSS.
   Scale the whole logo by changing font-size on .upw-logo. */
:root {
  --navy-900: #0b1f38;
  --navy-800: #102a4c;
  --navy-700: #163a66;
  --navy-600: #1d4a82;
  --blue-500: #2f7fd0;
  --blue-400: #4a9be3;
  --blue-100: #e6f1fb;
  --mist: #eef2f7;
  --ink: #142235;
  --ink-soft: #4c5d73;
  --line: #d9e1eb;
  --white: #fff;
  --ok: #1d8a5a;
  --warn: #b7791f;
  --danger: #c0392b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(11, 31, 56, .06), 0 8px 24px rgba(11, 31, 56, .08);
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.upw-logo {
  --c-main: var(--navy-800);
  --c-accent: var(--blue-500);
  --c-text: var(--navy-800);
  --c-sub: var(--navy-800);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: 16px;
  text-decoration: none;
  color: var(--c-text);
  line-height: 1;
}
.upw-logo.on-dark { --c-main: #fff; --c-accent: var(--blue-400); --c-text: #fff; --c-sub: #fff; }
.upw-logo.stacked { flex-direction: column; gap: .2em; }

/* the mark: back peak, front roof chevron, 4-pane window, curved swoosh */
.upw-mark { position: relative; width: 3.6em; height: 2.25em; flex: none; }
.upw-mark .peak {
  position: absolute;
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 85% 100%, 50% 25%, 15% 100%);
}
.upw-mark .peak-front { left: .2em; bottom: .42em; width: 2.6em; height: 1.55em; background: var(--c-main); }
.upw-mark .peak-back  { left: 1.6em; bottom: .62em; width: 1.9em; height: 1.2em; background: var(--c-accent);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 80% 100%, 50% 34%, 30% 66%); }
.upw-mark .win {
  position: absolute; left: 1.33em; bottom: .78em; width: .34em; height: .34em;
  display: grid; grid-template-columns: 1fr 1fr; gap: .06em;
}
.upw-mark .win i { background: var(--c-main); border-radius: .02em; }
.upw-mark .swoosh {
  position: absolute; left: -.15em; right: -.15em; bottom: .1em; height: .55em;
  border-top: .17em solid var(--c-main);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.upw-word { display: flex; flex-direction: column; align-items: flex-start; }
.upw-logo.stacked .upw-word { align-items: center; }
.upw-word b {
  font-family: var(--font); font-weight: 900; letter-spacing: .01em;
  font-size: 1.55em; color: var(--c-text); line-height: .95;
}
.upw-word small {
  font-family: var(--font); font-weight: 700; letter-spacing: .085em;
  font-size: .62em; color: var(--c-sub); margin-top: .22em;
  display: flex; align-items: center; gap: .45em; white-space: nowrap;
}
.upw-logo.lined .upw-word small::before,
.upw-logo.lined .upw-word small::after { content: ""; height: .12em; width: 1.2em; background: currentColor; opacity: .9; }
.upw-logo.stacked .upw-mark { width: 5.4em; height: 3.2em; }
.upw-logo.stacked .upw-mark .peak-front { left: 1.1em; bottom: .55em; width: 3.2em; height: 1.95em; }
.upw-logo.stacked .upw-mark .peak-back  { left: 2.9em; bottom: .85em; width: 2.3em; height: 1.45em; }
.upw-logo.stacked .upw-mark .win { left: 2.46em; bottom: 1em; width: .48em; height: .48em; }
.upw-logo.stacked .upw-mark .swoosh { left: 0; right: 0; bottom: .15em; height: .7em; border-top-width: .2em; }
.upw-logo.stacked .upw-word b { font-size: 2.6em; }
.upw-logo.stacked .upw-word small { font-size: .98em; }

/* round navy icon badge, like the back of the card */
.icon-badge {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--navy-700); color: #fff; display: grid; place-items: center;
}
.icon-badge svg { width: 26px; height: 26px; }