/* Stone Pond token layer over the preserved Webflow stylesheet. */
:root {
  --sp-ink: #1e2022;
  --sp-copy: #333;
  --sp-blue: #4a7cb8;
  --sp-canvas: #f9f9fa;
  --sp-surface: #fff;
  --sp-rule: #cfd2d6;
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 16px;
  --sp-space-4: 24px;
  --sp-space-5: 32px;
  --sp-space-6: 40px;
  --sp-space-7: 48px;
  --sp-space-8: 64px;
  --sp-space-9: 80px;
  --sp-space-10: 96px;
  --sp-space-11: 112px;
  --sp-radius-card: 16px;
  --sp-radius-portrait: 24px;
  --sp-radius-pill: 99px;
}

/* Foundation and preserved brand type */
html, body { margin: 0; color: var(--sp-ink); background: var(--sp-canvas); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; } /* matches Consulting text rendering */
.noise-texture { background-image: url("noise.png"); }
.h3-heading { font-size: 48px; line-height: 1.2; }
.h6-heading-9, .h6-heading-11 { font-size: 22px; line-height: 32px; }
.paragraph-regular-6 { font-size: 18px; line-height: 28px; }
.caption-small-8 { font-size: 16px; line-height: 24px; }
.paragraph-x-small { font-size: 12px; line-height: 20px; }

/* Keyboard and action system */
a:focus-visible { outline: 3px solid var(--sp-blue); outline-offset: 3px; }
.button-primary {
  min-height: 44px;
  color: #fff;
  background: var(--sp-ink);
  border-radius: var(--sp-radius-pill);
  transition: background-color .2s ease;
}
.button-primary:hover, .button-primary.navvv:hover { background: var(--sp-blue); }

/* Shared navigation */
.navigation-left-wrapper { width: auto; flex: 0 0 auto; }
.navigation-right-wrapper { display: flex; align-items: center; width: auto; }
.stonepond-nav { display: flex; align-items: center; gap: var(--sp-space-2); }
.stonepond-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--sp-copy);
  border-radius: 15px;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
}
.stonepond-nav-link:hover, .stonepond-nav-link[aria-current="page"] { color: var(--sp-ink); background: var(--sp-surface); }

/* Hero and section rhythm */
.h6-heading.adfasfd { padding-bottom: var(--sp-space-6); }
.container-3 { padding-bottom: var(--sp-space-2); }
.grid-3.my-work { grid-column-gap: var(--sp-space-5); grid-row-gap: var(--sp-space-5); padding-bottom: var(--sp-space-10); }
.about-copy { gap: var(--sp-space-4); }
.about-copy .h6-heading-9 { margin: 0; }
.section-regular-9 { padding-top: var(--sp-space-5); padding-bottom: var(--sp-space-10); }
.team-grid-large-4.home { padding-top: var(--sp-space-5); }
.divider-gray-300 { background: var(--sp-rule); }

/* Existing image and portrait geometry */
.content-card-image, .header-lightbox-link { border-radius: var(--sp-radius-card); }
.image-focus-right { object-position: center right; }
.team-image-card { border-radius: var(--sp-radius-portrait); }
.team-name { color: var(--sp-copy); font-weight: 700; text-underline-offset: 3px; }
.team-content-left .paragraph-regular-6 { margin: 0; }

/* Bottom contact: quiet hairline pill under the Consulting card (v19; hi-vis image removed) */
.large-business-copy { display: flex; flex-direction: column; align-items: center; padding: var(--sp-space-8) 0 var(--sp-space-4); border-bottom: 1px solid var(--sp-rule); }
/* ^ thin grey rule closes the Investing content above the footer artwork */
.large-business-email {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-2);
  min-height: 44px;
  padding: 10px 20px 10px 16px;
  border: 1px solid #e3e5e8;
  border-radius: var(--sp-radius-pill);
  background: rgba(255, 255, 255, .7);
  color: var(--sp-copy);
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.large-business-email svg { width: 18px; height: 18px; flex: none; fill: currentColor; color: #5c636a; }
.large-business-email:hover { color: var(--sp-ink); border-color: var(--sp-rule); background: var(--sp-surface); }
.large-business-email:hover svg { color: var(--sp-blue); }

/* Footer seam: padding establishes internal space without a collapsing first-child margin. */
.cta.adsf.new.asdf2 { padding-bottom: var(--sp-space-4); }
.site-footer { padding-top: var(--sp-space-3); background: var(--sp-canvas); }
.site-footer .footer-image { margin-top: 0; }

@media screen and (max-width: 991px) {
  .h3-heading { font-size: 36px; line-height: 1.2; }
}

@media screen and (max-width: 767px) {
  .navigation { padding-left: 4%; padding-right: 4%; }
  .navigation-container { align-items: flex-start; gap: 10px; }
  .image-6 { width: 126px; height: auto; margin-top: 7px; }
  .stonepond-nav { justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-space-1); }
  .stonepond-nav-link { padding: 8px 9px; font-size: 14px; line-height: 24px; }
  .button-primary.navvv { min-height: 44px; padding: 10px 12px; font-size: 14px; line-height: 24px; }
  .h6-heading.adfasfd { padding-bottom: var(--sp-space-5); }
  .grid-3.my-work { grid-column-gap: var(--sp-space-4); grid-row-gap: var(--sp-space-4); padding-bottom: var(--sp-space-8); }
  .section-regular-9 { padding-top: var(--sp-space-4); padding-bottom: var(--sp-space-8); }
  .team-grid-large-4.home { padding-top: var(--sp-space-4); }
  .h6-heading-9, .h6-heading-11 { font-size: 20px; line-height: 28px; }
  .paragraph-regular-6 { font-size: 16px; line-height: 26px; }
  .large-business-copy { padding-top: var(--sp-space-7); }
}

@media screen and (max-width: 479px) {
  .h3-heading { font-size: 30px; line-height: 1.2; }
  .heroo.enew { padding-bottom: var(--sp-space-3); }
}

@media screen and (max-width: 420px) {
  .navigation-container { display: block; }
  .navigation-left-wrapper { margin-bottom: 10px; }
  .stonepond-nav { justify-content: flex-start; }
}

/* ---------- Staging v18: identity pill + Consulting crosslinks ----------
   Scoped copies of the /consulting/ pill and card tokens (consulting.css is not loaded here).
   Production omits these intentionally; staging keeps both sides ready to publish. */
.sp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 12px 4px 9px;
  border-radius: 999px;
  background: var(--sp-surface);
  box-shadow: 0 0 0 1px rgba(34, 42, 53, .08), 0 4px 8px rgba(34, 42, 53, .05);
  color: #3a3f44;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.sp-pill svg, .sp-crosslink-button svg { width: 16px; height: 16px; flex: none; fill: currentColor; }

/* Discreet early link under About us */

/* Larger-businesses card (consulting .card token: white, hairline, 16px radius, low shadow) */
.large-business-copy { padding-top: var(--sp-space-8); }
.sp-crosslink-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-space-3);
  max-width: 720px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto var(--sp-space-5);
  padding: var(--sp-space-6) var(--sp-space-5);
  border: 1px solid #e3e5e8;
  border-radius: var(--sp-radius-card);
  background: var(--sp-surface);
  box-shadow: 0 1px 5px -4px rgba(36, 36, 36, .7), 0 4px 8px rgba(36, 36, 36, .05);
  text-align: center;
}
.sp-crosslink-card h2 { margin: var(--sp-space-1) 0 0; color: var(--sp-ink); font-family: Arial, Helvetica, sans-serif; font-size: 28px; line-height: 34px; letter-spacing: -.02em; font-weight: 700; text-wrap: balance; }
.sp-crosslink-card p:not(.sp-pill) { max-width: 520px; margin: 0; text-wrap: balance; color: #3a3f44; font-size: 18px; line-height: 28px; }
.sp-crosslink-button { display: inline-flex; align-items: center; gap: var(--sp-space-2); margin-top: var(--sp-space-2); padding: 10px 22px; font-size: 16px; line-height: 24px; }

@media screen and (max-width: 767px) {
  .large-business-copy { padding-top: var(--sp-space-7); }
  .sp-crosslink-card { margin-bottom: var(--sp-space-4); padding: var(--sp-space-5) var(--sp-space-4); gap: 12px; }
  .sp-crosslink-card h2 { font-size: 22px; line-height: 28px; }
  .sp-crosslink-card p:not(.sp-pill) { font-size: 16px; line-height: 26px; }
}

/* ---------- v23: owners split into one <p> per person ----------
   Desktop: the old single paragraph used <br><br>; one line-height of space between the two
   paragraphs reproduces it exactly (28px desktop, 26px at <=767px). */
.owner-bios { gap: 0; }
.team-content-left .owner-bio + .owner-bio { margin-top: 28px; margin-top: 1lh; }

/* ---------- v23 mobile (<=700px): Consulting card treatment for Investing cards ----------
   White 16px card, hairline, low shadow, 10px inset (Consulting .card/.person tokens).
   About copy stays unboxed. */
@media screen and (max-width: 700px) {
  .section-regular-9 { padding-left: 0; padding-right: 0; }
  .content-card-grid { grid-row-gap: 16px; }
  .content-card {
    gap: 14px;
    padding: 10px;
    border: 1px solid #e3e5e8;
    border-radius: var(--sp-radius-card);
    background: var(--sp-surface);
    box-shadow: 0 1px 5px -4px rgba(36, 36, 36, .7), 0 4px 8px rgba(36, 36, 36, .05);
  }
  .content-card-image { border: 0; border-radius: 10px; }
  .content-card .column-regular { padding: 0 10px 10px; }
  .content-card .caption-regular { margin-bottom: 0; }

  /* Owners: each portrait sits above its own bio inside one card. The wrappers dissolve
     (display: contents) so photos and bios share one grid; ::before/::after draw the cards. */
  .team-grid-large-4.home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 16px auto auto;
    gap: 0;
    position: relative;
  }
  .team-grid-large-4.home::before,
  .team-grid-large-4.home::after {
    content: "";
    grid-column: 1;
    align-self: stretch; /* Webflow centres grid items; empty pseudo cards would collapse */
    border: 1px solid #e3e5e8;
    border-radius: var(--sp-radius-card);
    background: var(--sp-surface);
    box-shadow: 0 1px 5px -4px rgba(36, 36, 36, .7), 0 4px 8px rgba(36, 36, 36, .05);
  }
  .team-grid-large-4.home::before { grid-row: 1 / 3; }
  .team-grid-large-4.home::after { grid-row: 4 / 6; }
  .team-grid-large-4.home .team-content-left,
  .team-grid-large-4.home .owner-bios,
  .team-grid-large-4.home .team-background-wrapper,
  .team-grid-large-4.home .team-members-6 { display: contents; }
  .team-grid-large-4.home .team-member {
    position: relative;
    z-index: 1;
    grid-column: 1;
    justify-self: center;
    width: min(200px, 100%);
    height: auto;
    max-height: none;
    margin: 0;
    padding: 20px 0 0;
    transform: none;
    transition: none;
  }
  .team-grid-large-4.home .team-member-right { grid-row: 1; } /* George */
  .team-grid-large-4.home .team-member-left { grid-row: 4; }  /* Josh */
  .team-grid-large-4.home .team-details { display: none; }
  .team-grid-large-4.home .team-image-card { height: auto; aspect-ratio: .96; border: 0; border-radius: 12px; box-shadow: none; }
  .team-grid-large-4.home .owner-bio { position: relative; z-index: 1; grid-column: 1; margin: 0; padding: 16px 20px 20px; }
  .team-grid-large-4.home .owner-bio-george { grid-row: 2; }
  .team-grid-large-4.home .owner-bio-josh { grid-row: 5; }
}