/* ── Resources (resources.php) ─────────────────────────────────────────────────
   Owner 2026-09-11: the hero "could be better optimized for space meaning reduce
   the blank space area." Beside site.css, never inside it (owner 2026-09-08). */
.resources-page .page-hero{padding:52px 0 46px}
.resources-page .page-hero h1{font-size:clamp(2.3rem,3.6vw,3.5rem);line-height:1.02}
.resources-page .page-hero .two-column{gap:48px}
.resources-page #start-here{padding:40px 0 48px}

/* POWER SIZING, ONE ROW. Owner 2026-09-11: "Expand the power sizing left and right
   so it's a smaller row one row and then recommend a better image for that piece."
   Photograph · words · the three answers and Calculate, side by side on a desk;
   stacked on a phone. */
.rs-row{display:grid;grid-template-columns:1fr;background:var(--soft);border-top:3px solid var(--blue);overflow:hidden}
.rs-photo{margin:0;height:190px;overflow:hidden;background:var(--navy)}
.rs-photo img{display:block;width:100%;height:100%;object-fit:cover}
.rs-copy{padding:22px 24px 0}
.rs-copy h2{margin:0 0 6px;font-size:1.5rem;line-height:1.15}
.rs-copy p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.rs-form{display:grid;gap:12px;padding:18px 24px 24px;align-items:end}
.rs-form label{display:grid;gap:4px;font-size:.78rem;font-weight:700;color:var(--ink)}
.rs-form label span{font-weight:400;color:var(--muted)}
.rs-form input{width:100%;min-height:44px;padding:9px 11px;border:1px solid #b8c7d4;border-radius:4px;background:#fff;font:inherit;font-size:.95rem;color:var(--ink)}
.rs-form input:focus{outline:2px solid var(--blue);outline-offset:1px}
.rs-form .button{justify-self:start;min-height:44px}
@media(min-width:640px) and (max-width:1023px){
  .rs-row{grid-template-columns:220px 1fr}
  .rs-photo{grid-row:span 2;height:auto;min-height:100%}
  .rs-copy{padding:22px 24px 0}
  .rs-form{grid-template-columns:1fr 1fr}
  .rs-form .rs-addr{grid-column:1/-1}
}
@media(min-width:1024px){
  .rs-row{grid-template-columns:240px minmax(210px,.9fr) minmax(0,2.3fr);align-items:stretch}
  .rs-photo{height:auto;min-height:150px}
  .rs-copy{padding:22px 0 22px 26px;align-self:center}
  /* Each label and its line under it on one line apiece, so the three boxes align. */
  .rs-form{grid-template-columns:140px minmax(170px,1fr) 150px auto;padding:22px 26px;align-self:center}
  .rs-form label span{white-space:nowrap}
  .rs-form .button{justify-self:stretch}
}
@media(max-width:639px){
  .resources-page .page-hero{padding:40px 0 34px}
  .resources-page #start-here{padding:28px 0 36px}
  .rs-photo{height:170px}
}