/* Jon's design pass (2026-09-28 mockup "Dazzling Hawk", ported 2026-09-29 by
   scripts/jon-port-0929.mjs). Linked on every /nn/ page by the post-build step, after the
   page styles and before mobile.css. Headings are Clash Display (theme.css), the agents are
   his flat line characters, and these rules carry his spacing, centering and layout fixes. */

/* ---- type ---- */
body, body * { letter-spacing: 0.03em !important; }
h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .card-title, .feature-title { line-height: 1.05 !important; }
.lo-agent-name { font-weight: 500 !important; }

/* ---- centering: page heroes and section titles ---- */
h1, h2.section-title, .section-title, .inner-page-hero { text-align: center !important; }
.section-title.lo-left, .lo-left { text-align: left !important; }
.feature-1-hero-wrapper, .about-1-content-holder, .about-1-text-wrapper, .blog-page-content-holder { width: 100% !important; max-width: 100% !important; text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; }
.pricing-hero-title-wrapper, .feature-hero-title-wrapper { width: 100% !important; max-width: 100% !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
.feature-hero-title-wrapper { gap: 24px !important; }
.pricing-hero-subtitle-wrapper, .feature-hero-subtitle-wrapper, .about-1-title-wrapper, .about-1-subtitle-wrapper, .blog-hero-title-wrapper, .blog-hero-subtitle-wrapper, .case-study-hero-subtitle-wrapper { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
.feature-hero-title-wrapper .nn-one-line, .about-1-title-wrapper .nn-one-line, .blog-hero-title-wrapper .nn-one-line, .pricing-hero-title-wrapper .nn-one-line { left: auto !important; transform: none !important; position: static !important; }
.testimonial-2-header-wrapper { max-width: none !important; width: 100% !important; text-align: center !important; }
.testimonial-2-header-wrapper h2 { text-align: center !important; width: 100% !important; }
.case-study-content-holder, .case-study-hero-title-wrapper { width: 100% !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; align-items: center !important; justify-content: center !important; }
.case-study-content-holder { max-width: 100% !important; }
.case-study-hero-title-wrapper { max-width: 800px !important; }

/* ---- What we do: hero ---- */
.about-1-text-wrapper .feature-hero-title-wrapper, .feature-hero-subtitle-wrapper { max-width: 1000px !important; }
.feature-hero-subtitle-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; }
.feature-hero-subtitle-wrapper p, .feature-hero-subtitle-wrapper .body-text { margin-left: auto !important; margin-right: auto !important; text-align: center !important; width: 100% !important; max-width: 1000px !important; display: block !important; }
.section.feature-b { padding-bottom: 0 !important; }
.section.feature-b + .section { padding-top: 0 !important; }
.section.feature-b .section-wrapper { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.section.feature-b + .section .section-wrapper { padding-top: 0 !important; margin-top: 0 !important; }
/* the agents in the hero's graphic slot */
.lo-hero-agents { display: flex; justify-content: center; align-items: center; margin: 48px 0 -40px; }
.lo-hero-agents .lo-hero-face { width: 72px; height: 72px; flex: none; display: block; border-radius: 50%; overflow: hidden; border: 4px solid #fff; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); margin-right: -20px; position: relative; }
.lo-hero-agents .lo-hero-face:last-child { margin-right: 0; }
.lo-hero-agents .lo-hero-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- home ---- */
@media screen and (min-width: 992px) { .feature-2-content-wrapper { padding-left: 24px !important; padding-right: 24px !important; } }
/* the old "people who built it" row gives way to the dual cluster */
.home-3-hero-star-wrapper { display: none !important; }
/* the hero cluster: the AI staff and the people behind them */
.la-dual-teams { display: flex; align-items: center; justify-content: center; gap: 32px; margin-bottom: 24px; }
.la-team-divider { font-family: var(--brand-font-heading); font-size: 24px; color: #8892b0; font-weight: 500; padding-bottom: 30px; }
.la-team-cluster-wrapper { display: flex; flex-direction: column; align-items: center; }
.la-team-cluster { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.la-team-avatar { width: 64px; height: 64px; flex: none; border-radius: 50%; border: 3px solid #fff; margin-left: -16px; box-shadow: 0 4px 12px rgba(35, 42, 80, .1); background: #fff; position: relative; overflow: hidden; }
.la-team-avatar:first-child { margin-left: 0; }
.la-team-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.la-human-avatar { background: transparent; }
/* hover: the face lifts and comes to the front of the stack, as in Jon's source */
.la-team-avatar { transition: transform .3s ease, box-shadow .3s ease; }
.la-team-avatar:hover { transform: translateY(-8px); z-index: 10 !important; box-shadow: 0 12px 24px -8px rgba(35, 42, 80, .35); }
@media (prefers-reduced-motion: reduce) { .la-team-avatar { transition: none; } }
.la-team-label { font-size: 13px; font-weight: 600; color: #536ee5; text-transform: uppercase; letter-spacing: .05em !important; background: rgba(83, 110, 229, .1); padding: 6px 14px; border-radius: 20px; }
.la-human-label { background: rgba(34, 160, 107, .1); color: #1b8055; }
@media (max-width: 767px) {
  .la-dual-teams { flex-direction: column; gap: 16px; }
  .la-team-divider { display: none; }
  .la-team-avatar { width: 44px; height: 44px; margin-left: -12px; border-width: 2px; }
}
/* "We close the gaps": the letters draw together as the section arrives */
.la-closing-gaps { color: #536ee5; display: inline-block; letter-spacing: .15em !important; transition: letter-spacing 1.2s cubic-bezier(.34, 1.56, .64, 1) .3s; }
.nn-in .la-closing-gaps, html.nn-all-in .la-closing-gaps { letter-spacing: .03em !important; }
@media (prefers-reduced-motion: reduce) { .la-closing-gaps { transition: none; letter-spacing: .03em !important; } }
/* Work we've done: the scroll-driven slide stays (runway.js), but only the pinned panel is dark,
   sized to its content, so the section never fills the screen with black (Jon, 2026-09-29) */
@media screen and (min-width: 992px) {
  .section.home-3-study { background: transparent !important; padding-top: 24px !important; padding-bottom: 24px !important; }
  .home-3-study .home-3-study-main-wrapper { height: 260vh !important; }
  .home-3-study .home-3-study-sticky { top: max(24px, calc(50vh - 330px)) !important; background: #232323; border-radius: 28px; padding: 44px 44px 40px; }
}

/* ---- faces: always a true circle ---- */
.la-v-face { aspect-ratio: 1 / 1 !important; display: block !important; }
.la-v-face::before { content: ""; display: block; padding-bottom: 100%; }
.la-v-face img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }

/* ---- Our work: bigger image left, story right ---- */
.case-study-image, .case-study-image-wrapper { border-radius: var(--_size-responsiveness---radious--radius-xl, 24px) !important; }
.case-study-image-wrapper { overflow: hidden !important; }
@media screen and (min-width: 992px) {
  .case-study-link-wrapper { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto 1fr !important; gap: 24px 60px !important; padding: 40px !important; align-items: start !important; }
  .case-study-image-wrapper { grid-column: 1 / 2 !important; grid-row: 1 / 4 !important; max-width: none !important; width: 100% !important; height: 100% !important; min-height: 400px !important; border-radius: 16px !important; }
  .case-study-image { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .case-study-content-wrapper { display: contents !important; }
  .case-study-header-wrapper { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; align-self: start !important; }
  .case-study-client-wrapper { grid-column: 2 / 3 !important; grid-row: 2 / 3 !important; padding: 24px 0 0 !important; max-width: none !important; border-top: 1px solid rgba(0, 0, 0, .1) !important; gap: 16px !important; }
  .case-study-button-wrapper { grid-column: 2 / 3 !important; grid-row: 3 / 4 !important; align-self: end !important; margin-top: 16px !important; }
  .case-study-client-story-wrapper { max-width: none !important; }
  .section.dark .case-study-client-wrapper { border-top-color: rgba(255, 255, 255, .1) !important; }
}

/* ---- Podcast: the hero in a dark block (plain "Retooled" until the logo is final) ---- */
.fx-cta { width: 100%; background: radial-gradient(90% 130% at 20% 0%, rgba(83, 110, 229, .28), rgba(83, 110, 229, 0) 60%), #16181f; border-radius: 1.5rem; padding: 3.5rem 2rem; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; position: relative; overflow: hidden; }
.fx-cta .inner-page-hero { color: #fff; }
.fx-cta .body-text { color: #E2E8F0; max-width: 600px; margin: 0 auto; }
.fx-cta .primary-button { background-color: #536ee5 !important; color: #fff !important; border: none !important; }
.fx-cta .secondary-button { background-color: transparent !important; border: 1px solid rgba(255, 255, 255, .35) !important; color: #fff !important; }
.fx-cta .secondary-button * { color: #fff !important; }

/* About, "What we believe": four cards in a balanced two-by-two grid instead of a column of
   cards beside one small illustration (the illustration left a large empty area) */
.about-1-mission-grid { grid-template-columns: 1fr !important; }
.about-1-mission-image-wrapper { display: none !important; }
.about-1-mission-content-wrapper { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px !important; max-width: 1080px; margin: 0 auto; }
.about-1-mission-content-wrapper > .about-1-mission-card-wrapper { height: 100%; margin: 0 !important; }
@media (max-width: 767px) { .about-1-mission-content-wrapper { grid-template-columns: 1fr; } }

/* About beliefs: Phosphor icons in the template's circles */
.about-1-mission-icon.lo-ph-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #fff; }
.about-1-mission-icon.lo-ph-icon svg { width: 28px; height: 28px; }
/* Phosphor glyphs fill their box; keep them at the old stroke icons' size */
.lo-build-icon svg { width: 22px !important; height: 22px !important; }

/* No grow-on-hover anywhere (house rule). Webflow's hover interactions zoom these images with
   inline transforms; this cancels them. Hover feedback stays on color, border and shadow. */
.home-3-blog-image, .home-3-study-image, .case-study-image, .agent-image, .agent-01-image,
.home-2-small-blog-image, .home-1-blog-image, .home-2-big-blog-image, .blog-1-image, .blog-image { transform: none !important; }

/* What we do's agents row: the same hover as the homepage hero (lift and come to the front) */
.lo-hero-agents .lo-hero-face { transition: transform .3s ease, box-shadow .3s ease; }
.lo-hero-agents .lo-hero-face:hover { transform: translateY(-8px); z-index: 10; box-shadow: 0 12px 24px -8px rgba(35, 42, 80, .35); }
@media (prefers-reduced-motion: reduce) { .lo-hero-agents .lo-hero-face { transition: none; } }

/* Blog newsletter signup (src/nn/newsletter.js): copy left, form right; stacked on phones. */
.la-news-section { padding-bottom: 0; }
.la-news { box-sizing: border-box; width: 100%; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: #f3f5ff; border: 1px solid rgba(46, 60, 190, 0.12); border-radius: 24px; padding: 48px; }
.la-news-title { margin: 0 0 12px; }
.la-news-form { display: grid; gap: 12px; }
.la-news-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.la-news-form .w-input { margin: 0; }
.la-news-form .contact-1-button { width: 100%; }
.la-news-status { margin: 0; min-height: 1.4em; font-size: 14px; }
.la-news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.la-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 767px) { .la-news { grid-template-columns: 1fr; padding: 28px 20px; gap: 20px; } .la-news-row { grid-template-columns: 1fr; } }

/* Contact hero: the wrapper above it renders as a block, so center the 700px title block explicitly. */
.contact-hero-title-wrapper { margin-left: auto; margin-right: auto; }