/* ================================================================
   theme.css — True Impact Virtual Advisory Services

   Structure:
     1. @import web fonts  (must be first, BEFORE any @layer)
     2. @layer tokens      (brand palette, type, space, radius, shadow)
     3. @layer theme       (body, headings, links, .eyebrow, .section*)
     4. @layer components  (placeholder — component items append here)

   Layers are declared in yg-base.css. Don't redeclare them here.
   Design direction: charcoal-executive structure, TIVAS brand-board
   palette — black #000, pink #FF346F (primary accent), cream #EFE9CE,
   blue-gray #99AAAF, white. DM Serif Display substitutes for TAN Meringue.
   ================================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@300;400;500;600;700&display=swap");


/* ================================================================
   1. TOKEN OVERRIDES
   ================================================================ */

@layer tokens {
  :root {
    /* --- Brand-board palette (verbatim from Shannan's brand board) --- */
    --color-black:   #000000;
    --color-pink:    #ff346f;
    --color-cream:   #efe9ce;
    --color-slate:   #99aaaf;
    --color-white:   #ffffff;

    /* --- Schema overrides built from brand-board ------------------ */
    --color-bg:        var(--color-white);
    --color-bg-alt:    var(--color-cream);
    --color-bg-dark:   var(--color-black);
    --color-text:      #1a1a1a;
    --color-text-muted: #6a6a6a;
    --color-heading:   var(--color-black);
    --color-primary:   var(--color-black);
    --color-accent:    var(--color-pink);
    --color-line:      rgba(0, 0, 0, 0.08);
    --color-link:      var(--color-black);

    /* --- Derived colors ------------------------------------------- */
    --color-slate-subtle:   color-mix(in srgb, var(--color-slate) 25%, white);
    --color-cream-deep:     color-mix(in srgb, var(--color-cream) 80%, var(--color-slate));
    --color-pink-subtle:    color-mix(in srgb, var(--color-pink) 12%, white);
    --color-pink-hover:     color-mix(in srgb, var(--color-pink) 85%, black);
    --color-primary-hover:  color-mix(in srgb, var(--color-primary) 80%, white);

    /* --- Typography ------------------------------------------- */
    --font-display:         'DM Serif Display', 'Playfair Display', Georgia, serif;
    --font-body:            'Montserrat', system-ui, sans-serif;
    --font-heading:         var(--font-display);
    --font-size-base:       1.0625rem;
    --line-height-body:     1.65;
    --line-height-heading:  1.2;

    /* --- Spacing ---------------------------------------------- */
    --space-xs:   0.5rem;
    --space-sm:   1rem;
    --space-md:   1.5rem;
    --space-lg:   2.5rem;
    --space-xl:   4rem;
    --space-2xl:  6rem;
    --space-3xl:  8rem;

    /* --- Radii ------------------------------------------------ */
    --radius-sm:    4px;
    --radius-md:    6px;
    --radius-lg:    12px;
    --radius-full:  9999px;

    /* --- Shadows ---------------------------------------------- */
    --shadow-sm:  0 2px 8px rgba(26, 26, 26, 0.04);
    --shadow-md:  0 12px 32px rgba(26, 26, 26, 0.08);
    --shadow-lg:  0 24px 60px rgba(26, 26, 26, 0.15);

    /* --- Transitions ------------------------------------------ */
    --transition-fast:  150ms ease-out;
    --transition-base:  250ms ease-out;
    --transition-slow:  400ms ease-out;

    /* --- Container -------------------------------------------- */
    --container-max-width:  1200px;
    --container-padding:    1.5rem;
  }
}


/* ================================================================
   2. SITE-WIDE PATTERNS
   ================================================================ */

@layer theme {

  body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: var(--line-height-heading);
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover {
      color: var(--color-pink);
    }
  }

  /* Eyebrow label — used above section titles and hero headlines.
     Carries the pink thread via ::after hairline. */
  .eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: var(--space-sm);

    &::after {
      content: '';
      display: inline-block;
      width: 24px;
      height: 1px;
      background: var(--color-pink);
      margin-left: 0.5rem;
      vertical-align: middle;
    }
  }

  /* Section primitives */
  .section {
    padding-block: var(--space-3xl);

    @media (max-width: 768px) {
      padding-block: var(--space-2xl);
    }
  }

  .section-alt {
    background-color: var(--color-bg-alt);
  }

  .section-dark {
    background-color: var(--color-bg-dark);
    color: var(--color-white);

    & h1, & h2, & h3, & h4, & h5, & h6 {
      color: var(--color-white);
    }

    & a {
      color: var(--color-white);

      &:hover {
        color: var(--color-pink);
      }
    }

    & .eyebrow {
      color: var(--color-white);
    }
  }

  .section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: var(--line-height-heading);
    margin-bottom: var(--space-md);
  }

  .section-lede {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    color: var(--color-text-muted);
    max-width: 60ch;
    margin-bottom: var(--space-lg);
  }

}


/* ================================================================
   3. COMPONENT STYLES
   Individual component work items append their CSS here, one block
   per component, using native CSS nesting.
   ================================================================ */

@layer components {

  /* ──────────────────────────────────────────────────────────────
     Site header — navigation/header
     Desktop: logo · primary nav · Book Discovery Call pill
     Mobile (<=991px): logo · hamburger → slide-in full-screen panel
     Scroll state (is-scrolled): shrinks padding + logo, adds blur
     Active state: pink underline on [data-page] matching body[data-page]
     ────────────────────────────────────────────────────────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-white);
    border-bottom: 1px solid transparent;
    transition:
      background-color var(--transition-base),
      border-color var(--transition-base),
      backdrop-filter var(--transition-base),
      padding var(--transition-base);


    &.is-scrolled {
      background-color: color-mix(in srgb, var(--color-white) 88%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom-color: var(--color-line);
      padding-block: 0.75rem;
    }

    & .site-header-inner {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      gap: var(--space-md);
    }
  }

  .site-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;

    &:hover { color: inherit; }

    & .site-logo-img {
      height: 150px;
      width: auto;
      transition: height var(--transition-base);
    }
  }

  .site-header.is-scrolled .site-logo .site-logo-img { height: 80px; }

  /* ── Desktop primary nav ─────────────────────────────────────── */
  .primary-nav {
    justify-self: end;

    & .nav-list {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
      list-style: none;
      margin: 0;
      padding: 0;
    }

    & .nav-item {
      position: relative;
    }

    & .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--color-text);
      background: transparent;
      border: 0;
      padding: 0.4rem 0;
      cursor: pointer;
      transition: color var(--transition-fast);

      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        background: var(--color-pink);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--transition-base);
      }

      &:hover,
      &[aria-expanded="true"] {
        color: var(--color-black);

        &::after { transform: scaleX(1); }
      }

      & .nav-chevron {
        font-size: 0.7rem;
        transition: transform var(--transition-fast);
      }

      &[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
    }
  }

  /* Active state — body[data-page] matches nav-link[data-page] */
  body[data-page="home"]       .primary-nav .nav-link[data-page="home"]::after,
  body[data-page="services"]   .primary-nav .nav-link[data-page="services"]::after,
  body[data-page="industries"] .primary-nav .nav-link[data-page="industries"]::after,
  body[data-page="blog"]       .primary-nav .nav-link[data-page="blog"]::after,
  body[data-page="about"]      .primary-nav .nav-link[data-page="about"]::after,
  body[data-page="contact"]    .primary-nav .nav-link[data-page="contact"]::after {
    transform: scaleX(1);
  }

  /* ── Dropdown panel ──────────────────────────────────────────── */
  .dropdown-panel {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 240px;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--transition-fast),
      visibility var(--transition-fast),
      transform var(--transition-fast);

    &.is-open {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    & ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    & .dropdown-link {
      display: block;
      padding: 0.7rem 1rem;
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--color-text);
      border-radius: var(--radius-sm);
      transition:
        background-color var(--transition-fast),
        color var(--transition-fast);

      &:hover {
        background: var(--color-pink-subtle);
        color: var(--color-black);
      }
    }

    /* Divider before the "All ..." link (last item) */
    & li:last-child .dropdown-link {
      margin-top: 0.25rem;
      padding-top: 0.85rem;
      border-top: 1px solid var(--color-line);
      font-weight: 600;
      color: var(--color-pink);
    }
  }

  /* ── Header CTA (pink pill) ──────────────────────────────────── */
  .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    background: var(--color-pink);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition:
      background-color var(--transition-fast),
      transform var(--transition-fast),
      box-shadow var(--transition-fast);

    &:hover {
      background: var(--color-pink-hover);
      color: var(--color-white);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px color-mix(in srgb, var(--color-pink) 35%, transparent);
    }

    & .bi-arrow-right {
      font-size: 0.85rem;
      transition: transform var(--transition-fast);
    }

    &:hover .bi-arrow-right { transform: translateX(2px); }
  }

  /* ── Mobile hamburger toggle ─────────────────────────────────── */
  .mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    color: var(--color-black);
    font-size: 1.5rem;
    cursor: pointer;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast);

    &:hover {
      background: var(--color-black);
      color: var(--color-white);
      border-color: var(--color-black);
    }
  }

  /* ── Mobile slide-in nav panel ───────────────────────────────── */
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    padding: 1.25rem var(--container-padding) 2rem;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--transition-base),
      visibility var(--transition-base);

    &.is-open {
      transform: translateX(0);
      visibility: visible;
    }

    & .mobile-nav-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-lg);
    }

    & .mobile-nav-logo-img {
      height: 48px;
      width: auto;
    }

    & .mobile-close {
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-sm);
      color: var(--color-black);
      font-size: 1.25rem;
      cursor: pointer;
      transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);

      &:hover {
        background: var(--color-black);
        color: var(--color-white);
        border-color: var(--color-black);
      }
    }

    & .mobile-nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      flex: 1;
    }

    & .mobile-nav-link {
      display: block;
      padding: 0.5rem 0;
      font-family: var(--font-display);
      font-size: 2rem;
      color: var(--color-black);
      line-height: 1.15;

      &:hover { color: var(--color-pink); }
    }

    & .mobile-nav-heading {
      display: block;
      font-family: var(--font-body);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--color-text-muted);
      margin-bottom: 0.5rem;
    }

    & .mobile-nav-sublist {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      border-left: 2px solid var(--color-pink);
      padding-left: 1rem;
    }

    & .mobile-nav-sublink {
      display: block;
      padding: 0.35rem 0;
      font-family: var(--font-display);
      font-size: 1.35rem;
      color: var(--color-black);

      &:hover { color: var(--color-pink); }
    }

    & .mobile-nav-cta {
      margin-top: var(--space-lg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 1rem 1.75rem;
      background: var(--color-pink);
      color: var(--color-white);
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 600;
      border-radius: var(--radius-full);
      transition: background-color var(--transition-fast);

      &:hover {
        background: var(--color-pink-hover);
        color: var(--color-white);
      }
    }
  }

  /* Lock body scroll when mobile nav is open (yg-nav.js sets .nav-open) */
  body.nav-open { overflow: hidden; }

  /* ── Breakpoints ─────────────────────────────────────────────── */
  @media (max-width: 991px) {
    .site-header .site-header-inner {
      grid-template-columns: auto 1fr auto;
    }
    .primary-nav,
    .header-cta { display: none; }
    .mobile-toggle {
      display: inline-flex;
      grid-column: 3;
      justify-self: end;
    }
  }

  @media (min-width: 992px) {
    .mobile-nav { display: none; }
  }


  /* ──────────────────────────────────────────────────────────────
     Site footer — navigation/footer
     Dark (black) surface. Three strata:
       1. footer-top    — brand + 3 link columns (4-col grid)
       2. footer-middle — contact info + newsletter signup (2-col)
       3. footer-bottom — copyright + mailing address (flex row)
     Pink accent on hover + "All …" links.
     ────────────────────────────────────────────────────────────── */
  .site-footer {
    background: var(--color-bg-dark);
    color: var(--color-white);
    padding-block: var(--space-2xl) var(--space-lg);
 
    position: relative;

    /* Subtle top hairline in pink to carry the brand thread */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-pink) 20%,
        var(--color-pink) 80%,
        transparent 100%
      );
      opacity: 0.8;
    }

    & a {
      color: var(--color-white);
      transition: color var(--transition-fast);

      &:hover {
        color: var(--color-pink);
      }
    }

    & .footer-heading {
      font-family: var(--font-body);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--color-white);
      margin: 0 0 var(--space-md);
    }

    & ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
  }

  /* ── Top grid ────────────────────────────────────────────────── */
  .footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    @media (max-width: 991px) {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-lg);
    }

    @media (max-width: 560px) {
      grid-template-columns: 1fr;
    }
  }

  .footer-brand {
    & .footer-logo {
      display: inline-block;
      line-height: 0;
      margin-bottom: var(--space-md);

      &:hover { color: inherit; }
    }

    & .footer-logo-img {
      height: 150px;
      width: auto;
    }

    & .footer-tagline {
      font-family: var(--font-display);
      font-size: 1.25rem;
      line-height: 1.35;
      color: var(--color-white);
      opacity: 0.92;
      margin: 0 0 var(--space-md);
      max-width: 28ch;
    }
  }

  .footer-social {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;

    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: var(--radius-full);
      font-size: 1rem;
      transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);

      &:hover {
        background: var(--color-pink);
        border-color: var(--color-pink);
        color: var(--color-white);
        transform: translateY(-2px);
      }
    }
  }

  .footer-col {
    & ul {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }

    & a {
      font-family: var(--font-body);
      font-size: 0.95rem;
      font-weight: 400;
      opacity: 0.82;

      &:hover { opacity: 1; }
    }

    & .footer-all-link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: 0.4rem;
      padding-top: 0.65rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--color-pink);
      font-weight: 600;
      opacity: 1;

      & .bi-arrow-right {
        font-size: 0.8rem;
        transition: transform var(--transition-fast);
      }

      &:hover {
        color: var(--color-pink);

        & .bi-arrow-right { transform: translateX(3px); }
      }
    }
  }

  /* ── Middle: contact + newsletter ────────────────────────────── */
  .footer-middle {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-xl);
    padding-block: var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
  }

  .footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: var(--space-md);

    & li {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      font-size: 0.95rem;
      opacity: 0.92;
    }

    & .bi {
      color: var(--color-pink);
      font-size: 1rem;
      margin-top: 0.15rem;
      flex-shrink: 0;
    }

    & address {
      font-style: normal;
      line-height: 1.5;
    }
  }

  .footer-service-area {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-style: italic;
  }

  .footer-newsletter-lede {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 var(--space-md);
    max-width: 42ch;
  }

  .footer-newsletter-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.6rem;
    align-items: stretch;

    @media (max-width: 560px) {
      grid-template-columns: 1fr;
    }

    & .footer-newsletter-field {
      display: flex;

      & input {
        width: 100%;
        padding: 0.85rem 1rem;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: var(--radius-md);
        color: var(--color-white);
        font-family: var(--font-body);
        font-size: 0.95rem;
        transition:
          background-color var(--transition-fast),
          border-color var(--transition-fast);

        &::placeholder {
          color: rgba(255, 255, 255, 0.45);
        }

        &:focus {
          outline: none;
          background: rgba(255, 255, 255, 0.1);
          border-color: var(--color-pink);
        }
      }
    }

    & .footer-newsletter-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      padding: 0.85rem 1.5rem;
      background: var(--color-pink);
      color: var(--color-white);
      border: 0;
      border-radius: var(--radius-md);
      font-family: var(--font-body);
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition:
        background-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

      &:hover {
        background: var(--color-pink-hover);
        transform: translateY(-1px);
        box-shadow: 0 8px 18px color-mix(in srgb, var(--color-pink) 40%, transparent);
      }

      & .bi-arrow-right {
        font-size: 0.85rem;
        transition: transform var(--transition-fast);
      }

      &:hover .bi-arrow-right { transform: translateX(2px); }
    }
  }

  /* ── Bottom strip ────────────────────────────────────────────── */
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    flex-wrap: wrap;

    & p {
      margin: 0;
      font-size: 0.85rem;
      color: rgba(255, 255, 255, 0.55);
    }

    & .footer-address-strip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;

      & .bi {
        color: var(--color-pink);
        opacity: 0.75;
      }
    }

    @media (max-width: 560px) {
      justify-content: flex-start;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Hero mosaic — sections/hero-mosaic (home only)
     Two-column: left copy, right 3-image asymmetric mosaic.
     Mobile (<=768px): content stacks; tile-1 is primary, others hidden.
     Pink thread: eyebrow underline + primary CTA pill + glow behind mosaic.
     ────────────────────────────────────────────────────────────── */
  .hero-mosaic {
    position: relative;
    padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 7vw, 6rem);
    background: var(--color-bg);
    overflow: hidden;
  }

  .hero-mosaic-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;

    @media (max-width: 991px) {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
  }

  .hero-mosaic-copy {
    max-width: 34rem;
  }

  .hero-mosaic-eyebrow {
    margin: 0 0 1.25rem;
  }

  .hero-mosaic-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 1.25rem;

    & strong,
    & em {
      font-style: italic;
      font-weight: inherit;
      color: var(--color-pink);
    }
  }

  .hero-mosaic-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    max-width: 34rem;
    margin: 0 0 2rem;
  }

  .hero-mosaic-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
  }

  .hero-mosaic-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.75rem;
    background: var(--color-pink);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--color-pink) 35%, transparent);
    transition:
      background-color var(--transition-base),
      transform var(--transition-base),
      box-shadow var(--transition-base);

    & .bi {
      transition: transform var(--transition-base);
    }

    &:hover,
    &:focus-visible {
      background: var(--color-pink-hover);
      transform: translateY(-1px);
      box-shadow: 0 18px 40px color-mix(in srgb, var(--color-pink) 45%, transparent);

      & .bi {
        transform: translateX(3px);
      }
    }
  }

  .hero-mosaic-cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition:
      background-color var(--transition-base),
      color var(--transition-base);

    &:hover,
    &:focus-visible {
      background: var(--color-black);
      color: var(--color-white);
    }
  }

  .hero-mosaic-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    aspect-ratio: 5 / 6;
    gap: 0.9rem;

    @media (max-width: 991px) {
      aspect-ratio: 4 / 3;
      max-width: 520px;
      margin-inline: auto;
      width: 100%;
    }

    @media (max-width: 560px) {
      aspect-ratio: 4 / 3;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
    }
  }

  .hero-mosaic-tile {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-slate-subtle);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 1;

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .hero-mosaic-tile-1 {
    grid-column: 1 / span 5;
    grid-row: 1 / span 4;
    box-shadow: var(--shadow-lg);
  }

  .hero-mosaic-tile-2 {
    grid-column: 4 / span 3;
    grid-row: 4 / span 3;
    z-index: 2;
  }

  .hero-mosaic-tile-3 {
    grid-column: 1 / span 3;
    grid-row: 5 / span 2;
  }

  @media (max-width: 560px) {
    .hero-mosaic-tile-1 {
      grid-column: 1 / -1;
      grid-row: 1 / span 3;
    }
    .hero-mosaic-tile-2 {
      grid-column: 3 / span 2;
      grid-row: 3 / span 2;
    }
    .hero-mosaic-tile-3 {
      grid-column: 1 / span 2;
      grid-row: 4 / span 1;
    }
  }

  .hero-mosaic-glow {
    position: absolute;
    inset: -8% -6% auto auto;
    width: 55%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-pink) 35%, transparent), transparent 70%);
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-mosaic-copy > * {
      opacity: 0;
      transform: translateY(12px);
      animation: hero-mosaic-rise 600ms var(--transition-slow) forwards;
    }
    .hero-mosaic-copy > *:nth-child(1) { animation-delay: 0ms; }
    .hero-mosaic-copy > *:nth-child(2) { animation-delay: 80ms; }
    .hero-mosaic-copy > *:nth-child(3) { animation-delay: 160ms; }
    .hero-mosaic-copy > *:nth-child(4) { animation-delay: 240ms; }

    .hero-mosaic-tile {
      opacity: 0;
      transform: translateY(16px) scale(0.98);
      animation: hero-mosaic-rise 700ms var(--transition-slow) forwards;
    }
    .hero-mosaic-tile-1 { animation-delay: 120ms; }
    .hero-mosaic-tile-2 { animation-delay: 260ms; }
    .hero-mosaic-tile-3 { animation-delay: 380ms; }
  }

  @keyframes hero-mosaic-rise {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }


  /* ──────────────────────────────────────────────────────────────
     Page hero — sections/page-hero (every inner page)
     Centered eyebrow + serif headline + subheadline.
     Optional pill chips row. Optional primary + secondary CTAs.
     Generous top padding clears the sticky header.
     ────────────────────────────────────────────────────────────── */
  .page-hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem);
    background: var(--color-bg);
    overflow: hidden;

    /* Pink decorative glow tucked behind the headline */
    &::before {
      content: '';
      position: absolute;
      top: -10%;
      left: 50%;
      transform: translateX(-50%);
      width: min(60%, 720px);
      aspect-ratio: 2 / 1;
      background: radial-gradient(closest-side, color-mix(in srgb, var(--color-pink) 18%, transparent), transparent 70%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 0;
    }
  }

  /* Optional full-bleed faded background image for page-hero.
     Image sits at ~55% visibility; a white wash overlay on top
     keeps headline + subhead legible while leaving the image
     clearly present. */
  .page-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    z-index: -2;
    pointer-events: none;
  }

  .page-hero-has-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.7) 55%,
      rgba(255, 255, 255, 0.9) 100%
    );
    z-index: -1;
    pointer-events: none;
  }

  .page-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 56rem;
  }

  .page-hero-eyebrow {
    margin: 0 0 1.25rem;
  }

  .page-hero-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 1.25rem;

    & strong,
    & em {
      font-style: italic;
      font-weight: inherit;
      color: var(--color-pink);
    }
  }

  .page-hero-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    max-width: 44rem;
    margin: 0 auto;
  }

  .page-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
  }

  .page-hero-chip {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    background: var(--color-slate-subtle);
    color: var(--color-text);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .page-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .page-hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.75rem;
    background: var(--color-pink);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 14px 32px color-mix(in srgb, var(--color-pink) 35%, transparent);
    transition:
      background-color var(--transition-base),
      transform var(--transition-base),
      box-shadow var(--transition-base);

    & .bi {
      transition: transform var(--transition-base);
    }

    &:hover,
    &:focus-visible {
      background: var(--color-pink-hover);
      color: var(--color-white);
      transform: translateY(-1px);
      box-shadow: 0 18px 40px color-mix(in srgb, var(--color-pink) 45%, transparent);

      & .bi {
        transform: translateX(3px);
      }
    }
  }

  .page-hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition:
      background-color var(--transition-base),
      color var(--transition-base);

    &:hover,
    &:focus-visible {
      background: var(--color-black);
      color: var(--color-white);
    }
  }

  /* Dark-section variant — when a page-hero appears inside .section-dark */
  .section-dark .page-hero-cta-secondary {
    color: var(--color-white);
    border-color: var(--color-white);

    &:hover,
    &:focus-visible {
      background: var(--color-white);
      color: var(--color-black);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .page-hero-inner > * {
      opacity: 0;
      transform: translateY(10px);
      animation: page-hero-rise 550ms var(--transition-slow) forwards;
    }
    .page-hero-inner > *:nth-child(1) { animation-delay: 0ms; }
    .page-hero-inner > *:nth-child(2) { animation-delay: 70ms; }
    .page-hero-inner > *:nth-child(3) { animation-delay: 140ms; }
    .page-hero-inner > *:nth-child(4) { animation-delay: 210ms; }
    .page-hero-inner > *:nth-child(5) { animation-delay: 280ms; }
  }

  @keyframes page-hero-rise {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Services grid — sections/services-grid
     Bento-style 3-up card grid. Asymmetric: first card spans 2 cols
     on wide viewports. Pink underline animates under the link on
     card hover. Used on home + /services overview.
     ────────────────────────────────────────────────────────────── */
  .services-section {
    container-type: inline-size;
  }

  .services-grid-header {
    max-width: 48rem;
    margin: 0 0 var(--space-xl);

    & .eyebrow {
      margin: 0 0 0.75rem;
    }
  }

  .services-grid-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .services-grid-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 42rem;
  }

  .services-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    @media (min-width: 1100px) {
      grid-template-columns: 1.4fr 1fr 1fr;

      & > .service-card:first-child {
        grid-row: span 1;
      }
    }
  }

  .service-card {
    --service-card-border: var(--color-line);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    background: var(--color-white);
    border: 1px solid var(--service-card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    transition:
      border-color var(--transition-base),
      transform var(--transition-base),
      box-shadow var(--transition-base);

    &::before {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 2px;
      background: var(--color-pink);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--transition-slow);
      z-index: 1;
    }

    &:hover,
    &:focus-within {
      border-color: color-mix(in srgb, var(--color-pink) 35%, var(--color-line));
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);

      &::before {
        transform: scaleX(1);
      }

      & .service-card-icon {
        background: var(--color-pink);
        color: var(--color-white);
        border-color: var(--color-pink);
      }

      & .service-card-link .bi {
        transform: translateX(4px);
      }

      & .service-card-link-text::after {
        transform: scaleX(1);
      }
    }
  }

  .section-alt .service-card {
    background: var(--color-white);
  }

  .service-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--color-cream);
    color: var(--color-black);
    border: 1px solid var(--color-line);
    font-size: 1.35rem;
    transition:
      background-color var(--transition-base),
      color var(--transition-base),
      border-color var(--transition-base);
  }

  .service-card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 1.6vw, 1.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: 0.25rem 0 0;
  }

  .service-card-description {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    flex: 1 1 auto;
  }

  .service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin-top: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--color-black);
    text-decoration: none;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    & .bi {
      transition: transform var(--transition-base);
      position: relative;
      z-index: 2;
    }
  }

  .service-card-link-text {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding-bottom: 2px;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1.5px;
      background: var(--color-pink);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--transition-base);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .service-card,
    .service-card::before,
    .service-card-icon,
    .service-card-link .bi,
    .service-card-link-text::after {
      transition: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Industries grid — sections/industries-grid
     3 equal industry cards. Dark variant when used on home (cream
     alt section makes cards white; dark section makes cards black).
     Pink accent bar slides in from left on hover.
     Used on home + /industries overview.
     ────────────────────────────────────────────────────────────── */
  .industries-grid-header {
    max-width: 48rem;
    margin: 0 0 var(--space-xl);

    & .eyebrow {
      margin: 0 0 0.75rem;
    }
  }

  .industries-grid-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .industries-grid-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 42rem;
  }

  .industries-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;

    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
  }

  .industry-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    transition:
      border-color var(--transition-base),
      transform var(--transition-base),
      box-shadow var(--transition-base);

    &::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: var(--color-pink);
      transform: scaleY(0);
      transform-origin: top center;
      transition: transform var(--transition-slow);
      z-index: 1;
    }

    &:hover,
    &:focus-within {
      border-color: color-mix(in srgb, var(--color-pink) 35%, var(--color-line));
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);

      &::before {
        transform: scaleY(1);
      }

      & .industry-card-icon {
        background: var(--color-pink);
        color: var(--color-white);
        border-color: var(--color-pink);
      }

      & .industry-card-link .bi {
        transform: translateX(4px);
      }

      & .industry-card-link-text::after {
        transform: scaleX(1);
      }
    }
  }

  .industry-card-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .industry-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: var(--color-cream);
    color: var(--color-black);
    border: 1px solid var(--color-line);
    font-size: 1.25rem;
    transition:
      background-color var(--transition-base),
      color var(--transition-base),
      border-color var(--transition-base);
  }

  .industry-card-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: 0;
  }

  .industry-card-headline {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    flex: 1 1 auto;
  }

  .industry-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin-top: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--color-black);
    text-decoration: none;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    & .bi {
      position: relative;
      z-index: 2;
      transition: transform var(--transition-base);
    }
  }

  .industry-card-link-text {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding-bottom: 2px;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1.5px;
      background: var(--color-pink);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--transition-base);
    }
  }

  /* Dark-section variant — white text, translucent card */
  .section-dark .industry-card {
    background: color-mix(in srgb, var(--color-white) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 12%, transparent);

    & .industry-card-name {
      color: var(--color-white);
    }

    & .industry-card-headline {
      color: color-mix(in srgb, var(--color-white) 75%, transparent);
    }

    & .industry-card-link {
      color: var(--color-white);
    }

    & .industry-card-icon {
      background: color-mix(in srgb, var(--color-white) 8%, transparent);
      color: var(--color-white);
      border-color: color-mix(in srgb, var(--color-white) 15%, transparent);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .industry-card,
    .industry-card::before,
    .industry-card-icon,
    .industry-card-link .bi,
    .industry-card-link-text::after {
      transition: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Dashboard showcase — sections/dashboard-showcase
     Full-width black section with diagonal bottom clip-path.
     Centered eyebrow + white headline + muted subheadline +
     large dashboard image floating above a pink/slate glow.
     Used on home + KPI Dashboards service + all 3 industry pages.
     ────────────────────────────────────────────────────────────── */
  .dashboard-showcase {
    position: relative;
    background: var(--color-bg-dark);
    color: var(--color-white);
    padding-block: clamp(5rem, 10vw, var(--space-3xl));
    padding-bottom: clamp(7rem, 13vw, calc(var(--space-3xl) + 3rem));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
    overflow: hidden;
  }

  .dashboard-showcase-inner {
    position: relative;
    z-index: 2;
  }

  .dashboard-showcase-header {
    max-width: 48rem;
    margin: 0 auto var(--space-xl);
    text-align: center;
  }

  .dashboard-showcase-eyebrow {
    color: var(--color-pink);
    margin: 0 0 0.9rem;
    justify-content: center;
  }

  /* The eyebrow pink underline (from theme layer) needs to stay pink on dark */
  .dashboard-showcase-eyebrow::after {
    background: var(--color-pink);
  }

  .dashboard-showcase-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.1rem, 4.5vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--color-white);
    margin: 0 0 1rem;
  }

  .dashboard-showcase-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    line-height: var(--line-height-body);
    color: color-mix(in srgb, var(--color-white) 75%, transparent);
    margin: 0 auto;
    max-width: 46rem;
  }

  .dashboard-showcase-figure {
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
    padding: 0;
  }

  /* Device mockup — iPad/tablet-style dark bezel wrapping a dashboard screenshot. */
  .device-mockup {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    padding: clamp(10px, 1.5vw, 18px);
    border-radius: clamp(14px, 2vw, 22px);
    background: linear-gradient(145deg, #2a2a2a 0%, #141414 100%);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06) inset,
      0 30px 60px rgba(0, 0, 0, 0.45),
      0 8px 20px rgba(0, 0, 0, 0.3);
  }

  /* Front-facing camera dot on the top bezel */
  .device-mockup::before {
    content: '';
    position: absolute;
    top: clamp(4px, 0.6vw, 7px);
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #050505;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .device-mockup-screen {
    display: block;
    width: 100%;
    height: auto;
    border-radius: clamp(4px, 0.8vw, 8px);
    background: #fff;

    padding:2rem;
  }

  .dashboard-showcase-glow {
    position: absolute;
    left: 50%;
    bottom: -10%;
    width: 70%;
    height: 55%;
    transform: translateX(-50%);
    background: radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--color-pink) 45%, transparent) 0%,
      color-mix(in srgb, var(--color-slate) 20%, transparent) 45%,
      transparent 75%
    );
    filter: blur(60px);
    z-index: 1;
    pointer-events: none;
  }

  /* ──────────────────────────────────────────────────────────────
     Split content — sections/split-content
     50/50 image + rich-HTML. Reversible with .split-reverse.
     Image gets a pink accent corner (bottom-right bracket). Rich
     body HTML inherits tokens via .split-body descendants.
     Used on home (about teaser), /about, and /services/advisory.
     ────────────────────────────────────────────────────────────── */
  .split-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;

    @media (min-width: 900px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .split-reverse .split-inner {
    @media (min-width: 900px) {
      & .split-media { order: 2; }
      & .split-copy  { order: 1; }
    }
  }

  .split-media {
    position: relative;
    isolation: isolate;
  }

  .split-image,
  .split-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 2;
  }

  .split-corner {
    position: absolute;
    right: -14px;
    bottom: -14px;
    width: 64px;
    height: 64px;
    border-right: 3px solid var(--color-pink);
    border-bottom: 3px solid var(--color-pink);
    border-bottom-right-radius: var(--radius-lg);
    z-index: 1;
    pointer-events: none;

    @media (min-width: 900px) {
      width: 96px;
      height: 96px;
      right: -20px;
      bottom: -20px;
    }
  }

  .split-reverse .split-corner {
    right: auto;
    left: -14px;
    border-right: 0;
    border-left: 3px solid var(--color-pink);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--radius-lg);

    @media (min-width: 900px) {
      left: -20px;
    }
  }

  .split-copy {
    & .eyebrow {
      margin: 0 0 0.9rem;
    }
  }

  .split-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.8vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 1.25rem;
  }

  .split-body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: var(--line-height-body);
    color: var(--color-text);
    max-width: 36rem;

    & > p {
      margin: 0 0 1rem;
    }

    & > p:last-child {
      margin-bottom: 0;
    }

    & a {
      color: var(--color-black);
      text-decoration: underline;
      text-decoration-color: var(--color-pink);
      text-underline-offset: 3px;
      text-decoration-thickness: 1.5px;
      transition: text-decoration-color var(--transition-base);

      &:hover {
        text-decoration-color: var(--color-pink-hover);
      }
    }

    & strong {
      color: var(--color-heading);
      font-weight: 600;
    }

    & ul {
      list-style: none;
      margin: 0 0 1rem;
      padding: 0;

      & li {
        position: relative;
        padding-left: 1.5rem;
        margin-bottom: 0.5rem;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0.65em;
          width: 8px;
          height: 8px;
          background: var(--color-pink);
          border-radius: var(--radius-full);
        }
      }
    }
  }

  .split-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.75rem;
    padding: 0.9rem 1.6rem;
    background: var(--color-black);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition:
      background-color var(--transition-base),
      transform var(--transition-base);

    & .bi {
      transition: transform var(--transition-base);
    }

    &:hover,
    &:focus-visible {
      background: var(--color-primary-hover);
      color: var(--color-white);
      transform: translateY(-1px);

      & .bi {
        transform: translateX(3px);
      }
    }
  }

  .section-dark .split-headline,
  .section-dark .split-body,
  .section-dark .split-body strong {
    color: var(--color-white);
  }

  .section-dark .split-body {
    color: color-mix(in srgb, var(--color-white) 82%, transparent);
  }

  .section-dark .split-cta {
    background: var(--color-pink);

    &:hover,
    &:focus-visible {
      background: var(--color-pink-hover);
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Integrations bar — sections/integrations-bar
     7-logo horizontal strip. Grayscale + dimmed by default, color
     + full opacity on hover. Logo caption (brand name) shown below
     for screen readers / tooltip clarity. Wraps gracefully on mobile.
     ────────────────────────────────────────────────────────────── */
  .integrations-bar-header {
    max-width: 48rem;
    margin: 0 auto var(--space-xl);
    text-align: center;

    & .eyebrow {
      margin: 0 0 0.75rem;
      justify-content: center;
    }
  }

  .integrations-bar-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .integrations-bar-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0 auto;
    max-width: 40rem;
  }

  .integrations-bar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
  }

  .integration-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
  }

  .integration-logo {
    display: block;
    height: clamp(44px, 6vw, 64px);
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.55);
    transition:
      filter var(--transition-base),
      transform var(--transition-base);
  }

  .integration-item:hover .integration-logo,
  .integration-item:focus-within .integration-logo {
    filter: grayscale(0%) opacity(1);
    transform: translateY(-2px);
  }

  .integration-name {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity var(--transition-base),
      transform var(--transition-base);
  }

  .integration-item:hover .integration-name,
  .integration-item:focus-within .integration-name {
    opacity: 1;
    transform: translateY(0);
  }

  /* Dark-section variant — invert logos */
  .section-dark .integration-logo {
    filter: grayscale(100%) brightness(0) invert(1) opacity(0.6);
  }

  .section-dark .integration-item:hover .integration-logo,
  .section-dark .integration-item:focus-within .integration-logo {
    filter: grayscale(100%) brightness(0) invert(1) opacity(1);
  }

  .section-dark .integration-name {
    color: color-mix(in srgb, var(--color-white) 75%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    .integration-logo,
    .integration-name {
      transition: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Testimonials carousel — sections/testimonials-carousel
     Uses yg-carousel JS (data-yg-carousel + 5000ms autoplay + loop).
     Each slide: large serif quote, pink decorative quote-mark via
     ::before, author name, role/company. Dots below slider.
     Placeholder quotes pass through with their "TODO: ..." text —
     QC forbidden-word list exempts testimonial blockquotes.
     ────────────────────────────────────────────────────────────── */
  .testimonials-header {
    max-width: 48rem;
    margin: 0 auto var(--space-xl);
    text-align: center;

    & .eyebrow {
      margin: 0 0 0.75rem;
      justify-content: center;
    }
  }

  .testimonials-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0;
  }

  .testimonials-carousel {
    position: relative;
    max-width: 58rem;
    margin: 0 auto;
    padding-inline: clamp(0rem, 3vw, 3.5rem);
  }

  .testimonial-slide {
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  }

  .testimonial-quote {
    position: relative;
    margin: 0;
    padding: 0;
    text-align: center;

    &::before {
      content: "\201C"; /* left double quote */
      position: absolute;
      top: -2.75rem;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--font-display);
      font-size: clamp(5rem, 10vw, 7rem);
      line-height: 1;
      color: var(--color-pink);
      pointer-events: none;
    }
  }

  .testimonial-quote-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.25rem, 2.1vw, 1.65rem);
    line-height: 1.45;
    color: var(--color-heading);
    margin: 0 0 1.75rem;
    max-width: 48rem;
    margin-inline: auto;
  }

  .testimonial-author {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-style: normal;
  }

  .testimonial-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-pink);
  }

  .testimonial-meta {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .testimonial-name {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-heading);
    font-style: normal;
  }

  .testimonial-role {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
  }

  /* Prev/Next arrows */
  .testimonials-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    font-size: 1.15rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition:
      background-color var(--transition-base),
      color var(--transition-base),
      border-color var(--transition-base),
      transform var(--transition-base);
    z-index: 3;

    &:hover,
    &:focus-visible {
      background: var(--color-pink);
      color: var(--color-white);
      border-color: var(--color-pink);
      transform: translateY(-50%) scale(1.05);
    }
  }

  .testimonials-btn-prev { left: 0; }
  .testimonials-btn-next { right: 0; }

  @media (max-width: 640px) {
    .testimonials-btn {
      width: 38px;
      height: 38px;
    }
  }

  /* Dots */
  .testimonials-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.25rem;

    & .yg-carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: var(--radius-full);
      background: color-mix(in srgb, var(--color-black) 18%, transparent);
      transition:
        background-color var(--transition-base),
        width var(--transition-base);

      &.is-active {
        background: var(--color-pink);
        width: 24px;
      }

      &:hover {
        background: color-mix(in srgb, var(--color-pink) 50%, var(--color-black));
      }
    }
  }

  /* Section-alt variant — dots need more contrast on cream */
  .section-alt .testimonials-dots .yg-carousel-dot {
    background: color-mix(in srgb, var(--color-black) 25%, transparent);
  }

  /* Dark-section variant */
  .section-dark .testimonial-quote-text,
  .section-dark .testimonial-name {
    color: var(--color-white);
  }

  .section-dark .testimonial-role {
    color: color-mix(in srgb, var(--color-white) 70%, transparent);
  }

  .section-dark .testimonials-btn {
    background: color-mix(in srgb, var(--color-white) 8%, transparent);
    color: var(--color-white);
    border-color: color-mix(in srgb, var(--color-white) 20%, transparent);

    &:hover,
    &:focus-visible {
      background: var(--color-pink);
      border-color: var(--color-pink);
    }
  }

  .section-dark .testimonials-dots .yg-carousel-dot {
    background: color-mix(in srgb, var(--color-white) 25%, transparent);

    &.is-active {
      background: var(--color-pink);
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Industry bottleneck list — sections/industry-bottleneck-list
     Numbered-style rows with a pink indicator dot per row.
     Left column: indicator + title.  Right column: two labeled
     paragraphs — "What's happening" (muted) + "How dashboards
     help" (emphasized, pink label).
     Used on the 3 industry detail pages.
     ────────────────────────────────────────────────────────────── */
    
     .industry-bottleneck-section{
      margin-top:-5vw;
     }
  .bottleneck-header {
    max-width: 48rem;
    margin: 0 0 var(--space-xl);

    & .eyebrow {
      margin: 0 0 0.75rem;
    }
  }

  .bottleneck-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .bottleneck-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 42rem;
  }

  .bottleneck-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: bottleneck;
    display: grid;
    gap: 1.25rem;
  }

  .bottleneck-row {
    counter-increment: bottleneck;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    position: relative;
    transition:
      border-color var(--transition-base),
      box-shadow var(--transition-base);

    @media (min-width: 900px) {
      grid-template-columns: minmax(14rem, 1fr) 2fr;
      gap: 2.5rem;
      align-items: start;
    }

    &:hover {
      border-color: color-mix(in srgb, var(--color-pink) 30%, var(--color-line));
      box-shadow: var(--shadow-sm);
    }
  }

  .bottleneck-title-col {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
  }

  .bottleneck-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--color-cream);
    border: 1px solid var(--color-pink);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1rem;
    color: var(--color-pink);

    &::before {
      content: counter(bottleneck, decimal-leading-zero);
    }
  }

  .bottleneck-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: 0.35rem 0 0;
  }

  .bottleneck-detail-col {
    display: grid;
    gap: 1.25rem;

    @media (min-width: 600px) {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
  }

  .bottleneck-pair {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .bottleneck-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
  }

  .bottleneck-label-solution {
    color: var(--color-pink);
  }

  .bottleneck-text {
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: var(--line-height-body);
    color: var(--color-text);
    margin: 0;
  }

  .bottleneck-text-problem {
    color: var(--color-text-muted);
  }

  /* Dark-section variant */
  .section-dark .bottleneck-row {
    background: color-mix(in srgb, var(--color-white) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 12%, transparent);
  }

  .section-dark .bottleneck-title,
  .section-dark .bottleneck-text {
    color: var(--color-white);
  }

  .section-dark .bottleneck-text-problem,
  .section-dark .bottleneck-label {
    color: color-mix(in srgb, var(--color-white) 72%, transparent);
  }

  .section-dark .bottleneck-label-solution {
    color: var(--color-pink);
  }

  .section-dark .bottleneck-indicator {
    background: color-mix(in srgb, var(--color-white) 8%, transparent);
    border-color: var(--color-pink);
  }

  /* ──────────────────────────────────────────────────────────────
     KPI list — sections/kpi-list
     Grid of pill-shaped metric chips. Accepts either an array of
     strings (renders default check icon) or objects with {icon, label}.
     Used on 3 industry pages + KPI Dashboards service page.
     ────────────────────────────────────────────────────────────── */
  .kpi-list-header {
    max-width: 48rem;
    margin: 0 0 var(--space-xl);

    & .eyebrow {
      margin: 0 0 0.75rem;
    }
  }

  .kpi-list-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .kpi-list-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 42rem;
  }

  .kpi-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;

    @media (min-width: 600px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.85rem;
    }

    @media (min-width: 900px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .kpi-chip {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    transition:
      border-color var(--transition-base),
      background-color var(--transition-base),
      transform var(--transition-base);

    &:hover {
      border-color: color-mix(in srgb, var(--color-pink) 40%, var(--color-line));
      background: var(--color-pink-subtle);
      transform: translateY(-1px);
    }
  }

  .kpi-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-full);
    background: var(--color-cream);
    color: var(--color-pink);
    font-size: 0.95rem;
  }

  .kpi-chip-label {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text);
  }

  /* Section-alt variant — chips switch to white-on-cream */
  .section-alt .kpi-chip {
    background: var(--color-white);
  }

  /* Dark-section variant */
  .section-dark .kpi-chip {
    background: color-mix(in srgb, var(--color-white) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 12%, transparent);

    &:hover {
      background: color-mix(in srgb, var(--color-pink) 18%, transparent);
      border-color: color-mix(in srgb, var(--color-pink) 50%, transparent);
    }
  }

  .section-dark .kpi-chip-label {
    color: var(--color-white);
  }

  .section-dark .kpi-chip-icon {
    background: color-mix(in srgb, var(--color-white) 10%, transparent);
    color: var(--color-pink);
  }

  /* ──────────────────────────────────────────────────────────────
     Service stack — sections/service-stack
     Stacked numbered cards for the Bookkeeping services detail page.
     Each card: large serif number in left rail, title + tagline +
     feature list (pink check icons) + italic "Best for" footnote.
     ────────────────────────────────────────────────────────────── */
  .service-stack-header {
    max-width: 48rem;
    margin: 0 0 var(--space-xl);

    & .eyebrow {
      margin: 0 0 0.75rem;
    }
  }

  .service-stack-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .service-stack-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 42rem;
  }

  .service-stack {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
  }

  .service-stack-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    position: relative;
    transition:
      border-color var(--transition-base),
      box-shadow var(--transition-base);

    @media (min-width: 720px) {
      grid-template-columns: minmax(5.5rem, 7rem) 1fr;
      gap: 2.25rem;
      align-items: start;
    }

    &:hover {
      border-color: color-mix(in srgb, var(--color-pink) 30%, var(--color-line));
      box-shadow: var(--shadow-sm);
    }
  }

  .service-stack-number-col {
    display: flex;
    align-items: flex-start;
  }

  .service-stack-number {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-pink);
    display: inline-block;
  }

  .service-stack-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .service-stack-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: 0;
  }

  .service-stack-tagline {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: var(--line-height-body);
    color: var(--color-text);
    margin: 0;
  }

  .service-stack-features {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
  }

  .service-stack-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.65rem;
    font-family: var(--font-body);
    font-size: 0.98rem;
    line-height: var(--line-height-body);
    color: var(--color-text);
  }

  .service-stack-feature-icon {
    color: var(--color-pink);
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .service-stack-best-for {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.95rem;
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0.35rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-line);
  }

  .service-stack-best-for-label {
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
    color: var(--color-pink);
    margin-right: 0.35rem;
  }

  /* Section-alt variant — cards switch to cream-on-white for contrast */
  .section-alt .service-stack-card {
    background: var(--color-white);
  }

  /* Dark-section variant */
  .section-dark .service-stack-card {
    background: color-mix(in srgb, var(--color-white) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 12%, transparent);
  }

  .section-dark .service-stack-title,
  .section-dark .service-stack-tagline,
  .section-dark .service-stack-feature {
    color: var(--color-white);
  }

  .section-dark .service-stack-best-for {
    color: color-mix(in srgb, var(--color-white) 72%, transparent);
    border-top-color: color-mix(in srgb, var(--color-white) 14%, transparent);
  }

  /* ──────────────────────────────────────────────────────────────
     FAQ section — sections/faq-section
     Single-open accordion with grid-template-rows open/close
     animation. Pink plus-icon rotates to a minus on is-open.
     No page currently uses this; kept adapted for future use.
     ────────────────────────────────────────────────────────────── */
  .faq-section-header {
    max-width: 48rem;
    margin: 0 0 var(--space-xl);

    & .eyebrow {
      margin: 0 0 0.75rem;
    }
  }

  .faq-section-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .faq-section-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 42rem;
  }

  .faq-list {
    display: grid;
    gap: 0.75rem;
  }

  .faq-list .accordion-item {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-base);

    &.is-open {
      border-color: color-mix(in srgb, var(--color-pink) 40%, var(--color-line));
    }
  }

  .faq-list .accordion-trigger {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: clamp(1.1rem, 1.8vw, 1.35rem) clamp(1.25rem, 2.5vw, 1.75rem);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
    line-height: 1.35;
    color: var(--color-heading);
    text-align: left;
    cursor: pointer;
    transition: color var(--transition-base);

    &:hover {
      color: var(--color-pink);
    }

    &:focus-visible {
      outline: 2px solid var(--color-pink);
      outline-offset: -2px;
    }
  }

  .faq-list .accordion-trigger-text {
    display: block;
  }

  .faq-list .accordion-icon {
    width: 1.25rem;
    height: 1.25rem;
    position: relative;
    flex-shrink: 0;

    &::before,
    &::after {
      content: '';
      position: absolute;
      background: var(--color-pink);
      border-radius: 1px;
      transition: transform var(--transition-base);
    }

    &::before {
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      transform: translateY(-50%);
    }

    &::after {
      top: 0;
      left: 50%;
      width: 2px;
      height: 100%;
      transform: translateX(-50%);
    }
  }

  .faq-list .accordion-item.is-open .accordion-icon::after {
    transform: translateX(-50%) scaleY(0);
  }

  .faq-list .accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-base);
  }

  .faq-list .accordion-item.is-open .accordion-panel {
    grid-template-rows: 1fr;
  }

  .faq-list .accordion-content {
    overflow: hidden;
    min-height: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--color-text);
    padding:0 1rem;

    & > * {
      padding-inline: clamp(1.25rem, 2.5vw, 1.75rem);
    }

    & > *:first-child {
      padding-top: 0.25rem;
    }

    & > *:last-child {
      padding-bottom: clamp(1.1rem, 1.8vw, 1.35rem);
    }

    & p {
      margin: 0 0 0.75rem;
    }

    & p:last-child {
      margin-bottom: 0;
    }

    & a {
      color: var(--color-pink);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-list .accordion-panel,
    .faq-list .accordion-icon::before,
    .faq-list .accordion-icon::after {
      transition: none;
    }
  }

  /* Dark-section variant */
  .section-dark .faq-list .accordion-item {
    background: color-mix(in srgb, var(--color-white) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 12%, transparent);

    &.is-open {
      border-color: color-mix(in srgb, var(--color-pink) 55%, transparent);
    }
  }

  .section-dark .faq-list .accordion-trigger {
    color: var(--color-white);
  }

  .section-dark .faq-list .accordion-content {
    color: color-mix(in srgb, var(--color-white) 82%, transparent);
  }

  /* FAQ category — full FAQ page. Two-column editorial layout with
     sticky category intros on desktop, using the shared accordion cards. */
  .faq-category-layout {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;

    @media (min-width: 940px) {
      grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.35fr);
    }
  }

  .faq-category-intro {
    @media (min-width: 940px) {
      position: sticky;
      top: 7rem;
    }
  }

  .faq-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.1rem;
    border-radius: var(--radius-md);
    background: var(--color-cream);
    border: 1px solid var(--color-line);
    color: var(--color-black);
    font-size: 1.45rem;
    box-shadow: var(--shadow-sm);
  }

  .faq-category-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.9rem;
  }

  .faq-category-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    max-width: 30rem;
    margin: 0;
  }

  .faq-category-questions {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      inset: -1.25rem;
      border-radius: calc(var(--radius-lg) + 1rem);
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-pink) 8%, transparent),
        color-mix(in srgb, var(--color-slate) 5%, transparent));
      z-index: -1;
      pointer-events: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     CTA banner — sections/cta-banner
     Full-bleed charcoal section with a diagonal top edge cut.
     Pink eyebrow, serif headline, Montserrat body, pink pill
     primary CTA + optional secondary inline link.
     Used on every terminal page to funnel to Discovery Call.
     ────────────────────────────────────────────────────────────── */
  .cta-banner {
    position: relative;
    background: var(--color-bg-dark);
    color: var(--color-white);
    padding-block: calc(var(--space-3xl) + 3vw) var(--space-3xl);
    margin-top: -5vw;
    clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 100%);
  }

  .cta-banner-inner {
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .cta-banner-eyebrow {
    color: var(--color-pink);
    margin: 0;

    &::after {
      background: var(--color-pink);
    }
  }

  .cta-banner-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-white);
    margin: 0;
  }

  .cta-banner-body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.25vw, 1.125rem);
    line-height: var(--line-height-body);
    color: color-mix(in srgb, var(--color-white) 82%, transparent);
    margin: 0;
    max-width: 38rem;
    margin-inline: auto;
  }

  .cta-banner-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.25rem 1.75rem;
    margin-top: 0.5rem;
  }

  .cta-banner-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.85rem;
    background: var(--color-pink);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    white-space: nowrap;
    transition:
      background-color var(--transition-fast),
      transform var(--transition-fast),
      box-shadow var(--transition-fast);

    &:hover {
      background: var(--color-pink-hover);
      color: var(--color-white);
      transform: translateY(-1px);
      box-shadow: 0 10px 24px color-mix(in srgb, var(--color-pink) 40%, transparent);
    }

    & .bi-arrow-right {
      font-size: 0.9rem;
      transition: transform var(--transition-fast);
    }

    &:hover .bi-arrow-right {
      transform: translateX(3px);
    }
  }

  .cta-banner-secondary {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--color-white);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-white) 40%, transparent);
    padding-bottom: 2px;
    transition:
      color var(--transition-fast),
      border-color var(--transition-fast);

    &:hover {
      color: var(--color-pink);
      border-bottom-color: var(--color-pink);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cta-banner-primary,
    .cta-banner-primary .bi-arrow-right {
      transition: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Values grid — sections/values-grid
     3-column grid of brand values. Each card: circular icon tile
     (cream bg, pink icon), serif title, Montserrat body.
     Used on the About page (Reliable / Detailed / Personable).
     ────────────────────────────────────────────────────────────── */
  .values-grid-header {
    max-width: 48rem;
    margin: 0 0 var(--space-xl);

    & .eyebrow {
      margin: 0 0 0.75rem;
    }
  }

  .values-grid-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .values-grid-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 42rem;
  }

  .values-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;

    @media (min-width: 700px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    @media (min-width: 960px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
  }

  .value-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    transition:
      border-color var(--transition-base),
      box-shadow var(--transition-base),
      transform var(--transition-base);

    &:hover {
      border-color: color-mix(in srgb, var(--color-pink) 30%, var(--color-line));
      box-shadow: var(--shadow-sm);
      transform: translateY(-2px);
    }
  }

  .value-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: var(--color-cream);
    color: var(--color-pink);
    font-size: 1.35rem;
  }

  .value-card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: 0;
  }

  .value-card-body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--color-text);
    margin: 0;
  }

  /* Section-alt variant — cards keep white for contrast against cream bg */
  .section-alt .value-card {
    background: var(--color-white);
  }

  .section-alt .value-card-icon {
    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-pink) 25%, var(--color-line));
  }

  /* Dark-section variant */
  .section-dark .value-card {
    background: color-mix(in srgb, var(--color-white) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 12%, transparent);
  }

  .section-dark .value-card-title,
  .section-dark .value-card-body {
    color: var(--color-white);
  }

  .section-dark .value-card-icon {
    background: color-mix(in srgb, var(--color-white) 10%, transparent);
    color: var(--color-pink);
  }

  @media (prefers-reduced-motion: reduce) {
    .value-card {
      transition: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Contact info block — sections/contact-info-block
     Three-column card grid for phone / email / mailing.
     Circular cream icon tile with pink bi-icon. Optional meta
     line beneath mailing for service-area copy.
     ────────────────────────────────────────────────────────────── */
  .contact-info-header {
    max-width: 48rem;
    margin: 0 0 var(--space-xl);

    & .eyebrow {
      margin: 0 0 0.75rem;
    }
  }

  .contact-info-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .contact-info-subheadline {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 42rem;
  }

  .contact-info-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;

    @media (min-width: 700px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    @media (min-width: 960px) {
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
  }

  .contact-info-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    transition:
      border-color var(--transition-base),
      box-shadow var(--transition-base);

    &:hover {
      border-color: color-mix(in srgb, var(--color-pink) 30%, var(--color-line));
      box-shadow: var(--shadow-sm);
    }
  }

  .contact-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background: var(--color-cream);
    color: var(--color-pink);
    font-size: 1.2rem;
    margin-bottom: 0.35rem;
  }

  .contact-info-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
  }

  .contact-info-value {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--color-heading);
    margin: 0;

    & a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition:
        color var(--transition-fast),
        border-color var(--transition-fast);

      &:hover {
        color: var(--color-pink);
        border-bottom-color: var(--color-pink);
      }
    }
  }

  .contact-info-meta {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0.25rem 0 0;
  }

  /* Section-alt variant — swap icon tile to white-on-cream */
  .section-alt .contact-info-icon {
    background: var(--color-white);
    border: 1px solid color-mix(in srgb, var(--color-pink) 25%, var(--color-line));
  }

  /* Dark-section variant */
  .section-dark .contact-info-card {
    background: color-mix(in srgb, var(--color-white) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 12%, transparent);
  }

  .section-dark .contact-info-value {
    color: var(--color-white);
  }

  .section-dark .contact-info-meta {
    color: color-mix(in srgb, var(--color-white) 70%, transparent);
  }

  .section-dark .contact-info-icon {
    background: color-mix(in srgb, var(--color-white) 10%, transparent);
    color: var(--color-pink);
  }

  /* ──────────────────────────────────────────────────────────────
     Forms — shared base (yg-form-*)
     Semantic labels above inputs, charcoal focus ring via
     color-mix, pink primary submit pill. Used by contact form,
     newsletter form, lead magnet, discovery questionnaire.
     ────────────────────────────────────────────────────────────── */
  .yg-form {
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .yg-form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .yg-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 1.5rem;

    @media (min-width: 640px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .yg-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }

  .yg-form-field-wide {
    @media (min-width: 640px) {
      grid-column: 1 / -1;
    }
  }

  .yg-form-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--color-heading);
  }

  .yg-form-required {
    color: var(--color-pink);
    margin-left: 0.1rem;
  }

  .yg-form-optional {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.78rem;
    margin-left: 0.25rem;
  }

  .yg-form-input {
    appearance: none;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    width: 100%;
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      background-color var(--transition-fast);

    &::placeholder {
      color: color-mix(in srgb, var(--color-text-muted) 80%, transparent);
    }

    &:hover {
      border-color: color-mix(in srgb, var(--color-black) 25%, var(--color-line));
    }

    &:focus-visible {
      outline: none;
      border-color: var(--color-black);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-pink) 30%, transparent);
    }

    &:disabled {
      background: var(--color-cream);
      color: var(--color-text-muted);
      cursor: not-allowed;
    }

    &:user-invalid {
      border-color: color-mix(in srgb, var(--color-pink) 70%, var(--color-line));
    }
  }

  .yg-form-textarea {
    min-height: 8rem;
    resize: vertical;
  }

  select.yg-form-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
  }

  .yg-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
  }

  .yg-form-submit {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 1rem 1.85rem;
    background: var(--color-pink);
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition:
      background-color var(--transition-fast),
      transform var(--transition-fast),
      box-shadow var(--transition-fast);

    &:hover {
      background: var(--color-pink-hover);
      transform: translateY(-1px);
      box-shadow: 0 10px 24px color-mix(in srgb, var(--color-pink) 40%, transparent);
    }

    &:focus-visible {
      outline: 2px solid var(--color-black);
      outline-offset: 3px;
    }

    & .bi-arrow-right {
      font-size: 0.9rem;
      transition: transform var(--transition-fast);
    }

    &:hover .bi-arrow-right {
      transform: translateX(3px);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
  }

  /* Dark-section variant */
  .section-dark .yg-form-label {
    color: var(--color-white);
  }

  .section-dark .yg-form-input {
    background: color-mix(in srgb, var(--color-white) 5%, transparent);
    border-color: color-mix(in srgb, var(--color-white) 20%, transparent);
    color: var(--color-white);

    &::placeholder {
      color: color-mix(in srgb, var(--color-white) 50%, transparent);
    }

    &:focus-visible {
      border-color: var(--color-pink);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-pink) 35%, transparent);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .yg-form-input,
    .yg-form-submit,
    .yg-form-submit .bi-arrow-right {
      transition: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Newsletter form — compact inline variant for footer.
     Name + email + submit sit on one row on wide screens, stack
     below 640px. Uses shared yg-form-* base styles.
     ────────────────────────────────────────────────────────────── */
  .yg-form-newsletter {
    gap: 0.75rem;
    width: 100%;
    max-width: 32rem;
  }

  .yg-form-newsletter-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: stretch;

    @media (min-width: 640px) {
      grid-template-columns: 1fr 1fr auto;
    }

    & .yg-form-input {
      padding: 0.75rem 0.9rem;
      font-size: 0.95rem;
    }
  }

  .yg-form-submit-compact {
    padding: 0.75rem 1.35rem;
    font-size: 0.9rem;
    white-space: nowrap;
    justify-content: center;
  }

  /* ──────────────────────────────────────────────────────────────
     Lead-magnet form — compact variant for the contact page's
     "Grab the Networking One-Sheet" block. Same compact row
     structure as newsletter, with a download icon on the submit
     that nudges down on hover.
     ────────────────────────────────────────────────────────────── */
  .yg-form-lead-magnet {
    gap: 0.75rem;
    width: 100%;
    max-width: 36rem;
  }

  .yg-form-lead-magnet-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: stretch;

    @media (min-width: 720px) {
      grid-template-columns: 1fr 1fr auto;
    }

    & .yg-form-input {
      padding: 0.75rem 0.9rem;
      font-size: 0.95rem;
    }
  }

  .yg-form-lead-magnet .yg-form-submit {
    & .bi-download {
      font-size: 0.95rem;
      transition: transform var(--transition-fast);
    }

    &:hover .bi-download {
      transform: translateY(2px);
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Post card — cards/post-card
     Blog-index card: 4/3 featured image on top, category eyebrow,
     serif title, excerpt, date + read-more arrow in footer.
     Entire card is a single anchor (accessible via aria-labelledby).
     Image zooms slightly and pink accent bar draws across the bottom
     on hover. White surface — readable on both white and cream
     section backgrounds.
     ────────────────────────────────────────────────────────────── */
  .post-card {
    --post-card-border: var(--color-line);
    display: flex;
  }

  .post-card-link {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--post-card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    transition:
      border-color var(--transition-base),
      transform var(--transition-base),
      box-shadow var(--transition-base);

    &::before {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 2px;
      background: var(--color-pink);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--transition-slow);
      z-index: 2;
    }

    &:hover,
    &:focus-visible {
      border-color: color-mix(in srgb, var(--color-pink) 35%, var(--color-line));
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);

      &::before {
        transform: scaleX(1);
      }

      & .post-card-image {
        transform: scale(1.04);
      }

      & .post-card-read-more-text::after {
        transform: scaleX(1);
      }

      & .post-card-read-more .bi {
        transform: translateX(4px);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--color-pink);
      outline-offset: 2px;
    }
  }

  .post-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-cream);
  }

  .post-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
  }

  .post-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    flex: 1 1 auto;
  }

  .post-card-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-pink);
    margin: 0;
  }

  .post-card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 1.8vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: 0;
  }

  .post-card-excerpt {
    font-family: var(--font-body);
    font-size: 0.975rem;
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    flex: 1 1 auto;
  }

  .post-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--color-line);
  }

  .post-card-date {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
  }

  .post-card-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-black);

    & .bi {
      transition: transform var(--transition-base);
    }
  }

  .post-card-read-more-text {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1.5px;
      background: var(--color-pink);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform var(--transition-base);
    }
  }

  /* Cream-section variant — keep card white for contrast */
  .section-alt .post-card-link {
    background: var(--color-white);
  }

  /* Dark-section variant — invert card surface to black with pink accent */
  .section-dark .post-card-link {
    background: color-mix(in srgb, var(--color-white) 4%, var(--color-black));
    border-color: color-mix(in srgb, var(--color-white) 12%, transparent);
    color: var(--color-white);

    & .post-card-title {
      color: var(--color-white);
    }

    & .post-card-excerpt,
    & .post-card-date {
      color: color-mix(in srgb, var(--color-white) 70%, transparent);
    }

    & .post-card-footer {
      border-top-color: color-mix(in srgb, var(--color-white) 12%, transparent);
    }

    & .post-card-read-more {
      color: var(--color-white);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .post-card-link,
    .post-card-link::before,
    .post-card-image,
    .post-card-read-more .bi,
    .post-card-read-more-text::after {
      transition: none;
    }

    .post-card-link:hover .post-card-image,
    .post-card-link:focus-visible .post-card-image {
      transform: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Blog text block — blog/text-block
     Long-form article prose for blog posts. Serif h2/h3/h4 headings
     (DM Serif Display), Montserrat body, max-width 720px, generous
     line-height, justified body with hyphenation. Styles raw HTML
     coming through the `content` prop — headings, paragraphs, lists,
     blockquotes, inline links/emphasis/code, figures, hr.
     ────────────────────────────────────────────────────────────── */
  .blog-text-block {
    padding-block: clamp(2rem, 5vw, 3.5rem);
  }

  .blog-text-block-prose {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2rem);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--color-text);

    & > *:first-child {
      margin-top: 0;
    }

    & > *:last-child {
      margin-bottom: 0;
    }

    & p {
      margin-block: 0 1.35em;
      text-align: justify;
      hyphens: auto;
      -webkit-hyphens: auto;
    }

    & p:has(+ h2),
    & p:has(+ h3),
    & p:has(+ h4) {
      margin-bottom: 0.75em;
    }

    & h2,
    & h3,
    & h4 {
      font-family: var(--font-display);
      font-weight: 400;
      color: var(--color-heading);
      letter-spacing: -0.01em;
      line-height: var(--line-height-heading);
      text-align: left;
    }

    & h2 {
      font-size: clamp(1.65rem, 2.6vw, 2.1rem);
      margin: 2.25em 0 0.6em;
      padding-bottom: 0.4em;
      border-bottom: 1px solid var(--color-line);
    }

    & h3 {
      font-size: clamp(1.35rem, 2vw, 1.6rem);
      margin: 1.9em 0 0.5em;
    }

    & h4 {
      font-size: clamp(1.15rem, 1.6vw, 1.3rem);
      margin: 1.6em 0 0.45em;
    }

    & a {
      color: var(--color-black);
      text-decoration: underline;
      text-decoration-color: var(--color-pink);
      text-decoration-thickness: 1.5px;
      text-underline-offset: 0.22em;
      transition: color var(--transition-fast), text-decoration-color var(--transition-fast);

      &:hover,
      &:focus-visible {
        color: var(--color-pink);
        text-decoration-color: var(--color-pink);
      }
    }

    & strong,
    & b {
      font-weight: 600;
      color: var(--color-heading);
    }

    & em,
    & i {
      font-style: italic;
    }

    & ul,
    & ol {
      margin: 0 0 1.35em;
      padding-left: 1.4em;
    }

    & li {
      margin-bottom: 0.5em;

      & > ul,
      & > ol {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
      }
    }

    & ul > li::marker {
      color: var(--color-pink);
    }

    & ol > li::marker {
      color: var(--color-pink);
      font-family: var(--font-display);
      font-weight: 400;
    }

    & blockquote {
      margin: 1.8em 0;
      padding: 0.25em 0 0.25em 1.5rem;
      border-left: 3px solid var(--color-pink);
      font-family: var(--font-display);
      font-style: italic;
      font-size: clamp(1.15rem, 1.8vw, 1.35rem);
      line-height: 1.5;
      color: var(--color-heading);
      text-align: left;

      & p {
        text-align: left;
        hyphens: manual;
        margin-bottom: 0.6em;
      }

      & cite {
        display: block;
        margin-top: 0.6em;
        font-family: var(--font-body);
        font-style: normal;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--color-text-muted);
        letter-spacing: 0.02em;

        &::before {
          content: "— ";
        }
      }
    }

    & code {
      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
      font-size: 0.92em;
      padding: 0.12em 0.38em;
      background: var(--color-cream);
      border-radius: var(--radius-sm);
      color: var(--color-heading);
    }

    & pre {
      margin: 1.6em 0;
      padding: 1.1rem 1.25rem;
      background: color-mix(in srgb, var(--color-black) 96%, var(--color-slate));
      color: var(--color-white);
      border-radius: var(--radius-md);
      overflow-x: auto;
      font-size: 0.9rem;
      line-height: 1.55;

      & code {
        padding: 0;
        background: transparent;
        color: inherit;
        font-size: inherit;
      }
    }

    & hr {
      margin: 2.5em auto;
      width: 60px;
      border: 0;
      border-top: 2px solid var(--color-pink);
    }

    & img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 1.6em auto;
      border-radius: var(--radius-md);
    }

    & figure {
      margin: 1.8em 0;

      & img {
        margin: 0 auto;
      }

      & figcaption {
        margin-top: 0.7em;
        font-size: 0.875rem;
        color: var(--color-text-muted);
        text-align: center;
        font-style: italic;
      }
    }

    & table {
      width: 100%;
      margin: 1.8em 0;
      border-collapse: collapse;
      font-size: 0.95rem;
    }

    & th,
    & td {
      padding: 0.7em 0.9em;
      text-align: left;
      border-bottom: 1px solid var(--color-line);
    }

    & th {
      font-family: var(--font-body);
      font-weight: 600;
      color: var(--color-heading);
      background: var(--color-cream);
    }
  }

  /* Cream-section variant — inline code tile flips to white for contrast */
  .section-alt .blog-text-block-prose {
    & code {
      background: var(--color-white);
    }

    & th {
      background: var(--color-white);
    }
  }

  /* Dark-section variant — invert prose for legibility on black */
  .section-dark .blog-text-block-prose {
    color: color-mix(in srgb, var(--color-white) 88%, transparent);

    & h2,
    & h3,
    & h4,
    & strong,
    & b {
      color: var(--color-white);
    }

    & h2 {
      border-bottom-color: color-mix(in srgb, var(--color-white) 14%, transparent);
    }

    & a {
      color: var(--color-white);
      text-decoration-color: var(--color-pink);

      &:hover,
      &:focus-visible {
        color: var(--color-pink);
      }
    }

    & blockquote {
      color: var(--color-white);
    }

    & blockquote cite {
      color: color-mix(in srgb, var(--color-white) 65%, transparent);
    }

    & code {
      background: color-mix(in srgb, var(--color-white) 10%, transparent);
      color: var(--color-white);
    }

    & th,
    & td {
      border-bottom-color: color-mix(in srgb, var(--color-white) 14%, transparent);
    }

    & th {
      background: color-mix(in srgb, var(--color-white) 8%, transparent);
      color: var(--color-white);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .blog-text-block-prose a {
      transition: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Blog post layout — layouts/blog-post.html
     Hero block: breadcrumb, category eyebrow, title, excerpt, meta
     (date · author · reading time), optional featured image, then
     the post body (blog/text-block + any other blocks). Followed by
     a compact newsletter CTA and the site-wide CTA banner. Uses the
     same pink-glow halo as .page-hero so inner pages feel unified.
     ────────────────────────────────────────────────────────────── */
  .blog-post {
    background: var(--color-bg);
  }

  .blog-post-hero {
    position: relative;
    padding-block: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-bg);
    overflow: hidden;

    /* Pink decorative glow — same motif as .page-hero */
    &::before {
      content: '';
      position: absolute;
      top: -10%;
      left: 50%;
      transform: translateX(-50%);
      width: min(60%, 720px);
      aspect-ratio: 2 / 1;
      background: radial-gradient(closest-side, color-mix(in srgb, var(--color-pink) 16%, transparent), transparent 70%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 0;
    }
  }

  .blog-post-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    text-align: left;
  }

  .blog-post-breadcrumb {
    margin: 0 0 1.5rem;
  }

  .blog-post-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-base);

    & .bi {
      transition: transform var(--transition-base);
    }

    &:hover,
    &:focus-visible {
      color: var(--color-pink);

      & .bi {
        transform: translateX(-3px);
      }
    }
  }

  .blog-post-category {
    margin: 0 0 1rem;
    color: var(--color-pink);
  }

  .blog-post-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0 0 1rem;

    & strong,
    & em {
      font-style: italic;
      font-weight: inherit;
      color: var(--color-pink);
    }
  }

  .blog-post-excerpt {
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    max-width: 44rem;
    margin: 0 0 1.5rem;
  }

  .blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    margin: 0 0 2.5rem;
  }

  .blog-post-meta-sep {
    color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
  }

  .blog-post-date {
    color: var(--color-text);
  }

  .blog-post-author {
    color: var(--color-text);
  }

  .blog-post-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .blog-post-featured {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    aspect-ratio: 16 / 9;
    background: var(--color-bg-alt);
  }

  .blog-post-featured-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Post body — wraps the {{CONTENT}} blocks. blog/text-block is the
     primary block type; it already constrains its own max-width, but
     we add extra vertical rhythm around the block stack. */
  .blog-post-body {
    padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
    background: var(--color-bg);
  }

  .blog-post-body-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  /* ──────────────────────────────────────────────────────────────
     Blog post newsletter CTA — compact inline block between article
     and CTA banner. Two-column on wide: copy left, form right.
     Stacks below 768px.
     ────────────────────────────────────────────────────────────── */
  .blog-post-newsletter {
    padding-block: clamp(3rem, 6vw, 5rem);
  }

  .blog-post-newsletter-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;

    @media (min-width: 768px) {
      grid-template-columns: 1.1fr 1fr;
      gap: clamp(2rem, 4vw, 3.5rem);
    }
  }

  .blog-post-newsletter-copy {
    & .eyebrow {
      margin: 0 0 0.75rem;
    }
  }

  .blog-post-newsletter-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-heading);
    margin: 0 0 0.75rem;
  }

  .blog-post-newsletter-body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--line-height-body);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 34rem;
  }

  .blog-post-newsletter-form {
    /* The yg-form-newsletter component brings its own inline layout;
       we just constrain its width on wide screens. */
    max-width: 32rem;
    width: 100%;

    @media (min-width: 768px) {
      justify-self: end;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Blog index layout — layouts/blog-index.html
     Hero (reuses .page-hero), responsive grid of post cards, simple
     Newer/Older pagination row, then newsletter CTA + cta-banner.
     Grid auto-fits to minmax(320px, 1fr); collapses to one column on
     narrow viewports. Pagination centers horizontally with muted
     disabled states when at the first/last page.
     ────────────────────────────────────────────────────────────── */
  .blog-index-hero {
    /* Left-aligned variant of page-hero: feels more editorial than
       the centered inner-page hero. Keeps the pink glow. */
    & .page-hero-inner {
      text-align: left;
      margin-inline: 0;
      max-width: 56rem;
    }

    & .page-hero-subheadline {
      margin-inline: 0;
    }
  }

  .blog-index-posts {
    padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 5rem);
    background: var(--color-bg);
  }

  .blog-index-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.25rem);

    @media (min-width: 992px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .blog-index-grid-item {
    display: flex;
  }

  .blog-index-empty {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--color-text-muted);
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem) 1rem;
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-lg);
    margin: 0;
  }

  /* Post-card meta row inside blog-index — date · reading time. */
  .post-card-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
  }

  .post-card-meta-sep {
    color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
  }

  .post-card-reading-time {
    color: var(--color-text-muted);
  }

  /* Pagination row — centered, with Newer/Older arrows flanking the
     Page N of M status. Disabled links render as muted spans. */
  .blog-index-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--color-line);
  }

  .blog-index-pagination-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    color: var(--color-black);
    text-decoration: none;
    padding: 0.6rem 1rem;
    border-radius: var(--radius-full);
    transition:
      color var(--transition-base),
      background-color var(--transition-base),
      transform var(--transition-base);

    & .bi {
      transition: transform var(--transition-base);
    }

    &:hover,
    &:focus-visible {
      color: var(--color-pink);
      background: color-mix(in srgb, var(--color-pink) 10%, transparent);
    }

    &.blog-index-pagination-prev:hover .bi,
    &.blog-index-pagination-prev:focus-visible .bi {
      transform: translateX(-3px);
    }

    &.blog-index-pagination-next:hover .bi,
    &.blog-index-pagination-next:focus-visible .bi {
      transform: translateX(3px);
    }

    &.is-disabled {
      color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
      background: transparent;
      cursor: default;
      pointer-events: none;
    }
  }

  .blog-index-pagination-status {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
  }

  @media (prefers-reduced-motion: reduce) {
    .blog-index-pagination-link,
    .blog-index-pagination-link .bi {
      transition: none;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     Form section — wrapper used on /contact to compose a
     section header (eyebrow / headline / body) with one of the
     form components (contact, discovery questionnaire, lead
     magnet). Keeps forms readable inside a narrow column while
     the header stays left-aligned with the rest of the page.
     ────────────────────────────────────────────────────────────── */
  .form-section {
    & .form-section-inner {
      display: grid;
      gap: var(--space-lg);
      max-width: 48rem;
      margin-inline: auto;
    }

    & .form-section-header {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }

    & .form-section-headline {
      font-family: var(--font-heading);
      font-size: clamp(1.75rem, 3.4vw, 2.5rem);
      line-height: var(--line-height-heading);
      letter-spacing: -0.01em;
      color: var(--color-heading);
      margin: 0;
    }

    & .form-section-body {
      font-family: var(--font-body);
      font-size: 1.05rem;
      line-height: var(--line-height-body);
      color: var(--color-text-muted);
      max-width: 60ch;
      margin: 0;
    }

    & .form-section-form {
      margin-block-start: 0.25rem;
    }
  }

}