/*
Theme Name: Pacific Site Services
Theme URI: https://pacsiteservices.com/
Author: Pacific Site Services
Description: One-page marketing theme for Pacific Site Services, a portable restroom and site services company serving the San Francisco Bay Area. Contact details, hours and service area are editable under Appearance > Customize > Site Contact Details.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pacific-site-services
Tags: one-column, custom-logo, custom-colors, editor-style, full-width-template
*/

:root{
  --navy:#00032E;
  --navy-2:#0A1145;
  --navy-3:#141C5C;
  --cyan:#02A9D6;
  --cyan-lt:#7FD8F2;
  --steel:#6E7680;
  --steel-lt:#C9D0D8;
  --paper:#F4F7FA;
  --white:#fff;
  --shadow:0 2px 0 rgba(0,3,46,.06), 0 18px 40px -24px rgba(0,3,46,.45);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--navy);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,.display{
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;
  font-weight:800; text-transform:uppercase; line-height:.95;
  letter-spacing:.005em; margin:0;
}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:1.45rem; line-height:1.05}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; font-size:.82rem;
  color:var(--cyan); margin:0 0 .6rem;
}
.eyebrow.on-dark{color:var(--cyan-lt)}
.lede{font-size:1.1rem; color:#3C4257; max-width:60ch}
.on-dark .lede,.dark .lede{color:#B9C2DA}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:1rem;
  padding:.85rem 1.5rem; border-radius:3px; text-decoration:none;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cyan); color:#00121C}
.btn-primary:hover{background:#28BDE6}
.btn-ghost{border-color:rgba(255,255,255,.55); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-3)}
:focus-visible{outline:3px solid var(--cyan); outline-offset:3px}

/* ---------- header ---------- */
.topbar{
  background:var(--navy); color:#C6CEE6;
  font-family:"Barlow Semi Condensed",sans-serif; font-size:.9rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.topbar .wrap{display:flex; justify-content:space-between; gap:16px; padding-top:.5rem; padding-bottom:.5rem; flex-wrap:wrap}
.topbar strong{color:#fff; font-weight:600}
header.site{
  position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid #E2E8EF;
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:14px; padding-bottom:14px}
.logo img{width:212px}
nav.main{display:flex; align-items:center; gap:28px}
nav.main a{
  text-decoration:none; font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:600; text-transform:uppercase; letter-spacing:.07em; font-size:1rem;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
nav.main a:hover{border-color:var(--cyan)}
nav.main a,.btn{white-space:nowrap}
.navlinks{display:flex; gap:28px}
section,#top{scroll-margin-top:92px}
.phone-link{font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:1.45rem; text-decoration:none; white-space:nowrap}
@media(max-width:980px){ .navlinks{display:none} }
@media(max-width:900px){ .logo img{width:170px} nav.main{gap:14px} }
@media(max-width:640px){
  .topbar .tb-2{display:none}
  .topbar .wrap{font-size:.78rem}
  header.site .wrap{padding-top:11px; padding-bottom:11px}
  .logo img{width:148px}
  .phone-link{font-size:1.25rem}
  nav.main .btn{display:none}
}

/* mobile call bar */
.callbar{display:none}
@media(max-width:640px){
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:0;
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    box-shadow:0 -8px 24px -12px rgba(0,3,46,.6);
  }
  .callbar a{
    display:flex; align-items:center; justify-content:center; gap:.4rem;
    padding:1rem .5rem; text-decoration:none;
    font-family:"Barlow Semi Condensed",sans-serif; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; font-size:1rem;
  }
  .callbar .c1{background:var(--cyan); color:#00121C}
  .callbar .c2{background:var(--navy); color:#fff}
  body{padding-bottom:58px}
}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); overflow:hidden}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:62% 42%; opacity:.92;
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(0,3,46,.93) 0%, rgba(0,3,46,.76) 32%, rgba(0,3,46,.20) 60%, rgba(0,3,46,.06) 100%),
    linear-gradient(to top, rgba(0,3,46,.72) 0%, rgba(0,3,46,0) 42%);
}
.hero-inner{position:relative; padding:clamp(72px,11vw,132px) 0 clamp(56px,7vw,84px)}
.hero h1{
  font-size:clamp(2.9rem,7.4vw,5.6rem); color:#fff; max-width:15ch;
  text-shadow:0 2px 30px rgba(0,3,46,.5);
}
.hero h1 .hl{color:var(--cyan-lt)}
.hero p.lede{color:#D6DEF2; margin-top:1.2rem; max-width:46ch; font-size:1.15rem}
@media(max-width:640px){ .hero p.lede{font-size:1rem} .hero-cta .btn{flex:1 1 auto; justify-content:center} }
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:2rem}
.rule{width:70px; height:5px; background:var(--cyan); margin-bottom:1.5rem}

/* fact strip */
.facts{background:var(--navy-2); border-top:1px solid rgba(255,255,255,.09)}
.facts .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.fact{padding:22px 26px 24px; border-left:1px solid rgba(255,255,255,.09)}
.fact:first-child{border-left:0; padding-left:0}
.fact b{
  display:block; font-family:"Barlow Condensed",sans-serif; font-weight:800;
  text-transform:uppercase; color:#fff; font-size:1.28rem; line-height:1.05;
}
.fact span{font-family:"Barlow Semi Condensed",sans-serif; font-size:.92rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan-lt)}
@media(max-width:860px){ .facts .wrap{grid-template-columns:repeat(2,1fr)} .fact{border-left:0; padding-left:0; padding-right:18px} }

/* ---------- sections ---------- */
section{padding:clamp(64px,8vw,104px) 0}
section.dark{background:var(--navy); color:#E7ECF7}
section.dark h2{color:#fff}
.sec-head{max-width:64ch; margin-bottom:48px}

/* fleet cards — placard device echoes the decal on the unit door */
.fleet{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media(max-width:1000px){.fleet{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fleet{grid-template-columns:1fr}}
.unit{
  background:#fff; border:1px solid #E2E8EF; border-radius:4px;
  padding:22px 22px 24px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .18s ease, border-color .18s ease;
}
.unit:hover{transform:translateY(-3px); border-color:var(--cyan)}
.placard{
  align-self:flex-start; background:#fff; border:2.5px solid var(--cyan);
  border-radius:2px; padding:6px 12px 7px; margin-bottom:4px;
  font-family:"Barlow Condensed",sans-serif; font-weight:800; text-transform:uppercase;
  font-size:.78rem; letter-spacing:.13em; color:var(--cyan);
}
.unit h3{color:var(--navy)}
.unit p{margin:0; font-size:.97rem; color:#4A5266; line-height:1.55}
.unit .spec{
  margin-top:auto; padding-top:14px; border-top:1px dashed #D8E0E8;
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.07em; font-size:.85rem; color:var(--steel);
}

/* split */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.photo-frame{position:relative; border-radius:4px; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,3,46,.7)}
.photo-frame img{width:100%}
.photo-frame figcaption{
  position:absolute; left:0; bottom:0; right:0; padding:26px 22px 16px;
  background:linear-gradient(to top, rgba(0,3,46,.85), rgba(0,3,46,0));
  color:#DCE4F5; font-family:"Barlow Semi Condensed",sans-serif;
  text-transform:uppercase; letter-spacing:.08em; font-size:.85rem;
}
.checklist{list-style:none; margin:24px 0 0; padding:0}
.checklist li{position:relative; padding:0 0 14px 34px; font-size:1.02rem}
.checklist li::before{
  content:""; position:absolute; left:0; top:.52em; width:13px; height:13px;
  background:var(--cyan); border-radius:2px;
}
.dark .checklist li{color:#C9D2E8}

/* coverage */
.counties{display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0; padding:0; list-style:none}
.counties li{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; font-size:.95rem;
  border:1px solid rgba(255,255,255,.3); border-radius:100px;
  padding:.45rem 1.05rem; color:#fff;
}
.counties li.core{background:var(--cyan); border-color:var(--cyan); color:#00121C}
.jobs{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:52px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14)}
@media(max-width:820px){.jobs{grid-template-columns:1fr}}
.job{background:var(--navy); padding:26px 24px}
.job b{display:block; font-family:"Barlow Condensed",sans-serif; font-weight:800; text-transform:uppercase; font-size:1.3rem; color:#fff; margin-bottom:6px}
.job p{margin:0; font-size:.96rem; color:#AFBAD6; line-height:1.55}

.ruleofthumb{margin-top:34px; background:#fff; border:1px solid #E2E8EF; border-left:4px solid var(--cyan); border-radius:3px; padding:22px 24px; box-shadow:var(--shadow)}
.ruleofthumb ul{list-style:none; margin:0; padding:0}
.ruleofthumb li{font-size:.97rem; color:#4A5266; padding:0 0 10px 0; line-height:1.5}
.ruleofthumb li:last-child{padding-bottom:0}
.ruleofthumb b{color:var(--navy)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{border-top:4px solid var(--navy); padding-top:20px}
.step:nth-child(2){border-color:var(--cyan)}
.step:nth-child(3){border-color:var(--steel-lt)}
.step .num{
  font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:.9rem;
  letter-spacing:.18em; color:var(--steel); display:block; margin-bottom:8px;
}
.step p{font-size:.99rem; color:#4A5266; margin-top:8px}

/* quote form */
.quote{background:var(--navy-2); color:#fff}
.quote-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px,5vw,64px)}
@media(max-width:900px){.quote-grid{grid-template-columns:1fr}}
.form-card{background:#fff; color:var(--navy); border-radius:4px; padding:clamp(24px,3vw,36px); box-shadow:var(--shadow)}
.field{margin-bottom:16px}
.field label{
  display:block; font-family:"Barlow Semi Condensed",sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; font-size:.83rem; color:#3C4257; margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--navy);
  padding:.7rem .8rem; border:1px solid #CBD5DF; border-radius:3px; background:#FBFDFE;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan); background:#fff}
.field textarea{min-height:96px; resize:vertical}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.form-note{font-size:.85rem; color:var(--steel); margin:14px 0 0}
.contact-block{margin-top:32px}
.contact-block a{
  display:block; font-family:"Barlow Condensed",sans-serif; font-weight:800;
  text-transform:uppercase; text-decoration:none; color:#fff; line-height:1.1;
}
.contact-block .big{font-size:clamp(2.1rem,4.4vw,3rem); color:var(--cyan-lt)}
.contact-block .sm{font-size:1.35rem; margin-top:10px; word-break:break-all}
.contact-block .lbl{font-family:"Barlow Semi Condensed",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; color:#8E9BBD; margin-top:22px}

/* footer */
footer{background:var(--navy); color:#93A0C2; padding:56px 0 40px; border-top:4px solid var(--cyan)}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; align-items:start}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr; gap:28px}}
.foot-mark{font-family:"Barlow Condensed",sans-serif; font-weight:800; text-transform:uppercase; color:#fff; font-size:1.9rem; line-height:.95}
.foot-mark span{color:var(--cyan); display:block; font-size:1.1rem; letter-spacing:.22em; margin-top:4px}
footer h4{
  font-family:"Barlow Semi Condensed",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; font-size:.85rem; color:#fff; margin:0 0 12px;
}
footer ul{list-style:none; margin:0; padding:0; font-size:.95rem}
footer li{margin-bottom:7px}
footer a{text-decoration:none}
footer a:hover{color:var(--cyan-lt)}
.legal{margin-top:44px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:.83rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}

/* reveal */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none; transition:none}
  .unit:hover{transform:none}
}

/* ---------- WordPress core classes ---------- */
.screen-reader-text{
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:#fff; clip-path:none; color:var(--navy); display:block;
  font-size:1rem; height:auto; left:8px; padding:14px 22px; top:8px;
  text-decoration:none; width:auto; z-index:100000;
}
.alignleft{float:left; margin:0 1.5em 1em 0}
.alignright{float:right; margin:0 0 1em 1.5em}
.aligncenter{display:block; margin:0 auto 1em}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:.9rem; color:var(--steel)}
.sticky,.gallery-caption,.bypostauthor{}

/* ---------- honeypot + form status ---------- */
.pss-hp{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden}
.form-status{
  border-radius:3px; padding:16px 18px; margin-bottom:22px; font-size:.97rem; line-height:1.5;
}
.form-status.ok{background:#E7F7FC; border-left:4px solid var(--cyan); color:#0A3A4A}
.form-status.bad{background:#FDECEA; border-left:4px solid #B4241F; color:#7A1713}
.form-status strong{display:block; margin-bottom:2px}

/* ---------- interior pages & posts ---------- */
.page-wrap{max-width:820px; margin:0 auto; padding:clamp(56px,7vw,96px) 24px}
.page-wrap h1{font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:.5em}
.page-wrap h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin:1.4em 0 .5em}
.page-wrap h3{margin:1.4em 0 .4em}
.page-wrap a{color:#0A6E92}
.page-wrap img{height:auto; border-radius:3px}
.entry-meta{
  font-family:"Barlow Semi Condensed",sans-serif; text-transform:uppercase;
  letter-spacing:.1em; font-size:.85rem; color:var(--steel); margin-bottom:1.5em;
}
.post-nav{display:flex; justify-content:space-between; gap:20px; margin-top:56px; flex-wrap:wrap}