/* ==========================================================
   Vanilla Polygon Studios — global styles
   ========================================================== */

:root {
  --bg: #060A1C;
  --bg-elevated: #0B1230;
  --border: rgba(200, 144, 10, 0.1);
  --border-strong: rgba(200, 144, 10, 0.22);
  --vanilla: #f5e8c7;
  --vanilla-warm: #f4d58a;
  --polygon: #C8900A;
  --polygon-light: #E0A820;
  --cyan: #2563EB;
  --text: #e8e8f0;
  --text-muted: #8a8aa0;
  --max-width: 1200px;
  --radius: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* clears the 72px fixed header on anchor jumps */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--vanilla);
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.5rem; }

p { color: var(--text); }
.muted { color: var(--text-muted); }

a {
  color: var(--polygon-light);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
a:hover { color: var(--vanilla); }

img { max-width: 100%; display: block; }

/* ----- Layout ----- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: 6rem 0;
}

/* ----- Header ----- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(6, 10, 28, 0.7);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--vanilla);
  text-transform: uppercase;
}
.logo:hover { color: var(--vanilla); }

.logo-img {
  height: 38px;
  width: auto;
  display: block;
  transition: opacity 0.2s var(--ease);
}

/* Footer studio mark. This class previously had NO rule at all while the markup
   was a bare <svg> with no width/height — which falls back to the 300x150 SVG
   default size. Explicit dimensions are load-bearing here. */
.logo-mark {
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  display: block;
  transition: opacity 0.2s var(--ease);
}
.logo:hover .logo-mark {
  opacity: 0.85;
}
.logo:hover .logo-img {
  opacity: 0.85;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--polygon);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--vanilla);
  cursor: pointer;
  padding: 0.5rem;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s var(--ease);
  border: 1px solid transparent;
  text-decoration: none;
}

/* Dark ink on gold, not white: white on --polygon is only 2.84:1, which fails
   WCAG AA. Navy gives ~9:1 and reads as deliberate against the brand gold. */
.btn-primary {
  background: var(--polygon);
  color: var(--bg);
  font-weight: 600;
  box-shadow: 0 0 0 0 rgba(200, 144, 10, 0.4);
}
.btn-primary:hover {
  background: var(--polygon-light);
  color: var(--bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200, 144, 10, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--vanilla);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  background: rgba(200, 144, 10, 0.05);
  color: var(--vanilla);
  border-color: var(--vanilla);
}

/* ----- Hero ----- */
.hero {
  position: relative;
  min-height: 100vh; /* fallback */
  min-height: 100dvh; /* avoids the jump when mobile browsers collapse the URL bar */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: 72px;
}

.hero-content {
  position: relative;
  z-index: 20;
  max-width: 800px;
  padding: 0 1.5rem;
}

/* 3D polygon centerpiece.
   The hero reserves a slot above the headline as the object's resting position
   (and as the static-logo fallback holder). The live 3D renders into a fixed,
   full-viewport stage so it can fly down the page on scroll. */
.hero-centerpiece {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.centerpiece-fallback {
  width: 150px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 24px rgba(200, 144, 10, 0.25));
}
/* When the 3D boots, main.ts flags <html> — hide the static logo (the object
   occupies the hero slot instead). Reduced-motion / mobile / no-WebGL keep it. */
html[data-centerpiece-active] .centerpiece-fallback {
  display: none;
}

/* Fixed stage. .hero is position:relative with no z-index, so it opens no
   stacking context and the hero's own layers compete here in the root: boxes 0,
   mask 10, particles 11. The stage must sit above the mask or the vignette dims
   the object as it travels toward the right gutter — but below the hero copy
   (20) and the fixed nav (50). Never intercepts input. */
#centerpiece-stage {
  position: fixed;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}
#centerpiece-stage canvas {
  display: block;
}

@media (max-width: 760px) {
  .hero-centerpiece {
    width: 170px;
    height: 170px;
  }
  .centerpiece-fallback {
    width: 120px;
  }
}

.hero h1 {
  margin-bottom: 1.25rem;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--polygon-light), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-mask {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 10;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(transparent, var(--bg) 75%);
  mask-image: radial-gradient(transparent, var(--bg) 75%);
}

/* ----- Particle canvas ----- */
/* Fixed to the viewport, not to .hero — the cursor trail follows you down the
   whole page. Above the hero vignette (10) so it isn't dimmed in the hero, below
   the 3D object (12) so it never obscures it, and below the hero copy (20). */
#particle-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  pointer-events: none;
}

/* ----- Background boxes ----- */
.boxes-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.boxes-grid {
  position: absolute;
  left: 25%;
  top: -25%;
  width: 100%;
  height: 100%;
  display: flex;
  transform: translate(-40%, -60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0);
}

.boxes-col {
  width: 4rem;
  height: 2rem;
  border-left: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
}

.boxes-cell {
  width: 4rem;
  height: 2rem;
  border-right: 1px solid var(--border);
  border-top: 1px solid var(--border);
  position: relative;
  transition: background-color 1.5s ease-out;
}

.boxes-plus {
  position: absolute;
  height: 1.5rem;
  width: 2.5rem;
  top: -14px;
  left: -22px;
  color: var(--border-strong);
  pointer-events: none;
}

/* ----- Sections ----- */
.section-header {
  text-align: center;
  margin-bottom: 4rem;
}
.section-header h2 { margin-bottom: 0.75rem; }
.section-header p { color: var(--text-muted); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--polygon-light);
  margin-bottom: 1rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(200, 144, 10, 0.05);
}

/* ----- Card grid ----- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 144, 10, 0.1), transparent 40%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}
.card:hover::before { opacity: 1; }

.card h3 { margin-bottom: 0.75rem; }
.card p { color: var(--text-muted); font-size: 0.95rem; }

.card-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vanilla-warm);
  margin-bottom: 1rem;
}

/* ----- Page content ----- */
.page-header {
  padding-top: 10rem;
  padding-bottom: 4rem;
  text-align: center;
  position: relative;
}

.page-header h1 { margin-bottom: 1rem; }
.page-header p {
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

.prose {
  max-width: 720px;
  margin: 0 auto;
}

.prose h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
}

.prose p {
  margin-bottom: 1.25rem;
  color: var(--text-muted);
}

.prose ul {
  margin: 0 0 1.25rem 1.5rem;
  color: var(--text-muted);
}
.prose li { margin-bottom: 0.5rem; }

.prose a {
  color: var(--polygon-light);
  border-bottom: 1px dotted var(--border-strong);
}

.notice {
  background: rgba(200, 144, 10, 0.08);
  border: 1px solid rgba(200, 144, 10, 0.2);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.notice strong { color: var(--vanilla); }

/* ----- Form ----- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 560px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-row label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-row textarea {
  min-height: 140px;
  resize: vertical;
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--polygon);
  box-shadow: 0 0 0 3px rgba(200, 144, 10, 0.15);
}

/* Visually removed without display:none, so a field stays submittable.
   Used for the contact form's spam honeypot, which adds aria-hidden of its own. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  font-size: 0.9rem;
  text-align: center;
  min-height: 1.4em;
}
.form-status.success { color: #6ee7b7; }
.form-status.error { color: #fca5a5; }

/* ----- Footer ----- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 3rem 0 2rem;
  margin-top: 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.footer-grid h4 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vanilla);
  margin-bottom: 1rem;
}

.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.5rem; }
.footer-grid a {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.footer-grid a:hover { color: var(--vanilla); }

.footer-tag {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-top: 0.75rem;
  max-width: 320px;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-x-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  transition: color 0.2s var(--ease);
}
.footer-x-link:hover { color: var(--vanilla); }

/* ----- Responsive ----- */
@media (max-width: 768px) {
  section { padding: 4rem 0; }

  .nav-links {
    position: fixed;
    top: 72px;
    right: 0;
    bottom: 0;
    width: min(280px, 80%);
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    padding: 2rem 1.5rem;
    gap: 1.25rem;
    transform: translateX(100%);
    /* visibility (not just transform) keeps the closed drawer out of the tab
       order — otherwise focus lands on links parked off-screen. Delaying it
       until the slide-out finishes preserves the animation. */
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s var(--ease), visibility 0s;
  }

  .nav-toggle { display: block; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .page-header { padding-top: 8rem; padding-bottom: 3rem; }
}

/* ==========================================================
   Accessibility
   ========================================================== */

/* Keyboard focus. Every interactive element needs a visible ring: the form
   fields below style :focus for mouse users too, so they keep their own rule. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--polygon-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link: off-screen until focused, then pinned over the fixed header. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--bg-elevated);
  color: var(--vanilla);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 1rem;
}

/* Consent for motion. The hero grid and the gold cursor trail are decorative,
   so they are removed rather than slowed. The 3D centerpiece opts out earlier,
   in the loader script in index.html, so its bundle is never downloaded. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .boxes-container,
  #particle-canvas {
    display: none !important;
  }
}

/* Point-of-collection notice under the contact form's submit button. */
.form-note {
  font-size: 0.825rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 46ch;
}