/* =========================================================
   PNW Paint Pros — Premium design system
   Brand green #1E895F (sampled from logo)
   Display: Marcellus  ·  Body/UI: Hanken Grotesk
   ========================================================= */

:root{
  /* color */
  --ink:        #16201b;   /* warm forest-black text */
  --ink-soft:   #46524b;
  --ink-faint:  #6d776f;
  --forest:     #0e3a28;   /* deep evergreen — dark sections */
  --forest-2:   #0a2e20;
  --brand:      #1e895f;   /* logo green */
  --brand-deep: #156a49;
  --brand-tint: #e9f1ec;   /* light green wash */
  --cream:      #f5f2ea;   /* warm paper */
  --paper:      #fcfaf5;
  --white:      #ffffff;
  --gold:       #b3955b;   /* restrained brass accent */
  --line:       rgba(22,32,27,.12);
  --line-soft:  rgba(22,32,27,.08);
  --line-light: rgba(255,255,255,.16);

  /* type */
  --display: "Marcellus", "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* metrics */
  --wrap: 1200px;
  --wrap-narrow: 920px;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(22,32,27,.05), 0 12px 32px -16px rgba(22,32,27,.18);
  --shadow-lg: 0 2px 6px rgba(22,32,27,.06), 0 30px 60px -28px rgba(22,32,27,.30);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.06; letter-spacing:-.01em; margin:0; }
h1{ font-size:clamp(2.6rem, 6.2vw, 5rem); }
h2{ font-size:clamp(2rem, 4.4vw, 3.4rem); }
h3{ font-size:clamp(1.3rem, 2vw, 1.7rem); }
p{ margin:0; text-wrap:pretty; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.narrow{ max-width:var(--wrap-narrow); }
section{ position:relative; }

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand-deep);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; }
.eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; }
.eyebrow.on-dark{ color:#bfe6d3; }
.eyebrow.on-dark::before,.eyebrow.on-dark.center::after{ background:var(--gold); }

.lead{ font-size:1.18rem; color:var(--ink-soft); line-height:1.6; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  letter-spacing:.01em;
  padding:15px 26px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 10px 24px -12px rgba(30,137,95,.7); }
.btn-primary:hover{ background:var(--brand-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.btn-ghost.on-dark{ color:#fff; border-color:var(--line-light); }
.btn-ghost.on-dark:hover{ background:#fff; color:var(--forest); border-color:#fff; }
.btn-gold{ background:var(--gold); color:#231c0e; }
.btn-gold:hover{ filter:brightness(1.06); }
.btn-lg{ padding:18px 32px; font-size:1.05rem; }

.link-arrow{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--brand-deep); }
.link-arrow svg{ transition:transform .2s ease; }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(252,250,245,.86);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav{ display:flex; align-items:center; gap:28px; height:78px; }
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:46px; width:auto; }
.nav__links{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:.95rem; font-weight:500; color:var(--ink-soft);
  position:relative; padding:6px 0; transition:color .18s ease;
}
.nav__links a:hover,.nav__links a.active{ color:var(--ink); }
.nav__links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--brand);
}
.nav__cta{ display:flex; align-items:center; gap:14px; }
.nav__phone{ font-weight:600; color:var(--ink); display:flex; align-items:center; gap:.5em; }
.nav__phone svg{ color:var(--brand); }
.nav__toggle{ display:none; }

.nav__toggle{
  width:46px; height:46px; border:1px solid var(--line); border-radius:8px;
  background:var(--white); display:none; place-items:center; cursor:pointer;
}
.nav__toggle span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.nav__toggle span::before,.nav__toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); }
.nav__toggle span::before{ top:-6px; } .nav__toggle span::after{ top:6px; }

.mnav{ position:fixed; inset:78px 0 0; background:var(--paper); z-index:49; padding:26px 28px;
  display:flex; flex-direction:column; gap:6px; transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease; }
.mnav.open{ opacity:1; transform:none; pointer-events:auto; }
.mnav a{ font-family:var(--display); font-size:1.5rem; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.mnav .btn{ margin-top:16px; justify-content:center; }

@media(max-width:980px){
  .nav__links{ display:none; }
  .nav__phone span{ display:none; }
  .nav__toggle{ display:grid; }
}
@media(min-width:981px){ .mnav{ display:none; } }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; background:var(--forest); }
.hero__media{ position:absolute; inset:0; }
.hero__media .ph{ width:100%; height:100%; border:0; border-radius:0; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(8,40,28,.95) 0%, rgba(8,40,28,.82) 46%, rgba(8,40,28,.55) 100%);
}
.hero__inner{ position:relative; z-index:2; padding:clamp(72px,12vw,140px) 0 clamp(56px,8vw,96px); }
.hero__content{ max-width:680px; color:#fff; }
.hero h1{ color:#fff; margin:22px 0 0; }
.hero__sub{ color:rgba(255,255,255,.82); font-size:1.22rem; line-height:1.55; margin-top:22px; max-width:560px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__trust{
  display:flex; flex-wrap:wrap; gap:28px 40px; margin-top:46px; padding-top:30px;
  border-top:1px solid var(--line-light);
}
.trust-item{ color:#fff; }
.trust-item b{ font-family:var(--display); font-size:1.5rem; display:block; line-height:1; }
.trust-item span{ font-size:.82rem; letter-spacing:.04em; color:rgba(255,255,255,.7); }
.stars{ color:var(--gold); letter-spacing:2px; font-size:1.05rem; }

/* ---------- image placeholder ---------- */
.ph{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(22,32,27,.05) 0 14px, rgba(22,32,27,.02) 14px 28px),
    var(--brand-tint);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.ph__label{
  font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); background:rgba(252,250,245,.78);
  padding:7px 12px; border-radius:100px; border:1px solid var(--line-soft);
  text-align:center; max-width:80%;
}
.ph.dark{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,.02) 14px 28px),
    var(--forest-2);
}
.ph.dark .ph__label{ background:rgba(255,255,255,.1); color:#cfe3d8; border-color:var(--line-light); }

/* ---------- section heading ---------- */
.sec{ padding:clamp(72px,9vw,120px) 0; }
.sec-head{ max-width:680px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ margin-top:18px; }
.sec-head p{ margin-top:18px; }
.sec--cream{ background:var(--cream); }
.sec--tint{ background:var(--brand-tint); }
.sec--forest{ background:var(--forest); color:#fff; }
.sec--forest h2,.sec--forest h3{ color:#fff; }
.sec--forest p{ color:rgba(255,255,255,.78); }

/* ---------- services grid ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:54px; }
.svc-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; display:flex; flex-direction:column; min-height:230px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.svc-card__num{ font-family:var(--display); font-size:.95rem; color:var(--gold); letter-spacing:.1em; }
.svc-card h3{ margin:14px 0 10px; font-size:1.42rem; }
.svc-card p{ color:var(--ink-soft); font-size:1rem; flex:1; }
.svc-card .link-arrow{ margin-top:18px; font-size:.92rem; }
@media(max-width:900px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- split feature ---------- */
.split{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,6vw,84px); align-items:center; }
.split.rev{ grid-template-columns:1fr 1.05fr; }
.split__media{ position:relative; }
.split__media .ph{ aspect-ratio:4/5; }
@media(max-width:880px){ .split,.split.rev{ grid-template-columns:1fr; } .split__media{ order:-1; } }

/* feature list */
.flist{ display:grid; gap:22px; margin-top:30px; }
.fitem{ display:flex; gap:16px; }
.fitem__ic{
  flex:none; width:44px; height:44px; border-radius:8px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-deep); border:1px solid var(--line-soft);
}
.fitem h4{ font-family:var(--sans); font-weight:700; font-size:1.05rem; margin:0 0 3px; }
.fitem p{ color:var(--ink-soft); font-size:1rem; }

/* ---------- stat band ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat{ text-align:center; }
.stat b{ font-family:var(--display); font-size:clamp(2.4rem,4vw,3.2rem); display:block; line-height:1; }
.stat span{ font-size:.86rem; letter-spacing:.04em; color:var(--ink-faint); text-transform:uppercase; }
.sec--forest .stat span{ color:rgba(255,255,255,.66); }
@media(max-width:680px){ .stats{ grid-template-columns:repeat(2,1fr); gap:36px 24px; } }

/* ---------- process ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:54px; counter-reset:step; }
.step{ border-top:2px solid var(--line); padding-top:22px; }
.step__n{ font-family:var(--display); font-size:1.1rem; color:var(--brand); }
.step h3{ font-size:1.3rem; margin:10px 0 8px; }
.step p{ color:var(--ink-soft); font-size:.98rem; }
@media(max-width:760px){ .steps{ grid-template-columns:repeat(2,1fr); gap:34px 22px; } }
@media(max-width:440px){ .steps{ grid-template-columns:1fr; } }

/* ---------- gallery ---------- */
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:46px; }
.gal .ph{ aspect-ratio:1; }
.gal .ph.tall{ grid-row:span 2; aspect-ratio:auto; }
@media(max-width:760px){ .gal{ grid-template-columns:repeat(2,1fr); } }

/* ---------- reviews ---------- */
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px; }
.rev-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.rev-card .stars{ font-size:1rem; }
.rev-card p{ margin:16px 0 20px; font-size:1.06rem; line-height:1.55; }
.rev-card cite{ font-style:normal; font-weight:700; display:block; }
.rev-card small{ color:var(--ink-faint); }
@media(max-width:880px){ .rev-grid{ grid-template-columns:1fr; } }

/* ---------- areas / chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  padding:11px 20px; border-radius:100px; border:1px solid var(--line);
  background:var(--white); font-weight:500; font-size:.98rem;
  transition:all .18s ease;
}
.chip:hover{ border-color:var(--brand); color:var(--brand-deep); transform:translateY(-2px); }
.sec--forest .chip{ background:rgba(255,255,255,.06); border-color:var(--line-light); color:#fff; }
.sec--forest .chip:hover{ background:#fff; color:var(--forest); }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--forest); color:#fff; padding:clamp(56px,7vw,90px) 0; text-align:center; }
.cta-band h2{ color:#fff; max-width:760px; margin-inline:auto; }
.cta-band p{ color:rgba(255,255,255,.78); margin:18px auto 0; max-width:540px; }
.cta-band__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:34px; }

/* ---------- footer ---------- */
.footer{ background:var(--forest-2); color:#fff; padding:72px 0 36px; }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer__logo{ background:#fff; border-radius:6px; padding:14px 16px; display:inline-block; }
.footer__logo img{ height:40px; }
.footer p.fdesc{ color:rgba(255,255,255,.62); margin-top:18px; font-size:.96rem; max-width:300px; }
.footer h5{ font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#bfe6d3; margin:0 0 16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer ul a{ color:rgba(255,255,255,.72); font-size:.96rem; }
.footer ul a:hover{ color:#fff; }
.footer__bottom{
  margin-top:52px; padding-top:24px; border-top:1px solid var(--line-light);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.86rem; color:rgba(255,255,255,.55);
}
.footer__bottom a{ color:rgba(255,255,255,.72); }
.badge-ccb{ display:inline-flex; align-items:center; gap:.5em; padding:6px 12px; border:1px solid var(--line-light); border-radius:100px; font-size:.82rem; color:#bfe6d3; }
@media(max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr; gap:36px; } }
@media(max-width:480px){ .footer__grid{ grid-template-columns:1fr; } }

/* ---------- page hero (interior pages) ---------- */
.phero{ background:var(--forest); color:#fff; padding:clamp(54px,8vw,96px) 0 clamp(48px,6vw,72px); position:relative; overflow:hidden; }
.phero .crumbs{ font-size:.86rem; color:rgba(255,255,255,.6); margin-bottom:18px; }
.phero .crumbs a:hover{ color:#fff; }
.phero h1{ color:#fff; max-width:760px; }
.phero p{ color:rgba(255,255,255,.8); margin-top:20px; max-width:600px; font-size:1.16rem; }

/* prose */
.prose{ max-width:760px; }
.prose h2{ margin:48px 0 16px; }
.prose h3{ margin:34px 0 12px; }
.prose p{ margin:0 0 18px; color:var(--ink-soft); font-size:1.08rem; }
.prose ul{ margin:0 0 22px; padding-left:0; list-style:none; display:grid; gap:12px; }
.prose ul li{ position:relative; padding-left:30px; color:var(--ink-soft); }
.prose ul li::before{ content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px; border-radius:2px; background:var(--brand); }

/* utility */
.center{ text-align:center; }
.mt-0{ margin-top:0; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }
.reveal{ transition:opacity .85s ease, transform .85s ease; }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ---------- forms ---------- */
.fld{ display:grid; gap:8px; }
.fld span{ font-weight:600; font-size:.9rem; color:var(--ink); }
.fld input,.fld select,.fld textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); width:100%; transition:border-color .18s ease, box-shadow .18s ease;
}
.fld textarea{ resize:vertical; }
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(30,137,95,.14);
}
.fld input[type="file"]{ padding:11px 13px; background:var(--paper); cursor:pointer; font-size:.92rem; }
.fld input[type="file"]::file-selector-button{ font-family:var(--sans); font-weight:600; font-size:.85rem; border:1px solid var(--line); background:#fff; color:var(--ink); padding:8px 14px; border-radius:6px; margin-right:12px; cursor:pointer; transition:border-color .18s ease,color .18s ease; }
.fld input[type="file"]::file-selector-button:hover{ border-color:var(--brand); color:var(--brand-deep); }
@media(max-width:820px){
  .quote-grid{ grid-template-columns:1fr !important; }
  form > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; }
  .wrap[style*="grid-template-columns:1.4fr"]{ grid-template-columns:1fr !important; gap:40px !important; }
  .wrap[style*="grid-template-columns:1.2fr"]{ grid-template-columns:1fr !important; gap:40px !important; }
  aside[style*="sticky"]{ position:static !important; }
}

/* ---------- FAQ details ---------- */
details summary::-webkit-details-marker{ display:none; }
details summary{ position:relative; padding-right:34px; }
details summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-weight:400; font-size:1.5rem; color:var(--brand); transition:transform .2s ease;
}
details[open] summary::after{ content:"\2212"; }

/* =========================================================
   PREMIUM MOTION
   ========================================================= */
:root{ --ease-out:cubic-bezier(.16,1,.3,1); }

/* header shrink on scroll */
.site-header{ transition:height .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.site-header.scrolled{ box-shadow:0 10px 30px -18px rgba(22,32,27,.4); border-color:var(--line); }
.site-header.scrolled .nav{ height:64px; }
.nav{ transition:height .3s ease; }
.nav__logo img{ transition:height .3s ease; }
.site-header.scrolled .nav__logo img{ height:38px; }

/* refined reveal — base state is VISIBLE; hidden only when JS confirms it runs */
.reveal{ opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change:opacity, transform; }
html.js-motion .reveal{ opacity:0; transform:translateY(26px); }
html.js-motion .reveal[data-reveal="left"]{ transform:translateX(-32px); }
html.js-motion .reveal[data-reveal="right"]{ transform:translateX(32px); }
html.js-motion .reveal[data-reveal="scale"]{ transform:scale(.96); }
.reveal.in{ opacity:1; transform:none; }
/* failsafe: force everything visible (no transition) so content can never stay hidden */
html.reveal-done .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }

/* word-rise (hero headline) — base visible, hidden only under js-motion */
.wr-line{ display:block; overflow:hidden; padding-bottom:.06em; }
.wr-word{ display:inline-block; transition:transform .9s var(--ease-out); will-change:transform; }
html.js-motion .wr-word{ transform:translateY(112%); }
.wr-word.in{ transform:none; }
html.reveal-done .wr-word{ transform:none !important; transition:none !important; }

/* auto-filled placeholder photos */
.ph > .ph-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:0; }
.ph.has-photo > .ph-photo{ opacity:1; }
.ph.has-photo > .ph__label{ opacity:0; }

/* parallax target */
[data-parallax]{ will-change:transform; }

/* marquee */
.marquee{ background:var(--ink); color:#fff; overflow:hidden; border-block:1px solid rgba(255,255,255,.08); }
.marquee__track{ display:flex; gap:0; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:18px; padding:18px 0; font-family:var(--display); font-size:1.15rem; letter-spacing:.01em; white-space:nowrap; }
.marquee__item::after{ content:"\2666"; color:var(--gold); margin:0 30px; font-size:.7rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* magnetic / interactive buttons */
.btn{ will-change:transform; }
.magnetic{ transition:transform .35s var(--ease-out), background .2s ease, box-shadow .2s ease, color .2s ease; }

/* gallery hover */
.gal .ph{ transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.gal .ph:hover{ transform:translateY(-4px) scale(1.012); box-shadow:var(--shadow-lg); z-index:2; }

/* svc-card sheen on hover (subtle) */
.svc-card{ position:relative; overflow:hidden; }
.svc-card::after{ content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,var(--brand),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-out); }
.svc-card:hover::after{ transform:scaleX(1); }

@media(prefers-reduced-motion:reduce){
  .reveal,.reveal[data-reveal]{ opacity:1 !important; transform:none !important; transition:none; }
  .wr-word{ transform:none !important; transition:none; }
  .marquee__track{ animation:none; }
  [data-parallax]{ transform:none !important; }
}