/*
 * Final mobile cascade for the H2O rebuild.
 *
 * This file intentionally loads after both the legacy hardening layer and the
 * Austin premium system. It is the single mobile source of truth shared by the
 * generated pages and the imported premium handoff pages.
 */

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

/* The flagship homepage is an imported composition rather than a .h2o-site
   page, so its hero needs an explicit mid-width rule of its own. */
@media (max-width: 1200px) {
  [data-screen-label="Hero"] h1 {
    max-width: 880px;
    font-size: clamp(58px, 8.2vw, 94px) !important;
    line-height: .94 !important;
  }

  [data-screen-label="Hero"] h1 > span {
    display: block !important;
  }
}

button,
a,
input,
select,
textarea,
summary {
  touch-action: manipulation;
}

img {
  max-width: 100%;
}

@media (hover: none) {
  .plumbing-service-card:hover,
  .fire-cluster-card:hover,
  .fire-related-card:hover,
  .remodel-lane-card:hover,
  .town-card:hover {
    transform: none;
  }
}

@media (max-width: 767px) {
  :root {
    --h2o-mobile-gutter: 16px;
    --h2o-mobile-header: 64px;
    --h2o-mobile-action: 64px;
  }

  body.h2o-site {
    padding-bottom: calc(var(--h2o-mobile-action) + env(safe-area-inset-bottom)) !important;
    font-size: 16px;
  }

  [data-screen-label="Hero"] > div:nth-of-type(2) {
    min-height: 640px !important;
  }

  [data-screen-label="Hero"] > div:nth-of-type(2) > div {
    width: 100%;
    padding: 64px var(--h2o-mobile-gutter) !important;
  }

  [data-screen-label="Hero"] h1 {
    max-width: 100%;
    font-size: clamp(50px, 14vw, 70px) !important;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  [data-screen-label="Hero"] h1 > span {
    -webkit-text-stroke-width: 1px !important;
  }

  body.h2o-site.nav-open {
    overflow: hidden;
  }

  .h2o-site .premium-shell,
  .h2o-site .site-container {
    width: calc(100% - (var(--h2o-mobile-gutter) * 2)) !important;
  }

  .h2o-site h1,
  .fire-detail-page .fire-hero h1,
  .remodel-detail-page .remodel-hero h1,
  .plumbing-town-page .plumbing-town-hero h1 {
    max-width: 100%;
    font-size: clamp(45px, 13.5vw, 64px) !important;
    line-height: .96;
    overflow-wrap: anywhere;
  }

  .h2o-site h2 {
    font-size: clamp(36px, 10.8vw, 52px) !important;
    line-height: 1;
  }

  .h2o-site h3 {
    font-size: clamp(23px, 7vw, 30px);
  }

  .h2o-site .lead {
    font-size: 16.5px;
    line-height: 1.65;
  }

  .h2o-site .eyebrow {
    gap: 10px;
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: .15em;
  }

  .h2o-site .eyebrow::before {
    width: 30px;
  }

  .h2o-site .section {
    padding: 64px 0 !important;
  }

  .premium-header,
  .premium-header.is-scrolled {
    position: sticky;
    top: 0;
    height: var(--h2o-mobile-header) !important;
    background: rgba(10, 23, 32, .985);
  }

  .premium-header .header-inner {
    width: calc(100% - 32px) !important;
    gap: 10px;
  }

  .premium-header .site-brand,
  .premium-header .site-brand img {
    width: 132px !important;
    flex-basis: 132px !important;
  }

  .premium-header .menu-toggle {
    display: inline-grid;
    width: 44px;
    height: 44px;
    padding: 8px;
    place-items: center;
  }

  .premium-header .site-nav {
    top: var(--h2o-mobile-header) !important;
    overflow-y: auto;
    padding: 18px 20px calc(100px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }

  .premium-header .site-nav > a,
  .premium-header .nav-dd > a {
    min-height: 54px;
    padding: 18px 0 !important;
    font-family: "Anton", sans-serif;
    font-size: 24px !important;
    font-weight: 400;
    letter-spacing: 0;
  }

  .premium-header .nav-dd .ddi {
    padding: 4px 0 14px;
  }

  .premium-header .nav-dd .ddi a {
    min-height: 46px;
    padding: 13px 0;
    font-size: 12px;
  }

  .premium-header .nav-contact {
    margin-top: 18px;
  }

  .page-hero .hero-grid,
  .fire-detail-page .fire-hero .hero-grid,
  .remodel-detail-page .remodel-hero .hero-grid,
  .plumbing-town-page .plumbing-town-hero .hero-grid {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
  }

  .page-hero-copy,
  .fire-detail-page .fire-hero .page-hero-copy,
  .remodel-detail-page .remodel-hero .page-hero-copy,
  .plumbing-town-page .plumbing-town-hero .page-hero-copy {
    padding: 52px 0 36px !important;
  }

  .page-hero-copy .lead {
    margin-top: 22px;
  }

  .action-row {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 28px;
  }

  .premium-button,
  .premium-text-link,
  .premium-arrow-button {
    width: 100%;
    min-height: 52px;
    justify-content: center;
  }

  .hero-media,
  .fire-detail-page .fire-hero .hero-media,
  .remodel-detail-page .remodel-hero .hero-media,
  .plumbing-town-page .plumbing-town-hero .hero-media {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    margin: 0 0 42px !important;
  }

  .hero-media::after {
    inset: 9px -9px -9px 9px;
  }

  .hero-badge {
    right: 0;
    bottom: 0;
    left: 0;
    max-width: none;
    padding: 13px 15px;
    font-size: 9px;
  }

  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .trust-grid > div,
  .trust-grid > div:nth-child(2),
  .trust-grid > div:last-child {
    min-height: 88px;
    grid-template-columns: 26px 1fr;
    padding: 14px 10px;
    border-right: 1px solid var(--h2o-light-line);
    border-bottom: 1px solid var(--h2o-light-line);
  }

  .trust-grid > div:nth-child(even) {
    border-right: 0;
  }

  .trust-grid span {
    font-size: 9px;
    line-height: 1.55;
    letter-spacing: .08em;
  }

  .section-heading,
  .proof-band-grid,
  .split-grid,
  .photo-frame,
  .fire-editorial-grid,
  .fire-authority-grid,
  .remodel-intro-grid,
  .remodel-proof-grid,
  .remodel-feature-grid,
  .remodel-authority-grid,
  .plumbing-town-intro-grid,
  .plumbing-field-grid,
  .plumbing-property-grid,
  .plumbing-authority-grid,
  .plumbing-leak-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .feature-grid,
  .process-grid,
  .scope-grid,
  .town-grid,
  .fire-cluster-grid,
  .fire-signal-grid,
  .fire-process-grid,
  .fire-related-grid,
  .remodel-lane-grid,
  .remodel-cost-grid,
  .remodel-process-grid,
  .remodel-related-grid,
  .remodel-check-grid,
  .plumbing-service-grid,
  .plumbing-local-grid,
  .plumbing-process-grid,
  .plumbing-property-chips {
    grid-template-columns: 1fr !important;
  }

  .feature-item,
  .process-step,
  .fire-signal-card,
  .fire-process-card,
  .remodel-process-grid article,
  .remodel-related-grid a,
  .plumbing-service-card,
  .plumbing-local-card,
  .plumbing-process-grid article {
    min-height: 0 !important;
    padding: 24px 20px;
  }

  .feature-item h3,
  .process-step h3,
  .fire-signal-card h3,
  .fire-process-card h3,
  .remodel-process-grid h3,
  .remodel-related-grid h3,
  .plumbing-service-card h3,
  .plumbing-local-card h3,
  .plumbing-process-grid h3 {
    margin-top: 34px !important;
  }

  .fire-editorial-image,
  .remodel-feature-grid figure,
  .plumbing-field-grid figure {
    min-height: 360px !important;
  }

  .plumbing-leak-grid > div {
    min-height: 0 !important;
    padding: 64px 16px !important;
  }

  .plumbing-leak-grid figure {
    min-height: 400px !important;
  }

  .remodel-wide-image {
    min-height: 520px !important;
  }

  .fire-scope-row,
  .remodel-scope-list article {
    grid-template-columns: 38px 1fr !important;
    gap: 14px !important;
    padding: 22px 0;
  }

  .fire-scope-row p,
  .remodel-scope-list article p {
    grid-column: 2;
  }

  .faq-list summary {
    min-height: 58px;
    padding: 18px 2px;
    font-size: 19px;
    line-height: 1.15;
  }

  .faq-list details p {
    margin-left: 30px;
    padding-bottom: 4px;
    font-size: 14.5px;
  }

  .chip {
    min-height: 44px;
    align-items: center;
    padding: 10px 12px;
    font-size: 9.5px;
    line-height: 1.3;
  }

  .fire-support-links,
  .remodel-support-links,
  .plumbing-support-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .premium-footer {
    padding-bottom: 34px;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 34px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .mobile-cta {
    position: fixed;
    z-index: 1400;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid !important;
    width: 100%;
    height: auto !important;
    min-height: var(--h2o-mobile-action);
    grid-template-columns: .8fr 1.35fr .8fr !important;
    gap: 0 !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(241, 237, 227, .15);
    background: rgba(10, 23, 32, .985);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .22);
  }

  .mobile-cta a {
    min-width: 0;
    min-height: 52px !important;
    padding: 7px 4px;
    border: 0 !important;
    border-radius: 0 !important;
    font: 600 10px/1 "IBM Plex Mono", monospace !important;
    letter-spacing: .04em;
  }

  .mobile-cta a + a {
    border-left: 1px solid rgba(241, 237, 227, .14) !important;
  }

  .mobile-cta-primary {
    background: var(--h2o-gold, #e8b54b) !important;
    color: var(--h2o-navy, #0a1720) !important;
  }

  body.nav-open .mobile-cta,
  body.h2o-form-focus .mobile-cta,
  body:has(input:focus, select:focus, textarea:focus) .mobile-cta {
    transform: translateY(120%);
  }

  [data-reveal] {
    transition-delay: 0ms !important;
  }
}

/* Imported premium handoff pages */

@media (max-width: 767px) {
  html,
  body,
  x-dc,
  #h2o-page-content {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  [data-screen-label] {
    width: 100%;
    max-width: 100%;
  }

  [data-screen-label] *,
  [data-screen-label] *::before,
  [data-screen-label] *::after {
    min-width: 0;
  }

  [data-screen-label] > header {
    min-height: 64px;
    padding: 12px 16px !important;
  }

  [data-screen-label] > header img {
    height: 38px !important;
  }

  [data-screen-label] [style*="padding:clamp("] {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  /*
   * Imported handoff pages carry layout declarations inline. Browsers
   * canonicalize those declarations (adding spaces and leading zeroes), so
   * exact attribute-string selectors are unreliable. Collapse every content
   * grid on phones, then restore the deliberate numbered process layout.
   */
  [data-screen-label]:not([data-screen-label="Compare"]) [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  [data-screen-label] [style*="80px 1fr"] {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  [data-screen-label] [style*="80px 1fr"] > :nth-child(3) {
    grid-column: 2;
  }

  [data-screen-label] [style*="80px 1fr"] > :last-child {
    display: none;
  }

  [data-screen-label] h1 {
    font-size: clamp(44px, 13vw, 62px) !important;
    line-height: .96 !important;
    overflow-wrap: anywhere;
  }

  [data-screen-label] h2 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .town-card-media {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .town-card-media img {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 100% !important;
    object-fit: cover;
  }
}

/* Mobile-first premium schedule flow */

.schedule-field {
  min-width: 0;
}

.schedule-input-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(16, 32, 43, .72);
  font: 600 10px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.schedule-required {
  display: inline-block;
  margin-left: 3px;
  color: #c8912e;
  font: 700 16px/1 "IBM Plex Mono", monospace;
  vertical-align: .42em;
}

.schedule-section-heading {
  align-items: center !important;
  gap: 18px !important;
}

.schedule-section-number {
  flex: none;
  min-width: 44px;
  color: #10202b;
  font: 400 42px/.86 "Anton", sans-serif;
  letter-spacing: -.02em;
}

.schedule-section-title {
  font-size: 32px !important;
  line-height: 1 !important;
}

.schedule-service-rate {
  display: block;
  margin-top: auto;
  color: #e8b54b;
  font: 700 10px/1.35 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.schedule-premium-main {
  width: 100%;
  max-width: 1180px !important;
  box-sizing: border-box;
}

/* The design runtime sizes these wrappers to the initial viewport. Let the
   schedule form establish their height so expanded property fields push the
   following FAQ section down instead of overflowing beneath it. */
body.schedule-premium-page #dc-root,
body.schedule-premium-page #dc-root > .sc-host {
  height: auto;
  min-height: 100vh;
}

.schedule-premium-main section {
  margin-top: 36px !important;
}

.schedule-premium-main section:first-of-type {
  margin-top: 0 !important;
}

.schedule-premium-main section > div:first-child {
  margin-bottom: 18px !important;
}

.schedule-service-options {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.schedule-service-options button {
  min-width: 0;
  min-height: 112px;
  padding: 16px 14px !important;
}

.schedule-service-options button > span:nth-child(2) {
  font-size: 15.5px !important;
  white-space: nowrap;
}

.schedule-property-options {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
}

.schedule-property-options button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 13px 14px !important;
}

.schedule-contact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px 24px !important;
}

.schedule-contact-grid .schedule-field input,
.schedule-contact-grid .schedule-field textarea,
.schedule-address-block input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-bottom-color: rgba(16, 32, 43, .38) !important;
}

.schedule-contact-grid .schedule-field input {
  min-height: 46px;
}

.schedule-contact-grid .schedule-field input:focus,
.schedule-contact-grid .schedule-field textarea:focus,
.schedule-address-block input:focus {
  border-bottom: 2px solid #e8b54b !important;
}

.schedule-contact-grid .schedule-notes-field {
  grid-column: 1 / -1;
}

.schedule-contact-grid .schedule-notes-field textarea {
  min-height: 66px;
}

.schedule-submit-row {
  margin-top: 32px !important;
}

.schedule-submit-row > span:empty {
  display: none;
}

.schedule-context-panel {
  margin-top: 26px !important;
  padding: 22px 0 0 !important;
  border: 0;
  border-top: 1px solid rgba(16, 32, 43, .18);
  background: transparent;
}

.schedule-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin-top: 0;
}

.schedule-context-grid .schedule-field-full {
  grid-column: 1 / -1;
}

.schedule-context-grid .schedule-field input,
.schedule-context-grid .schedule-field textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid rgba(16, 32, 43, .28);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #10202b;
  font: 500 16px/1.5 "Archivo", sans-serif;
}

.schedule-context-grid .schedule-field textarea {
  min-height: 72px;
  resize: vertical;
}

.schedule-context-grid .schedule-field input:focus,
.schedule-context-grid .schedule-field textarea:focus {
  border-bottom: 2px solid #e8b54b;
}

@media (max-width: 860px) {
  body.schedule-premium-page {
    padding-bottom: 0 !important;
    background: #f1ede3;
  }

  .schedule-premium-layout {
    display: block !important;
    min-height: 100svh !important;
  }

  .schedule-premium-rail {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 20px 28px !important;
  }

  .schedule-premium-rail > a:first-child img {
    height: 38px !important;
  }

  .schedule-premium-rail > a:nth-child(2) {
    margin-top: 22px !important;
  }

  .schedule-premium-rail h1 {
    margin-top: 16px !important;
    font-size: clamp(42px, 12.5vw, 56px) !important;
  }

  .schedule-premium-rail > p {
    max-width: 520px !important;
    margin-top: 14px !important;
  }

  .schedule-premium-rail > div {
    margin-top: 24px !important;
    padding-top: 18px !important;
  }

  .schedule-premium-rail > div:last-child {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px 18px;
  }

  .schedule-premium-rail > div:last-child > span:first-child {
    grid-column: 1;
  }

  .schedule-premium-rail > div:last-child > a {
    grid-row: 1 / 3;
    grid-column: 2;
    margin-top: 0 !important;
    font-size: 24px !important;
  }

  .schedule-premium-rail > div:last-child > span:last-child {
    grid-column: 1;
    margin-top: 0 !important;
  }

  .schedule-premium-main {
    width: 100%;
    max-width: none !important;
    padding: 34px 20px 80px !important;
  }

  .schedule-premium-main section {
    margin-top: 34px !important;
  }

  .schedule-premium-main section:first-of-type {
    margin-top: 0 !important;
  }

  .schedule-premium-main section h2 {
    font-size: 27px !important;
    line-height: 1.05;
  }

  .schedule-section-number {
    min-width: 38px;
    font-size: 36px;
  }

  .schedule-section-title {
    font-size: 29px !important;
  }

  .schedule-service-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .schedule-service-options button {
    min-height: 96px;
    padding: 16px !important;
  }

  .schedule-property-options button {
    min-height: 48px;
    padding: 13px 16px !important;
  }

  .schedule-address-block {
    margin-top: 22px !important;
  }

  .schedule-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .schedule-context-panel {
    margin: 24px 0 0 !important;
    padding: 20px 0 0 !important;
  }

  .schedule-context-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 20px;
  }

  .schedule-field {
    min-width: 0;
  }

  .schedule-field-full {
    grid-column: auto !important;
  }

  .schedule-contact-grid .schedule-notes-field {
    grid-column: auto;
  }

  .schedule-input-label {
    display: block;
    margin-bottom: 6px;
    color: rgba(16, 32, 43, .62);
    font: 600 10px/1.4 "IBM Plex Mono", monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .schedule-field input,
  .schedule-field textarea,
  .schedule-address-block input {
    width: 100%;
    min-height: 50px;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  .schedule-field textarea {
    min-height: 118px;
  }

  .schedule-submit-row {
    position: sticky;
    z-index: 15;
    bottom: 0;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    margin: 34px -20px -80px !important;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(16, 32, 43, .16);
    background: rgba(241, 237, 227, .97);
    box-shadow: 0 -12px 30px rgba(10, 23, 32, .1);
    backdrop-filter: blur(14px);
  }

  .schedule-submit-button {
    width: 100%;
    min-height: 54px;
    justify-content: center;
  }

  .schedule-submit-row > span {
    text-align: center;
  }

  body.schedule-premium-page:has(input:focus, textarea:focus) .schedule-submit-row {
    position: static;
    margin-bottom: 0 !important;
    box-shadow: none;
  }

  .schedule-success {
    min-height: 60svh !important;
  }
}

@media (max-width: 600px) {
  .schedule-property-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-property-options button:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .h2o-site h1,
  .fire-detail-page .fire-hero h1,
  .remodel-detail-page .remodel-hero h1,
  .plumbing-town-page .plumbing-town-hero h1 {
    font-size: clamp(42px, 13vw, 52px) !important;
  }

  .schedule-service-options {
    grid-template-columns: 1fr !important;
  }

  .schedule-service-options button {
    min-height: 0;
  }

  .schedule-premium-rail > div:last-child {
    grid-template-columns: 1fr;
  }

  .schedule-premium-rail > div:last-child > a {
    grid-row: auto;
    grid-column: 1;
    margin-top: 4px !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
  .premium-header,
  .premium-header.is-scrolled {
    position: relative;
  }

  .premium-header .site-nav {
    top: 0 !important;
  }

  .schedule-premium-rail {
    padding-bottom: 22px !important;
  }
}

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