/**
 * how-it-works.css — Accountability proof page styles
 * Owns: /how-it-works page layout and components
 * Does NOT own: shared form (lead-form.css), vertical pages (vertical.css)
 */

/* ---- BRAND TOKENS ---- */
:root {
  --hiw-green:    #43B02A;
  --hiw-charcoal: #333F48;
  --hiw-cloud:    #D0D3D4;
  --hiw-gold:     #BD9A51;
  --hiw-white:    #FFFFFF;
  --hiw-font:     'Open Sans', system-ui, sans-serif;
  --hiw-text:     #333F48;
  --hiw-muted:    #6a7580;
  --hiw-border:   #E0E3E4;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--hiw-font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--hiw-text);
  background: var(--hiw-white);
  -webkit-font-smoothing: antialiased;
}

/* ---- TYPOGRAPHY ---- */
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; }
h2 { font-size: clamp(24px, 4vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; }
h4 { font-size: 17px; font-weight: 700; letter-spacing: 0.03em; }
p  { font-size: 18px; line-height: 1.65; }
small { font-size: 14px; }

.container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- NAV ---- */
.hiw-nav {
  background: var(--hiw-charcoal);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.hiw-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--hiw-white);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
}
.hiw-nav-logo svg { flex-shrink: 0; }
.hiw-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.hiw-nav-links a {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.15s;
}
.hiw-nav-links a:hover { color: var(--hiw-white); }
.hiw-nav-links a.active { color: var(--hiw-white); }
.hiw-nav-cta {
  background: var(--hiw-green);
  color: var(--hiw-white);
  padding: 9px 20px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: opacity 0.2s;
}
.hiw-nav-cta:hover { opacity: 0.9; }

/* ---- SECTION LABEL ---- */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}
.section-label--dark {
  color: var(--hiw-green);
}

/* ============================================================
   1. HERO
   ============================================================ */
.hiw-hero {
  background: var(--hiw-green);
  color: var(--hiw-white);
  padding: 96px 24px 88px;
  position: relative;
  overflow: hidden;
}
.hiw-hero::before {
  /* converging spires accent lines */
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      88deg,
      transparent 0px,
      transparent 160px,
      rgba(255,255,255,0.03) 160px,
      rgba(255,255,255,0.03) 163px
    );
  pointer-events: none;
}
.hiw-hero-inner {
  max-width: 780px;
  position: relative;
  z-index: 2;
}
.hiw-hero-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 24px;
}
.hiw-hero h1 {
  color: var(--hiw-white);
  margin-bottom: 24px;
  max-width: 700px;
}
.hiw-hero-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  line-height: 1.7;
}
.hiw-hero-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
  margin-top: 48px;
  font-weight: 600;
}

/* ============================================================
   2. FOUR-PILLAR ACCOUNTABILITY STACK
   ============================================================ */
.hiw-pillars {
  background: var(--hiw-white);
  padding: 80px 24px;
}
.hiw-pillars .section-label { color: var(--hiw-green); }
.hiw-pillars h2 {
  color: var(--hiw-charcoal);
  margin-bottom: 56px;
}
.hiw-pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.hiw-pillar-card {
  padding: 32px 28px;
  border: 1.5px solid var(--hiw-border);
  border-top: 3px solid var(--hiw-green);
  border-radius: 3px;
  position: relative;
}
.hiw-pillar-icon {
  width: 48px;
  height: 48px;
  background: #eef6ec;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.hiw-pillar-icon svg { display: block; }
.hiw-pillar-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--hiw-charcoal);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.hiw-pillar-card p {
  font-size: 15px;
  color: var(--hiw-muted);
  line-height: 1.65;
}
.hiw-pillar-num {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--hiw-cloud);
  letter-spacing: 0.1em;
}

/* ============================================================
   3. MOCKUP GALLERY
   ============================================================ */
.hiw-mockups {
  background: var(--hiw-charcoal);
  padding: 80px 24px;
}
.hiw-mockups .section-label { color: rgba(255,255,255,0.4); }
.hiw-mockups h2 {
  color: var(--hiw-white);
  margin-bottom: 12px;
}
.hiw-mockups-intro {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 52px;
  line-height: 1.65;
}

/* Tablet scroll container */
.hiw-mockup-scroll {
  overflow-x: auto;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.hiw-mockup-scroll::-webkit-scrollbar { height: 4px; }
.hiw-mockup-scroll::-webkit-scrollbar-track { background: transparent; }
.hiw-mockup-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }

.hiw-mockup-row {
  display: flex;
  gap: 28px;
  min-width: max-content;
}

/* Base card */
.hiw-mockup-card {
  background: var(--hiw-white);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  width: 340px;
}
.hiw-mockup-header {
  background: var(--hiw-charcoal);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hiw-mockup-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--hiw-white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hiw-mockup-badge {
  background: var(--hiw-green);
  color: var(--hiw-white);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hiw-mockup-body { padding: 20px; }

/* ---- Scorecard ---- */
.hiw-score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hiw-score-table th {
  background: #f4f5f6;
  color: var(--hiw-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--hiw-border);
}
.hiw-score-table td {
  padding: 10px 10px;
  border-bottom: 1px solid #f0f1f1;
  color: var(--hiw-charcoal);
  vertical-align: middle;
}
.hiw-score-table tr:last-child td { border-bottom: none; }
.hiw-score-cat { font-weight: 600; }
.hiw-score-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}
.hiw-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ddd;
  border: 2px solid transparent;
  flex-shrink: 0;
}
.hiw-dot.filled { background: var(--hiw-green); }
.hiw-dot.half { background: var(--hiw-gold); }
.hiw-score-note {
  font-size: 11px;
  color: var(--hiw-muted);
  font-style: italic;
  max-width: 100px;
}
.hiw-score-date {
  background: #f4f5f6;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--hiw-muted);
  font-weight: 600;
  border-top: 1px solid var(--hiw-border);
  display: flex;
  justify-content: space-between;
}

/* ---- Photo gallery ---- */
.hiw-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.hiw-photo-tile {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 2px solid var(--hiw-border);
}
.hiw-photo-tile .hiw-photo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-photo-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--hiw-white);
  background: rgba(0,0,0,0.5);
  padding: 3px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hiw-photo-time {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  color: var(--hiw-white);
  background: rgba(0,0,0,0.5);
  padding: 3px 6px;
  border-radius: 2px;
}
.hiw-photo-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hiw-photo-tag.before { background: var(--hiw-gold); color: var(--hiw-white); }
.hiw-photo-tag.after  { background: var(--hiw-green); color: var(--hiw-white); }

/* CSS placeholder imagery */
.ph-restroom {
  background: linear-gradient(135deg, #d4e8d1 0%, #a8cca0 100%);
}
.ph-restroom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(255,255,255,0.2), transparent);
}
.ph-common {
  background: linear-gradient(135deg, #dde4e8 0%, #b8c5ce 100%);
}
.ph-common::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(255,255,255,0.15), transparent);
}
.ph-floors {
  background: linear-gradient(135deg, #d8d0bc 0%, #bfb59a 100%);
}
.ph-floors::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(255,255,255,0.15), transparent);
}
.ph-high-touch {
  background: linear-gradient(135deg, #e0d0c8 0%, #c4ac9e 100%);
}
.ph-high-touch::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(to top, rgba(255,255,255,0.2), transparent);
}
.ph-refuse {
  background: linear-gradient(135deg, #c8cdc4 0%, #a0a898 100%);
}
.ph-elevator {
  background: linear-gradient(135deg, #d5dde6 0%, #b0bfcf 100%);
}
/* Icon shapes inside placeholder */
.ph-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
}

/* ---- Service recovery log ---- */
.hiw-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.hiw-log-table th {
  background: #f4f5f6;
  color: var(--hiw-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  padding: 8px 8px;
  text-align: left;
  border-bottom: 1px solid var(--hiw-border);
}
.hiw-log-table td {
  padding: 9px 8px;
  border-bottom: 1px solid #f0f1f1;
  color: var(--hiw-charcoal);
  vertical-align: top;
}
.hiw-log-table tr:last-child td { border-bottom: none; }
.hiw-log-date { color: var(--hiw-muted); white-space: nowrap; }
.hiw-log-issue { font-weight: 600; }
.hiw-log-owner { font-size: 11px; color: var(--hiw-muted); }
.hiw-log-res { font-size: 12px; line-height: 1.4; }
.hiw-log-signoff {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--hiw-green);
  font-weight: 700;
}
.hiw-sign-icon {
  width: 14px;
  height: 14px;
  background: #eef6ec;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hiw-log-footer {
  background: #f4f5f6;
  padding: 8px 10px;
  font-size: 11px;
  color: var(--hiw-muted);
  border-top: 1px solid var(--hiw-border);
}

/* ============================================================
   4. COMPARISON TABLE
   ============================================================ */
.hiw-compare {
  background: var(--hiw-cloud);
  padding: 80px 24px;
}
.hiw-compare h2 {
  color: var(--hiw-charcoal);
  margin-bottom: 8px;
}
.hiw-compare-sub {
  font-size: 16px;
  color: var(--hiw-muted);
  margin-bottom: 44px;
  line-height: 1.6;
}
.hiw-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.hiw-compare-table th {
  background: var(--hiw-charcoal);
  color: var(--hiw-white);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 16px 20px;
  text-align: left;
}
.hiw-compare-table th:first-child { width: 50%; }
.hiw-compare-table th.col-managed { background: var(--hiw-green); }
.hiw-compare-table th.col-traditional { background: #7a8a96; }
.hiw-compare-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #bec4c8;
  color: var(--hiw-charcoal);
  vertical-align: middle;
}
.hiw-compare-table tr:last-child td { border-bottom: none; }
.hiw-compare-table tr:nth-child(even) td { background: rgba(255,255,255,0.5); }
.hiw-compare-table tr:nth-child(odd) td  { background: var(--hiw-white); }

.hiw-cmp-label { font-weight: 600; }
.hiw-cmp-managed {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hiw-cmp-check {
  width: 22px;
  height: 22px;
  background: var(--hiw-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hiw-cmp-traditional {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #8a969c;
}
.hiw-cmp-x {
  width: 22px;
  height: 22px;
  background: #c8cdd0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   5. BUILT FOR PORTFOLIOS
   ============================================================ */
.hiw-portfolios {
  background: var(--hiw-white);
  padding: 80px 24px;
  text-align: center;
}
.hiw-portfolios h2 {
  color: var(--hiw-charcoal);
  margin-bottom: 16px;
}
.hiw-portfolios p {
  font-size: 18px;
  color: var(--hiw-muted);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.7;
}
.hiw-portfolio-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
}
.hiw-portfolio-tag {
  background: var(--hiw-cloud);
  color: var(--hiw-charcoal);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.06);
}

/* ============================================================
   6. CTA BLOCK + LEAD FORM
   ============================================================ */
.hiw-cta {
  background: var(--hiw-green);
  padding: 80px 24px;
  text-align: center;
}
.hiw-cta .section-label { color: rgba(255,255,255,0.6); }
.hiw-cta h2 { color: var(--hiw-white); margin-bottom: 16px; }
.hiw-cta-sub {
  font-size: 18px;
  color: rgba(255,255,255,0.82);
  max-width: 520px;
  margin: 0 auto 44px;
  line-height: 1.65;
}
.hiw-cta .lf-card {
  max-width: 560px;
  margin: 0 auto;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
}

/* ============================================================
   7. TESTIMONIAL STRIP
   ============================================================ */
.hiw-testimonial {
  background: var(--hiw-charcoal);
  padding: 72px 24px;
  text-align: center;
}
.hiw-testimonial blockquote {
  font-size: 22px;
  color: var(--hiw-white);
  font-style: italic;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 24px;
  position: relative;
}
.hiw-testimonial blockquote::before {
  content: '\u201C';
  font-size: 72px;
  color: var(--hiw-green);
  font-style: normal;
  line-height: 0.8;
  display: block;
  margin-bottom: 12px;
  font-family: Georgia, serif;
}
.hiw-testimonial cite {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  font-style: normal;
  letter-spacing: 0.04em;
}
.hiw-testimonial cite strong { color: rgba(255,255,255,0.85); font-style: normal; }

/* ============================================================
   FOOTER
   ============================================================ */
.hiw-footer {
  background: #1e2a33;
  padding: 28px 24px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
}
.hiw-footer a { color: rgba(255,255,255,0.55); text-decoration: none; }
.hiw-footer a:hover { color: var(--hiw-white); }
.hiw-footer-logo {
  display: block;
  margin: 0 auto 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .hiw-hero { padding: 64px 20px 60px; }
  .hiw-pillars, .hiw-mockups, .hiw-compare, .hiw-portfolios, .hiw-cta, .hiw-testimonial { padding: 56px 20px; }
  .hiw-nav { padding: 12px 20px; }
  .hiw-nav-links { display: none; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .hiw-mockup-row { gap: 20px; }
  .hiw-mockup-card { width: 300px; }
}