/* AquaLink — brand layer on top of MudBlazor.
   Palette (Settings → Branding can override): navy #0B1F33, water blue #168BFA, aqua teal #08B8B0, off-white #F7F9FC, ink #142536. */
:root {
  --al-navy: #0B1F33;
  --al-blue: #168BFA;
  --al-teal: #08B8B0;
  --al-hero-a: #0B1F33;
  --al-hero-b: #12324F;
  --al-hero-ink: #EAF3FA;
  --al-hero-muted: #A9C3D8;
  --al-radius: 10px;
  --al-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --al-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --al-mono: "Geist Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --al-shadow: 0 1px 2px rgba(11,31,51,.05), 0 2px 8px rgba(11,31,51,.04);
  --al-shadow-lg: 0 12px 40px rgba(11,31,51,.16);
}

html, body { background: var(--mud-palette-background, #F7F9FC); }
body, .mud-typography, .mud-input, .mud-button-root, .mud-chip, .mud-table, .mud-nav-link-text, .mud-tab, .mud-menu-item {
  font-family: var(--al-font) !important;
}
h1, h2, h3, h4, .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6, .al-h {
  font-family: var(--al-display) !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.mud-typography-h4 { font-weight: 600 !important; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }
.mud-typography-h5 { font-weight: 600 !important; }
.mud-typography-h6 { font-weight: 600 !important; }
a { color: var(--mud-palette-secondary); }
:focus-visible { outline: 2.5px solid var(--al-teal); outline-offset: 2px; border-radius: 6px; }
.mud-button-root { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }

/* utilities */
.al-muted { color: var(--mud-palette-text-secondary); }
.al-small { font-size: 13px; }
.al-mono { font-family: var(--al-mono); font-size: .86em; }
.al-num { font-variant-numeric: tabular-nums; }
.al-minw0 { min-width: 0; }
.al-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.al-row.al-nowrap { flex-wrap: nowrap; }
.al-between { justify-content: space-between; }
.al-stack { display: flex; flex-direction: column; gap: 12px; }
.al-push { margin-left: auto; }
.al-grid { display: grid; gap: 16px; }
.al-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.al-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .al-g3, .al-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .al-g2, .al-g3, .al-g4 { grid-template-columns: minmax(0, 1fr); } .al-hide-s { display: none !important; } }
@media (min-width: 960px) { .al-show-md { display: none !important; } }
.al-center-pad { display: grid; place-items: center; padding: 64px 16px; }
.al-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.al-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-secondary); margin-bottom: 4px; }
.al-divider { height: 1px; background: var(--mud-palette-lines-default); margin: 12px 0; }
.al-chip { font-weight: 600 !important; margin: 0 !important; }
.al-two { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .al-two { grid-template-columns: minmax(0, 1fr); } }
.al-sticky { position: sticky; top: 76px; }
.al-kv { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px 16px; font-size: 14px; margin: 0; }
.al-kv dt { color: var(--mud-palette-text-secondary); }
.al-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* layout shells */
.al-wrap { max-width: 1680px; margin: 0 auto; padding-left: max(clamp(12px, 2vw, 28px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(12px, 2vw, 28px), env(safe-area-inset-right, 0px)); }
.al-section { padding-block: 40px; }
.al-section.tight { padding-block: 24px; }
.al-band { background: var(--mud-palette-surface); border-block: 1px solid var(--mud-palette-lines-default); }
.al-sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.al-sechead p { max-width: 560px; }

.al-topnav { isolation: isolate; border-bottom: 1px solid var(--mud-palette-lines-default); position: sticky; top: 0; z-index: 20; }
.al-topnav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--mud-palette-surface) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
.al-topnav-in { display: flex; align-items: center; gap: 20px; padding-block: 10px; }
.al-navlinks { display: flex; gap: 2px; }
.al-navlinks .mud-button-root { color: var(--mud-palette-text-secondary); font-weight: 500 !important; }
@media (max-width: 900px) { .al-navlinks { display: none; } }
.al-logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--al-display); font-weight: 700; font-size: 19px; color: var(--mud-palette-text-primary); text-decoration: none; }
.al-logo-light { color: #fff; }
.al-logo-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(150deg, var(--al-blue), var(--al-navy)); display: grid; place-items: center; }
.al-usermenu { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; }
.al-usermenu:hover { background: var(--mud-palette-action-default-hover); }
.al-logout { margin: 0; }
.al-logout-btn { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 16px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--mud-palette-error); text-align: left; }
.al-logout-btn:hover { background: var(--mud-palette-action-default-hover); }

.al-appbar { border-bottom: 1px solid var(--mud-palette-lines-default) !important; }
.al-drawer { border-right: 1px solid var(--mud-palette-lines-default) !important; }
.al-drawer .mud-nav-link { border-radius: 8px; }
.al-drawer-foot { margin-top: auto; padding: 8px; border-top: 1px solid var(--mud-palette-lines-default); }
.al-navbadge { margin-left: 8px; background: var(--al-teal); color: #04241F; border-radius: 99px; font-size: 11px; font-weight: 700; padding: 0 7px; }
.al-portal-main { padding: 20px 24px 40px; max-width: 1360px; }
@media (max-width: 960px) { .al-portal-main { padding: 16px max(12px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); } }
.al-pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.al-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.al-back { display: inline-flex; align-items: center; margin-bottom: 4px; }

/* cards & surfaces */
.al-card { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius); padding: 16px; min-width: 0; }
.al-card.flush { padding: 0; overflow: hidden; }
.al-card.raise { box-shadow: var(--al-shadow); }
.al-card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.al-kpi { --tone: var(--al-blue); position: relative; padding: 14px 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; min-width: 0; }
.al-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone); opacity: .85; }
.al-kpi.teal { --tone: var(--al-teal); } .al-kpi.amber { --tone: #E08A00; } .al-kpi.red { --tone: var(--mud-palette-error); } .al-kpi.slate { --tone: #64748B; }
.al-kpi.link { cursor: pointer; } .al-kpi.link:hover { transform: translateY(-2px); box-shadow: var(--al-shadow); border-color: color-mix(in srgb, var(--tone) 40%, transparent); }
.al-kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.al-kpi-label { font-size: 13px; color: var(--mud-palette-text-secondary); font-weight: 500; }
.al-kpi-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); }
.al-kpi-value { font-family: var(--al-display); font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; }
.al-kpi-detail { font-size: 12px; color: var(--mud-palette-text-secondary); }
.al-note { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; padding: 12px 14px; font-size: 14px; background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); }
.al-note-warn { background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.al-note-ok { background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent); }
.al-note-err { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }
.al-sim { display: inline-flex; gap: 5px; align-items: center; border: 1px dashed var(--mud-palette-warning); color: var(--mud-palette-warning); border-radius: 6px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.al-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 20px; border: 1px dashed var(--mud-palette-lines-inputs); border-radius: var(--al-radius); background: var(--mud-palette-surface); }
.al-empty-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--mud-palette-background); display: grid; place-items: center; color: var(--mud-palette-text-secondary); }
.al-list-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.al-list-item:last-child { border-bottom: 0; }
.al-grow { flex: 1; min-width: 0; }
.al-pbar { height: 6px; border-radius: 99px; background: var(--mud-palette-lines-default); overflow: hidden; flex: 1; }
.al-pbar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--al-blue), var(--al-teal)); }

/* avatars, badges */
.al-avatar { display: inline-grid; place-items: center; color: #fff; font-family: var(--al-display); font-weight: 600; flex: none; }
.al-avatar-xs { width: 28px; height: 28px; border-radius: 7px; font-size: 11px; }
.al-avatar-sm { width: 40px; height: 40px; border-radius: 9px; font-size: 14px; }
.al-avatar-md { width: 64px; height: 64px; border-radius: 12px; font-size: 20px; }
.al-avatar-lg { width: 96px; height: 96px; border-radius: 18px; font-size: 30px; border: 4px solid var(--mud-palette-background); }
.al-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--mud-palette-success); font-weight: 600; font-size: 13px; }
.al-stars { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; }
.al-stars .mud-icon-root { color: #E4A11B; }
.al-src { font-size: 11.5px; color: var(--mud-palette-text-secondary); border-left: 2px solid var(--mud-palette-lines-inputs); padding-left: 7px; }

/* hero */
.al-hero { background: linear-gradient(160deg, var(--al-hero-a), var(--al-hero-b)); color: var(--al-hero-ink); }
.al-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-block: 64px 72px; }
.al-hero h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.12; color: #fff; margin: 14px 0 0; font-weight: 600; }
.al-hero .lead { color: var(--al-hero-muted); font-size: 18px; max-width: 520px; margin-top: 16px; }
.al-hero-search { margin-top: 28px; background: var(--mud-palette-surface); border-radius: 12px; padding: 8px 8px 8px 16px; display: flex; gap: 8px; box-shadow: var(--al-shadow-lg); flex-wrap: wrap; align-items: center; }
.al-hero-search .mud-input-control { flex: 1 1 180px; margin: 0; }
.al-hero-facts { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap; color: var(--al-hero-muted); font-size: 14px; }
.al-hero-facts b { display: block; color: #fff; font-family: var(--al-display); font-size: 22px; font-weight: 600; }
.al-hero-visual { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; max-width: 100%; box-shadow: var(--al-shadow-lg); }
.al-hero-float { position: absolute; left: 16px; right: 16px; bottom: 16px; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-radius: 12px; padding: 14px; box-shadow: var(--al-shadow-lg); }
@media (max-width: 900px) { .al-hero-in { grid-template-columns: 1fr; padding-block: 40px 48px; } .al-hero-visual { display: none; } }
.al-cta-band { background: linear-gradient(120deg, var(--al-hero-a), var(--al-hero-b)); color: #fff; border-radius: 14px; padding: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* scene placeholders */
.al-scene { position: relative; width: 100%; height: 100%; overflow: hidden; background: #24506F; }
.al-scene svg { display: block; width: 100%; height: 100%; }
.al-scene-tag { position: absolute; right: 8px; top: 8px; background: rgba(5,20,32,.55); color: #E4EEF6; font-size: 10.5px; padding: 2px 7px; border-radius: 5px; }

/* categories & how-it-works */
.al-cat { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius); background: var(--mud-palette-surface); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.al-cat:hover { border-color: var(--al-blue); transform: translateY(-1px); }
.al-icbox { width: 38px; height: 38px; border-radius: 9px; background: color-mix(in srgb, var(--al-teal) 14%, transparent); color: var(--al-teal); display: grid; place-items: center; flex: none; }
.al-icbox.blue { background: color-mix(in srgb, var(--al-blue) 14%, transparent); color: var(--al-blue); }
.al-step-n { font-family: var(--al-display); font-weight: 600; color: var(--al-teal); font-size: 14px; }
.al-vitem { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--mud-palette-lines-default); align-items: start; }
.al-vitem:last-child { border-bottom: 0; }
.al-vitem > .mud-icon-root { color: var(--mud-palette-success); }
.al-faq details { border-bottom: 1px solid var(--mud-palette-lines-default); padding: 12px 0; }
.al-faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.al-faq summary::-webkit-details-marker { display: none; }
.al-faq details p { margin-top: 10px; color: var(--mud-palette-text-secondary); max-width: 720px; }

/* discovery */
.al-discovery { display: grid; grid-template-columns: 260px minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 1200px) { .al-discovery { grid-template-columns: 240px minmax(0, 1fr); } .al-discovery .al-mapcol { display: none; } .al-discovery.showmap .al-mapcol { display: block; grid-column: 1 / -1; order: -1; } }
@media (max-width: 820px) { .al-discovery { grid-template-columns: minmax(0, 1fr); } .al-discovery .al-filters { display: none; } .al-discovery.showfilters .al-filters { display: flex; } }
.al-filters { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 76px; }
.al-fgroup h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); margin: 0 0 4px; font-family: var(--al-font) !important; }
.al-mapcol { position: sticky; top: 76px; }
.al-ccard { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius); background: var(--mud-palette-surface); transition: border-color .15s; }
.al-ccard:hover, .al-ccard.hl { border-color: var(--al-blue); }
.al-ccard-name { font-family: var(--al-display); font-size: 16.5px; font-weight: 600; color: var(--mud-palette-text-primary); text-decoration: none; }
.al-tag { display: inline-flex; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); }

/* map */
.al-map { border-radius: var(--al-radius); overflow: hidden; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background); }
.al-map svg { display: block; width: 100%; height: auto; }
.al-map .land { fill: var(--mud-palette-surface); stroke: var(--mud-palette-lines-inputs); stroke-width: 1.2; }
.al-map .lake { fill: color-mix(in srgb, var(--al-blue) 22%, var(--mud-palette-background)); }
.al-map .gridl { stroke: var(--mud-palette-lines-default); stroke-width: .6; }
.al-map .town { fill: var(--mud-palette-text-secondary); }
.al-map .tlabel { font-size: 9.5px; fill: var(--mud-palette-text-secondary); font-family: var(--al-font); }
.al-map .pin { cursor: pointer; }
.al-map .pin .dot { fill: var(--al-blue); stroke: var(--mud-palette-surface); stroke-width: 2; }
.al-map .pin.on .dot { fill: var(--al-teal); }
.al-map .pin .halo { fill: var(--al-blue); opacity: .12; }
.al-map .me { fill: var(--mud-palette-error); }

/* profile */
.al-cover { height: 220px; border-radius: 0 0 var(--al-radius) var(--al-radius); overflow: hidden; }
.al-prof-head { display: flex; gap: 20px; align-items: flex-end; margin-top: -44px; padding: 0 4px; flex-wrap: wrap; position: relative; }
.al-prof-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; padding-block: 24px 64px; }
@media (max-width: 960px) { .al-prof-grid { grid-template-columns: minmax(0, 1fr); } }
.al-portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.al-pf { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius); overflow: hidden; background: var(--mud-palette-surface); }
.al-pf .img { aspect-ratio: 4/3; }
.al-pf .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-pf .b { padding: 12px; }

/* wizard */
.al-wiz { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .al-wiz { grid-template-columns: minmax(0, 1fr); } .al-steps { flex-direction: row !important; overflow-x: auto; position: static !important; } .al-steps .lbl { display: none; } }
.al-steps { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 76px; }
.al-st { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--mud-palette-text-secondary); font: inherit; font-weight: 500; font-size: 14px; }
.al-st:disabled { cursor: default; }
.al-st .dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--mud-palette-lines-inputs); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; background: var(--mud-palette-surface); }
.al-st.cur { color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); }
.al-st.cur .dot { border-color: var(--al-blue); color: var(--al-blue); }
.al-st.done .dot { background: var(--mud-palette-success); border-color: var(--mud-palette-success); color: #fff; }
.al-wiz-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--mud-palette-lines-default); padding-top: 18px; margin-top: 20px; }
.al-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.al-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; cursor: pointer; background: var(--mud-palette-surface); text-align: left; font: inherit; color: inherit; }
.al-opt.on { border-color: var(--al-blue); background: color-mix(in srgb, var(--al-blue) 9%, transparent); }
.al-opt .mud-icon-root { margin-top: 1px; }
.al-opt small { display: block; color: var(--mud-palette-text-secondary); font-size: 12.5px; margin-top: 2px; }

/* compare */
.al-cmp { overflow-x: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius); background: var(--mud-palette-surface); }
.al-cmp table { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 14px; }
.al-cmp th, .al-cmp td { padding: 12px 14px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: top; text-align: left; }
.al-cmp tbody th { width: 190px; color: var(--mud-palette-text-secondary); font-weight: 600; font-size: 13px; background: var(--mud-palette-background); position: sticky; left: 0; z-index: 1; }
.al-cmp td.diff { background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent); }
.al-cmp td.sel, .al-cmp th.sel { box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--al-teal) 7%, transparent); }
.al-cmp ul, .al-cmp ol { margin: 0; padding-left: 18px; }

/* timeline */
.al-tl { display: flex; flex-direction: column; }
.al-tli { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 20px; }
.al-tli:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: var(--mud-palette-lines-default); }
.al-tli .node { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); font-weight: 700; font-size: 12px; }
.al-tli.ok .node { background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); color: var(--mud-palette-success); }
.al-tli.cur .node { background: color-mix(in srgb, var(--al-blue) 15%, transparent); color: var(--al-blue); }
.al-tli.warn .node { background: color-mix(in srgb, var(--mud-palette-warning) 15%, transparent); color: var(--mud-palette-warning); }
.al-tli.err .node { background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent); color: var(--mud-palette-error); }

/* messages */
.al-thread { display: flex; flex-direction: column; gap: 12px; max-height: 480px; overflow-y: auto; padding: 4px; }
.al-msg { max-width: 78%; padding: 10px 13px; border-radius: 12px; background: var(--mud-palette-background); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.al-msg.me { align-self: flex-end; background: color-mix(in srgb, var(--al-blue) 12%, transparent); }
.al-msg.sys { align-self: center; background: transparent; color: var(--mud-palette-text-secondary); font-size: 12.5px; text-align: center; max-width: 90%; }
.al-msg .meta { font-size: 11.5px; color: var(--mud-palette-text-secondary); margin-bottom: 3px; }
.al-msgs { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; }
@media (max-width: 800px) { .al-msgs { grid-template-columns: minmax(0, 1fr); } }

/* files */
.al-drop { border: 1.5px dashed var(--mud-palette-lines-inputs); border-radius: var(--al-radius); padding: 22px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; background: var(--mud-palette-surface); cursor: pointer; position: relative; }
.al-drop:hover { border-color: var(--al-blue); }
.al-filechip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--mud-palette-lines-default); border-radius: 7px; padding: 2px 4px 2px 9px; font-size: 13px; background: var(--mud-palette-background); }
.al-thumb { width: 96px; height: 72px; border-radius: 7px; overflow: hidden; display: inline-block; }
.al-receipt { border: 1px solid var(--mud-palette-lines-default); border-radius: var(--al-radius); padding: 16px; background: var(--mud-palette-background); }
.al-receipt .line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }

/* tables */
.al-table-wrap { overflow-x: auto; }
.mud-table-head .mud-table-cell { font-size: 12px !important; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary) !important; font-weight: 600 !important; }

/* footer */
.al-footer { background: var(--al-hero-a); color: var(--al-hero-muted); font-size: 14px; }
.al-footer .al-wrap { padding-block: 32px 20px; }
.al-footer h4 { color: #fff; font-size: 14px; margin: 0 0 10px; }
.al-footer a { display: block; color: var(--al-hero-muted); text-decoration: none; padding: 3px 0; }
.al-footer a:hover { color: #fff; }
.al-footer-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); margin-top: 28px; padding-top: 16px; font-size: 13px; }

/* static auth pages (no MudBlazor interactivity) */
.al-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: 100vh; }
.al-auth-side { background: linear-gradient(160deg, var(--al-hero-a), var(--al-hero-b)); color: var(--al-hero-ink); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.al-auth-side h2 { font-family: var(--al-display); font-size: clamp(24px, 3vw, 36px); line-height: 1.2; color: #fff; margin: 0 0 12px; font-weight: 600; }
.al-auth-side p { color: var(--al-hero-muted); max-width: 440px; }
.al-auth-main { display: grid; place-items: center; padding: 40px 16px; background: var(--mud-palette-background, #F7FAFC); }
@media (max-width: 860px) { .al-auth { grid-template-columns: 1fr; } .al-auth-side { padding: 24px 16px; } .al-auth-side h2, .al-auth-side p { display: none; } }
.al-auth-card { width: min(520px, 100%); background: var(--mud-palette-surface, #fff); border: 1px solid var(--mud-palette-lines-default, #DFE7EE); border-radius: 14px; padding: 32px; box-shadow: var(--al-shadow); color: var(--mud-palette-text-primary, #172B3A); }
.al-auth-card h1 { font-family: var(--al-display); font-size: 26px; margin: 0 0 6px; font-weight: 600; }
.al-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.al-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.al-field label { font-weight: 600; font-size: 13.5px; }
.al-hint { font-size: 12.5px; color: var(--mud-palette-text-secondary, #566B7C); }
.al-input { width: 100%; background: var(--mud-palette-surface, #fff); color: inherit; border: 1px solid var(--mud-palette-lines-inputs, #C7D4DF); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 15px; }
.al-input:focus { outline: none; border-color: var(--al-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-blue) 22%, transparent); }
.al-input.invalid { border-color: var(--mud-palette-error, #B42323); }
.al-ferr, .validation-message { color: var(--mud-palette-error, #B42323); font-size: 12.5px; font-weight: 500; }
.al-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.al-check input { margin-top: 3px; accent-color: var(--al-blue); }
.al-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 11px 18px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; }
.al-btn-primary { background: var(--al-navy); color: #fff; }
.al-btn-primary:hover { background: #0A2B47; }
.al-btn-ghost { background: transparent; color: var(--mud-palette-text-primary, #172B3A); border-color: var(--mud-palette-lines-inputs, #C7D4DF); }
.al-btn-block { width: 100%; }
.al-seg-links { display: flex; gap: 4px; background: var(--mud-palette-background, #F7FAFC); padding: 4px; border-radius: 10px; margin-top: 16px; }
.al-seg-links a { flex: 1; text-align: center; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--mud-palette-text-secondary, #566B7C); font-weight: 600; font-size: 14px; }
.al-seg-links a.on { background: var(--mud-palette-surface, #fff); color: var(--mud-palette-text-primary, #172B3A); box-shadow: var(--al-shadow); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ================= HOME (hm-*) ================= */
.al-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hm-muted { color: var(--mud-palette-text-secondary); }
.hm-p { margin: 8px 0 14px; max-width: 620px; line-height: 1.6; }
.hm-sec { padding-block: 44px; position: relative; }
.hm-band { background: linear-gradient(180deg, color-mix(in srgb, var(--al-blue) 5%, var(--mud-palette-background)), var(--mud-palette-background)); border-block: 1px solid var(--mud-palette-lines-default); }
.hm-sec h2, .hm-pro h2, .hm-cta h2 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; font-weight: 700; margin: 4px 0 0; letter-spacing: -.02em; }
.hm-sec h3 { font-family: var(--al-display); font-size: 17px; font-weight: 600; margin: 0; }
.hm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.hm-head-p { max-width: 440px; font-size: 14.5px; margin: 0; }
.hm-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--al-teal) 15%, transparent); color: var(--al-teal); }
.hm-ic.sm { width: 28px; height: 28px; border-radius: 8px; }
.hm-ic.blue { background: color-mix(in srgb, var(--al-blue) 14%, transparent); color: var(--al-blue); }
.hm-tag { position: absolute; left: 10px; top: 10px; background: rgba(6,25,43,.6); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.hm-ok { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #10B981, var(--al-teal)); box-shadow: 0 6px 18px rgba(20,184,166,.45); }
.hm-ok.sm { width: 22px; height: 22px; box-shadow: none; margin-top: 1px; }

/* glowing CTA button */
.hm-btn-glow { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 15px; color: #04241F; text-decoration: none; background: linear-gradient(135deg, #2DD4BF, var(--al-teal) 50%, #0EA5E9); background-size: 200% 200%; box-shadow: 0 10px 30px rgba(20,184,166,.45); overflow: hidden; transition: transform .2s, box-shadow .2s, background-position .5s; }
.hm-btn-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: hm-shine 3.2s ease-in-out infinite; }
.hm-btn-glow:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(20,184,166,.6); background-position: 100% 0; }
@keyframes hm-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---------- hero ---------- */
.hm-hero { position: relative; overflow: hidden; color: var(--al-hero-ink); background: #061A2B; isolation: isolate; }
.hm-hero-bg { position: absolute; inset: -4%; background-size: cover; background-position: 70% 40%; z-index: -3; animation: hm-kenburns 26s ease-in-out infinite alternate; }
.hm-hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(95deg, rgba(4,18,31,.96) 0%, rgba(6,26,43,.88) 38%, rgba(6,26,43,.45) 68%, rgba(6,26,43,.2) 100%), linear-gradient(0deg, rgba(4,18,31,.85) 0%, transparent 35%); }
.hm-orb { position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; opacity: .55; pointer-events: none; }
.hm-orb.a { width: 420px; height: 420px; left: -120px; top: -140px; background: var(--al-blue); animation: hm-drift 14s ease-in-out infinite alternate; }
.hm-orb.b { width: 360px; height: 360px; left: 30%; bottom: -200px; background: var(--al-teal); opacity: .35; animation: hm-drift 18s ease-in-out infinite alternate-reverse; }
@keyframes hm-kenburns { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
@keyframes hm-drift { to { transform: translate(60px, 40px) scale(1.15); } }
.hm-hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: center; padding-block: 56px 48px; min-height: min(78vh, 720px); }
.hm-in { opacity: 0; animation: hm-up .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--d, 0) * 110ms + 100ms); }
@keyframes hm-up { from { opacity: 0; transform: translateY(24px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.hm-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; padding: 5px 13px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); }
.hm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--al-teal); animation: hm-pulse 2s infinite; }
@keyframes hm-pulse { 0% { box-shadow: 0 0 0 0 rgba(20,184,166,.7); } 70% { box-shadow: 0 0 0 9px rgba(20,184,166,0); } 100% { box-shadow: 0 0 0 0 rgba(20,184,166,0); } }
.hm-hero h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1.06; color: #fff; margin: 16px 0 0; font-weight: 700; letter-spacing: -.03em; max-width: 820px; }
.hm-rotate { display: inline-block; height: 1.12em; overflow: hidden; vertical-align: bottom; }
.hm-rotate > span { display: flex; flex-direction: column; animation: hm-words 10s cubic-bezier(.7,0,.3,1) infinite; }
.hm-rotate > span > span { height: 1.12em; line-height: 1.12em; background: linear-gradient(90deg, #5EEAD4, #38BDF8, #5EEAD4); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hm-grad 4s linear infinite; white-space: nowrap; }
@keyframes hm-words { 0%, 20% { transform: translateY(0); } 25%, 45% { transform: translateY(-1.12em); } 50%, 70% { transform: translateY(-2.24em); } 75%, 95% { transform: translateY(-3.36em); } 100% { transform: translateY(-4.48em); } }
@keyframes hm-grad { to { background-position: 200% center; } }
.hm-lead { color: #C8DCEB; font-size: clamp(15px, 1.2vw, 18px); max-width: 640px; margin: 16px 0 0; line-height: 1.6; }
.hm-search { margin-top: 24px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent); color: var(--mud-palette-text-primary); border-radius: 16px; padding: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.2); max-width: 720px; }
.hm-search-field { flex: 1 1 200px; display: flex; align-items: center; gap: 8px; padding: 0 10px; min-width: 0; }
.hm-search-field + .hm-search-field { border-left: 1px solid var(--mud-palette-lines-default); }
.hm-search-field > .mud-icon-root { color: var(--al-blue); flex: none; }
.hm-search-field .mud-input-control { margin: 0; }
.hm-search-field .mud-input.mud-input-underline:before, .hm-search-field .mud-input.mud-input-underline:after { display: none; }
.hm-search .hm-search-btn { height: 48px; border-radius: 12px; padding-inline: 20px; flex: 0 0 auto; }
.hm-hero-actions { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--al-hero-muted); }
.hm-hero-actions > span { display: inline-flex; align-items: center; gap: 4px; }
.hm-hero-actions > span .mud-icon-root { color: #5EEAD4; }
.hm-hero-stats { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); max-width: 720px; }
.hm-hero-stats b { display: block; font-family: var(--al-display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; color: #fff; line-height: 1.1; }
.hm-hero-stats span { font-size: 12.5px; color: var(--al-hero-muted); }

/* floating glass cards */
.hm-float-stack { position: relative; height: 440px; }
.hm-glass { position: absolute; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-radius: 18px; padding: 16px; color: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.35); opacity: 0; animation: hm-pop .9s cubic-bezier(.2,.8,.2,1) forwards, hm-float 7s ease-in-out infinite; }
.hm-glass small { display: block; color: #CFE1EE; font-size: 12px; margin-top: 2px; }
.hm-glass b { font-size: 14.5px; }
.hm-glass.f1 { right: 4%; top: 0; width: min(360px, 100%); animation-delay: .5s, 1.4s; }
.hm-glass.f2 { left: 0; top: 52%; display: flex; gap: 12px; align-items: center; width: 300px; animation-delay: .8s, 2s; }
.hm-glass.f3 { right: 0; bottom: 0; display: flex; gap: 12px; align-items: center; width: 290px; animation-delay: 1.1s, 2.6s; }
@keyframes hm-pop { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes hm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.hm-chip-teal { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--al-teal); color: #04241F; }
.hm-bars { display: grid; gap: 8px; margin: 12px 0 8px; }
.hm-bars > div { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.hm-bars i { display: block; height: 7px; border-radius: 99px; background: rgba(255,255,255,.15); position: relative; overflow: hidden; }
.hm-bars i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #38BDF8, #5EEAD4); transform-origin: left; animation: hm-grow 1.4s 1.2s cubic-bezier(.2,.8,.2,1) both; }
.hm-bars > div:first-child i::after { background: linear-gradient(90deg, #10B981, #5EEAD4); }
.hm-bars em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
@keyframes hm-grow { from { transform: scaleX(0); } }
.hm-depth { width: 40px; height: 46px; display: flex; gap: 3px; align-items: flex-end; flex: none; }
.hm-depth span { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(180deg, #38BDF8, var(--al-blue)); animation: hm-grow-y 1.2s 1.6s cubic-bezier(.2,.8,.2,1) both; transform-origin: bottom; }
@keyframes hm-grow-y { from { transform: scaleY(0); } }

/* districts ticker */
.hm-ticker { border-top: 1px solid rgba(255,255,255,.12); background: rgba(4,18,31,.55); backdrop-filter: blur(6px); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-ticker-track { display: flex; gap: 34px; width: max-content; padding-block: 12px; animation: hm-marquee 45s linear infinite; }
.hm-ticker:hover .hm-ticker-track { animation-play-state: paused; }
.hm-ticker span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #BFD6E6; white-space: nowrap; }
.hm-ticker span .mud-icon-root { color: #5EEAD4; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }

/* ---------- why / versus ---------- */
.hm-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.hm-why-img { min-height: 460px; border-radius: 22px; background-size: cover; background-position: center; position: relative; overflow: hidden; box-shadow: var(--al-shadow-lg); }
.hm-why-stat { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 16px; border-radius: 16px; background: rgba(6,25,43,.7); backdrop-filter: blur(12px); color: #fff; }
.hm-why-stat b { display: block; font-family: var(--al-display); font-size: 17px; line-height: 1.35; }
.hm-why-stat span { display: block; margin-top: 6px; font-size: 13px; color: #C8DCEB; }
.hm-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hm-vs-col { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.hm-vs-col > b { font-family: var(--al-display); font-size: 15px; margin-bottom: 2px; }
.hm-vs-col > div { display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.hm-vs-col > div .mud-icon-root { margin-top: 2px; flex: none; }
.hm-vs-col.bad { background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface)); border: 1px solid color-mix(in srgb, var(--mud-palette-error) 18%, transparent); color: var(--mud-palette-text-secondary); }
.hm-vs-col.bad .mud-icon-root { color: var(--mud-palette-error); }
.hm-vs-col.good { background: linear-gradient(160deg, var(--al-navy), var(--al-hero-b)); color: #fff; box-shadow: 0 18px 40px rgba(12,53,87,.35); position: relative; overflow: hidden; }
.hm-vs-col.good::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(20,184,166,.45), transparent 70%); }
.hm-vs-col.good .mud-icon-root { color: #5EEAD4; }

/* ---------- bento ---------- */
.hm-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 14px; }
.hm-tile { position: relative; border-radius: 20px; padding: 20px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.hm-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--al-teal), transparent 40%, transparent 60%, var(--al-blue)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none; }
.hm-tile:hover { transform: translateY(-4px); box-shadow: var(--al-shadow-lg); }
.hm-tile:hover::before { opacity: 1; }
.hm-tile p { margin: 0; font-size: 13.5px; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.hm-tile.big { grid-column: span 2; grid-row: span 2; background-size: cover; background-position: center; color: #fff; justify-content: flex-end; min-height: 440px; border: 0; }
.hm-tile.big h3 { font-size: clamp(20px, 2vw, 26px); color: #fff; }
.hm-tile.big p { color: #D5E3EE; max-width: 520px; }
.hm-tile-k { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 99px; background: var(--al-teal); color: #04241F; }
.hm-mini-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; background: rgba(255,255,255,.1); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; overflow: hidden; margin-top: 4px; }
.hm-mini-table th { text-align: left; font-weight: 600; color: #BFD6E6; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.hm-mini-table td { padding: 8px 10px; border-top: 1px solid rgba(255,255,255,.12); }
.hm-mini-table tr.best td { background: rgba(20,184,166,.22); font-weight: 600; }
.hm-mini-table tr.best td:first-child { box-shadow: inset 3px 0 0 #5EEAD4; }
.hm-ex { font-size: 11px; color: #BFD6E6; }
.hm-prog { height: 8px; border-radius: 99px; background: var(--mud-palette-lines-default); overflow: hidden; margin-top: auto; }
.hm-prog span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--al-blue), var(--al-teal)); }

/* ---------- services ---------- */
.hm-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hm-svc { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); text-decoration: none; color: inherit; transition: transform .3s, box-shadow .3s, border-color .3s; }
.hm-svc:hover { transform: translateY(-5px); box-shadow: var(--al-shadow-lg); border-color: transparent; }
.hm-svc-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #24506F; }
.hm-svc-img > div, .hm-con-img > div, .hm-who-bg, .hm-mosaic figure > div { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.hm-svc:hover .hm-svc-img > div, .hm-con:hover .hm-con-img > div, .hm-who-card:hover .hm-who-bg, .hm-mosaic figure:hover > div { transform: scale(1.08); }
.hm-svc-time { position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.92); color: var(--al-navy); }
.hm-svc-b { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hm-svc-b p { margin: 0; font-size: 13px; color: var(--mud-palette-text-secondary); line-height: 1.5; flex: 1; }
.hm-svc-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--al-blue); border-top: 1px dashed var(--mud-palette-lines-default); padding-top: 10px; }
.hm-svc-meta .mud-icon-root { transition: transform .3s; }
.hm-svc:hover .hm-svc-meta .mud-icon-root { transform: translateX(4px); }

/* ---------- journey (dark) ---------- */
.hm-dark { background: radial-gradient(1200px 500px at 85% 0%, rgba(22,119,184,.35), transparent 60%), radial-gradient(800px 400px at 0% 100%, rgba(20,184,166,.18), transparent 60%), #061A2B; color: var(--al-hero-ink); }
.hm-dark h2 { color: #fff; }
.hm-journey { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 36px; align-items: start; }
.hm-journey-img { border-radius: 22px; background-size: cover; background-position: center; min-height: 560px; position: sticky; top: 84px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.hm-quote { position: absolute; left: 14px; right: 14px; bottom: 14px; background: rgba(6,25,43,.7); backdrop-filter: blur(12px); color: #fff; border-radius: 16px; padding: 16px; border: 1px solid rgba(255,255,255,.14); }
.hm-quote p { margin: 0; font-family: var(--al-display); font-size: 17px; line-height: 1.4; }
.hm-quote span { display: block; margin-top: 6px; font-size: 12px; color: #5EEAD4; font-weight: 600; }
.hm-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hm-timeline li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; position: relative; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: background .3s, border-color .3s, transform .3s; }
.hm-timeline li:hover { background: rgba(255,255,255,.08); border-color: rgba(94,234,212,.4); transform: translateX(4px); }
.hm-timeline b { color: #fff; }
.hm-timeline p { margin: 3px 0 0; font-size: 13.5px; color: #A9C3D8; line-height: 1.5; }
.hm-num { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-family: var(--al-display); font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--al-blue), var(--al-teal)); box-shadow: 0 8px 20px rgba(20,184,166,.35); }
.hm-time { font-size: 11.5px; font-weight: 700; color: #5EEAD4; background: rgba(20,184,166,.14); padding: 2px 9px; border-radius: 99px; white-space: nowrap; }

/* ---------- how ---------- */
.hm-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.hm-how::before { content: ""; position: absolute; left: 6%; right: 6%; top: 39px; height: 2px; background: repeating-linear-gradient(90deg, var(--al-teal) 0 8px, transparent 8px 16px); opacity: .45; z-index: 0; }
.hm-how-item { position: relative; z-index: 1; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.hm-how-item:hover { transform: translateY(-4px); box-shadow: var(--al-shadow-lg); }
.hm-how-item p { margin: 0; font-size: 13.5px; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.hm-how-n { position: absolute; right: 14px; top: 6px; font-family: var(--al-display); font-size: 54px; font-weight: 800; line-height: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--al-blue) 22%, transparent), transparent); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- who ---------- */
.hm-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hm-who-card { position: relative; min-height: 340px; border-radius: 20px; overflow: hidden; display: flex; align-items: flex-end; color: #fff; text-decoration: none; isolation: isolate; transition: transform .3s, box-shadow .3s; }
.hm-who-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,25,43,0) 30%, rgba(6,25,43,.92) 100%); }
.hm-who-bg { z-index: -2; }
.hm-who-card:hover { transform: translateY(-5px); box-shadow: var(--al-shadow-lg); }
.hm-who-b { padding: 16px; }
.hm-who-b b { font-family: var(--al-display); font-size: 20px; }
.hm-who-b p { margin: 4px 0 10px; font-size: 13.5px; color: #D5E3EE; line-height: 1.45; }
.hm-who-b span { display: inline-block; font-size: 11.5px; font-weight: 700; background: rgba(20,184,166,.92); color: #04241F; padding: 3px 10px; border-radius: 99px; }

/* ---------- contractors ---------- */
.hm-contractors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hm-con { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); text-decoration: none; color: inherit; transition: transform .3s, box-shadow .3s; }
.hm-con:hover { transform: translateY(-5px); box-shadow: var(--al-shadow-lg); }
.hm-con-img { position: relative; height: 140px; overflow: hidden; }
.hm-con-badge { position: absolute; right: 10px; top: 10px; display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 700; background: #fff; color: #0F766E; padding: 3px 9px; border-radius: 99px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.hm-con-b { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.hm-con-av { margin-top: -22px; position: relative; }
.hm-con-av > * { box-shadow: 0 0 0 3px var(--mud-palette-surface); }
.hm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.hm-tags span { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }

/* ---------- trust ---------- */
.hm-trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.hm-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.hm-checks > div { display: flex; gap: 10px; align-items: flex-start; }
.hm-checks b { font-size: 14px; }
.hm-checks p { margin: 3px 0 0; font-size: 13px; color: var(--mud-palette-text-secondary); line-height: 1.45; }
.hm-trust-visual { position: relative; padding-bottom: 48px; }
.hm-trust-photo { border-radius: 22px; aspect-ratio: 4/3; background-size: cover; background-position: center; width: 82%; box-shadow: var(--al-shadow-lg); }
.hm-record { position: absolute; right: 0; bottom: 0; width: min(360px, 78%); background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--mud-palette-lines-default); border-radius: 18px; padding: 14px 16px; box-shadow: var(--al-shadow-lg); display: flex; flex-direction: column; gap: 4px; animation: hm-float 7s ease-in-out infinite; }
.hm-record-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--mud-palette-lines-default); font-size: 13px; }
.hm-record-row b { display: block; font-size: 13px; }
.hm-record-row span { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.hm-record-row em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--mud-palette-text-secondary); white-space: nowrap; }

/* ---------- cost ---------- */
.hm-cost { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 36px; align-items: start; }
.hm-cost-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hm-cost-item { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); transition: border-color .3s, transform .3s; }
.hm-cost-item:hover { border-color: var(--al-teal); transform: translateY(-2px); }
.hm-cost-item b { font-size: 14px; }
.hm-cost-item p { margin: 3px 0 0; font-size: 13px; color: var(--mud-palette-text-secondary); line-height: 1.45; }
.hm-cost-card { border-radius: 22px; overflow: hidden; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); box-shadow: var(--al-shadow-lg); }
.hm-cost-img { position: relative; height: 150px; background-size: cover; background-position: center; }
.hm-cost-b { padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.hm-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed var(--mud-palette-lines-default); }
.hm-line .al-num { font-weight: 600; }
.hm-line.total { border-bottom: 0; font-weight: 700; font-size: 14.5px; color: var(--al-blue); }

/* ---------- gallery ---------- */
.hm-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 230px 230px; gap: 12px; }
.hm-mosaic figure { margin: 0; border-radius: 18px; position: relative; overflow: hidden; background: #24506F; }
.hm-mosaic figure.big { grid-row: span 2; }
.hm-mosaic figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; color: #fff; font-size: 13.5px; font-weight: 600; background: linear-gradient(transparent, rgba(6,25,43,.85)); }

/* ---------- testimonials ---------- */
.hm-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hm-q { margin: 0; padding: 20px; border-radius: 18px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.hm-q:hover { transform: translateY(-4px); box-shadow: var(--al-shadow-lg); }
.hm-q::before { content: "“"; position: absolute; right: 16px; top: -10px; font-family: Georgia, serif; font-size: 96px; color: color-mix(in srgb, var(--al-teal) 22%, transparent); line-height: 1; }
.hm-q blockquote { margin: 0; font-size: 14.5px; line-height: 1.6; flex: 1; }
.hm-q figcaption { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.hm-q figcaption b { display: block; } .hm-q figcaption span { color: var(--mud-palette-text-secondary); font-size: 12px; }
.hm-q-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--al-navy), var(--al-teal)); flex: none; }

/* ---------- contractors band ---------- */
.hm-pro { position: relative; overflow: hidden; color: var(--al-hero-ink); background: #061A2B; isolation: isolate; }
.hm-pro-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.hm-pro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,18,31,.96) 0%, rgba(6,26,43,.85) 50%, rgba(6,26,43,.6) 100%); }
.hm-pro-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; padding-block: 52px; }
.hm-pro h2 { color: #fff; }
.hm-pro-in > div > p { color: var(--al-hero-muted); margin: 10px 0 0; font-size: 16px; }
.hm-pro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hm-pro-card { padding: 16px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: 8px; transition: background .3s, transform .3s; }
.hm-pro-card:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
.hm-pro-card b { color: #fff; }
.hm-pro-card p { margin: 0; font-size: 13px; color: #A9C3D8; line-height: 1.5; }
.hm-pro-card .hm-ic { background: rgba(20,184,166,.2); color: #5EEAD4; }

/* ---------- faq & cta ---------- */
.hm-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: start; }
.hm-faq-list { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 18px; padding: 4px 18px; }
.hm-faq-list details:last-child { border-bottom: 0; }
.hm-faq-list summary .mud-icon-root { transition: transform .3s; flex: none; }
.hm-faq-list details[open] summary .mud-icon-root { transform: rotate(45deg); color: var(--al-teal); }
.hm-cta { position: relative; border-radius: 24px; overflow: hidden; color: #fff; isolation: isolate; }
.hm-cta-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center 35%; animation: hm-kenburns 30s ease-in-out infinite alternate; }
.hm-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(6,25,43,.95), rgba(12,80,120,.72)); }
.hm-cta-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 36px clamp(20px, 3vw, 44px); }
.hm-cta h2 { color: #fff; }
.hm-cta p { margin: 6px 0 0; color: #C8DCEB; }

/* ---------- scroll reveal (progressive enhancement) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: hm-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes hm-reveal { from { opacity: 0; transform: translateY(36px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .hm-contractors, .hm-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-how::before { display: none; }
  .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hm-hero-in, .hm-why, .hm-journey, .hm-trust, .hm-cost, .hm-faq, .hm-pro-in { grid-template-columns: 1fr; }
  .hm-hero-in { min-height: 0; padding-block: 36px 32px; }
  .hm-float-stack { display: none; }
  .hm-journey-img { position: relative; top: 0; min-height: 300px; }
  .hm-why-img { min-height: 320px; }
  .hm-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 150px 150px; }
  .hm-mosaic figure.big { grid-column: span 2; grid-row: auto; }
  .hm-mosaic figure:nth-child(5) { display: none; }
  .hm-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hm-sec { padding-block: 32px; }
  .hm-contractors, .hm-how, .hm-checks, .hm-cost-grid, .hm-vs, .hm-bento, .hm-pro-grid { grid-template-columns: 1fr; }
  .hm-tile.big { grid-column: auto; min-height: 0; padding-top: 140px; }
  .hm-mini-table th:nth-child(3), .hm-mini-table td:nth-child(3), .hm-mini-table th:nth-child(4), .hm-mini-table td:nth-child(4) { display: none; }
  .hm-who { grid-template-columns: 1fr 1fr; } .hm-who-card { min-height: 240px; } .hm-who-b p { display: none; }
  .hm-search-field + .hm-search-field { border-left: 0; border-top: 1px solid var(--mud-palette-lines-default); }
  .hm-search .hm-search-btn { width: 100%; }
  .hm-trust-photo { width: 100%; } .hm-record { position: relative; width: 100%; margin-top: -30px; animation: none; }
  .hm-trust-visual { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-bg, .hm-cta-bg, .hm-orb, .hm-dot, .hm-glass, .hm-record, .hm-ticker-track, .hm-btn-glow::after, .hm-rotate > span, .hm-rotate > span > span { animation: none !important; }
  .hm-in, .hm-glass { opacity: 1; animation: none; }
}

/* ================= CLIENT PORTAL (cp-*, pj-*, rq-*) ================= */
.cp-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 24px 26px; border-radius: 20px; color: #fff; margin-bottom: 16px;
  background: linear-gradient(100deg, rgba(6,25,43,.95) 0%, rgba(10,52,86,.88) 55%, rgba(10,52,86,.55) 100%), url('https://images.unsplash.com/photo-1604981338911-b7e37bcd3899?auto=format&fit=crop&w=1600&q=70') center 40% / cover, var(--al-navy); }
.cp-hero::after { content: ""; position: absolute; width: 340px; height: 340px; right: -80px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(20,184,166,.45), transparent 70%); pointer-events: none; }
.cp-hero-copy { max-width: 640px; position: relative; z-index: 1; }
.cp-hero-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5EEAD4; }
.cp-hero h1 { font-size: clamp(24px, 2.6vw, 32px); margin: 6px 0 0; color: #fff; font-weight: 700; }
.cp-hero p { margin: 6px 0 0; color: #C8DCEB; font-size: 15px; }
.cp-hero-stats { display: flex; gap: 10px; position: relative; z-index: 1; flex-wrap: wrap; }
.cp-hero-stats > div { min-width: 120px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.cp-hero-stats b { display: block; font-family: var(--al-display); font-size: 26px; line-height: 1.1; }
.cp-hero-stats span { font-size: 12px; color: #C8DCEB; }
.cp-kpis { margin-bottom: 16px; }
.cp-count { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; background: color-mix(in srgb, #E08A00 16%, transparent); color: #B26A00; }
.cp-attn { border-color: color-mix(in srgb, #E08A00 30%, var(--mud-palette-lines-default)); }
.cp-action { --tone: var(--al-blue); display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; text-decoration: none; color: inherit; border: 1px solid var(--mud-palette-lines-default); margin-top: 8px; transition: border-color .2s, background .2s, transform .2s; }
.cp-action:hover { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 5%, transparent); transform: translateX(2px); }
.cp-action.amber { --tone: #E08A00; } .cp-action.teal { --tone: var(--al-teal); } .cp-action.slate { --tone: #64748B; }
.cp-action-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); }
.cp-action b { display: block; font-size: 14px; }
.cp-action .al-grow > span { display: block; font-size: 12.5px; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-action-btn { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--tone); white-space: nowrap; }
.cp-empty { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; border: 1px dashed var(--mud-palette-lines-inputs); flex-wrap: wrap; }
.cp-empty > .mud-icon-root { color: var(--mud-palette-text-secondary); }
.cp-empty b { display: block; font-size: 14px; } .cp-empty span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.cp-empty > div { flex: 1; min-width: 200px; }
.cp-projects { display: flex; flex-direction: column; gap: 10px; }
.cp-req { display: flex; gap: 12px; align-items: flex-start; padding: 12px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); text-decoration: none; color: inherit; border-radius: 10px; transition: background .2s; }
.cp-req:last-child { border-bottom: 0; }
.cp-req:hover { background: color-mix(in srgb, var(--al-blue) 5%, transparent); }
.cp-req-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--al-blue); background: color-mix(in srgb, var(--al-blue) 12%, transparent); }
.cp-req-ic.draft { color: #64748B; background: color-mix(in srgb, #64748B 12%, transparent); }
.cp-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.cp-req-meta, .pj-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 3px; }
.pj-meta > span { display: inline-flex; align-items: center; gap: 3px; }
.cp-quotes { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.cp-quotes .al-pbar { max-width: 160px; }
.cp-money-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cp-money-total span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.cp-money-total b { font-family: var(--al-display); font-size: 22px; font-variant-numeric: tabular-nums; }
.cp-stack-bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--mud-palette-lines-default); margin: 10px 0 12px; }
.cp-stack-bar i { display: block; height: 100%; }
.cp-stack-bar .paid, .cp-legend .paid { background: var(--al-teal); }
.cp-stack-bar .due, .cp-legend .due { background: #E08A00; }
.cp-legend .held { background: var(--al-blue); } .cp-legend .rest { background: var(--mud-palette-lines-inputs); }
.cp-legend { display: grid; gap: 7px; }
.cp-legend > div { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.cp-legend i { width: 10px; height: 10px; border-radius: 3px; }
.cp-legend span { color: var(--mud-palette-text-secondary); }
.cp-legend b { font-variant-numeric: tabular-nums; font-weight: 600; }
.cp-tl { list-style: none; margin: 0; padding: 0; }
.cp-tl li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding-bottom: 14px; }
.cp-tl li:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--mud-palette-lines-default); }
.cp-tl-dot { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--al-blue), var(--al-teal)); }
.cp-tl a { text-decoration: none; color: inherit; display: flex; flex-direction: column; min-width: 0; }
.cp-tl a b { font-size: 14px; } .cp-tl a > span { font-size: 12px; color: var(--mud-palette-text-secondary); }
.cp-act { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid var(--mud-palette-lines-default); }
.cp-act:last-child { border-bottom: 0; }
.cp-act-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--mud-palette-lines-inputs); }
.cp-act.unread .cp-act-dot { background: var(--al-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-teal) 20%, transparent); }
.cp-act.unread span { font-weight: 600; }
.cp-act span { display: block; font-size: 13.5px; } .cp-act small { font-size: 12px; color: var(--mud-palette-text-secondary); }
.cp-done { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--al-teal); flex: none; }
.cp-help { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--al-blue) 7%, var(--mud-palette-surface)); border: 1px solid color-mix(in srgb, var(--al-blue) 20%, transparent); }
.cp-help > .mud-icon-root { color: var(--al-blue); flex: none; }
.cp-help b { display: block; font-size: 14px; } .cp-help span { font-size: 13px; color: var(--mud-palette-text-secondary); }

/* project cards */
.pj-card { border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--mud-palette-surface); transition: box-shadow .2s, border-color .2s, transform .2s; min-width: 0; }
.pj-card:hover { box-shadow: var(--al-shadow); transform: translateY(-2px); }
.pj-card.attn { border-color: color-mix(in srgb, #E08A00 40%, var(--mud-palette-lines-default)); box-shadow: inset 3px 0 0 #E08A00; }
.pj-card.disputed { box-shadow: inset 3px 0 0 var(--mud-palette-error); }
.pj-top { display: flex; gap: 12px; align-items: center; }
.pj-ring { --p: 0; width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--al-teal) calc(var(--p) * 1%), var(--mud-palette-lines-default) 0); }
.pj-ring span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--mud-palette-surface); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pj-title { font-family: var(--al-display); font-weight: 600; font-size: 15.5px; color: var(--mud-palette-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-title:hover { color: var(--al-blue); }
.pj-ms { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--mud-palette-background); }
.pj-ms-n { font-size: 12px; font-weight: 700; color: var(--al-blue); background: color-mix(in srgb, var(--al-blue) 12%, transparent); padding: 3px 8px; border-radius: 8px; flex: none; }
.pj-ms b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-ms .al-grow > span { font-size: 12px; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.pj-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pj-next { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.pj-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pj-search { max-width: 320px; flex: 1 1 220px; }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .pj-grid { grid-template-columns: 1fr; } }

/* request cards */
.rq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .rq-grid { grid-template-columns: 1fr; } }
.rq-card { border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; padding: 16px; background: var(--mud-palette-surface); display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: box-shadow .2s, transform .2s, border-color .2s; }
.rq-card:hover { box-shadow: var(--al-shadow-lg); transform: translateY(-3px); }
.rq-card.hot { border-color: color-mix(in srgb, var(--al-teal) 45%, var(--mud-palette-lines-default)); background: linear-gradient(180deg, color-mix(in srgb, var(--al-teal) 6%, var(--mud-palette-surface)), var(--mud-palette-surface) 60%); }
.rq-card.draft { border-style: dashed; }
.rq-card h3 { margin: 0; font-family: var(--al-display); font-size: 17px; font-weight: 600; }
.rq-ref { font-size: 12px; color: var(--mud-palette-text-secondary); }
.rq-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.rq-steps > div { display: flex; flex-direction: column; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--mud-palette-text-secondary); }
.rq-steps i { height: 5px; border-radius: 99px; background: var(--mud-palette-lines-default); }
.rq-steps .done i { background: var(--al-teal); } .rq-steps .done { color: var(--mud-palette-text-primary); }
.rq-steps .cur i { background: linear-gradient(90deg, var(--al-blue) 50%, var(--mud-palette-lines-default) 50%); } .rq-steps .cur { color: var(--al-blue); }
.rq-quotes { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.rq-quotes b { color: var(--mud-palette-text-primary); }
.rq-avatars { display: flex; }
.rq-avatars span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-left: -6px; border: 2px solid var(--mud-palette-surface); background: var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.rq-avatars span:first-child { margin-left: 0; }
.rq-avatars span.in { background: var(--al-teal); color: #fff; }
.rq-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--mud-palette-lines-default); }

/* ================= ADMIN CONFIGURATION (ad-*) ================= */
.ad-market-banner { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; color: #fff; margin-bottom: 14px; background: linear-gradient(110deg, var(--al-navy), var(--al-hero-b) 60%, #0E7C86); }
.ad-flag { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; letter-spacing: .04em; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.ad-tabs .mud-tabs-tabbar { background: transparent !important; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .ad-grid { grid-template-columns: 1fr; } }
.ad-test { display: flex; align-items: center; gap: 10px; }
.ad-test .mud-input-control { flex: 1; }
.ad-savebar { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--mud-palette-lines-default); box-shadow: var(--al-shadow); }
.ad-areas { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .ad-areas { grid-template-columns: 1fr; } }
.ad-areas-h { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid var(--mud-palette-lines-default); flex-wrap: wrap; }
.ad-areas .mud-table-row { cursor: pointer; }
.ad-row-on { background: color-mix(in srgb, var(--al-blue) 9%, transparent) !important; }
.ad-edit { border-color: color-mix(in srgb, var(--al-blue) 40%, var(--mud-palette-lines-default)); box-shadow: var(--al-shadow); }
.ad-regions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ad-region { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background); cursor: pointer; font: inherit; font-size: 13px; color: inherit; }
.ad-region:hover { border-color: var(--al-blue); }
.ad-region b { font-size: 12px; color: var(--al-blue); }
.ad-switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ad-switch:last-child { border-bottom: 0; }
.ad-switch b { display: block; font-size: 14px; } .ad-switch span { font-size: 12.5px; color: var(--mud-palette-text-secondary); }

/* ================= CLIENT PORTAL — added pages ================= */
.al-nav-cta { margin: 4px 8px 10px !important; border-radius: 10px !important; width: calc(100% - 16px) !important; }
.cp-start { margin-bottom: 16px; }
.cp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .cp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cp-steps { grid-template-columns: 1fr; } }
.cp-step { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--mud-palette-lines-default); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.cp-step:hover { transform: translateY(-2px); box-shadow: var(--al-shadow); }
.cp-step b { font-size: 14px; } .cp-step > span:last-child { font-size: 12px; color: var(--mud-palette-text-secondary); }
.cp-step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); margin-bottom: 4px; }
.cp-step.done { background: color-mix(in srgb, var(--al-teal) 6%, var(--mud-palette-surface)); }
.cp-step.done .cp-step-n { background: var(--al-teal); color: #fff; border-color: transparent; }
.cp-step.next { border-color: var(--al-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-blue) 14%, transparent); }
.cp-step.next .cp-step-n { background: var(--al-blue); color: #fff; border-color: transparent; }

/* documents */
.dc-kinds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 1100px) { .dc-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dc-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-kind { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); cursor: pointer; font: inherit; color: inherit; text-align: left; transition: border-color .2s, box-shadow .2s; }
.dc-kind:hover:not(:disabled) { border-color: var(--al-blue); }
.dc-kind:disabled { opacity: .5; cursor: default; }
.dc-kind.on { border-color: var(--al-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-blue) 14%, transparent); }
.dc-kind-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--al-blue); background: color-mix(in srgb, var(--al-blue) 12%, transparent); }
.dc-kind b { display: block; font-family: var(--al-display); font-size: 18px; line-height: 1.1; }
.dc-kind span span, .dc-kind > span:last-child { font-size: 12px; color: var(--mud-palette-text-secondary); }
.dc-month { padding: 10px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); background: var(--mud-palette-background); border-bottom: 1px solid var(--mud-palette-lines-default); }
.dc-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.dc-row:hover { background: color-mix(in srgb, var(--al-blue) 4%, transparent); }
.dc-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--al-blue); background: color-mix(in srgb, var(--al-blue) 12%, transparent); }
.dc-ic.contract { color: #7A5AA6; background: color-mix(in srgb, #7A5AA6 13%, transparent); }
.dc-ic.receipt { color: #0F9F6E; background: color-mix(in srgb, #0F9F6E 13%, transparent); }
.dc-ic.invoice { color: #B26A00; background: color-mix(in srgb, #E08A00 14%, transparent); }
.dc-ic.file { color: #64748B; background: color-mix(in srgb, #64748B 13%, transparent); }
.dc-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 6px; background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-lines-default); flex: none; }

/* my contractors */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
@media (max-width: 480px) { .mc-grid { grid-template-columns: 1fr; } }
.mc-card { border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; padding: 16px; background: var(--mud-palette-surface); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s, transform .2s; }
.mc-card:hover { box-shadow: var(--al-shadow-lg); transform: translateY(-2px); }
.mc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mc-stats > div { padding: 8px 10px; border-radius: 10px; background: var(--mud-palette-background); }
.mc-stats b { display: block; font-family: var(--al-display); font-size: 18px; }
.mc-stats span { font-size: 11.5px; color: var(--mud-palette-text-secondary); }
.mc-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--mud-palette-lines-default); }

/* profile */
.pf-head { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.pf-av { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; font-family: var(--al-display); font-weight: 700; font-size: 20px; color: #fff; background: linear-gradient(135deg, var(--al-navy), var(--al-teal)); }
.pf-head b { display: block; font-family: var(--al-display); font-size: 18px; } .pf-head span { font-size: 13px; color: var(--mud-palette-text-secondary); }
.pf-types { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pf-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; color: var(--mud-palette-text-secondary); }
.pf-check .mud-icon-root { flex: none; margin-top: 1px; }
.pf-check.done { color: var(--mud-palette-text-primary); } .pf-check.done .mud-icon-root { color: var(--al-teal); }

/* help */
.hp-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 24px 26px; border-radius: 20px; color: #fff; margin-bottom: 14px;
  background: radial-gradient(600px 300px at 90% 0%, rgba(20,184,166,.35), transparent 60%), linear-gradient(110deg, var(--al-navy), var(--al-hero-b)); }
.hp-hero h1 { margin: 6px 0 0; color: #fff; font-size: clamp(24px, 2.6vw, 32px); }
.hp-hero p { margin: 6px 0 0; color: #C8DCEB; max-width: 560px; }
.hp-search { flex: 1 1 320px; max-width: 460px; background: var(--mud-palette-surface); border-radius: 10px; }
.hp-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.hp-guide { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.hp-guide:hover { transform: translateY(-3px); box-shadow: var(--al-shadow-lg); border-color: transparent; }
.hp-guide b { font-size: 15px; } .hp-guide > span:last-child { font-size: 13px; color: var(--mud-palette-text-secondary); line-height: 1.45; }
.hp-faq details:first-child { padding-top: 6px; }