/* The supplied photo/widget reference, with a visible alpine glass canvas.
   Blur is bounded to surfaces, never animated or stacked on every child. */
body.sba-redesign {
  background: #e5eef4;
  --sba-glass: linear-gradient(140deg, rgb(255 255 255 / 82%), rgb(249 252 255 / 66%));
  --sba-glass-edge: rgb(255 255 255 / 86%);
  --sba-glass-shadow: 0 8px 28px rgb(24 44 70 / 8%), inset 0 1px 0 rgb(255 255 255 / 96%);
}
body.sba-redesign::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -8px;
  background: linear-gradient(180deg, rgb(245 249 255 / 67%), rgb(242 248 252 / 49%) 52%, rgb(242 246 250 / 38%)), url('./sba-alpine-background.jpg') center 55% / cover no-repeat;
  filter: blur(4px);
  pointer-events: none;
}
body.sba-redesign #app { position: relative; z-index: 1; }
body.sba-redesign .sba-ref-welcome .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.sba-redesign .portal-shell .sba-ref-welcome h2 { color: #6180b1; }
body.sba-redesign .portal-shell .sba-ref-hero-heading h2 { color: white; }
body.sba-redesign .portal-shell .sba-ref-hero > .sba-ref-photo { clip-path: inset(0 round 20px); }
body.sba-redesign .portal-shell {
  --ink: #102452;
  --ink-soft: #354c70;
  --muted: #526987;
  --accent: #ed092c;
  --accent-strong: #cc0626;
  --sba-ink: var(--ink);
  --sba-muted: var(--muted);
  --sba-surface: rgb(255 255 255 / 76%);
  --card: rgb(255 255 255 / 76%);
  --line: rgb(180 198 219 / 35%);
  background: transparent;
}
body.sba-redesign .portal-shell > .portal-main { background: transparent; }
body.sba-redesign .portal-shell :is(.panel, .sba-vnext-section, .sba-chart-card, .sba-vnext-summary-grid > article, .invoice-stat-grid > article, .invoice-project-group, .invoice-activity-panel, .offer-detail-card, .manage-card, .sba-vnext-list-row, .sba-vnext-quick-card, .project-widget-card, .project-command-card, .project-widget-detail, .schedule-panel, .project-flow-section, .chat-container, .sba-security-settings) {
  background: var(--sba-glass);
  border: 1px solid var(--sba-glass-edge);
  box-shadow: var(--sba-glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
}
body.sba-redesign .portal-shell :is(.sba-ref-welcome, .sba-ref-project-card, .sba-ref-dock, .sba-ref-contact-card) {
  background: var(--sba-glass);
  border: 1px solid var(--sba-glass-edge);
  box-shadow: var(--sba-glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
}
body.sba-redesign .portal-shell :is(.glass-dropdown-menu, .mobile-nav-drawer, .flow-modal, .property-overlay, .file-preview-modal) {
  background: rgb(246 250 255 / 94%);
  border: 1px solid #fff;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
}
body.sba-redesign .portal-shell :is(.primary-button, .secondary-button) { min-height: 44px; padding: 10px 17px; border-radius: 10px; font-size: 14px; font-weight: 600; }
body.sba-redesign .portal-shell :is(h1, h2, h3) { color: var(--ink); }
body.sba-redesign .portal-shell .primary-button { background: var(--accent); color: white; }
body.sba-redesign .portal-shell .secondary-button { background: rgb(255 255 255 / 70%); }
body.sba-redesign .portal-shell :is(.message-focus-card, .sba-vnext-protection-hero, .property-dossier-card, .property-hub-widget, .property-create-panel, .tenant-property-card, .admin-project-card, .admin-cockpit-section, .review-panel, .damage-card, .defect-card, .delivery-card, .metric-card-ref, .partner-offer-row, .offer-mini, .project-flow-panel) {
  background: var(--sba-glass);
  border: 1px solid var(--sba-glass-edge);
  box-shadow: var(--sba-glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
}
body.sba-redesign .portal-shell .sba-vnext-protection-hero h2 { font-size: clamp(28px, 3.2vw, 42px); }
body.sba-redesign .portal-shell :is(.project-glass-header, .sba-project-story) {
  background: var(--sba-glass);
  border: 1px solid var(--sba-glass-edge);
  box-shadow: var(--sba-glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(125%) !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
}
body.sba-redesign .portal-shell .project-glass-header { padding: 22px 26px; }
body.sba-redesign .portal-shell .sba-project-story { overflow: hidden; border-radius: 22px; }
body.sba-redesign .portal-shell .sba-project-story-image { min-width: 0; }
body.sba-redesign .portal-shell :is(#project-flow, .project-widget-detail) { scroll-margin-top: 105px; }
body.sba-redesign .portal-shell .mobile-portal-brand strong { color: #102452; }
body.sba-redesign .portal-shell .document-row-preview { overflow: hidden; }
body.sba-redesign .portal-shell .document-row-preview img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
body.sba-redesign .admin-shell .admin-hero { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; min-height: 0; padding: 28px; background: var(--sba-glass); }
body.sba-redesign .admin-shell .admin-hero h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
body.sba-redesign .admin-shell .admin-hero h1 span { display: inline; margin-right: .2em; }
body.sba-redesign .admin-shell .admin-stat-grid { width: 100%; min-width: 0; grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
body.sba-redesign .admin-shell .admin-stat-grid .metric-card-ref { min-height: 120px; padding: 18px; }
@media (max-width: 1080px) {
  body.sba-redesign .admin-shell .admin-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body.sba-redesign .admin-shell .admin-hero { padding: 18px; }
}

/* Desktop customer chrome is a single horizontal row, not a sidebar. */
body.sba-redesign .portal-shell.customer-portal-shell {
  display: block;
  min-height: 100dvh;
  padding: 0;
}
body.sba-redesign .customer-portal-shell > .portal-main {
  grid-column: auto;
  width: min(100%, 1344px);
  max-width: 1344px;
  margin: 0 auto;
  padding: 32px 40px 30px;
}
.sba-redesign .sba-reference-chrome {
  display: flex;
  align-items: center;
  gap: 26px;
  position: sticky;
  z-index: 70;
  top: 0;
  min-height: 80px;
  padding: 10px max(28px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid rgb(255 255 255 / 80%);
  background: rgb(250 252 255 / 80%);
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
}
.sba-redesign .sba-reference-brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0; border: 0; background: none; color: #071d57; font-size: 16px; letter-spacing: -.045em; }
.sba-redesign .sba-reference-brand img { width: 32px; height: 36px; object-fit: contain; }
.sba-redesign .sba-reference-nav { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.sba-redesign .sba-reference-nav button { position: relative; padding: 8px 0; border: 0; background: none; color: #4a6185; font-size: 13px; font-weight: 500; }
.sba-redesign .sba-reference-nav button[aria-current] { color: #0a1b51; font-weight: 700; }
.sba-redesign .sba-reference-nav button[aria-current]::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--accent); border-radius: 5px; }
.sba-redesign .sba-reference-utilities { display: flex; gap: 2px; margin-left: auto; }
body.sba-redesign .customer-portal-shell .sba-reference-chrome > .portal-topbar { display: flex; position: static; flex: 0 1 auto; width: auto; min-height: 44px; margin: 0; padding: 0; gap: 12px; background: none; border: 0; box-shadow: none; }
body.sba-redesign .sba-reference-chrome .topbar-actions { gap: 5px; flex-wrap: nowrap; }
.sba-redesign .sba-reference-chrome :is(.greeting-chip, .vnext-add-button, .topbar-actions > [data-logout], .account-chip > div, .global-search kbd) { display: none; }
.sba-redesign .sba-reference-chrome .topbar-search-area { width: 44px; min-width: 44px; }
.sba-redesign .sba-reference-chrome .global-search { padding: 10px; width: 44px; min-width: 44px; gap: 8px; background: rgb(255 255 255 / 40%); border: 1px solid rgb(215 224 237 / 70%); border-radius: 14px; }
.sba-redesign .sba-reference-chrome .global-search input { width: 0; min-width: 0; padding: 0; border: 0; background: transparent; }
.sba-redesign .sba-reference-chrome .topbar-search-area:focus-within { width: 180px; }
.sba-redesign .sba-reference-chrome .global-search:focus-within { width: 180px; }
.sba-redesign .sba-reference-chrome .global-search:focus-within input { width: 132px; }
.sba-redesign .sba-reference-chrome .account-chip { padding: 0; border: 0; background: transparent; min-width: 44px; }
.sba-redesign .sba-reference-chrome .topbar-avatar { width: 36px; height: 36px; background: #dce6f7; color: #183775; }
.sba-redesign .sba-reference-chrome .top-icon, .sba-redesign .sba-reference-utilities .top-icon { width: 44px; height: 44px; border: 0; background: transparent; color: #274c8e; border-radius: 14px; }
.sba-redesign .sba-reference-chrome .sba-trust-status { font-size: 11px; padding: 4px; }
.sba-redesign .sba-reference-chrome .sba-trust-status > span:not(.sba-trust-dot) { display: none; }

/* Photographic start composition. */
.sba-redesign .sba-ref-home { display: grid; gap: 28px; }
.sba-redesign .sba-ref-home-top { display: grid; grid-template-columns: minmax(240px, .78fr) minmax(0, 1.72fr); gap: 24px; align-items: stretch; }
.sba-redesign .sba-ref-welcome { padding: 28px 24px; display: flex; align-items: flex-start; flex-direction: column; gap: 21px; border-radius: 20px; }
body.sba-redesign .sba-ref-welcome h1 { font-size: clamp(28px, 2.7vw, 38px) !important; line-height: 1.08 !important; margin: 0 0 6px; letter-spacing: -.045em; }
.sba-redesign .sba-ref-welcome h2 { font-size: clamp(19px, 1.75vw, 25px); line-height: 1.2; font-weight: 500; color: #6180b1; margin: 0 0 17px; letter-spacing: -.04em; }
.sba-redesign .sba-ref-welcome p { color: #536d92; font-size: 14px; line-height: 1.55; margin: 0; max-width: 32ch; }
.sba-redesign .sba-ref-property { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 5px 8px 8px; margin-top: auto; border: 1px solid rgb(207 218 235 / 60%); border-radius: 13px; background: rgb(255 255 255 / 48%); }
.sba-redesign .sba-ref-property label { flex: 1; min-width: 0; }
body.sba-redesign .sba-ref-property select { padding: 0 17px 0 0; font-size: 13px; min-height: 32px; height: 32px; border: 0; background-color: transparent; color: #173465; font-weight: 650; width: 100%; }
.sba-redesign .sba-ref-property small { display: block; font-size: 11px; line-height: 1.45; color: #5a7295; }
.sba-redesign .sba-ref-property .top-icon { width: 44px; min-width: 44px; border: 0; background: transparent; color: #5c79a7; }
.sba-redesign .sba-ref-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; border: 1px solid rgb(255 255 255 / 70%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%), 0 3px 10px rgb(40 68 116 / 7%); background: linear-gradient(135deg,#f3f7ff,#dae6fa); color: #2b65c4; }
.sba-redesign .sba-ref-icon.red { background: linear-gradient(145deg,#fff0f0,#ffdee5); color: #d9133a; }
.sba-redesign .sba-ref-icon.violet { background: linear-gradient(145deg,#f5f0ff,#e6ddff); color: #795acb; }
.sba-redesign .sba-ref-icon.green { background: linear-gradient(145deg,#eefbf5,#d5f1e5); color: #1a9773; }
.sba-redesign .sba-ref-icon.teal { background: linear-gradient(145deg,#edfbff,#d6edf3); color: #2286a7; }
.sba-redesign .sba-ref-icon.slate { background: linear-gradient(145deg,#f6f7fc,#dce2ee); color: #546789; }
.sba-redesign .sba-ref-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .88fr); grid-template-rows: 1fr auto; gap: 30px 20px; min-height: 355px; padding: 26px; border-radius: 20px; isolation: isolate; background: #34465c; box-shadow: 0 8px 28px rgb(30 49 74 / 16%), 0 0 0 1px rgb(255 255 255 / 90%); }
.sba-redesign .sba-ref-hero > .sba-ref-photo { position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: hidden; }
.sba-redesign .sba-ref-photo { display: block; width: 100%; height: 100%; }
.sba-redesign .sba-ref-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sba-redesign .sba-ref-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg,rgb(10 20 35 / 26%),transparent 40%,rgb(10 20 35 / 54%)); }
.sba-redesign .sba-ref-hero-heading { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sba-redesign .sba-ref-hero-heading p { color: white; font-size: 14px; margin: 0 0 6px; text-shadow: 0 1px 4px #263242; }
.sba-redesign .sba-ref-hero-heading h2 { color: white; font-size: clamp(27px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 12px; max-width: 20ch; text-shadow: 0 1px 12px rgb(15 25 42 / 20%); }
.sba-redesign .sba-ref-open { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 9px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 24px; background: rgb(255 255 255 / 88%); color: #19345d; padding: 8px 14px; font-size: 12px; font-weight: 600; }
.sba-redesign .sba-ref-open svg { width: 17px; }
.sba-redesign .sba-ref-status { display: inline-flex; align-items: center; align-self: flex-start; gap: 7px; font-size: 11px; line-height: 1.4; font-weight: 600; padding: 5px 10px; background: rgb(239 253 246 / 95%); color: #166449; border-radius: 20px; max-width: 100%; }
.sba-redesign .sba-ref-status i { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #24c881; }
.sba-redesign .sba-ref-status.blue { background: #eef5ff; color: #1d59a8; }
.sba-redesign .sba-ref-status.blue i { background: #3490f3; }
.sba-redesign .sba-ref-status.amber { background: #fff7e4; color: #8c5708; }
.sba-redesign .sba-ref-status.amber i { background: #f0ae33; }
.sba-redesign .sba-ref-hero-progress { align-self: end; padding-bottom: 5px; }
.sba-redesign .sba-ref-progress { display: flex; flex-direction: column; gap: 7px; color: #20365b; font-size: 12px; }
.sba-redesign .sba-ref-progress strong { font-weight: 750; font-variant-numeric: tabular-nums; }
.sba-redesign .sba-ref-progress-track { display: block; height: 7px; width: 100%; border-radius: 12px; background: rgb(116 145 186 / 20%); overflow: hidden; }
.sba-redesign .sba-ref-progress-track i { display: block; height: 100%; width: var(--progress); background: linear-gradient(90deg,#1caf77,#49d890); border-radius: inherit; }
.sba-redesign .sba-ref-hero-progress .sba-ref-progress { color: white; font-size: 14px; }
.sba-redesign .sba-ref-hero-progress .sba-ref-progress-track { height: 9px; background: rgb(255 255 255 / 50%); }
.sba-redesign .sba-ref-next { display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; gap: 9px; text-align: left; padding: 15px 13px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 14px; background: rgb(246 251 255 / 90%); color: #133365; box-shadow: 0 5px 22px rgb(17 34 62 / 15%); -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
.sba-redesign .sba-ref-next .sba-ref-icon { width: 34px; height: 38px; border-radius: 9px; margin-top: 8px; }
.sba-redesign .sba-ref-next > span:nth-child(2) { display: grid; gap: 5px; }
.sba-redesign .sba-ref-next small { font-size: 10px; font-weight: 650; }
.sba-redesign .sba-ref-next strong { font-size: 13px; line-height: 1.3; }
.sba-redesign .sba-ref-next span span { font-size: 10px; line-height: 1.4; color: #476185; }
.sba-redesign .sba-ref-next > svg { align-self: center; width: 16px; }
.sba-redesign .sba-ref-hero.is-empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: var(--sba-glass); }
.sba-redesign .sba-ref-hero.is-empty::before { display: none; }
.sba-redesign .sba-ref-photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 100%; padding: 24px; text-align: center; color: #516e97; background: linear-gradient(125deg,#cedceb,#eef4fa); font-size: 12px; }
.sba-redesign .sba-ref-photo-empty svg { width: 42px; height: 42px; opacity: .65; }
.sba-redesign .sba-ref-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.sba-redesign .sba-ref-section-head h2 { margin: 0; font-size: 24px; letter-spacing: -.03em; }
.sba-redesign .sba-ref-section-head button { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: transparent; color: #275da7; border: 0; font-size: 12px; }
.sba-redesign .sba-ref-section-head button svg { width: 16px; }
.sba-redesign .sba-ref-project-grid, .sba-redesign .sba-vnext-projects-page .sba-vnext-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.sba-redesign .sba-ref-project-card { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border-radius: 15px; color: var(--ink); min-width: 0; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.sba-redesign .sba-ref-card-media { position: relative; display: block; width: 100%; height: clamp(128px, 12vw, 180px); }
.sba-redesign .sba-ref-card-media > .sba-ref-status { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); }
.sba-redesign .sba-ref-card-body { display: grid; gap: 4px; width: 100%; padding: 14px 16px 0; }
.sba-redesign .sba-ref-card-property { color: #586f92; font-size: 11px; }
.sba-redesign .sba-ref-card-title { font-size: 17px; line-height: 1.2; margin-bottom: 6px; letter-spacing: -.025em; }
.sba-redesign .sba-ref-card-date { display: flex; align-items: center; gap: 7px; border-top: 1px solid rgb(183 201 224 / 25%); padding: 11px 0; margin-top: 9px; font-size: 11px; color: #536f99; }
.sba-redesign .sba-ref-card-date span { flex: 1; }
.sba-redesign .sba-ref-card-date svg { width: 15px; height: 18px; }
.sba-redesign .sba-ref-card-mobile-arrow { display: none; }
.sba-redesign .sba-ref-dock { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; padding: 14px 10px; border-radius: 20px; }
.sba-redesign .sba-ref-dock button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; padding: 2px 4px; border: 0; border-radius: 12px; background: transparent; color: #354f77; font-size: 11px; }
.sba-redesign .sba-ref-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 8px; color: #46617f; }
.sba-redesign .sba-ref-footer > div { display: grid; gap: 5px; }
.sba-redesign .sba-ref-footer strong { font-family: Georgia,serif; font-weight: 400; font-size: 19px; }
.sba-redesign .sba-ref-footer span { font-size: 11px; }
.sba-redesign .sba-ref-contact-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.sba-redesign .sba-ref-contact-card { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: 20px; gap: 12px; }
.sba-redesign .sba-ref-contact-card h2, .sba-redesign .sba-ref-contact-card p { margin: 0; }
.sba-redesign .sba-ref-contact-card p { font-size: 13px; color: var(--muted); }
.sba-redesign .sba-ref-contact-card > div { display: grid; gap: 10px; width: 100%; margin-top: auto; }
.sba-redesign .sba-ref-contact-avatar { width: 64px; height: 64px; border-radius: 20px; object-fit: cover; display: grid; place-items: center; background: #e3eefa; color: #284d85; font-size: 22px; }
.sba-redesign .sba-ref-finance-nav { display: flex; flex-wrap: wrap; gap: 9px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sba-redesign .sba-ref-project-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgb(26 48 82 / 16%); }
}
@media (max-width: 1280px) and (min-width: 1081px) {
  .sba-redesign .sba-reference-chrome { gap: 14px; padding-inline: 24px; }
  .sba-redesign .sba-reference-nav { gap: 17px; }
  .sba-redesign .sba-reference-brand { font-size: 14px; }
  .sba-redesign .sba-reference-utilities { gap: 0; }
}
@media (max-width: 1080px) {
  .sba-redesign .sba-reference-chrome { display: none; }
  body.sba-redesign .customer-portal-shell > .portal-main { padding: 22px 24px calc(108px + env(safe-area-inset-bottom,0px)); }
  body.sba-redesign .portal-shell > .mobile-portal-topbar, body.sba-redesign .customer-mobile-bottom-nav { background: rgb(249 252 255 / 79%); border-color: rgb(255 255 255 / 85%); -webkit-backdrop-filter: blur(16px) saturate(130%) !important; backdrop-filter: blur(16px) saturate(130%) !important; }
  .sba-redesign .sba-ref-home-top { grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); gap: 18px; }
  .sba-redesign .sba-ref-welcome { padding: 23px 19px; }
  .sba-redesign .sba-ref-hero { grid-template-columns: minmax(0,1fr); gap: 16px; min-height: 385px; padding: 20px; }
  .sba-redesign .sba-ref-hero-heading { display: block; }
  .sba-redesign .sba-ref-open { margin-top: 12px; min-height: 44px; }
  .sba-redesign .sba-ref-next { grid-column: 1; }
  .sba-redesign .sba-ref-hero-progress { max-width: 100%; }
  .sba-redesign .sba-ref-next-confirmation { display: block; }
  .sba-redesign .sba-ref-project-grid, .sba-redesign .sba-vnext-projects-page .sba-vnext-list { gap: 14px; }
  .sba-redesign .sba-ref-card-body { padding: 12px 12px 0; }
  .sba-redesign .sba-ref-card-title { font-size: 15px; }
  .sba-redesign .sba-ref-card-date { font-size: 10px; }
  .sba-redesign .sba-ref-contact-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  body.sba-redesign .portal-shell .project-header-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); min-width: 0; width: 100%; }
  body.sba-redesign .portal-shell .project-header-actions > button { min-width: 0; width: 100%; padding-inline: 8px; font-size: 12px; white-space: normal; }
  body.sba-redesign .customer-portal-shell > .portal-main { padding: 19px 16px calc(102px + env(safe-area-inset-bottom,0px)); }
  body.sba-redesign .portal-shell > .mobile-portal-topbar { padding-inline: 12px; gap: 6px; }
  body.sba-redesign .customer-portal-shell > .mobile-portal-topbar { grid-template-columns: minmax(0,1fr) auto; min-height: 66px; }
  body.sba-redesign .customer-portal-shell .mobile-menu-button { display: none; }
  body.sba-redesign .customer-portal-shell .mobile-portal-brand strong { display: block; font-size: 13px; }
  body.sba-redesign .customer-portal-shell .mobile-portal-brand img { width: 25px; height: 28px; }
  body.sba-redesign .customer-portal-shell .mobile-search-button { display: inline-flex; }
  .sba-redesign .sba-ref-home { gap: 23px; }
  .sba-redesign .sba-ref-home-top { grid-template-columns: minmax(0,1fr); gap: 17px; }
  body.sba-redesign .portal-shell .sba-ref-welcome { gap: 12px; padding: 0 2px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body.sba-redesign .sba-ref-welcome h1 { font-size: 30px !important; }
  .sba-redesign .sba-ref-welcome h2 { font-size: 19px; margin-bottom: 0; }
  .sba-redesign .sba-ref-welcome p { display: none; }
  .sba-redesign .sba-ref-welcome > .primary-button { display: none; }
  .sba-redesign .sba-ref-property { padding: 4px 6px; border-radius: 12px; background: rgb(255 255 255 / 55%); }
  .sba-redesign .sba-ref-property .sba-ref-icon { width: 34px; height: 34px; border-radius: 10px; }
  .sba-redesign .sba-ref-property small { display: none; }
  .sba-redesign .sba-ref-hero { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(174px,auto) 53px auto; min-height: 0; padding: 16px 16px 0; border-radius: 17px; gap: 10px; background: transparent; box-shadow: none; }
  .sba-redesign .sba-ref-hero > .sba-ref-photo { grid-area: 1 / 1 / 3 / -1; inset: -16px -16px 0; width: auto; max-width: none; height: auto; }
  .sba-redesign .sba-ref-hero::before { grid-area: 1 / 1 / 3 / -1; inset: -16px -16px 0; height: auto; background: linear-gradient(180deg,transparent 20%,rgb(13 25 41 / 64%)); }
  .sba-redesign .sba-ref-hero-heading { grid-row: 1; align-self: end; padding-top: 44px; overflow-wrap: anywhere; }
  .sba-redesign .sba-ref-hero-heading h2 { font-size: 28px; margin-bottom: 8px; }
  .sba-redesign .sba-ref-hero-heading p { font-size: 11px; }
  .sba-redesign .sba-ref-open { position: absolute; right: 12px; top: 12px; margin: 0; font-size: 11px; min-height: 44px; padding: 8px 12px; }
  .sba-redesign .sba-ref-hero-progress { padding: 0 0 13px; }
  .sba-redesign .sba-ref-hero-progress .sba-ref-progress { font-size: 12px; }
  .sba-redesign .sba-ref-next { width: calc(100% + 32px); max-width: none; margin: 2px -16px 0; padding: 10px 12px; border-radius: 13px; background: rgb(255 255 255 / 78%); box-shadow: var(--sba-glass-shadow); }
  body.sba-redesign .customer-portal-shell .mobile-portal-brand strong { color: #112b5a; }
  .sba-redesign .sba-ref-next .sba-ref-icon { margin-top: 0; }
  .sba-redesign .sba-ref-next strong { font-size: 12px; }
  .sba-redesign .sba-ref-next-confirmation { display: block; }
  .sba-redesign .sba-ref-hero.is-empty { padding: 24px; }
  body.sba-redesign .mobile-drawer-profile { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; }
  body.sba-redesign .mobile-drawer-profile .mobile-language-select { grid-column: 2; width: 90px; min-height: 44px; }
  body.sba-redesign .mobile-drawer-profile > div { min-width: 0; }
  body.sba-redesign .mobile-drawer-profile small { overflow-wrap: anywhere; }
  .sba-redesign .sba-ref-section-head { gap: 10px; margin-bottom: 8px; }
  .sba-redesign .sba-ref-section-head h2 { font-size: 20px; }
  .sba-redesign .sba-ref-section-head button { font-size: 10px; }
  .sba-redesign .sba-ref-section-head button svg { display: none; }
  .sba-redesign .sba-ref-project-grid, .sba-redesign .sba-vnext-projects-page .sba-vnext-list { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .sba-redesign .sba-ref-project-card { display: grid; grid-template-columns: 72px minmax(0,1fr) 18px; gap: 12px; padding: 10px; border-radius: 13px; align-items: center; }
  .sba-redesign .sba-ref-card-media { height: 72px; border-radius: 9px; overflow: hidden; }
  .sba-redesign .sba-ref-card-media > .sba-ref-status { display: none; }
  .sba-redesign .sba-ref-card-body { padding: 0; gap: 3px; }
  .sba-redesign .sba-ref-card-title { font-size: 14px; margin: 0; grid-row: 1; }
  .sba-redesign .sba-ref-card-property { font-size: 10px; }
  .sba-redesign .sba-ref-card-body .sba-ref-progress { font-size: 10px; gap: 4px; }
  .sba-redesign .sba-ref-card-body .sba-ref-progress-track { height: 5px; }
  .sba-redesign .sba-ref-card-date { display: none; }
  .sba-redesign .sba-ref-card-mobile-arrow { display: grid; justify-items: center; gap: 9px; color: #567dae; }
  .sba-redesign .sba-ref-card-mobile-arrow .sba-ref-status { width: 8px; height: 8px; padding: 0; gap: 0; font-size: 0; background: none; }
  .sba-redesign .sba-ref-card-mobile-arrow svg { width: 16px; }
  .sba-redesign .sba-ref-photo-empty { padding: 4px; gap: 3px; font-size: 8px; }
  .sba-redesign .sba-ref-photo-empty svg { width: 22px; height: 22px; }
  .sba-redesign .sba-ref-dock { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px 6px; padding: 16px 8px; }
  .sba-redesign .sba-ref-dock button { font-size: 10px; }
  .sba-redesign .sba-ref-footer { flex-direction: column; align-items: flex-start; padding-inline: 2px; gap: 10px; }
  .sba-redesign .sba-ref-footer strong { font-size: 17px; }
  .sba-redesign .sba-ref-contact-grid { grid-template-columns: minmax(0,1fr); }
}
@supports not (backdrop-filter: blur(1px)) {
  body.sba-redesign .portal-shell :is(.sba-ref-welcome,.sba-ref-project-card,.sba-ref-dock,.sba-ref-contact-card,.panel,.project-widget-card) { background: rgb(248 252 255 / 94%); }
}
@media (forced-colors: active) {
  body.sba-redesign::before { display: none; }
  .sba-redesign .sba-ref-status, .sba-redesign .sba-ref-project-card { border: 1px solid CanvasText; }
}