/* ============================================================================
   GLACIER — overrides layered on top of redfeather-sections.css and
   redfeather-projects.css. Only re-paints the few hardcoded warm values
   and serif-specific italics; all layout is inherited untouched.
   Load order: glacier.css → redfeather-sections.css → redfeather-projects.css
   → this file (last).
   ========================================================================== */

/* ===== Hero dot-matrix terrain (canvas sits behind the hero content) ===== */
.hero-terrain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 7%, black 84%, transparent 100%);
}
.hero-terrain canvas { width: 100%; height: 100%; display: block; }
.hero > .container { position: relative; z-index: 1; }

/* ===== Red dot cursor (site-wide, fine pointers only) ===== */
html.glacier-cursor-on, html.glacier-cursor-on * { cursor: none !important; }
#glacier-cursor {
  position: fixed; top: 0; left: 0; z-index: 2147483647;
  width: 7px; height: 7px; border-radius: 50%;
  background: oklch(57% 0.236 27); /* the brand red — the one red on the page */
  pointer-events: none; visibility: hidden;
  will-change: transform, width, height, opacity;
}

/* ===== Nav glass: warm cream alpha → cool white alpha ===== */
.nav { background: oklch(99.4% 0.0015 250 / 0.72); }
.nav-scrolled { background: oklch(99.4% 0.0015 250 / 0.88); }

/* ===== Serif italics don't exist in Space Grotesk — set upright ===== */
.display em, .accent { font-style: normal; }
.about-sig { font-style: normal; letter-spacing: -0.01em; font-weight: 500; font-size: 23px; }
.hope p { font-style: normal; font-weight: 500; }
.why-feature h3 em { font-style: normal; }

/* ===== Accent TEXT is brand red site-wide (icons & fills stay glacier blue) ===== */
.step-n { color: var(--brand-red); }
.quote-mark {
  color: var(--brand-red);
  /* block-quote shape: solid comma-quotes with flat bases, drawn as an SVG
     mask filled with currentColor — the glyph text inside is hidden */
  font-size: 0;
  width: 50px;
  height: 46px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M38 2 C16 12 2 33 2 58 L2 98 L44 98 L44 50 L22 50 C23 32 29 14 44 6 Z'/%3E%3Cpath d='M94 2 C72 12 58 33 58 58 L58 98 L100 98 L100 50 L78 50 C79 32 85 14 100 6 Z'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M38 2 C16 12 2 33 2 58 L2 98 L44 98 L44 50 L22 50 C23 32 29 14 44 6 Z'/%3E%3Cpath d='M94 2 C72 12 58 33 58 58 L58 98 L100 98 L100 50 L78 50 C79 32 85 14 100 6 Z'/%3E%3C/svg%3E") no-repeat left center / contain;
}

/* ===== On dark ink bands the red steps up a tone so it stays luminous ===== */
.why-feature h3 em { color: var(--brand-red-bright); }
.footer-hope { color: var(--brand-red-bright); }
.invert .eyebrow, .contact .eyebrow, .footer .eyebrow { color: var(--brand-red-bright); }
.invert .eyebrow .tick, .contact .eyebrow .tick, .footer .eyebrow .tick { background: var(--brand-red-bright); }
.invert .display em, .invert .accent, .contact .accent, .footer .accent { color: var(--brand-red-bright); }

/* ===== Problem → solution table: green checks, red question marks ===== */
.ps-solution .ic, .ps-solution svg, .ps-solution .lucide { color: oklch(60% 0.17 148); } /* bright forest green */
.ps-problem .ic, .ps-problem svg, .ps-problem .lucide { color: var(--brand-red); }

/* ===== FAQ expand/collapse plus icons: brand red ===== */
.faq-q .faq-ic { color: var(--brand-red); }

/* ===== Project cards: "View project →" link + arrow in brand red ===== */
.project-link { color: var(--brand-red); }
.project-card:hover .project-link { color: var(--brand-red-hover); }

/* ===== "What's included" pills: fully tonal in red ===== */
.included-chip {
  color: var(--brand-red);
  border-color: oklch(86% 0.075 26);
  background: oklch(97.8% 0.012 26);
}
.included-chip .ic { color: var(--brand-red); }

/* ===== Icons site-wide: red outline, no button tiles ===== */
/* tiles keep their footprint (layout unchanged) but lose bg/border/shadow */
.problem-ic, .why-card .why-ic, .form-success .fs-ic {
  background: transparent;
  border: none;
  box-shadow: none;
}
.problem-ic, .why-card .why-ic,
.svc-ic,
.svc-list li,
.hero-trust-item .ic, .hero-trust-item svg, .hero-trust-item .lucide,
.included-chip .ic, .included-chip svg, .included-chip .lucide,
.form-success .fs-ic {
  color: var(--brand-red);
}
.svc-list .ic, .svc-list svg, .svc-list .lucide { color: var(--brand-red); }
.svc-list li { color: var(--fg); } /* keep list text ink — only the checks go red */

/* ===== Icons inside dark bands → luminous red ===== */
.why-local-item .ic, .why-local-item svg, .why-local-item .lucide { color: var(--brand-red-bright); }
.cp-item .ic, .cp-item svg, .cp-item .lucide { color: var(--brand-red-bright); }

/* ===== Pull-quote card: drop the colored left keyline, keep it quiet ===== */
.hope { border-left: 1px solid var(--border); }

/* ===== Striped image placeholders: warm paper → cool paper ===== */
.project-img {
  background-image: repeating-linear-gradient(
    45deg,
    oklch(97.4% 0.004 248) 0,
    oklch(97.4% 0.004 248) 12px,
    oklch(95.2% 0.007 247) 12px,
    oklch(95.2% 0.007 247) 24px
  );
}
.article-hero {
  background-image: repeating-linear-gradient(
    45deg,
    oklch(97.4% 0.004 248) 0,
    oklch(97.4% 0.004 248) 18px,
    oklch(95.2% 0.007 247) 18px,
    oklch(95.2% 0.007 247) 36px
  );
}