/* Roomier desktop layout and a shared, gentle interaction response. */
:root {
  --web-shadow: 0 3px 8px rgba(33, 37, 43, .025), 0 12px 28px -12px rgba(33, 37, 43, .13);
  --surface-hover: 0 0 0 1px rgba(242, 106, 22, .24), 0 8px 20px -8px rgba(33, 37, 43, .14), 0 24px 44px -16px rgba(33, 37, 43, .25);
  --surface-pressed: inset 0 2px 4px rgba(33, 37, 43, .045), 0 2px 6px rgba(33, 37, 43, .035);
  --interaction-ease: cubic-bezier(.22, .75, .25, 1);
}

.site-header .header-actions { margin-left: auto; padding-left: 0; border-left: 0; }

@media (min-width: 1001px) {
  .site-header .header-inner,
  #customer-page .container,
  #customer-page .web-home,
  body[data-page="customer"] .site-footer .container {
    width: min(1600px, calc(100% - 96px));
  }
  .site-header .header-inner { height: 88px; }
  #customer-page .web-home { padding-top: 42px; padding-bottom: 48px; }
  .web-intro { margin-bottom: 32px; gap: 32px; }
  .web-intro h1 { font-size: clamp(2rem, 2.5vw, 2.625rem); line-height: 1.3; }
  .web-home-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  .web-service-grid { gap: 20px; }
  #home-activity.web-panel { padding: 26px 22px 20px; }
}

@media (min-width: 1280px) {
  .web-home-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .web-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #customer-page .web-service { min-height: 330px; padding: 26px 24px; }
  #customer-page .web-service--repair { grid-column: auto; }
  #customer-page .web-service--repair > img { inset: 0; width: 100%; object-position: 46% 70%; }
  #customer-page .web-service--repair::before {
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.96) 28%, rgba(255,255,255,.35) 53%, transparent 80%);
  }
  #customer-page .web-service--repair p { max-width: 100%; }
  .web-leak { margin-top: 20px; }
  .app-preview-card { margin-top: 20px; }
}

/* Resting surfaces stay light; depth increases when a control is approached. */
#customer-page .web-service {
  --home-hover-scale: 1.04;
  --home-hover-lift: -8px;
}
#customer-page :is(.web-service, .web-leak, .app-preview-card, .web-partner-banner, .app-feature-strip a) {
  box-shadow: var(--web-shadow);
  transition: translate 260ms var(--interaction-ease), scale 220ms var(--interaction-ease), box-shadow 260ms var(--interaction-ease), border-color 220ms ease, background-color 220ms ease;
}

body :is(button, .header-brand, .header-action, .web-shortcuts a, .account-nav a, .activity-tabs a, .partner-type, .web-bottom-nav a, .web-menu a, .app-store, .auth-browse, .app-intro-links a, .web-home-tools a, .service-guide-links a, .request-button) {
  transition: translate 240ms var(--interaction-ease), scale 200ms var(--interaction-ease), box-shadow 240ms var(--interaction-ease), border-color 220ms ease, background-color 220ms ease, color 180ms ease;
}

.web-service-action,
.web-service-action .web-icon,
.web-leak-action .web-icon,
.web-partner-action .web-icon,
.app-intro-links .web-icon {
  transition: translate 260ms var(--interaction-ease), background-color 220ms ease, border-color 220ms ease;
}

#customer-page :is(.web-service, .web-leak, .app-preview-card, .web-partner-banner, .app-feature-strip a):focus-visible {
  translate: 0 var(--home-hover-lift, -4px);
  scale: var(--home-hover-scale, 1.012);
  z-index: 2;
  border-color: #f26a16;
  box-shadow: var(--surface-hover);
}

@media (hover: hover) and (pointer: fine) {
  #customer-page :is(.web-service, .web-leak, .app-preview-card, .web-partner-banner, .app-feature-strip a):hover {
    translate: 0 var(--home-hover-lift, -4px);
    scale: var(--home-hover-scale, 1.012);
    z-index: 2;
    border-color: #f26a16;
    box-shadow: var(--surface-hover);
  }
  body :is(button, .header-action, .web-shortcuts a, .partner-type, .app-store, .auth-browse, .web-home-tools a, .request-button):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -2px;
    box-shadow: 0 6px 14px -6px rgba(40, 35, 30, .18);
  }
  .web-service:hover .web-service-action .web-icon,
  .web-leak:hover .web-leak-action .web-icon,
  .web-partner-banner:hover .web-partner-action .web-icon,
  .app-intro-links a:hover .web-icon { translate: 3px 0; }
}

/* Touch and mouse presses use the same short, tactile response. */
#customer-page :is(.web-service, .web-leak, .app-preview-card, .web-partner-banner, .app-feature-strip a):active {
  translate: 0 1px;
  scale: .985;
  box-shadow: var(--surface-pressed);
  transition-duration: 100ms;
}
body :is(button, .header-brand, .header-action, .web-shortcuts a, .account-nav a, .activity-tabs a, .partner-type, .web-bottom-nav a, .web-menu a, .app-store, .auth-browse, .app-intro-links a, .web-home-tools a, .service-guide-links a, .request-button):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 1px;
  scale: .975;
  box-shadow: var(--surface-pressed);
  transition-duration: 100ms;
}

.request-page :is(.request-option, .request-space-card, .request-process-card, .request-level-card, .request-trade)[aria-pressed="true"] {
  border-color: #ed884b;
  background: #fff7f0;
  box-shadow: inset 0 0 0 1px rgba(242, 106, 22, .12), 0 5px 14px -7px rgba(175, 83, 27, .24);
}
.account-nav a[aria-current="page"],
.activity-tabs a[aria-current="page"] {
  background: #fff5ed;
  box-shadow: inset 0 1px 3px rgba(175, 83, 27, .07);
}
.web-bottom-nav a { border-radius: 12px; }
.web-bottom-nav a[aria-current="page"] { background: #fff5ed; }

/* Fade a newly opened page without delaying navigation or moving sticky controls. */
#main > :not([hidden]) { animation: surface-enter 240ms ease-out; }
@keyframes surface-enter { from { opacity: .35; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  #main > :not([hidden]) { animation: none; }
  body :is(button, a, .web-service-action, .web-icon) {
    transition: none !important;
    translate: none !important;
    scale: none !important;
  }
}