/* Wolfe & Hoover - homepage layout only. Tokens from wh-system.css; no raw hex here. */

/* ---- Header logo ---- */
.wh-logo{display:block;width:150px;height:auto}
.wh-topbar .wh-nav{display:none}
.wh-topbar .wh-navlinks{display:flex;align-items:center;gap:var(--wh-s5);margin-right:var(--wh-s4)}
.wh-topbar a.wh-navlink{color:var(--wh-white);font-weight:600;font-size:var(--wh-fs-sm);text-decoration:none}
.wh-topbar a.wh-navlink:hover{color:var(--wh-gold)}
.wh-topbar-right{display:flex;align-items:center;gap:var(--wh-s3)}
@media (min-width:900px){.wh-topbar .wh-navlinks{display:flex}}
@media (max-width:899px){.wh-topbar .wh-navlinks{display:none}}
.wh-topbar .wh-btn{min-height:40px;padding:0 var(--wh-s4);font-size:var(--wh-fs-sm)}

/* ---- Hero ---- */
.wh-hero{position:relative;overflow:hidden;padding:var(--wh-s7) 0 var(--wh-s9);border-bottom:6px solid var(--wh-gold)}
.wh-hero__panel{position:absolute;inset:0;z-index:-2;clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%);background:var(--wh-red)}
@media (max-width:640px){.wh-hero__panel{clip-path:polygon(0 94%,100% 84%,100% 100%,0 100%)}}
.wh-hero__grid{display:grid;gap:var(--wh-s6);align-items:center}
@media (min-width:900px){.wh-hero__grid{grid-template-columns:1.15fr .85fr}}
.wh-hero h1{margin-bottom:var(--wh-s4)}
.wh-hero h1 span{display:block}
.wh-hero h1 .wh-hero__line2{color:var(--wh-gold)}
.wh-hero__sub{max-width:46ch;color:var(--wh-cloud);font-size:var(--wh-fs-lg)}
.wh-hero__cta{display:flex;flex-wrap:wrap;gap:var(--wh-s3);margin:var(--wh-s5) 0}
.wh-trustrow{display:flex;flex-wrap:wrap;gap:var(--wh-s3) var(--wh-s6);list-style:none;padding:0;margin:var(--wh-s5) 0 0}
.wh-trustrow li{display:flex;align-items:center;gap:8px;font:700 var(--wh-fs-xs)/1.3 var(--wh-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--wh-cloud)}
.wh-trustrow li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--wh-gold);flex:none}

/* ---- Homepage weather widget: fixed min-height so the async Open-Meteo fetch never
   shifts layout (CLS). Links out to /weather/. ---- */
.wh-weather-widget{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--wh-s3);min-height:52px;margin:var(--wh-s5) 0 0;padding:var(--wh-s3) var(--wh-s4);border:1px solid rgba(255,255,255,.18);border-radius:var(--wh-radius);background:rgba(255,255,255,.06);text-decoration:none;color:var(--wh-cloud)}
.wh-weather-widget:hover{border-color:var(--wh-gold);color:var(--wh-cloud)}
.wh-weather-widget__label{font-weight:700;font-size:var(--wh-fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--wh-gold)}
.wh-weather-widget__data{font-weight:600;font-size:var(--wh-fs-sm)}
.wh-weather-widget__link{margin-left:auto;font-weight:700;font-size:var(--wh-fs-xs);color:var(--wh-gold);white-space:nowrap}

/* ---- Winterize / red band ---- */
.wh-section--red .wh-check li{color:var(--wh-white)}
.wh-section--red .wh-check li::before{border-color:var(--wh-white);background:transparent}
.wh-section--red .wh-check li::after{border-color:var(--wh-white)}
.wh-offer-box{margin-top:var(--wh-s6)}
.wh-offer-box p{color:var(--wh-text)}
.wh-offer-box .wh-callrow{margin-top:var(--wh-s4);font-size:var(--wh-fs-sm)}

/* ---- Services ---- */
.wh-svc-icon{width:40px;height:40px;color:var(--wh-red);margin-bottom:var(--wh-s3)}
.wh-card .wh-svc-more{display:inline-block;margin-top:var(--wh-s3);font-weight:700}
.wh-svc-links{margin:var(--wh-s2) 0 0;font-size:var(--wh-fs-sm)}

/* ---- How it works ---- */
.wh-steps{display:grid;gap:var(--wh-s6);counter-reset:step}
@media (min-width:720px){.wh-steps{grid-template-columns:repeat(4,1fr)}}
.wh-step__num{font-family:var(--wh-font-display);font-weight:800;font-size:clamp(2.75rem,8vw,4.5rem);line-height:1;color:var(--wh-gold);margin-bottom:var(--wh-s2)}
.wh-step h3{font-size:var(--wh-fs-lg);text-transform:none;margin-bottom:var(--wh-s2)}
.wh-step p{color:var(--wh-cloud);font-size:var(--wh-fs-sm)}

/* ---- Book / deposit form ---- */
.wh-book-card{max-width:720px;margin:0 auto}
.wh-paytoggle{display:grid;grid-template-columns:1fr 1fr;gap:var(--wh-s3);margin:var(--wh-s4) 0 var(--wh-s6)}
.wh-paytoggle label{display:flex;align-items:flex-start;gap:10px;min-height:var(--wh-tap);padding:var(--wh-s4);border:2px solid var(--wh-hairline);border-radius:var(--wh-radius);font-weight:700;cursor:pointer;text-align:left}
.wh-paytoggle input{margin:3px 0 0;width:20px;height:20px;flex:none;accent-color:var(--wh-red)}
.wh-paytoggle strong{display:block;font-size:var(--wh-fs-base);line-height:1.2}
.wh-paytoggle small{display:block;margin-top:4px;font-weight:500;font-size:var(--wh-fs-xs);line-height:1.35;color:var(--wh-muted)}
.wh-paytoggle label:has(input:checked){border-color:var(--wh-red);background:var(--wh-red-tint);color:var(--wh-red-deep)}
.wh-terms{background:var(--wh-tint);border-radius:var(--wh-radius);padding:var(--wh-s4);font-size:var(--wh-fs-xs);color:var(--wh-muted);margin-bottom:var(--wh-s4)}
.wh-agree{display:flex;align-items:flex-start;gap:10px;font-weight:600;margin-bottom:var(--wh-s5)}
.wh-agree input{margin-top:4px;width:20px;height:20px;accent-color:var(--wh-red);flex:none}
.wh-fieldset{border:0;padding:0;margin:0 0 var(--wh-s2)}
.wh-fieldset legend{font-family:var(--wh-font-display);font-weight:800;text-transform:uppercase;font-size:var(--wh-fs-lg);color:var(--wh-heading);padding:0;margin-bottom:var(--wh-s3)}
.wh-note{font-size:var(--wh-fs-sm);color:var(--wh-muted)}
#dep-test pre{white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto;font-size:var(--wh-fs-xs);background:var(--wh-tint);padding:var(--wh-s3);border-radius:var(--wh-radius-sm)}
.wh-submitnote{text-align:center;font-size:var(--wh-fs-sm);color:var(--wh-muted);margin-top:var(--wh-s3)}

/* ---- Service area ---- */
.wh-chip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--wh-s3);margin:var(--wh-s5) 0}
@media (min-width:640px){.wh-chip-grid{grid-template-columns:repeat(3,1fr)}}
.wh-chip{display:flex;align-items:center;justify-content:center;text-align:center;min-height:var(--wh-tap);padding:var(--wh-s3);border:1.5px solid var(--wh-hairline);border-radius:var(--wh-radius);background:var(--wh-white);color:var(--wh-text);font-weight:600;text-decoration:none;font-size:var(--wh-fs-sm)}
.wh-chip:hover{border-color:var(--wh-red);color:var(--wh-red-deep)}
.wh-area-chart{width:100%;max-width:420px;height:auto;color:var(--wh-slate);margin:0 auto var(--wh-s5);display:block}

/* ---- HELM ---- */
.wh-helm__grid{display:grid;gap:var(--wh-s7);align-items:center}
@media (min-width:900px){.wh-helm__grid{grid-template-columns:1.1fr .9fr}}
.wh-helm__features{list-style:none;padding:0;margin:var(--wh-s5) 0}
.wh-helm__features li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-weight:600}
.wh-helm__features svg{width:22px;height:22px;flex:none;color:var(--wh-gold)}
.wh-helm__cta{display:flex;flex-wrap:wrap;gap:var(--wh-s3);margin-top:var(--wh-s5)}
.wh-phone{width:260px;max-width:100%;margin:0 auto;border-radius:36px;border:8px solid var(--wh-night);background:var(--wh-charcoal);padding:14px;box-shadow:var(--wh-shadow-2)}
.wh-phone__screen{background:var(--wh-cloud);border-radius:22px;padding:var(--wh-s3);color:var(--wh-ink)}
.wh-phone__card{background:var(--wh-white);border-radius:var(--wh-radius-sm);padding:var(--wh-s3);margin-bottom:10px;box-shadow:var(--wh-shadow-1)}
.wh-phone__label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--wh-muted);font-weight:700}
.wh-phone__val{font-weight:800;font-size:var(--wh-fs-sm)}
.wh-phone__pay{display:inline-block;margin-top:6px;background:var(--wh-red);color:var(--wh-white);font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--wh-radius-pill)}

/* ---- About ---- */
/* .wh-about__grid layout rules live in the "Photos (2026-09-28)" block below,
   since the section now carries a photo alongside the bio text. */

/* ---- Final CTA ---- */
.wh-finalcta{text-align:center}
.wh-finalcta .wh-hero__cta{justify-content:center}

/* ---- Action bar spacer ---- */
@media (max-width:899px){body{padding-bottom:74px}}

/* ---- Service radios: two columns on phones ---- */
#dep-form .wh-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wh-s2)}
@media (min-width:640px){#dep-form .wh-choice{grid-template-columns:repeat(3,minmax(0,1fr))}}
#dep-form .wh-choice label{border-radius:var(--wh-radius);padding:8px 12px;white-space:normal;line-height:1.2;min-height:44px}

/* Photos (2026-09-28) */

/* Hero photo: full-bleed block under the text on phones, right column on desktop */
.wh-hero__media{margin:var(--wh-s6) calc(var(--wh-s5) * -1) 0}
.wh-hero__photo{width:100%;height:auto;object-fit:cover;aspect-ratio:3/2;border-radius:0}
@media (min-width:900px){
  .wh-hero__media{margin:0}
  .wh-hero__photo{aspect-ratio:auto;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow-2)}
}

/* How it works: small photo under step 3 */
.wh-step__photo{margin-top:var(--wh-s4)}
.wh-step__photo img{width:100%;height:auto;object-fit:cover;aspect-ratio:16/9;border-radius:var(--wh-radius)}
.wh-step__photo figcaption{margin-top:6px;font-size:var(--wh-fs-xs);color:var(--wh-cloud)}

/* Service area: full-width banner photo at the top of the section */
#area.wh-section{padding-top:0}
#area>.wh-wrap{padding-top:var(--wh-s8)}
@media (min-width:900px){#area>.wh-wrap{padding-top:var(--wh-s9)}}
.wh-banner{margin:0 0 var(--wh-s6)}
.wh-banner img{width:100%;height:auto;aspect-ratio:2.4/1;object-fit:cover;display:block}
/* desktop: a contained, rounded band instead of a stretched full-bleed strip */
@media (min-width:900px){.wh-banner{max-width:1120px;margin:var(--wh-s6) auto var(--wh-s6);padding:0 var(--wh-s5,24px)}.wh-banner img{aspect-ratio:3.4/1;max-height:300px;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow-1)}}

/* HELM: dusk harbor photo as a dark-overlaid section background, in place of the contour texture */
#helm.wh-contours::before{content:none}
#helm.wh-helm--photo{
  background:
    linear-gradient(180deg, rgba(38,38,52,.86), rgba(38,38,52,.92)),
    url(/assets/img/photos/harbor-dusk-1200.jpg) center/cover no-repeat;
  background-color:var(--wh-night);
}
@supports (background-image:image-set(url(a.webp) type("image/webp"))){
  #helm.wh-helm--photo{
    background-image:
      linear-gradient(180deg, rgba(38,38,52,.86), rgba(38,38,52,.92)),
      image-set(url(/assets/img/photos/harbor-dusk-1200.webp) type("image/webp") 1x, url(/assets/img/photos/harbor-dusk-1200.jpg) type("image/jpeg") 1x);
  }
}

/* About: photo beside the bio on desktop, above it on phones */
.wh-about__grid{display:grid;gap:var(--wh-s6);max-width:640px}
@media (min-width:900px){.wh-about__grid{grid-template-columns:.85fr 1.15fr;align-items:start;max-width:960px}}
.wh-about__media img{width:100%;height:auto;object-fit:cover;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow-1)}

/* banner height is fixed so the band never pushes content below the fold */
.wh-banner img{height:180px!important;aspect-ratio:auto!important;object-fit:cover}
@media (min-width:900px){.wh-banner img{height:260px!important;max-height:none}}