/* NPSC SkyWash — approved October 16 section-by-section refinements.
   This stylesheet ONLY overrides sizing, section alignment and explicitly requested images/hover effects.
   Original HTML design, colors, content, photos elsewhere, interactions and navigation are preserved. */

/* Always land section anchors below the fixed navigation. Avoid accidental double offsets. */
html {scroll-padding-top:var(--header)}
main > section {scroll-margin-top:var(--header)}
.home-page .hero,.care-page .care-hero,.about-page .about-hero {scroll-margin-top:0}

/* Keep the reference typography clear and strong rather than shrinking the whole site. */
@media (min-width:1101px) {
  .home-page h2,.care-page h2 {font-size:clamp(43px,3.06vw,57px)}
  .home-page .hero {min-height:100svh;height:100svh;max-height:none;
    padding:calc(var(--header) + 15px) 0 18px;display:flex;align-items:center}
  .home-page .hero-content h1 {margin-bottom:21px}
  .home-page .hero-content>p {margin-bottom:23px}
  .home-page .hero .button-row {margin-bottom:22px}
  .home-page .hero-values {margin-bottom:12px}

  /* The original site uses 100px+ vertical padding, leaving sections partly off screen.
     Center content in a single post-header viewport, without squeezing every component. */
  .home-page main > .section,.care-page main > .section {
    display:flex;align-items:center;
    min-height:calc(100svh - var(--header));
    padding:28px 0;
  }
  .home-page main > .section > .container,.care-page main > .section > .container {flex:none}
  .home-page .section-heading,.care-page .section-heading {margin-bottom:33px}
  .home-page .section-heading h2,.care-page .section-heading h2 {line-height:1.04}

  /* SERVICES — unchanged image-card design, heading/tabs aligned alongside it so all seven fit. */
  .home-page .services-section .service-layout {
    grid-template-columns:minmax(0,1fr) minmax(440px,525px);
    gap:48px;align-items:center;padding-right:0;
  }
  .home-page .service-left {min-width:0}
  .home-page .services-heading {margin-bottom:14px;align-items:flex-end}
  .home-page .services-heading h2 {font-size:clamp(33px,2.18vw,41px);line-height:1.06;margin-bottom:0}
  .home-page .services-heading .eyebrow {margin-bottom:10px}
  .home-page .service-count {margin-right:0;margin-bottom:0}
  .home-page .service-tab {font-size:20px;min-height:60px;padding:10px 0;gap:20px}
  .home-page .service-tab .service-dash {flex-basis:30px}
  .home-page .service-panel {aspect-ratio:4/5;max-width:525px;width:100%}
  .home-page .service-panel-copy {min-height:0;height:100%;padding:28px 30px}
  .home-page .service-panel-copy h3 {font-size:clamp(26px,2vw,33px)}
  .home-page .service-panel-copy p {font-size:clamp(15px,1.07vw,18px)}
  .home-page .service-chips span {font-size:11px}
  /* Generated concept is labeled as an illustration, not presented as a real client result. */
  .home-page .service-panel[data-selected-service="2"] .service-ticks {display:none}
  .home-page .service-panel[data-selected-service="2"]:before {
    content:'ILLUSTRATIVE BEFORE / AFTER';position:absolute;top:27px;right:25px;z-index:3;
    font:700 9px/1.3 Inter,Arial,sans-serif;letter-spacing:.055em;color:white;
    background:#081e28bb;border:1px solid #ffffff4d;padding:6px 9px;border-radius:30px;
  }

  /* Tighten only the sections whose original content exceeded the screen. */
  .home-page .care-intro .care-visual {height:484px}
  .home-page .care-intro .care-included {top:16px;padding:22px 23px}
  .home-page .care-intro .care-included>.eyebrow {margin-bottom:17px}
  .home-page .care-intro .care-included-row {margin-bottom:13px}
  .home-page .care-intro .care-mini-chart {bottom:20px}
  .home-page .why-section .section-heading {margin-bottom:24px}
  .home-page .why-section .feature-grid {row-gap:16px;column-gap:20px}
  .home-page .why-section .feature-card {padding:23px 26px}
  .home-page .why-section .feature-card h3 {margin-top:14px}
  .home-page .results-section .split {gap:50px}
  .home-page .results-section .comparison {aspect-ratio:1.60}

  /* QUOTE — preserve the earlier approved two-column expanded form at readable size. */
  .home-page .quote-section {padding-block:14px}
  .home-page .quote-section .section-heading {margin-bottom:16px}
  .home-page .quote-section .section-heading .eyebrow {margin-bottom:7px}
  .home-page .quote-section .section-heading h2 {font-size:clamp(43px,3.03vw,55px);margin-bottom:10px}
  .home-page .quote-section .section-heading p {font-size:18px;margin:0 auto;max-width:910px;line-height:1.32}
  .home-page .quote-form {max-width:1000px;padding:18px 24px;border-radius:23px}
  .home-page .quote-form input:not([type=checkbox]),.home-page .quote-form select,
  .home-page .quote-form textarea {font-size:16px;padding:10px 13px;line-height:1.4}
  .home-page .quote-form>label,.home-page .quote-form>.form-row {margin-bottom:10px}
  .home-page .quote-form fieldset {margin-bottom:9px}
  .home-page .quote-form legend {margin-bottom:8px}
  .home-page .service-pills {gap:7px 9px}
  .home-page .service-pill>span {font-size:12px;padding:8px 11px}
  .home-page .project-details {margin-bottom:10px}
  .home-page .project-details summary {padding:5px 0;font-size:15px}
  .home-page .details-fields {display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;align-items:start}
  .home-page .details-fields>label:first-child {grid-column:1;grid-row:1}
  .home-page .details-fields>.form-row {grid-column:1;grid-row:2}
  .home-page .details-fields>label:last-child {grid-column:2;grid-row:1/span 2}
  .home-page .details-fields textarea {height:116px;resize:vertical}
  .home-page .details-fields .form-row {gap:8px;margin-bottom:0}
  .home-page .details-fields label {font-size:13px}
  .home-page .submit-button {min-height:49px;font-size:16px}
  .home-page .form-note {font-size:12px!important;margin:9px 0 0;line-height:1.4}
  .home-page .form-note br {display:none}

  /* FAQ retains the bold larger WebCentriq heading and comfortable two-column cards. */
  .home-page .faq-section .section-heading {margin-bottom:25px}
  .home-page .faq-section .section-heading .eyebrow {margin-bottom:8px}
  .home-page .faq-section .section-heading p {font-size:19px;line-height:1.35;margin:10px auto 0}
  .home-page .faq-grid {gap:20px}
  .home-page .faq-column {gap:11px}
  .home-page .faq-item {padding-inline:19px}
  .home-page .faq-item summary {font-size:17px;padding-block:17px}
  .home-page .faq-item p {font-size:15px;margin-bottom:18px}

  /* Home final CTA ONLY: supplied original drone/building image, same left-to-right composition. */
  .home-page .closing-cta {min-height:calc(100svh - var(--header));padding:56px 0;
    display:flex;align-items:center;background-image:url('assets/closing-drone-building.webp');
    background-position:center 46%;background-size:cover}
  .home-page .closing-cta h2 {font-size:clamp(49px,3.25vw,60px)}
  .home-page .closing-cta .button {font-size:18px;min-height:58px;padding:15px 33px}

  /* NPSCARE — favor WebCentriq card and headline sizes, one screen per section. */
  .care-page .care-hero {height:100svh;min-height:100svh;padding:calc(var(--header) + 18px) 0 34px}
  .care-page .care-hero h1 {font-size:clamp(66px,4.85vw,91px)}
  .care-page .care-hero .button {font-size:18px}
  .care-page .feature-card {padding:34px 31px}
  .care-page .feature-card h3 {font-size:20px}
  .care-page .feature-card p {font-size:17px}
  .care-page .care-problem .split {gap:60px}
  .care-page .care-problem .care-property-image {aspect-ratio:1.63}
  .care-page .care-dashboard-section .dashboard {margin:0}
  .care-page .care-benefits .section-heading {margin-bottom:57px}
  .care-page .care-plans .section-heading {margin-bottom:55px}
  .care-page .care-plans .plan-card {padding:39px 36px}
  .care-page .step-number {color:#0aa6c5;opacity:1}
  .care-page .care-closing {min-height:calc(100svh - var(--header));display:flex;align-items:center;padding:58px 0}
  .care-page .care-closing h2 {font-size:clamp(51px,3.24vw,62px)}
}

/* Cards brighten with a teal outline on hover; no click action or navigation is added. */
.care-page .care-benefits .feature-card,.care-page .care-solution .feature-card,
.care-page .care-process .feature-card,.care-page .plan-card,
.home-page .why-section .feature-card,.home-page .industry-card {
  transition:border-color .22s ease,box-shadow .22s ease;
}
@media (hover:hover) {
 .care-page .care-benefits .feature-card:hover,.care-page .care-solution .feature-card:hover,
 .care-page .care-process .feature-card:hover,.care-page .plan-card:hover,
 .home-page .why-section .feature-card:hover,.home-page .industry-card:hover {
    border-color:#059ac0;box-shadow:inset 0 0 0 1px #059ac0,0 11px 27px #02779720;
 }
}

/* Approved About-page flow and footer remain unchanged. Only the large inline drone photo gets smaller. */
.about-page .about-photo {max-width:760px;margin:38px auto}
.about-page .about-photo img {aspect-ratio:1.95;max-height:400px;object-fit:cover}

/* At shorter or medium desktops, maintain readable content without clipping. */
@media (min-width:801px) and (max-width:1100px) {
  .home-page .services-section .service-layout {grid-template-columns:minmax(0,1fr) minmax(290px,42%);gap:27px;padding-right:0}
  .home-page .service-left .services-heading {margin-bottom:12px}
  .home-page .service-left .services-heading h2 {font-size:clamp(26px,3vw,36px)}
  .home-page .service-tab {font-size:17px;padding:10px 0;min-height:56px;gap:13px}
  .home-page .service-panel {aspect-ratio:4/5}
}
@media (max-width:800px) {
  /* No compulsory screen-height snap on mobile: long content, form and accordions scroll naturally. */
  html {scroll-snap-type:none}
  .home-page .services-section .service-layout {display:flex;flex-direction:column;gap:22px;padding-right:0}
  .home-page .service-left {width:100%}
  .home-page .services-heading {margin-bottom:15px}
  .home-page .service-tab {min-height:55px;padding:12px 0}
  .home-page .service-panel {width:100%;max-width:540px;margin-inline:auto}
  .home-page .closing-cta {background-image:url('assets/closing-drone-building.webp');background-position:54% center}
  .care-page .step-number {color:#0aa6c5}
  .about-page .about-photo {max-width:100%;margin:30px auto}
}

@media (min-width:1101px) and (min-height:740px) {
  html {scroll-snap-type:y proximity}
  .home-page main > section,.care-page main > section {scroll-snap-align:start}
  .about-page main > section {scroll-snap-align:none}
}
@media (prefers-reduced-motion:reduce) {
  .care-page .feature-card,.home-page .feature-card,.care-page .plan-card {transition:none}
}

/* Final fit check at the reference 1788 × 860 viewport (including expanded quote details). */
@media (min-width:1101px) {
  .home-page main > .care-intro {padding-top:16px;padding-bottom:16px}
  .home-page main > .quote-section {padding-top:10px;padding-bottom:10px}
}
/* Bright number accent must remain legible at intermediate desktop widths too. */
.care-page .step-number {color:#0aa6c5}
/* Keep the approved original mobile service flow: heading, image preview, then tabs. */
@media (max-width:800px) {
  .home-page .service-left {display:contents}
  .home-page .services-heading {order:0;width:100%}
  .home-page .service-panel {order:1}
  .home-page .service-tabs {order:2;width:100%}
}


/* 16 OCT — FINAL USER-REQUESTED IMAGE + SIZE TUNING.
   These targeted overrides intentionally do not change the seven Services tabs,
   site-wide typography, navigation, layout order, or interactions. */
@media (min-width:1101px) {
  /* Services: shrink ONLY the right photo card. The left list keeps its width and styles. */
  .home-page .services-section .service-panel {
    width:92%; max-width:485px; margin-inline:auto;
  }
  /* Preserve the compact NPSCare/Water sizing in the approved smaller reference. */
  .home-page .care-intro h2, .home-page .water-section h2 {
    font-size:clamp(43px,2.99vw,54px);
  }
  .home-page .care-intro .care-visual {height:464px;}
  .home-page .water-section .water-image {width:97%;margin-left:auto;}
}

/* Façade tab: retain the approved illustrative photo and label; the full-bleed
   image treatment for its card is specified in the final four-section fix. */
.home-page .service-panel[data-selected-service="2"] {
  background:#172b34;
}
.home-page .service-panel[data-selected-service="2"]:before {
  content:'ILLUSTRATIVE FACADE CLEANING';
}

/* NPSCare problem: new illustrative commercial-property visual; same card geometry. */
.care-page .care-problem .care-property-image {
  filter:brightness(.82) saturate(.88);
}

/* Footer text a little smaller on the Home, NPSCare and About pages.
   Preserve the existing logo, layout, alignment and working links. */
@media (min-width:801px) {
  .site-footer p, .site-footer a:not(.button) {font-size:15px;}
  .site-footer h3 {font-size:17.7px;}
  .site-footer .tagline {font-size:13.2px;}
  .site-footer .footer-bottom {font-size:14.3px;}
}
@media (max-width:800px) {
  .site-footer p, .site-footer a:not(.button) {font-size:13.3px;}
  .site-footer h3 {font-size:15.9px;}
  .site-footer .tagline {font-size:11.5px;}
  .site-footer .footer-bottom {font-size:10.7px;}
}

/* 16 OCT — FOUR FINAL SCREENSHOT-BASED CORRECTIONS.
   Only the home-page Façade preview, NPSCare intro, Water Reclamation,
   and Why Choose Us sections are affected; all seven service tabs stay intact. */

/* Façade preview: the approved photo now runs the full height of the card,
   rather than stopping at 59% and creating a separate solid-black lower half.
   Keep the drone in view and use a gradual dark gradient only behind copy. */
.home-page .service-panel[data-selected-service="2"] > img {
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:16% center !important;
}
.home-page .service-panel[data-selected-service="2"]:after {
  background:linear-gradient(0deg,
    rgba(5,17,23,.96) 0%,
    rgba(5,17,23,.87) 16%,
    rgba(5,17,23,.58) 39%,
    rgba(5,17,23,.14) 61%,
    transparent 78%);
}

/* These proportions match the smaller supplied reference on regular desktops.
   Unlike a global zoom, the original navigation, logo, hero, other sections,
   hover functionality and every service tab keep their approved size. */
@media (min-width:1101px) {
  /* NPSCare on HOME — make both columns and floating panels more compact. */
  .home-page .care-intro {padding-block:18px;}
  .home-page .care-intro .split {gap:clamp(44px,4.15vw,66px);}
  .home-page .care-intro h2 {
    font-size:clamp(43px,2.8vw,50px);
    line-height:1.035;
    margin-bottom:17px;
  }
  .home-page .care-intro .split > div:first-child > .eyebrow {
    font-size:12.6px;
    margin-bottom:17px;
    padding:7px 17px;
  }
  .home-page .care-intro .split > div:first-child > p:not(.care-line) {
    font-size:19px;
    line-height:1.44;
    margin-bottom:16px;
  }
  .home-page .care-intro .care-line {
    font-size:17.5px !important;
    line-height:1.45;
    margin-bottom:0;
  }
  .home-page .care-intro .small-features {
    gap:18px 22px;
    margin:26px 0 28px;
  }
  .home-page .care-intro .small-feature {gap:11px;}
  .home-page .care-intro .small-feature .icon-box {
    width:42px;height:42px;border-radius:11px;
  }
  .home-page .care-intro .small-feature .icon {width:20px;height:20px;}
  .home-page .care-intro .small-feature h3 {font-size:15.2px;margin-bottom:3px;}
  .home-page .care-intro .small-feature p {
    font-size:13.4px !important;line-height:1.38;margin-bottom:0;
  }
  .home-page .care-intro .button {
    min-height:51px;font-size:15.5px;padding:13px 25px;
  }
  .home-page .care-intro .care-visual {height:440px;}
  .home-page .care-intro .care-included {
    top:15px;padding:20px 20px;width:50.5%;
  }
  .home-page .care-intro .care-included > .eyebrow {
    font-size:12.5px;margin-bottom:14px;
  }
  .home-page .care-intro .care-included-row {gap:10px;margin-bottom:11px;}
  .home-page .care-intro .care-included-row h3 {
    font-size:14.6px;line-height:1.24;margin-bottom:3px;
  }
  .home-page .care-intro .care-included-row p {
    font-size:12.5px !important;line-height:1.3;margin:0;
  }
  .home-page .care-intro .care-included .icon-box {
    width:37px;height:37px;border-radius:11px;
  }
  .home-page .care-intro .care-included .icon {width:18px;height:18px;}
  .home-page .care-intro .care-next {
    top:15px;right:17px;padding:15px;min-width:118px;
  }
  .home-page .care-intro .care-next strong {font-size:25px;}
  .home-page .care-intro .care-mini-chart {
    bottom:15px;right:17px;padding:16px;width:45%;
  }
  .home-page .care-intro .care-mini-chart strong {font-size:26px;}
  .home-page .care-intro .care-mini-chart svg {height:42px;margin-top:5px;}

  /* WATER RECLAMATION — the same image and callouts, modestly reduced. */
  .home-page .water-section {padding-block:20px;}
  .home-page .water-section .split {gap:clamp(43px,4vw,64px);}
  .home-page .water-section .eyebrow {margin-bottom:18px;font-size:12.7px;}
  .home-page .water-section h2 {
    font-size:clamp(41px,2.73vw,49px);
    line-height:1.045;
    margin-bottom:20px;
  }
  .home-page .water-section .split > div:first-child > p {
    font-size:18.7px;line-height:1.45;margin-bottom:14px;
  }
  .home-page .water-section .water-steps {gap:16px;margin-top:25px;}
  .home-page .water-section .water-steps .small-feature {gap:12px;}
  .home-page .water-section .water-steps .icon-box {
    width:43px;height:43px;border-radius:12px;
  }
  .home-page .water-section .water-steps h3 {font-size:17.1px;margin-bottom:3px;}
  .home-page .water-section .water-steps p {
    font-size:14.7px !important;line-height:1.4;margin:0;
  }
  .home-page .water-section .water-image {width:92%;margin-left:auto;}
  .home-page .water-section .water-image > img:first-child {
    aspect-ratio:1.39;border-radius:20px;
  }
  .home-page .water-section .water-image > img.water-inset {
    width:127px;height:127px;top:18px;right:18px;
    border-width:4px;border-radius:18px;
  }
  .home-page .water-section .water-callouts {gap:14px;margin-top:15px;}
  .home-page .water-section .water-callouts > div {
    min-height:73px;padding:11px 16px;
  }
  .home-page .water-section .water-callouts strong {font-size:26px;}
  .home-page .water-section .water-callouts span {font-size:11.5px;}

  /* WHY CHOOSE US — all seven cards visible, with the original 4+3 grid. */
  .home-page .why-section {padding-block:20px;}
  .home-page .why-section .section-heading {margin-bottom:20px;}
  .home-page .why-section .section-heading h2 {
    font-size:clamp(43px,2.82vw,51px);margin-bottom:15px;
  }
  .home-page .why-section .section-heading p {
    font-size:19px;line-height:1.4;margin-bottom:0;
  }
  .home-page .why-section .feature-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:18px;row-gap:14px;
  }
  .home-page .why-section .feature-card {
    padding:20px 23px;
    border-radius:18px;
  }
  .home-page .why-section .feature-card .icon-box {
    width:45px;height:45px;border-radius:12px;
  }
  .home-page .why-section .feature-card .icon-box .icon {width:21px;height:21px;}
  .home-page .why-section .feature-card h3 {
    font-size:15px;line-height:1.37;
    margin-top:12px;margin-bottom:7px;
  }
  .home-page .why-section .feature-card p {
    font-size:15px;line-height:1.43;margin-bottom:0;
  }
}

/* Mid-sized desktops keep the side-by-side compositions but need tighter
   sizing because line wrapping increases as available column width falls. */
@media (min-width:801px) and (max-width:1100px) {
  .home-page .care-intro .split, .home-page .water-section .split {gap:28px;}
  .home-page .care-intro h2, .home-page .water-section h2 {font-size:clamp(34px,3.5vw,40px);}
  .home-page .care-intro .split > div:first-child > p:not(.care-line),
  .home-page .water-section .split > div:first-child > p {font-size:16px;line-height:1.42;}
  .home-page .care-intro .small-features {gap:15px;margin:22px 0;}
  .home-page .care-intro .small-feature h3 {font-size:13px;}
  .home-page .care-intro .small-feature p {font-size:12px !important;}
  .home-page .care-intro .care-visual {height:404px;}
  .home-page .care-intro .care-included {top:14px;padding:15px 13px;width:55%;}
  .home-page .care-intro .care-included > .eyebrow {margin-bottom:10px;font-size:10px;}
  .home-page .care-intro .care-included-row {margin-bottom:9px;}
  .home-page .care-intro .care-included-row h3 {font-size:11px;}
  .home-page .care-intro .care-included-row p {font-size:10px !important;}
  .home-page .care-intro .care-included .icon-box {width:28px;height:28px;}
  .home-page .care-intro .care-next {padding:10px;min-width:87px;}
  .home-page .care-intro .care-mini-chart {bottom:12px;padding:12px;}
  .home-page .water-section .water-steps {gap:15px;margin-top:22px;}
  .home-page .water-section .water-steps h3 {font-size:15px;}
  .home-page .water-section .water-steps p {font-size:12px !important;}
  .home-page .water-section .water-image {width:95%;margin-left:auto;}
  .home-page .water-section .water-image > img:first-child {aspect-ratio:1.4;}
  .home-page .why-section .feature-grid {gap:14px;}
  .home-page .why-section .feature-card {padding:18px;}
  .home-page .why-section .feature-card h3 {margin-top:11px;font-size:13px;}
  .home-page .why-section .feature-card p {font-size:13px;margin:0;}
}

/* Short landscape desktops: leave breathing room below the header rather than
   allowing the last row or callout to spill under the next section. */
@media (min-width:1101px) and (max-height:820px) {
  .home-page .care-intro, .home-page .water-section, .home-page .why-section {
    padding-block:13px;
  }
  .home-page .care-intro h2 {font-size:clamp(40px,2.65vw,47px);}
  .home-page .care-intro .small-features {gap:12px 18px;margin:19px 0 20px;}
  .home-page .care-intro .care-visual {height:412px;}
  .home-page .water-section h2 {font-size:clamp(38px,2.55vw,46px);}
  .home-page .water-section .water-image {width:88%;}
  .home-page .water-section .water-steps {gap:12px;margin-top:18px;}
  .home-page .why-section .section-heading {margin-bottom:13px;}
  .home-page .why-section .feature-grid {row-gap:10px;}
  .home-page .why-section .feature-card {padding:16px 21px;}
}