/* Our own styles. Loaded after the Webflow-generated stylesheet, which is
   machine-generated and should be treated as vendor output — put changes here
   instead of editing it. */

/* The blog thumbnail grid was capped at a fixed 30rem with clipped overflow, so
   a third post rendered and was then cut off. Webflow's interaction engine also
   animates this height (0rem -> 30rem) from its JS bundle, so the cap has to be
   beaten with !important to override the inline style GSAP writes. */
.more-articles-box {
  height: auto !important;
  overflow: visible;
}

/* Placement for the thumbnail cards. Webflow emitted this as an #id rule, which
   could only ever style one card. Same spans, now class-based so any number of
   posts lay out correctly: 3 across, 2 on tablet, 1 on phone. */
.thumb-item {
  grid-column: span 4;
}

@media screen and (max-width: 991px) {
  .thumb-item { grid-column: span 6; }
}

@media screen and (max-width: 479px) {
  .thumb-item { grid-column: span 9; }
}

/* Studio page. Webflow gave the legal page's blocks their placement through
   generated #grid-legal-* ids; these blocks are hand-authored, so they get a
   class instead. Same band: centred 8 of 12 columns, full width on smaller
   screens. Without this each block collapses to a single 1/12 column. */
.studio-block {
  grid-column: 3 / 11;
}

@media screen and (max-width: 991px) {
  .studio-block { grid-column: 1 / 13; }
}

/* Studio idea list. Rows rather than cards: a single card in a multi-column grid
   reads as a grid that failed to load, whereas one row reads as one row. Scales
   to a long list without a redesign. */
.idea-row {
  padding-bottom: 2.5rem;
}

.idea-row .idea-name {
  margin: 0;
}

/* Keep the status label aligned with the first line of the name, not the
   centre of it, so it reads as a tag on the row rather than a second column. */
.idea-row-head {
  align-items: baseline;
}

.idea-row:last-child {
  padding-bottom: 0;
}

/* Resident credit. The studio's claim is that it works with people, so the
   person gets a face rather than a footnote. */
.idea-resident {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.idea-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

/* Until there's a photo: initials on the brand navy. Deliberate mark, not a
   broken image or a stock silhouette. */
.idea-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e385c;
  color: #26a2e0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.idea-resident-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* The stock inner-page hero reserves 208px of margin plus 32px of padding above
   the heading. That suits a page whose hero carries a byline and an image; on
   /studio and /blog it is 240px of empty colour above a single line of text. */
.hero-tight {
  margin-top: 6rem !important;
}

@media screen and (max-width: 767px) {
  .hero-tight { margin-top: 4rem !important; }
}

/* Description and resident credit share a row, so the person sits level with
   the work rather than trailing underneath it. Stacks on narrow screens. */
.idea-row-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem;
}

.idea-text {
  flex: 1 1 auto;
  max-width: 46ch;
  margin: 0;
}

.idea-row-body .idea-resident {
  flex: 0 0 auto;
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .idea-row-body { flex-direction: column; gap: 1.5rem; }
  .idea-text { max-width: none; }
}

/* A linked idea name. Keeps the heading's own colour so the row still reads as
   a heading rather than as a link in a list, and earns the affordance on hover. */
.idea-link {
  color: inherit;
  text-decoration: none;
}

.idea-link:hover {
  color: var(--color--skyblue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* With no resident beside it the description keeps a 46ch measure sized for a
   two-column row, leaving the right half of the row empty. Alone it can take a
   wider measure — still a readable line length, without the lopsided gap. The
   rule reverts itself the moment a resident is added back. */
.idea-row-body > .idea-text:only-child {
  max-width: 62ch;
}
/* The article thumbnails were invisible: Webflow's interaction engine sets
   opacity:0 on them as the start state of a reveal, and plays it on a click of
   `.eyebrow-text.eyebrow-link`. No element on any page has ever carried that
   class — not here, and not in the original Webflow capture either, where the
   class exists only in CSS. The timeline therefore never fires and the cards
   never appear. That shipped broken from Webflow.

   It was hidden before because the same timeline also animates the box open
   from height:0, so a section that never opened looked deliberate. Forcing the
   box open (above) left the cards behind, which is what made it visible as a
   tall blank gap rather than a collapsed heading.

   Rather than restore a click-to-expand that gives no affordance and hides two
   articles behind an interaction nobody would find, the cards are simply shown.
   !important is required because IX2's start state is an inline style. */
.more-articles-box .thumb-item {
  opacity: 1 !important;
}

/* The benefits row (Product & Sales / Fundraising / Operations) left ~240px of
   empty space under the last line of text on desktop: 32px inside the card,
   128px under the row, 80px of section padding. Trimmed the first two.

   Scoped to desktop. Below 992px the three items stack, so their spacing is
   doing real work separating them, and it is already tighter there (64px
   margin, no bottom padding) — narrowing it further would crowd them.

   The section's own 80px padding is left alone: it is the rhythm every other
   section on the page uses, and changing it only here would make this section
   sit differently from its neighbours. */
@media screen and (min-width: 992px) {
  .section-benefits .benefits {
    margin-bottom: 2.5rem;
  }

  .section-benefits .benefit-inner {
    padding-top: 2.25rem;
    padding-bottom: 1rem;
  }
}