/* Rhodex — site-wide v3 theme, 2026-08-11
 *
 * Deliberately restyles the class names the existing pages already use
 * (.site, .bar, .page-hero, .content, .card, .eyebrow, .lead, .btn, ...)
 * rather than requiring every page to be rewritten. Sixteen pages get the
 * new language by changing one stylesheet link; the markup and, more
 * importantly, the SEO content stay exactly as they are.
 *
 * Same performance rules as the homepage: transform/opacity animations
 * only, no libraries, no images, and everything off under
 * prefers-reduced-motion.
 */

:root {
  --ink: #111111;
  --paper: #ffffff;
  --paper-warm: #faf8f2;
  --charcoal: #1b1b19;
  --signal: #f2b705;
  --signal-deep: #a9760a;
  --slate: #5a5a55;
  --line: #e4e1d6;
  --max: 1180px;
  --night: #0b0b0a;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-line: rgba(255, 255, 255, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden;
}
.wrap { width: min(100% - 40px, var(--max)); margin-inline: auto; }
h1, h2, h3, h4 { font-family: "Archivo Black", Impact, sans-serif; font-weight: 400; letter-spacing: -0.02em; }
a { color: var(--signal-deep); }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* scroll progress, injected by site.js */
#progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 90; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; }

/* testing-period banner, injected by site.js — remove alongside it once
   the phone number retires, or leave in place for the next one. */
#testing-banner {
  background: var(--signal); color: var(--night);
  font-size: 13.5px; font-weight: 600; line-height: 1.5;
  text-align: center; padding: 10px 20px;
}
#testing-banner a { color: var(--night); text-decoration: underline; font-weight: 700; white-space: nowrap; }
#testing-banner a:hover { text-decoration: none; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 80; background: rgba(11, 11, 10, 0.72);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
header.site .bar { display: flex; align-items: center; gap: 22px; height: 68px; width: min(100% - 40px, var(--max)); margin-inline: auto; }
header.site .logo { height: 38px; display: block; }
header.site nav.main { margin-left: auto; display: flex; gap: 22px; align-items: center; }
header.site nav.main a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 14px; font-weight: 500; }
header.site nav.main a:hover { color: #fff; }
header.site nav.main a.cta { background: var(--signal); color: var(--night); padding: 9px 16px; border-radius: 999px; font-weight: 700; }
header.site nav.main a.phone { color: var(--signal); font-weight: 700; white-space: nowrap; }
@media (max-width: 900px) { header.site nav.main a:not(.cta):not(.phone) { display: none; } }

/* ---------- visible NAP block, footer (2026-09-12 SEO fix) ----------
   The phone number already existed in the homepage's JSON-LD but was
   never shown to an actual visitor -- Google's local-matching and a
   homeowner deciding whether to call both need it in view, not just
   in structured data. Real address confirmed against the verified
   Google Business Profile the same day. */
footer.site .nap, footer.f .nap { margin-top: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.62); }
footer.site .nap a, footer.f .nap a { display: inline; margin: 0; color: var(--signal); }

/* ---------- page hero: every inner page gets the dark treatment ---------- */
.page-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 74px 0 66px; border-bottom: 2px solid var(--signal);
  /* Second glow lives directly on the element's own background — a wide,
     naturally soft-edged radial-gradient reads as a glow without needing
     filter:blur(), which would otherwise also smear the grain texture on
     ::after sharing the same stacking context. Spotlight layer (desktop
     only, see media query below) sits on top of that. */
  background: radial-gradient(620px circle at 88% 6%, rgba(169, 118, 10, 0.4), transparent 68%), var(--night);
}
@media (hover: hover) and (pointer: fine) {
  .page-hero {
    background:
      radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(242, 183, 5, 0.16), transparent 62%),
      radial-gradient(620px circle at 88% 6%, rgba(169, 118, 10, 0.4), transparent 68%), var(--night);
  }
}
.page-hero::before {
  content: ""; position: absolute; width: 560px; height: 560px; top: -260px; left: -120px;
  border-radius: 50%; filter: blur(80px); opacity: 0.5; pointer-events: none;
  background: radial-gradient(circle, rgba(242, 183, 5, 0.4), transparent 68%);
  animation: drift 24s var(--ease) infinite alternate;
}
/* Grain texture — same technique as the homepage's .grain, as a pseudo-
   element instead of an extra div so no markup change is needed on any of
   the 23 pages that share this stylesheet. */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}
@keyframes drift { to { transform: translate3d(90px, 60px, 0) scale(1.14); } }
.page-hero .wrap { position: relative; z-index: 2; }

/* Real WebGL 3D gem, injected by hero-3d.js — see that file. Sits to the
   right of the heading, where every page-hero has open space. */
.page-hero canvas.hero3d {
  position: absolute; z-index: 1; pointer-events: none;
  top: 50%; right: 4%; transform: translateY(-50%); opacity: 0.9;
  filter: drop-shadow(0 26px 54px rgba(242, 183, 5, 0.25));
}
@media (max-width: 780px) {
  .page-hero canvas.hero3d { opacity: 0.4; right: -8%; }
}
.page-hero h1 { font-size: clamp(38px, 6vw, 72px); line-height: 1.0; margin: 14px 0 0; }
.page-hero .eyebrow { color: var(--signal); }
.page-hero p, .page-hero .lead { color: rgba(255, 255, 255, 0.72); max-width: 60ch; }

/* Article-page conversion CTA, 2026-08-20 — every article was ranking
   and reading well but had no path from "read the article" to "get a
   fixed price," the site's real conversion action (see index.html's
   hero). Sits below the h1, in the same open space to the left of the
   3D gem, so it reads as part of the hero rather than bolted on. */
.page-hero .btn.hero-cta { margin-top: 28px; }
.page-hero .hero-cta-note { margin: 12px 0 0; font-size: 13.5px; max-width: 40ch; }

/* Gold text-sweep, available for emphasis words in any heading. */
.shine {
  background: linear-gradient(100deg, var(--signal-deep) 0%, var(--signal) 28%, #fff3c4 46%, var(--signal) 62%, var(--signal-deep) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sweep 6.5s linear infinite;
}
@keyframes sweep { from { background-position: 160% 0; } to { background-position: -60% 0; } }

.eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); display: block; }

/* ---------- content ---------- */
.content, .section { padding: 76px 0; }
.section.warm, .content.warm { background: var(--paper-warm); border-block: 1px solid var(--line); }
.content h2, .section h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.08; margin: 46px 0 14px; }
.content h3, .section h3 { font-size: 20px; margin: 30px 0 10px; }
.content p, .section p { color: var(--slate); max-width: 68ch; }
.lead { font-size: 17.5px; line-height: 1.65; color: var(--slate); max-width: 62ch; }
.content ul, .content ol { color: var(--slate); max-width: 66ch; }
.content li { margin-bottom: 9px; }

/* Pull-quotes and callouts get the gold rule the brand already used. */
blockquote {
  margin: 32px 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--signal);
  font-family: "Archivo Black", sans-serif; font-size: 21px; line-height: 1.4; color: var(--ink);
}

/* ---------- cards ---------- */
.card, .ticket {
  border: 1px solid var(--line); border-radius: 18px; padding: 26px; background: var(--paper);
  position: relative; overflow: hidden;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease), border-color 0.24s;
}
.card::before, .ticket::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--signal);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.34s var(--ease);
}
.card:hover::before, .ticket:hover::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .card:hover, .ticket:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -30px rgba(17, 17, 17, 0.45); }
}
.card h3, .ticket h3 { margin-top: 0; font-size: 19px; }
.tag { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal-deep); }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn.primary { background: var(--signal); color: var(--night); box-shadow: 0 12px 32px -14px rgba(242, 183, 5, 0.7); }
.btn.primary:hover { transform: translateY(-3px); }
.btn.secondary { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn.secondary:hover { transform: translateY(-3px); border-color: var(--signal); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- lead-capture forms (support.html, get-a-quote.html) ---------- */
form.contact { max-width: 520px; }
form.contact > div { margin-bottom: 18px; }
form.contact label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
form.contact input, form.contact select, form.contact textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 15px; transition: border-color 0.18s var(--ease);
}
form.contact textarea { resize: vertical; min-height: 100px; }
form.contact input:focus, form.contact select:focus, form.contact textarea:focus {
  outline: none; border-color: var(--signal-deep);
}
form.contact button.btn.primary { border: none; cursor: pointer; width: 100%; }

/* ---------- AI-readiness score bars: the site's most visual page ---------- */
.score-row { margin: 20px 0; }
.score-label { font-weight: 600; font-size: 15px; }
.score-track { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 8px 0 6px; }
.score-track > * , .score-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--signal-deep), var(--signal));
}
.score-value { font-family: "IBM Plex Mono", monospace; color: var(--signal-deep); font-weight: 600; }
.score-note { font-size: 14px; color: var(--slate); }

/* ---------- scripted dialog ("Talk to Rhodex") ---------- */
.chat-transcript { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 28px; min-height: 40px; }
.chat-bubble { max-width: 74%; padding: 14px 18px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; opacity: 0; transform: translateY(8px); animation: chat-in 0.4s var(--ease) forwards; }
.chat-bubble.you { align-self: flex-end; background: var(--paper-warm); border: 1px solid var(--line); border-bottom-right-radius: 4px; color: var(--ink); }
.chat-bubble.rhodex { align-self: flex-start; background: var(--night); color: #fff; border-bottom-left-radius: 4px; }
.chat-bubble.rhodex .who { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin-bottom: 6px; }
@keyframes chat-in { to { opacity: 1; transform: none; } }
.chat-questions { display: flex; flex-wrap: wrap; gap: 10px; }
.chat-q-btn {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 999px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: border-color 0.18s, transform 0.18s var(--ease), opacity 0.18s;
}
.chat-q-btn:hover { border-color: var(--signal); transform: translateY(-2px); }
.chat-q-btn.asked { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) {
  .chat-bubble { animation: none; opacity: 1; transform: none; }
  .chat-q-btn:hover { transform: none; }
}

/* ---------- footer ---------- */
footer.site { background: var(--night); color: rgba(255, 255, 255, 0.62); padding: 56px 0 28px; }
footer.site .logo { height: 30px; }
footer.site .grid { display: grid; gap: 34px; grid-template-columns: 1.3fr 2fr; margin-bottom: 34px; }
@media (max-width: 780px) { footer.site .grid { grid-template-columns: 1fr; } }
footer.site .links { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { footer.site .links { grid-template-columns: 1fr 1fr; } }
footer.site h4 { color: #fff; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 14px; font-family: "Inter", sans-serif; font-weight: 700; }
footer.site a { display: block; color: rgba(255, 255, 255, 0.62); text-decoration: none; font-size: 14px; margin-bottom: 9px; }
footer.site a:hover { color: var(--signal); }
footer.site .bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  #progress { display: none; }
}