/* santacruzportapottyrental.com, industrial archetype, hue 211, radius 10px, head Chivo */
:root{
  --steel:#1d2126; --ash:#5c636b; --dock:#eef1f3; --plate:#ffffff;
  --rule:#d3d9de; --signal:hsl(211 72% 48%); --signal-dk:hsl(211 72% 37%);
  --gantry:hsl(215 30% 20%); --gantry-dk:hsl(215 32% 14%);
  --notch:10px; --wrap:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:400 17px/1.65 'IBM Plex Sans',system-ui,sans-serif;color:var(--steel);background:var(--dock)}
h1,h2,h3{font-family:'Chivo',sans-serif;text-transform:uppercase;letter-spacing:.4px;line-height:1.08}
h1{font-size:clamp(2.5rem,6.4vw,4.4rem);font-weight:700}
h2{font-size:clamp(1.55rem,3vw,2.1rem);font-weight:600;margin:0 0 14px}
h3{font-size:1.15rem;font-weight:600;margin:22px 0 8px}
p{margin:0 0 16px}
ul{margin:0 0 16px 22px}
li{margin:0 0 8px}
a{color:var(--signal-dk)}
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* header */
header{background:var(--plate);border-bottom:3px solid var(--signal)}
.nav{display:flex;align-items:center;gap:26px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--steel);font-family:'Chivo',sans-serif;font-size:1.22rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.brand svg{flex:0 0 auto}
.nav-links{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav-links a{color:var(--steel);text-decoration:none;font-size:.94rem;font-weight:600}
.nav-links a:hover{color:var(--signal-dk)}
.nav-call{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1rem;color:var(--signal-dk);text-decoration:none;white-space:nowrap}

/* hero */
.hero{padding:64px 0 56px;text-align:center;background:
 linear-gradient(180deg,var(--plate) 0%,var(--dock) 100%)}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.8rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--ash);margin-bottom:18px}
.hero h1{max-width:880px;margin:0 auto 18px}
.hero .lift{max-width:640px;margin:0 auto 34px;font-size:1.12rem}

/* call card -- the worksite readout (the ONE shadow) */
.callcard{max-width:520px;margin:0 auto;background:var(--plate);border:1px solid var(--rule);border-top:6px solid var(--signal);border-radius:var(--notch);padding:26px 30px;box-shadow:0 10px 28px hsl(205 30% 60% / .22)}
.callcard .lbl{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--ash)}
.callcard .num{display:block;font-family:'IBM Plex Mono',monospace;font-size:clamp(1.7rem,4.4vw,2.3rem);font-weight:600;color:var(--steel);text-decoration:none;margin:6px 0 4px}
.callcard .num:hover{color:var(--signal-dk)}
.callcard .sub{font-size:.95rem;color:var(--ash);margin-bottom:16px}
.btn{display:inline-block;background:var(--signal);color:#fff;text-decoration:none;font-weight:600;font-size:1rem;padding:13px 26px;border-radius:var(--notch);border:none;cursor:pointer}
.btn:hover{background:var(--signal-dk)}
.btn:active{transform:scale(.98)}
.authority{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--ash);margin-top:16px;letter-spacing:.3px}

/* mascot */
.mascot{margin:34px auto 0;width:150px}

/* sections */
section{padding:56px 0}
section.alt{background:var(--plate);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

/* services grid: 2 feature + 4 standard, never identical triplets */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.svc a{background:var(--plate);border:1px solid var(--rule);border-radius:var(--notch);padding:22px;text-decoration:none;color:var(--steel);display:block}
.svc a:nth-child(1),.svc a:nth-child(2){border-top:4px solid var(--signal);padding:26px 24px}
.svc a:hover{border-color:var(--signal)}
.svc h3{margin:0 0 8px;color:var(--signal-dk)}
.svc p{margin:0;font-size:.95rem;color:var(--ash)}

/* accent band -- one blunt sentence */
.band{background:var(--signal);color:#fff;padding:44px 0;text-align:center}
.band .big{font-family:'Chivo',sans-serif;text-transform:uppercase;font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:600;line-height:1.15}
.band a{color:#fff}

/* checklist */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;list-style:none;margin:0}
.checks li{padding-left:28px;position:relative}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;background:var(--signal);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}

/* readout figure */
.readout{border:1px solid var(--rule);border-left:4px solid var(--gantry);background:var(--plate);border-radius:var(--notch);padding:18px 22px;font-family:'IBM Plex Mono',monospace;font-size:.9rem;color:var(--gantry-dk)}

/* faq */
.faq details{border:1px solid var(--rule);border-radius:var(--notch);background:var(--plate);margin-bottom:10px;padding:0 18px}
.faq summary{font-weight:600;padding:14px 0;cursor:pointer;list-style:none}
.faq summary::after{content:"+";float:right;color:var(--signal-dk);font-weight:700}
.faq details[open] summary::after{content:"-"}
.faq details p{color:var(--ash)}

/* prose pages */
.prose{max-width:760px;margin:0 auto}
.prose h2{margin-top:38px}
.page-head{background:var(--plate);border-bottom:1px solid var(--rule);padding:44px 0 36px}
.page-head .wrap{max-width:760px}
.page-head h1{font-size:clamp(2rem,4.6vw,3.1rem)}
.page-head .lift{max-width:700px;font-size:1.08rem;margin-top:12px}

/* inline cta */
.cta-inline{border:1px solid var(--rule);border-top:4px solid var(--signal);background:var(--plate);border-radius:var(--notch);padding:22px 26px;margin:30px 0;text-align:center}
.cta-inline .num{font-family:'IBM Plex Mono',monospace;font-size:1.5rem;font-weight:600;color:var(--steel);text-decoration:none;display:inline-block;margin:6px 0 10px}

/* form */
.qform{display:grid;gap:12px;max-width:520px}
.qform input,.qform textarea{padding:12px;border:1px solid var(--rule);border-radius:var(--notch);font:inherit;background:var(--plate)}
.qform input:focus-visible,.qform textarea:focus-visible{outline:2px solid var(--signal);outline-offset:1px}

/* footer -- HARD RULE grid: never flex, 1.8fr/1fr/1fr, always */
footer{background:var(--gantry-dk);color:hsl(215 20% 82%);padding:48px 0 90px;font-size:.93rem}
footer .cols{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:32px;align-items:start}
footer .cols a{display:block;margin:0 0 9px;color:hsl(215 20% 88%);text-decoration:none}
footer .cols a:hover{color:#fff}
footer .brand{color:#fff}
footer .brand svg .mk{fill:#fff}
footer h3{color:#fff;font-size:1rem;margin:0 0 12px}
footer .fine{margin-top:34px;padding-top:18px;border-top:1px solid hsl(215 25% 32%);font-size:.8rem;color:hsl(215 15% 65%)}

/* sticky mobile call bar -- the ONE motion */
.callbar{position:fixed;left:0;right:0;bottom:0;background:var(--signal);padding:12px 16px;text-align:center;z-index:50;transform:translateY(0);box-shadow:0 -6px 18px hsl(211 60% 30% / .3)}
.callbar a{color:#fff;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.15rem}
@media (prefers-reduced-motion:no-preference){
  .callbar{animation:rise .5s ease-out}
  @keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
@media (min-width:761px){.callbar{display:none}}

@media (max-width:760px){
  .cols2{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .checks{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .hero{padding:44px 0 40px}
}