/* Shared detail-page layouts, matching the homepage's visual direction. */
.header nav { gap: 20px; }
.header nav a[aria-current="page"] { color: var(--blue); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 25px; padding-bottom: 28px; margin-bottom: 25px; border-bottom: 1px solid var(--line); font-size: .875rem; }
.footer-links a { text-decoration: none; color: var(--navy); }
.footer-links a:hover { text-decoration: underline; }
.detail-hero { background: radial-gradient(ellipse at 95% 10%,#22627a,transparent 65%),#132e47; color: #dbe7ee; padding: 27px 0 64px; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; font-size: .75rem; color: #c5dce6; margin-bottom: 38px; }
.breadcrumb a { text-underline-offset: 4px; }
.detail-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; }
.detail-hero h1 { color: white; font-size: clamp(2.5rem,4.4vw,4.125rem); }
.detail-hero h1 span { color: #95e0ed; }
.detail-hero .eyebrow { color: #a5e0ec; }
.detail-intro { max-width: 580px; font-size: 1.125rem; line-height: 1.8; margin-bottom: 30px; }
.detail-hero .button:not(.button-outline) { background: white; color: var(--navy); border-color: white; }
.detail-hero .button-outline { color: white; border-color: #8caaba; }
.detail-hero .button-outline:hover { background: #ffffff15; }
.detail-photo { position: relative; margin: 0; }
.detail-photo img { width: 100%; height: 390px; object-fit: cover; object-position: 50% 55%; border-radius: 18px; box-shadow: 0 20px 45px #061a3440; }
.detail-photo figcaption { position: relative; width: calc(100% - 30px); margin: -22px auto 0; background: white; color: var(--navy); padding: 16px 20px; border-radius: 9px; font-size: .8125rem; box-shadow: 0 10px 30px #061a3425; }
.hero-note-panel { padding: 32px; border: 1px solid #ffffff30; background: linear-gradient(135deg,#ffffff12,#ffffff06); border-radius: 18px; box-shadow: 0 20px 40px #061a3420; }
.hero-note-panel h2 { color: white; font-size: 2rem; }
.feature-line { display: flex; gap: 18px; border-top: 1px solid #ffffff25; padding-top: 18px; margin-top: 18px; }
.feature-line > span { color: #9dddea; font-size: .8125rem; }
.feature-line strong { color: white; }
.feature-line p { font-size: .9375rem; margin: 4px 0 0; }
.offer-table { border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; box-shadow: 0 12px 30px #17324d08; background: white; }
.offer-table table { width: 100%; border-collapse: collapse; text-align: left; font-size: 1rem; }
.offer-table th,.offer-table td { padding: 22px 20px; border-bottom: 1px solid var(--line); }
.offer-table thead { background: var(--navy); color: white; font-size: .875rem; }
.offer-table tbody th { color: var(--navy); }
.offer-table tbody tr:last-child > * { border-bottom: 0; }
.offer-table tbody tr:nth-child(even) { background: #f4f8fa; }
.scope-note { margin-top: 22px; padding: 24px 28px; border-left: 3px solid var(--blue); border-radius: 0 12px 12px 0; background: #eff6f8; font-size: .9375rem; color: var(--muted); }
.scope-note strong { color: var(--navy); }
.scope-note p { margin: 8px 0 0; }
.split-content { display: grid; grid-template-columns: 1.2fr 1fr; align-items: start; gap: 64px; }
.split-content .section-heading { margin-bottom: 24px; }
.split-content > div > p { color: var(--muted); }
.equipment-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; }
.treatment-pricing { grid-template-columns: repeat(2,minmax(0,1fr)); }
.equipment-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 15px; padding: 32px 28px; box-shadow: 0 15px 30px #17324d0a; background: white; }
.equipment-card:nth-child(2) { border-top: 4px solid var(--blue); }
.equipment-card h3 { font-size: 1.6rem; }
.equipment-card p:not(.eyebrow):not(.offer-price) { color: var(--muted); }
.equipment-card .offer-price { color: var(--navy); font-family: var(--heading); font-weight: 800; font-size: 2.6rem; line-height: 1.2; letter-spacing: -.05em; margin-bottom: 10px; }
.equipment-card .price-label { font-size: .8125rem; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.equipment-card .text-link { margin-top: auto; }
.plain-checks { list-style: none; padding: 0; margin: 24px 0; color: var(--muted); }
.plain-checks li { padding-left: 25px; position: relative; margin-bottom: 12px; }
.plain-checks li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); }
.detail-faq { display: grid; grid-template-columns: 1fr 1.25fr; gap: 70px; }
.detail-faq .section-heading { align-items: flex-start; }
.detail-close { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.detail-close .button-outline { color: white; border-color: #8caaba; }
.detail-close .button-outline:hover { background: #ffffff12; }
.detail-close .actions { flex-shrink: 0; flex-direction: column; }
.service-directory { display: grid; }
.service-directory a { color: white; display: flex; align-items: center; gap: 20px; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid #ffffff30; text-decoration: none; }
.service-directory a:last-child { border-bottom: 0; }
.service-directory a:hover { color: #9de1ed; }
.disposal-layout { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 25px; align-items: start; }
.service-checklist { padding: 10px 0 0 12px; font-size: .9375rem; }
.contact-hours dl { font-size: 1rem; margin: 25px 0; }
.contact-hours dl div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px solid #ffffff25; }
.contact-hours dd { margin: 0; }
.contact-hours p:not(.eyebrow) { font-size: .9375rem; }
.contact-hours .text-link { color: #a9e5ef; }
.quote-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.quote-layout > div > p { color: var(--muted); }
.quote-tip { margin-top: 32px; padding: 24px; background: #edf6f8; border-radius: 12px; color: var(--navy); }
.quote-tip p { font-size: .9375rem; margin: 10px 0 0; }
.quote-card { border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 20px 45px #17324d0c; }
.quote-card label { display: block; margin: 0 0 8px; color: var(--navy); font-size: .9375rem; font-weight: 600; }
.quote-card label span { color: var(--muted); font-size: .8125rem; font-weight: 400; }
.quote-card input,.quote-card select,.quote-card textarea { display: block; width: 100%; max-width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fbfdfe; padding: 12px 14px; border: 1px solid #a7bbc6; border-radius: 7px; margin-bottom: 24px; }
.quote-card textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-card button { cursor: pointer; }
.quote-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.quote-card fieldset:disabled { opacity: .65; }
.message-result { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 28px; }
.message-result h3 { font-size: 1.35rem; }
.message-result .small-note { margin-top: 18px; }
#copy-status { font-size: .875rem; color: var(--navy); margin: 12px 0 0; }
@media(max-width:1100px) { .detail-hero-grid { gap: 40px; } .detail-photo img { height: 360px; } .detail-close .actions { max-width: 300px; } .split-content,.quote-layout { gap: 35px; } .equipment-card { padding: 28px 22px; } .header nav { gap: 18px; } }
@media(max-width:780px) { .detail-hero { padding: 20px 0 44px; } .detail-hero-grid { grid-template-columns: 1fr; gap: 34px; } .breadcrumb { margin-bottom: 28px; } .detail-intro { font-size: 1rem; } .detail-photo img { height: 380px; } .hero-note-panel { padding: 26px; } .split-content,.quote-layout,.detail-faq { grid-template-columns: 1fr; gap: 30px; } .equipment-grid { grid-template-columns: 1fr; } .equipment-card { padding: 30px; } .disposal-layout { grid-template-columns: 1fr 1fr; } .service-checklist { grid-column: 1 / -1; padding-left: 0; } .detail-close { align-items: stretch; flex-direction: column; } .detail-close .actions { max-width: none; flex-direction: row; } .detail-faq .section-heading { margin-bottom: 0; } .offer-table th,.offer-table td { padding: 18px 12px; font-size: .875rem; } .quote-card { padding: 25px; } }
@media(max-width:480px) { .detail-hero h1 { font-size: 2.5rem; } .detail-photo img { height: 330px; } .detail-hero .actions { flex-direction: column; } .disposal-layout { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; gap: 0; } .quote-card { padding: 22px 18px; } .scope-note { padding: 20px; } .offer-table table { min-width: 260px; } .detail-close .actions { flex-direction: column; } .message-result .actions { flex-direction: column; } }