/* chrome.css — clean hand-authored header + footer + mobile nav.
   Uses design-system tokens; zero Framer dependency.
   Pairs with /site/_assets/hamburger.js for the mobile drawer toggle.
   Built 2026-05-26 in Option B (replacing the Framer runtime). */


/* =============================================================
 * SITE HEADER
 * =============================================================
 * Pill-shaped nav fixed at top, centered horizontally.
 * Three breakpoints:
 *   ≥ 1100px : logo + nav + CTA visible, hamburger hidden
 *   < 1100px : logo + hamburger visible, nav + CTA hidden (mobile)
 * Backdrop blur + 1px border + dark semi-transparent background.
 */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 20px 40px;            /* 1:1 with Framer nav padding */
  pointer-events: none;  /* let pill capture clicks; container is just layout */
}

.site-header__pill {
  pointer-events: auto;
  width: 100%;
  max-width: 1200px;            /* 1:1 with Framer pill width */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 10px 18px;            /* 1:1 with Framer (was 8px 8px 8px 16px) */
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 8px;            /* Framer uses 8px, not 14px */
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__logo img {
  width: 190px;                  /* bumped up from 162 for more visual presence */
  height: 46px;                  /* bumped from 39 — matches HTML attribute */
  display: block;
  object-fit: contain;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 auto;
}
.site-header__nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out-expo),
              background var(--dur-fast) var(--ease-out-expo);
}
.site-header__nav a:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
}

/* Header CTA — the visual styling lives on .btn-glow (components.css).
   This rule only handles header-specific positioning concerns. */
.site-header__cta {
  flex-shrink: 0;
}


/* ---- Dropdown nav (Solutions / Industries) ----
   CSS-only: opens on hover AND :focus-within (keyboard + touch-tap). No JS. */
.site-header__navitem { position: relative; }
.site-header__navlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out-expo),
              background var(--dur-fast) var(--ease-out-expo);
}
.site-header__caret {
  width: 9px;
  height: 6px;
  opacity: 0.7;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.site-header__navitem:hover .site-header__navlink,
.site-header__navitem:focus-within .site-header__navlink {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
}
.site-header__navitem:hover .site-header__caret,
.site-header__navitem:focus-within .site-header__caret { transform: rotate(180deg); }

.site-header__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 256px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: #0c0f16;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out-expo),
              transform var(--dur-fast) var(--ease-out-expo),
              visibility var(--dur-fast) var(--ease-out-expo);
  z-index: 60;
}
/* invisible bridge so the cursor can travel from trigger to menu without a gap-close */
.site-header__menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.site-header__navitem:hover .site-header__menu,
.site-header__navitem:focus-within .site-header__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.site-header__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-expo),
              background var(--dur-fast) var(--ease-out-expo);
}
.site-header__menu a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }


/* ---- Hamburger button ---- */

.site-header__hamburger {
  display: none;  /* shown on mobile via @media */
  appearance: none;
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.site-header__hamburger span {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 1.5px;
  background: var(--fg);
  border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease-out-expo),
              opacity var(--dur-fast) var(--ease-out-expo),
              top var(--dur-fast) var(--ease-out-expo);
}
.site-header__hamburger span:nth-child(1) { top: 14px; }
.site-header__hamburger span:nth-child(2) { top: 19px; }
.site-header__hamburger span:nth-child(3) { top: 24px; }

/* Open state: morph to X */
.site-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg);
}
.site-header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg);
}


/* ---- Mobile breakpoint: hide nav + CTA, show hamburger ----
   Matches Framer's mobile breakpoint at max-width: 809.98px — at tablet
   (810px+) we keep the full nav visible, same as the existing homepage. */

@media (max-width: 809.98px) {
  .site-header__nav,
  .site-header__cta { display: none; }
  .site-header__hamburger { display: block; }
  .site-header__pill { padding-right: var(--space-2); }
}


/* =============================================================
 * MOBILE NAV DRAWER
 * ============================================================= */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 96px var(--space-7) var(--space-9);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav.is-open { opacity: 1; }

.mobile-nav__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: stretch;
  width: 100%;
  max-width: 380px;
}

/* Grouped sections (Solutions / Industries) */
.mobile-nav__group { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav__grouphead {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
}
.mobile-nav__group a {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--muted);
  text-decoration: none;
  padding: 7px 0;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.mobile-nav__group a:hover { color: var(--fg); }

.mobile-nav__top {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.mobile-nav__top:hover { color: var(--accent); }


/* ---- Slim footer for briefs (chrome: brief) ---- */
.brief-foot {
  border-top: 1px solid var(--hairline);
  background: var(--bg);
  padding: 26px var(--space-7);
}
.brief-foot__in {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted-70);
}
.brief-foot__logo img { height: 30px; width: auto; display: block; opacity: 0.92; }
.brief-foot__tag { color: var(--fg); }
.brief-foot__links { display: flex; gap: 18px; margin-left: auto; }
.brief-foot__links a, .brief-foot__copy { color: var(--muted-70); text-decoration: none; }
.brief-foot__links a:hover { color: var(--accent); }
@media (max-width: 640px) {
  .brief-foot__in { gap: 12px 18px; }
  .brief-foot__links { margin-left: 0; width: 100%; }
}


/* =============================================================
 * CTA BLOCK — restore the Framer motion the static export lost
 * ============================================================= */

/* The big flare gradient behind the CTA copy slides left↔right so it reads as a
   "moving gradient" (Framer drove this in JS; recreated here in CSS). Scaled up
   so the slide never exposes an edge; the CTA box clips the overflow. */
@keyframes ctaFlareDrift {
  0%   { transform: scale(1.18) translate(-8%, 1%); }
  50%  { transform: scale(1.24) translate(8%, -2%); }
  100% { transform: scale(1.18) translate(-8%, 1%); }
}
.cx-cta-flare {
  animation: ctaFlareDrift 13s ease-in-out infinite;
  will-change: transform;
}

/* The badge row is a continuous left→right marquee. The <ul> track holds the
   pill set twice; translating by exactly one set (-50%) loops seamlessly. The
   parent <section> masks + clips the edges (edge fade). Edit the labels in
   _partials/cta.html — keep both copies in sync. */
@keyframes ctaMarquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.cx-cta-marquee {
  display: flex;
  gap: 12px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: ctaMarquee 52s linear infinite;
  will-change: transform;
}
.cx-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 17px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: #c2c6cd;
  font-family: "Plus Jakarta Sans", var(--font-sans, sans-serif);
  font-size: 14px;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .cx-cta-flare, .cx-cta-marquee { animation: none; }
}

.mobile-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-7);
  background: var(--accent);
  color: var(--bg) !important;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
}

/* Body scroll-lock helper added/removed by hamburger.js */
body.nav-open { overflow: hidden; }


/* =============================================================
 * SITE FOOTER
 * ============================================================= */

.site-footer {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--hairline);
  /* Big dark gap above the seam (like Framer) so the orb's crisp upper cap has room
     to rise above the footer without being clipped by the CTA box above it (the
     Framer CTA container carries z-index:1 and would otherwise paint over the orb). */
  margin-top: 200px;
  padding: 0 var(--space-7); /* no top/bottom padding so the inner (with the divider
                                lines) spans the full footer and connects to the seam */
  /* overflow visible so the dotted sphere can straddle the top seam like Framer;
     the orb is only 600px wide + centred, so it can't cause horizontal scroll. */
  overflow: visible;
}

/* Decorative wireframe orb behind the tagline.
   The source SVG (svg-323091548_1520) is pure white ellipses with
   mix-blend-mode:hard-light. To get the homepage's blue color, we place a
   blue radial-gradient backdrop directly behind the orb element — the
   ellipses' hard-light blend mode picks up the color from underneath. */
.site-footer__orb {
  position: absolute;
  /* Straddle the top seam like Framer: ~half the globe rises ABOVE the seam (crisp,
     unfrosted) and the lower half sits inside the footer where the frosted-glass
     layer softens it into a blue glow. (Was top:-56px, which left almost the whole
     orb below the seam — the frost then hid it.) */
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 90vw);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
}
/* Soft blue halo for depth behind the wireframe globe (the orb's own swell beat
   supplies the pulse; this just lifts it off the dark footer). */
.site-footer__orb::before {
  content: "";
  position: absolute;
  inset: 2%;
  /* Brighter blue core so the frosted glow below the seam reads vivid-blue like
     Framer's (whose footer panel frosts a saturated blue flare), not flat grey. */
  background: radial-gradient(circle at 50% 52%, rgba(48, 142, 255, 0.42) 0%, rgba(40, 120, 250, 0.16) 44%, transparent 72%);
  filter: blur(26px);
  z-index: -1;
}
.site-footer__orb canvas { display: block; width: 100%; height: 100%; }

.site-footer__inner {
  position: relative;
  z-index: 2; /* above the readability scrim */
  max-width: 1224px; /* 1:1 with Framer's footer content width (page sections are 1200) */
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-9);
}
/* Vertical divider lines — 5 of them (outer edges + 3 internal), spanning the FULL
   footer height so they connect to the top seam and run to the bottom, exactly like
   the Framer "Line" divs (which are full-height with no top border). */
.site-footer__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055)),
    linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055)),
    linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055)),
    linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055)),
    linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.055));
  background-size: 1px 100%;
  background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
  background-repeat: no-repeat;
}
/* Frosted-glass layer — matches Framer's footer panel (backdrop-filter: blur(18px)),
   which sits over the orb/flare and frosts it so the wireframe reads as a soft glow
   rather than sharp lines. A gentle radial darkening on top keeps the central text
   crisp; the blur (not heavy darkening) now does most of the readability work.
   Above the orb (z0), below content (z2). */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: radial-gradient(ellipse 58% 64% at 50% 44%, rgba(6, 7, 10, 0.55) 0%, rgba(6, 7, 10, 0.30) 46%, rgba(6, 7, 10, 0) 80%);
}

.site-footer__tagline {
  text-align: center;
  font-size: var(--text-md); /* 16px, neutral — 1:1 with Framer (was an oversized display tagline) */
  font-weight: 400;
  letter-spacing: 0;
  margin: var(--space-2) 0 var(--space-11); /* ~80px gap to the columns (1:1 with Framer) */
  color: var(--fg);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 324px; /* footer ≈ 520px (Framer) so it contains the orb and the lines
                        run to the true bottom instead of stopping above it */
  margin-bottom: 0;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-5); /* 20px content inset off the divider lines */
}
/* "All Rights Reserved" sits ~80% down (not on the floor) — Framer leaves a void below it. */
.site-footer__col--brand { padding-bottom: var(--space-4); }
/* Mobile: drop the dividers + empty spacer; brand spans row 1, Links + Social row 2. */
@media (max-width: 860px) {
  .site-footer__inner::before { display: none; }
  .site-footer__columns { grid-template-columns: 1fr 1fr; row-gap: var(--space-9); min-height: 0; }
  .site-footer__col { padding: 0; }
  .site-footer__col--brand { grid-column: 1 / -1; padding-bottom: 0; }
  .site-footer__col--spacer { display: none; }
}

.site-footer__logo {
  display: inline-flex;
}
.site-footer__logo img {
  width: 162px;  /* 1:1 with Framer's displayed footer logo (162×39) */
  height: 39px;
  display: block;
}

.site-footer__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff; /* white, 1:1 with Framer */
  text-decoration: none;
  font-size: 17px; /* 1:1 with Framer */
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.site-footer__email:hover { color: var(--accent); }

.site-footer__copyright {
  color: rgb(206, 206, 206); /* 1:1 with Framer */
  font-size: 14px; /* 1:1 with Framer */
  margin: 0;
  margin-top: var(--space-2);
}

/* Sentence-case white headings — 1:1 with Framer (was tiny uppercase mono). */
.site-footer__col-heading {
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 var(--space-5);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* ~36px row pitch, 1:1 with Framer (was too tight) */
}
.site-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgb(206, 206, 206); /* 1:1 with Framer */
  font-size: 14px; /* 1:1 with Framer */
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.site-footer__list a:hover { color: var(--fg); }

/* Inline link arrow — matches the SVG arrow in the header CTA (btn-glow), with the
   same up-right hover nudge. Replaces the plain ↗ glyph the footer used before. */
.lnk-arrow {
  width: 0.92em;
  height: 0.92em;
  flex: none;
  vertical-align: middle;
  transition: transform var(--dur-base) var(--ease-out-expo), color var(--dur-fast) var(--ease-out-expo);
}
/* Slightly heavier stroke than the header arrow — it floats on open black without a
   button frame, so it needs a touch more weight to read with the same presence. */
.lnk-arrow path { stroke-width: 1.5; }
/* Pin footer arrows to one brightness so the LinkedIn arrow (whose link text is more
   muted, --muted-75, than the email's --muted) doesn't read dimmer than the rest. */
.site-footer .lnk-arrow { color: rgba(255, 255, 255, 0.92); }
.site-footer__email:hover .lnk-arrow,
.site-footer__list a:hover .lnk-arrow { transform: translate(2px, -2px); color: var(--accent); }

.site-footer__rights {
  text-align: left;
  color: #fff; /* white, 1:1 with Framer (was grey) */
  font-size: 14px; /* 1:1 with Framer (was 12px) */
  margin: 0;
  margin-top: auto; /* sits at the bottom of the brand column, like Framer */
}


/* =============================================================
 * CTA BUTTON GLOW ANIMATION
 * =============================================================
 * The Framer CTA box ("Book a call" button) has decorative Stroke + Glow divs
 * whose orange radial-gradient was animated by Framer Motion at runtime.
 * Without the runtime, the gradients are static. These keyframes restore the
 * sense of motion via CSS only — opacity pulse + subtle horizontal drift. */

@keyframes ctaGlowPulse {
  0%, 100% { opacity: 0.65; transform: translateX(-6%); }
  50%      { opacity: 1;     transform: translateX(6%); }
}

#cta [data-framer-name="Stroke"],
#cta [data-framer-name="Glow"] {
  animation: ctaGlowPulse 4s ease-in-out infinite;
  will-change: opacity, transform;
}

/* Slightly faster pulse for the inner Shine + Border-Shine decorative elements
   so they feel like they're catching light differently. */
#cta [data-framer-name="Border-Shine"] {
  animation: ctaGlowPulse 6s ease-in-out infinite reverse;
  will-change: opacity, transform;
}


/* =============================================================
 * CTA FALLBACK (mobile <810px)
 * =============================================================
 * The Framer-extracted CTA box (#cta from cryenx-export-v2/index.html)
 * uses fixed widths that break catastrophically at narrow viewports
 * without the Framer runtime managing them. We hide the Framer CTA
 * at mobile and show a clean fallback CTA built from design-system tokens. */

.cta-fallback {
  display: none;
  max-width: 540px;
  margin: var(--space-12) auto;
  padding: var(--space-9) var(--space-7);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  background: var(--bg);
  text-align: center;
}
.cta-fallback__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: var(--fg);
}
.cta-fallback__sub {
  color: var(--muted-75);
  font-size: var(--text-md);
  line-height: 1.55;
  margin: 0 0 var(--space-6);
}
.cta-fallback__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: opacity var(--dur-fast) var(--ease-out-expo);
}
.cta-fallback__btn:hover { opacity: 0.88; }

@media (max-width: 809.98px) {
  #cta { display: none !important; }
  .cta-fallback { display: block; }
}


/* =============================================================
 * REDUCED MOTION
 * ============================================================= */

@media (prefers-reduced-motion: reduce) {
  .site-header__pill,
  .site-header__cta,
  .site-header__cta-icon,
  .site-header__nav a,
  .site-header__hamburger span,
  .mobile-nav,
  .mobile-nav__inner a,
  .site-footer__email,
  .site-footer__list a {
    transition: none !important;
  }
}