/**
 * Smith Publicity — Mobile V4
 * Deep mobile redesign: type scale, spacing, stacking, overflow, touch targets.
 * Applies at max-width: 767px (phones only). Tablet (768–1199) uses the
 * desktop layout with a hamburger header + font scaling (see TABLET REGIME).
 *
 * Type scale (best practice mobile):
 *   body ............... 16–17px / 1.55
 *   H1 page ............. 32–36px
 *   H1 home hero ........ 32–40px
 *   H2 section .......... 26–30px
 *   intro lead .......... 22–24px
 *   nav / UI ............ 16px
 *   small / meta ........ 13–14px
 *
 * Spacing:
 *   page gutter ......... 20px
 *   section Y ........... 48–64px
 *   stack gap ........... 24–32px
 */

/* -------------------------------------------------------------------------- */
/* Base mobile shell                                                          */
/* -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.55;
  }

  img,
  video,
  svg,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Kill accidental horizontal scroll from absolute/wide children */
  .site-header,
  main,
  .site-footer,
  section {
    max-width: 100vw;
  }

  /* ========== HEADER ========== */
  .menu-toggle {
    width: 44px;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .main-nav,
  .header-cta {
    display: none !important; /* mobile drawer handles these */
  }

  /* ========== PAGE HEADER / HERO BANDS ========== */
  .page-header {
    padding: 64px 20px !important;
  }

  .page-header--has-image {
    min-height: 66svh !important;
    padding-top: 120px !important;
    padding-bottom: 120px !important;
  }

  .page-header--valign-bottom .page-header__inner {
    min-height: 240px !important;
  }

  .page-header__inner,
  .page-header__content {
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100%;
  }

  .page-header__heading {
    font-size: clamp(2rem, 8vw, 2.25rem) !important; /* 32–36px */
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  .page-header__subheading {
    font-size: clamp(1.125rem, 4.5vw, 1.375rem) !important; /* 18–22px */
    line-height: 1.35 !important;
  }

  .page-header__content {
    gap: 12px !important;
    --stack-gap: 12px !important;
  }

  /* ========== HOME HERO ========== */
  .hero-home__inner {
    padding: 40px 20px 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex-direction: column !important;
    gap: 28px !important;
  }

  .hero-home--layout-single .hero-home__inner {
    padding-right: 20px !important;
    padding-left: 20px !important;
    padding-top: 40px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .hero-home__lead {
    max-width: 100% !important;
    align-items: center;
    text-align: center;
    padding: 0 !important;
  }

  .hero-home__title {
    font-size: clamp(1.875rem, 7.5vw, 2.375rem) !important; /* 30–38px */
    line-height: 1.18 !important;
    letter-spacing: -0.02em;
  }

  .hero-home__accent {
    margin-top: 1.25rem !important;
    width: min(280px, 85%) !important;
    margin-inline: auto;
    gap: 14px !important;
  }

  .hero-home__photo {
    width: 100% !important;
    flex: none !important;
    max-width: none !important;
    aspect-ratio: 360 / 219;
  }

  .hero-home__photo--has-mobile .hero-home__photo-img--desktop {
    display: none !important;
  }

  .hero-home__photo--has-mobile .hero-home__photo-img--mobile {
    display: block !important;
  }

  /* ========== INTRO ========== */
  .home-intro {
    padding: 48px 20px !important;
  }

  .home-intro .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100%;
  }

  .home-intro__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .home-intro__col--heading p,
  .home-intro__col--heading h2,
  .home-intro__col--heading h3 {
    font-size: clamp(1.25rem, 5vw, 1.375rem) !important; /* 20–22px — denser mobile lead */
    line-height: 1.35 !important;
  }

  .home-intro__col--body {
    gap: 1rem !important;
  }

  .home-intro__col--body p {
    font-size: 1rem !important; /* 16px */
    line-height: 1.55 !important;
  }

  /* ========== CONTENT LIST ========== */
  .content-list,
  .content-list.section {
    padding: 48px 20px !important;
  }

  .content-list__container {
    max-width: 100%;
  }

  .content-list__grid {
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .content-list--image-left .content-list__grid {
    flex-direction: column !important;
  }

  .content-list__media {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .content-list__image {
    width: 100%;
    height: auto;
  }

  .content-list__heading {
    font-size: clamp(1.5rem, 6vw, 1.875rem) !important; /* 24–30px */
    line-height: 1.2 !important;
  }

  .content-list--heading-top .content-list__header {
    margin-bottom: 24px !important;
  }

  .content-list__intro,
  .content-list__intro p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .content-list__content {
    gap: 24px !important;
    --stack-gap: 24px !important;
  }

  /* Standardize spacing: image → heading → body → button all 24px on mobile.
     Zero out per-element margins so the flex `gap` alone controls rhythm. */
  .content-list__content > *,
  .content-list__content .content-list__header,
  .content-list__content .content-list__heading,
  .content-list__content .content-list__intro,
  .content-list__content .content-list__intro p,
  .content-list__content .content-list__item,
  .content-list__content .content-list__button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ========== CONTENT FEATURES / CARDS ========== */
  .content-features,
  .content-features.section {
    padding: 48px 20px !important;
  }

  .content-features__grid {
    flex-direction: column !important;
    gap: 28px !important;
  }

  .content-features__heading {
    font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
    line-height: 1.2 !important;
  }

  .content-features__text,
  .content-features__text p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .content-features--stacked .content-features__head {
    margin-bottom: 28px !important;
    max-width: 100% !important;
  }

  .content-features__list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ========== FEATURED WORK ========== */
  .featured-work,
  .featured-work.section {
    padding: 48px 0 0 !important;
  }

  .featured-work__header {
    margin: 0 20px 20px !important;
    max-width: none;
  }

  .featured-work__heading {
    font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
    line-height: 1.2 !important;
  }

  .featured-work__list {
    gap: 32px !important;
  }

  .featured-work__item {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-inline: 20px;
  }

  .featured-work__item:nth-child(even) .featured-work__image,
  .featured-work__item:nth-child(even) .featured-work__info {
    order: initial !important;
  }

  /* ========== CASE STUDIES / TEAM ========== */
  .case-studies,
  .case-studies.section,
  .block-team,
  .block-team.section {
    padding: 48px 4px !important;
  }

  /* Keep the vertical rhythm between consecutive team sections consistent
     with the grid row gap so rows read as one continuous grid. */
  .block-team.section:has(+ .block-team),
  .block-team.section:has(+ .block-team.section) {
    padding-bottom: 1.75rem !important;
  }

  .block-team.section + .block-team,
  .block-team.section + .block-team.section {
    padding-top: 0 !important;
  }

  /* ========== FAQ / CONTACT / NEWSLETTER ========== */
  .smith-faq,
  .smith-faq.section,
  .smith-contact-form,
  .smith-contact-form.section,
  .smith-newsletter,
  .smith-newsletter.section,
  .latest-posts,
  .latest-posts.section {
    padding-top: 24px !important;
    padding-bottom: 48px !important;
    padding-inline: 20px !important;
  }

  .smith-faq details,
  .smith-faq__item,
  .faq-item {
    font-size: 1rem;
  }

  /* Forms: full-width, comfortable tap targets */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important; /* prevents iOS zoom */
    min-height: 44px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  button,
  .btn,
  .site-cta__btn,
  a.btn {
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem; /* 15px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ========== CTA ========== */
  .site-cta {
    padding: 48px 20px !important;
  }

  .site-cta__card {
    min-height: 0 !important;
    padding: 40px 24px !important;
  }

  .site-cta__heading {
    font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
    line-height: 1.2 !important;
  }

  .site-cta__inner {
    gap: 1.25rem !important;
  }

  /* ========== FOOTER ========== */
  .site-footer {
    padding: 48px 20px 32px !important;
  }

  .site-footer__grid,
  .site-footer__inner,
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .site-footer__content {
    align-items: center !important;
    text-align: center !important;
  }

  .footer-links {
    align-items: center !important;
    text-align: center !important;
    width: 100%;
  }

  .footer-logo {
    align-items: center !important;
    margin-inline: auto;
  }

  .footer-logo__img {
    width: min(260px, 70vw) !important;
  }

  .footer-cols {
    justify-content: center !important;
    width: 100%;
  }

  .footer-col {
    align-items: center !important;
    text-align: center !important;
  }

  .footer-col__title {
    text-align: center !important;
  }

  .footer-col__links {
    align-items: center !important;
  }

  .footer-col__links a {
    justify-content: center !important;
  }

  .footer-social-list {
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 1rem !important;
  }

  .footer-social-list a span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .footer-location {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer-location__icon {
    display: none;
  }

  .footer-newsletter {
    width: 100%;
  }

  /* ========== CONTAINER / BOOK LINES ========== */
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100%;
  }

  .book-lines {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ========== BLOG LISTING ========== */
  .blog-listing {
    padding: 40px 20px !important;
  }

  /* ========== BLOG POST (single) ========== */
  body.single-post .sp-hero {
    min-height: 0 !important;
    padding: 40px 20px !important;
  }

  body.single-post .sp-hero__inner,
  body.single-post .sp-hero__title {
    text-align: center;
  }

  body.single-post .sp-hero__title {
    font-size: clamp(1.375rem, 5.5vw, 1.625rem) !important; /* 22–26px */
    line-height: 1.2 !important;
  }

  /* Stack podcast hero portraits on mobile */
  body.single-post .sp-hero__inner,
  body.single-post .sp-hero__media,
  body.single-post .sp-hero__photos {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body.single-post .sp-hero img {
    width: min(220px, 70vw) !important;
    height: auto !important;
    max-width: 100%;
  }

  body.single-post .sp-title {
    font-size: clamp(1.375rem, 5.5vw, 1.625rem) !important; /* 22–26px */
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
  }

  body.single-post .sp-wrap {
    padding: 32px 20px !important;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  body.single-post .sp-main,
  body.single-post .sp-side {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  body.single-post .sp-meta {
    font-size: 0.875rem;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  body.single-post .sp-content,
  body.single-post .sp-content p {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  body.single-post .sp-content h2 {
    font-size: 1.375rem !important; /* 22px */
    line-height: 1.25 !important;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
  }

  body.single-post .sp-content h3 {
    font-size: 1.125rem !important;
    line-height: 1.3 !important;
  }

  body.single-post .sp-figure,
  body.single-post .sp-figure img,
  body.single-post .wp-post-image {
    width: 100%;
    height: auto;
    border-radius: 0;
  }

  body.single-post .sp-related {
    padding: 48px 20px !important;
  }

  body.single-post .sp-related__grid,
  body.single-post .sp-related__inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  body.single-post .sp-related__head,
  body.single-post .sp-side__title {
    font-size: 1.375rem !important;
  }

  /* Stack any remaining multi-column layouts */
  .content-features--cols-2 .content-features__items,
  .content-features--cols-3 .content-features__items,
  .content-features--cols-4 .content-features__items {
    grid-template-columns: 1fr !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Small phones — tighter type & padding                                      */
/* -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .page-header--has-image {
    min-height: 66svh !important;
    padding-top: 108px !important;
    padding-bottom: 108px !important;
  }

  .page-header__heading {
    font-size: 1.875rem !important; /* 30px */
  }

  .hero-home__title {
    font-size: 1.75rem !important; /* 28px */
  }

  .home-intro,
  .content-list,
  .content-list.section,
  .content-features,
  .content-features.section,
  .smith-faq,
  .smith-contact-form,
  .smith-newsletter,
  .site-cta,
  .case-studies,
  .block-team {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .featured-work__item {
    margin-inline: 16px;
  }

  .featured-work__header {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }

  body.single-post .sp-title {
    font-size: 1.5rem !important; /* 24px */
  }
}

/* ========================================================================== */
/* MOBILE V5 — enhancement layer (appended)                                   */
/* Derived from an 11-page, 187-finding mobile audit at 390px and 360px.      */
/* Root fix + proportional type hierarchy + 44px tap targets + overflow,      */
/* image, and layout repairs. Key sizes in px so no root scaling can          */
/* deflate them. Desktop (>=992px) untouched.                                 */
/* ========================================================================== */

/* ---------- V5.1  ROOT FIX ------------------------------------------------ */
/* The inline html{font-size:92.5%} at <=600px shrank every rem-based V4      */
/* rule ~7.5% below its documented spec (body 14.8px, hero 25.9px...).        */
/* Restore the root so V4 lands exactly on its own documented scale.          */
@media (max-width: 600px) {
  html { font-size: 100% !important; }
}

@media (max-width: 767px) {

  /* ---------- V5.2  TYPE HIERARCHY (px-based) ----------------------------- */

  /* Hero H1: 32-40px, leads the page */
  .hero-home__title {
    font-size: clamp(32px, 8.5vw, 40px) !important;
    line-height: 1.15 !important;
  }

  /* Page H1: 30-36px */
  .page-header__heading {
    font-size: clamp(30px, 8.5vw, 36px) !important;
    line-height: 1.2 !important;
  }

  .page-header__subheading {
    line-height: 1.45 !important;
  }

  /* Section H2: 26-30px — one scale across every band */
  .content-list__heading,
  .content-features__heading,
  .featured-work__heading,
  .site-cta__heading,
  .smith-faq__heading,
  .latest-posts__head h2,
  .smith-newsletter__heading,
  .blog-listing__title {
    font-size: clamp(26px, 7vw, 30px) !important;
    line-height: 1.25 !important;
  }

  /* Rogue headings that out-scaled the page H1 — brought into system */
  .smith-faq__group-label {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .smith-contact-form__heading {
    font-size: clamp(26px, 7.5vw, 30px) !important;
    line-height: 1.25 !important;
  }

  .case-studies__heading {
    font-size: clamp(28px, 8vw, 32px) !important;
    line-height: 1.2 !important;
  }

  .smith-faq__footer-prompt {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  /* Card / item titles: 20px — one clear step under section H2s */
  .content-features__item-heading,
  .card__title,
  .latest-posts__card-title,
  .sp-card__title,
  .block-team__name {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .block-team__joined {
    margin-bottom: 1rem;
  }

  /* Leads: 20-22px */
  .home-intro__col--heading p,
  .home-intro__col--heading h2,
  .home-intro__col--heading h3 {
    font-size: clamp(20px, 5.5vw, 22px) !important;
    line-height: 1.4 !important;
  }

  /* Body floor: 16px/1.6 — nothing readable below this */
  .home-intro__col--body p,
  .content-list__intro,
  .content-list__intro p,
  .content-list__item,
  .content-features__text,
  .content-features__text p,
  .content-features__item-text,
  .card__excerpt,
  .latest-posts__card-excerpt,
  .smith-faq__answer,
  .smith-newsletter__intro,
  .block-team__modal-bio {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* Featured work: quote leads, meta recedes */
  .featured-work__quote {
    font-size: clamp(20px, 5.75vw, 23px) !important;
    line-height: 1.35 !important;
  }

  .featured-work__category {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .featured-work__author {
    font-size: var(--body-l-size) !important;
    line-height: var(--body-l-lh) !important;
  }

  .featured-work__media {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Testimonials / case studies: pull-quote pattern tamed */
  .case-studies__quote {
    padding: 0 !important;
  }

  .testimonial-bento__quote p:first-child,
  .case-studies__card:not(.case-studies__card--feature) .case-studies__quote p:first-child {
    font-size: 21px !important;
    line-height: 1.35 !important;
  }

  .case-studies__quote p:not(:first-child),
  .testimonial-bento__quote p:not(:first-child) {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  .case-studies__author,
  .testimonial-bento__name {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }

  .testimonial-bento__media {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .case-studies__pull {
    line-height: 1.35 !important;
  }

  /* Blog post: reading-optimized article scale */
  body.single-post .sp-content,
  body.single-post .sp-content p,
  body.single-post .sp-content li {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  body.single-post .sp-content h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }

  body.single-post .sp-content h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  body.single-post .sp-title,
  body.single-post .sp-hero__title {
    font-size: clamp(24px, 6.5vw, 28px) !important;
    line-height: 1.25 !important;
  }

  /* Button label coherence: big inline CTAs 17px, band CTAs 15px */
  .content-list__button,
  .content-features__button {
    font-size: 17px !important;
  }

  .site-cta__btn,
  .btn--cta {
    font-size: 15px !important;
  }

  /* BugZap #209 reverses this. It used to read "Content-list CTA fills mobile
     width" and set width:100%. Christine: "all buttons should function the
     same when going to smaller screen sizes - fit and centered NOT full
     width." Measured on /focus-areas/ at 600px, all three "Learn More" pills
     were 560px, i.e. exactly the parent width. fit-content sizes them to the
     label and margin-inline centres them; display stays flex so the existing
     icon/label centring is untouched.
     NOTE: a second, identical copy of the old rule lived further down this
     file in its own max-width:767px block - both were changed together, since
     fixing only one would have been a silent no-op. */
  .content-list__button {
    width: fit-content !important;
    display: flex !important;
    margin-inline: auto !important;
  }

  /* Meta floors */
  .card__category-badge,
  .sp-card__cat {
    font-size: 13px !important;
  }

  .footer-col__links a {
    font-size: 14px !important;
  }

  .footer-credits__links a {
    font-size: 13px !important;
  }

  /* ---------- V5.3  TAP TARGETS (44px) ------------------------------------ */

  .footer-col__links a,
  .footer-social-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }

  .footer-credits__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 8px;
    margin-left: -8px;
  }

  .mobile-nav .sub-menu a,
  .mobile-nav-menu .sub-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0 !important;
    font-size: 16px !important;
  }

  .mobile-nav__close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .blog-listing__pagination .page-numbers {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .smith-section-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .sp-share a,
  .block-team__social a,
  .block-team__modal-linkedin,
  .content-features__item-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---------- V5.4  OVERFLOW & LAYOUT REPAIRS ----------------------------- */

  /* Inline min-width:280px columns overflow 360px screens (gold/teal
     testimonial bands on services + expertise) */
  main [style*="min-width: 280px"],
  main [style*="min-width:280px"] {
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  .figma-flush > div {
    padding: 40px 20px !important;
    gap: 24px !important;
  }

  .figma-flush > div > div {
    min-width: 0 !important;
  }

  /* Services page: left-align the gold inline testimonial text on mobile. */
  body.page-id-8 .figma-flush > div > div[style*="text-align:center"],
  body.page-id-8 .figma-flush > div > div[style*="text-align:center"] blockquote,
  body.page-id-8 .figma-flush > div > div[style*="text-align:center"] p {
    text-align: left !important;
  }


  /* History: inline 3-col CTA grid crushed cards + inflated scrollWidth */
  main div[style*="grid-template-columns:repeat(3,1fr)"],
  main div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Section-nav pills: center+overflow trapped pills off-screen left */
  .smith-section-nav {
    top: 56px;
  }

  .smith-section-nav__list {
    justify-content: flex-start !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 20px;
    scroll-padding-inline: 20px;
  }

  /* Blog post: release floated inline images (45px text column bug) */
  .sp-content img.alignright,
  .sp-content img.alignleft,
  .sp-content .alignright,
  .sp-content .alignleft {
    float: none !important;
    display: block;
    margin: 20px auto !important;
    max-width: 100% !important;
    height: auto;
  }

  /* Blog post hero: square title-card backgrounds render as cropped
     baked-in text at phone sizes; the real title is in the HTML below */
  body.single-post .sp-hero {
    background-image: none !important;
    background-color: #0F7E7C;
  }

  /* History pull-quote band: quote text is baked into the bg image AND
     overlaid as HTML — rendered twice. Keep the live text only. */
  section[style*="history_quote"] {
    background-image: none !important;
  }

  /* Empty team cards render as blank navy blocks */
  .block-team__member:has(.block-team__name:empty) {
    display: none !important;
  }

  /* Services process diagram: 1180-unit SVG scaled to 350px = 7px labels.
     Let it scroll horizontally at a legible size instead. */
  article section div:has(> svg[role="img"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }

  article section svg[role="img"] {
    min-width: 720px;
    display: block;
  }

  /* Drawer open: lock page scroll behind it */
  body:has(.mobile-nav.is-open) {
    overflow: hidden;
  }

  /* ---------- V5.5  IMAGES ------------------------------------------------ */

  /* Don't force landscape photos into near-square crops */
  .content-list__media .content-list__image {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  /* BugZap #222. The rule above frees the image to its natural height, but
     content-list.css still caps this container at max-height:480px for the
     same breakpoint - a cap written when the image was height:100% and
     cropped to fit. With overflow visible the photo simply spilled past the
     container and the next block of text was painted on top of it: measured
     on /history/ at 760px, media 480px tall against an 797px image, the
     heading overlapping the photo by 81px and unreadable.

     The cap has to lift wherever the image is freed. It stays in
     content-list.css for the base theme, which has no figma layer and keeps
     the cropped height:100% image the cap was written for. */
  .content-list__media {
    max-height: none !important;
  }

  .featured-work__image {
    aspect-ratio: auto !important;
  }

  .featured-work__image img {
    height: auto !important;
    object-fit: contain !important;
  }

  .case-studies__card--fit-cover .case-studies__media img {
    aspect-ratio: 4 / 3 !important;
  }

  /* Low-res logo sheets: cap width to reduce upscale blur */
  .content-list--imgfit-contain .content-list__image {
    max-width: min(100%, 340px);
    margin-inline: auto;
  }

  /* ---------- V5.6  FORMS & WIDGETS --------------------------------------- */

  /* Footer newsletter: keep labels screen-reader-only, tighten vertical spacing */
  .footer-newsletter__box {
    padding: 1.5rem !important;
    gap: 0.5rem !important;
  }

  .footer-newsletter__intro {
    margin-bottom: 0 !important;
    gap: 0.5rem !important;
  }

  .footer-newsletter__form {
    gap: 0.5rem !important;
  }

  .footer-newsletter__input {
    min-height: 44px !important;
    padding: 0.625rem 0.875rem !important;
    margin: 0 !important;
    border-bottom: 0 !important;
  }

  .footer-newsletter__fineprint {
    margin-top: 0.75rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.45 !important;
  }

  /* Dev bug widget: keep it available but stop it dominating phones */
  .ndevr-bugzap {
    opacity: 0.55;
    transform: scale(0.85);
    transform-origin: bottom right;
  }

  .ndevr-bugzap:hover,
  .ndevr-bugzap:focus-within {
    opacity: 1;
    transform: none;
  }
}

/* ---------- V5.7  SMALL PHONES ------------------------------------------- */
@media (max-width: 767px) {
  /* History CTA cards: single column on phones */
  main div[style*="grid-template-columns:repeat(3,1fr)"],
  main div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 575px) {
  /* Restore the 48px section rhythm and 20px gutters (V4 dropped to 40/16) */
  .home-intro,
  .content-list,
  .content-list.section,
  .content-features,
  .content-features.section,
  .smith-faq,
  .smith-contact-form,
  .smith-newsletter,
  .site-cta,
  .site-cta.section,
  .case-studies,
  .block-team {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* keep the V5 px type scale at small sizes (override V4's 575px px values) */
  .hero-home__title {
    font-size: clamp(30px, 8.5vw, 34px) !important;
  }

  .page-header__heading {
    font-size: clamp(28px, 8.5vw, 32px) !important;
  }
}

/* ==========================================================================
   Mobile/tablet hero split: 40% lead / 60% visual
   Centers the H1 + yellow accent lines in the top 40% of the hero area.
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --site-header-height: 64px;
  }

  .hero-home--layout-single {
    height: calc(100svh - var(--site-header-height)) !important;
    min-height: 0 !important;
  }

  .hero-home--layout-single .hero-home__inner {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: clamp(16px, 5vw, 32px) !important;
    padding-right: clamp(16px, 5vw, 32px) !important;
    gap: 0 !important;
  }

  .hero-home--layout-single .hero-home__lead {
    flex: 0 0 40% !important;
    height: 40% !important;
    max-width: none !important;
    padding: clamp(16px, 4vw, 24px) 0 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-home--layout-single .hero-home__marquee,
  .hero-home--layout-single .hero-home__photo {
    flex: 0 0 60% !important;
    height: 60% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }

  .hero-home--layout-single .hero-home__photo--has-mobile {
    aspect-ratio: auto !important;
  }

  .hero-home--layout-single .hero-home__marquee-col {
    min-height: 0 !important;
    height: 100% !important;
  }
}

@media (max-width: 575px) {
  :root {
    --site-header-height: 56px;
  }
}

/* =====================================================================
   V6.1  TABLET REGIME (768–1199) — Original edition
   Keep the desktop layout intact; only swap header for a hamburger-only
   bar and let font sizes scale down (see clamp() rules further below).
   ===================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  :root { --site-header-height: 56px; }

  /* Header: logo + hamburger only. Hide desktop nav and CTA button. */
  .site-header .main-nav,
  .site-header .header-cta { display: none !important; }
  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  /* Hero: constrain to viewport height and clip the marquee vertically
     so the book-cover collage doesn't overflow into a giant empty band. */
  body.home .hero-home--layout-single {
    height: calc(100svh - var(--site-header-height)) !important;
    min-height: 0 !important;
    max-height: calc(100svh - var(--site-header-height)) !important;
    overflow: hidden !important;
  }
  body.home .hero-home--layout-single .hero-home__inner {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    align-items: stretch !important;
  }
  body.home .hero-home--layout-single .hero-home__photo,
  body.home .hero-home--layout-single .hero-home__marquee {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.home .hero-home--layout-single .hero-home__marquee-col {
    height: 100% !important;
    min-height: 0 !important;
  }

  body.home .hero-home--layout-single .hero-home__lead {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
  }
  body.home .hero-home--layout-single .hero-home__lead .hero-home__title,
  body.home .hero-home--layout-single .hero-home__lead .hero__title,
  body.home .hero-home--layout-single .hero-home__lead h1 {
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Footer: center-align logo, columns, address and newsletter in this width band. */
  .site-footer__content,
  .site-footer .footer-links,
  .site-footer .footer-cols,
  .site-footer .footer-col,
  .site-footer .footer-newsletter,
  .site-footer .footer-newsletter__box,
  .site-footer .footer-newsletter__intro,
  .site-footer .footer-newsletter__form,
  .site-footer .footer-location { text-align: center !important; }

  .site-footer .footer-logo,
  .site-footer .footer-logo__img { display: block !important; margin-left: auto !important; margin-right: auto !important; }

  .site-footer .footer-cols {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: 1.75rem 1rem !important;
  }
  .site-footer .footer-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 140px !important;
  }
  .site-footer .footer-col__title { text-align: center !important; }
  .site-footer .footer-col__links {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .site-footer .footer-col__links li,
  .site-footer .footer-col__links a { text-align: center !important; }

  .site-footer .footer-social-list,
  .site-footer .footer-social-list li,
  .site-footer .footer-social-list a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  /* BugZap #45 - icon-only social row; a vertical stack of bare icons reads as broken. */
  .site-footer .footer-social-list { flex-direction: row !important; flex-wrap: wrap !important; gap: 1.25rem !important; }
  .site-footer .footer-social { align-items: center !important; }

  .site-footer .footer-location {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  .site-footer .footer-location a { text-align: center !important; }

  .site-footer .footer-newsletter,
  .site-footer .footer-newsletter__box,
  .site-footer .footer-newsletter__form { margin-left: auto !important; margin-right: auto !important; }
  .site-footer .footer-newsletter__form { display: flex !important; flex-direction: column !important; align-items: center !important; }
  .site-footer .footer-newsletter__input,
  .site-footer .footer-newsletter__submit { width: 100% !important; max-width: 420px !important; }
  /* Button must sit on the same left/right edges as the inputs above it. */
  .site-footer .footer-newsletter__submit { align-self: center !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* Team sections on tablet: consecutive sections should read as one continuous
     grid, so the vertical gap between them matches the internal grid row gap. */
  .block-team.section:has(+ .block-team),
  .block-team.section:has(+ .block-team.section) {
    padding-bottom: 1.75rem !important;
  }

  .block-team.section + .block-team,
  .block-team.section + .block-team.section {
    padding-top: 0 !important;
  }
}

/* ============================================================
   TYPE SYSTEM v2 — 6 roles (Original edition)
   Loaded last; overrides prior heading/label rules.
   ============================================================ */
:root {
  --font-serif: "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-sans:  "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --h1-display-size: 5rem;      /* 80 */
  --h1-display-lh:   1.1;        /* 88 */
  --h2-section-size: 3.25rem;    /* 52 */
  --h2-section-lh:   1.192;      /* 62 */
  --h2-deck-size:    1.875rem;   /* 30 */
  --h2-deck-lh:      1.333;      /* 40 */
  --h3-card-size:    2rem;       /* 32 */
  --h3-card-lh:      1.25;       /* 40 */
  --h4-card-size:    1.75rem;    /* 28 */
  --h4-card-lh:      1.286;      /* 36 */
  --eyebrow-size:    0.75rem;    /* 12 */
  --eyebrow-lh:      1.333;      /* 16 */
  --body-l-size:     1.1875rem;  /* 19 */
  --body-l-lh:       1.579;      /* 30 */
  --body-m-size:     1rem;       /* 16 */
  --body-m-lh:       1.625;      /* 26 */
  --caption-size:    0.8125rem;  /* 13 */
  --caption-lh:      1.538;      /* 20 */
  --button-size:     0.875rem;   /* 14 */
  --nav-size:        0.875rem;   /* 14 */
}

/* Mobile: scale the type-system tokens so H1/H2/H3 stay distinct. */
@media (max-width: 767px) {
  :root {
    --h1-display-size: clamp(2rem, 8vw, 2.625rem);      /* 32–42px */
    --h2-section-size: clamp(1.5rem, 6vw, 1.875rem);     /* 24–30px */
    --h3-card-size: clamp(1.375rem, 5.5vw, 1.75rem);    /* 22–28px */
    --h4-card-size: clamp(1.25rem, 5vw, 1.5rem);        /* 20–24px */
  }
}

/* --- H1 Display --- */
.hero__title,
.page-header__heading,
h1.page-header__heading {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--h1-display-size) !important;
  line-height: var(--h1-display-lh) !important;
  letter-spacing: -0.04em !important;
}

/* --- H2 Section (single token) --- */
.content-list__heading,
.content-list__heading--large,
.content-features__heading,
.featured-work__heading,
.site-cta__heading,
.content-list__intro-heading,
section h2:not(.h2-deck):not(.content-list__deck) {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--h2-section-size) !important;
  line-height: var(--h2-section-lh) !important;
  letter-spacing: -0.01em !important;
}

/* --- H2 Deck (italic sans, sub-line under H2) --- */
.content-list__deck,
.h2-deck,
.content-list__heading + em,
.content-list__heading--large + em {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: var(--h2-deck-size) !important;
  line-height: var(--h2-deck-lh) !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
}

/* --- H3 Card / Sub --- */
.footer-newsletter__title,
.featured-work__item-heading,
.content-list__sub-heading,
h3 {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--h3-card-size) !important;
  line-height: var(--h3-card-lh) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

/* --- H4 Card / Sub --- */
.content-features__item-heading,
h4 {
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--h4-card-size) !important;
  line-height: var(--h4-card-lh) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

/* --- Eyebrow / Label --- */
.eyebrow,
.content-list__eyebrow,
.content-features__eyebrow,
.page-header__eyebrow,
.hero__eyebrow,
.site-cta__eyebrow,
.footer-col__title,
.footer-newsletter label,
.featured-work__category,
.tagline {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: var(--eyebrow-size) !important;
  line-height: var(--eyebrow-lh) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Blog-card and podcast-card eyebrows must match the selected Blog card style. */
.latest-posts__card-body > .content-list__eyebrow,
.latest-posts__card-cat,
.podcast-carousel__meta {
  font-family: "Barlow", sans-serif !important;
  font-weight: 700 !important;
  font-size: var(--eyebrow-size) !important;
  line-height: var(--eyebrow-lh) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #0f7e7c !important;
}

.latest-posts__card-body > .content-list__eyebrow,
.latest-posts__card-cat {
  margin: 0 !important;
}

.podcast-carousel__meta {
  margin: 0 0 0.5rem !important;
  padding-top: 1.75rem !important;
}

/* --- Body L (intro paragraphs) --- */
.hero__intro,
.content-list__intro,
.content-features__intro,
.lead {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-size: var(--body-l-size) !important;
  line-height: var(--body-l-lh) !important;
  letter-spacing: -0.01em !important;
}

/* Page header subheading — one tier larger than body-l (H3 size, sans) */
.page-header__subheading {
  font-family: var(--font-sans) !important;
  font-weight: 300 !important;
  font-size: var(--h3-card-size) !important;
  line-height: var(--h3-card-lh) !important;
  letter-spacing: -0.01em !important;
}

/* --- Body M (default copy) --- */
.content-features__item-copy,
.content-list__copy,
.featured-work__copy,
.footer-newsletter__sub,
.footer-newsletter__copy {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--body-m-size) !important;
  line-height: var(--body-m-lh) !important;
  letter-spacing: -0.01em !important;
}

/* --- Caption (small meta) --- */
.featured-work__media,
.footer-newsletter__fineprint,
.footer-credits__copy,
.footer-credits,
.caption,
small.meta {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--caption-size) !important;
  line-height: var(--caption-lh) !important;
  letter-spacing: 0 !important;
}

.featured-work__author {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--body-l-size) !important;
  line-height: var(--body-l-lh) !important;
  letter-spacing: -0.01em !important;
}

/* --- Button --- */
.btn,
.btn--cta,
.btn--primary,
.btn--secondary,
button.btn {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: var(--button-size) !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* --- Nav --- */
.main-nav a,
.main-nav__link,
.site-header .main-nav a {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--nav-size) !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Tablet band retains its own H1 scaling; leave hero mobile sizes alone. */
@media (max-width: 1199px) {
  .hero__title { font-size: clamp(2.5rem, 6vw + 1rem, 5rem) !important; }
  /* H2 (section): scaled down for tablet/mobile while remaining
     the largest role after H1. ~28–40px range. */
  section h2:not(.h2-deck):not(.content-list__deck),
  .content-list__heading,
  .content-list__heading--large,
  .content-features__heading,
  .featured-work__heading,
  .site-cta__heading {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem) !important;
    line-height: 1.15 !important;
  }
  /* H2 Deck (italic sub-line): shrink proportionally, ~20–24px */
  .h2-deck,
  .content-list__deck {
    font-size: clamp(1.125rem, 1vw + 0.75rem, 1.5rem) !important;
    line-height: 1.35 !important;
  }
}

/* Extra tightening at true mobile widths: ~26–32px H2 */
@media (max-width: 640px) {
  section h2:not(.h2-deck):not(.content-list__deck),
  .content-list__heading,
  .content-list__heading--large,
  .content-features__heading,
  .featured-work__heading,
  .site-cta__heading {
    font-size: clamp(1.625rem, 5.5vw, 2rem) !important;
  }
}

/* Reorder: image before text on mobile/tablet for chapter/media-stretch rows
   (e.g. "The best publicity is built on collaboration."). */
@media (max-width: 767px) {
  .content-list--chapter.content-list--media-stretch .content-list__grid,
  .content-list--chapter.content-list--image-left .content-list__grid,
  .content-list--imgfit-contain .content-list__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .content-list--chapter.content-list--media-stretch .content-list__media,
  .content-list--chapter.content-list--image-left .content-list__media,
  .content-list--imgfit-contain .content-list__media {
    order: 0 !important;
    margin-bottom: 0 !important;
  }
  .content-list--chapter.content-list--media-stretch .content-list__content,
  .content-list--chapter.content-list--image-left .content-list__content,
  .content-list--imgfit-contain .content-list__content {
    order: 1 !important;
  }

  /* Preserve explicit text-first order when a contain-fit row also requests it */
  .content-list--imgfit-contain.content-list--mobile-text-first .content-list__media {
    order: 1 !important;
  }
  .content-list--imgfit-contain.content-list--mobile-text-first .content-list__content {
    order: 0 !important;
  }
}

/* --- Split 50/50 variant (desktop only) --------------------------------- */
@media (min-width: 768px) {
  .content-list--split-50-50 .content-list__grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: clamp(2rem, 5vw, 5rem) !important;
  }
  .content-list--split-50-50 .content-list__content,
  .content-list--split-50-50 .content-list__media {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }
  /* imgfit-contain (e.g. "Positioned with purpose.") — keep the collage in
     normal flow at its natural aspect so it doesn't overflow the section. */
  .content-list--split-50-50.content-list--imgfit-contain .content-list__media {
    position: static !important;
    height: auto !important;
    align-self: center !important;
  }
  .content-list--split-50-50 .content-list__image {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
}

/* Tablet (2-col grid): swap the bottom two service cards
   (Author Platform ↔ Speaking Engagement) so the sage/teal fills read as a
   checkerboard instead of two matching columns.

   BugZap #51 / #62 - the lower bound is 768px, NOT 576px, and that matters.
   `.content-features__list { grid-template-columns: 1fr !important }` at
   line 285 of this file sits inside `@media (max-width: 767px)`, so the
   `(min-width: 576px) and (max-width: 991px)` two-column rule in
   blocks/content-features/content-features.css never actually wins below
   768px. The real column map is: >=992px four columns, 768-991px two
   columns, <=767px one column.

   With the swap starting at 576px it also fired across 576-767px, where the
   grid is already a SINGLE column - reordering 1,2,3,4 to 1,2,4,3 there put
   the two teal cards back to back (sage, teal, teal, sage) and broke the
   alternation Christine asked for. At one column the authored DOM order
   (sage, teal, sage, teal, from the `auto` accent in content-features.php)
   already alternates, so the swap must not apply.

   Note: the Agentis design export carries the same 576px lower bound and has the
   same defect at 576-767px. This is a deliberate divergence from the export,
   not an oversight. */
@media (min-width: 768px) and (max-width: 991px) {
  .content-features--cols-4 .content-features__list > .content-features__item:nth-child(3) { order: 4 !important; }
  .content-features--cols-4 .content-features__list > .content-features__item:nth-child(4) { order: 3 !important; }
}

/* True square media crop: overrides the split-row stretch and mobile image-contain
   rules so selected service images remain 1:1 on phone, tablet, and desktop. */
.content-list--square-media .content-list__media--square {
  aspect-ratio: 1 / 1 !important;
  align-self: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.content-list--square-media .content-list__media--square .content-list__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* =========================================================================
   EYEBROW → HEADING SPACING SYSTEM
   Two tiers, one token each. Section eyebrows (intro an H1/H2) step up with
   the breakpoint; card eyebrows (intro an H3/H4 inside a card) stay constant.
   Parent stacks declare --stack-gap alongside their flex `gap` so the value
   below is the real, measured optical gap regardless of layout variant.
   ========================================================================= */
:root {
  --eyebrow-gap-section: 16px;
  --eyebrow-gap-card: 8px;
}
@media (min-width: 768px)  { :root { --eyebrow-gap-section: 20px; } }
@media (min-width: 1200px) { :root { --eyebrow-gap-section: 24px; } }

/* Every eyebrow owns no vertical margin of its own. */
.eyebrow,
.content-list__eyebrow,
.content-features__eyebrow,
.featured-work__eyebrow,
.page-header__eyebrow,
.hero__eyebrow,
.site-cta__eyebrow,
.smith-newsletter__eyebrow,
.podcast-carousel__eyebrow,
.podcast-carousel__meta,
.latest-posts__eyebrow,
.latest-posts__card-cat,
.blog-archive__card-cat {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Tier A — section eyebrow → H1 / H2 */
.eyebrow + *,
.content-list__eyebrow + *,
.content-features__eyebrow + *,
.featured-work__eyebrow + *,
.page-header__eyebrow + *,
.hero__eyebrow + *,
.site-cta__eyebrow + *,
.smith-newsletter__eyebrow + *,
.podcast-carousel__eyebrow + * {
  margin-top: calc(var(--eyebrow-gap-section) - var(--stack-gap, 0px)) !important;
}

/* Tier B — card / inline eyebrow → H3 / H4 card title */
.latest-posts__card-cat + *,
.latest-posts__card-body > .content-list__eyebrow + *,
.latest-posts__card-body .content-list__eyebrow + *,
.blog-archive__card-cat + *,
.blog-archive__card-body .content-list__eyebrow + *,
.podcast-carousel__meta + *,
.podcast-carousel__card .content-list__eyebrow + * {
  margin-top: calc(var(--eyebrow-gap-card) - var(--stack-gap, 0px)) !important;
}

/* Specificity bump: earlier mobile rules target `.content-list__content .content-list__heading`
   (0,2,0) and would otherwise beat the tier-A rule above. */
.content-list__content .content-list__eyebrow + *,
.content-list__header .content-list__eyebrow + *,
.content-features__title .content-features__eyebrow + *,
.content-features__head .content-features__eyebrow + * {
  margin-top: calc(var(--eyebrow-gap-section) - var(--stack-gap, 0px)) !important;
}

/* ==========================================================================
   UNIFIED YELLOW BUTTON SIZING
   All gold CTAs (.btn--cta, .site-cta__btn) match the header "CONTACT US"
   button: same padding, font-size, and height at every breakpoint.
   ========================================================================== */
:root {
  --btn-pad-y: 16px;
  --btn-pad-x: 32px;
  --btn-min-h: 0;
}

.btn--cta,
a.btn--cta,
button.btn--cta,
.site-header .btn--cta,
.mobile-nav .btn--cta,
.site-cta__btn,
a.site-cta__btn,
.content-list__button,
.content-features__button,
.latest-posts__button,
.btn.btn--cta.btn--full {
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-size: 15px !important;
  /* BugZap #122: .btn--cta already tracked at 2.1px, the rest of the group did
     not, which is exactly the "doesn't match rest" Christine flagged. 2.1px is
     also the Agentis design export's value on every uppercase gold CTA. It accounts
     for the full width delta: site-cta__btn 149 -> 170 (10 chars) and
     content-features__button 158 -> 180 (11 chars). Measured 2026-08-06. */
  letter-spacing: 2.1px !important;
  /* BugZap #228 is #122 one button later: the footer newsletter submit was not
     in this group and still tracked at 0.02em (0.32px at its 16px), against
     2.1px on every other uppercase button on /services/. Measured 2026-08-14.
     It is deliberately NOT added to the selector list above - that block also
     forces 15px, --btn-pad and --btn-min-h, which would restyle the footer
     pill she did not ask about. Tracking only. */
  line-height: 1 !important;
  min-height: var(--btn-min-h) !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

/* BugZap #228 - see the note in the block above. Tracking only. */
.site-footer .footer-newsletter__submit {
  letter-spacing: 2.1px !important;
}

/* Full-width variants keep their width, but not extra vertical size. */
.btn--cta.btn--full,
.btn--full.site-cta__btn {
  display: flex !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  /* BugZap #209 - the duplicate of the rule above. Kept in place rather than
     deleted so the two stay visibly paired; if one is ever edited alone the
     other will still be here to explain why nothing changed. */
  .content-list__button {
    width: fit-content !important;
    display: flex !important;
    margin-inline: auto !important;
  }
}

/* Expert testimonial card — center image + text on mobile */
@media (max-width: 767px) {
  .expert-testi {
    justify-content: center !important;
    text-align: center !important;
    padding: 1.25rem !important;
  }

  .expert-testi > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  .expert-testi img {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* FAQ heading + deck: tighten the pair on mobile/tablet */
@media (max-width: 1199px) {
  .smith-faq__heading:not(.h2-deck) {
    margin-bottom: 0.5rem !important;
  }
  .smith-faq__heading.h2-deck {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
  }
}

/* Mobile: lead a content-list row with its image */
@media (max-width: 767px) {
  .content-list--media-first-mobile .content-list__grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .content-list--media-first-mobile .content-list__media { order: -1 !important; }
  .content-list--media-first-mobile .content-list__content { order: 0 !important; }
}

/* ---- Tablet (768–1199): compact footer link stacks + horizontal social ---- */
@media (min-width: 768px) and (max-width: 991px) {
  /* Centre all hero H1s and subheaders on tablet. */
  .page-header--align-left .page-header__inner,
  .page-header--align-right .page-header__inner { align-items: center !important; }
  .page-header--align-left .page-header__content,
  .page-header--align-right .page-header__content { align-items: center !important; text-align: center !important; }
  .page-header__heading,
  .page-header__subheading { text-align: center !important; }
  .page-header--heading-two-thirds .page-header__heading { width: 100% !important; margin-left: 0 !important; }
  .hero-home__lead { align-items: center !important; text-align: center !important; }
  .hero-home__title { text-align: center !important; }
  .site-footer__inner { gap: 2.5rem !important; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .site-footer__content { gap: 2.5rem !important; }
  .site-footer .footer-links { gap: 2rem !important; }
  .site-footer .footer-cols { gap: 2rem 1rem !important; }
  .site-footer .footer-col { gap: 0.75rem !important; }
  .site-footer .footer-col__links { gap: 0 !important; }
  .site-footer .footer-col__links li { margin: 0 !important; }
  .site-footer .footer-col__links a { padding: 0.25rem 0 !important; line-height: 1.4 !important; }

  .site-footer .footer-social-list {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.25rem !important;
  }
  .site-footer .footer-social-list li { margin: 0 !important; }
  .site-footer .footer-social-list a { padding: 0.25rem 0 !important; gap: 0 !important; }
}

/* Eyebrow → sub-heading (Part One / Part Two style blocks): tier B gap, matching heading→para spacing */
.content-list__eyebrow + .content-list__sub-heading,
.content-list__content .content-list__eyebrow + .content-list__sub-heading,
.content-list__header .content-list__eyebrow + .content-list__sub-heading {
  margin-top: calc(var(--eyebrow-gap-card) - var(--stack-gap, 0px)) !important;
}

/* --- Mobile testimonial/case-study gutters: one shared 20px side margin --- */
@media (max-width: 767px) {
  .case-studies,
  .case-studies.section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .testimonial-bento,
  .testimonial-bento.section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---- Mobile (<=767): compact footer — tighter overall + link spacing ---- */
@media (max-width: 767px) {
  .site-footer { padding: 32px 20px 24px !important; }
  .site-footer__inner { gap: 1.75rem !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .site-footer__grid,
  .footer-grid { gap: 1.75rem !important; }
  .site-footer__content { gap: 1.5rem !important; }
  .site-footer .footer-logo { margin-bottom: 0 !important; }
  .site-footer .footer-links { gap: 1.5rem !important; }
  .site-footer .footer-cols { gap: 1.5rem 1rem !important; }
  .site-footer .footer-col { gap: 0.5rem !important; }
  .site-footer .footer-col__title { margin-bottom: 0.25rem !important; }
  .site-footer .footer-col__links { gap: 0 !important; margin: 0 !important; }
  .site-footer .footer-col__links li { margin: 0 !important; }
  .site-footer .footer-col__links a { min-height: 32px !important; padding: 0.15rem 0 !important; line-height: 1.3 !important; }

  .site-footer .footer-social-list { flex-direction: row !important; gap: 1rem !important; margin: 0 !important; }
  .site-footer .footer-social-list li { margin: 0 !important; }
  .site-footer .footer-social-list a { padding: 0.2rem 0 !important; }
  .site-footer .footer-location { margin: 0 !important; }
  .site-footer .footer-credits { padding-top: 1rem !important; margin-top: 1rem !important; }
}

/* ---- Mobile: focus-areas (Expertise) testimonial matches the other focus-area pages ---- */
@media (max-width: 767px) {
  .expert-testi {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 1.25rem !important;
    align-items: stretch !important;
    text-align: left !important;
  }
  .expert-testi > div { flex: 0 0 auto !important; min-width: 0 !important; display: contents !important; }
  .expert-testi img {
    order: 1;
    width: 200px !important;
    height: auto !important;
    max-width: 200px !important;
    margin: 0 auto 1rem !important;
  }
  .expert-testi > div:last-child > p { order: 2; text-align: left !important; line-height: 1.5 !important; }
  .expert-testi > div:first-child > p { order: 3; text-align: left !important; margin: 0 !important; }
  .expert-testi > div:first-child > p:nth-of-type(1) { margin-top: 0.75rem !important; }
  .expert-testi > div:last-child > p > span { font-size: 1.625rem !important; margin-bottom: 0.25rem !important; }
}
@media (max-width: 767px) {
  .expert-testi > div:first-child > p:nth-of-type(1) { font-weight: 700 !important; font-size: 1.125rem !important; }
  .expert-testi > div:first-child > p:nth-of-type(2) { margin-top: 0.25rem !important; font-size: 1rem !important; }
}

/* Override .figma-flush > div padding/gap for the expertise testimonial */
@media (max-width: 767px) {
  .figma-flush > div.expert-testi {
    padding: 1.25rem !important;
    gap: 0 !important;
  }
}


/* ==== History page: compact closing CTA on mobile ==== */

@media (max-width: 767px) {
  .history-cta > div {
    padding: 2.25rem 1.25rem 2.5rem !important;
  }
  .history-cta h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    margin: 0 auto 1.75rem !important;
  }
  .history-cta > div > div {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .history-cta > div > div > div {
    padding: 1.5rem 1.25rem !important;
    gap: .75rem !important;
  }
  .history-cta h3 {
    font-size: 1.375rem !important;
    line-height: 1.25 !important;
  }
  .history-cta p {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }
  .history-cta a {
    align-self: stretch !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   CANONICAL HEADER — one composition at every breakpoint
   Loaded last so it supersedes the older per-band header blocks.
   Logo (left) · nav (right of logo) · CTA (far right) keep the same
   relationship; every dimension scales fluidly instead of stepping.
   ========================================================================== */
:root {
  /* Desktop regime (>=992px): values interpolate 992px -> 1440px */
  --hdr-h: clamp(64px, 3.57vw + 28.6px, 80px);
  --hdr-gutter: clamp(24px, 8.93vw - 64.6px, 64px);
  --hdr-logo-w: clamp(150px, 7.81vw + 72.5px, 185px);
  --hdr-link: clamp(14px, 0.67vw + 7.36px, 17px);
  --hdr-nav-gap: clamp(20px, 4.46vw - 24.3px, 40px);
  --hdr-slot-gap: clamp(16px, 3.57vw - 19.4px, 32px);
  --hdr-cta-fs: clamp(13px, 0.446vw + 8.57px, 15px);
  --hdr-cta-px: clamp(18px, 1.34vw + 4.7px, 24px);
  --hdr-cta-py: clamp(8px, 0.446vw + 3.57px, 10px);
}

@media (max-width: 991px) {
  :root {
    /* Hamburger regime: fixed bar height, gutter tracks page gutter */
    --hdr-h: 56px;
    --hdr-gutter: clamp(16px, 3.2vw - 2px, 24px);
    --hdr-logo-w: 130px;
    --hdr-slot-gap: 12px;
  }
}

.site-header {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
}

.site-header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin-inline: auto !important;
  height: var(--hdr-h) !important;
  min-height: var(--hdr-h) !important;
  max-height: var(--hdr-h) !important;
  padding: 0 var(--hdr-gutter) !important;
  gap: var(--hdr-slot-gap) !important;
}

.site-header .site-branding,
.site-header .site-branding a,
.site-header .site-logo,
.site-header .custom-logo-link {
  height: auto !important;
  flex-shrink: 0;
}

.site-header .site-logo__img,
.site-header .site-branding img,
.site-header .custom-logo,
.site-header img.logo {
  width: var(--hdr-logo-w) !important;
  max-width: 42vw !important;
  height: auto !important;
  max-height: none !important;
}

.site-header .nav-menu {
  gap: var(--hdr-nav-gap) !important;
}

.site-header .nav-menu > li > a,
.site-header .nav-menu > .menu-item > a {
  font-size: var(--hdr-link) !important;
  letter-spacing: 0.06em !important;
  line-height: 1.3 !important;
  padding: 0.35rem 0 !important;
}

.site-header .btn--cta {
  font-size: 15px !important;
  padding: 16px 32px !important;
  white-space: nowrap;
}

.site-header .menu-toggle {
  flex-shrink: 0;
}

@media (min-width: 992px) {
  /* Nav keeps the same centered slot at every desktop width */
  .site-header .main-nav {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
  }
}

/* Tablet (<=991px): hero lead spans the full inner width so the headline
   block is centered and fluid instead of capped at the desktop 743px. */
@media (max-width: 991px) {
  .hero-home--layout-single .hero-home__lead,
  body.home .hero-home--layout-single .hero-home__lead {
    max-width: none !important;
    width: 100% !important;
    margin-inline: auto !important;
    align-self: stretch !important;
  }
  .hero-home--layout-single .hero-home__accent,
  body.home .hero-home--layout-single .hero-home__accent {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
}

/* =========================================================================
   MOBILE / TABLET PARITY PASS - 2026-08-07 late PM (full-matrix re-measure,
   staging vs v1 export in 390px and 820px iframes; audit sections B1-B11).
   Everything above the desktop breakpoint was already verified; these bring
   the sub-992 and 768-991 bands in line. Appended to THIS file deliberately:
   it is the last figma-layer sheet, so in-file order wins every equal tie.
   ========================================================================= */

/* ---- B5: interior page-header height, tablet band (782-991 kept the old
   415px inner; export tablet renders the same 260 system) ---------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .page-header--valign-bottom .page-header__inner {
    min-height: 380px !important; /* export @820: inner 380, header 644 */
  }

  /* The custom archive template emits the page-header markup directly, so
     smith_has_hero_header_body_class() cannot discover it in post_content.
     Restore the same tablet padding as block-backed photo heroes: without
     this, 380 + 32 + 112 rendered 524px instead of the export's 644px. */
  body.blog .page-header--has-image,
  body.post-type-archive-podcast .page-header--has-image {
    padding-block: 132px !important;
  }

  /* A 7vw outer inset reproduces the export's measured 57.4px at 820, while
     the source theme's 8vw clamp produced a repeatable +16px section delta. */
  .site-cta {
    padding-block: 7vw !important;
  }

  /* At tablet width the export keeps featured-work cards split. The base
     max-991 stack made five 772px-wide 4:3 images and inflated Home's band
     from 2121px to 4990px. The compact split recipe reuses the export's
     tablet quote step and leaves phone stacking unchanged. */
  body.home .featured-work__item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 32px !important;
    margin-inline: 20px;
  }

  /* BugZap #143 follow-up: "when we get to 965px all images move to the left
     side even though they should alternate until breaking to 1 column."
     Exactly right, and it is a collision between this layer and the block.

     featured-work.css collapses to one column at max-width 991 and, as part of
     that stacked layout, resets every image to `order: 0` so the picture sits
     above its text. The rule directly above overrides the COLUMN half of that
     back to two columns for tablet - but nothing put the ORDER half back. So
     between 768 and 991 the cards stayed side by side while every image was
     pinned to the left, killing the alternation. Measured at 965: two 422.5px
     columns, and all four items rendering image 44..467 / text 499..921,
     reversed ones included.

     Restoring the desktop ordering for this band. Both the nth-child(even)
     rhythm and the explicit ACF `image_position` override are covered, because
     featured-work.css drives alternation from both and either can be the one
     in play on a given card. Below 768 the single-column stack is untouched -
     that is the "breaking to 1 column" she is happy with. */
  body.home .featured-work__item:nth-child(even) .featured-work__image,
  body.home .featured-work__item--reversed .featured-work__image {
    order: 2 !important;
  }
  body.home .featured-work__item:nth-child(even) .featured-work__info,
  body.home .featured-work__item--reversed .featured-work__info {
    order: 1 !important;
  }
  /* --natural is an explicit "do not flip this one" from the editor, so it has
     to win over the nth-child rhythm above, same as it does at desktop.
     The `:nth-child(even)` duplicate is not redundant: without it this rule is
     (0,3,1) against the nth-child rule's (0,4,1) and LOSES, which flipped the
     natural cards to the right as well - caught in testing, all four images
     ended up on the same side again just mirrored. featured-work.css pairs the
     selectors the same way at desktop for exactly this reason. */
  body.home .featured-work__item--natural .featured-work__image,
  body.home .featured-work__item--natural:nth-child(even) .featured-work__image {
    order: 0 !important;
  }
  body.home .featured-work__item--natural .featured-work__info,
  body.home .featured-work__item--natural:nth-child(even) .featured-work__info {
    order: 1 !important;
  }
  body.home .featured-work__image {
    min-height: 0 !important;
  }
  body.home .featured-work__info {
    padding: 20px !important;
  }
  body.home .featured-work__quote {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
}

/* ---- B1 REVERTED (BugZap #140, 2026-08-08): the export's focus-row images
   were broken 0-height assets, not a text-only design - media stays. ---- */

/* ---- B2/B8: the classless-band copy and the contact form run the export
   metrics at all widths, not just desktop -------------------------------- */
.page-id-8 section:not([class]) p {
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
}
.page-id-8 section:not([class]):not(:has(p)) > div {
  padding-bottom: 16px !important;
}
.page-id-8 section:not([class]) a {
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  padding: 14.4px 36px !important;
  border-radius: 999px !important;
}
.smith-contact-form .smith-contact-form__field {
  margin-bottom: 20px !important;
}
.smith-contact-form input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  height: 44px !important;
  font-weight: 300 !important;
}
.smith-contact-form textarea {
  height: 120px !important;
  font-weight: 300 !important;
}
.smith-contact-form h2 {
  margin-bottom: 24px !important;
}

/* ---- B3: podcast module below desktop = the export's horizontal scroller
   (390px measured: 287px cards, one row, swipe; ours stacked to 1964px).
   The card recipe (square image, date meta, no read-more, no body padding)
   now applies at every width; only the grid geometry is per-breakpoint. -- */
.latest-posts--podcast .latest-posts__thumb { aspect-ratio: 1 / 1 !important; }
.latest-posts--podcast .latest-posts__card-body { padding: 0 !important; }
.latest-posts--podcast .latest-posts__card-more { display: none !important; }
.latest-posts--podcast .latest-posts__card-title {
  font-size: var(--h4-card-size, 1.75rem) !important;
  line-height: var(--h4-card-lh, 1.286) !important;
  margin-top: 12px !important;
}
.latest-posts--podcast .latest-posts__card-excerpt { margin-top: 8px !important; }
@media (max-width: 991px) {
  .latest-posts--podcast .latest-posts__grid {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 287px;
    grid-template-columns: none !important;
    gap: 16px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
  }
  .latest-posts--podcast .latest-posts__card { scroll-snap-align: start; }
  .latest-posts--podcast .latest-posts__see-all {
    position: static;
    display: inline-block;
    margin-top: 8px;
  }
}

/* ---- B4 blog-row heading promotion: DELETED for BugZap #206. It restyled
   the blog heading into an eyebrow because the heading field used to carry
   "Blog:" + newline + deck, with the deck in a .content-list__heading-sub
   span. That span no longer exists - Christine moved the content onto the
   real eyebrow and heading fields - so all this did was squash her heading to
   12px/700/Barlow against the podcast heading's 52px/400/Hoefler.
   This is her "it keeps getting changed back": she fixed the content and a
   stale stylesheet kept overriding it.
   A matching pair lived in figma-insights-desktop.css (full note there) and a
   THIRD copy sized the same span under max-width:767px - all removed. Found
   by deleting every rule matching this selector from the live CSSOM and
   counting: 7 came out against the 4 grep had found, which is a reminder that
   grepping files misses what the cascade actually applies.
   Left alone deliberately: the two `.content-list__intro` rules in
   figma-insights-desktop.css share the same `:not(--image-left)` scoping but
   style the intro paragraph, which still exists and still renders right. */

/* ---- B7: the empty <ul class="content-list__list"> burns a flex gap at
   every width (whitespace defeats :empty) -------------------------------- */
.page-id-9 .content-list--media-sq400 .content-list__list:not(:has(li)),
.page-id-14 .content-list .content-list__list:not(:has(li)) {
  display: none !important;
}

/* ---- B9: home story-list rhythm at mobile (export list: 3 rows in 136px;
   ours ran the old 24px items / 40px gaps) ------------------------------- */
@media (max-width: 991px) {
  body.home .content-list--chapter .content-list__list,
  body.home .content-list--lg-items .content-list__list {
    gap: 4px !important;
  }
  body.home .content-list--chapter .content-list__list li,
  body.home .content-list--lg-items .content-list__list li {
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
    font-weight: 300 !important;
  }
}

/* ---- B6: bento cards are content-sized at every width (export ships no
   fixed min-heights anywhere; ours kept 669-833px floors in the 901-991
   band and 2.5rem gaps below 901) ---------------------------------------- */
.testimonial-bento__card {
  min-height: 0 !important;
  gap: 24px !important;
}

/* ---- type steps that were desktop-scoped but are universal in the export
   (FAQ answers, features card copy) -------------------------------------- */
.smith-faq__answer p {
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
}
.page-id-7 .content-features--stacked .content-features__item-text,
.page-id-7 .content-features--stacked .content-features__item-text p,
.page-id-8 .content-features__item-text p,
.page-id-9 .content-features__text p,
body.home .content-features--cards-filled .content-features__item-text,
body.home .content-features--cards-filled .content-features__item-text p {
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
}

/* ---- team grid at mobile: the export runs a compact 2-up grid (184x332
   cards); ours stacked full-width 508px cards ---------------------------- */
@media (max-width: 767px) {
  .block-team__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    /* BugZap #204. team.css caps the grid at max-width:360px below 576px,
       which is right for the single-column layout it was written for - but
       this block replaces that with a 2-up grid and left the cap standing.
       The result was two columns squeezed into 360px with the remainder as
       dead space on the right: measured 116px of it at a 500px viewport
       (grid 24..384) against a 24px left margin. The cap has to go wherever
       the column count is overridden, not in team.css, because the base
       theme has no figma layer and still runs the 1-column layout the cap
       belongs to. */
    max-width: none !important;
  }
  .block-team__photo {
    height: auto !important;
    aspect-ratio: 4 / 5;
  }
  .block-team__name { font-size: 1rem !important; }
  .block-team__role, .block-team__joined { font-size: 0.8125rem !important; }
}

/* =========================================================================
   ROUND-2 FIXES — BugZap #138/#139/#142-#148 (Agentis re-review + Matt,
   2026-08-08). Appended last so in-file order wins equal ties; !important
   throughout because this sheet still loads before the block CSS.
   ========================================================================= */

/* ---- #138/#143: home featured-work - the book covers ran object-fit:cover
   inside the full 476px row (cropped top/bottom, read as "an overlay").
   Now the text column sets the row height and the cover fits inside it. -- */
@media (min-width: 992px) {
  body.home .featured-work__item { align-items: stretch !important; }
  body.home .featured-work__item .featured-work__image {
    position: relative !important;
    align-self: stretch !important;
    height: auto !important;
  }
  /* #143 rev 3: inset:0 + height:100% made the contained cover fill the whole
     card — 420px against 324px of text at innerWidth 1537. Inset the top by
     the info column's own 48px and take the same off the height, and the
     cover lands exactly on the text height (measured d0 across all four
     cards). height must be explicit: on an absolutely positioned replaced
     element `height:auto` follows the intrinsic ratio and ignores `bottom`. */
  body.home .featured-work__item .featured-work__image img {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--fw-pad-y, 48px) !important;
    bottom: auto !important;
    width: 100% !important;
    height: calc(100% - (var(--fw-pad-y, 48px) * 2)) !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* ---- #142: home hero photo runs edge-to-edge below desktop.

   Third attempt, and the first two were the same mistake twice: both kept
   `object-fit: cover` and just raised the height floor, 480px then 720px.
   Cover crops by the box's ASPECT RATIO, not its absolute height, so a taller
   floor cannot fix it - and past a point it makes it worse.

   The collage is 1084x1536, i.e. PORTRAIT at 0.706. Worked through at 768
   wide with the old 720px floor: cover scales to max(768/1084, 720/1536) =
   0.708, rendering 768x1088 in a 720-tall box and discarding 368px - a third
   of the image. `object-position: 50% 100%` anchors the bottom, so the part
   thrown away is the TOP ROW. That is exactly "you only see 1 row of photos,
   then when you can finally see the 2nd row again, it's cut off". Showing both
   rows at 768 by raising the floor would have needed 768/0.706 = 1088px, and
   1400px at 991 - the floor would have to track the width, which is just the
   aspect ratio written badly.

   So: stop cropping below desktop. `height: auto` lets the image keep its own
   proportions, so the whole collage is always visible and simply scales with
   the viewport - "keep a minimum height to keep the images full height as it
   scales", which is what she asked for in the original report.

   The hero is taller on a narrow screen as a result (about 1.42x the viewport
   width). That is inherent: you cannot show a portrait collage edge-to-edge
   and also keep it short. Flagged on the ticket so it is a choice rather than
   a surprise. Desktop is untouched - it keeps the deliberate 744px cover crop
   with the bottom anchor. --------------------------------------------------- */
@media (max-width: 991px) {
  .hero-home__photo {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  .hero-home__photo img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }
}

/* ---- #144: about core-values photo fits instead of fills --------------- */
.page-id-7 .content-features--split .content-features__media img {
  object-fit: contain !important;
}

/* ---- #207: ...which is what put the collage 101px below its heading.
   The block instance carries `--media-square`, so the media box is pinned to
   aspect-ratio 1/1 - but Core-Values-1024x737.png is landscape (1.389). #144
   swapped cover for contain to stop the crop, and `contain` in a square box
   just converts that crop into dead space: measured on /about/ at 1440, box
   821x821, art 821x591.1, letterbox 115.1px top and bottom, art starting
   101.1px below "Integrated Strategy & Service".

   Drop the square so the box takes the asset's own ratio - art then starts at
   the box top and `contain` has nothing left to letterbox. The 22px is the
   list's leading offset (list top -> heading top: 20px to the li, +2px li
   padding), which lines the art up with the heading text rather than the
   column. Verified: box 821x591, letterboxY 0.0, artTop-headingTop 0.0px.

   Root cause is really the content: `--media-square` is an ACF per-instance
   toggle and it is simply wrong for a landscape asset. Turning that toggle off
   for this block makes both this rule and #144's a no-op - worth doing when
   someone is next in the About page in wp-admin. ---------------------------- */
.page-id-7 .content-features--media-square .content-features__media {
  aspect-ratio: auto !important;
}
.page-id-7 .content-features--media-square .content-features__media img {
  height: auto !important;
}

/* The 22px only makes sense while the photo sits BESIDE the list. The grid
   goes `flex-direction: column` at max-width 991px, and once the photo is
   stacked above the copy there is no heading to line up with - so leave the
   base 0.5rem alone down there. */
@media (min-width: 992px) {
  .page-id-7 .content-features--media-square .content-features__media {
    margin-top: 22px !important;
  }
}

/* ---- #145: "See all episodes" sits at the container's right edge - the
   head box was capped at 820px so the link floated mid-page.

   BugZap #206, second error: the same 820px cap centres the head on the OTHER
   latest-posts section too. #145 only ever unscoped the podcast one, so the
   blog row kept `max-width: 820px` with `margin: 230px auto` and its eyebrow
   sat at x=310 while every heading above it starts at the page gutter, x=80.
   Christine: "it should be left aligned to the entire page like the ones above
   so its all lined up on the left."
   Measured on /insights/ at 1440 - podcast head left 80 / width 1280 against
   blog head left 310 / width 820, a 230px difference on the same page.
   Dropping `--podcast` from the selector so both heads behave the same; the
   see-all link keeps its right-edge placement because that follows from the
   full-width head, which is what #145 was after in the first place.
   Her "no header needed here" is already satisfied - that head contains only
   the eyebrow, so there is nothing to remove. ---------------------------- */
@media (min-width: 992px) {
  .latest-posts__head {
    max-width: none !important;
    width: 100% !important;
  }
}

/* ---- #146: eyebrows are teal (newsletter + features ran gold) ---------- */
.smith-newsletter__eyebrow,
.content-features__eyebrow {
  color: #0F7E7C !important;
}

/* ---- #147: the insights blog-module head is centered ------------------- */
.page-id-9 .latest-posts:not(.latest-posts--podcast) .latest-posts__head {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ---- #148: footer newsletter box was a fixed 600px inside the flex
   footer - it overflowed the viewport below ~1300px instead of shrinking.
   It keeps its right alignment from the flex row but may now shrink. ----- */
.site-footer__content .footer-newsletter {
  width: auto !important;
  max-width: 600px !important;
  flex: 0 1 600px !important;
  min-width: 0 !important;
}
.footer-newsletter__box {
  width: auto !important;
  max-width: 100% !important;
}

/* ---- #203, reported three times. `flex-basis` applies to the MAIN axis, and
   .site-footer__content flips from row to column at 991px. Above that the
   600px basis above is a width, which is what #148 intended. Below it, the
   very same declaration silently becomes a HEIGHT, and `flex-shrink: 1` can't
   reclaim it because the column has no height constraint to shrink against.

   Measured on / at the switch: 992px (row) box height 502px and content-sized;
   860px (column) box height jumps to exactly 600px and stays there at 760 and
   390. The content only needs ~340-400px, so 204-261px of empty box sat below
   the form, and 232-321px between the last text and the credits divider. That
   is her "about 230px", and it is why this only ever appeared "when the footer
   breaks into a single col" - the bug is the axis change, not the spacing.

   Basis back to auto once stacked; the box then sizes to its content. Width is
   already handled by `width: auto` + `max-width: 600px` above, so nothing here
   affects the row layout. ------------------------------------------------- */
@media (max-width: 991px) {
  .site-footer__content .footer-newsletter {
    flex-basis: auto !important;
  }
}

/* ---- #139: checkerboard cards alternate when they stack to one column.
   2-col order [sage,teal / teal,sage] reads correct as a grid but stacks
   to sage,teal,teal,sage - swapping each group's 3rd and 4th item restores
   alternation while every card keeps its own colors/text. Applies to every
   section built on the cols-2 filled-cards pattern, per the ticket. ------ */
@media (max-width: 767px) {
  .content-features--cols-2.content-features--cards-filled .content-features__list {
    display: flex !important;
    flex-direction: column !important;
  }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(1) { order: 1; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(2) { order: 2; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(3) { order: 4; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(4) { order: 3; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(5) { order: 5; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(6) { order: 6; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(7) { order: 8; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(8) { order: 7; }
}

/* =========================================================================
   ROUND-3 FIXES — BugZap #149-#190 (Agentis QA round 3, 2026-08-12).
   Appended last so in-file order wins equal ties; !important where the
   earlier figma sheets would otherwise win on source order.
   ========================================================================= */

/* ---- #190: insights blog cards — square (1:1) thumbs fit more of the
   book-cover art than the old 3:2 crop. Blog variant only. */
.latest-posts:not(.latest-posts--podcast) .latest-posts__thumb {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}
.latest-posts:not(.latest-posts--podcast) .latest-posts__thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ---- #163: the blog list's eyebrow rendered 20px/no-caps; match the
   12px/700/1.68px uppercase treatment every other eyebrow uses. */
.latest-posts__eyebrow {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.68px !important;
  text-transform: uppercase !important;
}

/* ---- #162: the eyebrow on the navy newsletter band goes selective-yellow,
   not teal (the round-2 teal pass over-reached onto navy). */
.smith-newsletter .smith-newsletter__eyebrow { color: #f0b200 !important; }

/* ---- #180: "We" in the home hero reads too loose; ::first-letter spacing
   only affects the gap after the W. */
.hero-home__title::first-letter { letter-spacing: -0.12em; }

/* ---- #181: teal gradient scrim behind the transparent nav on image page
   headers (CSS supplied by Christine, verbatim). */
.page-header--has-image .page-header__overlay {
  background-color: rgba(15, 126, 124, 0.7);
}
body.has-hero-header .page-header--has-image .page-header__overlay::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 260px;
  background: linear-gradient(to bottom,
    rgba(15, 126, 124, 0.92) 0,
    rgba(15, 126, 124, 0.78) 30%,
    rgba(15, 126, 124, 0.35) 65%,
    rgba(15, 126, 124, 0));
  pointer-events: none;
}

/* ---- #165: lists inside posts had no markers, an 18px size mismatch
   against 16px body copy, and no spacing after. */
.single article ul.wp-block-list { list-style: disc !important; }
.single article ol.wp-block-list { list-style: decimal !important; }
.single article ul.wp-block-list,
.single article ol.wp-block-list {
  padding-left: 1.5em !important;
  margin: 0 0 32px !important;
}
.single article .wp-block-list li {
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-bottom: 10px !important;
}
.single article .wp-block-list li::marker { color: #0f7e7c; }

/* ---- #149: plain editor content on PAGES (glossary + other not-yet-built
   pages) gets a reading measure + margins instead of touching the viewport
   edge. Root-level plain nodes only — block sections and posts untouched. */
.page .entry-content > p,
.page .entry-content > h1, .page .entry-content > h2,
.page .entry-content > h3, .page .entry-content > h4,
.page .entry-content > ul, .page .entry-content > ol,
.page .entry-content > figure.wp-block-image,
.page .entry-content > .wp-block-buttons {
  max-width: 1240px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
.page .entry-content > :is(p, h1, h2, h3, h4, ul, ol):first-child { margin-top: 64px !important; }
.page .entry-content > :is(p, h1, h2, h3, h4, ul, ol):last-child { margin-bottom: 96px !important; }

/* ---- #150/#151, second pass: core Button blocks dropped into page content.

   The first pass scoped this to `.entry-content` and styled the pill navy.
   Both were wrong.

   SCOPE: there is no `.entry-content` on these pages. Measured on
   /newsletter/ (page 2913): block content renders as direct children of
   `article.page`, 30 of them, and `.entry-content` does not exist in the
   document at all. So the whole rule matched nothing and Christine's button
   came out as WordPress's default dark pill - exactly her "it doesn't format".
   Same failure as #226 and #195: a rule written against a container the page
   does not have. `.entry-content` is kept in the selector for any template
   that does use it, but `article.page` is the one that actually applies here.

   COLOUR: she asked for "the yellow background", and the first pass used navy.
   These now take the site's canonical gold CTA - #f0b200 with navy text - and
   its type: 15px / 700 / uppercase / 2.1px tracking, the same values #122 and
   #228 settled for every other uppercase button on the site. So a Buttons
   block added in the editor now looks like the CTAs already on the page
   instead of like core WordPress.

   Width matches the loose-content measure from #231, so a button lines up with
   the paragraphs above it rather than sitting in its own gutter. */
.entry-content .wp-block-buttons,
article.page .wp-block-buttons {
  margin-top: 24px !important;
}
.entry-content .wp-block-button__link,
article.page .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f0b200 !important;
  color: #0e1b44 !important;
  border: 1px solid #f0b200 !important;
  border-radius: 999px !important;
  padding: 14.4px 36px !important;
  font-family: var(--font-family-base, "Barlow", sans-serif) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 2.1px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.entry-content .wp-block-button__link:hover,
article.page .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus-visible,
article.page .wp-block-button__link:focus-visible {
  /* Same darkened gold the other CTAs use on hover. */
  background-color: #c79300 !important;
  border-color: #c79300 !important;
  color: #0e1b44 !important;
}

/* ---- #171: stacked footer — tighten the space between the newsletter box
   and the credits line. */
@media (max-width: 1099px) {
  .site-footer__content { row-gap: 24px !important; }
}

/* ---- #143: home featured-work — the cover column follows the text
   column's height instead of dictating the row height (desktop only;
   the grid stacks below 992). */
@media (min-width: 992px) {
  .featured-work__item { align-items: stretch !important; }
  /* #143 rev 3: the column is a stretched grid item, so it already gets the
     row height — the height:0 / min-height:100% pair was noise. Sizing now
     lives on the img inset above. */
  .featured-work__image { height: auto !important; min-height: 0 !important; }
  .featured-work__image img {
    width: 100% !important;
    top: var(--fw-pad-y, 48px) !important;
    bottom: auto !important;
    height: calc(100% - (var(--fw-pad-y, 48px) * 2)) !important;
    object-fit: contain !important;
  }
}

/* ---- #173: services Part 1 -> Part 2 gap halved (224px combined -> 112px).
   The two blocks carry these utility classes via their className fields. */
section.content-list.content-list--tight-bottom { padding-bottom: 56px !important; }
section.content-list.content-list--tight-top { padding-top: 56px !important; }

/* =========================================================================
   ROUND-3 FIXES, part 2 — testimonial system (BugZap #158-#161, #174-#176;
   Christine's #127 spec + Agentis design v1 business reference, 2026-08-12).
   ========================================================================= */

/* ---- #158/#127: the quote box is ONE paragraph style — no serif/bold
   lead paragraph. Pull quote (36/700 serif) stays as approved. */
.case-studies__quote,
.case-studies__quote p,
.case-studies__quote p:first-child {
  font-family: 'Barlow', sans-serif !important;
  font-size: 17px !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1.65 !important;
}

/* ---- #127: author + attribution are paragraph-sized; name stays bold;
   attribution is upright by default with <em> italicising book titles
   (#160 — template now allows the markup instead of printing it). */
.case-studies__author { font-size: 17px !important; font-weight: 700 !important; font-style: normal !important; }
.case-studies__book {
  font-size: 17px !important;
  font-weight: 300 !important;
  font-style: normal !important;
}
.case-studies__book em, .case-studies__book i { font-style: italic !important; }

/* ---- #159: the outlets strip sits under the testimonial at card level,
   centred across the card (template moved it out of the photo column). */
.case-studies__card > .case-studies__media-list {
  width: 100% !important;
  max-width: 62em;
  margin: 32px auto 0 !important;
  text-align: center !important;
  font-size: 17px !important;
  font-weight: 400 !important; /* BugZap #215 - was 300, see the note in
    figma-business-leadership-desktop.css. Three rules set this weight; all
    three had to move or the change would have been a no-op. */
}
.case-studies__media-list strong, .case-studies__media-list b { font-weight: 700; }

/* ---- #174/#176: bento cards match the case-study type scale — body
   paragraphs regular, name bold at paragraph size, role upright. */
.testimonial-bento__quote p:not(:first-child) {
  font-size: 17px !important;
  font-weight: 300 !important;
}
.testimonial-bento__name { font-size: 17px !important; font-weight: 700 !important; font-style: normal !important; }
.testimonial-bento__role {
  font-size: 17px !important;
  font-weight: 300 !important;
  font-style: normal !important;
}
.testimonial-bento__role em, .testimonial-bento__role i { font-style: italic !important; }

/* ---- #175: bento media mentions formatted like the case-study strip —
   bold "Featured in:" lead, regular outlet list. */
.testimonial-bento__media {
  font-size: 17px !important;
  font-weight: 300 !important;
}
.testimonial-bento__media strong, .testimonial-bento__media b { font-weight: 700; }

/* ---- #171 (follow-up): the 60px between the newsletter box and the
   credits line comes from .site-footer__inner's flex gap, not the
   content grid. Verified 60 -> 28 at 1043/390. */
@media (max-width: 1099px) {
  .site-footer__inner { row-gap: 28px !important; }
}


/* =========================================================================
   ROUND-4 FIXES — Agentis live re-review (#191/#192 + needs_revision
   replies on #134/#139/#142/#144/#163/#179), 2026-08-12 evening.
   ========================================================================= */

/* ---- #191: author + book under the photo (photo width, centred);
   outlets under the quote (quote width, centred). */
.case-studies__media .case-studies__author,
.case-studies__media .case-studies__book {
  text-align: center !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
.case-studies__media .case-studies__author { margin-top: 20px !important; }
.case-studies__body .case-studies__media-list {
  width: 100% !important;
  margin: 28px 0 0 !important;
  text-align: center !important;
  font-size: 17px !important;
  font-weight: 400 !important; /* BugZap #215 - was 300, third of the three
    rules setting this weight; see figma-business-leadership-desktop.css */
}

/* ---- #192: team bio modal — LinkedIn tucks up under the joined line with
   the same rhythm, and the panel gets breathing room at the bottom. */
.block-team__modal-linkedin { margin-top: 10px !important; display: inline-flex !important; }
.block-team__modal-bio { margin-top: 10px !important; }
/* BugZap #192 - the 40px bottom space moved to blocks/team/team.css, together
   with the align-items:flex-start that makes it reachable. It never took
   effect from here: the body was a stretched flex item in the scrolling
   panel, so its padding was painted above the overflowing bio text. Do not
   re-add the override here - fix it at the source rule. */

/* ---- #134/#163: blog list head — eyebrow + real heading, left aligned
   like the podcast section above it. */
.latest-posts:not(.latest-posts--podcast) .latest-posts__head {
  text-align: left !important;
  justify-content: flex-start !important;
}
.latest-posts:not(.latest-posts--podcast) .latest-posts__heading {
  font-size: 44px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ---- #139 rev 2: the filled-card checkerboards go single-column below
   992 (not 768) — Christine measured green/teal/teal/green from 991 down
   to 768. Apply the alternating swap across the whole stacked range. */
@media (max-width: 991px) {
  .content-features--cols-2.content-features--cards-filled .content-features__list { grid-template-columns: 1fr !important; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(1) { order: 1; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(2) { order: 2; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(3) { order: 4; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(4) { order: 3; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(5) { order: 5; }
  .content-features--cols-2.content-features--cards-filled .content-features__item:nth-child(6) { order: 6; }
}

/* ---- #144 rev 2: split-with-photo — text keeps its measure, the image
   gives way and scales down (still contain, never cropped). */
@media (min-width: 768px) {
  .content-features--img-left .content-features__content,
  .content-features--img-right .content-features__content { flex: 1 1 440px; min-width: 440px; }
  .content-features--img-left .content-features__media,
  .content-features--img-right .content-features__media { flex: 1 1 0; min-width: 0; }
  .content-features--img-left .content-features__media img,
  .content-features--img-right .content-features__media img { width: 100%; height: auto; object-fit: contain; }
}

/* ---- #179 follow-up: hide the Resources nav item while the resources
   section itself is hidden. Remove this rule when the section returns. */
.smith-section-nav a[href="#resources"] { display: none !important; }

/* =========================================================================
   ROUND-5 FIXES — Agentis re-review, 2026-08-13. Diagnosed live against
   the deployed CSSOM (not by injection).
   ========================================================================= */

/* ---- #134/#163 rev 2: the round-2 rule `.page-id-9 ... { text-align:
   center !important }` (from when centred WAS the ask) outranks the
   round-4 left-align on specificity. Match it and win on order. */
.page-id-9 .latest-posts:not(.latest-posts--podcast) .latest-posts__head {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* ---- #193/#197: pull quote + testimonial body centred (per the example
   card Christine added to the business page; pull is already Hoefler 400). */
.case-studies__pull,
.case-studies__quote { text-align: center !important; }

/* ---- #174/#194: "no third font" — the round-3 rule set size/weight on
   later quote paragraphs but not the family, so a serif rule still won.
   Everything after the lead paragraph is Barlow. */
.testimonial-bento__quote p:not(:first-child) {
  font-family: 'Barlow', sans-serif !important;
  font-style: normal !important;
}

/* ---- #143 rev 2/3: below 992 the desktop stretch rules left the cover
   column 0px tall. rev 2 reset the column but left the img absolutely
   positioned, so the column still measured 0 and the 420px cover rendered
   straight over the quote (measured at 430px, 2026-08-13). In flow now. */
@media (max-width: 991px) {
  .featured-work__image { height: auto !important; min-height: 0 !important; }
  .featured-work__image img {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 360px !important;
    object-fit: contain !important;
  }
}

/* ---- #196: phone widths — measured 44px between the newsletter box and
   credits at 578; 12px row gap lands it at ~28 to match desktop rhythm. */
@media (max-width: 640px) {
  .site-footer__inner { row-gap: 12px !important; }
}

/* ---- #193 / #217 / #218: case-study testimonial type ---------------------
   Christine's spec on #193: pull quote Hoefler 400, author Barlow 400, book
   Barlow 400, quote Barlow 400. Measured before this on /focus-areas/business/
   at 1440: pull Hoefler 700, author Barlow 700, book Barlow 300, quote
   Barlow 300 - all four wrong, from three different files.

   #217 ("the header font in the testimonials is heavier than headers
   elsewhere") is the same element: every h2 on the page is already Hoefler
   400 52px, so the heavy "header" she means is the pull quote at 700.

   #218 is the p:last-child rule in figma-business-leadership-desktop.css,
   which bolds the final quote paragraph on the assumption it is an
   attribution line - "export runs it bold 17". On the gold Louisa Loran card
   the last paragraph is ordinary body copy, so it came out bold against the
   three 300-weight paragraphs above it.

   Scoped through .case-studies__card so these beat
   .case-studies__card--feature .case-studies__quote (0,2,0) and
   .case-studies__quote > p:last-child, and placed here because this file
   loads after figma-business-leadership-desktop.css. */
.case-studies__card .case-studies__pull { font-weight: 400 !important; }
.case-studies__card .case-studies__quote,
.case-studies__card .case-studies__quote p,
.case-studies__card .case-studies__quote > p:last-child { font-weight: 400 !important; }
.case-studies__card .case-studies__author { font-weight: 400 !important; }
.case-studies__card .case-studies__book { font-weight: 400 !important; }