/* home-b + home-c page styles. Owned by the HOME-BC agent; linked only from
   src/pages/nn/homepage/home-b.astro and home-c.astro. */

/* Home B: the dark client-logo network used to invert every mark to white,
   which turned The Property Group, DJ's Mobile Services and CK Financial into
   unreadable bars and blobs. Show the real logos on light chips instead. */
.brand-2-card {
  background-color: #ffffff;
}

.brand-2-logo {
  max-height: 28px;
  width: auto;
}

/* Home C: the hero brand strip sits on the dark hero background. Inverting
   the marks to white made the wide and dark logos unreadable, so each logo
   now sits on its own light chip in full color. */
.section.hero-3 .brand-holder {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px 18px;
}

/* Pricing is a flat supervision fee plus scoped build work, so the template's
   yearly/monthly billing toggle no longer means anything. */
.pricing-2-tabs-menu,
.home-3-pricing-tabs-menu {
  display: none;
}

/* Home B: sections.css force-hides the template's own FAQ classes because
   Home A replaced that block. Home B still uses the faq-2 accordion, so
   restore its pieces here with higher specificity. */
.faq-2-tab .faq-card-wrapper {
  display: flex !important;
}

.faq-2-tab .faq-question {
  display: flex !important;
}

.faq-2-tab .faq-answer {
  display: block !important;
}

.faq-2-tab .faq-plus-icon-wrapper-2 {
  display: flex !important;
}

/* Pinned runways restored: the IX scroll driver is rebound, so the template's
   400vh/300vh runways and sticky children drive the cards one at a time again. */


/* Home C: the pricing tiers are a static three-card grid now that the nested
   Webflow tabs component is gone. */
.nn-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  align-items: stretch;
}

.nn-tier-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nn-tier-card .pricing-3-content-wrapper {
  flex: 1;
  border: 1px solid var(--_color-and-text-hight---color--strock, #e4e7ee);
}

@media (max-width: 991px) {
  .nn-tier-grid {
    grid-template-columns: 1fr;
  }
}

/* The mark SVG paints its upper half in brand blue. A blue disc behind it
   erased that half and left a floating "A". White disc, full mark. */
.ai-agent-2-image,
.brand-2-center-image {
  background-color: #ffffff;
  border: 1px solid #e4e9f5;
  border-radius: 50%;
  object-fit: contain;
  padding: 18%;
}

.brand-2-center-image {
  width: 100%;
  height: 100%;
}

/* Real photos and headshots now live in slots the template sized for UI
   mockups; keep them cropped instead of stretched. */
.hero-3-dashboard {
  object-fit: cover;
  border-radius: 1rem;
}

.testimonial-2-image,
.testimonial-author-image,
.avatar-group-item {
  object-fit: cover;
}

.why-choose-2-image,
.why-choose-3-image {
  object-fit: cover;
  border-radius: 1rem;
}

.cta-2-image {
  object-fit: cover;
}

/* Home B: the four "Someone has to run the robots." visual panels are
   520x400 art SVGs; the template's object-fit: cover cropped them so every
   caption started mid-word. Contain them on a white ground instead (the art
   itself has a white background, so the letterbox is invisible). */
.feature-2-card-image {
  object-fit: contain;
}

.featire-2-card-image-wrapper,
.feature-2-image-wrapper {
  background-color: #ffffff;
}

/* Home B: caption under the logo tile in the "work you should not be doing"
   bento, so the tile reads as the roster card it is. */
.nn-roster-caption {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #4b5563;
  padding: 4px 24px 0;
}

/* Home B: the contact photo is now a real team photo; keep it cropped to the
   slot the template sized for a studio portrait. */
.contact-3-image {
  object-fit: cover;
}

/* Home C: at phone widths the "Someone has to run the robots" tab strip
   (One workflow first / Acts, not answers / Watched weekly / Run it your way)
   clipped at the viewport edge after the second tab, with no affordance that
   two more tabs existed. Wrap the four tabs into a 2x2 grid instead so every
   tab is visible and tappable. Labels are allowed to break onto two lines,
   so the template's fixed 52px tab height becomes a minimum only. */
@media screen and (max-width: 639px) {
  .feature-3-tabs-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: visible;
  }

  .feature-3-tab-link {
    max-height: none;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
  }
}

/* Home C "run the robots" tab strip: at phone widths the four tabs overflowed
   the viewport with no hint that more existed, so tabs three and four were
   unreachable. Let the strip scroll with a visible partial next tab. */
@media (max-width: 479px) {
  .feature-3-tabs-menu {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .feature-3-tabs-menu::-webkit-scrollbar { display: none; }
  .feature-3-tabs-menu > a { flex: 0 0 auto; }
}

/* ---- logos: stationary, unstretched, readable ---------------------------
   IX spins the orbit and restarts the marquee, which is the jump. Wide
   wordmarks (Nom House, Naches, Kainos, Firehouse) were forced into 28px
   squares. Contain them in a chip that can be wider than it is tall. */
.brand-marquee-holder,
.home-2-brand-marquee-holder,
.brand-2-bg-wrapper,
.brand-2-holder,
.brand-2-bg-image,
.brand-2-center-circle-wrapper,
.brand-2-center-image,
.brand-2-logo,
.brand-3-holder,
.brand-3-marquee-holder,
.brand-3-marquee-wrapper,
.ai-agent-2-tag-holder,
.ai-agent-2-image {
  animation: none !important;
  transform: none !important;
}

img[src*="eric-t-quinn.svg"] {
  width: 140px !important;
  height: 28px !important;
  max-width: 140px;
  max-height: 28px;
}

.brand-2-bg-image {
  display: none !important;
}

.brand-2-bg-wrapper {
  min-height: 420px;
}

.brand-wrapper {
  overflow: hidden;
}

.brand-marquee-holder {
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 40px;
  width: 100% !important;
  max-width: 100%;
}

/* (static-era duplicate hiding removed: the rows glide again and the
   marquee needs both halves of the track) */

.brand-image,
.brand-2-logo,
.brand-3-marquee-icon,
.brand-3-icon {
  width: auto !important;
  height: auto !important;
  max-height: 36px;
  max-width: 140px;
  object-fit: contain !important;
}

.brand-2-card,
.brand-3-marquee-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 108px;
  height: 64px !important;
  padding: 8px 14px !important;
  background-color: #ffffff !important;
  overflow: hidden;
}

/* Home C hero right: the template dashboard ("Support Small Businesses") and
   its warm tan wash were the background of this frame. The photo fills it. */
.hero-3-dashboard-wrapper {
  background-image: none !important;
  background-color: #eef1f8;
  padding: 0 !important;
  overflow: hidden;
}

.hero-3-dashboard {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: 18% 30%;
  border-radius: 1rem;
}

/* Home C logo column was a warm tan card (#fcf8f1) beside the marks. */
.brand-3-card {
  background-color: #ffffff !important;
}

.brand-3-wrapper,
.brand-3-holder,
.brand-3-marquee-wrapper {
  max-height: none;
  max-width: 100%;
  overflow: hidden;
}

.brand-3-marquee-holder {
  flex-direction: column !important;
  width: auto !important;
  max-width: 100%;
}


.brand-3-icon-wrapper {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.brand-3-top-shadow,
.brand-3-bottom-shadow {
  display: none;
}

/* Home B testimonials: drop the two big squares (stat tile + Shannon photo).
   The three quote cards below stay. No social links on the quotes. */
.testimonial-2-grid > .testimonial-2-holder:first-child,
.testimonial-2-big-card-wrapper,
.testimonial-2-image-wrapper {
  display: none !important;
}

.testimonial-social-media-wrapper {
  display: none !important;
}

.testimonial-2-grid {
  grid-template-columns: 1fr !important;
}

/* Home C "Three ways to run it": the tier head reused a tab-link pill that
   stretched edge to edge and crushed the label. */
.nn-tier-head.home-3-pricing-left-tab-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
  height: auto !important;
  background: #ffffff !important;
  color: inherit !important;
  border: 1px solid #e4e9f5 !important;
  border-radius: 16px !important;
  padding: 22px !important;
}

.nn-tier-head .pricing-2-primary-tag-wrapper {
  width: auto;
}

.nn-tier-head .pricing-3-tag {
  display: inline-flex;
  width: auto;
  border-radius: 999px;
  padding: 4px 12px;
  background: #eef1fd;
  color: #1b44c8;
  white-space: nowrap;
  line-height: 1.4;
}

.nn-tier-head .pricing-3-price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.nn-tier-head .home-3-pricing-plan-wrapper {
  align-items: flex-start;
  gap: 8px;
}

/* Meet your new staff: the circle was cover-cropped against the hair.
   Inset the portrait so the whole character sits inside the ring. */
.agent-3-image-wrapper {
  background: #f4f6fb;
  padding: 8px;
  box-sizing: border-box;
}

.agent-3-image {
  object-fit: contain !important;
  object-position: center center;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
}

/* David (glasses) is on the right of the team photo. A left crop
   featured the other person. */
.contact-3-image,
.why-choose-2-image,
img[src*="the-builders.jpg"],
img[src*="advisor-meeting.jpg"] {
  object-fit: cover;
  object-position: 100% 42%;
}

/* Home B pricing: two equal plans. Tags stay pills, not stretched bars. */
.prcing-2-wrapper,
.pricing-2-grid {
  width: 100%;
}
.pricing-2-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  overflow: visible !important;
  align-items: stretch;
}
.pricing-2-card-wrapper {
  height: 100%;
}
.pricing-2-card-grid {
  grid-template-columns: 1fr !important;
  height: 100%;
}
.pricing-2-primary-tag,
.pricing-2-secondary-tag,
.pricing-2-primary-tag-wrapper {
  display: inline-flex !important;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  white-space: nowrap;
  align-self: flex-start;
}
@media (max-width: 767px) {
  .pricing-2-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Home C "Real work": drop the scrolling logo column. A grid of client cards. */
.brand-3-grid {
  display: block !important;
}
.brand-3-holder,
.brand-3-marquee-wrapper {
  display: none !important;
}
.brand-3-card-wrapper {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
.brand-3-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.brand-3-card {
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 100%;
  background: #ffffff !important;
  border: 1px solid #e4e9f5 !important;
}
@media (max-width: 767px) {
  .brand-3-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Logo row: one still line, scrolled by the arrow buttons in lab.js.
   The arrows sit against the window. margin:auto on a full-width track
   was parking them at the viewport edges, and width:100% kept the window
   wide enough that the row never overflowed, so both buttons stayed off.
   No spin. Duplicates stay hidden. */
.brand-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
/* The hero grid column was growing to the logo row's min-content, which
   pushed the next arrow past the viewport. */
.hero-3-brand-grid > * {
  min-width: 0;
}
.brand-marquee-holder {
  flex: 1 1 auto;
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 520px;
  min-width: 0;
  margin: 0;
  gap: 36px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  justify-content: flex-start !important;
}
.brand-holder {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Home B logo wall: the orbit pins every chip with absolute offsets sized
   for a 28px mark. Wider wordmarks land on top of their neighbours, and the
   second copy of the ring stacks on the same coordinates. Lay one set out
   in a grid. The centre mark stays put. Nothing spins. */
.brand-2-wrapper {
  display: block !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.brand-2-bg-wrapper {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: center;
  justify-items: center;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 0 4px;
}
.brand-2-center-circle-wrapper {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 / -1;
  width: 104px !important;
  height: 104px !important;
  margin: 0 auto 4px;
}
.brand-2-holder {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  background: #ffffff !important;
  border: 1px solid #e4e9f5 !important;
}
.brand-2-bg-wrapper > .brand-2-holder {
  width: 100%;
  max-width: 200px;
}
@media (min-width: 992px) {
  .brand-2-bg-wrapper > .brand-2-holder {
    display: block !important;
  }
}
@media (max-width: 767px) {
  .brand-2-bg-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone logo rows: a second copy of the wall, shown only under 992px.
   It was an unclipped marquee, so the chips ran past the viewport. */
.home-2-brand-mrquee-wrapper,
.home-2-brand-bottom-mrquee-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}
.home-2-brand-marquee-holder {
  display: flex !important;
  flex: 1 1 auto;
  flex-wrap: nowrap !important;
  min-width: 0;
  max-width: 100%;
  gap: 12px;
  overflow-x: auto !important;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.home-2-brand-marquee-holder::-webkit-scrollbar { display: none; }
.home-2-brand-marquee-holder .brand-2-holder {
  flex: 0 0 auto;
  width: auto !important;
  max-width: 168px;
}
@media (min-width: 992px) {
  .home-2-brand-mrquee-wrapper,
  .home-2-brand-bottom-mrquee-wrapper {
    display: none !important;
  }
}
.brand-marquee-holder::-webkit-scrollbar { display: none; }
/* Agent cards were position:sticky, so they piled up and left a dead scroll. */
.agent-collection-item {
  position: relative !important;
  top: auto !important;
}

/* Staff portraits fill their circle now that the art is centered. */
.agent-3-image-wrapper { padding: 0 !important; background: transparent !important; }