/* ============================================================
Precision Pest Control — "The Inspection Report" design system
Shared across all pages. Tailwind CDN handles layout utilities;
this file owns type, color, and the signature field-report + bug system.
============================================================ */
:root{
--paper:#F6F4EF;
--paper-panel:#EFEBE2;
--paper-deep:#E7E1D5;
--ink:#17130F;
--ink-soft:#4A453E;
--gray-label:#6E6A62;
--line:#D9D3C7;
--line-strong:#C4BCAC;
--red:#E41824;
--red-dark:#B3121B;
--white:#FFFFFF;
--serif:"Montserrat",system-ui,-apple-system,Segoe UI,sans-serif; /* headlines — matches the logo wordmark */
--serif-text:"Montserrat",system-ui,sans-serif;
--sans:"Libre Franklin",system-ui,-apple-system,Segoe UI,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--sans);font-weight:400;line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:clip; /* clip not hidden — hidden breaks sticky scroll (memory) */
}
/* ---- Type ---- */
.font-serif{font-family:var(--serif)}
.font-serif-text{font-family:var(--serif-text)}
.font-mono{font-family:var(--mono)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.display{font-family:var(--serif);font-weight:800;line-height:1.02;letter-spacing:-.03em}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
/* mono micro-label — the field-report voice */
.tag{
font-family:var(--mono);font-size:.68rem;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;color:var(--gray-label);
}
.tag--red{color:var(--red)}
.tag-line{display:inline-flex;align-items:center;gap:.6rem}
.tag-line::before{content:"";width:26px;height:1px;background:var(--red)}
/* hairline rules */
.rule{height:1px;background:var(--line);border:0}
.rule-strong{height:1px;background:var(--line-strong);border:0}
/* ---- Reticle / crosshair device ---- */
.reticle{
position:relative;display:inline-flex;align-items:center;justify-content:center;
width:2.4rem;height:2.4rem;flex:none;
}
.reticle::before,.reticle::after{content:"";position:absolute;background:var(--red)}
.reticle::before{width:100%;height:1.5px;left:0}
.reticle::after{height:100%;width:1.5px;top:0}
.reticle > span{
position:relative;z-index:1;width:1.4rem;height:1.4rem;border-radius:50%;
border:1.5px solid var(--red);background:var(--paper);
font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--red);
display:flex;align-items:center;justify-content:center;letter-spacing:0;
}
/* ---- Buttons ---- */
.btn{
display:inline-flex;align-items:center;gap:.55rem;justify-content:center;
font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;
padding:.85rem 1.5rem;border-radius:2px;border:1.5px solid transparent;
cursor:pointer;transition:transform .12s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
line-height:1;
}
.btn-red{background:var(--red);color:#fff;box-shadow:0 1px 0 var(--red-dark)}
.btn-red:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-lg{padding:1.05rem 1.9rem;font-size:1.02rem}
/* ---- Field-report specimen panel ---- */
.specimen{
position:relative;background:var(--white);
border:1px solid var(--line-strong);
box-shadow:0 1px 0 var(--line);
}
.specimen__corner{position:absolute;width:9px;height:9px;border:1.5px solid var(--red)}
.specimen__corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.specimen__corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.specimen__corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.specimen__corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
/* grid-paper texture removed per client — heroes sit on clean warm paper */
.gridpaper{display:none}
/* ---- Header / nav ---- */
.nav-link{position:relative;font-weight:500;font-size:.95rem;color:var(--ink);padding:.25rem 0}
.nav-link::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:var(--red);transition:width .2s ease}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{width:100%}
.nav-link[aria-current="page"]{color:var(--red)}
/* sticky Free Inspection bar */
.inspect-bar{transition:background .2s ease}
.inspect-panel{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1)}
.inspect-panel.open{max-height:640px}
/* ---- Forms ---- */
.field{
width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
background:var(--white);border:1px solid var(--line-strong);border-radius:2px;
padding:.8rem .9rem;transition:border-color .15s ease,box-shadow .15s ease;
}
.field::placeholder{color:#9a938a}
.field:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(228,24,36,.14)}
.field-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-label);margin-bottom:.35rem;display:block}
select.field{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .8rem center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em}
.form-note.ok{color:#1c7a3f}
.form-note.err{color:var(--red-dark)}
/* ---- Scroll reveal: visible by default, enhanced when JS present (memory gotcha) ---- */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
html.js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}
/* ============================================================
BUG ENGINE — rendered on