/* =====================================================================
   Frontline design system — shadcn-ui/studio foundation (adapted)
   ---------------------------------------------------------------------
   Token vocabulary is the official shadcn-ui set (--background, --foreground,
   --card, --popover, --primary, --secondary, --muted, --accent,
   --destructive, --border, --input, --ring, --radius, --font-sans,
   --font-mono), applied through html.dark / html.light classes as shadcn does.
   Components carry the shadcn slot anatomy via data-slot and are styled here
   from tokens only — tenants brand through their preset tokens, never code.
   ===================================================================== */

/* ---------- reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Floating UI (assistant launcher) must never widen the page */
html,
body {
  overflow-x: clip;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--primary);
}
::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 2px;
}
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
p {
  margin: 0;
}
[hidden] {
  display: none !important;
}
ul, ol {
  margin: 0;
}

/* ---------- layout ---------- */
.ui-container {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.ui-container--narrow {
  max-width: 48rem;
}
.ui-section {
  padding-block: clamp(2.6rem, 6vw, 4.8rem);
}
.ui-section--tight {
  padding-block: 0.5rem 2.4rem;
}
.ui-main {
  min-height: 62vh;
}
.ui-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.65rem 1rem;
  border-radius: 0 0 var(--radius) 0;
  z-index: 300;
}
.ui-skip:focus {
  left: 0;
}

/* ---------- site header / brand / nav ---------- */
.ui-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.ui-header__inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 4.2rem;
}
.ui-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--foreground);
  text-decoration: none;
  flex-shrink: 0;
}
.ui-brand__logo {
  width: 2.6rem;
  height: auto;
}
.ui-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ui-brand__name {
  font-weight: 700;
  font-size: 1.06rem;
}
.ui-brand__descriptor {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ui-header .ui-nav {
  margin-left: auto;
}
.ui-nav__list,
.ui-nav-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.35rem;
}
.ui-nav__link,
.ui-nav-panel__link {
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.3rem 0.1rem;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.ui-nav__link:hover {
  color: var(--foreground);
}
.ui-nav__link[aria-current="page"] {
  color: var(--foreground);
  border-bottom-color: var(--primary);
}
.ui-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.ui-header .ui-nav + .ui-header__actions {
  margin-left: 0;
}

/* theme control */
.ui-theme-control {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--muted);
}
.ui-theme-btn {
  width: 2rem !important;
  height: 1.85rem !important;
  border-radius: 999px !important;
}
.ui-theme-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-theme-btn[aria-pressed="true"] {
  background: var(--foreground) !important;
  color: var(--background) !important;
  border-color: var(--foreground) !important;
}

/* mobile menu + sheet */
.ui-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
}
.ui-menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform 150ms ease, opacity 150ms ease;
}
.ui-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ui-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.ui-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.ui-sheet-content {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 120;
  width: min(21rem, 86vw);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.45);
  overflow-y: auto;
}
.ui-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--border);
}
.ui-sheet-title {
  font-size: 1.05rem;
  margin: 0;
}
.ui-sheet-close,
.ui-dialog-close {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  cursor: pointer;
}
.ui-sheet-close:hover,
.ui-dialog-close:hover {
  background: var(--muted);
}
.ui-sheet-body {
  padding: 1rem 1.3rem 1.5rem;
}
.ui-sheet-body .ui-nav-panel__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
}
.ui-sheet-body .ui-nav-panel__link {
  display: block;
  padding: 0.7rem 0.2rem;
  font-size: 1.05rem;
  border-bottom: 0;
  border-left: 3px solid transparent;
}
.ui-sheet-body .ui-nav-panel__link[aria-current="page"] {
  color: var(--primary);
  border-left-color: var(--primary);
}

/* ---------- buttons ---------- */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: calc(var(--radius) - 2px);
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.ui-button:active {
  transform: translateY(1px);
}
.ui-button--md {
  height: 2.5rem;
  padding-inline: 1rem;
  font-size: 0.92rem;
}
.ui-button--sm {
  height: 2rem;
  padding-inline: 0.75rem;
  font-size: 0.84rem;
}
.ui-button--lg {
  height: 2.9rem;
  padding-inline: 1.6rem;
  font-size: 1rem;
}
.ui-button--icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}
.ui-button--default {
  background: var(--primary);
  color: var(--primary-foreground);
}
.ui-button--default:hover {
  filter: brightness(1.08);
}
.ui-button--secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.ui-button--secondary:hover {
  filter: brightness(1.04);
}
.ui-button--outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
.ui-button--outline:hover {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: var(--accent);
}
.ui-button--ghost {
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
}
.ui-button--ghost:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.ui-button--destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.ui-button--link {
  background: transparent;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ui-text-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.ui-text-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- cards ---------- */
.ui-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  height: 100%;
  transition: border-color 150ms ease;
}
a.ui-card:hover,
.ui-card:hover {
  border-color: color-mix(in srgb, var(--border) 55%, var(--primary) 45%);
}
.ui-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.3rem 0.2rem;
}
.ui-card-title {
  font-size: 1.16rem;
  font-weight: 700;
}
.ui-card-title a {
  color: var(--card-foreground);
  text-decoration: none;
}
.ui-card-title a:hover {
  color: var(--primary);
}
.ui-card-description {
  font-size: 0.95rem;
  color: var(--muted-foreground);
}
.ui-card-content {
  padding: 0.6rem 1.3rem 1rem;
}
.ui-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.4rem 1.3rem 1.1rem;
  margin-top: auto;
}
.ui-card-media {
  margin: 0;
}
.ui-card--service .ui-card-media .ui-media__img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  max-width: 100%;
}
.ui-card--service .ui-card-media,
.ui-card--service figure {
  min-width: 0;
}
.ui-card--capability {
  background: transparent;
  border: 0;
}
.ui-card--capability > .ui-card-header {
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--card);
  padding-bottom: 0.6rem;
}
.ui-card--capability > .ui-card-content {
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--card);
  padding-top: 0.7rem;
}
.ui-card--value {
  padding: 0.2rem 0;
}
.ui-card--project .ui-card-content {
  padding-top: 0.9rem;
}
.ui-project-client {
  font-weight: 600;
  color: var(--card-foreground);
  font-size: 0.95rem;
}
.ui-project-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  color: var(--muted-foreground);
  font-size: 0.86rem;
}

/* ---------- badges / chips ---------- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.32em 0.75em;
}
.ui-badge--default {
  background: var(--primary);
  color: var(--primary-foreground);
}
.ui-badge--secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.ui-badge--outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}
.ui-badge--destructive {
  background: var(--destructive);
  color: var(--destructive-foreground);
}
.ui-badge--soft {
  background: var(--accent);
  color: var(--accent-foreground);
}
.ui-badge--link {
  text-decoration: none;
}
.ui-badge--link:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.ui-badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.ui-badge-group .ui-badge,
.ui-card .ui-badge,
.ui-chip-list .ui-badge {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
  text-align: left;
}
.ui-badge-group,
.ui-card-content .ui-badge-group {
  min-width: 0;
}
.ui-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.ui-chip-list .ui-badge,
.ui-chip-list .ui-badge--link {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
  line-height: 1.45;
  padding-block: 0.42em;
}
.ui-chip-list__label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-right: 0.2rem;
}

/* ---------- media ---------- */
.ui-media {
  margin: 0;
}
.ui-media__img {
  width: 100%;
  height: auto;
  background: var(--muted);
}
.ui-media__cap {
  display: inline-flex;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--muted-foreground);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ui-card .ui-media__cap,
.ui-card-media .ui-media__cap {
  display: none;
}

/* ---------- type & section chrome ---------- */
.ui-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
}
.ui-lede {
  margin-top: 0.6rem;
  font-size: 1.12rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--foreground) 80%, var(--muted-foreground) 20%);
  max-width: 46rem;
}
.ui-muted {
  color: var(--muted-foreground);
  font-size: 0.95rem;
}
.ui-section__head {
  margin-bottom: 1.7rem;
  max-width: 48rem;
}
.ui-section__title {
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 700;
}
.ui-pagehead {
  padding: 2rem 0 1rem;
}
.ui-pagehead__title {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.05;
}
.ui-pagehead__lede {
  margin-top: 0.9rem;
  font-size: 1.14rem;
  color: color-mix(in srgb, var(--foreground) 78%, var(--muted-foreground) 22%);
  max-width: 50rem;
}
.ui-sub {
  margin-top: 2.6rem;
}
.ui-sub__title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.ui-article {
  font-size: 1.04rem;
}
.ui-article p,
.ui-article__p {
  margin: 0 0 1.15rem;
  color: color-mix(in srgb, var(--foreground) 84%, var(--muted-foreground) 16%);
}
.ui-article__lead {
  font-size: 1.22rem;
  color: var(--foreground) !important;
}
.ui-quote {
  margin: 1.6rem 0 0;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--card);
}
.ui-quote p {
  color: color-mix(in srgb, var(--foreground) 82%, transparent);
  font-size: 1.05rem;
}
.ui-quote .ui-button {
  margin-top: 1.1rem;
}
.ui-stack {
  display: grid;
  gap: 0.6rem;
}
.ui-stack .ui-button {
  width: 100%;
}

/* ---------- breadcrumbs ---------- */
.ui-breadcrumb {
  margin: 1.1rem 0 0.2rem;
  font-size: 0.88rem;
  color: var(--muted-foreground);
}
.ui-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
}
.ui-breadcrumb__link {
  color: var(--muted-foreground);
  text-decoration: none;
}
.ui-breadcrumb__link:hover {
  color: var(--foreground);
  text-decoration: underline;
}
.ui-breadcrumb__separator {
  margin-inline: 0.3rem;
  opacity: 0.6;
}
.ui-breadcrumb__item [aria-current="page"] {
  color: color-mix(in srgb, var(--foreground) 82%, transparent);
}

/* ---------- grids & stats ---------- */
.ui-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.ui-grid > *,
.ui-project-list__cell,
.ui-card,
.ui-detail,
.ui-detail__body,
.ui-detail__aside,
.ui-aside-card,
.ui-intake,
.ui-field {
  min-width: 0;
}
@media (min-width: 640px) {
  .ui-grid--2, .ui-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .ui-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ui-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  margin: 0.4rem 0 0;
}
.ui-fact {
  display: flex;
  flex-direction: column-reverse;
}
.ui-fact__label {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ui-fact__value {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.ui-facts--inline {
  display: grid;
  gap: 0.35rem 1rem;
  margin: 1rem 0 0;
  max-width: 44rem;
}
.ui-fact--row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.9rem;
}
.ui-fact--row .ui-fact__label {
  margin: 0;
}
.ui-fact--row .ui-fact__value {
  font-size: 1.05rem;
  font-weight: 600;
}

/* ---------- hero ---------- */
.ui-hero {
  padding-block: clamp(2.4rem, 6vw, 4.6rem);
}
.ui-hero__grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
}
@media (min-width: 920px) {
  .ui-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.ui-hero__title {
  font-size: clamp(2.5rem, 6vw, 4.1rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.ui-hero__lede {
  margin-top: 1.1rem;
  max-width: 34rem;
  font-size: 1.18rem;
  color: color-mix(in srgb, var(--foreground) 78%, var(--muted-foreground) 22%);
}
.ui-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.9rem;
}
.ui-hero__media {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.55);
}
.ui-hero__media .ui-media__img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}
.ui-hero__media .ui-media__cap {
  display: none;
}

/* ---------- detail pages & asides ---------- */
.ui-detail {
  display: grid;
  gap: 2.2rem;
  padding-bottom: 2.2rem;
}
@media (min-width: 920px) {
  .ui-detail {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
  }
  .ui-detail__aside {
    position: sticky;
    top: 6rem;
  }
}
.ui-detail__body {
  min-width: 0;
}
.ui-detail__body .ui-media,
.ui-detail__body figure {
  min-width: 0;
  max-width: 100%;
}
.ui-detail__body .ui-media {
  margin: 1.5rem 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.ui-detail__body .ui-media__img {
  width: 100%;
}
.ui-detail__body .ui-media__cap {
  padding: 0.6rem 0.9rem;
  margin: 0;
}
.ui-detail__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ui-aside-card {
  height: auto;
}
.ui-aside-card--quiet {
  background: transparent;
}
.ui-aside-card .ui-card-header {
  padding-top: 1.15rem;
}
.ui-aside-card .ui-card-content {
  padding-bottom: 1.2rem;
}
.ui-scope-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.35rem;
}
.ui-scope-list li::marker {
  color: var(--primary);
}

/* ---------- values & timeline ---------- */
.ui-values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin-top: 1.1rem;
}
.ui-values .ui-card-header {
  padding-bottom: 0;
}
.ui-values .ui-card-content {
  padding-top: 0.4rem;
  color: var(--muted-foreground);
}
.ui-timeline {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
}
.ui-timeline__item {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 1.1rem;
  padding: 0 0 1.8rem;
}
@media (min-width: 760px) {
  .ui-timeline__item {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
}
.ui-timeline__year {
  font-family: var(--font-mono);
  color: var(--primary);
  font-weight: 700;
  padding-top: 0.15rem;
}
.ui-timeline__title {
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.ui-timeline__body {
  color: color-mix(in srgb, var(--foreground) 76%, var(--muted-foreground) 24%);
  font-size: 0.98rem;
}

/* ---------- engage band ---------- */
.ui-engage {
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--card);
}
.ui-engage .ui-section__head {
  margin-inline: auto;
}
.ui-engage .ui-lede {
  margin-inline: auto;
}
.ui-engage__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.7rem;
}
.ui-engage .ui-chip-list {
  justify-content: center;
  margin-top: 1.6rem;
}

/* ---------- project discovery ---------- */
.ui-projects__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
  align-items: flex-start;
  padding: 1.3rem 1.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.ui-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  flex: 1 1 30rem;
}
.ui-control {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 11rem;
}
.ui-control__legend {
  padding: 0;
  margin-bottom: 0.55rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.ui-control__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ui-control-option {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 84%, transparent);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.34em 0.85em;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.ui-control-option:hover {
  background: var(--accent);
  color: var(--accent-foreground);
  border-color: transparent;
}
.ui-control-option[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.ui-search {
  flex: 1 1 15rem;
  max-width: 24rem;
}
.ui-search__label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.45rem;
}
.ui-result-count {
  display: block;
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--muted-foreground);
  min-height: 1.4em;
}
.ui-project-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .ui-project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ui-project-empty {
  color: var(--muted-foreground);
  font-style: italic;
  padding: 1rem 0;
}

/* ---------- inputs / selects ---------- */
.ui-input {
  width: 100%;
  padding: 0.62em 0.9em;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ui-input::placeholder {
  color: var(--muted-foreground);
}
.ui-input:focus,
.ui-select:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 30%, transparent);
}
.ui-input--textarea {
  resize: vertical;
  min-height: 5.5rem;
}
.ui-select-wrap {
  position: relative;
}
.ui-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.62em 2.2em 0.62em 0.9em;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 0.95rem;
}
.ui-select-wrap::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  transform: translateY(-50%);
  background: currentColor;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- intake ---------- */
.ui-intake {
  padding: 1.7rem 1.6rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.ui-intake__step {
  border: 0;
  margin: 0 0 1.3rem;
  padding: 0;
}
.ui-intake__legend {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  padding: 0;
}
.ui-intake__legend-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.9rem;
}
.ui-field {
  margin-bottom: 1.05rem;
  max-width: 34rem;
}
.ui-field__label {
  display: inline-flex;
  gap: 0.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.ui-field__req {
  color: var(--destructive);
}
.ui-field__hint {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}
.ui-field__error {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--destructive);
  font-weight: 500;
}
.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"] {
  border-color: var(--destructive);
}
.ui-intake__form-error {
  margin: 0.6rem 0 0;
  color: var(--destructive);
  font-size: 0.92rem;
  font-weight: 600;
}
.ui-intake__nav {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.6rem;
}
.ui-intake__review {
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border);
}
.ui-intake__review-actions {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  margin-top: 1rem;
}
.ui-steps {
  margin: 0.4rem 0 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.5rem;
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
  font-size: 0.94rem;
}
.ui-steps li::marker {
  color: var(--primary);
}

/* ---------- alert ---------- */
.ui-alert {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-top: 1.4rem;
}
.ui-alert--destructive {
  border-color: var(--destructive);
  color: var(--destructive);
}
.ui-alert__title {
  font-weight: 700;
  color: inherit;
}
.ui-alert__body {
  color: color-mix(in srgb, var(--foreground) 78%, transparent);
  font-size: 0.95rem;
}

/* ---------- assistant ---------- */
.ui-launcher {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72em 1.2em;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.6);
  transition: filter 150ms ease;
}
.ui-launcher:hover {
  filter: brightness(1.08);
}
.ui-launcher__icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/*
 * Assistant placement. The wrap is a bottom-anchored, viewport-capped COLUMN
 * that never scrolls itself: the card inside it owns the single scroll region
 * (the conversation), so the red header can never move while the conversation
 * beneath it scrolls.
 *
 * `justify-content: flex-end` keeps the card hugging the launcher while the
 * conversation is short — it grows upward exactly as before — and `height`
 * reproduces the accepted cap `min(72vh, 34rem)`. A DEFINITE height is what
 * makes the card's `max-height: 100%` resolve, so the card (not the wrap) is
 * the scroller. No viewport-level `fixed` enters the card's layout.
 */
.ui-assistant-wrap {
  position: fixed;
  right: 1.2rem;
  bottom: 4.9rem;
  z-index: 110;
  width: min(23rem, calc(100vw - 2.4rem));
  height: min(72vh, 34rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.ui-dialog-content {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.55);
  overflow: hidden;
}
/*
 * The assistant card is the ONE scroll region (conversation + voice footer).
 * `overflow-y: auto` clips exactly like the previous `overflow: hidden`, so the
 * accepted rounded corners are unchanged.
 */
.ui-assistant-wrap .ui-dialog-content {
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.ui-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  background: var(--primary);
  color: var(--primary-foreground);
}
/*
 * Pinning is the ASSISTANT card's rule, not a property of every dialog: only
 * the assistant is a scrolling card with a header above a conversation.
 *
 * The header stays visible at every scroll position, and being positioned and
 * opaque it always paints ABOVE the conversation — no bleed-through, no
 * z-order guesswork, and no viewport-level `fixed`.
 */
.ui-assistant-wrap .ui-dialog-header {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: 0 0 auto;
}
.ui-dialog-header__actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
}
.ui-dialog-header .ui-dialog-close {
  color: var(--primary-foreground);
}
.ui-dialog-header .ui-dialog-close:hover {
  background: rgb(255 255 255 / 0.18);
}
/*
 * Reset / new conversation — a compact control beside close. It is a distinct
 * action (close ends the visit, reset ends the CONVERSATION), so it gets its
 * own control rather than overloading ×. Rendered hidden and revealed by the
 * client only once a live chat exists (nothing else can be reset).
 */
.ui-dialog-reset {
  border: 0;
  background: transparent;
  color: inherit;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ui-dialog-reset[hidden] {
  display: none;
}
.ui-dialog-reset svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-dialog-header .ui-dialog-reset:hover {
  background: rgb(255 255 255 / 0.18);
}
.ui-dialog-title {
  font-size: 1.05rem;
  margin: 0;
}
.ui-dialog-body {
  padding: 1.05rem 1.15rem 1.2rem;
}
.ui-assistant__role {
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  font-size: 0.95rem;
}
.ui-assistant__subtitle {
  font-size: 1rem;
  margin: 1rem 0 0.3rem;
}
.ui-assistant__text {
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  font-size: 0.92rem;
}
.ui-assistant__actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.ui-assistant__live {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border-radius: calc(var(--radius) - 2px);
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 0.9rem;
}

/* ---------- footer ---------- */
.ui-footer {
  border-top: 1px solid var(--border);
  background: var(--card);
  padding: 3rem 0 2rem;
  margin-top: 3.5rem;
}
.ui-footer__grid {
  display: grid;
  gap: 2.2rem;
}
@media (min-width: 820px) {
  .ui-footer__grid {
    grid-template-columns: 1.4fr 1fr 1.2fr;
  }
}
.ui-footer__tagline {
  margin-top: 0.8rem;
  color: var(--muted-foreground);
  font-size: 0.95rem;
  max-width: 22rem;
}
.ui-footer__heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.9rem;
}
.ui-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.ui-footer__link,
.ui-footer__text {
  color: color-mix(in srgb, var(--foreground) 76%, transparent);
  font-size: 0.95rem;
  text-decoration: none;
  word-break: break-word;
}
.ui-footer__link:hover {
  color: var(--primary);
}
.ui-footer__legal {
  margin-top: 2.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .ui-header .ui-nav {
    display: none;
  }
  .ui-menu-toggle {
    display: inline-flex;
  }
}
@media (min-width: 1025px) {
  .ui-sheet-content {
    display: none !important;
  }
  .ui-menu-toggle {
    display: none !important;
  }
}
@media (max-width: 640px) {
  .ui-brand__descriptor {
    display: none;
  }
  .ui-launcher__label {
    display: none;
  }
  .ui-launcher {
    padding: 0.78rem;
  }
  .ui-footer__legal {
    flex-direction: column;
  }
  .ui-fact--row {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }
}


/* =====================================================================
   Mission 4.2 — presentation refinement (reusable Frontline layer)
   ---------------------------------------------------------------------
   Visual alignment toward the locked shadcn/studio-inspired reference:
   brand presence, typography hierarchy, spacing rhythm, card/hero
   composition, button proportions, image treatment. Token-driven only —
   nothing tenant-specific; Demo Plumbing inherits the same refinements.
   ===================================================================== */

/* ---- brand & header composition ---- */
.ui-header__inner {
  min-height: 5.2rem;
  gap: 2.2rem;
}
.ui-brand {
  gap: 1rem;
}
.ui-brand__logo {
  width: auto;
  height: auto;
  max-width: 15rem;
  max-height: 3.4rem;
}
.ui-brand__name {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.ui-brand__descriptor {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.ui-nav__list,
.ui-nav-panel__list {
  gap: 2rem;
}
.ui-nav__link {
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 0.55rem 0.15rem 0.45rem;
  border-bottom-width: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.ui-nav__link:hover {
  color: var(--foreground);
}
.ui-nav__link[aria-current="page"] {
  color: var(--foreground);
  border-bottom-color: var(--primary);
}
.ui-header .ui-nav {
  margin-left: 0;
}
.ui-header__inner .ui-nav {
  margin-left: 2rem;
}
.ui-header__actions {
  margin-left: auto;
  gap: 1rem;
}
.ui-theme-btn {
  width: 2.15rem !important;
  height: 1.95rem !important;
}
.ui-menu-toggle {
  width: 2.75rem;
  height: 2.75rem;
}

/* ---- refined typographic scale & rhythm ---- */
.ui-section {
  padding-block: clamp(3.2rem, 7vw, 6rem);
}
.ui-section--tight {
  padding-block: 0.6rem 2.6rem;
}
.ui-kicker {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.7rem;
}
.ui-section__head {
  margin-bottom: 2.1rem;
}
.ui-section__title {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.015em;
}
.ui-lede {
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 42rem;
}
.ui-pagehead {
  padding: 2.6rem 0 1.4rem;
}
.ui-pagehead__title {
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ui-pagehead__lede {
  font-size: 1.08rem;
  max-width: 46rem;
}
.ui-sub__title {
  font-size: 1.3rem;
  font-weight: 800;
}
.ui-article p,
.ui-article__p {
  line-height: 1.75;
}
.ui-muted {
  font-size: 0.92rem;
}

/* ---- buttons: official shadcn proportions ---- */
.ui-button {
  border-radius: calc(var(--radius) - 2px);
  font-weight: 600;
  letter-spacing: 0.005em;
}
.ui-button--md {
  height: 2.5rem;
  padding-inline: 1.1rem;
  font-size: 0.92rem;
}
.ui-button--sm {
  height: 2.1rem;
  padding-inline: 0.8rem;
  font-size: 0.84rem;
  font-weight: 600;
}
.ui-button--lg {
  height: 3rem;
  padding-inline: 1.7rem;
  font-size: 1rem;
}
.ui-button--outline:hover,
.ui-button--ghost:hover {
  border-color: var(--accent);
}

/* ---- hero composition ---- */
.ui-hero {
  padding-block: clamp(3rem, 7vw, 5.4rem);
}
.ui-hero__grid {
  gap: clamp(2.4rem, 5vw, 4rem);
  align-items: center;
}
.ui-hero__title {
  font-size: clamp(2.5rem, 4.8vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 15ch;
}
.ui-hero__lede {
  margin-top: 1.25rem;
  font-size: 1.12rem;
  line-height: 1.7;
  max-width: 34rem;
}
.ui-hero__actions {
  margin-top: 2.1rem;
  gap: 1rem;
}
.ui-hero__media {
  border-radius: calc(var(--radius) + 0.2rem);
  border: 1px solid var(--border);
  background: var(--muted);
}
.ui-hero__media .ui-media__img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---- cards: tighter, flatter shadcn treatment ---- */
.ui-card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: border-color 160ms ease, transform 160ms ease;
}
.ui-card:hover {
  border-color: color-mix(in srgb, var(--border) 45%, var(--primary) 55%);
}
.ui-card-header {
  padding: 1.2rem 1.3rem 0.15rem;
  gap: 0.4rem;
}
.ui-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ui-card-description {
  font-size: 0.92rem;
  line-height: 1.55;
}
.ui-card-content {
  padding: 0.55rem 1.3rem 1.05rem;
}
.ui-card-footer {
  gap: 0.5rem;
  padding: 0.35rem 1.3rem 1.15rem;
}
.ui-card--service .ui-card-media .ui-media__img {
  aspect-ratio: 16 / 10;
}
.ui-card--capability > .ui-card-header {
  border-radius: var(--radius) var(--radius) 0 0;
}
.ui-project-client {
  font-size: 0.9rem;
}
.ui-project-meta {
  font-weight: 600;
}

/* ---- badges ---- */
.ui-badge {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.3em 0.72em;
  border-radius: 999px;
}

/* ---- trust band ---- */
.ui-facts {
  gap: clamp(2.2rem, 5vw, 4.2rem);
  margin-top: 0.6rem;
}
.ui-fact__value {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.ui-fact__label {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ---- quote & engage ---- */
.ui-quote {
  padding: 1.6rem 1.8rem;
  border-left-width: 3px;
}
.ui-engage {
  border-top: 1px solid var(--border);
}
.ui-engage .ui-lede {
  font-size: 1.08rem;
}

/* ---- footer brand presence ---- */
.ui-footer__brand .ui-brand__logo {
  max-height: 2.5rem;
  max-width: 11rem;
}
.ui-footer__brand .ui-brand__name {
  font-size: 1.06rem;
}
.ui-footer__heading {
  letter-spacing: 0.12em;
}

/* ---- mobile tuning ---- */
@media (max-width: 640px) {
  .ui-header__inner {
    min-height: 4.6rem;
    gap: 1rem;
  }
  .ui-brand {
    gap: 0.7rem;
  }
  .ui-brand__logo {
    max-height: 2.4rem;
  }
  .ui-brand__name {
    font-size: 1rem;
  }
  .ui-nav-panel__link {
    font-size: 1.02rem;
    padding: 0.85rem 0.2rem;
  }
  .ui-sheet-title {
    font-size: 1rem;
  }
  .ui-launcher__icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}



/* =====================================================================
   Mission 4.3 — Industrial brand DNA (reusable, token-driven)
   ---------------------------------------------------------------------
   Restores Bestcor's industrial visual authority inside Frontline:
   masthead brand presence, cinematic full-bleed hero with authentic
   photography, display typography token, architectural geometry, and
   strategic accent use. No tenant-id hacks: Bestcor selects tokens
   (radius, display font, hero variant); other tenants stay free.
   ===================================================================== */

/* display typeface token applied to headings (defaults to sans) */
h1, h2, h3, h4,
.ui-brand__name,
.ui-hero__title,
.ui-pagehead__title,
.ui-section__title,
.ui-sub__title,
.ui-card-title,
.ui-timeline__title,
.ui-fact__value,
.ui-project-client {
  font-family: var(--font-display);
}

/* ---- masthead: authoritative brand block ---- */
.ui-header {
  position: relative;
}
.ui-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  z-index: 1;
}
.ui-header__inner {
  min-height: 6.9rem;
  gap: 2.4rem;
}
.ui-brand {
  gap: 1.1rem;
  min-width: 0;
}
.ui-brand__logo {
  max-height: 4.75rem;
  max-width: 19rem;
  flex-shrink: 0;
}
.ui-brand__text {
  gap: 0.12rem;
  justify-content: center;
}
.ui-brand__name {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.015em;
  line-height: 1.05;
}
.ui-header .ui-brand__descriptor {
  display: none;
}
.ui-nav__list,
.ui-nav-panel__list {
  gap: 2.1rem;
}
.ui-nav__link {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.6rem 0.1rem 0.5rem;
}
.ui-header__actions {
  gap: 1.1rem;
}
.ui-header__cta {
  display: none;
  margin-left: 0.25rem;
}
@media (min-width: 1360px) {
  .ui-header__cta {
    display: inline-flex;
  }
}

/* ---- cinematic industrial hero ---- */
.ui-hero--cinematic {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(76vh, 740px);
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background: #07090D;
}
.ui-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}
.ui-hero__bgimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
.ui-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 8, 12, 0.93) 0%, rgba(6, 8, 12, 0.72) 40%, rgba(6, 8, 12, 0.28) 78%, rgba(6, 8, 12, 0.16) 100%),
    linear-gradient(0deg, rgba(6, 8, 12, 0.9) 0%, transparent 24%);
}
.ui-hero__inner {
  position: relative;
  width: 100%;
}
.ui-hero--cinematic .ui-hero__content {
  max-width: 52rem;
  color: #ffffff;
}
.ui-hero--cinematic .ui-kicker {
  color: #ff5a44;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}
.ui-hero--cinematic .ui-hero__title {
  color: #ffffff;
  text-transform: uppercase;
  font-size: clamp(2.7rem, 7.2vw, 5.4rem);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 0.98;
  max-width: 15ch;
}
.ui-hero--cinematic .ui-hero__lede {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.12rem;
  line-height: 1.72;
  max-width: 38rem;
  margin-top: 1.4rem;
}
.ui-hero--cinematic .ui-hero__actions {
  margin-top: 2.2rem;
}
.ui-hero--cinematic .ui-hero__actions .ui-button--default {
  background: var(--primary);
  color: #ffffff;
}
.ui-hero--cinematic .ui-hero__actions .ui-button--outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}
.ui-hero--cinematic .ui-hero__actions .ui-button--outline:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.ui-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.6rem;
  margin: 2.4rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.ui-hero__fact {
  display: flex;
  flex-direction: column;
}
.ui-hero__fact-label {
  order: 2;
  margin: 0.2rem 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ui-hero__fact-value {
  order: 1;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
  line-height: 1;
}

/* ---- architectural geometry: harder edges via tenant radius ---- */
.ui-card {
  border-radius: calc(var(--radius) - 2px);
}
.ui-button {
  border-radius: calc(var(--radius) - 2px);
}
.ui-input,
.ui-select {
  border-radius: calc(var(--radius) - 2px);
}

/* ---- typographic polish ---- */
.ui-pagehead__title {
  letter-spacing: -0.02em;
}
.ui-section__title {
  letter-spacing: -0.01em;
}
.ui-card-title a {
  letter-spacing: -0.01em;
}
.ui-timeline__year {
  font-weight: 800;
}

/* ---- editorial project/service framing ---- */
.ui-detail__body .ui-pagehead__title {
  font-size: clamp(2.1rem, 3.8vw, 3rem);
}
.ui-facts--inline .ui-fact--row .ui-fact__label {
  letter-spacing: 0.08em;
}

/* ---- light mode: keep industrial character, not inversion ---- */
.light .ui-hero--cinematic {
  background: #0B0F14;
}
.light .ui-hero--cinematic .ui-kicker {
  color: #ff5a44;
}

/* ---- mobile ---- */
@media (max-width: 720px) {
  .ui-header__inner {
    min-height: 5.1rem;
    gap: 1.1rem;
  }
  .ui-brand__logo {
    max-height: 3.3rem;
  }
  .ui-brand__name {
    font-size: 1.1rem;
  }
  .ui-hero--cinematic {
    min-height: 0;
    padding: 3.4rem 0 2.6rem;
  }
  .ui-hero--cinematic .ui-hero__title {
    font-size: clamp(2.1rem, 11vw, 3rem);
  }
  .ui-hero--cinematic .ui-hero__lede {
    font-size: 1rem;
  }
  .ui-hero__facts {
    gap: 1.5rem 2rem;
  }
  .ui-brand__logo,
  .ui-footer__brand .ui-brand__logo {
    flex-shrink: 0;
  }
}



/* =====================================================================
   Mission 4.5 — final visual authority (self-hosted display font,
   brand red/green language, logo authority, header de-duplication)
   ===================================================================== */

/* Self-hosted condensed industrial display webfont (SIL OFL 1.1) */
@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/Oswald-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* ---- logo authority (tenant-configurable via brand CSS vars) ----
   Height-driven sizing so any logo keeps its intrinsic aspect ratio
   (never crop/distort); Bestcor selects 4.9rem desktop / 4.15rem mobile. */
.ui-brand__logo {
  height: var(--fl-logo-h, 3.9rem);
  width: auto;
  max-width: 22rem;
  max-height: none;
}
.ui-footer__brand .ui-brand__logo {
  height: 2.7rem;
  width: auto;
  max-height: none;
}
.ui-header__inner {
  min-height: 7.5rem;
  gap: 2.2rem;
}
.ui-nav__list,
.ui-nav-panel__list {
  gap: 2.1rem;
}

/* ---- display treatment: scale + disciplined uppercase ---- */
.ui-hero--cinematic .ui-hero__title {
  font-size: clamp(2.6rem, 7.5vw, 6.8rem);
  font-weight: 700;
  letter-spacing: 0.006em;
  line-height: 0.99;
}
.ui-pagehead__title {
  font-size: clamp(2rem, 1.1rem + 3.1vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.03;
}
.ui-title-up {
  text-transform: uppercase;
}
.ui-section__title {
  font-size: clamp(1.8rem, 1rem + 1.9vw, 2.55rem);
  font-weight: 700;
}
.ui-sub__title {
  font-size: 1.35rem;
  font-weight: 700;
}
.ui-card-title {
  font-size: 1.14rem;
  font-weight: 700;
}
.ui-fact__value {
  font-weight: 700;
}
.ui-timeline__year {
  font-weight: 700;
  font-size: 1.02rem;
}
.ui-timeline__title {
  font-weight: 700;
}

/* ---- structured display highlights (primary / signal roles) ---- */
.ui-hl--primary {
  color: var(--primary);
}
.ui-hl--signal {
  color: var(--signal, #2f7d33);
}
.ui-hero--cinematic .ui-hl--primary {
  color: #ff5c4d; /* legible brand-red family on photographic dark overlay */
}
.ui-hero--cinematic .ui-hl--signal {
  color: #8fe07f; /* legible Bestcor-green family on photographic dark overlay */
}
.ui-hero--cinematic .ui-hero__title .ui-hl {
  white-space: nowrap;
}

/* mobile tuning for the larger lockup */
@media (max-width: 720px) {
  .ui-header__inner {
    min-height: 5.6rem;
    gap: 1.1rem;
  }
  .ui-brand__logo {
    height: var(--fl-logo-mh, 3rem);
    width: auto;
    max-height: none;
    max-width: 12rem;
  }
  .ui-hero--cinematic .ui-hero__title {
    font-size: clamp(2.6rem, 12.2vw, 3.3rem);
  }
  .ui-pagehead__title {
    font-size: clamp(1.7rem, 1.15rem + 2.4vw, 2.3rem);
    line-height: 1.06;
  }
  .ui-section__title {
    font-size: clamp(1.5rem, 1.05rem + 2vw, 2rem);
  }
}



/* =====================================================================
   Mission 4.8 — production-candidate visual reconciliation (old-look
   character, reusable variants only)
   ===================================================================== */

/* -- governed cinematic eyebrow (legal name · municipality) -- */
.ui-hero--cinematic .ui-kicker {
  letter-spacing: 0.16em;
  font-size: 0.76rem;
}
@media (max-width: 720px) {
  .ui-hero--cinematic .ui-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    line-height: 1.5;
  }
}

/* -- numbered square photo tiles (reusable variant, tenant-selected) -- */
.ui-card--service-tile .ui-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--muted);
}
.ui-card--service-tile .ui-tile .ui-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ui-card--service-tile .ui-tile__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4, 7, 6, 0.72), rgba(4, 7, 6, 0.06) 45%, transparent 70%);
  opacity: 0.85;
}
.ui-card--service-tile .ui-tile__no {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  padding: 0.35em 0.7em;
  border-radius: 2px;
  text-transform: uppercase;
}
.ui-card--service-tile .ui-card-header {
  padding-top: 1rem;
}
.ui-card--service-tile:hover {
  border-color: color-mix(in srgb, var(--border) 40%, var(--primary) 60%);
}


/* =====================================================================
   Mission 4.10 — established contractor front-office look (reusable)
   ---------------------------------------------------------------------
   Variants selected in tenant config — presentation.headerStyle: "legacy"
   (header wordmark lockup + uppercase nav + header CTA) and structured
   hero.lines + hero copy fields (two-line display headline hero with
   governed eyebrow/body and primary/secondary CTAs). Theme-token and
   typography-token driven; no tenant-id rules.
   ===================================================================== */

/* =====================================================================
   Mission 4.11B — legacy desktop masthead composition (OWNER-approved
   reference): intentionally spaced, balanced rail; full wordmark lockup;
   one-line nav items with breathing room; grouped theme control; strong
   quotation CTA. Frozen header remains authoritative.
   ===================================================================== */

/* Frozen masthead: header stays pinned while scrolling (OWNER mandate).
   `position: sticky` keeps it in flow, so hero/pageheads start below the
   header naturally and no spacer/offset is needed. */
.ui-header--legacy {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* The legacy masthead spans the full viewport rail. The shared 76rem
   container cap compressed the six-item nav at desktop widths — that is
   the rejected "cramped" root cause — so the cap is lifted inside the
   header only (page sections keep the shared container rhythm). */
.ui-header--legacy .ui-container {
  max-width: none;
  width: 100%;
}
.ui-header--legacy .ui-header__inner {
  padding-inline: clamp(1.25rem, 2.2vw, 2.5rem);
}

/* ---- brand block: logo + full wordmark lockup (never collapses) ---- */
.ui-header--legacy .ui-brand {
  gap: clamp(0.6rem, 0.3rem + 0.5vw, 1rem);
  min-width: 0;
  flex-shrink: 0;
}
.ui-header--legacy .ui-brand__logo {
  height: var(--fl-logo-h, 4.9rem);
  width: auto;
  max-width: 19rem;
  flex-shrink: 0;
}
.ui-header--legacy .ui-brand__text {
  min-width: 0;
  gap: 0.18rem;
}
.ui-header--legacy .ui-brand__name {
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.ui-header--legacy .ui-brand__descriptor {
  display: block;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--muted-foreground) 82%, transparent);
}

/* ---- actions: grouped theme control + strong red CTA ---- */
.ui-header--legacy .ui-header__actions {
  flex-shrink: 0;
}
.ui-header--legacy .ui-header__cta {
  white-space: nowrap;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Breakpoint strategy — inline desktop nav ONLY while it fits cleanly.
   - 1160px+  : brand + six one-line nav labels + theme + CTA on one row
   - 1025–1159: clean burger/sheet navigation (no cramped desktop row)
   - < 1025   : established mobile behavior (base rules)
   ------------------------------------------------------------------ */

/* Band 1025–1159 — clean compact masthead: brand + theme + CTA + burger.
   Base rules hide the toggle/sheet with !important from 1025px, so the
   legacy overrides must carry !important too. */
@media (max-width: 1159px) {
  .ui-header--legacy .ui-nav {
    display: none;
  }
  .ui-header--legacy .ui-menu-toggle {
    display: inline-flex !important;
  }
  .ui-header--legacy .ui-sheet-content {
    display: block !important;
  }
  .ui-header--legacy .ui-header__inner {
    min-height: 5rem;
    gap: 1rem;
  }
  .ui-header--legacy .ui-brand__name {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }
  .ui-header--legacy .ui-brand__descriptor {
    font-size: 0.44rem;
    letter-spacing: 0.12em;
  }
  @media (min-width: 1025px) {
    .ui-header--legacy .ui-header__cta {
      display: inline-flex;
      font-size: 0.74rem;
      letter-spacing: 0.05em;
      padding-inline: 0.95rem;
    }
  }
}

/* Wide desktop — full inline navigation row, generously spaced */
@media (min-width: 1160px) {
  .ui-header--legacy .ui-nav {
    display: block;
    margin-inline: auto;
  }
  .ui-header--legacy .ui-nav__list {
    gap: clamp(1.1rem, 0.4rem + 0.8vw, 1.8rem);
  }
  .ui-header--legacy .ui-nav__link {
    font-size: clamp(0.74rem, 0.5rem + 0.24vw, 0.84rem);
    letter-spacing: 0.06em;
    white-space: nowrap;
    padding: 0.55rem 0.15rem 0.45rem;
    border-bottom-width: 2px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .ui-header--legacy .ui-nav__link:hover,
  .ui-header--legacy .ui-nav__link[aria-current="page"] {
    color: var(--signal, var(--primary));
    border-bottom-color: transparent;
  }
  .ui-header--legacy .ui-header__inner {
    min-height: 5.4rem;
    gap: clamp(1rem, 0.4rem + 1vw, 1.9rem);
  }
  .ui-header--legacy .ui-header__actions {
    gap: 0.9rem;
  }
  .ui-header--legacy .ui-header__cta {
    display: inline-flex;
    font-size: clamp(0.76rem, 0.5rem + 0.24vw, 0.86rem);
    letter-spacing: 0.06em;
    padding-inline: clamp(1rem, 0.4rem + 0.7vw, 1.35rem);
  }
  .ui-header--legacy .ui-menu-toggle {
    display: none !important;
  }
  .ui-header--legacy .ui-sheet-content {
    display: none !important;
  }
  .ui-header--legacy .ui-brand__name {
    font-size: clamp(0.8rem, 0.45rem + 0.35vw, 0.98rem);
    letter-spacing: 0.08em;
  }
  .ui-header--legacy .ui-brand__descriptor {
    font-size: clamp(0.46rem, 0.24rem + 0.22vw, 0.56rem);
    letter-spacing: 0.16em;
  }
}

/* Standard desktop (1160–1359): slightly tighter so 1280/1279 stay clean */
@media (min-width: 1160px) and (max-width: 1359px) {
  .ui-header--legacy .ui-header__inner {
    min-height: 5.1rem;
    gap: 1.1rem;
  }
  /* keep the full lockup logo height in the standard tier so the footer
     signature ratio (about 1.7-2.0x) stays consistent at 1280-1359 too */
  .ui-header--legacy .ui-brand__logo {
    max-width: 17rem;
  }
  .ui-header--legacy .ui-nav__list {
    gap: 1.05rem;
  }
  .ui-header--legacy .ui-nav__link {
    font-size: 0.76rem;
    padding: 0.5rem 0.1rem 0.4rem;
  }
  .ui-header--legacy .ui-header__actions {
    gap: 0.6rem;
  }
  .ui-header--legacy .ui-header__cta {
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    padding-inline: 0.95rem;
  }
  .ui-header--legacy .ui-theme-btn {
    width: 1.9rem !important;
    height: 1.7rem !important;
  }
  .ui-header--legacy .ui-brand__name {
    font-size: 0.82rem;
  }
  .ui-header--legacy .ui-brand__descriptor {
    font-size: 0.48rem;
    letter-spacing: 0.12em;
  }
}

/* Very wide (1500+): the approved airy composition */
@media (min-width: 1500px) {
  .ui-header--legacy .ui-header__inner {
    min-height: 5.6rem;
    gap: 1.6rem;
  }
  .ui-header--legacy .ui-nav__list {
    gap: 1.7rem;
  }
  .ui-header--legacy .ui-nav__link {
    font-size: 0.82rem;
    letter-spacing: 0.07em;
  }
  .ui-header--legacy .ui-header__cta {
    font-size: 0.82rem;
    padding-inline: 1.25rem;
  }
  .ui-header--legacy .ui-header__actions {
    gap: 1rem;
  }
  .ui-header--legacy .ui-brand__name {
    font-size: 0.94rem;
    letter-spacing: 0.09em;
  }
  .ui-header--legacy .ui-brand__descriptor {
    font-size: 0.52rem;
    letter-spacing: 0.18em;
  }
}

/* ---- legacy hero: two-line display headline + governed copy ---- */
.ui-hero--legacy {
  align-items: flex-end;
  min-height: min(86svh, 960px);
}
.ui-hero--legacy .ui-hero__content {
  max-width: 66rem;
}
.ui-hero--legacy .ui-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--signal, #7fd56f);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}
.ui-hero--legacy .ui-kicker::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.65;
  flex: 0 0 auto;
}
.ui-hero--legacy .ui-hero__title {
  max-width: none;
  font-size: clamp(2.8rem, 9.4vw, 6.9rem);
  font-weight: 700;
  letter-spacing: 0.012em;
  line-height: 0.95;
}
.ui-hero--legacy .ui-hero__title .ui-hero__line {
  display: block;
}
.ui-hero--legacy .ui-hl--signal {
  color: #7fd56f;
}
.ui-hero--legacy .ui-hl--primary {
  color: #ef3b30;
}
.ui-hero--legacy .ui-hero__lede {
  max-width: 42rem;
  font-size: clamp(1.02rem, 0.2rem + 1.1vw, 1.2rem);
  line-height: 1.72;
  margin-top: 1.9rem;
}
.ui-hero--legacy .ui-hero__actions {
  margin-top: 2.4rem;
}

/* narrow: calm scale + bottom-anchored composition stays two-line */
@media (max-width: 720px) {
  .ui-header--legacy .ui-header__inner {
    min-height: 4.9rem;
    gap: 1rem;
  }
  .ui-header--legacy .ui-brand__logo {
    height: var(--fl-logo-mh, 3.4rem);
    max-width: 12rem;
  }
  .ui-header--legacy .ui-brand__name {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
  }
  .ui-header--legacy .ui-brand__descriptor {
    display: none;
  }
  /* the legacy wordmark joins only from 420px (established masthead behavior) */
  @media (max-width: 419px) {
    .ui-header--legacy .ui-brand__text {
      display: none;
    }
  }
  .ui-hero--legacy {
    min-height: 86svh;
  }
  .ui-hero--legacy .ui-hero__title {
    font-size: clamp(2.35rem, 12vw, 3.2rem);
    line-height: 1.02;
  }
  .ui-hero--legacy .ui-kicker {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    gap: 0.6rem;
    line-height: 1.6;
    align-items: flex-start;
  }
  .ui-hero--legacy .ui-kicker::before {
    margin-top: 0.32rem;
    width: 1.25rem;
  }
  .ui-hero--legacy .ui-hero__lede {
    font-size: 1rem;
    line-height: 1.66;
  }
}


/* =====================================================================
   Mission 4.11C — footer brand signature (OWNER-approved)
   ---------------------------------------------------------------------
   The footer uses the SAME complete governed identity as the legacy
   header (legal name + wordmark descriptor + tagline) but at a larger,
   more prominent scale: bigger logo, stronger company name. Config/variant
   driven — only the legacy presentation variant selects the signature;
   Demo and other tenants keep the compact footer brand.
   ===================================================================== */

.ui-footer__brand .ui-brand--signature {
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
}
.ui-footer__brand .ui-brand--signature .ui-brand__logo {
  height: 5.75rem;
  width: auto;
  max-width: 20rem;
  max-height: none;
  flex-shrink: 0;
}
.ui-footer__brand .ui-brand--signature .ui-brand__text {
  gap: 0.2rem;
  min-width: 0;
}
.ui-footer__brand .ui-brand--signature .ui-brand__name {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.08;
  text-transform: uppercase;
  white-space: nowrap;
}
.ui-footer__brand .ui-brand--signature .ui-brand__descriptor {
  display: block;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--muted-foreground) 88%, transparent);
}
.ui-footer__brand .ui-brand--signature + .ui-footer__tagline {
  margin-top: 1rem;
  font-size: 1rem;
  max-width: 24rem;
  color: var(--muted-foreground);
}
@media (min-width: 640px) {
  .ui-footer__brand .ui-brand--signature .ui-brand__logo {
    height: 6.5rem;
  }
  .ui-footer__brand .ui-brand--signature .ui-brand__name {
    font-size: 1.2rem;
  }
  .ui-footer__brand .ui-brand--signature .ui-brand__descriptor {
    font-size: 0.58rem;
    letter-spacing: 0.15em;
  }
}
@media (min-width: 900px) {
  .ui-footer__brand .ui-brand--signature .ui-brand__logo {
    height: 7.5rem;
  }
  .ui-footer__brand .ui-brand--signature .ui-brand__name {
    font-size: 1.3rem;
    letter-spacing: 0.06em;
  }
  .ui-footer__brand .ui-brand--signature .ui-brand__descriptor {
    font-size: 0.6rem;
    letter-spacing: 0.17em;
  }
}
@media (min-width: 1280px) {
  .ui-footer__brand .ui-brand--signature .ui-brand__logo {
    height: 8.5rem;
  }
  .ui-footer__brand .ui-brand--signature .ui-brand__name {
    font-size: 1.4rem;
    letter-spacing: 0.07em;
  }
  .ui-footer__brand .ui-brand--signature .ui-brand__descriptor {
    font-size: 0.64rem;
    letter-spacing: 0.18em;
  }
}
@media (min-width: 1600px) {
  .ui-footer__brand .ui-brand--signature .ui-brand__logo {
    height: 8.75rem;
  }
  .ui-footer__brand .ui-brand--signature .ui-brand__name {
    font-size: 1.45rem;
  }
}

/* ---- Mission 5.1 — assistant chat view ---- */
.ui-assistant-chat { display: flex; flex-direction: column; gap: 0.7rem; }
.ui-assistant-chat__welcome { color: var(--muted-foreground); font-size: 0.9rem; }
.ui-assistant-chat__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
/*
 * The message log is part of the card's single scroll region — the card itself
 * scrolls (see .ui-assistant-wrap .ui-dialog-content). It used to cap itself at
 * 40vh with its own scrollbar, which produced a second, nested scrollbar next
 * to the card's and made the header look like it moved.
 */
.ui-assistant-chat__scroll { display: flex; flex-direction: column; gap: 0.6rem; padding-right: 0.2rem; }
.ui-assistant-chat__msg { font-size: 0.92rem; line-height: 1.5; margin: 0; padding: 0.5rem 0.7rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); }
.ui-assistant-chat__msg--user { align-self: flex-end; background: color-mix(in srgb, var(--primary) 18%, var(--card)); }
.ui-assistant-chat__msg--user, .ui-assistant-chat__ctamsg { max-width: 92%; }
.ui-assistant-chat__inputrow { display: flex; gap: 0.5rem; }
.ui-assistant-chat__inputrow .ui-input { flex: 1; min-width: 0; }
.ui-assistant-chat__status { min-height: 1.2em; font-size: 0.8rem; margin: 0; }
.ui-assistant-chat__cta { font-size: 0.85rem; color: var(--muted-foreground); margin: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ui-assistant-chat__ctamsg { align-self: stretch; padding: 0.35rem 0.7rem; }
.ui-assistant-chat__flow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--muted); }
.ui-assistant-chat__flow-line { margin: 0; font-size: 0.82rem; color: var(--muted-foreground); }
.ui-assistant-chat__cta .ui-button, .ui-assistant-chat__ctamsg .ui-button { flex-shrink: 0; }
/*
 * Reset confirmation — the SAME inline-strip vocabulary as the inquiry bar
 * above (border + muted background + the shared button classes), so an
 * unfinished request is protected without inventing a one-off modal.
 */
.ui-assistant-chat__confirm { display: grid; gap: 0.5rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--muted); }
.ui-assistant-chat__confirm[hidden] { display: none; }
.ui-assistant-chat__confirm-line { margin: 0; font-size: 0.88rem; font-weight: 600; }
.ui-assistant-chat__confirm-note { margin: 0; font-size: 0.82rem; color: var(--muted-foreground); }
.ui-assistant-chat__confirm-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- Mission footer contact polish: icon rows (generic, data-driven) ---- */
.ui-footer__contact { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.55; color: color-mix(in srgb, var(--foreground) 76%, transparent); }
.ui-footer__contact svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: 0.22rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.ui-footer__contact svg.ui-footer__icon--solid { fill: currentColor; stroke: none; }
.ui-footer__contact--social { align-items: center; gap: 0.55rem; }
.ui-footer__contact--social svg { margin-top: 0; }
.ui-footer__contact .ui-footer__text { color: inherit; font-size: 0.95rem; min-width: 0; }
.ui-footer__contact-link { color: inherit; text-decoration: none; font-size: 0.95rem; }
.ui-footer__contact-link:hover { color: var(--primary); }
.ui-footer__contact-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- voice -- */
/*
 * Web voice channel. Reuses the accepted assistant slot anatomy and tokens so
 * voice reads as part of Frontline rather than a bolted-on widget: the same
 * card, the same radii, the same type scale. State is communicated by text AND
 * a data attribute, never by colour alone.
 */
.ui-voice {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.ui-voice__note {
  margin: 0.5rem 0 0;
  color: var(--muted-foreground, var(--card-foreground));
  opacity: 0.85;
}

.ui-voice__panel {
  margin-top: 0.6rem;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  color: var(--card-foreground);
}

.ui-voice__state {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

/* A visible, non-colour-only cue that the microphone is live. */
.ui-voice[data-fl-voice-state="listening"] .ui-voice__state::before {
  content: "\25CF";
  margin-right: 0.4rem;
}

.ui-voice__transcript {
  margin: 0.5rem 0 0;
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ui-voice__actions {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .ui-voice__panel {
    padding: 0.7rem;
  }
  .ui-voice__actions button {
    min-height: 44px;
  }
}