/* ═══════════════════════════════════════════════════════════════════════
   PINNACLE ROOFING GROUP — PAGE STYLES
   Pacific NW Industrial-Organic · Portland OR
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh; position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--linen-d);
}

/* Left panel — text */
.hero-left {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 160px var(--s8) var(--s9) var(--s8);
  max-width: 760px; position: relative; z-index: 2;
}

/* Blueprint grid intensified in hero */
.hero-left::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(44,74,82,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,74,82,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Right panel — photo */
.hero-right {
  position: relative; overflow: hidden;
}
.hero-right img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: saturate(0.75) contrast(1.05);
}
.hero-right::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--linen-d) 0%, transparent 30%);
}

/* Top accent bar */
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; z-index: 10;
  background: linear-gradient(90deg, var(--slate), var(--brass), var(--slate-l));
}

/* Hero eyebrow */
.hero-eye {
  display: flex; align-items: center; gap: var(--s5);
  margin-bottom: var(--s6);
}

/* Hero headline — massive Playfair */
.hero-h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.8rem, 5vw, 4rem);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: var(--s6);
}
.hero-h1 .line-2, .hero-h1 .line-3 { display: inline; }
.hero-h1 .line-3 { font-style: italic; font-weight: 600; color: var(--brass); font-size: 0.75em; }

.hero-sub { font-size: 1.05rem; color: var(--slate-2); line-height: 1.75; max-width: 440px; margin-bottom: var(--s7); }
.hero-ctas { display: flex; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s8); }

/* Trust row */
.hero-trust {
  display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap;
  padding-top: var(--s6); border-top: 1px solid var(--b2);
}
.trust-it { display: flex; align-items: center; gap: var(--s3); }
.trust-ic { width: 32px; height: 32px; background: var(--brass-dim); border: 1px solid var(--bb); border-radius: var(--r2); display: flex; align-items: center; justify-content: center; font-size: 0.90rem; flex-shrink: 0; }
.trust-lb { font-family: var(--mono); font-size: 0.59rem; line-height: 1.5; color: var(--slate-2); }

/* ── LARGE PHOTO GRID ───────────────────────────────────────────────── */
.photo-masonry { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 260px 260px; gap: var(--s3); }
.pm-1 { grid-row: 1 / 3; border-radius: var(--r3); overflow: hidden; }
.pm-2, .pm-3 { border-radius: var(--r2); overflow: hidden; }
.pm-img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78); transition: transform var(--t4) var(--ease), filter var(--t3); display: block; }
.pm-img:hover { filter: saturate(1.05); transform: scale(1.04); }

/* ── FEATURED PROJECT STRIP ─────────────────────────────────────────── */
.feat-proj { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s10); align-items: center; }
.feat-proj-img { border-radius: var(--r3); overflow: hidden; aspect-ratio: 4/3; }
.feat-proj-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); transition: transform var(--t4) var(--ease); }
.feat-proj-img:hover img { transform: scale(1.04); }

/* ── PROJECT CARD ────────────────────────────────────────────────────── */
.proj-img { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r2) var(--r2) 0 0; }
.proj-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78); transition: transform var(--t4) var(--ease), filter var(--t3); }
.card-white:hover .proj-img img { transform: scale(1.07); filter: saturate(1.05); }
.proj-type { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--linen-5); margin-bottom: var(--s2); }
.proj-h { font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin-bottom: var(--s3); }

/* ── HORIZONTAL SPEC LIST ────────────────────────────────────────────── */
.spec-row { display: flex; align-items: flex-start; gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--b1); }
.spec-row:last-child { border-bottom: none; }
.spec-label { font-family: var(--mono); font-size: 0.60rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); min-width: 100px; flex-shrink: 0; padding-top: 2px; }
.spec-val { font-size: 0.88rem; color: var(--slate-2); line-height: 1.65; }

/* ── MATERIAL TILE ───────────────────────────────────────────────────── */
.mat-tile {
  padding: var(--s5); background: var(--linen-d); border: 1px solid var(--b1);
  border-radius: var(--r2); transition: all var(--t2);
}
.mat-tile:hover { border-color: var(--bb); background: var(--brass-dim); transform: translateY(-2px); box-shadow: var(--sh1); }
.mat-em { font-size: 1.5rem; margin-bottom: var(--s3); }
.mat-name { font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: var(--ink); margin-bottom: var(--s1); }
.mat-note { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em; color: var(--linen-5); }

/* ── ICON BOX ────────────────────────────────────────────────────────── */
.icon-b {
  width: 50px; height: 50px; border-radius: var(--r2);
  background: var(--brass-dim); border: 1px solid var(--bb);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: var(--s5);
  transition: background var(--t2);
  flex-shrink: 0;
}
.card-white:hover .icon-b { background: var(--brass-mid); }

/* ── TIMELINE PROCESS ────────────────────────────────────────────────── */
.process-row { display: grid; grid-template-columns: repeat(4,1fr); position: relative; gap: var(--s5); }
.process-row::before { content: ''; position: absolute; top: 20px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, var(--bb), var(--b1)); z-index: 0; }
.proc-card { position: relative; z-index: 1; }
.proc-n { width: 40px; height: 40px; background: var(--linen-d); border: 1px solid var(--bb); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.65rem; color: var(--brass); margin-bottom: var(--s5); transition: background var(--t2); }
.proc-card:hover .proc-n { background: var(--brass-dim); }
.proc-h { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink); margin-bottom: var(--s3); }
.proc-p { font-size: 0.83rem; color: var(--slate-2); line-height: 1.65; }

/* ── PRICING ─────────────────────────────────────────────────────────── */
.price-card { padding: var(--s7) var(--s6); display: flex; flex-direction: column; position: relative; }
.price-feat-dark { background: var(--slate); color: var(--linen); border-color: var(--slate) !important; }
.price-feat-dark .price-tier-l, .price-feat-dark .price-period-l { color: var(--slate-4) !important; }
.price-feat-dark .price-feat-line { color: var(--linen-3) !important; border-bottom-color: rgba(255,255,255,0.09) !important; }
.price-feat-dark .pf-check { color: var(--brass-l) !important; }
.price-feat-dark .price-num-l { color: #fff !important; }
.price-feat-dark .suf { color: var(--brass-l) !important; }
.price-pop { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--brass); color: var(--ink); font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 12px; border-radius: var(--r5); white-space: nowrap; }
.price-tier-l { font-family: var(--mono); font-size: 0.60rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--linen-5); margin-bottom: var(--s4); }
.price-num-l { font-family: var(--display); font-size: 4.5rem; font-weight: 700; line-height: 1; color: var(--ink); }
.price-num-l .suf { font-size: 1.6rem; font-weight: 400; color: var(--brass); vertical-align: top; margin-top: 10px; display: inline-block; }
.price-period-l { font-family: var(--mono); font-size: 0.61rem; color: var(--linen-5); margin: var(--s2) 0 var(--s5); }
.price-divider-l { height: 1px; background: var(--b1); margin: var(--s5) 0; }
.price-feat-line { display: flex; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--b1); font-size: 0.83rem; color: var(--slate-2); }
.price-feat-line:last-child { border-bottom: none; }
.pf-check { color: var(--brass); flex-shrink: 0; font-size: 0.70rem; margin-top: 2px; }
.price-feats-l { flex: 1; margin-bottom: var(--s6); }

/* ── BLOG FEATURED ───────────────────────────────────────────────────── */
.blog-feat { display: grid; grid-template-columns: 1.1fr 1fr; border: 1px solid var(--b1); border-radius: var(--r3); overflow: hidden; background: #fff; transition: box-shadow var(--t2), transform var(--t3) var(--ease); margin-bottom: var(--s6); }
.blog-feat:hover { box-shadow: var(--sh3); transform: translateY(-2px); }
.bfeat-img { overflow: hidden; min-height: 280px; }
.bfeat-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.78); transition: transform var(--t4) var(--ease), filter var(--t3); }
.blog-feat:hover .bfeat-img img { transform: scale(1.05); filter: saturate(1.02); }
.bfeat-body { padding: var(--s8) var(--s7); display: flex; flex-direction: column; justify-content: center; }

/* ── EMERGENCY STRIP ─────────────────────────────────────────────────── */
.em-strip {
  background: var(--slate-d);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.em-strip p {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.70rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-5);
  text-align: center;
  line-height: 1.5;
}
.em-strip a {
  color: var(--brass-l);
  text-decoration: underline;
}

/* ── MAP BOX ─────────────────────────────────────────────────────────── */
.map-box { background: var(--linen-d); border: 1px solid var(--b2); border-radius: var(--r3); overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; position: relative; }
.map-box::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(44,74,82,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(44,74,82,0.06) 1px, transparent 1px); background-size: 30px 30px; }
.map-pin { position: relative; z-index: 1; text-align: center; }

/* ── RESPONSIVE PAGES ────────────────────────────────────────────────── */
/* ── RESPONSIVE: DESKTOP → TABLET ───────────────────────────────────── */
@media (max-width:1100px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-right { height: 340px; }
  .hero-right::before { background: linear-gradient(to bottom, var(--linen-d), transparent); }
  .hero-left { padding-bottom: var(--s7); padding-top: 120px; }
  .process-row { grid-template-columns: repeat(2,1fr); }
  .process-row::before { display: none; }
  .feat-proj { grid-template-columns: 1fr; gap: var(--s8); }
  .feat-proj-img { aspect-ratio: 16/9; }
  .g3 { grid-template-columns: repeat(2,1fr); }
}

/* ── RESPONSIVE: TABLET ──────────────────────────────────────────────── */
@media (max-width:900px) {
  .photo-masonry { grid-template-columns: 1fr; grid-template-rows: 240px 180px 180px; }
  .pm-1 { grid-row: auto; }
  .blog-feat { grid-template-columns: 1fr; }
  .bfeat-img { min-height: 240px; }
  .feat-proj { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2,1fr); }
  .wrap { padding: 0 var(--s6); }
}

/* ── RESPONSIVE: MOBILE LANDSCAPE ────────────────────────────────────── */
@media (max-width:768px) {
  .hero-left { padding: 100px var(--s5) var(--s7) var(--s5); }
  .hero-h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
  .hero-sub { font-size: 0.95rem; }
  .hero-trust { gap: var(--s4); flex-direction: column; align-items: flex-start; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .process-row { grid-template-columns: 1fr; }
  .process-row::before { display: none; }
  .price-card { padding: var(--s6) var(--s5); }
  .price-num-l { font-size: 3rem; }
  .g4 { grid-template-columns: 1fr; }
  .mat-tile { padding: var(--s4); }
  .wrap { padding: 0 var(--s5); }
}

/* ── RESPONSIVE: MOBILE PORTRAIT ─────────────────────────────────────── */
@media (max-width:640px) {
  :root { 
    --s2: 6px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
    --s7: 28px; --s8: 32px; --s9: 40px; --s10: 48px;
  }
  
  .hero { min-height: 90vh; }
  .hero-left { padding: 80px var(--s4) var(--s7) var(--s4); max-width: none; }
  .hero-h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: var(--s4); }
  .hero-sub { font-size: 0.90rem; margin-bottom: var(--s5); }
  .hero-eye { margin-bottom: var(--s4); flex-wrap: wrap; }
  .hero-ctas { flex-direction: column; margin-bottom: var(--s6); }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { flex-direction: column; gap: var(--s3); padding-top: var(--s4); }
  .trust-it { width: 100%; }
  .hero-right { height: 280px; }
  
  .sec { padding: var(--s7) 0 !important; }
  .sec-label { margin-bottom: var(--s3) !important; }
  .wrap { padding: 0 var(--s4); }
  
  .g3, .g4 { grid-template-columns: 1fr; gap: var(--s4); }
  .photo-masonry { gap: var(--s3); }
  .photo-masonry { grid-template-rows: 200px 140px 140px; }
  
  .feat-proj { gap: var(--s6); }
  .feat-proj-img { aspect-ratio: 4/3; }
  
  .process-row { grid-template-columns: 1fr; gap: var(--s4); }
  .proc-n { width: 36px; height: 36px; font-size: 0.60rem; margin-bottom: var(--s4); }
  .proc-h { font-size: 1rem; margin-bottom: var(--s2); }
  .proc-p { font-size: 0.78rem; }
  
  .price-card { padding: var(--s5) var(--s4); }
  .price-num-l { font-size: 2.5rem; }
  .price-tier-l { font-size: 0.58rem; margin-bottom: var(--s3); }
  .price-period-l { font-size: 0.58rem; margin: var(--s2) 0 var(--s4); }
  .price-feat-line { padding: var(--s2) 0; font-size: 0.75rem; }
  
  .mat-tile { padding: var(--s3); margin-bottom: var(--s3); }
  .mat-em { font-size: 1.3rem; margin-bottom: var(--s2); }
  .mat-name { font-size: 0.88rem; margin-bottom: var(--s1); }
  .mat-note { font-size: 0.52rem; }
  
  .blog-feat { grid-template-columns: 1fr; }
  .bfeat-img { min-height: 200px; }
  .bfeat-body { padding: var(--s5) var(--s4); }
  
  .icon-b { width: 42px; height: 42px; font-size: 1.1rem; margin-bottom: var(--s4); }
  
  .card-white { border-radius: var(--r2); }
  .proj-h { font-size: 1rem; margin-bottom: var(--s2); }
  .proj-type { font-size: 0.54rem; margin-bottom: var(--s1); }
  .b-sm { font-size: 0.78rem; line-height: 1.6; }
  
  .ck { margin-bottom: var(--s4); }
  .ck-h { font-size: 0.95rem; margin-bottom: var(--s2); }
  .ck-p { font-size: 0.75rem; }
  
  .tc { margin-bottom: var(--s7) !important; }
  .t-xl { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: var(--s4); }
  .t-lg { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-bottom: var(--s4); }
  .t-md { font-size: 1.2rem; margin-bottom: var(--s4); }
  .b-xl { font-size: 0.95rem; }
  .b-lg { font-size: 0.88rem; }
  .b-md { font-size: 0.80rem; }
  
  .stat-num { font-size: 2rem; }
  .stat-lbl { font-size: 0.70rem; }
  
  .cta-box { padding: var(--s6) var(--s4) !important; }
  .cta-box h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); margin-bottom: var(--s3) !important; }
  .cta-box p { font-size: 0.80rem; }
  
  .btn { font-size: 0.88rem; padding: 10px 16px; }
  .btn-sm { font-size: 0.76rem; padding: 8px 12px; }
  
  .nav { padding: 12px var(--s4); }
  .nav-logo { font-size: 0.95rem; }
  .nav-phone { display: none; }
  .nav-ham { display: block !important; }
  
  .em-strip p { font-size: 0.65rem; }
  
  .map-box { aspect-ratio: 16/9; }
  .map-pin { font-size: 0.85rem; }
  
  .label-br { font-size: 0.65rem; }
  .mono { font-size: 0.75rem; }
  .badge { font-size: 0.65rem; padding: 4px 10px; }
  
  .spec-row { gap: var(--s4); padding: var(--s3) 0; }
  .spec-label { min-width: 80px; font-size: 0.54rem; }
  .spec-val { font-size: 0.80rem; }
}

/* ── RESPONSIVE: SMALL MOBILE ────────────────────────────────────────── */
@media (max-width:480px) {
  .hero-left { padding: 60px var(--s3) var(--s6) var(--s3); }
  .hero-h1 { font-size: clamp(1.6rem, 3.5vw, 2rem); margin-bottom: var(--s3); }
  .hero-sub { font-size: 0.85rem; margin-bottom: var(--s4); }
  .hero-right { height: 240px; }
  
  .stat-num { font-size: 1.8rem; }
  .stat-lbl { font-size: 0.65rem; }
  
  .badge { font-size: 0.60rem; padding: 3px 8px; }
  .sec-label { font-size: 0.65rem; }
  
  .proc-card { gap: var(--s3); }
  .proc-n { width: 32px; height: 32px; font-size: 0.56rem; }
  
  .price-num-l { font-size: 2rem; }
  
  .btn { font-size: 0.80rem; padding: 8px 12px; }
  
  .cta-box { padding: var(--s5) var(--s3) !important; }
  .cta-box h2 { font-size: 1.2rem; margin-bottom: var(--s2) !important; }
}