/* Shared identity: a quiet midnight canvas with violet and icy-blue light. */
@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/fonts/space-grotesk.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --violet: #9475ff;
  --ice: #a5d8ff;
  --surface: #111324;
  --gradient: linear-gradient(110deg, #d1bdff 2%, #a28bff 53%, #a5d8ff 100%);
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}
body { position: relative; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 83% 39%, #6238d222 0%, transparent 51%),
    radial-gradient(ellipse at 13% 100%, #3d4d9a14 0%, transparent 46%),
    linear-gradient(135deg, #090b17, #0c0d1c 65%, #0f0d21);
}
.site-header, .site-footer, .legal-footer { border-color: #ad9bff22; }
.wordmark { font-weight: 500; letter-spacing: -.055em; }
.wordmark > span { color: var(--violet); }
.location-dot, .nav-dot, .signoff-dot { background: var(--ice); box-shadow: 0 0 9px #a5d8ff38; }
.eyebrow, .section-eyebrow { color: #a5a6c1; font-weight: 500; letter-spacing: .12em; }
.eyebrow-line, .section-eyebrow > span { background: linear-gradient(90deg, var(--violet), var(--ice)); }
.hero h1 {
  font-size: clamp(58px, min(7.4vw, 12svh), 128px);
  font-weight: 600; letter-spacing: -.055em; line-height: 1.05;
}
.hero h1 > span + span { margin-top: .035em; }
.hero h1 > .accent, .services-page .section-heading h1 > span,
.services-page .section-heading h2 > span, .contact-section h2 em {
  color: #b9a5ff;
  background: var(--gradient); background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .hello-emoji { -webkit-text-fill-color: initial; font-weight: 400; font-size: .32em; vertical-align: .1em; margin-left: .4em; }
.intro { letter-spacing: -.025em; text-wrap: balance; }
.intro > span { color: var(--muted); }
.social-links a {
  background: linear-gradient(145deg, #b9a5ff0a, #a5d8ff03);
  border-color: #ad9bff33; border-radius: 14px; color: #e2dff5;
}
.social-links a:hover {
  color: var(--white); background: #8c6bf126; border-color: #b9a5ff99;
  box-shadow: 0 0 20px #8c6bf112;
}
.social-links a:focus-visible { border-radius: 14px; }
.portrait-orbit::before {
  content: ""; position: absolute; inset: 3%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #8565ff22 0%, #684aff12 48%, transparent 72%);
  box-shadow: 0 0 85px #684aff10;
}
.orbit-ring--outer { border-color: #b9a5ff2e; }
.orbit-ring--inner { border-color: #b9a5ff45; }
.portrait-disc {
  inset: 11%; border-radius: 27%; background: #302269;
  border: 1px solid #c6b5ff55; box-shadow: 0 0 40px #7755f51c;
}
.portrait-disc img { object-fit: contain; object-position: center; transform: none; }
.portrait:hover .portrait-disc img { transform: scale(1.015); }
.portrait-asterisk { right: 0; color: var(--ice); font-size: clamp(25px, 2.8vw, 42px); }
.orbit-dot::before {
  background: #c9e8ff; box-shadow: 0 0 0 5px #090b17b3, 0 0 16px #91bbff8c;
}
.orbit-dot:hover::before, .orbit-dot:focus-visible::before { box-shadow: 0 0 0 7px #a5d8ff18, 0 0 25px #a5d8ff80; }
.planet-body { background: radial-gradient(circle at 30% 25%, #ad8dff55, #1c173942 65%); border-color: #b9a5ff70; }
.planet-ring { border-color: #9c80ff55; }
.planet-dot::before { background: var(--ice); box-shadow: 0 0 9px #a5d8ff55; }
.portrait figcaption { color: var(--subtle); letter-spacing: -.015em; }
.portrait figcaption > span { color: #c1bfd7; }
.services-entry {
  border-color: #a88aff55; border-radius: 16px;
  background: linear-gradient(115deg, #9670ff14, #637ccf08);
  box-shadow: inset 0 1px 0 #c4aaff09;
}
.services-entry:hover { border-color: #b9a5ffab; background: linear-gradient(115deg, #9670ff24, #637ccf12); }
.services-entry-copy strong { color: #e2d7ff; font-weight: 500; letter-spacing: -.035em; }
.services-entry-copy > span { color: var(--muted); }
.entry-arrow { color: var(--ice); }
.saying-button { font-family: inherit; letter-spacing: -.02em; color: #b8b6cf; }
.reset-game { color: #c5c3da; }

/* Use the same materials and typography on the existing interior pages. */
.services-page h1, .services-page h2, .services-page h3, .legal-heading h1 { font-weight: 600; letter-spacing: -.045em; }
.services-page .section-heading h1 { font-weight: 600; letter-spacing: -.045em; }
.service-card {
  border-color: #aa94ff2b; border-radius: 20px;
  background: linear-gradient(135deg, #ad8dff09, #111324 62%);
}
.service-card:hover { border-color: #b59bff66; background: linear-gradient(135deg, #ad8dff13, #14162a 72%); }
.service-number { color: #c9b8ff; }
.service-card h2 { font-weight: 500; letter-spacing: -.04em; }
.service-subtitle { color: #b8a4f3; }
.service-illustration { filter: drop-shadow(0 0 14px #8365ff12); }
.service-tagline { color: #c7b8f2; }
.services-nav .nav-contact { border-radius: 12px; background: #9b7bff0a; }
.pill-button { border-radius: 12px; background: var(--gradient); color: #101023; }
.pill-button:hover { background: linear-gradient(110deg, #d6caff, #b7c6ff); }
.contact-section {
  border: 1px solid #a68aff4d; border-radius: 22px; color: var(--white);
  background: radial-gradient(ellipse at 100% 60%, #764be038, transparent 65%), linear-gradient(130deg, #19152f, #111425);
}
.contact-section .section-eyebrow { color: #aba3c9; }
.contact-section p:not(.section-eyebrow) { color: var(--muted); }
.contact-button { color: #101023; background: var(--gradient); }
.contact-button:hover { background: linear-gradient(110deg, #d6caff, #b7c6ff); }
.contact-email { color: #cfbfff; }
.contact-section a:focus-visible { outline-color: var(--ice); }
.contact-orbit-ring { border-color: #b9a5ff45; }
.contact-orbit .second-ring { border-color: #a5d8ff38; }
.contact-spark { color: #b299ff; text-shadow: 0 0 50px #9475ff24; }
.contact-orbit-dot { background: var(--ice); border-color: #24203d; box-shadow: 0 0 24px #9dbfff33; }
.legal-section h2 { color: #dfd6fb; font-weight: 500; }
.legal-section { border-color: #ad9bff29; }

@media (max-width: 820px) {
  .hero h1 { font-size: clamp(40px, min(13.2vw, 10svh), 84px); }
  .hero .eyebrow { letter-spacing: .09em; }
  .social-links a { border-radius: 13px; }
  .services-entry-copy strong { font-size: 14px; }
  .services-entry-copy > span { font-size: 10px; }
  .services-page .section-heading h1 { font-size: clamp(30px, 5vw, 46px); }
}
@media (max-height: 800px) and (max-width: 820px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(38px, min(13vw, 9.5svh), 80px); }
}
@media (max-height: 740px) and (max-width: 820px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(36px, min(12vw, 8.3svh), 60px); }
}
@media (max-height: 650px) and (min-width: 821px) {
  .hero h1 { font-size: min(7.4vw, 11svh); }
}
@media (max-height: 650px) and (max-width: 820px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(32px, min(11.2vw, 7.4svh), 52px); line-height: 1.02; }
  .hero h1 > span + span { margin-top: .03em; }
  .saying-button { font-size: 12px; line-height: 1.35; }
}
@media (max-height: 560px) and (orientation: portrait) {
  .hero h1 { font-size: clamp(32px, min(11.2vw, 7.4svh), 52px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .hero h1 { font-size: min(6.4vw, 9.6svh); line-height: 1; }
  .services-entry-copy strong { font-size: 12px; }
  .social-links a { border-radius: 11px; }
}
@media (max-width: 370px) {
  .wordmark { font-size: 20px; }
  .hero .eyebrow { font-size: 10px; }
  .services-entry-copy strong { font-size: 12px; }
  .services-entry-copy > span { font-size: 9px; }
}
@media (max-width: 300px) {
  .hero h1 { font-size: clamp(26px, 12vw, 36px); }
  .hero h1 > span { white-space: normal; }
}
@media (forced-colors: active) {
  .hero h1 > .accent, .services-page .section-heading h1 > span,
  .services-page .section-heading h2 > span, .contact-section h2 em {
    background: none; -webkit-text-fill-color: currentColor;
  }
}