/* P3 Plant Ltd — site stylesheet.
 *
 * The first block is the base CSS from the approved Design 1 mock-up,
 * copied verbatim. Below it are the interaction and viewport rules that
 * the mock-up expressed as style-hover / style-focus attributes and JS
 * viewport checks; they carry !important because the design keeps its
 * base declarations in inline style attributes.
 */

*{box-sizing:border-box}
body{margin:0;background:#E9E6E0;color:#0E1214;font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
:focus-visible{outline:3px solid #1982B7;outline-offset:3px}
::selection{background:#C6D82E;color:#0E1214}
img{max-width:100%}
a{color:#0E1214}
a:hover{color:#1982B7}
@keyframes p3draw{from{stroke-dashoffset:1700}to{stroke-dashoffset:0}}
@keyframes p3rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms !important;animation-delay:0ms !important;transition-duration:1ms !important}}
/* --- interaction states (was style-hover / style-focus) --- */
.p3f1:focus{left:8px !important}
.p3h1:hover{color:#C6D82E !important;border-bottom-color:#C6D82E !important}
.p3h2:hover{color:#C6D82E !important}
.p3h3:hover{background:#C6D82E !important}
.p3h4:hover{border-color:#C6D82E !important;color:#C6D82E !important}
.p3h5:hover{background:#DFDCD5 !important}
.p3h6:hover{color:#1982B7 !important}
.p3h7:hover{background:#1982B7 !important}
.p3h8:hover{background:#0E1214 !important;color:#E9E6E0 !important}
.p3f2:focus{border-color:#1982B7 !important}
/* --- viewport switches (was JS window.innerWidth < 760) --- */
@media (max-width:759.98px){.p3-wide{display:none !important}}
@media (min-width:760px){.p3-narrow{display:none !important}}

/* Customer photographs and the October 2026 homepage. */
.home-hero{position:relative;isolation:isolate;overflow:hidden;background:#243743;color:#fff;min-height:640px;display:flex;align-items:center}
.home-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:-2}
.home-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,24,31,.9) 0%,rgba(9,24,31,.76) 36%,rgba(9,24,31,.20) 76%),linear-gradient(0deg,rgba(9,24,31,.65),transparent 35%)}
.home-hero-content{width:100%;max-width:1280px;margin:auto;padding:clamp(48px,6.4vw,90px) clamp(16px,3.4vw,40px) 26px}
.eyebrow{font:500 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;margin:0 0 26px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:28px;height:2px;flex:none;background:#C6D82E}
.home-hero h1{font:700 clamp(46px,6.5vw,88px)/.97 'Saira Condensed',sans-serif;letter-spacing:-.015em;max-width:15ch;margin:0;text-wrap:balance}
.hero-estimating{font:400 clamp(18px,1.8vw,24px)/1.5 'IBM Plex Sans',sans-serif;margin:25px 0 0;color:#fff;max-width:38ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:17px 23px;text-decoration:none;text-transform:uppercase;letter-spacing:.05em;font:700 20px/1.1 'Saira Condensed',sans-serif;transition:background .15s,color .15s}
.button-light{background:#E9E6E0;color:#0E1214;border:1px solid #E9E6E0}
.button-outline{border:1px solid rgba(255,255,255,.7);color:#fff;background:rgba(9,24,31,.35)}
.button:hover{background:#C6D82E;color:#0E1214;border-color:#C6D82E}
.hero-footnote{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(42px,5vw,70px);padding-top:18px;border-top:1px solid rgba(255,255,255,.35);font:500 10px/1.6 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
.photo-section{padding:0 clamp(16px,3.4vw,40px) clamp(44px,5.4vw,88px)}
.photo-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.photo-link{display:block;overflow:hidden;background:#d9d6d0;border:1px solid #B4AFA6}
.photo-link img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .2s}
.photo-link:hover img{transform:scale(1.025)}
.fleet-photos{margin-top:30px}
.fleet-photos .photo-link img{aspect-ratio:1/1;object-position:center 55%}
.service-card-photo{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;display:block;margin-bottom:7px}
.about-copy{display:flex;flex-direction:column;gap:20px;max-width:58ch}
.about-copy h2{font:700 32px/1.1 'Saira Condensed',sans-serif;margin:0}
.about-copy p{font:400 18px/1.65 'IBM Plex Sans',sans-serif;color:#4C5052;margin:0}
@media(max-width:759.98px){
  .home-hero{min-height:620px}
  .home-hero-image{object-position:70% center}
  .home-hero::after{background:linear-gradient(90deg,rgba(9,24,31,.87),rgba(9,24,31,.46)),linear-gradient(0deg,rgba(9,24,31,.65),transparent 55%)}
  .home-hero h1{max-width:16ch}
  .hero-footnote{font-size:9px}
  .service-row{grid-template-columns:1fr auto!important;gap:10px 16px!important}
  .service-row>span:nth-child(2){grid-column:1/-1;grid-row:2}
  .service-row>span:last-child{grid-column:2;grid-row:1}
  header nav{flex-wrap:wrap;gap:2px 16px!important}
  header nav a{font-size:11px!important}
}
@media(max-width:380px){.hero-actions{flex-direction:column}.home-hero h1{font-size:44px}.hero-estimating{font-size:18px}}

/* Keep the pipe visible when the portrait drainage photograph is cropped. */
.service-card-photo[src*="/drainage-main."],.photo-link img[src*="/drainage-main."],.photo-link img[src*="/drainage-installation."]{object-position:50% 65%}