/* =========================================================
   PJ Quality Roofing — Design Tokens
   Palette: charcoal ink, cool paper, copper + steel accents
   Type: Fraunces (display) / Inter (body) / JetBrains Mono (labels)
   ========================================================= */
:root{
  --ink:        #12151B;
  --ink-soft:   #262C38;
  --slate:      #2B3342;
  --slate-2:    #384158;
  --paper:      #F3F4F1;
  --paper-dim:  #E7E8E2;
  --copper:     #B4551F;
  --copper-lt:  #D97A3F;
  --steel:      #5C7A99;
  --gold:       #C99A3E;
  --line:       rgba(18,21,27,0.12);
  --line-lt:    rgba(243,244,241,0.16);

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius: 14px;
  --radius-lg: 26px;
  --shadow-soft: 0 20px 50px -20px rgba(18,21,27,0.35);
  --shadow-deep: 0 30px 70px -25px rgba(18,21,27,0.55);
  --ease: cubic-bezier(.22,.9,.26,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ padding:0; margin:0; list-style:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0 0 .5em; color:var(--ink); }
p{ margin:0 0 1.1em; color:var(--ink-soft); }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper);
  padding:12px 18px; z-index:999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; font-family:var(--font-mono);
  font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  font-weight:600; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  border:1.5px solid transparent; white-space:nowrap;
}
.btn-solid{ background:var(--copper); color:#fff; box-shadow:0 14px 30px -12px rgba(180,85,31,0.55); }
.btn-solid:hover{ transform:translateY(-3px); box-shadow:0 20px 36px -12px rgba(180,85,31,0.6); background:var(--copper-lt); }
.btn-ghost{ background:transparent; border-color:currentColor; color:var(--ink); }
.btn-ghost:hover{ transform:translateY(-3px); background:var(--ink); color:var(--paper); }
.btn-block{ width:100%; margin-bottom:12px; }
.btn-lg{ padding:17px 34px; font-size:14px; }
.btn-sm{ padding:9px 18px; font-size:11px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(243,244,241,0.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:28px; padding-top:16px; padding-bottom:16px; }
.logo{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.logo-mark{ color:var(--copper); display:flex; }
.logo-text{ font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:-.01em; }
.logo-text em{ font-style:normal; color:var(--copper); display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-mono); font-weight:600; margin-top:-2px; }
.main-nav{ display:flex; gap:28px; }
.main-nav a{ font-size:14px; font-weight:500; color:var(--ink-soft); position:relative; padding:4px 0; }
.main-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--copper); transition:width .3s var(--ease); }
.main-nav a:hover::after{ width:100%; }
.header-cta{ flex-shrink:0; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* =========================================================
   HERO — layered 3D roofline
   ========================================================= */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  padding:120px 0 90px;
  perspective:1400px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 82% 10%, rgba(180,85,31,0.35), transparent 65%),
    radial-gradient(50% 40% at 10% 90%, rgba(92,122,153,0.28), transparent 65%);
  pointer-events:none;
}
.hero-3d{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .25s ease-out;
}
.plane{
  position:absolute; transform-style:preserve-3d;
  border:1px solid var(--line-lt);
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-radius:18px;
  backdrop-filter:blur(2px);
}
.plane-far{   width:58%; height:70%; right:-14%; top:-4%; transform:translateZ(-260px) rotate(11deg); opacity:.32; }
.plane-back{  width:46%; height:60%; right:-6%; top:6%;  transform:translateZ(-160px) rotate(8deg); opacity:.55; }
.plane-mid{   width:38%; height:52%; right:6%;  top:20%; transform:translateZ(-70px) rotate(-4deg); opacity:.75; }
.plane-front{ width:30%; height:42%; right:14%; top:32%; transform:translateZ(40px) rotate(6deg); background:linear-gradient(135deg, rgba(180,85,31,0.28), rgba(180,85,31,0.05)); border-color:rgba(180,85,31,0.4); }
.plane-edge{  width:16%; height:20%; right:30%; top:8%; transform:translateZ(120px) rotate(-14deg); background:linear-gradient(135deg, rgba(92,122,153,0.35), rgba(92,122,153,0.05)); border-color:rgba(92,122,153,0.45); border-radius:10px; }

.ring{ border-radius:50%; border-width:1.5px; background:none; }
.ring-a{ width:120px; height:120px; left:2%; top:8%; transform:translateZ(70px) rotate(0deg); border-color:rgba(217,122,63,0.35); }
.ring-b{ width:70px; height:70px; left:14%; top:30%; transform:translateZ(110px); border-color:rgba(243,244,241,0.25); }

.plane-chip{
  width:auto; height:auto; padding:16px 20px; right:8%; top:12%;
  transform:translateZ(90px) rotate(-3deg);
  background:var(--paper); color:var(--ink); border:none;
  box-shadow:var(--shadow-deep); display:flex; flex-direction:column; gap:4px; border-radius:14px;
}
.chip-mono{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--copper); font-weight:600; }
.chip-big{ font-family:var(--font-display); font-size:26px; font-weight:600; }
.chip-star{ color:var(--copper); }
.chip-two{ right:auto; left:4%; top:62%; transform:translateZ(60px) rotate(4deg); padding:12px 18px; }
.chip-two .chip-mono{ color:var(--steel); }
.chip-three{ right:auto; left:32%; top:4%; transform:translateZ(130px) rotate(5deg); padding:12px 16px; }
.chip-three .chip-mono{ color:var(--gold); }

@keyframes floatA{ 0%,100%{ transform:translateZ(90px) rotate(-3deg) translateY(0); } 50%{ transform:translateZ(90px) rotate(-3deg) translateY(-14px); } }
@keyframes floatB{ 0%,100%{ transform:translateZ(60px) rotate(4deg) translateY(0); } 50%{ transform:translateZ(60px) rotate(4deg) translateY(12px); } }
@keyframes floatC{ 0%,100%{ transform:translateZ(130px) rotate(5deg) translateY(0); } 50%{ transform:translateZ(130px) rotate(5deg) translateY(-10px); } }
.float-a{ animation:floatA 6s ease-in-out infinite; }
.float-b{ animation:floatB 7s ease-in-out infinite; }
.float-c{ animation:floatC 5.5s ease-in-out infinite; }

/* Elevated hero stat cards */
.hero-stats{ display:flex; gap:18px; flex-wrap:wrap; border-top:none; padding-top:0; perspective:1000px; }
.stat-card{
  background:rgba(243,244,241,0.06); border:1px solid var(--line-lt); border-radius:14px;
  padding:18px 22px; backdrop-filter:blur(6px); transform-style:preserve-3d;
  transform:rotateX(var(--ty,0)) rotateY(var(--tx,0));
  transition:transform .3s var(--ease), background .3s, box-shadow .3s;
}
.stat-card:hover{ background:rgba(243,244,241,0.1); box-shadow:var(--shadow-deep); }
.stat-card strong{ font-family:var(--font-display); font-size:26px; display:block; color:#fff; transform:translateZ(16px); }
.stat-card span{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(243,244,241,0.55); }

.hero-inner{ position:relative; z-index:2; max-width:760px; }
.eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--copper-lt); margin-bottom:18px; font-weight:600; }
.eyebrow-light{ color:var(--copper); }
.hero-title{ font-size:clamp(2.4rem, 5.2vw, 4.2rem); color:#fff; letter-spacing:-.01em; }
.hero-title .ital{ font-style:italic; color:var(--copper-lt); }
.hero-lede{ font-size:18px; color:rgba(243,244,241,0.78); max-width:560px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin:32px 0 46px; }
.hero .btn-ghost{ color:var(--paper); }
.hero .btn-ghost:hover{ background:var(--paper); color:var(--ink); }

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--ink); padding:0 0 70px; position:relative; }
.trust-inner{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; perspective:1200px;
  margin-top:0; position:relative; z-index:2;
}
.trust-badge{ transform-style:preserve-3d; }
.trust-badge-inner{
  background:rgba(243,244,241,0.05); border:1px solid var(--line-lt); border-radius:16px;
  padding:24px 20px; height:100%; transform-style:preserve-3d; color:var(--paper);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
  transform:rotateX(var(--ty,0)) rotateY(var(--tx,0));
}
.trust-badge:hover .trust-badge-inner{ background:rgba(243,244,241,0.09); box-shadow:var(--shadow-deep); }
.trust-icon{ width:30px; height:30px; color:var(--copper-lt); margin-bottom:14px; transform:translateZ(24px); }
.trust-badge h3{ color:#fff; font-size:15px; margin-bottom:.3em; }
.trust-badge p{ font-size:13px; color:rgba(243,244,241,0.6); margin-bottom:0; }

/* ---------- Ambient section floaters ---------- */
.has-floaters, .contact{ position:relative; }
.section-floaters{ position:absolute; inset:0; overflow:visible; pointer-events:none; z-index:0; perspective:900px; }
.floater{
  position:absolute; border-radius:22%; border:1.5px solid rgba(180,85,31,0.22);
  background:linear-gradient(135deg, rgba(180,85,31,0.06), transparent);
  transform-style:preserve-3d; animation:driftFloat 9s ease-in-out infinite;
}
.floater.f1{ width:80px; height:80px; right:2%; top:-4%; animation-delay:.2s; }
.floater.f2{ width:46px; height:46px; right:14%; top:40%; border-radius:50%; border-color:rgba(92,122,153,0.28); animation-delay:1.4s; }
.floater.f3{ width:34px; height:34px; left:-2%; bottom:6%; animation-delay:2.2s; }
.floaters-light .floater{ border-color:rgba(243,244,241,0.18); background:linear-gradient(135deg, rgba(243,244,241,0.06), transparent); }
@keyframes driftFloat{
  0%,100%{ transform:translateZ(30px) rotate(6deg) translateY(0); }
  50%{ transform:translateZ(60px) rotate(-4deg) translateY(-18px); }
}
.article-col section.has-floaters{ position:relative; z-index:1; }

/* =========================================================
   ARTICLE LAYOUT
   ========================================================= */
.article{ padding:90px 0 40px; }
.article-wrap{ display:grid; grid-template-columns:1fr 300px; gap:70px; align-items:start; }
.article-col h2{ font-size:clamp(1.6rem,2.8vw,2.1rem); margin-top:2.2em; }
.article-col > section:first-child h2{ margin-top:0; }
.article-col h3{ font-size:1.15rem; margin-top:1.4em; }
.article-col a{ color:var(--copper); font-weight:600; border-bottom:1.5px solid rgba(180,85,31,0.35); transition:border-color .25s; }
.article-col a:hover{ border-color:var(--copper); }

/* App / service cards — 3D tilt */
.app-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; perspective:1200px; }
.app-card{ transform-style:preserve-3d; }
.app-card-inner{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; height:100%; transform-style:preserve-3d;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  transform:rotateX(var(--ty,0)) rotateY(var(--tx,0)) translateZ(0);
}
.app-card:hover .app-card-inner{ box-shadow:var(--shadow-soft); border-color:rgba(180,85,31,0.35); }
.app-icon{ width:34px; height:34px; color:var(--copper); margin-bottom:16px; transform:translateZ(20px); }
.app-card h3{ font-size:17px; margin-bottom:.4em; }
.app-card p{ font-size:14.5px; margin-bottom:0; }

/* Process list */
.process-list{ margin-top:30px; display:flex; flex-direction:column; }
.process-list li{ display:flex; gap:24px; padding:26px 0; border-top:1px solid var(--line); }
.process-list li:last-child{ border-bottom:1px solid var(--line); }
.step-num{
  font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--copper);
  background:rgba(180,85,31,0.1); border-radius:100px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.process-list h3{ margin-top:0; margin-bottom:.3em; font-size:16.5px; }
.process-list p{ margin-bottom:0; font-size:14.5px; }

/* Benefit grid */
.benefit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:28px; perspective:1200px; }
.benefit{
  background:var(--slate); color:var(--paper); border-radius:var(--radius); padding:26px;
  transform-style:preserve-3d;
  transform:rotateX(var(--ty,0)) rotateY(var(--tx,0));
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.benefit:hover{ box-shadow:var(--shadow-deep); }
.benefit-num{ font-family:var(--font-display); font-size:30px; color:var(--copper-lt); display:block; margin-bottom:10px; transform:translateZ(20px); }
.benefit h3{ color:#fff; font-size:16px; margin-bottom:.35em; }
.benefit p{ color:rgba(243,244,241,0.72); font-size:14px; margin-bottom:0; }

/* Checklist (retained utility, unused directly in cost section now) */
.checklist{ display:flex; flex-direction:column; gap:14px; margin:24px 0; }
.checklist li{ padding-left:30px; position:relative; font-size:15px; color:var(--ink-soft); }
.checklist li::before{
  content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:5px;
  background:var(--copper); clip-path:polygon(14% 44%, 0 63%, 40% 100%, 100% 20%, 84% 6%, 39% 71%);
}
.checklist strong{ color:var(--ink); }

/* Cost factor cards — 3D tilt */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0; perspective:1200px; }
.price-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px;
  transform-style:preserve-3d; transform:rotateX(var(--ty,0)) rotateY(var(--tx,0));
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.price-card:hover{ box-shadow:var(--shadow-soft); border-color:rgba(92,122,153,0.4); }
.price-tag{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--steel);
  display:inline-block; margin-bottom:10px; transform:translateZ(18px);
}
.price-card h3{ font-size:15.5px; margin-bottom:.35em; }
.price-card p{ font-size:13.5px; margin-bottom:0; }

/* Why-us layered shingle stack */
.whyus-layout{ display:grid; grid-template-columns:1fr 190px; gap:36px; align-items:center; margin-top:24px; }
.shingle-stack{ position:relative; height:210px; perspective:900px; }
.shingle{
  position:absolute; left:50%; top:50%; width:150px; height:96px; border-radius:12px;
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-soft);
  transform-style:preserve-3d;
}
.s1{ transform:translate(-50%,-50%) translateZ(-40px) rotate(-9deg) translateY(18px); background:var(--paper-dim); opacity:.8; }
.s2{ transform:translate(-50%,-50%) translateZ(-10px) rotate(4deg) translateY(6px); background:#fff; }
.s3{ transform:translate(-50%,-50%) translateZ(20px) rotate(-3deg); background:linear-gradient(135deg,#fff,var(--paper)); }
.s4{
  transform:translate(-50%,-50%) translateZ(50px) rotate(7deg);
  background:var(--copper); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; letter-spacing:.06em; font-size:14px;
  box-shadow:0 24px 40px -14px rgba(180,85,31,0.55);
}

/* FAQ accordion */
.faq-list{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px 22px; }
.faq-item summary{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; list-style:none; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{ margin:0; font-size:15.5px; font-weight:600; }
.faq-item summary::after{
  content:"+"; font-family:var(--font-mono); font-size:20px; color:var(--copper); flex-shrink:0;
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:14px 0 0; font-size:14.5px; }

/* Sidebar */
.article-side{ position:relative; }
.side-sticky{ position:sticky; top:110px; }
.side-card{
  background:var(--ink); color:var(--paper); border-radius:var(--radius-lg);
  padding:32px 26px; box-shadow:var(--shadow-deep);
}
.side-eyebrow{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--copper-lt); margin-bottom:8px; }
.side-card h3{ color:#fff; font-size:20px; margin-bottom:.4em; }
.side-copy{ font-size:14px; color:rgba(243,244,241,0.68); }
.side-facts{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line-lt); display:flex; flex-direction:column; gap:10px; }
.side-facts li{ font-size:13.5px; display:flex; justify-content:space-between; color:rgba(243,244,241,0.9); }
.side-facts span{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; color:rgba(243,244,241,0.5); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:var(--slate); color:var(--paper); padding:100px 0; margin-top:60px; position:relative; overflow:hidden; }
.contact::before{ content:""; position:absolute; inset:0; background:radial-gradient(50% 60% at 100% 0%, rgba(180,85,31,0.25), transparent 70%); }
.contact-wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.contact h2{ color:#fff; font-size:clamp(1.8rem,3.4vw,2.6rem); }
.contact-copy p{ color:rgba(243,244,241,0.75); max-width:440px; }
.contact-card{ background:rgba(243,244,241,0.06); border:1px solid var(--line-lt); border-radius:var(--radius-lg); padding:34px; backdrop-filter:blur(6px); }
.contact-list{ display:flex; flex-direction:column; gap:20px; }
.contact-list li{ display:flex; flex-direction:column; gap:4px; padding-bottom:18px; border-bottom:1px solid var(--line-lt); }
.contact-list li:last-child{ border-bottom:none; padding-bottom:0; }
.c-label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--copper-lt); }
.contact-list a{ font-size:16.5px; font-weight:600; color:#fff; }
.contact-list span:not(.c-label){ font-size:15.5px; color:rgba(243,244,241,0.85); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); color:rgba(243,244,241,0.6); padding:34px 0; }
.footer-inner{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-logo .logo-text{ color:#fff; font-size:16px; }
.footer-copy{ margin:0; font-size:12.5px; flex:1; min-width:220px; }
.site-footer .btn-ghost{ color:var(--paper); }
.site-footer .btn-ghost:hover{ background:var(--paper); color:var(--ink); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .article-wrap{ grid-template-columns:1fr; }
  .side-sticky{ position:relative; top:0; }
  .contact-wrap{ grid-template-columns:1fr; }
  .app-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-inner{ grid-template-columns:repeat(2,1fr); }
  .price-grid{ grid-template-columns:repeat(2,1fr); }
  .whyus-layout{ grid-template-columns:1fr; }
  .shingle-stack{ height:170px; }
}
@media (max-width:760px){
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header.open .main-nav{
    display:flex; position:absolute; top:100%; left:0; right:0; background:var(--paper);
    flex-direction:column; padding:20px 28px; border-bottom:1px solid var(--line); gap:16px;
  }
  .site-header.open .header-cta{ display:inline-flex; margin:0 28px 20px; }
  .hero{ padding:90px 0 60px; }
  .hero-3d{ opacity:.5; }
  .hero-stats{ gap:14px; }
  .stat-card{ flex:1 1 45%; }
  .app-grid{ grid-template-columns:1fr; }
  .benefit-grid{ grid-template-columns:1fr; }
  .process-list li{ gap:16px; }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .trust-strip{ padding-bottom:50px; }
  .trust-inner{ grid-template-columns:1fr 1fr; gap:12px; }
  .price-grid{ grid-template-columns:1fr; }
  .floater{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-3d, .app-card-inner, .benefit, .btn, .stat-card, .trust-badge-inner, .price-card{ transition:none !important; }
  .float-a, .float-b, .float-c, .floater{ animation:none !important; }
}