/* Royal Chrome, Inc. */

:root {
  color-scheme: dark;
  --bg: #07080a;
  --bg-2: #0d0f13;
  --line: #1d2027;
  --text: #b6bac3;
  --text-hi: #eceef2;
  --muted: #6c717b;
  --accent: rgb(138, 150, 255);
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 68ch;
}

/* light mode: follows the OS unless a choice is stored (data-theme) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eef0f3;
    --bg-2: #e3e6eb;
    --line: #d2d6dd;
    --text: #3e434c;
    --text-hi: #0d0f13;
    --muted: #767c86;
    --accent: rgb(84, 98, 230);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef0f3;
  --bg-2: #e3e6eb;
  --line: #d2d6dd;
  --text: #3e434c;
  --text-hi: #0d0f13;
  --muted: #767c86;
  --accent: rgb(84, 98, 230);
}

/* phosphor overrides either mode (same specificity, declared later) */
:root.phosphor {
  color-scheme: dark;
  --bg: #010603;
  --bg-2: #03100a;
  --line: #0c3a1d;
  --text: #4dff88;
  --text-hi: #b6ffcb;
  --muted: #1f9a4a;
  --accent: rgb(60, 255, 120);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:root.phosphor body { font-family: var(--mono); text-shadow: 0 0 6px rgba(60, 255, 120, 0.35); }

a { color: var(--text-hi); text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s ease, color .2s; }
a:hover, a:focus-visible { background-size: 100% 1px; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

.fx-link:hover { animation: split .45s steps(2, end) 1; filter: url(#rc-wobble); }
@keyframes split {
  0%   { text-shadow: -2px 0 rgba(255, 40, 90, .7), 2px 0 rgba(40, 200, 255, .7); }
  50%  { text-shadow: 1px 0 rgba(255, 40, 90, .5), -1px 0 rgba(40, 200, 255, .5); }
  100% { text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-link:hover { animation: none; filter: none; } }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* page cover used by the dissolve transition until the overlay is ready */
.rc-cover body { opacity: 0; }

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px var(--gutter);
  max-width: 1120px; margin: 0 auto;
}
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--text-hi); font-weight: 600; letter-spacing: .02em; background: none; }
.site-header nav { display: flex; gap: 22px; font-size: 14px; }
.site-header nav a { color: var(--text); }
.site-header nav a:hover { color: var(--text-hi); }
.site-header nav { align-items: center; }
.theme-toggle {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px -6px -6px 0;
  padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer;
  transition: color .2s, background-color .2s;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--text-hi); background: var(--bg-2); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle[data-mode="light"] .icon-sun { display: none; }
.theme-toggle[data-mode="light"] .icon-moon { display: block; }

/* ---------- hero ---------- */
.hero {
  display: grid; justify-items: center; text-align: center;
  padding: 8px var(--gutter) 72px;
}
.orb-wrap { position: relative; width: min(78vw, 440px); aspect-ratio: 1; }
#orb { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.orb-wrap.no-gl::before {
  content: ""; position: absolute; inset: 20%; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.18), transparent 22%),
    radial-gradient(ellipse 60% 6% at 50% 52%, rgba(138,150,255,.55), transparent 70%),
    radial-gradient(circle at 50% 50%, #07080b 0 62%, #1a1d24 100%);
  box-shadow: inset 0 0 0 1px rgba(160,170,190,.18), inset 0 0 40px rgba(0,0,0,.7);
}
.orb-caption {
  position: absolute; left: 0; right: 0; bottom: 4%;
  font: 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  opacity: 0; transition: opacity .4s;
}
.orb-wrap:hover .orb-caption { opacity: 1; }

h1.wordmark {
  margin: 4px 0 10px;
  font-size: clamp(40px, 8vw, 84px); line-height: 1; letter-spacing: -.02em; font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, #d4d8df 36%, #5f646d 50%, #eef0f4 60%, #9ca2ab 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] h1.wordmark {
  background: linear-gradient(180deg, #6a707a 0%, #2a2e35 38%, #a4aab3 50%, #1b1e24 62%, #555a63 100%);
  -webkit-background-clip: text; background-clip: text;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) h1.wordmark {
    background: linear-gradient(180deg, #6a707a 0%, #2a2e35 38%, #a4aab3 50%, #1b1e24 62%, #555a63 100%);
    -webkit-background-clip: text; background-clip: text;
  }
}
html:root.phosphor h1.wordmark { background: none; color: var(--text-hi); }  /* beats the (0,3,1) system-light rule */
.tagline { margin: 0; max-width: 34ch; font-size: clamp(16px, 2.2vw, 19px); color: var(--text); }

/* ---------- sections ---------- */
.section { max-width: 1120px; margin: 0 auto; padding: 56px var(--gutter); border-top: 1px solid var(--line); }
.eyebrow { font: 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; }

.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.service { background: var(--bg); padding: 28px 24px 30px; }
.service .idx { font: 12px/1 var(--mono); color: var(--accent); }
.service h2 { margin: 14px 0 8px; font-size: 20px; font-weight: 600; color: var(--text-hi); letter-spacing: -.005em; }
.service p { margin: 0; color: var(--text); font-size: 15px; }
@media (max-width: 1000px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services { grid-template-columns: 1fr; } }

.referral { max-width: var(--measure); font-size: clamp(18px, 2.4vw, 22px); line-height: 1.5; color: var(--text-hi); margin: 0; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .contact { grid-template-columns: 1fr; gap: 28px; } }
.contact dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; }
.contact dt { font: 12px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact dd { margin: 0; color: var(--text-hi); }
.contact address { font-style: normal; }
.sms-note { font-size: 13px; line-height: 1.6; color: var(--muted); border-left: 1px solid var(--line); padding-left: 16px; margin: 0; }
.sms-note a { color: var(--text); }

/* ---------- footer ---------- */
.site-footer {
  max-width: 1120px; margin: 0 auto; padding: 28px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px 24px;
  font-size: 13px; color: var(--muted);
}
.site-footer nav { display: flex; gap: 20px; justify-self: end; }
.site-footer .resistor { width: 44px; height: 16px; display: block; }
.foot-id { display: flex; flex-direction: column; gap: 2px; }
.build { font: 11px/1.4 var(--mono); color: var(--muted); opacity: .75; min-height: 1.4em; }
@media (max-width: 640px) {
  .site-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer .resistor { order: -1; }
  .foot-id { align-items: center; }
  .site-footer nav { justify-self: center; }
}
.site-footer nav a { color: var(--text); }
.led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 10px; vertical-align: middle; background: #2a1a10; transition: background .02s, box-shadow .02s; }
.led.on { background: #ff9b3d; box-shadow: 0 0 8px #ff7a1a; }
:root[data-theme="light"] .led:not(.on) { background: #d9cfc6; }
:root.phosphor .led.on { background: #6bff9a; box-shadow: 0 0 8px #3dff7c; }

/* ---------- legal pages ---------- */
.legal { max-width: var(--measure); margin: 0 auto; padding: 24px var(--gutter) 64px; }
.legal h1 { color: var(--text-hi); font-size: clamp(30px, 5vw, 44px); line-height: 1.1; letter-spacing: -.015em; margin: 16px 0 8px; }
.legal .effective { font: 13px/1.4 var(--mono); color: var(--muted); margin: 0 0 32px; }
.legal h2 { color: var(--text-hi); font-size: 19px; margin: 40px 0 10px; }
.legal h3 { color: var(--text-hi); font-size: 16px; margin: 24px 0 6px; }
.legal p, .legal li { color: var(--text); }
.legal ul { padding-left: 20px; }
.legal .callout { border: 1px solid var(--line); background: var(--bg-2); padding: 16px 20px; margin: 20px 0; }
.legal .callout p { margin: 6px 0; }
.legal a { color: var(--text-hi); background-size: 100% 1px; }

/* ---------- fx overlay ---------- */
#fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }
#fx-under { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: -1; }