/* 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}}