/* ==========================================================================
   Sydney IFA — theme layer (everything theme.json cannot express)
   Palette + type live in theme.json; these are component styles for the
   sy- patterns. Mobile-first; 375px is the design viewport; 782px matches
   the core columns/navigation breakpoint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

@media (max-width: 781px) {
  .sy-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 782px) {
  .sy-hide-desktop {
    display: none !important;
  }
}

/* Reveal targets. Hidden state is a CLASS added by JS (never inline styles),
   with a pure-CSS delayed failsafe: if scripting halts for any reason, every
   pending element reveals itself after 2.5s. No JS = nothing hidden at all. */
.sy-reveal {
  will-change: transform, opacity;
}

.sy-reveal-pending {
  opacity: 0;
  transform: translateY(24px);
  animation: sy-reveal-failsafe 0.6s ease 2.5s forwards;
}

@keyframes sy-reveal-failsafe {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy-reveal,
  .sy-reveal-pending {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   Header / FCA micro-strip
   -------------------------------------------------------------------------- */

/* Tier A — utility strip (navy). Phone/email/address left, FCA right.
   Mobile: contact icons stay tappable; FCA text wraps below at 12px. */
.sy-utility-strip {
  padding: 0 var(--wp--preset--spacing--40);
}

/* One 40px row: contacts inline-left (no wrap), banner fills the rest. */
.sy-utility-strip__inner {
  min-height: 40px;
  flex-wrap: nowrap !important;
}

.sy-utility-contacts {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  gap: 1.5rem;
  white-space: nowrap;
}

.sy-utility-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.4;
  white-space: nowrap;
}

.sy-utility-item:hover .sy-utility-label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sy-utility-item svg {
  color: var(--wp--preset--color--sy-blue);
  flex-shrink: 0;
}

.sy-utility-fca {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin: 0;
}

@media (max-width: 781px) {
  /* mobile (addendum 10): strip is the running banner ONLY — contact icons
     move to the header bar row. */
  .sy-utility-contacts {
    display: none;
  }

  .sy-utility-strip__inner {
    justify-content: center;
  }
}

/* Tier B — slim sticky nav bar (~72px), shadow only after scroll */
.sy-header-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--sy-silver);
  padding: 0 var(--wp--preset--spacing--40);
  transition: box-shadow 200ms ease;
}

body.sy-scrolled .sy-header-bar {
  box-shadow: 0 2px 14px rgba(18, 78, 142, 0.14);
}

.sy-header-bar__inner {
  min-height: 72px;
}

.sy-header-logo img {
  max-height: 48px;
  width: auto;
}

.sy-header-bar .wp-block-navigation a {
  font-size: 0.9375rem; /* 15px */
  font-weight: 500;
}

/* Active page: 2px sy-blue underline, offset 6px */
.sy-header-bar .wp-block-navigation a[aria-current='page'],
.sy-header-bar .wp-block-navigation .current-menu-item > a {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--sy-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Services dropdown (desktop): panel opens BELOW the bar — nav items fill
   the 72px bar height so the submenu top:100% lands on the bar edge. */
@media (min-width: 782px) {
  .sy-header-bar .wp-block-navigation__container > .wp-block-navigation-item {
    height: 72px;
    align-items: center;
  }

  .sy-header-bar .wp-block-navigation__submenu-container {
    top: 100% !important;
    background: var(--wp--preset--color--base) !important;
    border: 1px solid var(--wp--preset--color--sy-silver) !important;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(18, 50, 74, 0.12);
    padding: 4px 0;
    min-width: 240px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  }

  .sy-header-bar .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
  .sy-header-bar .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container {
    opacity: 1;
    transform: translateY(0);
  }

  .sy-header-bar .wp-block-navigation__submenu-container .wp-block-navigation-item {
    height: auto;
    border-bottom: 1px solid var(--wp--preset--color--sy-surface);
  }

  .sy-header-bar .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
    border-bottom: 0;
  }

  .sy-header-bar .wp-block-navigation__submenu-container a {
    color: var(--wp--preset--color--sy-ink) !important;
    padding: 12px 16px !important;
    width: 100%;
  }

  .sy-header-bar .wp-block-navigation__submenu-container a:hover,
  .sy-header-bar .wp-block-navigation__submenu-container a:focus {
    background: var(--wp--preset--color--sy-surface);
  }
}

.sy-header-cta .wp-block-button__link {
  white-space: nowrap;
}

/* contact icons live in the bar on mobile only (addendum 10) */
.sy-header-actions {
  display: none;
}

@media (max-width: 781px) {
  .sy-header-cta {
    display: none !important; /* WP layout CSS sets display:flex later in the cascade */
  }

  .sy-header-bar__inner {
    min-height: 64px;
  }

  .sy-header-logo img {
    max-height: 40px;
  }

  .sy-header-actions {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .sy-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--wp--preset--color--sy-navy);
    text-decoration: none;
  }

  .sy-header-icon svg {
    width: 22px;
    height: 22px;
  }

  /* standard 3-line hamburger — core's default SVG only draws 2 bars.
     Core's button is flex with align-items:normal, which top-anchors the
     fixed-height bar stack — centre it so the glyph shares the phone
     icon's centreline. */
  .wp-block-navigation__responsive-container-open {
    align-items: center;
    justify-content: center;
  }

  .wp-block-navigation__responsive-container-open svg {
    display: none;
  }

  .wp-block-navigation__responsive-container-open::before {
    content: "";
    --sy-burger: var(--wp--preset--color--sy-navy);
    width: 24px;
    height: 18px;
    background:
      linear-gradient(var(--sy-burger) 0 0) left top / 24px 2px no-repeat,
      linear-gradient(var(--sy-burger) 0 0) left center / 24px 2px no-repeat,
      linear-gradient(var(--sy-burger) 0 0) left bottom / 24px 2px no-repeat;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.sy-hero-panel {
  min-height: 260px;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.sy-hero-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(130% 100% at 0% 100%, rgba(206, 206, 206, 0.22) 0%, rgba(206, 206, 206, 0) 50%);
}

.sy-hero-panel::after {
  content: '';
  position: absolute;
  left: -20%;
  right: -20%;
  top: 42%;
  height: 32%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100% 0 100% 0 / 100% 0 100% 0;
  transform: rotate(-8deg);
}

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.sy-trust-strip .sy-badge {
  text-align: center;
}

.sy-trust-strip img {
  height: 96px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 782px) {
  .sy-trust-strip.wp-block-columns {
    justify-content: space-between;
  }

  /* columns shrink to their badge so space-between distributes the rail;
     max-content basis (not auto) stops block-level figures filling the row */
  .sy-trust-strip.wp-block-columns > .wp-block-column {
    flex: 0 1 max-content;
    display: flex;
    justify-content: center;
  }

  .sy-trust-strip .wp-block-image {
    width: fit-content;
  }
}

@media (max-width: 781px) {
  .sy-trust-strip img {
    height: 64px;
  }
}

.sy-badge-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--wp--preset--color--sy-silver);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--sy-text-secondary);
  font-size: 0.8125rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Services grid
   -------------------------------------------------------------------------- */

.sy-service-card {
  height: 100%;
  border: 1px solid var(--wp--preset--color--sy-silver);
  background: var(--wp--preset--color--base);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.sy-service-card:hover,
.sy-service-card:focus-within {
  border-color: var(--wp--preset--color--sy-blue);
  box-shadow: 0 4px 12px rgba(18, 78, 142, 0.12);
}

.sy-service-card img,
.sy-service-card .sy-service-panel {
  aspect-ratio: 3 / 2; /* client banners' native ratio — WHOLE image, never cropped */
  object-fit: contain; /* banners fill exactly; the portrait MCA flyer letterboxes */
  background: #ffffff;
  width: 100%;
  height: auto;
  display: block;
}

.sy-service-card .sy-card-link a {
  text-decoration: none;
}

.sy-service-card .sy-card-link a::after {
  content: ' ›';
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.sy-quote-card {
  height: 100%;
  border: 1px solid var(--wp--preset--color--sy-silver);
  border-top: 3px solid var(--wp--preset--color--sy-blue);
  background: var(--wp--preset--color--base);
}

.sy-quote-card cite {
  font-style: normal;
  font-weight: 600;
  color: var(--wp--preset--color--sy-navy);
}

/* Desktop: contained 3-up grid — cards can never exceed the wrapper. */
@media (min-width: 782px) {
  .sy-testimonial-track {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .sy-testimonial-track > * {
    min-width: 0;
  }
}

/* Mobile: one-per-view swipe carousel */
@media (max-width: 781px) {
  .sy-testimonial-track {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sy-testimonial-track > * {
    flex: 0 0 86% !important;
    scroll-snap-align: center;
  }

  .sy-testimonial-track.sy-stack-mobile {
    display: block !important;
    overflow: visible;
  }

  .sy-testimonial-track.sy-stack-mobile > * {
    margin-bottom: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Embed slot (Trustindex / Google Map) — reserved height kills CLS
   -------------------------------------------------------------------------- */

.sy-embed-slot {
  min-height: 480px;
  width: 100%;
}

.sy-embed-slot--map {
  min-height: 320px;
}

@media (min-width: 782px) {
  .sy-embed-slot--map {
    min-height: 420px;
  }
}

.sy-embed-slot iframe {
  width: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Logo marquee
   -------------------------------------------------------------------------- */

.sy-marquee {
  overflow: hidden;
  width: 100%;
}

.sy-marquee-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
}

.sy-marquee-track img,
.sy-marquee-track .sy-logo-chip img {
  height: 56px;
  width: auto;
  max-width: none;
  object-fit: contain;
  align-self: center;
}

/* opt-in style variation (Styles panel) restores the old muted look */
.is-style-greyscale-logos .sy-marquee-track img {
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 150ms ease, opacity 150ms ease;
}

.is-style-greyscale-logos .sy-marquee-track img:hover {
  filter: none;
  opacity: 1;
}

.sy-logo-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Static state (no JS / not yet initialised / reduced motion): the strip
   wraps inside the page. !important beats WordPress's .wp-container is-nowrap
   layout CSS, which otherwise forces a viewport-overflowing single row. */
.sy-marquee .sy-marquee-track,
.sy-logo-grid .sy-marquee-track {
  flex-wrap: wrap !important;
  justify-content: center;
  row-gap: 1rem;
  width: auto;
}

/* Animated state: compositor-driven CSS keyframe loop (no JS per frame). */
.sy-marquee.sy-marquee--animated .sy-marquee-track {
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  width: max-content;
  animation: sy-marquee-scroll var(--sy-marquee-duration, 40s) linear infinite;
}

@keyframes sy-marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

.sy-marquee--animated:hover .sy-marquee-track,
.sy-marquee--paused .sy-marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .sy-marquee.sy-marquee--animated .sy-marquee-track {
    flex-wrap: wrap !important;
    justify-content: center;
    width: auto;
    animation: none !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Booking CTA fee cards
   -------------------------------------------------------------------------- */

.sy-fee-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  height: 100%;
}

.sy-fee-card p {
  margin: 0;
}

.sy-fee-amount {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Downloads
   -------------------------------------------------------------------------- */

.sy-download-row {
  border: 1px solid var(--wp--preset--color--sy-silver);
  background: var(--wp--preset--color--base);
  transition: border-color 150ms ease;
}

.sy-download-row:hover {
  border-color: var(--wp--preset--color--sy-blue);
}

.sy-download-row a {
  text-decoration: none;
  font-weight: 500;
}

.sy-download-row--pending {
  border-style: dashed;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Team profiles
   -------------------------------------------------------------------------- */

.sy-team-row {
  border-bottom: 1px solid var(--wp--preset--color--sy-silver);
}

.sy-team-row:last-child {
  border-bottom: 0;
}

.sy-team-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  max-height: 320px;
  background: var(--wp--preset--color--sy-surface);
  border: 1px solid var(--wp--preset--color--sy-silver);
  color: var(--wp--preset--color--sy-silver);
  font-size: 3rem;
}

.sy-team-role {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  color: var(--wp--preset--color--sy-text-secondary);
}

/* --------------------------------------------------------------------------
   Contact details
   -------------------------------------------------------------------------- */

.sy-contact-card {
  height: 100%;
  text-align: center;
  border: 1px solid var(--wp--preset--color--sy-silver);
  border-top: 3px solid var(--wp--preset--color--sy-blue);
  background: var(--wp--preset--color--base);
}

.sy-contact-card .sy-contact-icon {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--wp--preset--color--sy-blue);
}

/* --------------------------------------------------------------------------
   Sticky actions bar (mobile only)
   -------------------------------------------------------------------------- */

.sy-sticky-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  box-shadow: 0 -2px 10px rgba(18, 78, 142, 0.25);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.sy-sticky-actions .wp-block-buttons {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.sy-sticky-actions .wp-block-button {
  flex: 1 1 0;
}

.sy-sticky-actions .wp-block-button__link {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

.sy-sticky-actions .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

@media (min-width: 782px) {
  .sy-sticky-actions {
    display: none;
  }
}

@media (max-width: 781px) {
  body {
    /* room so the bar never covers the compliance footer */
    padding-bottom: calc(var(--wp--custom--sy-sticky-bar-height, 4.4rem) + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   Compliance footer — FCA prominence rules enforced in CSS
   -------------------------------------------------------------------------- */

.sy-footer-warning {
  border-top: 3px solid var(--wp--preset--color--sy-blue);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.sy-footer-warning p {
  /* never below 14px, whatever a future edit does elsewhere */
  font-size: max(0.875rem, 14px) !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

.sy-footer-columns a {
  color: var(--wp--preset--color--sy-footer-text);
  text-decoration: none;
  display: inline-block;
  padding: 0.35rem 0;
}

.sy-footer-columns a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sy-footer-columns h3 {
  color: #ffffff;
  font-size: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sy-footer-logo img {
  max-width: 180px;
  height: auto;
}

.sy-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.sy-footer-legal p {
  font-size: max(0.875rem, 14px);
  color: var(--wp--preset--color--sy-footer-text);
  line-height: 1.6;
}

.sy-footer-copyright p {
  font-size: max(0.875rem, 14px);
  color: var(--wp--preset--color--sy-footer-text);
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

.sy-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  color: var(--wp--preset--color--sy-text-secondary);
}

.is-style-section-navy .sy-eyebrow,
.is-style-section-gradient .sy-eyebrow {
  color: var(--wp--preset--color--sy-footer-text);
}

/* Fluent Forms: align with the token system */
.fluentform .ff-btn-submit {
  background: var(--wp--preset--color--sy-blue-deep) !important;
  color: #fff !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 0.75rem 1.5rem !important;
}

.fluentform .ff-btn-submit:hover {
  background: var(--wp--preset--color--sy-navy) !important;
}

/* Comfortable touch targets for inline links in dense areas (Lighthouse target-size) */
.sy-card-link a,
.sy-download-row a {
  display: inline-block;
  padding: 0.4rem 0;
}

/* Footer accreditation badge (NACFB) — white card so it reads on navy */
.sy-footer-accreditation img {
  background: #ffffff;
  padding: 6px;
  height: auto;
}

/* Footer accreditation chip (ICO): quiet outline on navy, not a white box */
.sy-footer-columns .sy-badge-placeholder {
  background: transparent;
  border-color: var(--wp--preset--color--sy-footer-text);
  color: var(--wp--preset--color--sy-footer-text);
  min-height: 0;
  padding: 0.45rem 0.9rem;
}

/* Reserved embed slot placeholder (removed at staging when the widget lands) */
.sy-embed-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: inherit;
  background: var(--wp--preset--color--sy-surface);
  border: 1px dashed var(--wp--preset--color--sy-silver);
}

.sy-embed-placeholder p {
  color: var(--wp--preset--color--sy-graphite);
  font-size: 0.9375rem;
  margin: 0;
  padding: 1rem;
  text-align: center;
}

/* Yell badge chip (brand logotype) wrapping the listing link */
.sy-yell-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.sy-yell-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #ffdc00;
  border: 1px solid var(--wp--preset--color--sy-silver);
  color: #1a1a1a;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: 1.05rem;
}

/* ==========================================================================
   P5 addendum 2 — editorial polish layer
   ========================================================================== */

/* Page hero: identical interior-page banner — gradient, swoosh, breadcrumb */
.sy-page-hero {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

@media (min-width: 782px) {
  .sy-page-hero {
    min-height: 240px;
  }
}

.sy-page-hero::after {
  content: '';
  position: absolute;
  right: -12%;
  top: -50%;
  width: 55%;
  height: 200%;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 100% 0 100% 0 / 100% 0 100% 0;
  transform: rotate(-14deg);
  pointer-events: none;
}

.sy-page-hero h1 {
  margin: 0;
  position: relative;
  z-index: 1;
}

.sy-page-hero .sy-breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--wp--preset--color--sy-footer-text);
  font-size: 0.875rem;
  margin: 0.6rem 0 0;
}

.sy-page-hero .sy-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.sy-page-hero .sy-breadcrumb a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sy-page-hero .sy-breadcrumb svg {
  flex-shrink: 0;
  margin-right: -0.15rem;
}

/* Overline labels (13px, uppercase, letterspaced; sy-blue-deep for AA) */
.sy-overline,
.sy-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--wp--preset--color--sy-blue-deep);
  margin-bottom: 0;
}

.is-style-section-navy .sy-overline,
.is-style-section-gradient .sy-overline,
.is-style-section-navy .sy-eyebrow,
.is-style-section-gradient .sy-eyebrow {
  color: var(--wp--preset--color--sy-footer-text);
}

.sy-overline + h2,
.sy-eyebrow + * {
  margin-block-start: 0.75rem !important;
}

/* Vertical rhythm: centered section H2s get 3rem to their content */
main .wp-block-group > h2.has-text-align-center + * {
  margin-block-start: 3rem;
}

main .wp-block-group > .sy-overline + h2.has-text-align-center + * {
  margin-block-start: 3rem;
}

/* Yell band */
.sy-yell-band .sy-yell-roundel {
  margin-block-start: 1.25rem;
}

.sy-yell-chip--lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.35rem;
}

.sy-yell-button {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border: 1.5px solid var(--wp--preset--color--sy-blue-deep);
  border-radius: 8px;
  color: var(--wp--preset--color--sy-blue-deep);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.sy-yell-button:hover,
.sy-yell-button:focus-visible {
  background: var(--wp--preset--color--sy-blue-deep);
  color: #ffffff;
}

/* Reserved review-card row — zero footprint until populated */
.sy-yell-cards:empty,
.sy-yell-cards {
  min-height: 0;
}

/* Card polish */
.sy-service-card {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.sy-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(18, 78, 142, 0.14);
}

.sy-card-link a::after {
  display: inline-block;
  transition: transform 250ms ease;
}

.sy-service-card:hover .sy-card-link a::after {
  transform: translateX(4px);
}

.sy-quote-card {
  border-radius: 8px;
  position: relative;
}

/* Inline-SVG quote mark — no font dependency (the trimmed Archivo subset
   made a text glyph unreliable, and an octal-escape bug rendered tofu). */
.sy-quote-card::before {
  content: '';
  position: absolute;
  top: 0.9rem;
  left: 1.1rem;
  width: 2.6rem;
  height: 2.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23167EC6' fill-opacity='0.16' d='M9.8 5.5C6.8 7.3 4.8 10.1 4.8 13.4c0 2.8 1.7 4.9 4.2 4.9 2.2 0 3.8-1.6 3.8-3.7 0-2-1.5-3.5-3.4-3.5-.3 0-.6 0-.9.1.4-1.7 1.7-3.3 3.4-4.2L9.8 5.5Zm9 0c-3 1.8-5 4.6-5 7.9 0 2.8 1.7 4.9 4.2 4.9 2.2 0 3.8-1.6 3.8-3.7 0-2-1.5-3.5-3.4-3.5-.3 0-.6 0-.9.1.4-1.7 1.7-3.3 3.4-4.2L18.8 5.5Z'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

.sy-quote-card > p:first-child {
  position: relative;
  padding-top: 1.1rem;
}

.sy-quote-card p:last-child {
  border-top: 1px solid var(--wp--preset--color--sy-silver);
  padding-top: 0.85rem;
  margin-top: 1rem;
}

.sy-quote-card cite {
  color: var(--wp--preset--color--sy-blue-deep);
}

.sy-fee-card,
.sy-contact-card,
.sy-download-row {
  border-radius: 8px;
}

/* Buttons: subtle lift on hover (bg darkening comes from theme.json) */
.wp-element-button {
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.wp-element-button:hover {
  transform: scale(1.02);
}

/* Mobile sticky bar slides up after first scroll; visible without JS */
.sy-sticky-actions {
  transition: transform 300ms ease;
}

.sy-sticky-actions.sy-sticky-hidden {
  transform: translateY(110%);
}

@media (prefers-reduced-motion: reduce) {
  .sy-sticky-actions {
    transition: none;
    transform: none !important;
  }

  .sy-service-card:hover,
  .wp-element-button:hover {
    transform: none;
  }
}

/* ==========================================================================
   P5 addendum 3 — structure, rhythm & type
   ========================================================================== */

/* 1) Sections sit FLUSH: kill root/template-part gaps; whitespace lives
      inside sections as padding (post-content blockGap is 0 via theme.json) */
body .wp-site-blocks > * + * {
  margin-block-start: 0 !important;
}

.wp-site-blocks {
  padding: 0;
}

main.wp-block-group {
  margin: 0;
}

/* 3) type consistency: balanced wrapping where headings legitimately wrap */
h1, h2, h3 {
  text-wrap: balance;
}

/* 4) decorative system: 48x3 sy-blue rounded rule under every section H2 */
main h2.wp-block-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: var(--wp--preset--color--sy-blue);
  margin-top: 1.1rem;
}

main h2.wp-block-heading.has-text-align-center::after {
  margin-left: auto;
  margin-right: auto;
}

.is-style-section-navy h2.wp-block-heading::after,
.is-style-section-gradient h2.wp-block-heading::after {
  background: rgba(255, 255, 255, 0.85);
}

/* hairline where tint sections meet white */
main .is-style-section-tint {
  border-top: 1px solid var(--wp--preset--color--sy-silver);
  border-bottom: 1px solid var(--wp--preset--color--sy-silver);
}

/* 5) header: logo left · nav dead-centre · CTA right */
@media (min-width: 782px) {
  .sy-header-bar__inner {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .sy-header-bar__inner > .sy-header-logo {
    justify-self: start;
  }

  .sy-header-bar__inner > .wp-block-navigation {
    justify-self: center;
  }

  .sy-header-bar__inner > .sy-header-cta {
    justify-self: end;
  }
}

@media (max-width: 781px) {
  .sy-header-bar__inner {
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.25rem;
  }
}

.sy-header-cta .wp-block-button__link {
  font-size: 0.9375rem;
  padding: 0.625rem 1.25rem;
}

/* 6) trust strip: 2rem air between heading block and badge row;
      mobile 2x2 with equal gaps */
.sy-trust-strip {
  margin-block-start: 2rem !important;
}

@media (max-width: 781px) {
  .sy-trust-strip.wp-block-columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    justify-items: center;
    align-items: center;
  }
}

/* 8) spacing rhythm: 2rem grid gaps; 4rem column gap on image/text rows */
main .wp-block-columns {
  gap: 1.5rem 2rem;
}

@media (min-width: 782px) {
  main .wp-block-columns.are-vertically-aligned-center {
    gap: 4rem;
  }

  .sy-team-row.wp-block-columns {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* form rhythm */
.fluentform .ff-el-group {
  margin-bottom: 1.5rem;
}

.sy-footer-columns .wp-block-columns {
  gap: 2rem 2.5rem;
}

/* 9) mobile tap targets: utility strip icons */
@media (max-width: 781px) {
  .sy-utility-item {
    min-width: 44px;
    min-height: 40px;
    justify-content: center;
  }

  .sy-header-bar .wp-block-navigation__responsive-container-open {
    min-width: 44px;
    min-height: 44px;
  }

  /* footer tiers: even stacked padding */
  .sy-footer-columns .wp-block-column {
    padding-bottom: 0.5rem;
  }
}

/* ==========================================================================
   P5 addendum 4 — snag list
   ========================================================================== */

/* 2a) card/pillar titles: compact 17px; wrap between words (never mid-word,
   never clipped — long titles like "Business Loans and Asset Finance" wrap). */
.sy-service-card h3,
.sy-pillars h3 {
  font-size: 1.0625rem;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

/* 2b) service cards size to content — tight, consistent internals */
.sy-service-card {
  display: flex;
  flex-direction: column;
}

.sy-service-card > .wp-block-group {
  padding: 1rem 1.25rem 1.25rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 0;
}

.sy-service-card h3 {
  margin: 0;
}

.sy-service-card .sy-card-link {
  margin: 0;
}

.sy-services-grid.wp-block-columns {
  align-items: stretch;
}

/* 3) button breathing room: every button block under content */
main .wp-block-buttons,
.sy-yell-band p:has(> .sy-yell-button) {
  margin-block-start: 2rem !important;
}

.fluentform .ff_submit_btn_wrapper,
.fluentform .ff-el-group:last-child {
  margin-top: 2rem;
}

/* 5) contact cards: 40px icons, mini rule under heading, centred content,
      email never breaks mid-word */
.sy-contact-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}

.sy-contact-card .sy-contact-icon svg {
  width: 40px;
  height: 40px;
}

.sy-contact-card h3 {
  margin: 0;
  /* shared card-title size; wrap BETWEEN words only — never mid-word
     ("WhatsApp" one line; "Opening Hours" may break at the space) */
  font-size: 1.0625rem;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.sy-contact-card h3::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 999px;
  background: var(--wp--preset--color--sy-blue);
  margin: 0.6rem auto 0;
}

.sy-contact-card p,
.sy-contact-card .wp-block-paragraph {
  margin: 0;
  text-wrap: balance;
}

.sy-contact-card a {
  overflow-wrap: normal;
  word-break: normal;
}

.sy-contact-card a[href^='mailto:'] {
  white-space: nowrap;
  font-size: clamp(0.8125rem, 0.6rem + 0.9vw, 0.9375rem);
}

/* 6) footer tier 3: air between the hairline separator and the legal text */
.sy-footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 2rem;
}

.sy-footer-copyright {
  padding-top: 2rem !important;
}

/* ==========================================================================
   P5 addendum 5 — snags + mobile header/drawer
   ========================================================================== */

/* 1) card-link hierarchy: 15px / 500 under the 17px card title */
.sy-card-link a,
.sy-download-row a {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* 4) contact split: rows left, map right; stacks on mobile */
.sy-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--wp--preset--color--sy-surface);
}

.sy-contact-row svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--wp--preset--color--sy-blue);
  margin-top: 0.1rem;
}

.sy-contact-row p {
  margin: 0;
  font-size: 1rem; /* every value the same 16px */
  overflow-wrap: normal;
  word-break: normal;
}

.sy-contact-row strong {
  color: var(--wp--preset--color--sy-navy);
  font-weight: 600;
}

.sy-contact-map {
  height: 100%;
}

.sy-contact-split.wp-block-columns {
  align-items: stretch;
}

/* 6) mobile menu drawer */
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    background-color: var(--wp--preset--color--sy-navy) !important;
    z-index: 200; /* above the sticky action bar */
    animation: sy-drawer-in 250ms ease;
    /* 24px side inset for ALL drawer content — core zeroes non-important
       padding on the open overlay, so this must win */
    padding: 1.25rem 24px !important;
  }

  /* hide the sticky bar while the drawer is open */
  body:has(.wp-block-navigation__responsive-container.is-menu-open) .sy-sticky-actions {
    display: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    min-width: 44px;
    min-height: 44px;
    color: #ffffff;
  }

  /* left-aligned items, 17px, soft separators — beat the desktop
     justifyContent:center that leaks into the overlay */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100%;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start !important; /* stop the li centring its submenu */
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > a {
    font-size: 1.0625rem;
    padding: 16px 0;
    width: 100%;
    text-align: left;
  }

  /* Services group: sub-items indented 16px, left-aligned, 15px */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    padding-left: 16px !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    width: 100% !important;
    justify-content: flex-start;
    align-items: flex-start !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
    width: 100%;
    text-align: left;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
    font-size: 0.9375rem;
    padding: 12px 0;
  }

  /* drawer contact block (relocated from .sy-drawer-extra by sy-theme.js) */
  .wp-block-navigation__responsive-container.is-menu-open .sy-drawer-extra {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .wp-block-navigation__responsive-container.is-menu-open .sy-drawer-extra a,
  .wp-block-navigation__responsive-container.is-menu-open .sy-drawer-extra span {
    color: var(--wp--preset--color--sy-footer-text);
    font-size: 0.875rem;
    text-decoration: none;
    padding: 0.35rem 0;
  }
}

@keyframes sy-drawer-in {
  from {
    transform: translateX(8%);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container.is-menu-open {
    animation: none !important;
  }
}

/* drawer contact block renders ONLY inside the open mobile drawer */
.sy-drawer-extra {
  display: none;
}

/* ==========================================================================
   P4/P5 addendum 7 — footer charcoal, live embeds, MCA, fees, socials
   ========================================================================== */

/* Live map iframe fills the reserved map slot (no layout shift). */
.sy-embed-slot--map iframe,
.sy-map-iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

@media (min-width: 782px) {
  .sy-embed-slot--map iframe,
  .sy-map-iframe {
    height: 420px;
  }
}

/* Booking fee block — intro line white on the gradient band (never dark/italic),
   matching the fee-card text scale. */
.sy-fee-intro {
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  color: #ffffff;
  margin: 0 auto 0.5rem;
}

/* Merchant Cash Advance benefits — 2x2 desktop, 1-up mobile (never 4-across). */
.sy-mca-benefits.wp-block-columns {
  gap: 1rem;
  flex-wrap: wrap !important; /* beat WP's >=782px nowrap so cards go 2x2 */
}

.sy-mca-benefits.wp-block-columns .wp-block-column {
  flex-basis: calc(50% - 0.5rem) !important;
  flex-grow: 0;
}

@media (max-width: 781px) {
  .sy-mca-benefits.wp-block-columns .wp-block-column {
    flex-basis: 100% !important;
  }
}

.sy-mca-benefit {
  background: var(--wp--preset--color--sy-surface);
  border: 1px solid var(--wp--preset--color--sy-silver);
  border-radius: 8px;
  height: 100%;
}

.sy-mca-benefit p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.sy-mca-benefit strong {
  color: var(--wp--preset--color--sy-navy);
  letter-spacing: 0.02em;
}

.sy-mca-contact {
  font-weight: 500;
  margin: 0;
}

/* Instagram follow — centred pill button (Home + Testimonials reviews zone) */
.sy-ig-wrap {
  text-align: center;
}

.sy-ig-follow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 10px 20px;
  border: 1px solid var(--wp--preset--color--sy-silver);
  border-radius: 999px;
  color: var(--wp--preset--color--sy-blue-deep);
  font-weight: 600;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.sy-ig-follow svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.sy-ig-follow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(18, 50, 74, 0.12);
  border-color: var(--wp--preset--color--sy-blue-deep);
}

/* Team profile LinkedIn link */
.sy-team-linkedin a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wp--preset--color--sy-blue-deep);
  text-decoration: none;
}

.sy-team-linkedin a:hover {
  text-decoration: underline;
}

/* Footer white-knockout logo + NACFB badge stay clearly visible on the dark
   charcoal band (client: "dark gray and not hide the logos"). */
.sy-footer-legal-band {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   Addendum 8 — header running banner, panel logos, biz-loans, reviews order
   ========================================================================== */

/* Running banner in the utility strip (replaces the FCA line). Pure-CSS
   compositor marquee; reduced-motion shows it static. */
.sy-utility-strip__inner {
  gap: 1.5rem;
}

.sy-banner {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* stronger fade on the LEFT so the banner never visually collides with the
     contacts; light fade on the right edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 97%, transparent);
}

.sy-banner-track {
  display: flex;
  width: max-content;
  animation: sy-banner-scroll 42s linear infinite;
  will-change: transform;
}

.sy-banner-item {
  white-space: nowrap;
  padding-right: 3rem;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: #ffffff;
}

@keyframes sy-banner-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.sy-banner:hover .sy-banner-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sy-banner-track { animation: none; transform: none; }
  .sy-banner { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 781px) {
  /* mobile: contacts are icons-only (handled above); banner still fills */
  .sy-utility-strip__inner { gap: 0.75rem; }
}

/* Panel-of-lenders marquee logos (client's own files, mixed sizes) */
.sy-marquee .sy-marquee-track img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
}

/* Business Loans & Asset Finance page lists */
.sy-bizloans-cols.wp-block-columns {
  gap: 2rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   Addendum 9 — design pass on round-8 additions
   ========================================================================== */

/* Welcome section: constrained measures + product chip grid + calm subheads */
.sy-welcome .sy-measure {
  max-width: 720px;
  margin-inline: auto;
}

.sy-welcome h3.wp-block-heading {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  color: var(--wp--preset--color--sy-navy);
  margin-top: 2.75rem;
}

.sy-welcome-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 0;
  list-style: none;
  padding: 0;
}

.sy-welcome-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--wp--preset--color--sy-surface);
  border: 1px solid var(--wp--preset--color--sy-silver);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  color: var(--wp--preset--color--sy-blue-deep);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.sy-welcome-chip svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--wp--preset--color--sy-blue);
}

@media (max-width: 781px) {
  .sy-welcome-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Imageless service treatment — gradient panel with an icon, so a card/page
   without a photo reads as designed, not blank (MCA has its flyer; Business
   Loans and Asset Finance awaits a client image). */
.sy-service-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--gradient--sy-gradient-brand);
  border-radius: 8px 8px 0 0;
}

.sy-service-panel svg {
  width: 46px;
  height: 46px;
  color: #ffffff;
  opacity: 0.92;
}

/* Business Loans page — right-hand decorative panel in the intro row */
.sy-bizloans-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  background: var(--wp--preset--gradient--sy-gradient-brand);
  border-radius: 12px;
}

.sy-bizloans-panel svg {
  width: 84px;
  height: 84px;
  color: #ffffff;
  opacity: 0.92;
}

/* ==========================================================================
   Addendum 10 — services grid 4+3, pillar cards, rhythm, mobile header icons
   ========================================================================== */

/* Services grid: 4-up desktop (7 cards wrap to 4+3, 2nd row centred),
   2-up tablet, 1-up mobile. Flex-wrap + justify-center so the short last
   row centres (CSS grid can't centre a partial row). */
.sy-services-grid.wp-block-columns {
  display: flex !important;
  flex-wrap: wrap !important; /* beat WP's per-instance is-layout nowrap */
  justify-content: center;
  gap: 1.5rem;
  align-items: stretch;
}

.sy-services-grid.wp-block-columns > .wp-block-column {
  flex: 0 0 calc(25% - 1.125rem) !important; /* no shrink → wraps to 4+3 */
  min-width: 0;
  margin: 0 !important;
}

@media (max-width: 1023px) {
  .sy-services-grid.wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 0.75rem) !important;
  }
}

@media (max-width: 599px) {
  .sy-services-grid.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* Identical card anatomy: rounded card, fixed image box, text area fills so
   every card in a row is the same height with title+link aligned. */
.sy-service-card {
  border-radius: 8px;
  overflow: hidden;
}

.sy-service-card > .wp-block-group {
  padding: 1.25rem 1.5rem 1.5rem !important;
  flex-grow: 1 !important;
  justify-content: flex-start;
}

.sy-service-card .sy-service-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp--preset--gradient--sy-gradient-brand);
}

.sy-service-card .sy-service-panel svg {
  width: 54px;
  height: 54px;
  color: #ffffff;
  opacity: 0.92;
  aspect-ratio: auto;
}

/* Why Choose Us pillars: cards on the rail, 3+2 desktop / 2-up / 1-up. */
.sy-pillars.wp-block-columns {
  display: flex !important;
  flex-wrap: wrap !important; /* beat WP's per-instance is-layout nowrap */
  justify-content: center;
  gap: 1.5rem;
  align-items: stretch;
}

.sy-pillars.wp-block-columns > .wp-block-column {
  flex: 0 0 calc(33.333% - 1rem) !important; /* no shrink → wraps to 3+2 */
  min-width: 0;
  margin: 0 !important;
}

@media (max-width: 1023px) {
  .sy-pillars.wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 0.75rem) !important;
  }
}

@media (max-width: 599px) {
  .sy-pillars.wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
  }
}

.sy-pillar-card {
  height: 100%;
  background: var(--wp--preset--color--sy-surface);
  border: 1px solid var(--wp--preset--color--sy-silver);
  border-radius: 8px;
  padding: 2rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-align: left;
}

.sy-pillar-icon svg {
  width: 32px;
  height: 32px;
  color: var(--wp--preset--color--sy-blue);
}

.sy-pillar-card h3.wp-block-heading {
  margin: 0;
  font-size: 1.0625rem;
  text-wrap: balance;
}

.sy-pillar-card p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--wp--preset--color--sy-text-secondary);
}

/* Vertical rhythm: section groups (inline padding) get symmetric visual space
   by zeroing the first child's top margin and the last child's bottom margin,
   so the perceived padding equals the token, not padding + block margin. */
main .wp-block-group[style*="padding"] > *:first-child {
  margin-block-start: 0;
}

main .wp-block-group[style*="padding"] > *:last-child {
  margin-block-end: 0;
}