@import "fonts.css";
@import "tokens.css";

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
svg { display: block; }

.container {
  max-width: var(--z10-content-max);
  margin-inline: auto;
  padding-inline: var(--z10-space-6);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.eyebrow {
  font-family: var(--z10-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--z10-signal-mist);
}

.section-heading {
  font-size: var(--z10-h2);
  line-height: 1.08;
  color: var(--z10-digital-paper);
  text-transform: uppercase;
  margin: 0 0 var(--z10-space-4);
}

.section-intro {
  font-family: var(--z10-font-body);
  font-size: 1.0625rem;
  color: var(--z10-soft-sage);
  max-width: 62ch;
  margin: 0;
}
/* Products section intro: drop the base 62ch reading-width cap so this
   longer sentence can use the full container width. No forced nowrap --
   it naturally sits on one line at typical desktop widths (where the
   container has enough room) and wraps normally at narrower widths, so
   there's no overflow/clipping risk at any viewport size. */
.products .section-intro {
  max-width: none;
}
.products .section-intro strong {
  color: var(--z10-digital-paper);
  font-weight: 700;
}

.cta-arrow { transition: transform var(--z10-motion-fast) ease; }
.z10-button:hover .cta-arrow { transform: translateX(3px); }

.z10-button.primary {
  background: var(--z10-digital-paper);
  color: var(--z10-midnight-ink);
  border-color: var(--z10-digital-paper);
}
.z10-button.primary:hover {
  background: var(--z10-soft-sage);
  border-color: var(--z10-soft-sage);
  transform: translateY(-2px);
}
.z10-button.ghost {
  background: transparent;
}
.z10-button.small {
  min-height: 38px;
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 36, 41, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(74, 109, 114, 0.35);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--z10-space-4);
  padding-block: var(--z10-space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Option B lockup: the logo file itself is used as-is (no circular
   badge/background container) -- its own transparency, coloring, and
   dimensional shading carry the "brand mark" job now. */
.brand-logo {
  display: block;
  width: 47px;
  height: 47px;
  flex-shrink: 0;
}

.brand-divider {
  display: block;
  width: 1px;
  height: 36px;
  background: rgba(106, 164, 168, 0.65); /* #6AA4A8 @ 65% opacity */
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--z10-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 15.5px;
  color: #EEF2EE;
  white-space: nowrap;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--z10-space-8);
}

.nav-links {
  display: flex;
  gap: var(--z10-space-6);
}

.nav-links a {
  font-family: var(--z10-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.8rem;
  color: var(--z10-soft-sage);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color var(--z10-motion-fast) ease, border-color var(--z10-motion-fast) ease;
}
.nav-links a:hover { color: var(--z10-digital-paper); border-color: var(--z10-signal-mist); }

.header-cta { display: flex; align-items: center; gap: var(--z10-space-4); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--z10-steel-teal);
  border-radius: var(--z10-radius-sm);
  width: 42px;
  height: 38px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: var(--z10-digital-paper);
  position: relative;
  transition: transform var(--z10-motion-fast) ease, opacity var(--z10-motion-fast) ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: var(--z10-space-6);
  padding: var(--z10-space-6);
  background: var(--z10-deep-teal);
  border-top: 1px solid rgba(74, 109, 114, 0.35);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu .nav-links {
  flex-direction: column;
  gap: var(--z10-space-4);
}
.mobile-menu .nav-links a {
  font-size: 0.95rem;
  display: block;
}
.mobile-menu .z10-button { width: 100%; }

/* =========================================================
   HERO — one continuous composited environment
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--z10-midnight-ink);
}

.hero-copy { position: relative; max-width: 640px; z-index: 2; }
.hero-copy--top { margin: var(--z10-space-6) 0 var(--z10-space-4); }
.hero-copy--bottom { margin: var(--z10-space-4) 0 var(--z10-space-6); }
.hero-copy--top .eyebrow { margin: 0; }

/* Wider than the shared .hero-copy 640px cap: the audience line's
   longest restacked segment and the single-line value sentence both
   need more horizontal room than 640px gives them at this font size,
   so this box gets its own, later-in-cascade max-width. */
.hero-copy--bottom { max-width: 760px; }

.hero-copy--bottom p {
  font-size: 1.15rem;
  color: var(--z10-soft-sage);
  margin: 0 0 var(--z10-space-6);
}

/* The video block is locked to the source video's own 16:9 shape and
   breaks out of the .container column to run edge-to-edge, so it always
   renders at its native aspect ratio -- no cropping, no letterbox bars,
   at any viewport width. */
.hero-visual {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--z10-midnight-ink);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 16, 18, 0.78) 0%, rgba(7, 16, 18, 0.05) 22%, rgba(7, 16, 18, 0.05) 68%, rgba(7, 16, 18, 0.85) 100%);
  pointer-events: none;
}

/* Above ~1100px the video renders tall enough in absolute pixels for the
   eyebrow and support copy to sit directly on top of it -- in its own
   corners -- instead of just outside it, closing the gap between the copy
   and the video entirely. The support copy is now two paragraphs (audience
   line + value line), so this threshold sits higher than it used to: below
   1100px the video isn't tall enough to give that taller text block
   clearance from its own vertically-centered baked-in headline, so the
   copy reverts to sitting just outside the video in normal flow, where it
   always has room to wrap without ever crowding anything. */
@media (min-width: 1100px) {
  .hero-copy {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
  }
  .hero-copy--top { top: var(--z10-space-6); }
  .hero-copy--bottom { bottom: var(--z10-space-6); }
}

/* =========================================================
   PROOF STRIP
   ========================================================= */
.proof {
  background: var(--z10-deep-teal);
  border-block: 1px solid rgba(74, 109, 114, 0.35);
  padding-block: var(--z10-space-8);
}

.proof-label {
  display: block;
  text-align: center;
  text-wrap: balance;
  margin-bottom: var(--z10-space-6);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--z10-space-4);
  align-items: stretch;
}

.proof-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--z10-space-4) var(--z10-space-2);
  border: 1px dashed rgba(112, 147, 152, 0.4);
  border-radius: var(--z10-radius-sm);
  color: var(--z10-soft-sage);
  opacity: 0.72;
  min-height: 74px;
  text-decoration: none;
}

.proof-logo .mark {
  width: 22px; height: 22px;
  border: 1.4px solid var(--z10-signal-mist);
  border-radius: 4px;
  position: relative;
}
.proof-logo .mark::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1.4px solid var(--z10-signal-mist);
  border-radius: 2px;
  opacity: 0.6;
}

.proof-logo span.name {
  font-family: var(--z10-font-display);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  color: var(--z10-soft-sage);
}

/* A confirmed partner tile: real logo, solid border instead of the
   dashed placeholder outline, full opacity so it reads as verified.
   Top-aligned (justify-content: flex-start) rather than centered: on
   phones the Mammy Nest caption wraps to two lines while Swish Fusion's
   "Piloting GRIP" stays on one, and centering a shorter stack pushed
   Swish Fusion's logo and caption ~8px lower than Mammy Nest's. Top-
   aligning both keeps logo and caption level across confirmed tiles at
   every width. Placeholder tiles (not .is-confirmed) are unaffected and
   stay centered. */
.proof-logo.is-confirmed {
  border-style: solid;
  border-color: rgba(112, 147, 152, 0.4);
  opacity: 1;
  gap: var(--z10-space-2);
  justify-content: flex-start;
  transition: transform var(--z10-motion-standard) ease, border-color var(--z10-motion-standard) ease;
}

/* Clickable partner tile -- same hover language as the product cards
   (lift + signal-mist border) so it reads as interactive. */
.proof-logo.is-confirmed:hover,
.proof-logo.is-confirmed:focus-visible {
  transform: translateY(-2px);
  border-color: var(--z10-signal-mist);
}

.proof-logo-img {
  max-height: 32px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Both confirmed tiles share one 64px logo slot so their captions line
   up: Mammy Nest's round badge, with small curved "MAMMY"/"NEST"
   lettering, needs the full 64px to read clearly -- 56px (an earlier
   round) was legible but, once set side by side with a matched Swish
   Fusion slot, read slightly smaller than the badge wants. Swish
   Fusion's flat wordmark doesn't need that much height -- drawn at 48px
   (its own natural weight; 64px was tested and rejected as too
   dominant) and vertically padded 8px top/bottom to fill the same 64px
   box, so both logos occupy identical space and both captions sit at
   the same offset from the top of their tile. Owner approved Sep 30. */
.proof-logo-img--mammy-nest { max-height: 64px; }
.proof-logo-img--swish-fusion { max-height: none; height: 64px; padding-block: 8px; box-sizing: border-box; }

.proof-logo.is-confirmed span.name {
  color: var(--z10-signal-mist);
}

.proof-note {
  text-align: center;
  margin: var(--z10-space-4) 0 0;
  font-size: 0.78rem;
  color: var(--z10-steel-teal);
}

/* =========================================================
   PRODUCTS
   ========================================================= */
.products {
  padding-block: var(--z10-space-24);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--z10-space-3);
  margin-bottom: var(--z10-space-12);
}
.section-head .eyebrow { margin-bottom: 0; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--z10-space-6);
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: var(--z10-space-8) var(--z10-space-6);
  border: var(--z10-border);
  border-radius: var(--z10-radius-md);
  background: linear-gradient(165deg, var(--z10-core-teal) 0%, var(--z10-deep-teal) 100%);
  position: relative;
  overflow: hidden;
  transition: transform var(--z10-motion-standard) ease, border-color var(--z10-motion-standard) ease;
}
.product-card:hover { transform: translateY(-4px); border-color: var(--z10-signal-mist); }

.card-watermark {
  height: 150px;
  margin-bottom: var(--z10-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-watermark img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  opacity: 0.5;
  animation: card-watermark-float 7s ease-in-out infinite;
}
/* stagger each card's float so they drift independently, not in lockstep */
.product-card:nth-child(1) .card-watermark img { animation-delay: 0s; }
.product-card:nth-child(2) .card-watermark img { animation-delay: -2.3s; }
.product-card:nth-child(3) .card-watermark img { animation-delay: -4.6s; }


@keyframes card-watermark-float {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .card-watermark img { animation: none; }
}

.product-card h3 {
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--z10-digital-paper);
  margin: 0 0 var(--z10-space-3);
}

.product-card p.desc {
  color: var(--z10-soft-sage);
  font-size: 0.98rem;
  margin: 0 0 var(--z10-space-6);
  flex-grow: 1;
}

.product-card p.placeholder-copy {
  color: var(--z10-steel-teal);
  font-style: normal;
  font-size: 0.92rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-family: var(--z10-font-display);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--z10-radius-sm);
  border: 1px solid var(--z10-steel-teal);
  color: var(--z10-signal-mist);
  margin-bottom: var(--z10-space-4);
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--z10-space-2) var(--z10-space-3);
  margin-bottom: var(--z10-space-4);
}
.card-meta .status-pill { margin-bottom: 0; }

.card-kicker {
  font-family: var(--z10-font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--z10-signal-mist);
  white-space: nowrap;
}
.status-pill.available { border-color: var(--z10-signal-mist); color: var(--z10-digital-paper); }
.status-pill.available .dot { background: var(--z10-signal-mist); }
.status-pill.pending { border-style: dashed; color: var(--z10-steel-teal); }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.product-card .card-cta {
  margin-top: auto;
}

.product-card .card-cta.disabled {
  font-family: var(--z10-font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--z10-steel-teal);
  border: 1px dashed var(--z10-steel-teal);
  border-radius: var(--z10-radius-sm);
  padding: 0.75rem 1.1rem;
  display: inline-block;
}

/* =========================================================
   SHARED VALUE PROPOSITION
   ========================================================= */
.value-prop {
  padding-block: var(--z10-space-16);
  background: var(--z10-deep-teal);
  border-block: 1px solid rgba(74, 109, 114, 0.35);
}

.value-prop .section-head { margin-bottom: var(--z10-space-8); text-align: center; align-items: center; }
.value-prop .section-heading { max-width: 26ch; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--z10-space-8);
}

.value-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--z10-space-3);
  padding-top: var(--z10-space-6);
  border-top: 1px solid rgba(74, 109, 114, 0.4);
}

.value-item .icon {
  width: 34px; height: 34px;
  color: var(--z10-signal-mist);
}

.value-item h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--z10-digital-paper);
  margin: 0;
}

.value-item p {
  color: var(--z10-soft-sage);
  font-size: 0.95rem;
  margin: 0;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--z10-space-24);
  text-align: center;
  background: radial-gradient(90% 140% at 50% 0%, rgba(43, 71, 76, 0.55), transparent 65%), var(--z10-midnight-ink);
}
.final-cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/circuit-pattern.svg");
  background-size: 420px;
  opacity: 0.10;
  mix-blend-mode: screen;
  pointer-events: none;
}
.cta-pulse-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.final-cta .container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.final-cta h2 { max-width: 20ch; }
.final-cta p { max-width: 56ch; margin: 0 0 var(--z10-space-8); color: var(--z10-soft-sage); font-size: 1.05rem; }
.final-cta p strong { color: var(--z10-digital-paper); font-weight: 700; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--z10-midnight-ink);
  border-top: 1px solid rgba(74, 109, 114, 0.35);
  padding-block: var(--z10-space-16) var(--z10-space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--z10-space-8);
  padding-bottom: var(--z10-space-12);
}

.footer-brand .brand { margin-bottom: var(--z10-space-4); }
.footer-brand p {
  color: var(--z10-soft-sage);
  font-size: 0.92rem;
  max-width: 34ch;
  margin: 0 0 var(--z10-space-4);
}

.socials { display: flex; gap: 0.75rem; margin-top: var(--z10-space-2); }
.socials a {
  width: 40px;
  height: 40px;
  border: 1px solid var(--z10-steel-teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--z10-signal-mist);
  transition: background var(--z10-motion-fast) ease, border-color var(--z10-motion-fast) ease, color var(--z10-motion-fast) ease;
}
.socials a svg { width: 16px; height: 16px; }
.socials a:hover {
  background: var(--z10-signal-mist);
  border-color: var(--z10-signal-mist);
  color: var(--z10-midnight-ink);
}

/* header brand lockup: wordmark + veteran-owned tagline */
.brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.brand-tagline {
  font-family: var(--z10-font-body);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #769DA0;
  white-space: nowrap;
}

/* Option B lockup responsive behavior: descriptor drops first, then the
   logo and divider scale down together -- the logo never goes below 36px
   and the lockup (logo + divider + "Z10 Digital Assets") always stays
   together as one unit. */
@media (max-width: 760px) {
  .site-header .brand-tagline { display: none; }
  .brand-logo { width: 38px; height: 38px; }
  .brand-divider { height: 28px; }
}

.footer-col h4 {
  font-family: var(--z10-font-display);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--z10-signal-mist);
  margin: 0 0 var(--z10-space-4);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--z10-space-3); }
.footer-col a {
  color: var(--z10-soft-sage);
  font-size: 0.92rem;
  transition: color var(--z10-motion-fast) ease;
}
.footer-col a:hover { color: var(--z10-digital-paper); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--z10-space-6);
  border-top: 1px solid rgba(74, 109, 114, 0.25);
}
.footer-bottom p {
  color: var(--z10-steel-teal);
  font-size: 0.8rem;
  margin: 0;
}

/* =========================================================
   RESPONSIVE — the hero video stays full-bleed at every size.
   Verified at 1440 / 1024 / 768 / 390 / 320.
   ========================================================= */

/* ---- proof strip only: 5-up at 1280px+, 3-up from 821-1279px, 2-up at
   820px and below. Kept separate from the 1024px/768px breakpoints below
   because the proof tiles need their own widths for the Mammy Nest label
   to stay on one line up to 3 columns and wrap to two balanced lines only
   on phones -- see the Mammy Nest NOTES.md entries for the measurements. */
@media (max-width: 1279px) {
  .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--z10-space-4); }
}
@media (max-width: 820px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 1024px : tablet — collapse to the mobile nav ---- */
@media (max-width: 1024px) {
  .primary-nav .nav-links { display: none; }
  .header-cta .z10-button.ghost { display: none; }
  .nav-toggle { display: flex; }

  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--z10-space-4); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-col.links-company { grid-column: 2; }
}

/* ---- 900px : hero copy narrows to the full column width ---- */
@media (max-width: 900px) {
  .hero-copy--top, .hero-copy--bottom { max-width: 60ch; }

  .value-grid { grid-template-columns: 1fr; gap: var(--z10-space-6); }
}

/* ---- 768px : product cards stack to a single column for readability ---- */
@media (max-width: 768px) {
  .product-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--z10-space-8); }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- 640px and below : phones ---- */
@media (max-width: 640px) {
  .container { padding-inline: var(--z10-space-4); }
  .hero-copy--bottom p { font-size: 1rem; }

  .section-heading { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .products, .value-prop, .final-cta { padding-block: var(--z10-space-16); }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-col.links-company { grid-column: auto; }
}

/* ---- 360px : smallest supported width ---- */
@media (max-width: 360px) {
  .brand-word { font-size: 0.82rem; }
  .z10-button { padding: 0.65rem 0.95rem; font-size: 0.78rem; }
}