/* ============================================================================
 * Octio — hero constellation + global layout overrides + mobile responsive
 *
 * The hero shows a particle constellation (futuristic network of orange-warm
 * lines connecting cream dots). Everything else is layout sanity layered on
 * top of the Claude Design HTML: edge-to-edge, full-viewport hero, drop the
 * design's drifting orbs, and a comprehensive mobile pass since the design
 * was originally desktop-locked at viewport=1440.
 * ========================================================================= */

/* Hide the design's drifting orbs — constellation replaces them */
.hero-img .hero-orb,
.hero-img .hero-grain { display: none !important; }
.hero-img::before,
.hero-img::after { display: none !important; }

/* Constellation canvas */
.hero-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

/* Edge-to-edge site (override design's 1440 page frame) */
body { background: #0d0d0e !important; }
.page { max-width: none !important; width: 100% !important; }

/* Hero fills the full viewport so the next (white) section doesn't peek */
.hero {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
.hero-wrap { background: #0d0d0e; }
.nav-rule { display: none !important; }

/* Centered hero content — headline + lede + buttons stacked, all centred */
.hero-content {
  text-align: center !important;
  padding: 0 24px !important;
  width: 100% !important;
  max-width: 1100px !important;
}
.hero-title {
  margin: 0 auto !important;
  max-width: 100% !important;
  text-align: center !important;
}
.hero-accent {
  color: #e07a35;            /* orange-glow accent for "deliver" */
  font-style: italic;        /* hint of personality */
}

/* Lede + buttons collapse from grid into a centred column directly below */
.hero-bottom {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin-top: 36px !important;
  padding: 0 24px !important;
  border-top: none !important;
  width: 100% !important;
  max-width: 720px !important;
}
.hero-bottom > div:first-child { display: none !important; }   /* the empty left column */
.hero-bottom > div:last-child { width: 100%; }
.hero-lede {
  margin: 0 auto 22px !important;
  max-width: 620px !important;
}
.hero-actions {
  justify-content: center !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-constellation { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────── *
 * MOBILE RESPONSIVE
 * Three breakpoints (1100 / 760 / 480). The Claude Design was desktop-locked;
 * these rules adapt the layout once we switch the viewport meta to
 * device-width.
 * ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .nav { padding: 20px 24px 16px !important; }
  .brand-logo { height: 28px !important; }
  .hero-content { padding: 110px 24px 0 !important; }
  .hero-title { font-size: clamp(40px, 9vw, 72px) !important; max-width: 100% !important; }
  .hero-bottom { margin-top: 60px !important; padding: 24px 24px 40px !important; grid-template-columns: 1fr !important; row-gap: 24px !important; }
  .hero-lede { font-size: 16px !important; max-width: 100% !important; }
  .help-rail { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .standard-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding: 24px 24px 56px !important; }
  .steps { padding: 0 24px !important; }
  .step { padding: 20px 22px !important; grid-template-columns: 56px 1fr auto !important; }
  .step-num { font-size: 28px !important; }
  .contact-meta { grid-template-columns: 1fr !important; gap: 28px !important; padding: 28px 24px 48px !important; }
}

@media (max-width: 760px) {
  /* Dim the constellation on phones so it doesn't fight with the headline */
  .hero-constellation { opacity: 0.4 !important; }

  .nav { grid-template-columns: auto !important; padding: 16px 20px !important; }
  .nav-links, .nav-right { display: none !important; }
  .brand-logo { height: 26px !important; }

  .hero-content { padding: 96px 20px 0 !important; }
  .hero-title { font-size: clamp(36px, 11vw, 56px) !important; line-height: 1.05 !important; }
  .hero-lede { font-size: 15px !important; }
  .hero-actions { flex-wrap: wrap !important; gap: 10px !important; }
  .hero-actions .btn { font-size: 13px !important; padding: 10px 16px !important; }

  .page-section, .mission { padding: 80px 20px 64px !important; min-height: auto !important; }
  .page-head, .mission-head { grid-template-columns: 1fr !important; gap: 20px !important; margin-bottom: 48px !important; }
  .page-h, .mission-head h2 { font-size: clamp(32px, 10vw, 48px) !important; max-width: 100% !important; }
  .page-lede, .mission-intro { font-size: 15.5px !important; max-width: 100% !important; }
  .page-eyebrow, .mission-head .eyebrow.dark { font-size: 11px !important; margin-bottom: 16px !important; }

  .help-rail { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 0 !important; overflow: visible !important; }
  .help-card { flex: 0 0 auto !important; width: 100% !important; }
  .card-media { aspect-ratio: 16 / 10 !important; }
  .card-body { padding: 20px 22px 24px !important; }
  .cap { font-size: 22px !important; }
  .cap-body { font-size: 14.5px !important; }

  .standard-grid { padding: 0 !important; gap: 28px !important; border-top: 0 !important; }
  .standard-item { padding: 28px 22px 28px !important; }
  .standard-item::before { width: 48px !important; }
  .standard-h { font-size: 22px !important; }
  .standard-p { font-size: 14.5px !important; }

  .steps { padding: 0 !important; gap: 12px !important; }
  .step { grid-template-columns: 44px 1fr auto !important; padding: 16px 18px !important; column-gap: 18px !important; }
  .step-num { font-size: 22px !important; }
  .step-title { font-size: 16px !important; }
  .step-body { font-size: 13.5px !important; }

  .contact-actions { flex-direction: column !important; align-items: stretch !important; }
  .contact-actions .btn { width: 100% !important; justify-content: center !important; }
  .contact-meta { gap: 24px !important; padding: 24px 0 0 !important; }
  .contact-meta-value { font-size: 15px !important; }

  .foot { grid-template-columns: 1fr !important; gap: 24px !important; padding: 28px 20px 40px !important; }
  .foot-links { flex-wrap: wrap !important; gap: 16px !important; }

  .cyma-dialog { max-width: 100% !important; max-height: 100% !important; height: 100vh !important; border-radius: 0 !important; }

  .sticky-nav { left: 8px !important; right: 8px !important; transform: none !important; padding: 8px !important; }
  .sticky-nav-links { display: none !important; }
}

@media (max-width: 480px) {
  .hero-title { font-size: clamp(32px, 12vw, 48px) !important; }
  .page-h, .mission-head h2 { font-size: clamp(28px, 11vw, 40px) !important; }
  .hero-content { padding-top: 80px !important; }
  .nav { padding: 12px 16px !important; }
}

/* ──────────────────────────────────────────────────────────────────────── *
 * Mobile burger menu — collapses nav into a fullscreen overlay on ≤ 760px
 * ──────────────────────────────────────────────────────────────────────── */
.mobile-burger {
  display: none;
  position: fixed;
  top: 16px; right: 16px;
  z-index: 90;
  width: 44px; height: 44px;
  background: rgba(13, 13, 14, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.mobile-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #f4efe7;
  transition: transform .25s ease, opacity .15s ease;
}
.mobile-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(13, 13, 14, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  padding: 96px 28px 40px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 24px;
}
.mobile-menu-nav a {
  font-family: "Cabinet Grotesk", "General Sans", inherit;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 400;
  color: #f4efe7;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.1;
  padding: 4px 0;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus { color: #e07a35; }
.mobile-menu-meta {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "SFMono-Regular", ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.55);
}
.mobile-menu-meta a { color: rgba(244, 239, 231, 0.85); text-decoration: none; display: block; margin-top: 8px; }

@media (max-width: 760px) {
  .mobile-burger { display: flex; }
  /* When menu is open, also lock body */
  body:has(.mobile-menu.is-open) { overflow: hidden; }
}