:root {
  --aqua: #43c3c7;
  --aqua-dark: #168b91;
  --aqua-soft: #e9fafa;
  --ink: #163235;
  --muted: #607577;
  --line: #dce9e9;
  --paper: #ffffff;
  --wash: #f6fbfb;
  --warning: #fff8df;
  --shadow: 0 18px 50px rgba(24, 85, 89, 0.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--wash);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { width: 178px; height: 62px; object-fit: contain; object-position: left center; }
.nav-links { display: flex; align-items: center; gap: 22px; font-weight: 750; }
.nav-links a:hover { color: var(--aqua-dark); }
.button, button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-weight: 800;
  cursor: pointer;
}
.button-primary { color: white; background: var(--aqua-dark); }
.button-primary:hover { background: #0e7378; }
.button-secondary { background: white; border-color: var(--line); }
.button-secondary:hover { border-color: var(--aqua); }

.hero { padding: 70px 0 62px; background: radial-gradient(circle at 85% 15%, #dff8f8 0, transparent 34%), white; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 58px; }
.eyebrow { display: inline-flex; padding: 7px 12px; color: var(--aqua-dark); background: var(--aqua-soft); border-radius: 999px; font-weight: 850; font-size: 13px; }
h1 { max-width: 720px; margin: 18px 0; font-size: clamp(42px, 6vw, 70px); line-height: 1.02; letter-spacing: -2.8px; }
.accent { color: var(--aqua-dark); }
.hero-copy { max-width: 650px; color: var(--muted); font-size: 19px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; color: var(--muted); font-size: 13px; font-weight: 750; }
.hero-card { padding: 28px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.hero-card h2 { margin: 0 0 6px; font-size: 25px; }
.hero-card > p { margin: 0 0 20px; color: var(--muted); }
.quote-line { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.quote-line small { display: block; color: var(--muted); }
.locked-note { margin-top: 18px; padding: 13px; background: var(--warning); border-radius: 12px; font-size: 13px; font-weight: 750; }

section { padding: 64px 0; }
.section-head { max-width: 720px; margin-bottom: 28px; }
.section-head h2 { margin: 0 0 8px; font-size: clamp(30px, 4vw, 42px); letter-spacing: -1.4px; }
.section-head p { margin: 0; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { padding: 22px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.card h3 { margin: 12px 0 6px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }
.card-icon { display: grid; width: 44px; height: 44px; place-items: center; color: white; background: var(--aqua-dark); border-radius: 13px; font-weight: 900; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { padding: 26px; background: white; border: 1px solid var(--line); border-radius: 20px; }
.step-number { display: grid; width: 38px; height: 38px; place-items: center; color: var(--aqua-dark); background: var(--aqua-soft); border-radius: 11px; font-weight: 900; }
.step h3 { margin: 15px 0 7px; }
.step p { margin: 0; color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.panel { padding: 32px; background: white; border: 1px solid var(--line); border-radius: 22px; }
.panel.aqua { background: var(--aqua-soft); border-color: #caeded; }
.panel h2 { margin-top: 0; }
.check-list { padding: 0; list-style: none; }
.check-list li { margin: 11px 0; padding-left: 26px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--aqua-dark); font-weight: 900; }

.page-hero { padding: 48px 0 28px; text-align: center; }
.page-hero h1 { margin: 0 auto 12px; font-size: clamp(36px, 5vw, 55px); }
.page-hero p { max-width: 680px; margin: auto; color: var(--muted); }
.form-shell { width: min(820px, calc(100% - 32px)); margin: 0 auto 72px; padding: 30px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.form-section { padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.form-section:last-child { border-bottom: 0; margin-bottom: 0; }
.form-section h2 { margin: 0 0 6px; font-size: 22px; }
.form-help { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
label { font-weight: 780; font-size: 14px; }
input, select, textarea {
  width: 100%;
  padding: 13px 14px;
  color: var(--ink);
  background: #fbfefe;
  border: 1px solid #cfe0e1;
  border-radius: 12px;
  outline: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--aqua-dark); box-shadow: 0 0 0 3px rgba(22,139,145,.12); }
textarea { min-height: 120px; resize: vertical; }
.option-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.option { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }
.option input { width: auto; }
.privacy-box { padding: 16px; color: #624e06; background: var(--warning); border-radius: 13px; font-size: 14px; }
.success { display: none; padding: 18px; margin-top: 18px; color: #0d666a; background: var(--aqua-soft); border-radius: 13px; font-weight: 750; }
.success.show { display: block; }

.auth-layout { width: min(880px, calc(100% - 32px)); margin: 42px auto 72px; }
.auth-card { padding: 30px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.auth-card h1 { margin: 0 0 8px; font-size: clamp(34px, 5vw, 48px); letter-spacing: -1.8px; }
.auth-card > p { margin: 0 0 24px; color: var(--muted); }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.role-choice { position: relative; padding: 18px; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; }
.role-choice:has(input:checked) { border-color: var(--aqua-dark); background: var(--aqua-soft); }
.role-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.role-choice strong, .role-choice span { display: block; }
.role-choice span { margin-top: 4px; color: var(--muted); font-size: 13px; }
.form-message { min-height: 22px; margin: 12px 0; font-size: 14px; font-weight: 750; }
.form-message.error { color: #a52222; }
.form-message.ok { color: var(--aqua-dark); }
.auth-switch { margin-top: 18px; text-align: center; color: var(--muted); }
.auth-switch a { color: var(--aqua-dark); font-weight: 850; }

.dashboard { padding: 38px 0 72px; }
.dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.dashboard-head h1 { margin: 0; font-size: clamp(34px, 5vw, 52px); }
.dashboard-head p { margin: 5px 0 0; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.stat { padding: 19px; background: white; border: 1px solid var(--line); border-radius: 16px; }
.stat small { display: block; color: var(--muted); }
.stat strong { display: block; margin-top: 4px; font-size: 28px; }
.dashboard-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 20px; }
.surface { padding: 24px; background: white; border: 1px solid var(--line); border-radius: 20px; }
.surface + .surface { margin-top: 20px; }
.surface h2 { margin: 0 0 16px; }
.empty { padding: 26px; color: var(--muted); background: var(--wash); border: 1px dashed #bfd2d3; border-radius: 14px; text-align: center; }
.list { display: grid; gap: 12px; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.list-item h3 { margin: 0 0 3px; font-size: 16px; }
.list-item p { margin: 0; color: var(--muted); font-size: 13px; }
.status { display: inline-flex; padding: 5px 9px; color: var(--aqua-dark); background: var(--aqua-soft); border-radius: 999px; font-size: 11px; font-weight: 900; text-transform: capitalize; }
.status.locked { color: #715b08; background: var(--warning); }
.mini-button { display: inline-flex; padding: 8px 12px; color: var(--aqua-dark); background: white; border: 1px solid var(--aqua); border-radius: 9px; font-weight: 850; font-size: 13px; }
.data-note { padding: 12px; margin-bottom: 16px; color: var(--muted); background: var(--wash); border-radius: 11px; font-size: 13px; }
.loading { color: var(--muted); font-weight: 750; }

.quote-grid { display: grid; gap: 16px; }
.quote-card { padding: 22px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.quote-top { display: flex; justify-content: space-between; gap: 20px; }
.quote-price { color: var(--aqua-dark); font-size: 28px; font-weight: 900; }
.quote-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0; }
.quote-meta span { padding: 5px 8px; background: var(--wash); border-radius: 8px; font-size: 12px; font-weight: 750; }
.quote-actions { display: flex; justify-content: flex-end; margin-top: 16px; }

.payment-card { width: min(720px, calc(100% - 32px)); margin: 42px auto 72px; padding: 30px; background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); }
.money-row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); }
.money-row.total { font-size: 21px; font-weight: 900; }
.secure-note { margin: 18px 0; padding: 15px; background: var(--aqua-soft); border-radius: 12px; }
.disabled-button { width: 100%; opacity: .55; cursor: not-allowed !important; }

.chat-shell { display: grid; grid-template-columns: 1fr 310px; gap: 20px; padding: 36px 0 72px; }
.chat-panel { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 20px; }
.chat-header { padding: 19px; border-bottom: 1px solid var(--line); }
.messages { min-height: 360px; max-height: 520px; overflow-y: auto; padding: 20px; display: grid; align-content: start; gap: 10px; }
.message { max-width: 78%; padding: 11px 13px; background: var(--wash); border-radius: 13px; }
.message.mine { margin-left: auto; color: white; background: var(--aqua-dark); }
.message small { display: block; margin-top: 4px; opacity: .75; }
.message-form { display: flex; gap: 10px; padding: 16px; border-top: 1px solid var(--line); }
.message-form input { flex: 1; }
.locked-chat { min-height: 360px; display: grid; place-items: center; padding: 32px; text-align: center; }
.locked-chat strong { display: block; font-size: 22px; }
.contact-panel { padding: 22px; background: white; border: 1px solid var(--line); border-radius: 20px; align-self: start; }
.contact-panel h2 { margin-top: 0; }
.contact-line { margin: 12px 0; }
.contact-line small { display: block; color: var(--muted); }

footer { padding: 38px 0; color: #d6eeee; background: #103d40; }
.footer-row { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.footer-logo-link { display: inline-flex; align-items: center; flex: 0 0 auto; }
.footer-logo { display: block; width: 96px; height: 36px; object-fit: cover; object-position: center; padding: 0; background: transparent; border-radius: 0; clip-path: inset(8% 17% 8% 17%); transform: scale(1.35); transform-origin: center; }

@media (max-width: 900px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .chat-shell { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .container { width: min(100% - 24px, 1120px); }
  .nav { flex-wrap: wrap; padding: 9px 0; }
  .logo { width: 145px; height: 54px; }
  .nav-links { order: 3; width: 100%; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
  .hero { padding: 45px 0; }
  h1 { letter-spacing: -1.8px; }
  .cards, .steps, .field-grid, .option-grid, .role-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .form-shell { padding: 21px 17px; }
  .dashboard-head, .list-item, .quote-top { align-items: flex-start; flex-direction: column; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-row { flex-direction: row; align-items: center; gap: 16px; }
  .footer-logo { width: 92px; height: 34px; }
  .footer-row > span { font-size: 14px; line-height: 1.45; }
}


/* Mobile-first visual refresh */
.brand-link {
  display: block;
  width: 184px;
  height: 64px;
  overflow: hidden;
  border-radius: 12px;
  flex: 0 0 auto;
}
.brand-link .logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
}
.login-button { min-width: 88px; }
.button-large { min-height: 56px; padding-inline: 24px; gap: 10px; border-radius: 16px; }

.hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0 70px;
  background:
    radial-gradient(circle at 88% 12%, rgba(67,195,199,.24), transparent 34%),
    radial-gradient(circle at 8% 80%, rgba(255,219,174,.23), transparent 28%),
    linear-gradient(145deg, #fff 0%, #f2fbfb 100%);
}
.hero::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  right: -150px;
  bottom: -150px;
  border: 42px solid rgba(67,195,199,.10);
  border-radius: 50%;
}
.hero-content { position: relative; z-index: 1; }
.live-dot { width: 8px; height: 8px; background: #24ad7a; border-radius: 50%; box-shadow: 0 0 0 5px rgba(36,173,122,.12); }
.hero h1 { max-width: 680px; margin: 20px 0; }
.hero-copy { max-width: 570px; font-size: 18px; }
.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 28px;
  margin-top: 32px;
}
.trust-strip span { display: grid; padding-left: 13px; border-left: 3px solid var(--aqua); }
.trust-strip strong { font-size: 16px; }
.trust-strip small { color: var(--muted); font-size: 12px; }

.marketplace-card {
  position: relative;
  padding: 26px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(22,139,145,.14);
  border-radius: 28px;
  box-shadow: 0 28px 70px rgba(17,91,95,.17);
}
.marketplace-card::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  z-index: -1;
  background: rgba(67,195,199,.18);
  border-radius: 28px;
}
.marketplace-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.marketplace-top h2 { margin: 3px 0 0; font-size: 24px; }
.mini-label,.kicker { color: var(--aqua-dark); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.request-status { padding: 7px 10px; color: var(--aqua-dark); background: var(--aqua-soft); border-radius: 999px; font-size: 12px; font-weight: 900; }
.job-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.job-summary span { padding: 6px 9px; color: var(--muted); background: var(--wash); border-radius: 8px; font-size: 12px; font-weight: 750; }
.quote-stack { display: grid; gap: 9px; }
.quote-profile { display: grid; grid-template-columns: 42px 1fr auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 15px; }
.quote-profile.featured { border-color: rgba(22,139,145,.45); box-shadow: 0 8px 20px rgba(22,139,145,.09); }
.avatar { display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: var(--aqua-dark); border-radius: 13px; font-size: 12px; font-weight: 900; }
.avatar.alt { background: #6979b7; }
.avatar.gold { background: #c28a33; }
.quote-name strong,.quote-name small { display: block; }
.quote-name small { color: var(--muted); font-size: 11px; }
.quote-amount { font-size: 20px; font-weight: 900; }
.privacy-pill { margin-top: 14px; padding: 10px 12px; color: #665716; background: #fff8df; border-radius: 11px; font-size: 12px; font-weight: 800; text-align: center; }

.service-section { background: #fff; }
.section-head-row { max-width: none; display: grid; grid-template-columns: 1fr 420px; gap: 50px; align-items: end; }
.section-head-row h2 { margin-top: 7px; }
.service-card { position: relative; min-height: 184px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card::after { content: ""; position: absolute; width: 105px; height: 105px; right: -42px; bottom: -48px; border-radius: 50%; background: rgba(255,255,255,.48); }
.service-card h3 { max-width: 150px; margin: 18px 0 3px; line-height: 1.2; }
.service-card p { max-width: 145px; }
.service-card .card-icon { color: var(--ink); background: rgba(255,255,255,.72); }
.card-arrow { position: absolute; z-index: 1; right: 17px; bottom: 14px; font-size: 20px; font-weight: 900; }
.service-card.mint { background: #e8f9f3; }
.service-card.blue { background: #e9f4ff; }
.service-card.peach { background: #fff0e4; }
.service-card.lilac { background: #f1edff; }
.service-card.yellow { background: #fff7d9; }
.service-card.rose { background: #ffedf1; }
.service-card.sky { background: #e7f8fb; }
.service-card.green { background: #edf7e8; }

.how-section { background: #103d40; color: #fff; }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head.centered p { color: #bfd4d5; }
.how-section .kicker { color: #77d9dc; }
.modern-steps { position: relative; }
.modern-steps .step { display: flex; gap: 18px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.modern-steps .step-number { flex: 0 0 auto; color: #fff; background: var(--aqua-dark); }
.modern-steps h3 { margin-top: 3px; }
.modern-steps p { color: #bfd4d5; }

.choice-section { background: linear-gradient(180deg,#f6fbfb,#fff); }
.choice-grid .panel { position: relative; overflow: hidden; min-height: 410px; padding: 38px; }
.choice-grid .panel::after { content:""; position:absolute; width:190px; height:190px; right:-90px; top:-90px; border:35px solid rgba(67,195,199,.12); border-radius:50%; }
.choice-grid .panel h2 { max-width: 390px; margin: 10px 0; font-size: clamp(30px,4vw,44px); line-height: 1.05; letter-spacing: -1.6px; }
.choice-grid .panel > p { color: var(--muted); }
.cleaner-panel { color: #fff; background: var(--aqua-dark); border-color: var(--aqua-dark); }
.cleaner-panel .panel-tag { color: #123a3d; background: #a8ebed; }
.cleaner-panel > p { color: #d7f1f2 !important; }
.cleaner-panel .check-list li::before { color: #a8ebed; }
.panel-tag { display:inline-flex; padding:6px 10px; color:var(--aqua-dark); background:var(--aqua-soft); border-radius:999px; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; }

.auth-layout {
  min-height: calc(100vh - 76px);
  padding: 54px 16px 76px;
  background:
    radial-gradient(circle at 12% 15%, rgba(67,195,199,.20), transparent 25%),
    radial-gradient(circle at 92% 85%, rgba(255,211,160,.22), transparent 25%),
    #f5fbfb;
}
.auth-card { position: relative; overflow: hidden; }
.auth-card::before { content:""; position:absolute; width:180px; height:180px; top:-100px; right:-80px; border:30px solid rgba(67,195,199,.13); border-radius:50%; }
.auth-card > * { position: relative; }
.auth-card input,.auth-card select { min-height: 56px; background: #fbfefe; }
.auth-card .button-primary { min-height: 56px; border-radius: 15px; }

.footer-brand { color: #fff; font-size: 16px; line-height: .78; font-weight: 950; letter-spacing: -.04em; }

@media (max-width: 680px) {
  .site-header { position: sticky; }
  .nav { min-height: 70px; flex-wrap: nowrap; gap: 10px; padding: 7px 0; }
  .brand-link { width: 138px; height: 54px; border-radius: 10px; }
  .nav-links { order: initial; width: auto; margin-left: auto; gap: 8px; padding: 0; border: 0; font-size: 13px; }
  .home-page .nav-links > a:not(.login-button) { display: none; }
  .home-page .login-button { min-height: 42px; padding: 0 17px; border-radius: 12px; white-space: nowrap; }
  .auth-page .nav-links a { white-space: nowrap; }
  .auth-page .nav-links a:first-child { display: none; }
  .auth-page .nav-links a:last-child { padding: 10px 13px; color: var(--aqua-dark); background: var(--aqua-soft); border-radius: 11px; }

  .hero { padding: 34px 0 44px; }
  .hero-grid { gap: 38px; }
  .eyebrow { font-size: 11px; }
  .hero h1 { margin: 15px 0; font-size: clamp(42px,13vw,58px); line-height: .98; letter-spacing: -2.4px; }
  .hero-copy { margin: 0; font-size: 16px; line-height: 1.55; }
  .hero-actions { display: grid; margin-top: 23px; }
  .hero-actions .button { width: 100%; }
  .trust-strip { grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 24px; }
  .trust-strip span { padding: 9px 6px; border: 0; background: rgba(255,255,255,.72); border-radius: 11px; text-align: center; }
  .trust-strip strong { font-size: 13px; }
  .trust-strip small { font-size: 10px; }
  .marketplace-card { padding: 18px; border-radius: 22px; }
  .marketplace-card::after { inset: 8px -7px -8px 7px; border-radius: 22px; }
  .marketplace-top h2 { font-size: 20px; }
  .quote-profile { grid-template-columns: 38px 1fr auto; padding: 10px; }
  .avatar { width:38px; height:38px; }
  .quote-amount { font-size: 18px; }

  section { padding: 48px 0; }
  .section-head-row { display: block; }
  .section-head-row p { margin-top: 9px; }
  .section-head h2 { font-size: 34px; line-height: 1.05; }
  .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .service-card { min-height: 165px; padding: 16px; border-radius: 17px; }
  .service-card h3 { margin-top: 14px; font-size: 16px; }
  .service-card p { font-size: 12px; }
  .service-card .card-icon { width: 38px; height: 38px; }
  .modern-steps { grid-template-columns: 1fr; gap: 10px; }
  .modern-steps .step { padding: 19px; }
  .choice-grid .panel { min-height: 0; padding: 26px 22px; }
  .choice-grid .panel h2 { font-size: 35px; }

  .auth-layout { padding: 28px 12px 50px; }
  .auth-card { padding: 26px 20px; border-radius: 22px; }
  .auth-card h1 { font-size: 39px; line-height: 1.02; letter-spacing: -2px; }
  .auth-card > p { font-size: 15px; }
  .auth-card input,.auth-card select { min-height: 52px; }
}

/* CleanHut progressive job builder */
.job-builder{position:relative}.job-progress{position:sticky;top:76px;z-index:20;margin:-8px -8px 26px;padding:14px 16px;background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(24,85,89,.08)}.job-progress-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:8px}.job-progress-track{height:9px;overflow:hidden;background:var(--aqua-soft);border-radius:999px}.job-progress-track span{display:block;width:0;height:100%;background:var(--aqua-dark);border-radius:999px;transition:width .25s ease}.area-counter-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.area-counter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid var(--line);border-radius:13px}.area-counter>span{font-weight:800}.area-counter>div{display:flex;align-items:center;gap:10px}.area-counter button{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--aqua-dark);font-weight:900}.area-counter strong{min-width:18px;text-align:center}.area-group{margin:16px 0;padding:16px;background:var(--wash);border-radius:16px}.area-group-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}.area-group-head>strong{margin-right:auto}.compact-choice{display:flex;align-items:center;gap:6px;font-size:12px}.compact-choice input{width:auto}.area-cards{display:grid;gap:12px}.room-card{padding:18px;background:white;border:1px solid var(--line);border-radius:15px}.room-card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.room-card-title h3{margin:0;min-width:0;flex:1 1 auto;overflow-wrap:break-word}.room-status{color:var(--aqua-dark);font-size:12px;font-weight:900;flex:0 0 auto;white-space:nowrap;overflow-wrap:normal}.conditional{margin:14px 0;padding:14px;background:var(--aqua-soft);border-radius:12px}.conditional h4{margin:0 0 10px}.compact-fields{margin-top:14px}.room-complete{margin-top:14px}.review-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}.review-area{padding:12px 0;border-bottom:1px solid var(--line)}.review-area p{margin:4px 0 0;color:var(--muted);font-size:13px}
@media(max-width:680px){.job-progress{top:118px}.area-counter-grid{grid-template-columns:1fr}.area-group{padding:12px}.room-card{padding:14px}.area-group-head{align-items:flex-start;flex-direction:column}.area-group-head>strong{margin-right:0}.review-head{flex-direction:column}}

/* Structured scope shown to cleaning professionals before quoting */
.quote-scope-summary{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--wash);margin-bottom:12px}.quote-scope-summary p{margin:6px 0 0;color:var(--muted)}.quote-scope-area{padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;margin:10px 0}.quote-scope-title{display:flex;justify-content:space-between;gap:12px;align-items:center}.quote-scope-area ul{margin:10px 0 12px;padding-left:20px;color:var(--muted)}.quote-scope-area li{margin:5px 0}.scope-alert{font-size:11px;font-weight:900;padding:5px 8px;border-radius:999px;background:#fff0dc;color:#8b4b00}.scope-alert-box{margin:12px 0;padding:13px;border-radius:12px;background:#fff0dc;color:#6f3d00}

/* CleanHut case-resolution mobile controls */
.button-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.case-flow { display:grid; gap:10px; margin:14px 0; }
.case-step { padding:12px 14px; background:var(--wash); border:1px solid var(--line); border-radius:12px; }
.case-step strong { display:block; }
.list-item.unread { border-color:var(--aqua); box-shadow:0 0 0 2px rgba(67,195,199,.08); }
.resolution-money { padding:14px; margin:12px 0; background:var(--aqua-soft); border-radius:12px; }
.admin-action-group { display:flex; flex-wrap:wrap; gap:7px; }
@media (max-width:680px) {
  .surface { padding:18px 15px; border-radius:16px; }
  .button-row, .admin-action-group { display:grid; grid-template-columns:1fr; width:100%; }
  .button-row .button, .admin-action-group .mini-button { width:100%; min-height:46px; }
  .list-item > div:last-child { width:100%; }
  .list-item > div:last-child .mini-button { margin:3px 3px 3px 0; }
  .dashboard { padding-top:24px; }
  .dashboard-head h1 { font-size:34px; letter-spacing:-1.2px; }
  .nav-links { overflow-x:auto; justify-content:flex-start; white-space:nowrap; }
  input[type="checkbox"] { width:22px; height:22px; flex:0 0 auto; }
}

.arrival-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.arrival-choice-grid .button{width:100%;min-height:48px}.arrival-update-panel textarea{width:100%;resize:vertical}@media(max-width:640px){.arrival-choice-grid{grid-template-columns:1fr}.arrival-choice-grid .button{min-height:52px;text-align:left}.arrival-update-panel .field-grid{grid-template-columns:1fr}}

.message.system-message{margin:12px auto;max-width:92%;border-radius:14px;padding:12px 14px;text-align:left}.message.system-message strong{display:block;margin-bottom:4px}.message.system-message small{display:block;margin-top:7px;opacity:.75}


/* Audience landing pages */
.audience-main{background:var(--wash)}
.audience-hero{position:relative;overflow:hidden;padding:82px 0 70px;background:radial-gradient(circle at 88% 12%,rgba(67,195,199,.25),transparent 34%),linear-gradient(145deg,#fff 0%,#effafa 100%)}
.audience-hero::after{content:"";position:absolute;width:260px;height:260px;right:-120px;bottom:-145px;border:40px solid rgba(67,195,199,.11);border-radius:50%}
.audience-wrap{position:relative;z-index:1;max-width:880px}
.audience-wrap h1{margin:18px 0;max-width:820px}
.audience-wrap>p{max-width:690px;margin:0 0 28px;color:var(--muted);font-size:19px}
.professional-audience{background:radial-gradient(circle at 88% 12%,rgba(67,195,199,.30),transparent 34%),radial-gradient(circle at 10% 90%,rgba(255,219,174,.20),transparent 25%),linear-gradient(145deg,#fff 0%,#effafa 100%)}
.benefit-section{background:#fff}
.benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.benefit-card{min-height:230px;padding:28px;background:var(--wash);border:1px solid var(--line);border-radius:22px}
.benefit-card h2{margin:18px 0 8px;font-size:25px;line-height:1.12;letter-spacing:-.7px}
.benefit-card p{margin:0;color:var(--muted)}
.benefit-icon{display:grid;width:48px;height:48px;place-items:center;color:#fff;background:var(--aqua-dark);border-radius:14px;font-size:20px;font-weight:900}
.featured-benefit{background:var(--aqua-dark);color:#fff;border-color:var(--aqua-dark)}
.featured-benefit p{color:#d7f1f2}.featured-benefit .benefit-icon{color:var(--aqua-dark);background:#a8ebed}
.audience-cta{margin-top:22px;padding:34px;text-align:center;background:var(--aqua-soft);border:1px solid #caeded;border-radius:24px}
.audience-cta h2{margin:0 0 6px;font-size:32px;letter-spacing:-1px}.audience-cta p{margin:0 0 20px;color:var(--muted)}
@media(max-width:680px){.benefits-page .nav-links>a:not(.login-button){display:none}.audience-hero{padding:42px 0 48px}.audience-wrap h1{font-size:clamp(42px,13vw,58px);line-height:.98}.audience-wrap>p{font-size:16px}.benefit-grid{grid-template-columns:1fr}.benefit-card{min-height:0;padding:22px}.benefit-card h2{font-size:22px}.audience-cta{padding:26px 20px}.audience-cta .button{width:100%}}

.language-select{appearance:auto;border:1px solid var(--aqua,#43c3c7);border-radius:10px;background:#fff;color:var(--ink,#163235);padding:8px 10px;font:inherit;max-width:150px}

.footer-white-brand { display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; flex:0 0 auto; }
.footer-wordmark { color:#fff; font-family:Georgia, "Times New Roman", serif; font-weight:900; font-size:22px; line-height:.78; letter-spacing:.06em; }
.footer-bucket { color:#fff; font-size:34px; line-height:.55; font-weight:800; text-align:center; transform:rotate(180deg); }
.footer-bubbles { display:block; font-family:Arial,sans-serif; font-size:12px; line-height:.6; transform:rotate(180deg); margin-bottom:2px; }
.footer-divider { width:1px; height:54px; background:rgba(214,238,238,.35); flex:0 0 auto; }
.footer-tagline { flex:1; }
@media (max-width:680px) {
  .footer-row { justify-content:flex-start; }
  .footer-white-brand { gap:6px; }
  .footer-wordmark { font-size:18px; }
  .footer-bucket { font-size:28px; }
  .footer-divider { height:44px; }
  .footer-tagline { font-size:14px; line-height:1.45; }
}

.footer-white-logo { display:block; width:150px; height:auto; }
@media (max-width:680px){ .footer-white-logo { width:132px; } }

/* Footer white brand sizing override */
.footer-white-brand { width:120px; min-width:120px; height:auto; overflow:visible; }
.footer-white-logo { display:block; width:120px !important; max-width:120px; height:auto !important; }
.footer-row .footer-tagline { min-width:0; }
@media (max-width:680px) {
  footer { padding:28px 0; }
  .footer-row { display:grid; grid-template-columns:104px 1px minmax(0,1fr); gap:14px; align-items:center; }
  .footer-white-brand { width:104px; min-width:104px; }
  .footer-white-logo { width:104px !important; max-width:104px; height:auto !important; }
  .footer-divider { width:1px; height:48px; }
  .footer-tagline { font-size:14px; line-height:1.4; }
}

/* Exact header-logo proportions in footer */
.footer-white-brand{width:118px;min-width:118px}.footer-white-logo{width:118px!important;max-width:118px;height:auto!important}@media(max-width:680px){.footer-row{grid-template-columns:112px 1px minmax(0,1fr)}.footer-white-brand{width:112px;min-width:112px}.footer-white-logo{width:112px!important;max-width:112px}}

/* Footer: use the exact original CleanHut artwork in a clean logo tile */
.footer-white-brand{width:124px;min-width:124px;background:#fff;border-radius:10px;padding:5px;box-sizing:border-box;overflow:hidden}
.footer-white-logo{display:block;width:114px!important;max-width:114px;height:70px!important;object-fit:cover;object-position:center}
@media(max-width:680px){
  .footer-row{grid-template-columns:116px 1px minmax(0,1fr);gap:14px}
  .footer-white-brand{width:116px;min-width:116px;padding:4px;border-radius:9px}
  .footer-white-logo{width:108px!important;max-width:108px;height:66px!important;object-fit:cover;object-position:center}
}

/* Footer exact-logo treatment: same JPEG artwork, white on teal with no white tile */
.footer-white-brand{
  position:relative;width:130px;min-width:130px;height:62px;padding:0;
  border-radius:0;background:transparent;overflow:hidden;isolation:isolate;
}
.footer-white-logo{
  position:absolute;display:block;width:184px!important;max-width:none;height:184px!important;
  left:-27px;top:-62px;object-fit:fill;
  filter:brightness(0) invert(1);mix-blend-mode:screen;
}
@media(max-width:680px){
  .footer-row{grid-template-columns:116px 1px minmax(0,1fr);gap:14px}
  .footer-white-brand{width:116px;min-width:116px;height:55px;padding:0;background:transparent;border-radius:0}
  .footer-white-logo{width:164px!important;max-width:none;height:164px!important;left:-24px;top:-55px;object-fit:fill}
}

/* Final footer logo: standalone transparent SVG, no filters or white tile */
.footer-white-brand{position:static;width:116px;min-width:116px;height:auto;padding:0;background:transparent;border-radius:0;overflow:visible}
.footer-white-logo{position:static;display:block;width:116px!important;max-width:116px;height:auto!important;object-fit:contain;filter:none;mix-blend-mode:normal}
@media(max-width:680px){.footer-row{grid-template-columns:116px 1px minmax(0,1fr);gap:14px}.footer-white-brand{width:116px;min-width:116px;height:auto}.footer-white-logo{position:static;width:116px!important;max-width:116px;height:auto!important;filter:none;mix-blend-mode:normal}}

/* Stable footer brand mark: no image asset/filter dependencies */
.footer-css-logo{width:116px;min-width:116px;height:58px;display:flex;align-items:flex-end;gap:5px;color:#fff}
.footer-css-words{font-family:Georgia,"Times New Roman",serif;font-weight:900;line-height:.78;letter-spacing:.4px;font-size:23px;display:flex;flex-direction:column;padding-bottom:3px}
.footer-css-words span:last-child{font-size:30px}
.footer-css-bucket{position:relative;width:39px;height:47px;flex:0 0 39px}
.footer-css-bucket .bubble{position:absolute;border:2.5px solid #fff;border-radius:50%;width:8px;height:8px}
.footer-css-bucket .b1{top:0;left:17px}.footer-css-bucket .b2{top:11px;left:8px}.footer-css-bucket .b3{top:12px;left:27px}
.footer-css-bucket .bucket-rim{position:absolute;left:3px;top:23px;width:34px;height:5px;border:2.5px solid #fff;border-radius:5px}
.footer-css-bucket .bucket-body{position:absolute;left:7px;top:29px;width:27px;height:25px;border:2.5px solid #fff;border-top:0;border-radius:0 0 6px 6px;box-sizing:border-box}
.footer-css-bucket .bucket-handle{position:absolute;left:12px;top:34px;width:25px;height:16px;border:2.5px solid #fff;border-top:0;border-left:0;border-radius:0 0 14px 0;transform:rotate(18deg)}
@media(max-width:680px){.footer-css-logo{width:116px;min-width:116px}}

/* Exact footer artwork generated from the supplied CleanHut logo pixels */
.footer-exact-brand{display:block;width:126px;min-width:126px;background:transparent;text-decoration:none}
.footer-exact-logo{display:block;width:126px;height:auto;max-width:100%;background:transparent}
@media(max-width:680px){.footer-row{grid-template-columns:126px 1px minmax(0,1fr);gap:14px}.footer-exact-brand{width:126px;min-width:126px}.footer-exact-logo{width:126px;height:auto}}

/* Footer asset render override */
.footer-white-brand{display:block!important;width:126px!important;min-width:126px!important;height:auto!important;background:transparent!important;overflow:visible!important}
.footer-white-logo{display:block!important;position:static!important;width:126px!important;max-width:126px!important;height:auto!important;filter:none!important;mix-blend-mode:normal!important;opacity:1!important}
@media(max-width:680px){.footer-row{grid-template-columns:126px 1px minmax(0,1fr)!important}.footer-white-brand,.footer-white-logo{width:126px!important;min-width:126px!important;max-width:126px!important;height:auto!important}}

/* Slightly smaller footer logo */
.footer-white-brand{width:108px!important;min-width:108px!important}.footer-white-logo{width:108px!important;max-width:108px!important}@media(max-width:680px){.footer-row{grid-template-columns:108px 1px minmax(0,1fr)!important}.footer-white-brand,.footer-white-logo{width:108px!important;min-width:108px!important;max-width:108px!important}}

/* Refined mobile hero headline */
@media(max-width:680px){.hero h1{font-size:clamp(42px,11vw,54px)!important;line-height:.98!important;letter-spacing:-1.8px!important}}

/* Keep CleanHut hero slogan on one line on mobile */
@media(max-width:680px){.hero h1{font-size:clamp(22px,6.35vw,30px)!important;line-height:1.08!important;letter-spacing:-.7px!important;white-space:nowrap!important}}

/* Two-line CleanHut hero slogan */
@media(max-width:680px){.hero h1{font-size:clamp(22px,6.35vw,30px)!important;line-height:1.08!important;letter-spacing:-.7px!important;white-space:nowrap!important}}


/* Internationalisation: allow longer translated labels to wrap safely on small screens. */
.language-select{max-width:100%;min-width:0}
.nav-links .button,.nav-links a{white-space:normal;text-align:center;overflow-wrap:anywhere}
.button{height:auto;min-height:44px;white-space:normal;overflow-wrap:anywhere}
@media (max-width:720px){
  .nav{gap:10px}
  .nav-links{min-width:0;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .language-select{width:auto;max-width:48vw}
  .login-button{max-width:42vw;padding-left:14px;padding-right:14px;font-size:clamp(.82rem,3.6vw,1rem);line-height:1.1}
  .choice-section h2,.how-section h2{overflow-wrap:anywhere}
}


/* Keep translated primary header action visually identical to the English login button. */
.site-header .login-button,.site-header .login-button:link,.site-header .login-button:visited,.site-header .login-button:hover,.site-header .login-button:active{
  color:#fff!important;background:var(--aqua-dark)!important;opacity:1!important;-webkit-text-fill-color:#fff!important;
}


/* Internationalisation layout hardening: translated UI must grow rather than clip. */
html,body{max-width:100%;overflow-x:hidden}
.nav,.nav-links,.dashboard-head,.list-item,.quote-meta,.money-row,.footer-row,.field-grid,.dashboard-grid,.choice-grid,.steps{min-width:0}
.nav-links>a,.nav-links button,.button,.status,.panel-tag,.kicker,.eyebrow,label,small,p,h1,h2,h3,li,.data-note,.form-message{
  overflow-wrap:anywhere;word-break:normal
}
input,select,textarea{max-width:100%;min-width:0}
.surface,.card,.panel,.auth-card,.stat,.field{min-width:0;max-width:100%}
@media(max-width:720px){
  .dashboard-head,.list-item,.money-row{flex-wrap:wrap;gap:10px}
  .dashboard-head>.button,.list-item>.button{max-width:100%}
  .stats,.field-grid,.dashboard-grid,.choice-grid{grid-template-columns:minmax(0,1fr)!important}
  .nav-links{row-gap:8px}
  .nav-links>a{line-height:1.2}
  .language-select{flex:0 1 auto}
}

/* Shared site chrome: keep every page aligned with the CleanHut front page. */
.site-header .brand-link{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none}
.site-header .brand-link .logo{display:block;width:178px;height:62px;object-fit:contain;object-position:left center}
.footer-white-brand{display:inline-flex;align-items:center;flex:0 0 auto}
.footer-white-logo{display:block;width:116px;height:44px;object-fit:contain}
.footer-divider{width:1px;height:30px;background:rgba(255,255,255,.28);flex:0 0 auto}
.footer-tagline{color:#d6eeee}
@media (max-width:680px){
 .site-header .brand-link .logo{width:145px;height:54px}
 .footer-row{align-items:center;flex-wrap:wrap}
 .footer-white-logo{width:104px;height:40px}
 .footer-divider{display:none}
}

/* 2026-09-28 unified shared mobile header.
   One source of truth for Home, auth and application pages. */
.site-header .nav > a:first-child,
.site-header .brand-link{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  overflow:hidden;
  text-decoration:none;
}
.site-header .nav > a:first-child .logo,
.site-header .brand-link .logo{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:cover;
  object-position:center;
  transform:none;
}
.site-header .nav-links{min-width:0;max-width:100%}
.site-header .nav-links a,.site-header .nav-links .button{
  box-sizing:border-box;min-width:0;max-width:100%;
  white-space:normal;overflow-wrap:break-word;word-break:normal;
  text-align:center;line-height:1.08;
}
@media(max-width:680px){
  body{padding-top:76px!important}
  .site-header{height:76px!important;min-height:76px!important}
  .site-header .nav{
    width:100%!important;max-width:100%!important;height:76px!important;min-height:76px!important;
    display:grid!important;grid-template-columns:118px minmax(0,1fr)!important;
    align-items:center!important;gap:8px!important;padding:8px 12px!important;
    box-sizing:border-box!important;overflow:hidden!important;
  }
  .site-header .nav > a:first-child,
  .site-header .brand-link{
    width:118px!important;min-width:118px!important;max-width:118px!important;
    height:58px!important;margin:0!important;overflow:hidden!important;
  }
  .site-header .nav > a:first-child .logo,
  .site-header .brand-link .logo{
    width:118px!important;height:58px!important;max-width:118px!important;max-height:58px!important;
    object-fit:cover!important;object-position:center!important;transform:none!important;
  }
  .site-header .nav-links,
  .site-header .auth-nav{
    width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-end!important;
    gap:6px!important;padding:0!important;border:0!important;overflow:hidden!important;
  }
  .site-header .language-select{
    flex:1 1 112px!important;width:auto!important;min-width:72px!important;max-width:132px!important;
    height:44px!important;padding:0 24px 0 8px!important;box-sizing:border-box!important;
    font-size:clamp(11px,3.2vw,14px)!important;
  }
  .site-header .nav-links a,
  .site-header .nav-links .button,
  .site-header .auth-nav a,
  .site-header .auth-nav .button{
    flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:132px!important;
    min-height:44px!important;height:auto!important;margin:0!important;padding:7px 9px!important;
    box-sizing:border-box!important;border-radius:12px!important;
    white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;
    font-size:clamp(10px,3vw,13px)!important;line-height:1.08!important;text-align:center!important;
  }
  main .button,.auth-card .button,.panel .button,.card .button,.surface .button,
  .button-row .button,.dashboard-head .button,.list-item .button{
    max-width:100%!important;min-width:0!important;height:auto!important;min-height:44px!important;
    box-sizing:border-box!important;white-space:normal!important;overflow-wrap:break-word!important;
    word-break:normal!important;text-align:center!important;
  }
}

/* 2026-09-28 site-wide responsive containment guard.
   Final shared safeguard: logos never escape their brand box and translated controls stay inside their own width. */
.site-header .brand-link,
.site-header .brand-link .logo,
.button,button,.mini-button,.language-select,input,select,textarea{
  box-sizing:border-box;
  max-width:100%;
}
.site-header .brand-link{overflow:hidden!important}
.site-header .brand-link .logo{
  display:block!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  transform:none!important;
}
.button,button.button,.mini-button{
  min-width:0;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  text-align:center;
  line-height:1.15;
}
.button-row,.nav,.nav-links,.auth-nav,.dashboard-head,.dashboard-grid,.field-grid,.list-item,.money-row{
  min-width:0;
  max-width:100%;
}
@media(max-width:680px){
  /* Home page is the reference size. Keep every shared header logo within the same safe envelope. */
  .site-header .brand-link{
    width:118px!important;
    min-width:118px!important;
    max-width:118px!important;
    height:58px!important;
  }
  .site-header .brand-link .logo{
    width:118px!important;
    height:58px!important;
    max-width:118px!important;
    max-height:58px!important;
    object-fit:contain!important;
    transform:none!important;
  }
  .site-header .nav{
    grid-template-columns:minmax(0,118px) minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    gap:6px!important;
  }
  .site-header .nav-links,.site-header .auth-nav{min-width:0!important;max-width:100%!important}
  .site-header .button,.site-header .nav-links a,.site-header .auth-nav>a,
  .site-header .language-select{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    line-height:1.08!important;
  }
  main .button,.auth-card .button,.panel .button,.card .button,.surface .button,
  .button-row .button,.dashboard-head .button,.list-item .button{
    width:auto;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:44px;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
}


/* 2026-09-28 shared header action correction.
   Keep labels readable and give every header action the same filled treatment. */
@media(max-width:680px){
  .site-header .nav{grid-template-columns:118px minmax(0,1fr)!important;gap:6px!important;padding:8px!important}
  .site-header .nav-links,.site-header .auth-nav{gap:5px!important;overflow:visible!important}
  .site-header .language-select{
    flex:1 1 auto!important;width:auto!important;min-width:104px!important;max-width:none!important;
    height:44px!important;padding:0 22px 0 8px!important;
    white-space:nowrap!important;overflow-wrap:normal!important;word-break:keep-all!important;
    font-size:clamp(11px,2.9vw,14px)!important;
  }
  .site-header .nav-links>a,
  .site-header .auth-nav>a,
  .site-header .nav-links>.button,
  .site-header .auth-nav>.button{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex:0 1 auto!important;min-width:max-content!important;max-width:132px!important;
    min-height:44px!important;padding:7px 10px!important;
    color:#fff!important;-webkit-text-fill-color:#fff!important;
    background:var(--aqua-dark)!important;border:1px solid var(--aqua-dark)!important;
    border-radius:12px!important;opacity:1!important;text-decoration:none!important;
    white-space:normal!important;overflow-wrap:normal!important;word-break:keep-all!important;
    font-size:clamp(10px,2.8vw,13px)!important;line-height:1.08!important;
  }
  .site-header .nav-links>a:hover,.site-header .auth-nav>a:hover{
    background:#0e7378!important;border-color:#0e7378!important;color:#fff!important;
  }
  .auth-page .auth-create-account{max-width:126px!important}
}


/* 2026-09-28 home mobile nav correction: show only language + Log in. */
@media(max-width:680px){
  .home-page .site-header .nav-links>a:not(.login-button){display:none!important}
  .home-page .site-header .nav-links{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;overflow:hidden!important}
  .home-page .site-header .language-select{display:block!important;flex:1 1 auto!important;min-width:104px!important;max-width:132px!important}
  .home-page .site-header .login-button{display:inline-flex!important;flex:0 0 auto!important;min-width:max-content!important;max-width:96px!important;white-space:nowrap!important}
}


/* 2026-09-28 footer restoration. Independent from shared header rules. */
@media(max-width:680px){
  footer{padding:28px 0!important}
  footer .footer-row{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    align-items:center!important;justify-content:flex-start!important;gap:16px!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  footer .footer-white-brand{
    display:flex!important;align-items:center!important;flex:0 0 108px!important;
    width:108px!important;min-width:108px!important;max-width:108px!important;
    height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;
  }
  footer .footer-white-logo{
    display:block!important;width:108px!important;min-width:108px!important;max-width:108px!important;
    height:auto!important;object-fit:contain!important;
  }
  footer .footer-divider{display:block!important;flex:0 0 1px!important;width:1px!important;height:44px!important}
  footer .footer-tagline{
    display:block!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important;
    margin:0!important;font-size:14px!important;line-height:1.45!important;
    white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;
  }
}


/* 2026-09-28 footer hard reset: full-width mobile footer, no inherited grid/column sizing. */
@media(max-width:680px){
  footer>.container.footer-row{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:108px 1px minmax(0,1fr)!important;
    column-gap:16px!important;
    align-items:center!important;
    width:calc(100% - 32px)!important;
    max-width:none!important;
    margin-left:16px!important;
    margin-right:16px!important;
    padding:0!important;
  }
  footer>.container.footer-row>.footer-white-brand{
    grid-column:1!important;width:108px!important;min-width:108px!important;max-width:108px!important;
  }
  footer>.container.footer-row>.footer-divider{
    grid-column:2!important;display:block!important;width:1px!important;height:48px!important;
  }
  footer>.container.footer-row>.footer-tagline{
    grid-column:3!important;width:100%!important;min-width:0!important;max-width:none!important;
    font-size:14px!important;line-height:1.45!important;text-align:left!important;
    white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important;
  }
}


/* 2026-09-28 authenticated navigation and unified Settings */
.settings-section{padding:26px 0;border-top:1px solid var(--line)}
.settings-section:first-of-type{margin-top:24px}
.settings-section h2{margin:0 0 14px;font-size:22px}
@media(max-width:680px){
  .site-header .app-nav{
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px!important;
  }
  .site-header .app-nav::-webkit-scrollbar{display:none}
  .site-header .app-nav>a,
  .site-header .app-nav>.button{
    flex:0 0 auto!important;
    max-width:none!important;
    min-width:max-content!important;
    white-space:nowrap!important;
  }
}

/* 2026-09-28 dashboard menu: no horizontal/sliding account navigation. */
.app-menu-button{display:none}
@media(max-width:680px){
 .site-header .app-nav{position:relative!important;display:flex!important;justify-content:flex-end!important;overflow:visible!important;padding:0!important}
 .site-header .app-menu-button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:88px!important;min-height:44px!important;padding:8px 16px!important;border:1px solid var(--aqua-dark)!important;
  border-radius:12px!important;background:var(--aqua-dark)!important;color:#fff!important;font:inherit!important;font-weight:800!important;
 }
 .site-header .app-menu-dropdown{
  position:absolute!important;top:calc(100% + 8px)!important;right:0!important;z-index:1000!important;
  width:min(220px,calc(100vw - 32px))!important;padding:8px!important;background:#fff!important;
  border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:0 14px 34px rgba(15,54,57,.18)!important;
 }
 .site-header .app-menu-dropdown[hidden]{display:none!important}
 .site-header .app-menu-dropdown>a{
  display:flex!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:42px!important;
  align-items:center!important;justify-content:flex-start!important;margin:0!important;padding:10px 12px!important;
  background:transparent!important;border:0!important;border-radius:9px!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important;
  white-space:normal!important;text-align:left!important;font-size:14px!important;line-height:1.2!important;
 }
 .site-header .app-menu-dropdown>a:hover{background:var(--soft)!important;color:var(--aqua-dark)!important}
}

@media(max-width:680px){
 .site-header .app-menu-dropdown .app-menu-language-slot{padding:6px 4px 10px!important;border-bottom:1px solid var(--line)!important;margin-bottom:4px!important}
 .site-header .app-menu-dropdown .language-select{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;height:42px!important;margin:0!important}
}

/* 2026-09-28 dashboard dropdown layering fix */
@media(max-width:680px){
 .site-header{overflow:visible!important;z-index:10000!important}
 .site-header .nav{overflow:visible!important}
 .site-header .app-nav{overflow:visible!important;z-index:10001!important}
 .site-header .app-menu-dropdown{z-index:10002!important}
 .dashboard,.auth-layout,main{position:relative;z-index:1}
}

/* Login account creation action */
.auth-new-label{margin-top:24px!important;margin-bottom:10px!important;text-align:center!important}
.auth-create-bottom{display:flex!important;align-items:center!important;justify-content:center!important;text-decoration:none!important}

/* Public audience headers: keep the language control compact when it is the only action */
@media (max-width:680px){
  .benefits-page .site-header .nav-links{flex:0 0 auto!important;width:auto!important;min-width:0!important}
  .benefits-page .site-header .language-select{width:190px!important;max-width:46vw!important;min-width:150px!important;flex:none!important}
}

/* Mobile headers without an account Menu: keep the language selector compact site-wide */
@media (max-width:680px){
  .site-header .nav:not(:has(.app-menu-button)) .nav-links{flex:0 0 auto!important;width:auto!important;min-width:0!important}
  .site-header .nav:not(:has(.app-menu-button)) .language-select{width:190px!important;max-width:46vw!important;min-width:150px!important;flex:none!important}
}

/* Public homepage mobile header: protect logo and keep language selector compact */
@media (max-width:680px){
  body:not(.benefits-page) .site-header .nav:not(:has(.app-menu-button)) .brand{flex:0 0 auto!important;min-width:0!important}
  body:not(.benefits-page) .site-header .nav:not(:has(.app-menu-button)) .nav-links{flex:0 0 auto!important;width:auto!important;gap:10px!important}
  body:not(.benefits-page) .site-header .nav:not(:has(.app-menu-button)) .language-select{width:180px!important;min-width:140px!important;max-width:42vw!important;flex:0 1 180px!important}
  body:not(.benefits-page) .site-header .nav:not(:has(.app-menu-button)) .button{flex:0 0 auto!important;white-space:nowrap!important}
}


/* Homepage only: keep the last known-good header geometry; allow long translated login labels to wrap. */
@media(max-width:680px){
  .home-page .site-header .login-button{
    min-width:0!important;
    max-width:112px!important;
    height:auto!important;
    min-height:44px!important;
    padding:5px 8px!important;
    white-space:normal!important;
    line-height:1.08!important;
    text-align:center!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}


/* Homepage login label: real inner text box so translated labels wrap instead of clipping. */
@media(max-width:680px){
  .home-page .site-header .login-button{
    flex:0 0 112px!important;
    width:112px!important;
    max-width:112px!important;
    min-width:112px!important;
    min-height:44px!important;
    height:auto!important;
    padding:5px 7px!important;
    overflow:hidden!important;
  }
  .home-page .site-header .login-button .login-label,
  .home-page .site-header .login-button .login-label *{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    text-align:center!important;
    line-height:1.05!important;
  }
}


/* Global header contract: every page header stays pinned while scrolling. */
html,body{overflow-x:clip}
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:10000!important;
  width:100%!important;
  isolation:isolate;
}


/* 2026-09-29 homepage professional benefits CTA: white button on teal panel. */
.home-page .cleaner-panel > .button.button-primary{
  background:#fff!important;
  color:var(--aqua-dark)!important;
  -webkit-text-fill-color:var(--aqua-dark)!important;
  border-color:#fff!important;
}
.home-page .cleaner-panel > .button.button-primary:hover{
  background:var(--aqua-soft)!important;
  color:var(--aqua-dark)!important;
  -webkit-text-fill-color:var(--aqua-dark)!important;
  border-color:var(--aqua-soft)!important;
}


/* Keep the registration date control inside its field on mobile Safari. */
.auth-card .field{min-width:0;max-width:100%;overflow:hidden}
.auth-card input[type="date"]{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box}


/* Customer registration DOB: iOS Safari date input needs explicit mobile sizing. */
#registerForm .customer-dob-input{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
@media(max-width:720px){
  #registerForm .field:has(.customer-dob-input){width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
  #registerForm .customer-dob-input{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important}
}

/* Customer DOB iOS native-control containment. */
#registerForm .customer-dob-field{width:100%!important;min-width:0!important;max-width:100%!important}
#registerForm .customer-dob-wrap{width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important;border-radius:12px}
#registerForm .customer-dob-wrap input[type="date"]{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;box-sizing:border-box!important}

/* Customer DOB: match the exact visible width of adjacent fields on iPhone. */
#registerForm .customer-dob-field{overflow:visible!important}
#registerForm .customer-dob-wrap{width:100%!important;max-width:100%!important;overflow:hidden!important;box-sizing:border-box!important}
#registerForm .customer-dob-wrap .customer-dob-input{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
#registerForm .dob-message{display:none;margin-top:7px;color:#a52222;font-weight:750;font-size:13px}
#registerForm .dob-message.show{display:block}

/* Registration stays in the mobile single-column format on phone rotation. */
@media (max-width: 950px){
  .auth-page #registerForm .field-grid{grid-template-columns:minmax(0,1fr)!important}
  .auth-page #registerForm .field.full{grid-column:auto!important}
  .auth-page #registerForm .role-grid{grid-template-columns:minmax(0,1fr)!important}
}
/* iOS renders native date inputs wider than their CSS box; reserve the same right edge as other fields. */
@media (max-width: 950px){
  .auth-page #registerForm .customer-dob-wrap{width:calc(100% - 8px)!important;max-width:calc(100% - 8px)!important}
  .auth-page #registerForm #dateOfBirth{width:100%!important;max-width:100%!important;min-width:0!important}
}

/* CleanHut DOB selectors: browser-independent registration control. */
#registerForm .dob-selects{display:grid;grid-template-columns:.72fr 1.45fr 1fr;gap:10px;width:100%;min-width:0}
#registerForm .dob-selects select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
@media(max-width:420px){#registerForm .dob-selects{gap:6px;grid-template-columns:.72fr 1.35fr 1fr}#registerForm .dob-selects select{padding-left:8px;padding-right:8px;font-size:15px}}

/* Registration password visibility control. */
#registerForm .password-input-wrap{position:relative;width:100%;min-width:0}
#registerForm .password-input-wrap input{width:100%;padding-right:72px}
#registerForm .password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:auto;min-width:52px;padding:7px 9px;border:0;background:transparent;color:#176b70;font:inherit;font-size:14px;font-weight:750;cursor:pointer}
#registerForm .password-toggle:focus-visible{outline:2px solid currentColor;outline-offset:1px;border-radius:7px}

/* Stable DOB entry on mobile browsers: avoids native select overlays. */
#registerForm .dob-inputs{display:grid;grid-template-columns:.72fr .72fr 1fr;gap:10px;width:100%;min-width:0}
#registerForm .dob-inputs input{width:100%;min-width:0;max-width:100%;box-sizing:border-box;text-align:center;padding-left:8px;padding-right:8px}

/* CleanHut custom DOB scroll wheels; avoids browser-native select overlays. */
#registerForm .dob-wheels{display:grid;grid-template-columns:.72fr 1.25fr 1fr;gap:8px;width:100%;min-width:0}
#registerForm .dob-wheel-group{min-width:0}
#registerForm .dob-wheel-label{display:block;font-size:12px;font-weight:750;margin:0 0 5px 4px;color:#466568}
#registerForm .dob-wheel{height:132px;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y mandatory;border:1px solid #cfe0e1;border-radius:12px;background:#fff;padding:44px 0;-webkit-overflow-scrolling:touch;box-sizing:border-box}
#registerForm .dob-wheel-option{height:44px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font-size:16px;cursor:pointer;user-select:none;-webkit-user-select:none}
#registerForm .dob-wheel-option.selected{font-weight:800;background:#eefafa;color:#123b3e}
#registerForm .dob-wheel::-webkit-scrollbar{display:none}

/* Compact CleanHut DOB picker. */
#registerForm .dob-compact{display:grid;grid-template-columns:.8fr 1.25fr 1fr;gap:8px;width:100%}
#registerForm .dob-picker-button{height:52px;width:100%;padding:0 10px;border:1px solid #cfe0e1;border-radius:12px;background:#fff;color:#173b3e;font:inherit;font-weight:700;text-align:left}
#registerForm .dob-picker-panel{margin-top:8px;border:1px solid #cfe0e1;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 12px 28px rgba(20,58,61,.12)}
#registerForm .dob-picker-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #e1eded}
#registerForm .dob-picker-head button{width:auto;padding:7px 12px;border:0;border-radius:9px;background:#eefafa;color:#176b70;font-weight:800}
#registerForm .dob-picker-list{max-height:190px;overflow-y:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:y proximity}
#registerForm .dob-picker-option{display:block;width:100%;min-height:44px;padding:10px 14px;border:0;border-bottom:1px solid #eef3f3;background:#fff;color:#173b3e;text-align:left;font:inherit;scroll-snap-align:start}
#registerForm .dob-picker-option.selected{background:#eefafa;font-weight:800}

/* Login password toggle: keep Show/Hide inside the password field. */
#loginForm .password-input-wrap{position:relative;width:100%;min-width:0}
#loginForm .password-input-wrap input{width:100%;padding-right:78px;box-sizing:border-box}
#loginForm .password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:auto;min-width:52px;margin:0;padding:7px 9px;border:0;background:transparent;color:#176b70;font:inherit;font-size:14px;font-weight:800;line-height:1;cursor:pointer}
#loginForm .password-toggle:focus-visible{outline:2px solid currentColor;outline-offset:1px;border-radius:7px}

/* Compact grouped property spaces */
.space-group{margin:14px 0 20px}.space-group-title{display:flex;align-items:center;gap:8px;margin:0 0 8px}.space-compact-list{display:grid;gap:8px}.space-compact{border:1px solid var(--line,#d6e5e7);border-radius:14px;background:#fff}.space-compact summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}.space-compact summary::-webkit-details-marker{display:none}.space-compact summary span{font-size:.9rem;color:var(--muted,#687b7d);text-align:right}.space-compact-details{padding:0 14px 14px}.space-compact-details p{margin:0 0 10px;color:var(--muted,#687b7d)}@media(max-width:480px){.space-compact summary{align-items:flex-start;flex-direction:column;gap:3px}.space-compact summary span{text-align:left}}

/* Flat compact property-space list */
.space-flat-list{display:grid;gap:8px}.space-flat-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line,#d6e5e7);border-radius:14px;background:#fff}.space-flat-copy{min-width:0;display:flex;flex-direction:column;gap:2px}.space-flat-copy strong{font-size:1rem;line-height:1.2}.space-flat-copy span{font-size:.9rem;line-height:1.25;color:var(--muted,#687b7d)}.space-flat-actions{display:flex;gap:7px;flex-shrink:0}@media(max-width:480px){.space-flat-item{align-items:flex-start}.space-flat-actions{gap:5px}.space-flat-actions .mini-button{padding:7px 10px}}

/* Compact job progress: dock directly below the sticky site header */
.job-progress{top:var(--cleanhut-header-height,76px);margin:0 0 18px;padding:8px 12px;border-radius:0 0 12px 12px;box-shadow:0 4px 12px rgba(24,85,89,.06)}
.job-progress-head{margin-bottom:5px;font-size:14px;line-height:1.2}.job-progress-track{height:5px}
@media(max-width:680px){.job-progress{top:var(--cleanhut-header-height,118px);padding:7px 10px;margin-bottom:14px}.job-progress-head{font-size:13px}.job-progress-track{height:4px}}

/* Keep the compact job progress flush against the sticky header */
@media(max-width:680px){.job-progress{top:var(--cleanhut-header-height,117px);transform:translateY(-1px)}}

/* Job builder progress lives inside the existing sticky header */
.request-header-right{display:flex;align-items:center;gap:14px;margin-left:auto}.header-job-progress{position:static!important;transform:none!important;margin:0!important;padding:5px 9px!important;width:220px;min-width:180px;border-radius:10px;box-shadow:none}.header-job-progress .job-progress-head{margin-bottom:3px;font-size:12px;line-height:1.1}.header-job-progress .job-progress-track{height:4px}
@media(max-width:680px){.request-header-right{gap:8px}.header-job-progress{width:150px;min-width:0;padding:4px 7px!important}.header-job-progress .job-progress-head{font-size:10px;gap:5px}.header-job-progress .job-progress-track{height:3px}}

/* Request page: progress is a full-width second row inside the existing header */
.request-header-right{display:contents}.header-job-progress{order:3;flex:0 0 100%;width:calc(100% - 32px)!important;max-width:none;margin:0 16px 8px!important;padding:7px 12px!important;border-radius:10px}.header-job-progress .job-progress-head{font-size:13px;line-height:1.15;margin-bottom:4px}.header-job-progress .job-progress-track{height:5px}.site-header .header-inner:has(.header-job-progress){flex-wrap:wrap}.site-header .header-inner:has(.header-job-progress) .nav-links{margin-left:auto}
@media(max-width:680px){.header-job-progress{width:calc(100% - 24px)!important;margin:0 12px 7px!important;padding:6px 10px!important}.header-job-progress .job-progress-head{font-size:12px}.header-job-progress .job-progress-track{height:4px}}

/* Job builder only: slightly taller header to comfortably contain progress row */
.site-header .header-inner:has(.header-job-progress){padding-top:12px;padding-bottom:9px}
@media(max-width:680px){.site-header .header-inner:has(.header-job-progress){padding-top:10px;padding-bottom:7px}}

/* request-clean only: progress is physically part of the original site header */
.site-header:has(.header-job-progress){height:auto!important;min-height:0!important}
.site-header:has(.header-job-progress) .nav{display:grid!important;grid-template-columns:auto 1fr auto!important;grid-template-rows:auto auto!important;align-items:center!important;padding-bottom:8px!important}
.site-header:has(.header-job-progress) .nav>a:first-child{grid-column:1;grid-row:1}
.site-header:has(.header-job-progress) .request-header-right{display:contents!important}
.site-header:has(.header-job-progress) .nav-links{grid-column:3;grid-row:1;margin-left:0!important}
.site-header:has(.header-job-progress) .header-job-progress{grid-column:1 / -1;grid-row:2;position:static!important;width:100%!important;max-width:none!important;min-width:0!important;margin:5px 0 0!important;padding:5px 4px 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}
.site-header:has(.header-job-progress) .header-job-progress .job-progress-head{font-size:13px!important;margin-bottom:4px!important}.site-header:has(.header-job-progress) .header-job-progress .job-progress-track{height:5px!important}
@media(max-width:680px){.site-header:has(.header-job-progress) .nav{grid-template-columns:118px 1fr auto!important;padding:8px 12px 7px!important}.site-header:has(.header-job-progress) .header-job-progress{margin-top:4px!important;padding:4px 0 0!important}.site-header:has(.header-job-progress) .header-job-progress .job-progress-head{font-size:12px!important}}

/* Final request-clean header layout: keep progress visibly inside white header */
.site-header:has(.header-job-progress){background:#fff!important;border-bottom:1px solid var(--line)!important;padding-bottom:0!important}
.site-header:has(.header-job-progress) .nav{background:#fff!important;row-gap:0!important}
.site-header:has(.header-job-progress) .header-job-progress{box-sizing:border-box!important;background:#fff!important;padding:7px 0 8px!important;margin:0!important;border:0!important}
.site-header:has(.header-job-progress) .header-job-progress .job-progress-head{padding:0 2px!important;margin:0 0 4px!important}
.site-header:has(.header-job-progress) .header-job-progress .job-progress-track{width:100%!important}
@media(max-width:680px){.site-header:has(.header-job-progress) .nav{padding-bottom:0!important}.site-header:has(.header-job-progress) .header-job-progress{padding:6px 0 8px!important}}

/* Polish request-clean header progress spacing/alignment */
.site-header:has(.header-job-progress) .header-job-progress{padding:10px 0 12px!important}
.site-header:has(.header-job-progress) .header-job-progress .job-progress-head{padding:0!important;margin-bottom:6px!important;font-size:13px!important;line-height:1.2!important}
.site-header:has(.header-job-progress) .header-job-progress .job-progress-track{height:6px!important}
@media(max-width:680px){.site-header:has(.header-job-progress) .nav{padding-left:24px!important;padding-right:24px!important}.site-header:has(.header-job-progress) .header-job-progress{padding:9px 0 11px!important}.site-header:has(.header-job-progress) .header-job-progress .job-progress-track{height:5px!important}}

/* Fix mobile header height override for request-clean: progress must be inside header box */
@media(max-width:680px){body:has(.header-job-progress) .site-header{height:150px!important;min-height:150px!important;background:#fff!important}body:has(.header-job-progress) .site-header .nav{height:150px!important;min-height:150px!important;box-sizing:border-box!important;grid-template-rows:100px 42px!important}body:has(.header-job-progress) .header-job-progress{align-self:end!important;padding:5px 0 8px!important}}

/* Request-clean header: keep progress directly beneath logo/menu row */
@media(max-width:680px){body:has(.header-job-progress) .site-header{height:auto!important;min-height:0!important}body:has(.header-job-progress) .site-header .nav{height:auto!important;min-height:0!important;grid-template-rows:76px auto!important;padding-top:0!important;padding-bottom:0!important}body:has(.header-job-progress) .header-job-progress{margin-top:0!important;padding-top:0!important;padding-bottom:8px!important}}

/* Request-clean: pull progress flush beneath logo/menu row */
@media(max-width:680px){body:has(.header-job-progress) .header-job-progress{transform:translateY(-14px)!important;margin-bottom:-14px!important}}

/* Request-clean compact mobile header */
@media(max-width:680px){body:has(.header-job-progress) .site-header .nav{grid-template-rows:64px auto!important}body:has(.header-job-progress) .site-header .brand img{max-height:52px!important}body:has(.header-job-progress) .header-job-progress{transform:translateY(-22px)!important;margin-bottom:-22px!important;padding-bottom:4px!important}}

/* Final compacting of request-clean mobile header */
@media(max-width:680px){body:has(.header-job-progress) .site-header .nav{grid-template-rows:58px auto!important}body:has(.header-job-progress) .header-job-progress{transform:translateY(-30px)!important;margin-bottom:-30px!important}}

/* Request-clean: remove remaining header row gap rather than visually shifting progress */
@media(max-width:680px){body:has(.header-job-progress) .site-header .nav{grid-template-rows:46px auto!important;row-gap:0!important}body:has(.header-job-progress) .header-job-progress{transform:translateY(-38px)!important;margin-bottom:-38px!important}}


/* Job builder: keep saved area photo previews compact */
.saved-room-photos{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.saved-room-photo{display:grid;grid-template-columns:90px minmax(0,1fr) 40px;align-items:center;gap:10px;width:100%;max-width:430px}
.saved-room-photo img{display:block;width:90px!important;height:90px!important;max-width:90px!important;max-height:90px!important;object-fit:cover;border-radius:10px}
.saved-room-photo span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-room-photo button{width:40px;height:40px;padding:0;border:0;border-radius:50%;font-size:22px;line-height:1;cursor:pointer}
@media(max-width:680px){.saved-room-photo{grid-template-columns:76px minmax(0,1fr) 38px}.saved-room-photo img{width:76px!important;height:76px!important;max-width:76px!important;max-height:76px!important}}


/* Shared authenticated notification bell */
.global-notification-button{position:relative;width:46px;height:46px;border:1px solid #d7e5e5;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:7px;flex:0 0 46px;margin-right:8px}
.global-notification-button svg{width:27px;height:27px;display:block}
/* Shared text sizing for every language. Preserve the existing page grid. */
.button,.mini-button,.status,.room-status,.photo-count{white-space:normal;overflow-wrap:anywhere;max-width:100%;height:auto}
.saved-room-photo span{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
:where(.surface,.form-shell,.list-item,.room-card,.review-area,.quote-card,.field,.field-grid,.option-grid,.area-group,.money-row)>*{min-width:0}
:where(.surface,.form-shell,.room-card,.review-area,.quote-card,.list-item,.form-message,.privacy-box,.data-note){overflow-wrap:anywhere}
:where(.button,.mini-button,.nav-links a,.option,.compact-choice,.room-status,.status,.photo-count,[data-area-toggle-hint]){white-space:normal;overflow-wrap:anywhere;max-width:100%;box-sizing:border-box}
:where(.button,.mini-button){height:auto;min-height:44px;line-height:1.3;text-align:center}
:where(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
:where(.field-grid,.option-grid,.area-cards){min-width:0}
.room-card-title{min-width:0;max-width:100%;height:auto}
.room-card-title h3,.room-card-title .room-status{min-width:0;white-space:normal;overflow-wrap:anywhere}
.room-card-title [data-area-toggle-hint]{white-space:normal;overflow-wrap:anywhere;min-width:0}
.quote-actions,.area-group-head,.money-row{flex-wrap:wrap}
.space-flat-actions{flex-wrap:wrap;max-width:50%;justify-content:flex-end}
.area-counter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.area-counter>span{min-width:0;overflow-wrap:anywhere}.area-counter>div{flex-shrink:0}
.site-header .app-nav>a,.site-header .app-nav>.button,.home-page .site-header .login-button,body:not(.benefits-page) .site-header .nav:not(:has(.app-menu-button)) .button{white-space:normal!important;min-width:0!important;overflow-wrap:anywhere!important}
html:not([lang="en"]) .hero h1{white-space:normal!important;overflow-wrap:anywhere!important}

/* Rendered QA: earnings copy must not squeeze the payout action at tablet widths. */
#earningsPanel > .list-item{flex-wrap:wrap}
#earningsPanel > .list-item > div{flex:1 1 22rem;min-width:0}
#requestPayoutButton{flex:0 1 auto;min-width:min(100%,12rem)}
/* The preview's inline display:block must not expose an empty image before selection. */
#profilePhotoPreview[hidden]{display:none!important}

/* Translated public navigation needs the compact header before tablet links
   are squeezed into narrow columns. Keep the existing mobile actions. */
@media(max-width:980px){
 .home-page .site-header .nav-links > a:not(.login-button){display:none!important}
}
@media(max-width:680px){
 .home-page .site-header .nav{grid-template-columns:96px minmax(0,1fr)!important}
 .home-page .site-header .brand-link,
 .home-page .site-header .brand-link .logo{width:96px!important;min-width:96px!important;max-width:96px!important}
 body.home-page .site-header .nav:not(:has(.app-menu-button)) .nav-links{width:100%!important;min-width:0!important;gap:6px!important;flex:1 1 auto!important}
 body.home-page .site-header .nav:not(:has(.app-menu-button)) .language-select{width:auto!important;min-width:76px!important;max-width:108px!important;flex:1 1 96px!important;padding:0 22px 0 6px!important}
 body.home-page .site-header .nav:not(:has(.app-menu-button)) .login-button{flex:0 1 106px!important;min-width:0!important;max-width:106px!important}
}
@media(max-width:680px){.area-counter-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.list-item{flex-wrap:wrap}.list-item>div{min-width:0;max-width:100%}.room-card-title{column-gap:8px!important}.room-card-title [data-area-toggle-hint]{max-width:80px!important;padding:8px!important}.space-flat-item{flex-wrap:wrap}.space-flat-actions{max-width:100%}.form-shell,.surface,.room-card,.quote-card{min-width:0}.header-job-progress .job-progress-head{flex-wrap:wrap}}
@media(max-width:680px){.global-notification-button{width:42px;height:42px;flex-basis:42px;border-radius:9px;padding:6px;margin-right:6px}.global-notification-button svg{width:24px;height:24px}.app-nav>.global-notification-button{display:inline-flex;vertical-align:middle}}



/* Request booking only: keep the sticky mobile header compact without moving the progress bar out of flow. */
@media (max-width:680px){
 body:has(#cleaningRequestForm) .site-header{height:auto!important;min-height:0!important;padding-top:0!important;margin-top:0!important}
 body:has(#cleaningRequestForm) .site-header .nav{height:auto!important;min-height:0!important;grid-template-rows:auto auto!important;align-items:center!important;row-gap:0!important;padding-top:8px!important;padding-bottom:0!important}
 body:has(#cleaningRequestForm) .site-header .nav>a:first-child{align-self:center!important}
 body:has(#cleaningRequestForm) .site-header .header-job-progress{transform:none!important;margin:0!important;align-self:auto!important;padding:6px 0 9px!important}
}

/* Keep verification expiry inputs inside narrow mobile cards. */
#verificationExpiry, #verificationExpiry:disabled { box-sizing:border-box; width:100%; max-width:100%; min-width:0; }
#verificationForm .field, #verificationForm .field-grid { min-width:0; }