/* ============================================================
   The Plummer Painting Company — plummerinc.com
   Heritage craft design system · est. 1970
   ============================================================ */

:root{
  --espresso:#241a14;
  --brown:#453832;          /* logo field brown */
  --brown-soft:#5a4a41;
  --cream:#f4ecdd;
  --paper:#efe5d2;
  --paper-deep:#e7dac1;
  --ink:#2b211b;
  --red:#b3261e;            /* Plummer signature red */
  --red-deep:#8f1d17;
  --gold:#c29a5b;
  --hairline:rgba(43,33,27,.22);
  --hairline-light:rgba(244,236,221,.25);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Archivo",Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

/* paper grain over everything */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-deep)}

/* ---------- type ---------- */
h1,h2,h3,.display{font-family:var(--serif);font-weight:600;line-height:1.12;color:var(--ink);letter-spacing:-.01em}
.kicker{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:14px;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--red);display:inline-block}
.kicker.center{justify-content:center}
.kicker.center::after{content:"";width:34px;height:1px;background:var(--red);display:inline-block}
.kicker.on-dark{color:var(--gold)}
.kicker.on-dark::before,.kicker.on-dark::after{background:var(--gold)}
.lede{font-size:1.18rem;line-height:1.7;color:#4a3d33;max-width:62ch}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
section{position:relative}
.section-pad{padding:clamp(64px,9vw,120px) 0}

/* ---------- header ---------- */
.topbar{
  background:var(--espresso);color:var(--cream);
  font-size:.78rem;letter-spacing:.08em;
  border-bottom:1px solid rgba(244,236,221,.12);
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:7px;padding-bottom:7px}
.topbar a{color:var(--gold)}
.topbar .tag{font-family:var(--serif);font-style:italic;letter-spacing:.02em;color:rgba(244,236,221,.85)}

header.site{
  position:sticky;top:0;z-index:1000;
  background:var(--brown);
  border-bottom:3px solid var(--red);
  box-shadow:0 10px 30px rgba(36,26,20,.35);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:10px;padding-bottom:10px}
.logo img{height:64px;width:auto}
nav.main{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
nav.main a{
  color:var(--cream);font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 2px;border-bottom:2px solid transparent;transition:all .2s;
}
nav.main a:hover{color:#fff;border-bottom-color:var(--gold)}
nav.main a.active{color:var(--gold);border-bottom-color:var(--gold)}
.phone-btn{
  background:var(--red);color:#fff !important;padding:11px 20px;border-bottom:none !important;
  font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), 3px 3px 0 rgba(36,26,20,.5);
  white-space:nowrap;transition:transform .15s !important;
}
.phone-btn:hover{transform:translate(-1px,-1px);color:#fff}
.menu-toggle{display:none;background:none;border:1px solid var(--hairline-light);color:var(--cream);font-size:1.4rem;padding:4px 12px;cursor:pointer}

/* ---------- hero ---------- */
.hero{
  position:relative;color:var(--cream);
  min-height:min(88vh,820px);display:flex;align-items:flex-end;
  background:var(--espresso);
  overflow:hidden;
}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05)}
.hero .herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:640px){.hero .herovid{display:none}} /* phones get the photo — saves data */
.hero .scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(36,26,20,.62) 0%,rgba(36,26,20,.32) 40%,rgba(36,26,20,.9) 100%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(48px,7vw,90px);width:100%}
.hero h1{
  color:var(--cream);font-size:clamp(2.6rem,6.2vw,4.9rem);font-weight:500;max-width:13ch;
  text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .est{
  display:inline-flex;align-items:center;gap:14px;margin-bottom:22px;
  font-size:.75rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(194,154,91,.5);padding:9px 18px;
}
.hero p.sub{margin-top:20px;font-size:1.12rem;max-width:56ch;color:rgba(244,236,221,.92)}
.hero .cta-row{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero .credit{
  position:absolute;right:clamp(16px,3vw,40px);bottom:14px;z-index:3;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,236,221,.55);
}

.btn{
  display:inline-block;padding:15px 30px;font-weight:700;font-size:.85rem;
  letter-spacing:.16em;text-transform:uppercase;transition:transform .15s;
}
.btn-red{background:var(--red);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),4px 4px 0 rgba(36,26,20,.45)}
.btn-red:hover{transform:translate(-1px,-1px);color:#fff}
.btn-ghost{color:var(--cream);box-shadow:inset 0 0 0 1px rgba(244,236,221,.55)}
.btn-ghost:hover{color:#fff;box-shadow:inset 0 0 0 1px #fff}
.btn-ghost.on-light{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-ghost.on-light:hover{color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}

/* ---------- stat band ---------- */
.statband{background:var(--espresso);color:var(--cream);border-top:1px solid rgba(194,154,91,.35);border-bottom:1px solid rgba(194,154,91,.35)}
.statband .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:34px 26px;border-left:1px solid rgba(244,236,221,.12)}
.stat:first-child{border-left:none}
.stat b{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:600;color:var(--gold);display:block;line-height:1.1}
.stat span{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,236,221,.75)}

/* ---------- generic split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,84px);align-items:center}
.split .photo{position:relative}
.split .photo img{box-shadow:14px 14px 0 var(--paper-deep),0 24px 60px rgba(36,26,20,.28)}
.split .photo .plate{
  position:absolute;left:-12px;bottom:22px;background:var(--espresso);color:var(--cream);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;
  border-left:3px solid var(--red);
}
h2.sec{font-size:clamp(1.9rem,3.6vw,2.9rem);margin:18px 0 22px}
h2.sec em{font-style:italic;color:var(--red)}

/* ---------- project marquee grid ---------- */
.darksec{background:var(--espresso);color:var(--cream)}
.darksec h2.sec,.darksec h3{color:var(--cream)}
.darksec .lede{color:rgba(244,236,221,.85)}
.projgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:44px}
.projcard{position:relative;overflow:hidden;grid-column:span 4;background:#000;min-height:250px}
.projcard.wide{grid-column:span 8}
.projcard.tall{grid-row:span 2;min-height:520px}
.projcard img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.92;transition:transform .6s ease,opacity .4s}
.projcard:hover img{transform:scale(1.045);opacity:1}
.projcard .label{
  position:absolute;left:0;bottom:0;right:0;z-index:2;padding:44px 18px 14px;
  background:linear-gradient(180deg,transparent,rgba(20,13,9,.88));
}
.projcard .label b{font-family:var(--serif);font-weight:500;font-size:1.12rem;display:block;color:var(--cream)}
.projcard .label span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- guarantee certificate ---------- */
.certificate{
  background:var(--paper);
  border:1px solid var(--hairline);
  outline:1px solid var(--hairline);outline-offset:6px;
  box-shadow:0 30px 70px rgba(36,26,20,.18);
  padding:clamp(38px,6vw,80px);text-align:center;position:relative;
}
.certificate::before,.certificate::after{
  content:"";position:absolute;width:56px;height:56px;pointer-events:none;
  border:2px solid var(--gold);
}
.certificate::before{top:14px;left:14px;border-right:none;border-bottom:none}
.certificate::after{bottom:14px;right:14px;border-left:none;border-top:none}
.certificate .seal{
  width:104px;height:104px;margin:0 auto 26px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;letter-spacing:.08em;font-size:.66rem;text-transform:uppercase;
  box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--red),6px 8px 22px rgba(36,26,20,.3);
  transform:rotate(-6deg);
}
.certificate .seal b{font-family:var(--serif);font-size:1.5rem;letter-spacing:0;line-height:1}
.certificate h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:8px}
.certificate .script{font-family:var(--serif);font-style:italic;color:var(--red);font-size:1.3rem}

/* ---------- services ---------- */
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:44px}
.svc{
  background:var(--paper);border:1px solid var(--hairline);padding:34px 32px;position:relative;
  transition:transform .2s, box-shadow .2s;
}
.svc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(36,26,20,.16)}
.svc .num{
  font-family:var(--serif);font-style:italic;font-size:2.4rem;color:var(--gold);line-height:1;
  position:absolute;top:22px;right:26px;opacity:.9;
}
.svc h3{font-size:1.5rem;margin-bottom:12px;padding-right:60px}
.svc p{color:#4a3d33;font-size:.98rem}
.svc a.more{display:inline-block;margin-top:16px;font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.svc a.more::after{content:" →"}

/* two-column checklists on service pages */
.checkcols{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px;margin:22px 0 8px;padding:0;list-style:none}
.checkcols li{padding:9px 0 9px 30px;border-bottom:1px dashed var(--hairline);position:relative;font-size:.98rem}
.checkcols li::before{
  content:"";position:absolute;left:2px;top:16px;width:14px;height:8px;
  border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg);
}

/* ---------- timeline ---------- */
.timeline{position:relative;margin-top:54px;padding-left:34px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--gold),var(--red))}
.tl{position:relative;padding:0 0 44px 26px}
.tl::before{
  content:"";position:absolute;left:-34px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--cream);border:3px solid var(--red);margin-left:2px;
}
.tl .year{font-family:var(--serif);font-style:italic;color:var(--red);font-size:1.35rem}
.tl h3{font-size:1.35rem;margin:4px 0 8px}
.tl p{max-width:60ch;color:#4a3d33}

/* ---------- testimonials ---------- */
.quotewall{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:44px}
.quote{
  background:var(--brown);color:var(--cream);padding:38px 34px 30px;position:relative;
  border-top:3px solid var(--gold);
}
.quote::before{
  content:"\201C";font-family:var(--serif);font-size:5rem;line-height:0;
  position:absolute;top:38px;left:26px;color:var(--gold);opacity:.6;
}
.quote p{position:relative;z-index:1;font-family:var(--serif);font-size:1.08rem;line-height:1.6;padding-left:28px;font-weight:400}
.quote footer{margin-top:18px;padding-left:28px;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- affiliations ---------- */
.affband{background:var(--paper);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.affband .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-top:34px;padding-bottom:34px}
.affband .kicker{flex-shrink:0}
.affband img{height:56px;width:auto;mix-blend-mode:multiply}

/* ---------- tables (projects) ---------- */
.ptable{width:100%;border-collapse:collapse;margin-top:34px;font-size:.95rem}
.ptable th{
  text-align:left;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--red);
  padding:12px 14px;border-bottom:2px solid var(--ink);
}
.ptable td{padding:13px 14px;border-bottom:1px solid var(--hairline);vertical-align:top}
.ptable tr:hover td{background:rgba(194,154,91,.1)}
.ptable td:first-child{font-weight:600;font-family:var(--serif);font-size:1.02rem}
.table-scroll{overflow-x:auto}

/* ---------- awards list ---------- */
.awards{margin-top:34px;border-top:1px solid var(--hairline)}
.award{display:grid;grid-template-columns:110px 1fr;gap:26px;padding:20px 6px;border-bottom:1px solid var(--hairline)}
.award .yr{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--red)}
.award p{color:#4a3d33}
.award b{color:var(--ink)}

/* ---------- careers ---------- */
.job{background:var(--paper);border:1px solid var(--hairline);border-left:4px solid var(--red);padding:30px 32px;margin-top:22px}
.job h3{font-size:1.4rem;margin-bottom:8px}
.job .meta{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.job ul{margin:10px 0 0 20px}
.job ul li{margin-bottom:6px}

/* ---------- contact ---------- */
.contact-card{background:var(--espresso);color:var(--cream);padding:clamp(34px,5vw,58px);position:relative;overflow:hidden}
.contact-card h3{color:var(--cream);font-size:1.6rem;margin-bottom:20px}
.contact-card .row{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid rgba(244,236,221,.14);align-items:baseline}
.contact-card .row span{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);width:86px;flex-shrink:0}
.contact-card .row a,.contact-card .row div{color:var(--cream);font-size:1.05rem}
.contact-card .row a:hover{color:var(--gold)}

/* ---------- CTA band ---------- */
.ctaband{
  background:linear-gradient(rgba(36,26,20,.82),rgba(36,26,20,.82)),var(--ctabg,none) center/cover;
  color:var(--cream);text-align:center;
}
.ctaband h2{color:var(--cream);font-size:clamp(1.9rem,4vw,3rem);max-width:24ch;margin:16px auto 12px}
.ctaband p{max-width:60ch;margin:0 auto;color:rgba(244,236,221,.9)}
.ctaband .cta-row{display:flex;gap:16px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer.site{background:var(--espresso);color:rgba(244,236,221,.85);border-top:3px solid var(--red)}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding:58px 0 44px}
footer.site img.flogo{height:74px;margin-bottom:16px}
footer.site .script{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1.15rem}
footer.site h4{color:var(--cream);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:18px}
footer.site ul{list-style:none}
footer.site ul li{margin-bottom:9px}
footer.site a{color:rgba(244,236,221,.85)}
footer.site a:hover{color:var(--gold)}
footer.site .legal{border-top:1px solid rgba(244,236,221,.14);padding:20px 0;font-size:.8rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:rgba(244,236,221,.55)}

/* ---------- page hero (interior) ---------- */
.pagehero{background:var(--brown);color:var(--cream);position:relative;overflow:hidden}
.pagehero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;filter:saturate(.9)}
.pagehero .wrap{position:relative;z-index:2;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.pagehero h1{color:var(--cream);font-size:clamp(2.3rem,5vw,3.8rem);font-weight:500;margin-top:16px}
.pagehero p{margin-top:14px;max-width:62ch;color:rgba(244,236,221,.9);font-size:1.1rem}

/* ---------- reveal animation ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .topbar .tag{display:none}
  .topbar .wrap{justify-content:center}
}
@media(max-width:960px){
  .split,.quotewall,.svcgrid{grid-template-columns:1fr}
  .statband .wrap{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:none;border-top:1px solid rgba(244,236,221,.12)}
  .projgrid{grid-template-columns:repeat(2,1fr)}
  .projcard,.projcard.wide{grid-column:span 1}
  .projcard.tall{grid-row:span 1;min-height:250px}
  footer.site .cols{grid-template-columns:1fr;gap:34px}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--brown);
    flex-direction:column;align-items:flex-start;padding:18px 24px 24px;gap:16px;
    border-bottom:3px solid var(--red);
  }
  nav.main.open{display:flex}
  .menu-toggle{display:block}
  .checkcols{grid-template-columns:1fr}
  .award{grid-template-columns:70px 1fr;gap:16px}
}