/*
Theme Name: Action Consultants
Theme URI: https://actionconsultants.com/
Author: Action Consultants
Description: Block theme for the Action Consultants website.
Version: 1.22.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: action-consultants
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * Loaders (inc/loaders.php, CONTRATO_EDITOR.md §23). The site loading screen,
 * the own screen of a frame animation and the indicator of a Spline scene share
 * this look. Texts: roles `loader-logo` / `loader-label` (style-roles.php) and
 * the block's own values; colours: `--ac-loader-*`, set by the block from
 * Styles → Loading screen colours.
 */
.ac-loader {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
  background: var(--ac-loader-bg, var(--ac-white));
}
.ac-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.ac-loader-track {
  position: relative;
  width: 200px;
  height: 1px;
  background: var(--ac-loader-track, var(--ac-light));
}
.ac-loader-track span {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--ac-loader-fill, var(--ac-red));
  transition: width 0.1s linear;
}

/* The site loading screen: a brief splash over every public page. Its time
   (`--ac-loader-duration`) comes from the block; CSS hides it on its own half
   a second later if JavaScript never runs. */
.ac-site-loader {
  position: fixed;
  z-index: 300;
  inset: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  animation: ac-splash-safety 0s var(--ac-loader-safety, 1.4s) forwards;
}
.ac-site-loader.is-hidden {
  animation: none;
}
.ac-site-loader .ac-loader-track span {
  width: 100%;
  transform-origin: left;
  animation: ac-splash-progress var(--ac-loader-duration, 0.9s) ease-out forwards;
}
body:has(.ac-site-loader:not(.is-hidden)) .ac-site-header {
  z-index: 1;
}
/* The own full-screen screen of a frame animation (mode «own»). */
body:has(.ac-loading) .ac-main > .wp-block-post-content {
  position: relative;
  z-index: 202;
}
:is(.ac-airplane, .ac-car, .ac-watch, .ac-scroll-video).ac-loading { z-index: 201; }
:is(.ac-airplane, .ac-car, .ac-watch, .ac-scroll-video) .ac-loader {
  position: fixed;
  z-index: 201;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  animation: ac-splash-safety 0s 1.4s forwards;
}
:is(.ac-airplane, .ac-car, .ac-watch, .ac-scroll-video) .ac-loader.is-hidden {
  animation: none;
}
:is(.ac-airplane, .ac-car, .ac-watch, .ac-scroll-video) .ac-loader-track span {
  width: 100%;
  transform-origin: left;
  animation: ac-splash-progress 0.9s ease-out forwards;
}
@keyframes ac-splash-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes ac-splash-safety {
  to { opacity: 0; visibility: hidden; }
}

/*
 * The design tokens read from the theme.json presets first, so anything the
 * editor changes in Appearance > Editor > Styles (palette and fonts) is applied
 * across every section. The literal values are only the fallback used before
 * the global stylesheet loads.
 */
:root {
  --ac-white: var(--wp--preset--color--white, #ffffff);
  --ac-offwhite: var(--wp--preset--color--offwhite, #f7f5f2);
  --ac-red: var(--wp--preset--color--red, #c8151b);
  --ac-red-dark: var(--wp--preset--color--red-dark, #a81219);
  --ac-red-dim: rgba(var(--ac-red-rgb), 0.07);
  --ac-ink: var(--wp--preset--color--ink, #111111);
  --ac-mid: var(--wp--preset--color--mid, #888888);
  --ac-light: var(--wp--preset--color--light, #d8d4cf);
  /* Channel triplets for the translucent veils and overlays. CSS cannot split a
     hex into channels, so `rgba()` cannot read the palette vars above — these
     keep those tones defined in one place instead of repeated as loose numbers
     across the blocks. Keep them in step with the palette when it changes. */
  --ac-white-rgb: 255, 255, 255;
  --ac-offwhite-rgb: 247, 245, 242;
  --ac-red-rgb: 200, 21, 27;
  --ac-ink-rgb: 17, 17, 17;
  --ac-mid-rgb: 136, 136, 136;
  /* Opaque pale red wash, used on hover states. Kept opaque rather than a
     translucent red so it reads the same whatever sits behind the card. */
  --ac-red-wash: #fdf1f1;
  --ac-font-display: var(--wp--preset--font-family--cormorant-garamond, "Cormorant Garamond", serif);
  --ac-font-body: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
  --ac-home-content-width: 54vw;
  --ac-home-plane-width: 46vw;
  --ac-split-content-width: 54vw;
  --ac-split-visual-width: 46vw;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ac-white);
}

body.admin-bar .ac-site-header {
  top: 32px;
}

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

.wp-site-blocks > * {
  margin-block-start: 0;
}

.ac-main {
  margin: 0;
}

/* Home split layout: Gutenberg keeps the complete content column editable,
 * while the airplane block provides the persistent visual layer on the right. */
@media (min-width: 769px) {
  body.home .ac-main > .wp-block-post-content {
    width: var(--ac-home-content-width);
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    position: relative;
    z-index: 2;
    background: var(--ac-white);
  }

  body.home .ac-main > .wp-block-post-content > .alignfull:not(.ac-airplane) {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  body.home .ac-main > .wp-block-post-content > .ac-airplane.ac-airplane {
    width: var(--ac-home-plane-width);
    max-width: none;
    margin: 0;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero.ac-hero {
    min-height: 100vh;
    padding: 0 48px 0 56px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-eyebrow {
    margin-bottom: 24px;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-title,
  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-sub {
    text-align: left;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-title {
    max-width: 620px;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-sub {
    max-width: 440px;
    margin-top: 28px;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .wp-block-buttons {
    margin-top: 40px;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-scroll-hint {
    bottom: 44px;
    left: 56px;
    transform: none;
  }

  body.home .ac-main > .wp-block-post-content > .ac-testimonial .ac-testimonial-quote,
  body.home .ac-main > .wp-block-post-content > .ac-testimonial .ac-testimonial-attr {
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }

  body.home .ac-site-footer {
    width: var(--ac-home-content-width);
    margin-right: auto;
    margin-left: 0;
  }
}

@media (min-width: 769px) and (max-width: 1080px) {
  :root {
    --ac-home-content-width: 58vw;
    --ac-home-plane-width: 42vw;
    --ac-split-content-width: 58vw;
    --ac-split-visual-width: 42vw;
  }

}

@media (max-width: 768px) {
  body.home .ac-main > .wp-block-post-content > .ac-hero.ac-hero {
    min-height: 100vh;
    padding: 0 24px;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-eyebrow {
    margin-bottom: 24px;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-title,
  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-sub {
    text-align: left;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-title {
    max-width: 620px;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-hero-sub {
    max-width: 440px;
    margin-top: 28px;
    padding: 0;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .wp-block-buttons {
    margin-top: 40px;
  }

  body.home .ac-main > .wp-block-post-content > .ac-hero .ac-scroll-hint {
    display: flex;
    bottom: 44px;
    left: 24px;
    transform: none;
  }
}

.ac-site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid transparent;
  background: rgba(var(--ac-white-rgb), 0.92);
  backdrop-filter: blur(12px);
  transition: border-color 0.3s ease;
}

.ac-site-header.is-scrolled {
  border-color: var(--ac-light);
}

/* The doubled selector beats core's own constrained-layout rule on width and
   margins without `!important`, which would have locked the spacing controls in
   the editor out of this element. */
.ac-nav-shell.ac-nav-shell {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  min-height: 106px;
  padding: 20px;
}

.ac-site-header .wp-block-site-logo img {
  width: auto;
  height: 66px;
  object-fit: contain;
}

/* Typography and colour of the links: role `nav-links` on the navigation
   block (inc/style-roles.php); the links inherit it, so the block's own
   Typography and Color panels reach them. */
.ac-site-header .wp-block-navigation-item__content {
  position: relative;
  padding-bottom: 2px;
  white-space: nowrap;
  text-decoration: none;
}

.ac-site-header .wp-block-navigation-item__content::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ac-red);
  content: "";
  transition: width 0.3s ease;
}

.ac-site-header .wp-block-navigation-item__content:hover::after,
.ac-site-header .current-menu-item .wp-block-navigation-item__content::after {
  width: 100%;
}

/* Filled buttons: their red (and the darker red on hover) is the Button
   element of theme.json, so Styles → Colors → Button reaches them (T13). */
.ac-nav-cta .wp-block-button__link,
.ac-button-red .wp-block-button__link {
  border: 0;
  border-radius: 0;
  transition: background 0.3s ease, transform 0.3s ease;
}

/* The text of the header button is its role (inc/style-roles.php, `nav-cta`);
   the red button of the pages has `button-red`. */
.ac-nav-cta .wp-block-button__link {
  padding: 12px 28px;
}

.ac-button-red .wp-block-button__link {
  padding: 15px 40px;
}

.ac-nav-cta .wp-block-button__link:hover,
.ac-button-red .wp-block-button__link:hover {
  transform: translateY(-2px);
}

/* Injected by site.js only for the mobile overlay menu; stays hidden on the
   desktop inline nav (and the closed mobile overlay) at every width. */
.ac-site-header .ac-nav-mobile-cta {
  display: none;
}

/* Between the mobile menu (900px) and the wide desktop (1080px) the five
 * links plus the call to action only fit if the logo and the gutters shrink.
 * Placed after the base header rules so it wins on equal specificity. */
@media (min-width: 769px) and (max-width: 1080px) {
  .ac-site-header .wp-block-navigation__container {
    flex-wrap: nowrap;
    gap: 18px;
  }

  .ac-site-header .wp-block-site-logo img {
    height: 58px;
  }

  .ac-nav-cta .wp-block-button__link {
    padding: 12px 20px;
  }
}

.ac-hero {
  position: relative;
  min-height: 100svh;
  padding: 150px 40px 80px;
  border-bottom: 1px solid var(--ac-light);
}

.ac-hero > .ac-hero-eyebrow {
  margin: 0 0 28px;
}

.ac-hero > .ac-hero-title {
  margin: 0;
}

.ac-eyebrow {
  margin: 0 0 20px;
  color: var(--ac-red);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

/* The typography of the Home texts below is their role in
   inc/style-roles.php (one source for the page, the editor canvas and the
   inspector's "Current style"). Only layout stays here. */
.ac-hero-eyebrow,
.ac-section-eyebrow {
  margin: 0 0 20px;
}

.ac-hero-eyebrow {
  margin-bottom: 24px;
  animation: ac-fade-up 1s ease 0.3s both;
}

.ac-hero-title {
  max-width: 900px;
  margin: 0;
  text-align: center;
  animation: ac-fade-up 1s ease 0.5s both;
}

.ac-hero-sub {
  max-width: 480px;
  margin: 32px 0 0;
  text-align: center;
  animation: ac-fade-up 1s ease 0.7s both;
}

/* Gutenberg's flex layout resets child block margins; keep this separation intentional. */
.ac-hero.is-layout-flex > .ac-hero-sub {
  margin-block-start: 32px;
}

.ac-hero .wp-block-buttons {
  margin-top: 44px;
  animation: ac-fade-up 1s ease 0.9s both;
}

.ac-scroll-hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  animation: ac-fade-up 1s ease 1.1s both;
}

/* The line under the hint takes the hint's own colour, so changing the text
   colour in the editor recolours both (one decoration, never a second one). */
.ac-scroll-hint::after {
  display: block;
  width: 1px;
  height: 50px;
  margin: 10px auto 0;
  background: linear-gradient(to bottom, currentColor, transparent);
  content: "";
  animation: ac-pulse 2s ease-in-out infinite;
}

.ac-testimonial {
  padding: 80px 56px;
  border-bottom: 1px solid var(--ac-light);
  background: var(--ac-white);
}

.ac-testimonial-quote {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.ac-testimonial-quote::before,
.ac-testimonial-quote::after {
  color: var(--ac-red);
  content: "“";
}

.ac-testimonial-quote::after {
  content: "”";
}

.ac-testimonial-attr {
  margin: 30px 0 0;
  text-align: center;
}

.ac-journey {
  padding: 120px 56px;
  border-bottom: 1px solid var(--ac-light);
}

.ac-journey-grid.ac-journey-grid{
  gap: 80px;
  align-items: start;
}

.ac-journey-eyebrow {
  margin: 0 0 24px;
  color: var(--ac-red);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.ac-journey-title {
  margin: 0;
  color: var(--ac-ink);
  font-family: var(--ac-font-display);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 300;
  line-height: 1.05;
}

.ac-journey-title em { color: var(--ac-red); font-style: italic; }
.ac-journey-body { padding-top: 8px; }

.ac-journey-body p {
  margin: 0 0 20px;
  color: var(--ac-mid);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.9;
}

.ac-journey-body p:last-child { margin-bottom: 0; }
.ac-journey-body strong { color: var(--ac-ink); font-weight: 500; }

.ac-pain,
.ac-team {
  padding: 120px 56px;
  border-bottom: 1px solid var(--ac-light);
}

/* The typography of .ac-section-title is its role in inc/style-roles.php: it
   follows the heading level (and the "Role · Section title" size preset). */
.ac-section-title {
  margin: 0;
}

.ac-team-title,
.ac-close-title {
  margin: 0;
}

.ac-section-intro,
.ac-team-desc,
.ac-close-sub {
  max-width: 900px;
  margin: 20px 0 0;
}

.ac-pain-grid.ac-pain-grid{
  gap: 1px;
  margin-top: 72px;
  border: 1px solid var(--ac-light);
  background: var(--ac-light);
}

.ac-pain-grid > .wp-block-column {
  display: flex;
  align-items: stretch;
  margin: 0;
}

.ac-pain-card {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 390px;
  height: 100%;
  padding: 48px 36px 52px;
  overflow: hidden;
  background: var(--ac-white);
  transition: background 0.3s ease;
}

.ac-pain-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--ac-red);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.ac-pain-card:hover {
  background: var(--ac-offwhite);
}

.ac-pain-card:hover::before {
  transform: scaleX(1);
}

.ac-card-number {
  margin: 0 0 32px;
}

.ac-card-copy {
  margin: 0 0 24px;
}

.ac-card-line.ac-card-line{
  width: 28px;
  height: 1px;
  flex-shrink: 0;
  margin-top: auto;
  background: var(--ac-red);
}

.ac-outline-button {
  margin-top: 56px;
}

.ac-outline-button .wp-block-button__link {
  border: 1px solid var(--ac-ink);
  border-radius: 0;
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease;
}

.ac-outline-button .wp-block-button__link:hover {
  background: var(--ac-ink);
  color: var(--ac-white);
}

.ac-team {
  border-top: 1px solid var(--ac-light);
}

.ac-team-head.ac-team-head{
  gap: 80px;
  margin-bottom: 56px;
}

.ac-team-desc {
  margin-top: 8px;
}

.ac-text-link {
  margin-top: 32px;
}

/* The paragraph carries the typography (its role); the link follows it. */
.ac-text-link a {
  color: inherit;
  text-decoration: none;
}

.ac-team-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-top: 1px solid var(--ac-light);
  border-bottom: 1px solid var(--ac-light);
  background: var(--ac-light);
}

.ac-team-row.ac-team-row{
  display: flex;
  align-items: stretch;
  gap: 28px;
  margin: 0;
  background: var(--ac-white);
  transition: background 0.25s ease;
}

.ac-team-row:hover { background: var(--ac-offwhite); }

/* About shows the people in two columns separated by the grey of the list
   (1px gaps). With an odd number of people the last cell is empty and would
   show that grey as a block: fill it with the row colour. */
@media (min-width: 601px) {
  .ac-about-team .ac-team-list:has(> .ac-team-row:last-child:nth-child(odd))::after {
    background: var(--ac-white);
    content: "";
  }
}

.ac-team-row-photo.ac-team-row-photo{
  width: 200px;
  min-width: 200px;
  aspect-ratio: 3 / 4;
  height: auto;
  flex-shrink: 0;
  margin: 0;
  overflow: hidden;
  background: var(--ac-offwhite);
}

.ac-team-row-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.4s ease, transform 0.5s ease;
}

.ac-team-row:hover .ac-team-row-photo img {
  transform: scale(1.02);
}

.ac-team-row-info {
  flex: 1;
  min-width: 0;
  padding: 40px 36px 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ac-team-row-name {
  margin: 0;
}

.ac-team-row-role {
  margin: 4px 0 0;
}

.ac-team-row-bio {
  max-width: 420px;
  margin: 10px 0 0;
}

.ac-close {
  position: relative;
  padding: 120px 56px;
  overflow: hidden;
  background: var(--ac-white);
}

/* Layer "glow" (inc/style-roles.php, key .ac-close): colour, opacity and
   visibility come from --ac-layer-glow-* on the section, always set when it
   renders. A gradient chosen as the section background replaces the glow
   instead of stacking over it, unless the glow is set to "Always show". */
.ac-close::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 20% 40%, var(--ac-layer-glow-color), transparent);
  opacity: var(--ac-layer-glow-opacity);
  content: "";
  pointer-events: none;
}

.ac-close.is-ac-layer-glow-hidden.is-ac-layer-glow-hidden::before,
.ac-close.has-ac-base-gradient:not(.is-ac-layer-glow-shown)::before {
  display: none;
}

.ac-close > .ac-close-grid { position: relative; z-index: 1; }

.ac-close-grid.ac-close-grid{
  gap: 80px;
}

.ac-close-badge {
  display: inline-block;
  margin: 0 0 28px;
  padding: 8px 14px;
  border: 1px solid var(--ac-red);
}

.ac-close-sub {
  max-width: 500px;
  margin-top: 28px;
}

.ac-brand-strip.ac-brand-strip{
  max-width: 100%;
  padding: 28px 48px;
  overflow: hidden;
  border-top: 1px solid var(--ac-light);
  border-bottom: 1px solid var(--ac-light);
  text-align: center;
  white-space: nowrap;
}

/* Every page except Home centres the strip. Home follows GuiaAvion.html and
   spans the whole content column, so it is styled in the Home block below. */
body:not(.home) .ac-brand-strip.ac-brand-strip {
  width: fit-content;
  margin: 0 auto;
}

.ac-site-footer {
  padding: 40px 56px;
  border-top: 1px solid var(--ac-light);
  background: var(--ac-white);
  color: var(--ac-ink);
}

/* Footer texts: roles `footer-brand` / `footer-copy` (inc/style-roles.php),
   with the treatment of the split pages as contexts. */
.ac-footer-brand,
.ac-footer-copy {
  margin: 0;
}

@keyframes ac-pulse {
  0%,
  100% { opacity: 0.4; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

@keyframes ac-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.ac-animate {
  opacity: 0;
  transition:
    opacity var(--ac-anim-duration, 700ms) var(--ac-anim-easing, ease) var(--ac-anim-delay, 0ms),
    transform var(--ac-anim-duration, 700ms) var(--ac-anim-easing, ease) var(--ac-anim-delay, 0ms);
  will-change: opacity, transform;
}

.ac-animate[data-ac-animate="fade-up"] { transform: translateY(var(--ac-anim-distance, 28px)); }
.ac-animate[data-ac-animate="fade-down"] { transform: translateY(calc(var(--ac-anim-distance, 28px) * -1)); }
.ac-animate[data-ac-animate="fade-left"] { transform: translateX(var(--ac-anim-distance, 28px)); }
.ac-animate[data-ac-animate="fade-right"] { transform: translateX(calc(var(--ac-anim-distance, 28px) * -1)); }
.ac-animate[data-ac-animate="fade-in"] { transform: none; }
.ac-animate[data-ac-animate="scale-in"] { transform: scale(.96); }

.ac-animate.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  body.admin-bar .ac-site-header { top: 46px; }
  .ac-nav-shell { min-height: 96px; padding: 15px 16px; }
  .ac-site-header .wp-block-site-logo img { height: 62px; }
  .ac-site-header .ac-nav-cta { display: none; }
  /* Core only auto-switches to the hamburger below 600px; this theme's overlay
     styles below assume it's active up to 900px, so force it across that gap. */
  .ac-site-header .wp-block-navigation__responsive-container-open {
    display: flex;
  }
  .ac-site-header .wp-block-navigation__responsive-container.wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }
  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open {
    /* .ac-site-header is position:fixed with backdrop-filter, which makes it the
       containing block for this fixed-position modal instead of the viewport.
       vw/vh sidestep that: they always resolve against the real viewport. */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100vh;
    padding: 96px 32px 40px;
    background: var(--ac-white);
    justify-content: flex-start;
  }
  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 0;
    gap: 20px;
  }
  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-wrap: nowrap;
    width: 100%;
    gap: 20px;
  }
  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open .ac-nav-mobile-cta {
    display: block;
    margin-top: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--ac-light);
  }
  /* Typography and colour: role `nav-mobile-cta` (inc/style-roles.php). */
  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open .ac-nav-mobile-cta .wp-block-navigation-item__content::after {
    display: none;
  }
  .ac-pain,
  .ac-team,
  .ac-journey,
  .ac-close { padding: 88px 32px; }
  .ac-pain-grid,
  .ac-pain-grid > .wp-block-column { flex-basis: calc(50% - 1px) !important; }
  .ac-team-head,
  .ac-close-grid,
  .ac-journey-grid { flex-direction: column; gap: 32px !important; }
}

@media (max-width: 600px) {
  .ac-nav-shell { min-height: 84px; padding: 10px; }
  .ac-site-header .wp-block-site-logo img { height: 54px; }
  .ac-hero { min-height: 100svh; padding: 128px 20px 72px; }
  .ac-hero.is-layout-flex > .ac-hero-sub { margin-block-start: 40px; }
  .ac-hero-sub { padding: 0 8px; }
  .ac-scroll-hint { display: none; }
  .ac-testimonial { padding: 72px 24px; }
  .ac-pain,
  .ac-team,
  .ac-journey,
  .ac-close { padding: 72px 20px; }
  .ac-pain-grid.ac-pain-grid { margin-top: 48px; }
  .ac-pain-grid > .wp-block-column { flex-basis: 100% !important; }
  .ac-journey-grid { flex-direction: column; gap: 48px !important; }
  .ac-team-list { grid-template-columns: 1fr; }
  .ac-team-row.ac-team-row { flex-direction: column; gap: 0; }
  .ac-team-row-photo.ac-team-row-photo { width: 100%; min-width: 0; height: auto; }
  .ac-team-row-info { padding: 28px 28px 32px; }
  .ac-pain-card { min-height: 310px; padding: 38px 28px 42px; }
  .ac-team-head.ac-team-head { margin-bottom: 48px; }
  .ac-brand-strip.ac-brand-strip { padding: 24px 20px; }
  .ac-site-footer { padding: 32px 20px; }
  .ac-site-footer > .wp-block-group { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Shared header parity with GuiaAvion.html. These are defaults for the Gutenberg
 * header and content blocks; editor-generated inline styles remain free to
 * override them when the owner changes the design. */
@media (min-width: 901px) {
  .ac-site-header .ac-nav-shell {
    min-height: 116px;
    padding: 20px 56px;
  }

}

@media (min-width: 1081px) {
  .ac-site-header .wp-block-site-logo img {
    height: 76px;
  }

  .ac-site-header .wp-block-navigation__container {
    flex-wrap: nowrap;
    gap: 28px;
  }

  .ac-site-header .ac-nav-cta .wp-block-button__link {
    padding: 12px 28px;
  }
}

@media (max-width: 900px) {
  .ac-site-header .ac-nav-shell {
    min-height: 124px;
    padding: 24px 32px;
  }

  .ac-site-header .wp-block-site-logo img {
    height: 76px;
  }

  .ac-site-header .wp-block-navigation__responsive-container-open {
    display: flex;
    min-width: 30px;
    min-height: 30px;
    padding: 4px;
  }

  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    padding: 80px 32px;
    justify-content: center;
  }

  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: flex-start;
    gap: 32px;
  }

  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 32px;
    width: auto;
  }

  /* The opened menu keeps the ink of the links (core paints it black when the
     navigation has no text colour); its typography is the phone line of the
     `nav-links` role. A text colour on the navigation, or its «Submenu &
     overlay text» colour, still wins: then this rule does not match. */
  .ac-site-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.has-text-color) {
    color: var(--ac-ink);
  }

  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open .ac-nav-mobile-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
  }

  .ac-site-header .wp-block-navigation__responsive-container.is-menu-open .ac-nav-mobile-cta::before {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--ac-light);
    content: "";
  }

  /* Typography and colour of this copy: role `nav-mobile-cta`
     (inc/style-roles.php), editable in «Mobile menu version» of the header
     button. Only its box is here. */
}

@media (max-width: 768px) {
  body.home .ac-main > .wp-block-post-content {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    position: relative;
    z-index: 2;
    background: var(--ac-white);
  }

  body.home .ac-site-footer {
    padding: 24px;
  }

  body.home .ac-site-footer > .wp-block-group {
    align-items: center;
    gap: 12px;
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Home sections, 1:1 with the content column of GuiaAvion.html.
 * Everything here is a default: Gutenberg writes colours, typography and
 * spacing as inline styles, which always win over these rules, so the whole
 * Home stays editable from the block panel and from Appearance > Editor.
 * ───────────────────────────────────────────────────────────────────────── */

/* Testimonials — left aligned inside the column, at every width. */
body.home .ac-testimonial {
  text-align: left;
}

body.home .ac-testimonial .ac-testimonial-quote {
  max-width: none;
  margin: 0 0 24px;
  text-align: left;
}

body.home .ac-testimonial .ac-testimonial-attr {
  margin: 0;
  text-align: left;
}

/* Pain points. */
body.home .ac-pain .ac-section-eyebrow {
  margin-bottom: 18px;
}

body.home .ac-pain .ac-section-intro {
  max-width: 480px;
  margin-top: 18px;
}

body.home .ac-pain-grid.ac-pain-grid {
  /* Core forces `flex-wrap: nowrap !important` above 782px; the guide's 2x2
     grid needs the same weight. Structural layout only. */
  flex-wrap: wrap !important;
  margin-top: 48px;
}

body.home .ac-pain-grid.ac-pain-grid > .wp-block-column {
  flex-basis: calc(50% - 1px);
  flex-grow: 0;
}

/* An odd number of symptoms: the last card takes the whole row instead of
   leaving an empty grey half. With the approved four cards nothing changes. */
.ac-pain-grid.ac-pain-grid > .wp-block-column:last-child:nth-child(odd) {
  flex-grow: 1;
}

body.home .ac-pain-card {
  min-height: 0;
  padding: 32px 28px 36px;
}

body.home .ac-pain-card .ac-card-number {
  margin-bottom: 20px;
}

body.home .ac-pain-card .ac-card-copy {
  margin-bottom: 16px;
}

body.home .ac-pain-card .ac-card-line.ac-card-line {
  width: 24px;
}

body.home .ac-pain .ac-outline-button {
  margin-top: 40px;
}

body.home .ac-pain .ac-outline-button .wp-block-button__link {
  padding: 14px 32px;
}

/* Team — stacked header and one row per person, at every width. */
body.home .ac-team-head.ac-team-head {
  flex-wrap: wrap;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

body.home .ac-team-head > .wp-block-column {
  flex-basis: 100%;
}

body.home .ac-team .ac-team-desc {
  max-width: 440px;
  margin-top: 0;
}

body.home .ac-team .ac-text-link {
  margin-top: 16px;
}

body.home .ac-team-list,
body.home .ac-team-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--ac-light);
  border-bottom: 0;
  background: transparent;
}

body.home .ac-team-row.ac-team-row {
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ac-light);
}

body.home .ac-team-row-photo.ac-team-row-photo {
  width: 88px;
  min-width: 88px;
  height: 88px;
  aspect-ratio: auto;
  border-radius: 50%;
}

body.home .ac-team-row-info {
  padding: 0;
}

body.home .ac-team-row-name {
  margin-bottom: 2px;
}

body.home .ac-team-row-bio {
  margin-top: 6px;
}

/* Closing section — stacked, like the narrow column of the guide. */
body.home .ac-close-grid.ac-close-grid {
  flex-wrap: wrap;
  flex-direction: column;
  gap: 48px;
}

body.home .ac-close-grid > .wp-block-column {
  flex-basis: 100%;
}

body.home .ac-close-grid > .wp-block-column:last-child {
  max-width: 460px;
}

body.home .ac-close .ac-close-badge {
  margin-bottom: 20px;
  padding: 8px 18px;
  border-color: color-mix(in srgb, var(--ac-red) 30%, transparent);
}

body.home .ac-close .ac-close-title {
  margin-bottom: 28px;
}

body.home .ac-close .ac-close-sub {
  max-width: 440px;
  margin-top: 0;
}

/* Brand strip and footer. */
body.home .ac-brand-strip.ac-brand-strip {
  width: auto;
  max-width: none;
  padding: 24px 0;
  text-align: left;
  white-space: normal;
}

body.home .ac-site-footer {
  border-top: 0;
}


/* Section rhythm of the guide: 88px blocks, 56px gutter on the plane side. */
@media (min-width: 769px) {
  body.home .ac-testimonial {
    padding: 64px 48px 64px 56px;
  }

  body.home .ac-pain,
  body.home .ac-team,
  body.home .ac-close {
    padding: 88px 48px 88px 56px;
  }

  body.home .ac-brand-strip.ac-brand-strip {
    margin: 56px 48px 56px 56px;
  }

  body.home .ac-site-footer {
    padding: 28px 48px 40px 56px;
  }
}

@media (max-width: 768px) {
  /* The guide drops the plane column and pads every section with 24px. */
  body.home .ac-testimonial {
    padding: 64px 24px;
  }

  body.home .ac-pain,
  body.home .ac-team {
    padding: 88px 24px;
  }

  body.home .ac-close {
    padding: 60px 24px;
  }

  body.home .ac-pain-grid.ac-pain-grid > .wp-block-column {
    flex-basis: 100%;
  }

  body.home .ac-brand-strip.ac-brand-strip {
    margin: 48px 24px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Split layout for any page that carries a fixed visual column. Services
 * uses it with the car animation, the same way Home uses it with the plane:
 * the content flows in the left column and the canvas stays fixed on the
 * right. Everything here is a default — the inline styles Gutenberg writes
 * always win, so the page stays editable from the block panel.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  body:has(.ac-car) .ac-main > .wp-block-post-content {
    position: relative;
    z-index: 2;
    width: var(--ac-split-content-width);
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    background: var(--ac-white);
  }

  body:has(.ac-car) .ac-main > .wp-block-post-content > .alignfull:not(.ac-car) {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  body:has(.ac-car) .ac-main > .wp-block-post-content > .ac-car.ac-car {
    width: var(--ac-split-visual-width);
    max-width: none;
    margin: 0;
  }

  /* Hero: full viewport height, copy aligned to the left gutter. */
  body:has(.ac-car) .ac-services-hero {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: center;
    padding: 0 48px 0 56px;
    background: var(--ac-white);
  }

  body:has(.ac-car) .ac-services-hero::before {
    display: none;
  }

  /* Sizes of the texts beside the car: the `$split` context of their roles
     (inc/style-roles.php). Only layout stays here. */
  body:has(.ac-car) .ac-services-hero-title {
    max-width: 620px;
  }

  /* Plans: one card per row inside the column, keeping the 1px rule grid. */
  body:has(.ac-car) .ac-services-plans {
    padding: 88px 48px 88px 56px;
  }

  body:has(.ac-car) .ac-services-plans-grid.ac-services-plans-grid {
    grid-template-columns: 1fr;
    border: 1px solid var(--ac-light);
  }

  /* Spacing beside the car: services-plans → "Beside the car animation". */
  body:has(.ac-car) .ac-services-plan-card.ac-services-plan-card {
    gap: var(--ac-services-card-content-gap, 20px);
    padding: var(--ac-services-card-split-padding-top, 32px) var(--ac-services-card-split-padding-x, 28px) var(--ac-services-card-split-padding-bottom, 36px);
  }

  /* Testimonial: left aligned, like the Home ones. */
  body:has(.ac-car) .ac-services-testimonial {
    padding: 64px 48px 64px 56px;
    text-align: left;
  }

  body:has(.ac-car) .ac-services-testimonial-quote {
    max-width: none;
    margin: 0 0 24px;
  }

  body:has(.ac-car) .ac-services-testimonial-attr {
    margin: 0;
  }

  /* "Why Action" and the closing CTA stack instead of sitting side by side. */
  body:has(.ac-car) .ac-services-split.ac-services-split {
    grid-template-columns: 1fr;
  }

  body:has(.ac-car) .ac-services-split-col.ac-services-split-col {
    align-items: flex-start;
    padding: 88px 48px 88px 56px;
    text-align: left;
  }

  body:has(.ac-car) .ac-services-split-col-left {
    border-right: 0;
    border-bottom: 1px solid var(--ac-light);
  }

  body:has(.ac-car) .ac-services-difference-text.ac-services-difference-text,
  body:has(.ac-car) .ac-services-page-cta-sub.ac-services-page-cta-sub {
    max-width: 480px;
  }

  /* Brand strip and footer follow the Home treatment. */
  body:has(.ac-car) .ac-services-brand-strip.ac-services-brand-strip {
    width: auto;
    max-width: none;
    margin: 56px 48px 56px 56px;
    padding: 24px 0;
    text-align: left;
    white-space: normal;
  }

  body:has(.ac-car) .ac-site-footer {
    width: var(--ac-split-content-width);
    margin-right: auto;
    margin-left: 0;
    padding: 28px 48px 40px 56px;
    border-top: 0;
  }

}

@media (max-width: 768px) {
  body:has(.ac-car) .ac-main > .wp-block-post-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    background: var(--ac-white);
  }

  body:has(.ac-car) .ac-services-plans-grid.ac-services-plans-grid {
    grid-template-columns: 1fr;
  }

  body:has(.ac-car) .ac-services-testimonial {
    padding: 64px 24px;
    text-align: left;
  }

  body:has(.ac-car) .ac-services-testimonial-quote {
    max-width: none;
    margin: 0 0 24px;
  }

  body:has(.ac-car) .ac-services-testimonial-attr {
    margin: 0;
  }

  body:has(.ac-car) .ac-services-split-col.ac-services-split-col {
    align-items: flex-start;
    text-align: left;
  }

  body:has(.ac-car) .ac-services-brand-strip.ac-services-brand-strip {
    width: auto;
    max-width: none;
    margin: 48px 24px;
    padding: 24px 0;
    text-align: left;
    white-space: normal;
  }

  body:has(.ac-car) .ac-site-footer {
    border-top: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Split layout for Business Cases. Same shape as Home (airplane) and
 * Services (car): the whole page content flows in the left column and the
 * chronograph canvas stays fixed on the right. The sections of the page were
 * laid out for the full viewport width, so here they are re-stacked to read
 * inside the narrower column. Everything is a default — inline styles written
 * from the editor still win, so the page stays editable from the block panel.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  body:has(.ac-watch) .ac-main > .wp-block-post-content {
    position: relative;
    z-index: 2;
    width: var(--ac-watch-content-width, var(--ac-split-content-width));
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    background: var(--ac-white);
  }

  body:has(.ac-watch) .ac-main > .wp-block-post-content > .alignfull:not(.ac-watch) {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  body:has(.ac-watch) .ac-main > .wp-block-post-content > .ac-watch.ac-watch {
    width: var(--ac-watch-visual-width, var(--ac-split-visual-width));
    max-width: none;
    margin: 0;
  }

  /* Hero: the chart moves under the copy instead of sitting beside it. */
  body:has(.ac-watch) .ac-business-hero {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 160px 48px 96px 56px;
  }

  /* Typography beside the chronograph: contexts of the roles in
     inc/style-roles.php (business-hero-title, business-hero-body, …). */
  body:has(.ac-watch) .ac-business-hero-title {
    max-width: 620px;
  }

  body:has(.ac-watch) .ac-business-hero-copy {
    max-width: 480px;
  }

  body:has(.ac-watch) .ac-business-hero-right {
    min-height: 0;
  }

  /* Selected work: one column per case panel, keeping the 1px rule grid. */
  body:has(.ac-watch) .ac-business-cases {
    padding: 88px 48px 88px 56px;
  }

  body:has(.ac-watch) .ac-business-case-panel {
    grid-template-columns: 1fr;
  }

  body:has(.ac-watch) .ac-business-case-text {
    padding: 40px 32px;
    border-right: 0;
    border-bottom: 1px solid var(--ac-light);
  }

  body:has(.ac-watch) .ac-business-case-stat {
    padding: 40px 32px;
  }

  /* Metrics: two per row instead of four. */
  body:has(.ac-watch) .ac-business-stats {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding: 72px 48px 72px 56px;
  }

  /* Testimonial and closing CTA: left aligned, like the Home ones. */
  body:has(.ac-watch) .ac-business-testimonial {
    padding: 64px 48px 64px 56px;
    text-align: left;
  }

  body:has(.ac-watch) .ac-business-testimonial-quote {
    max-width: none;
    margin: 0 0 24px;
  }

  body:has(.ac-watch) .ac-business-testimonial-attr {
    margin: 0;
  }

  body:has(.ac-watch) .ac-business-cta.ac-business-cta {
    align-items: flex-start;
    padding: 88px 48px 88px 56px;
    text-align: left;
  }

  body:has(.ac-watch) .ac-business-cta-sub {
    max-width: 480px;
    margin-right: 0;
    margin-left: 0;
  }

  /* Brand strip and footer follow the Home and Services treatment. */
  body:has(.ac-watch) .ac-brand-strip.ac-brand-strip {
    width: auto;
    max-width: none;
    margin: 56px 48px 56px 56px;
    padding: 24px 0;
    text-align: left;
    white-space: normal;
  }

  body:has(.ac-watch) .ac-site-footer {
    width: var(--ac-watch-content-width, var(--ac-split-content-width));
    margin-right: auto;
    margin-left: 0;
    padding: 28px 48px 40px 56px;
    border-top: 0;
  }

}

@media (max-width: 768px) {
  body:has(.ac-watch) .ac-main > .wp-block-post-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    background: var(--ac-white);
  }

  body:has(.ac-watch) .ac-business-testimonial {
    padding: 64px 24px;
    text-align: left;
  }

  body:has(.ac-watch) .ac-business-testimonial-quote {
    max-width: none;
    margin: 0 0 24px;
  }

  body:has(.ac-watch) .ac-business-testimonial-attr {
    margin: 0;
  }

  body:has(.ac-watch) .ac-business-cta.ac-business-cta {
    align-items: flex-start;
    text-align: left;
  }

  body:has(.ac-watch) .ac-business-cta-sub {
    margin-right: 0;
    margin-left: 0;
  }

  body:has(.ac-watch) .ac-brand-strip.ac-brand-strip {
    width: auto;
    max-width: none;
    margin: 48px 24px;
    padding: 24px 0;
    text-align: left;
    white-space: normal;
  }

  body:has(.ac-watch) .ac-site-footer {
    border-top: 0;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Split layout for Career. Same shape as Home (airplane), Services (car) and
 * Business Cases (chronograph): the whole page content flows in the left
 * column and the visual stays fixed on the right. The difference is the piece
 * itself — a Spline scene that turns on its own, not a frame sequence driven
 * by scroll. Everything here is a default; inline styles written from the
 * editor still win, so the page stays editable from the block panel.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  body:has(.ac-cube) .ac-main > .wp-block-post-content {
    position: relative;
    z-index: 2;
    width: var(--ac-cube-content-width, var(--ac-split-content-width));
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    background: var(--ac-white);
  }

  body:has(.ac-cube) .ac-main > .wp-block-post-content > .alignfull:not(.ac-cube) {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  body:has(.ac-cube) .ac-main > .wp-block-post-content > .ac-cube.ac-cube {
    width: var(--ac-cube-visual-width, var(--ac-split-visual-width));
    max-width: none;
    margin: 0;
  }

  /* Hero: the two halves stack instead of sitting side by side. */
  body:has(.ac-cube) .ac-career-hero.ac-career-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
    padding: 160px 48px 96px 56px;
  }

  /* Sizes of the texts beside the cube: role contexts (inc/style-roles.php). */
  body:has(.ac-cube) .ac-career-hero .ac-about-hero-title {
    max-width: 620px;
  }

  body:has(.ac-cube) .ac-career-hero .ac-about-hero-right p {
    max-width: 480px;
  }

  /* The hero ships a decorative offwhite rectangle on its right half. Once the
     two halves stack, that band has to sit *under* the first one instead of
     beside it, so the rule is dropped and the ground moves onto the second
     half itself, bled out to both edges of the column. */
  body:has(.ac-cube) .ac-career-hero::before {
    display: none;
  }

  body:has(.ac-cube) .ac-career-hero .ac-about-hero-right {
    margin: 0 -48px -96px -56px;
    padding: 56px 48px 96px 56px;
    background: var(--ac-offwhite);
  }

  /* Philosophy band: also stacked, keeping its dark ground. */
  body:has(.ac-cube) .ac-career-philosophy.ac-career-philosophy {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 96px 48px 96px 56px;
  }

  body:has(.ac-cube) .ac-career-philosophy .ac-about-philosophy-right p {
    max-width: 520px;
  }

  /* Values: one card per row instead of three, keeping the 1px rule grid. */
  body:has(.ac-cube) .ac-career-values.ac-career-values {
    padding: 88px 48px 88px 56px;
  }

  body:has(.ac-cube) .ac-about-values-grid.ac-about-values-grid {
    grid-template-columns: 1fr;
  }

  /* Open roles and the application form inside the narrow column. */
  body:has(.ac-cube) .ac-career-roles {
    padding: 88px 48px 88px 56px;
  }

  body:has(.ac-cube) .ac-career-roles-header {
    flex-direction: column;
    align-items: flex-start;
  }

  body:has(.ac-cube) .ac-career-application {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 96px 48px 96px 56px;
  }

  /* Closing CTA left aligned, like the Home and Business Cases ones. */
  body:has(.ac-cube) .ac-career-cta.ac-career-cta {
    align-items: flex-start;
    padding: 88px 48px 88px 56px;
    text-align: left;
  }

  body:has(.ac-cube) .ac-career-cta .ac-business-cta-sub {
    max-width: 480px;
    margin-right: 0;
    margin-left: 0;
  }

  /* Brand strip and footer follow the treatment of the other split pages. */
  body:has(.ac-cube) .ac-brand-strip.ac-brand-strip {
    width: auto;
    max-width: none;
    margin: 56px 48px 56px 56px;
    padding: 24px 0;
    text-align: left;
    white-space: normal;
  }

  body:has(.ac-cube) .ac-site-footer {
    width: var(--ac-cube-content-width, var(--ac-split-content-width));
    margin-right: auto;
    margin-left: 0;
    padding: 28px 48px 40px 56px;
    border-top: 0;
  }

}

@media (max-width: 768px) {
  body:has(.ac-cube) .ac-main > .wp-block-post-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    background: var(--ac-white);
  }

  body:has(.ac-cube) .ac-career-cta.ac-career-cta {
    align-items: flex-start;
    text-align: left;
  }

  body:has(.ac-cube) .ac-career-cta .ac-business-cta-sub {
    margin-right: 0;
    margin-left: 0;
  }

  body:has(.ac-cube) .ac-brand-strip.ac-brand-strip {
    width: auto;
    max-width: none;
    margin: 48px 24px;
    padding: 24px 0;
    text-align: left;
    white-space: normal;
  }

  body:has(.ac-cube) .ac-site-footer {
    border-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ac-animate {
    opacity: 1;
    transform: none;
  }
}

/* Services page: native blocks keep copy and links editable; CSS preserves the approved layout.
   Typography and colour of every text: its role in inc/style-roles.php. */
.ac-services-plans {
  border-bottom: 1px solid var(--ac-light);
}

.ac-services-plans-grid.ac-services-plans-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  background: var(--ac-light);
  border-left: 1px solid var(--ac-light);
  border-right: 1px solid var(--ac-light);
}

.ac-services-plan-card.ac-services-plan-card{
  position: relative;
  display: flex;
  min-height: var(--ac-services-card-min-height, 0px);
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--ac-services-card-content-gap, 16px);
  margin: 0;
  padding: var(--ac-services-card-padding-top, 56px) var(--ac-services-card-padding-x, 16px) var(--ac-services-card-padding-bottom, 64px);
  overflow: hidden;
  background: var(--ac-services-card-background, var(--ac-white));
  transition: background .3s ease;
}

.ac-services-plan-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--ac-services-card-accent, var(--ac-red));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

.ac-services-plan-card:hover::before,
.ac-services-plan-featured::before { transform: scaleX(1); }

/* The card rule above sets a background with two classes, so the featured
   variant needs the same weight to win, as in servicios.html. */
.ac-services-plan-featured.ac-services-plan-featured { background: var(--ac-services-card-featured-background, var(--ac-ink)); }

.ac-services-plan-name.ac-services-plan-name{
  width: 100%;
  margin: 0;
}

.ac-services-plan-actions.ac-services-plan-actions{
  width: 100%;
  margin: 0;
}

.ac-services-plan-actions .wp-block-button { margin: 0; }

.ac-services-plan-actions .wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  border: 1px solid var(--ac-ink);
  border-radius: 0;
  background: transparent;
  transition: background .3s ease, color .3s ease;
}

.ac-services-plan-actions .wp-block-button__link:hover {
  background: var(--ac-ink);
  color: var(--ac-white);
}

.ac-services-plan-featured .wp-block-button__link {
  border-color: var(--ac-services-card-accent, var(--ac-red));
  background: var(--ac-services-card-accent, var(--ac-red));
}

.ac-services-plan-featured .wp-block-button__link:hover { background: var(--ac-red-dark); }

.ac-services-testimonial {
  padding: 80px 56px;
  border-bottom: 1px solid var(--ac-light);
  text-align: center;
}

.ac-services-testimonial-quote {
  max-width: 760px;
  margin: 0 auto;
}

.ac-services-testimonial-quote::before { margin-right: 4px; color: var(--ac-red); content: "“"; }
.ac-services-testimonial-quote::after { margin-left: 4px; color: var(--ac-red); content: "”"; }

.ac-services-testimonial-attr {
  margin: 28px 0 0;
}

.ac-services-split.ac-services-split{
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--ac-light);
}

/* Layer "glow" of the row (inc/style-roles.php, `.ac-services-split`): colour,
   opacity and visibility come from --ac-layer-glow-* on the row, always set
   when it renders. A gradient chosen as the row background replaces the glow
   instead of stacking over it, unless the glow is set to "Always show". */
.ac-services-split::before {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 700px;
  height: 560px;
  background: radial-gradient(ellipse, var(--ac-layer-glow-color), transparent 70%);
  opacity: var(--ac-layer-glow-opacity);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.ac-services-split.is-ac-layer-glow-hidden.is-ac-layer-glow-hidden::before,
.ac-services-split.has-ac-base-gradient:not(.is-ac-layer-glow-shown)::before {
  display: none;
}

.ac-services-split-col.ac-services-split-col{
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 120px 56px;
  text-align: center;
}

.ac-services-split-col-left { border-right: 1px solid var(--ac-light); }

.ac-services-difference-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
}

/* The lines follow the eyebrow's colour. */
.ac-services-difference-eyebrow::before,
.ac-services-difference-eyebrow::after {
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  content: "";
}

.ac-services-difference-title.ac-services-difference-title,
.ac-services-page-cta-title.ac-services-page-cta-title{
  max-width: 440px;
  margin: 0 0 28px;
}

.ac-services-difference-text.ac-services-difference-text,
.ac-services-page-cta-sub.ac-services-page-cta-sub{
  max-width: 440px;
  margin: 0;
}

/* The border follows the badge's colour. */
.ac-services-page-cta-badge.ac-services-page-cta-badge{
  display: inline-block;
  margin: 0 0 24px;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.ac-services-page-cta-buttons.ac-services-page-cta-buttons{ margin-top: 36px; }

.ac-services-brand-strip.ac-services-brand-strip{
  max-width: 100%;
  padding: 28px 48px;
  border-top: 1px solid var(--ac-light);
  border-bottom: 1px solid var(--ac-light);
  text-align: center;
  white-space: nowrap;
}

/* Without a fixed visual column the strip stays centred, as before. */
body:not(:has(.ac-car)) .ac-services-brand-strip.ac-services-brand-strip {
  width: fit-content;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .ac-services-plans-grid.ac-services-plans-grid { grid-template-columns: 1fr; }
  .ac-services-split.ac-services-split { grid-template-columns: 1fr; }
  .ac-services-split-col.ac-services-split-col { padding: 88px 32px; }
  .ac-services-split-col-left { border-right: 0; border-bottom: 1px solid var(--ac-light); }
}

@media (max-width: 600px) {
  .ac-services-plan-card.ac-services-plan-card {
    min-height: var(--ac-services-card-min-height, 0px);
    padding: var(--ac-services-card-mobile-padding-top, 42px) var(--ac-services-card-mobile-padding-x, 28px) var(--ac-services-card-mobile-padding-bottom, 48px);
  }
  .ac-services-testimonial { padding: 64px 24px; }
  .ac-services-split-col.ac-services-split-col { padding: 72px 20px; }
  .ac-services-brand-strip.ac-services-brand-strip { padding: 24px 20px; }
}

/* Methodology page: native block sections surrounding the custom hero/carousel.
   Typography and colour of every text: its role in inc/style-roles.php. */
.ac-method-intro {
  padding: 96px 56px;
  border-bottom: 1px solid var(--ac-light);
}

.ac-method-intro-grid.ac-method-intro-grid,
.ac-method-cta-grid.ac-method-cta-grid{
  gap: 80px;
}

.ac-method-intro-title {
  margin: 0;
}

.ac-method-intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.ac-method-intro-copy > p {
  margin: 0;
}

/* The paragraph carries the typography (its role); the link follows it. */
.ac-method-inline-link a {
  color: inherit;
  text-decoration: none;
}

.ac-method-quote {
  padding: 96px 56px;
  border-bottom: 1px solid var(--ac-light);
  text-align: center;
}

.ac-method-quote-text {
  max-width: 740px;
  margin: 0 auto 28px;
}

.ac-method-quote-text::before,
.ac-method-quote-text::after {
  color: var(--ac-red);
  content: "“";
}

.ac-method-quote-text::after { content: "”"; }
.ac-method-quote-attr { margin: 0; }

.ac-method-cta {
  position: relative;
  padding: 120px 56px;
  overflow: hidden;
}

/* Layer "glow" (inc/style-roles.php, key .ac-method-cta): colour, opacity and
   visibility come from --ac-layer-glow-* on the section, always set when it
   renders. A gradient chosen as the section background replaces the glow
   instead of stacking over it, unless the glow is set to "Always show". */
.ac-method-cta::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 20% 50%, var(--ac-layer-glow-color), transparent);
  opacity: var(--ac-layer-glow-opacity);
  content: "";
  pointer-events: none;
}

.ac-method-cta.is-ac-layer-glow-hidden.is-ac-layer-glow-hidden::before,
.ac-method-cta.has-ac-base-gradient:not(.is-ac-layer-glow-shown)::before {
  display: none;
}

.ac-method-cta-grid,
.ac-method-cta-buttons {
  position: relative;
  z-index: 1;
}

/* The border follows the badge's text colour at 30%. */
.ac-method-cta-badge {
  display: inline-block;
  margin: 0 0 24px;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.ac-method-cta-title {
  margin: 0 0 32px;
}

.ac-method-cta-sub { max-width: 460px; margin: 0; }
.ac-method-features { display: flex; flex-direction: column; gap: 1px; background: var(--ac-light); border: 1px solid var(--ac-light); }
.ac-method-feature { gap: 20px; padding: 32px 36px; background: var(--ac-white); transition: background .3s ease; }
.ac-method-feature:hover { background: var(--ac-offwhite); }
.ac-method-feature-number { flex-shrink: 0; margin: 0; color: var(--ac-light); font-family: var(--ac-font-display); font-size: 36px; font-weight: 300; line-height: 1; }
.ac-method-feature-copy h4 { margin: 0 0 6px; color: var(--ac-ink); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.ac-method-feature-copy p { margin: 0; color: var(--ac-mid); font-size: 12px; font-weight: 300; line-height: 1.7; }
.ac-method-cta-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 56px; }
.ac-method-cta-buttons .ac-outline-button { margin: 0; }

@media (max-width: 900px) {
  .ac-method-intro,
  .ac-method-cta { padding: 64px 32px; }
  .ac-method-intro-grid,
  .ac-method-cta-grid { flex-direction: column; gap: 48px !important; }
  .ac-method-quote { padding: 64px 32px; }
}

/* About page with editable native blocks. */
.ac-about-hero.ac-about-hero{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin: 0;
  padding: 180px 56px 120px;
  overflow: hidden;
  border-bottom: 1px solid var(--ac-light);
}

/* Layer "band" (inc/style-roles.php, `.ac-about-hero`): colour, opacity and
   visibility from the Background layers panel. */
.ac-about-hero::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: var(--ac-layer-band-color, var(--ac-offwhite));
  opacity: var(--ac-layer-band-opacity, 1);
  content: "";
  pointer-events: none;
}

.ac-about-hero.has-ac-base-gradient::before,
.ac-about-hero.is-ac-layer-band-hidden.is-ac-layer-band-hidden::before {
  display: none;
}

.ac-about-hero.is-ac-layer-band-shown.is-ac-layer-band-shown.is-ac-layer-band-shown::before {
  display: block;
}

.ac-about-hero-left,
.ac-about-hero-right {
  position: relative;
  z-index: 1;
}

/* Typography and colour of every About text (and of the Career texts that
   share these classes): roles in inc/style-roles.php (about-*). Only layout
   and decoration stay here. */
.ac-about-hero-eyebrow,
.ac-about-founder-eyebrow,
.ac-about-section-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
}

/* The line follows the colour of the eyebrow text. */
.ac-about-hero-eyebrow::before,
.ac-about-founder-eyebrow::before {
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  content: "";
}

.ac-about-hero-title.ac-about-hero-title,
.ac-about-section-title.ac-about-section-title,
.ac-about-founder-title.ac-about-founder-title,
.ac-about-philosophy-title.ac-about-philosophy-title,
.ac-about-cta-title.ac-about-cta-title{
  margin: 0;
}

.ac-about-hero-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  padding-bottom: 4px;
}

.ac-about-hero-right p,
.ac-about-founder-body p,
.ac-about-philosophy-right p,
.ac-about-cta-sub {
  margin: 0;
}

.ac-about-hero-buttons.ac-about-hero-buttons{ margin-top: 4px; }

/* Typography and colour: role about-outline-button. */
.ac-about-outline-red .wp-block-button__link {
  position: relative;
  padding: 20px 44px;
  overflow: hidden;
  border: 1px solid var(--ac-red);
  border-radius: 0;
  background: transparent;
  transition: background .35s ease, color .35s ease;
}

.ac-about-outline-red .wp-block-button__link:hover {
  background: var(--ac-red);
  color: var(--ac-white);
}

.ac-about-founder.ac-about-founder{
  display: grid !important;
  grid-template-columns: 5fr 7fr;
  gap: 0;
  min-height: 700px;
  margin: 0;
  border-bottom: 1px solid var(--ac-light);
}

.ac-about-founder-photo-col.ac-about-founder-photo-col{
  position: relative;
  min-width: 0;
  min-height: 500px;
  margin: 0;
  overflow: hidden;
  background: var(--ac-offwhite);
}

.ac-about-founder-photo.ac-about-founder-photo{
  width: 100%;
  height: 100%;
  min-height: 700px;
  margin: 0;
}

.ac-about-founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ac-about-founder-photo-corner.ac-about-founder-photo-corner{
  position: absolute;
  bottom: 32px;
  left: 36px;
  z-index: 2;
  margin: 0;
}

.ac-about-founder-photo-name {
  margin: 0;
}

.ac-about-founder-photo-role {
  margin: 4px 0 0;
}

.ac-about-founder-content.ac-about-founder-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 96px 72px;
}

.ac-about-founder-eyebrow {
  gap: 12px;
  margin-bottom: 24px;
}

.ac-about-founder-eyebrow::before {
  width: 24px;
}

.ac-about-founder-title.ac-about-founder-title{
  margin-bottom: 32px;
}

.ac-about-founder-body.ac-about-founder-body{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 40px;
}

.ac-about-credentials.ac-about-credentials{
  gap: 40px;
  margin: 0;
  padding-top: 32px;
  border-top: 1px solid var(--ac-light);
}

.ac-about-credentials .wp-block-column {
  flex-basis: auto !important;
  flex-grow: 0;
}

.ac-about-credential-num {
  margin: 0;
}

.ac-about-credential-label {
  margin: 4px 0 0;
}

/* The paragraph carries the typography (role about-inline-link); the link
   follows it. */
.ac-about-inline-link a {
  color: inherit;
  text-decoration: none;
}

.ac-about-inline-link.ac-about-inline-link{
  margin-top: 28px;
}

.ac-about-values,
.ac-about-team {
  padding: 96px 56px;
  border-bottom: 1px solid var(--ac-light);
}

.ac-about-values-header.ac-about-values-header{
  margin: 0 0 64px;
}

.ac-about-section-eyebrow {
  display: block;
  margin-bottom: 20px;
}

.ac-about-values-grid.ac-about-values-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  border: 1px solid var(--ac-light);
  background: var(--ac-light);
}

.ac-about-values-grid.ac-about-values-grid > .wp-block-column{
  margin: 0;
}

.ac-about-value-card.ac-about-value-card{
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 48px 40px 52px;
  overflow: hidden;
  background: var(--ac-white);
  transition: background .3s ease;
}

.ac-about-value-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--ac-red);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}

.ac-about-value-card:hover {
  background: var(--ac-offwhite);
}

.ac-about-value-card:hover::before {
  transform: scaleX(1);
}

.ac-about-value-num {
  margin: 0 0 28px;
}

.ac-about-value-title.ac-about-value-title{
  margin: 0 0 14px;
}

.ac-about-value-body {
  margin: 0;
}

.ac-about-philosophy.ac-about-philosophy{
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin: 0;
  padding: 120px 56px;
  overflow: hidden;
  background: var(--ac-ink);
}

/* Layer "glow" (inc/style-roles.php, `.ac-about-philosophy`): colour, opacity
   and visibility from the Background layers panel; a gradient on the base
   background hides it instead of stacking a second one. */
.ac-about-philosophy::before {
  position: absolute;
  top: 50%;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse, var(--ac-layer-glow-color, var(--ac-red)), transparent 70%);
  opacity: var(--ac-layer-glow-opacity, .12);
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.ac-about-philosophy.has-ac-base-gradient::before,
.ac-about-philosophy.is-ac-layer-glow-hidden.is-ac-layer-glow-hidden::before {
  display: none;
}

.ac-about-philosophy.is-ac-layer-glow-shown.is-ac-layer-glow-shown.is-ac-layer-glow-shown::before {
  display: block;
}

.ac-about-philosophy > .wp-block-column {
  position: relative;
  z-index: 1;
}

.ac-about-philosophy-eyebrow {
  margin: 0 0 24px;
}

.ac-about-philosophy-right p {
  margin-bottom: 20px;
}

.ac-about-philosophy-right p:last-child {
  margin-bottom: 0;
}

/* The paragraph carries the typography (its role); the link follows it. */
.ac-about-inline-link-white a {
  color: inherit;
  text-decoration: none;
}

.ac-about-testimonials {
  padding: 96px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--ac-light);
}

.ac-about-testimonials-header.ac-about-testimonials-header{
  margin: 0;
  padding: 0 56px 56px;
}

.ac-about-testimonials-wrap.ac-about-testimonials-wrap{
  margin: 0;
  overflow: hidden;
}

.ac-about-testimonials-track.ac-about-testimonials-track{
  display: flex;
  gap: 1px;
  margin: 0;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.ac-about-testimonial-card.ac-about-testimonial-card{
  display: flex;
  min-height: 300px;
  flex: 0 0 calc(50% - 1px);
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 60px 56px;
  border: 1px solid var(--ac-light);
  background: var(--ac-offwhite);
}

.ac-about-t-quote {
  flex: 1;
  margin: 0 0 32px;
}

.ac-about-t-quote::before {
  margin-right: 4px;
  color: var(--ac-red);
  content: "“";
}

.ac-about-t-attr {
  margin: 0;
}

.ac-about-testimonials-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 32px 56px 0;
}

/* Arrows and counter (block testimonials-nav). Typography and colour: roles
   about-testimonial-arrow / -counter / -current; the arrow colour arrives
   through --ac-about-t-btn-color so the hover below can turn it white. */
.ac-about-t-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ac-light);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.ac-about-t-btn:hover,
.ac-about-t-btn:focus-visible {
  border-color: var(--ac-ink);
  background: var(--ac-ink);
  color: var(--ac-white);
}

.ac-about-t-btn:disabled {
  cursor: default;
  opacity: .35;
}

.ac-about-t-btn:disabled:hover {
  border-color: var(--ac-light);
  background: transparent;
  color: var(--ac-about-t-btn-color, var(--ac-ink));
}

.ac-about-t-counter {
  margin-left: 8px;
}

.ac-about-testimonials-nav[hidden] {
  display: none;
}

.ac-about-team-header.ac-about-team-header{
  margin: 0 0 8px;
}

.ac-about-team-link.ac-about-team-link{
  margin-top: 0;
}

.ac-about-cta.ac-about-cta{
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin: 0;
  padding: 120px 56px;
  overflow: hidden;
}

/* Layer "glow" (inc/style-roles.php, `.ac-about-cta`): colour, opacity and
   visibility from the Background layers panel; a gradient on the base
   background hides it instead of stacking a second one. */
.ac-about-cta::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 20% 50%, var(--ac-layer-glow-color, var(--ac-red)), transparent);
  opacity: var(--ac-layer-glow-opacity, .07);
  content: "";
  pointer-events: none;
}

.ac-about-cta.has-ac-base-gradient::before,
.ac-about-cta.is-ac-layer-glow-hidden.is-ac-layer-glow-hidden::before {
  display: none;
}

.ac-about-cta.is-ac-layer-glow-shown.is-ac-layer-glow-shown.is-ac-layer-glow-shown::before {
  display: block;
}

.ac-about-cta > .wp-block-column {
  position: relative;
  z-index: 1;
}

/* The border follows the colour of the badge text. */
.ac-about-cta-badge {
  display: inline-block;
  margin: 0 0 24px;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.ac-about-cta-title.ac-about-cta-title{
  margin-bottom: 32px;
}

.ac-about-cta-sub {
  max-width: 560px;
  margin-bottom: 40px;
}

/* Typography of the quote text: role about-signature-quote, on the paragraph
   inside the quote block. */
.ac-about-signature-quote.ac-about-signature-quote{
  position: relative;
  margin: 0;
  padding: 40px;
  border: 1px solid var(--ac-light);
}

.ac-about-signature-quote::before {
  position: absolute;
  top: 24px;
  left: 32px;
  color: var(--ac-red);
  content: "“";
  font-family: var(--ac-font-display);
  font-size: 60px;
  font-style: normal;
  line-height: 1;
}

.ac-about-signature-quote p {
  margin: 0;
}

.ac-about-signature-attr {
  margin: 20px 0 0;
  padding: 0 40px;
}

@media (max-width: 1100px) {
  .ac-about-founder.ac-about-founder {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .ac-about-hero.ac-about-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 140px 32px 80px;
  }
  .ac-about-hero::before { display: none; }
  .ac-about-founder.ac-about-founder,
  .ac-about-philosophy.ac-about-philosophy,
  .ac-about-cta.ac-about-cta {
    grid-template-columns: 1fr;
  }
  .ac-about-founder-photo.ac-about-founder-photo,
  .ac-about-founder-photo-col.ac-about-founder-photo-col {
    min-height: 360px;
  }
  .ac-about-founder-content.ac-about-founder-content {
    padding: 56px 32px;
  }
  .ac-about-values,
  .ac-about-team {
    padding: 64px 32px;
  }
  .ac-about-philosophy.ac-about-philosophy { padding: 64px 32px; }
  .ac-about-cta.ac-about-cta { padding: 64px 32px; }
  .ac-about-values-grid.ac-about-values-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ac-about-philosophy.ac-about-philosophy,
  .ac-about-cta.ac-about-cta {
    gap: 48px !important;
  }
  .ac-about-testimonial-card.ac-about-testimonial-card {
    flex-basis: 85vw;
    padding: 44px 32px;
  }
  .ac-about-testimonials-header.ac-about-testimonials-header,
  .ac-about-testimonials-nav {
    padding-right: 32px;
    padding-left: 32px;
  }
  .ac-about-team-header.ac-about-team-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
  }
}

@media (max-width: 600px) {
  .ac-about-values-grid.ac-about-values-grid,
  .ac-about-team .ac-team-list {
    grid-template-columns: 1fr;
  }
  .ac-about-credentials.ac-about-credentials {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  .ac-about-value-card.ac-about-value-card {
    padding: 48px 32px 52px;
  }
  .ac-about-hero.ac-about-hero {
    padding-right: 24px;
    padding-left: 24px;
  }
  .ac-about-values,
  .ac-about-team {
    padding: 64px 24px;
  }
  .ac-about-philosophy.ac-about-philosophy { padding: 64px 24px; }
  .ac-about-cta.ac-about-cta { padding: 64px 24px; }
  .ac-about-testimonials-header.ac-about-testimonials-header,
  .ac-about-testimonials-nav {
    padding-right: 24px;
    padding-left: 24px;
  }
}

/* Business Cases page native sections. Interactive hero, case switcher and metrics live in editable custom blocks.
   Typography and text colour of every text: roles in inc/style-roles.php
   (business-demo-banner, business-testimonial-*, business-cta-*). */
.ac-business-demo-banner.ac-business-demo-banner{
  margin: 0;
  padding: 10px 16px;
  background: var(--ac-ink);
}

.ac-business-testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 56px;
  border-bottom: 1px solid var(--ac-light);
  text-align: center;
}

.ac-business-testimonial-quote {
  max-width: 780px;
  margin: 0 0 28px;
}

.ac-business-testimonial-quote::before {
  margin-right: 4px;
  color: var(--ac-red);
  content: "“";
}

.ac-business-testimonial-quote::after {
  margin-left: 4px;
  color: var(--ac-red);
  content: "”";
}

.ac-business-testimonial-attr {
  margin: 0;
}

.ac-business-cta.ac-business-cta{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 120px 56px;
  text-align: center;
}

/* Layer "glow" (inc/style-roles.php, `.ac-business-cta`): colour, opacity
   and visibility from the Background layers panel; a gradient on the base
   replaces it instead of stacking over it. */
.ac-business-cta::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, var(--ac-layer-glow-color, var(--ac-red)), transparent);
  opacity: var(--ac-layer-glow-opacity, .07);
  content: "";
  pointer-events: none;
}

.ac-business-cta.has-ac-base-gradient::before,
.ac-business-cta.is-ac-layer-glow-hidden.is-ac-layer-glow-hidden::before {
  display: none;
}

.ac-business-cta.is-ac-layer-glow-shown.is-ac-layer-glow-shown.is-ac-layer-glow-shown::before {
  display: block;
}

.ac-business-cta > * {
  position: relative;
  z-index: 1;
}

.ac-business-cta-badge {
  display: inline-block;
  margin: 0 0 24px;
  padding: 8px 18px;
  /* The border follows the badge's text colour. */
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

/* Any heading level: the level only changes the typography (role). */
.ac-business-cta-title.ac-business-cta-title{
  max-width: 680px;
  margin: 0 0 32px;
}

.ac-business-cta-sub {
  max-width: 480px;
  margin: 0 0 44px;
}

@media (max-width: 900px) {
  .ac-business-testimonial,
  .ac-business-cta {
    padding-right: 32px;
    padding-left: 32px;
  }
}

@media (max-width: 600px) {
  .ac-business-testimonial,
  .ac-business-cta {
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 600px) {
  .ac-method-intro,
  .ac-method-cta { padding: 60px 24px; }
  .ac-method-quote { padding: 60px 24px; }
  .ac-method-feature { padding: 26px 24px; }
  .ac-method-cta-buttons { margin-top: 40px; }
}

/* SCHEDULE A CALL
   Typography and colour of every text are its role (inc/style-roles.php,
   action_consultants_agenda_style_roles()); here only layout and decoration. */

.ac-agenda-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--ac-light);
  background: var(--ac-ink);
  padding: 180px 56px 100px;
}

/* Layers "glow" (::before, left) and "corner" (::after, bottom right) of
   `.ac-agenda-hero` (inc/style-roles.php): colour, opacity and visibility from
   the Background layers panel; a gradient on the base background hides both
   instead of stacking a third one. */
.ac-agenda-hero::before,
.ac-agenda-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ac-agenda-hero::before {
  left: -150px;
  top: 50%;
  width: 700px;
  height: 700px;
  transform: translateY(-50%);
  background: radial-gradient(ellipse, var(--ac-layer-glow-color, var(--ac-red)), transparent 65%);
  opacity: var(--ac-layer-glow-opacity, .15);
}

.ac-agenda-hero::after {
  right: -100px;
  bottom: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse, var(--ac-layer-corner-color, var(--ac-red)), transparent 70%);
  opacity: var(--ac-layer-corner-opacity, .08);
}

.ac-agenda-hero.has-ac-base-gradient::before,
.ac-agenda-hero.is-ac-layer-glow-hidden.is-ac-layer-glow-hidden::before,
.ac-agenda-hero.has-ac-base-gradient::after,
.ac-agenda-hero.is-ac-layer-corner-hidden.is-ac-layer-corner-hidden::after {
  display: none;
}

.ac-agenda-hero.is-ac-layer-glow-shown.is-ac-layer-glow-shown.is-ac-layer-glow-shown::before,
.ac-agenda-hero.is-ac-layer-corner-shown.is-ac-layer-corner-shown.is-ac-layer-corner-shown::after {
  display: block;
}

.ac-agenda-hero > * {
  position: relative;
  z-index: 1;
}

.ac-agenda-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
}

.ac-agenda-hero-eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.ac-agenda-hero-title {
  max-width: 800px;
  margin: 0 0 36px;
}

/* The border follows the colour of the note (22 % of White · 45 % = the
   approved 10 % white). */
.ac-agenda-hero-disclaimer {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  margin: 0;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  padding: 12px 24px;
}

.ac-agenda-hero-disclaimer::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ac-red);
}

.ac-agenda-hero-buttons {
  margin-top: 28px;
}

/* The border follows the colour of the label (20 % of White). */
.ac-agenda-button-ghost .wp-block-button__link {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 20px 44px;
  transition: background .35s, border-color .35s;
}

.ac-agenda-button-ghost .wp-block-button__link:hover {
  border-color: var(--ac-red);
  background: var(--ac-red);
}

.ac-agenda-button-outline .wp-block-button__link {
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  padding: 18px 44px;
  transition: background .35s, border-color .35s, color .35s;
}

.ac-agenda-button-outline .wp-block-button__link:hover {
  border-color: var(--ac-red);
  background: var(--ac-red);
  color: var(--ac-white);
}

.ac-agenda-expect {
  gap: 1px;
  margin: 0;
  border-bottom: 1px solid var(--ac-light);
  background: var(--ac-light);
}

.ac-agenda-expect > .wp-block-column {
  margin: 0;
}

.ac-agenda-expect-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--ac-white);
  padding: 60px 48px 64px;
  transition: background .3s;
}

.ac-agenda-expect-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--ac-red);
  transition: transform .4s ease;
}

.ac-agenda-expect-card:hover {
  background: var(--ac-offwhite);
}

.ac-agenda-expect-card:hover::before {
  transform: scaleX(1);
}

.ac-agenda-expect-num {
  margin: 0 0 24px;
  user-select: none;
}

.ac-agenda-expect-title {
  margin: 0 0 16px;
}

.ac-agenda-expect-body {
  margin: 0;
}

.ac-agenda-expect-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--ac-light);
  padding: 64px 56px;
  text-align: center;
}

.ac-agenda-expect-footer-label {
  margin: 0;
}

.ac-agenda-section-eyebrow {
  margin: 0 0 20px;
}

.ac-agenda-section-title {
  margin: 0 0 32px;
}

.ac-agenda-section-link {
  margin: 32px 0 0;
}

/* The paragraph carries the typography (its role); the link follows it. Its
   own box keeps the height of its text: the paragraph's line height is the
   space the line takes. */
.ac-agenda-section-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid transparent;
  color: inherit;
  line-height: normal;
  text-decoration: none;
  transition: border-color .2s;
}

.ac-agenda-section-link a:hover {
  border-color: currentColor;
}

.ac-agenda-for {
  align-items: center;
  gap: 80px;
  margin: 0;
  border-bottom: 1px solid var(--ac-light);
  padding: 96px 56px;
}

.ac-agenda-for-description {
  margin: 0;
}

.ac-agenda-for-right {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--ac-light);
  background: var(--ac-light);
}

.ac-agenda-for-item,
.ac-agenda-not-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 0;
  padding: 28px 36px;
  transition: background .3s, color .2s;
}

.ac-agenda-for-item {
  background: var(--ac-white);
}

.ac-agenda-for-item:hover {
  background: var(--ac-offwhite);
}

/* Icons of Schedule a Call (criteria, exclusions, call details, FAQ +/×):
   the drawing is a mask (--ac-icon-shape) and its colour is the background, so
   it follows the palette and the «Icon colour» panel of the item or of its list
   (--ac-icon-color / --ac-icon-active-color, set by inc/theme-icons.php). The
   four 1px strips of the mask keep the ring (border) visible. The black of the
   mask is not a colour on screen: only its opacity counts. */
.ac-agenda-for-item::before,
.ac-agenda-not-item::before,
.ac-agenda-call-detail::before,
.ac-agenda-faq-item summary::after {
  background-clip: padding-box;
  /* Three mask layers: the drawing, and the ring — the border box minus the
     padding box, so the 1px border keeps its own geometry instead of being
     approximated with strips. */
  -webkit-mask-image: var(--ac-icon-shape), linear-gradient(black, black), linear-gradient(black, black);
  -webkit-mask-clip: border-box, border-box, padding-box;
  -webkit-mask-size: var(--ac-icon-size) var(--ac-icon-size), auto, auto;
  -webkit-mask-position: center, 0 0, 0 0;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-composite: source-over, xor, source-over;
  mask-image: var(--ac-icon-shape), linear-gradient(black, black), linear-gradient(black, black);
  mask-clip: border-box, border-box, padding-box;
  mask-size: var(--ac-icon-size) var(--ac-icon-size), auto, auto;
  mask-position: center, 0 0, 0 0;
  mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-composite: add, exclude, add;
}

.ac-agenda-for-item::before,
.ac-agenda-not-item::before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-top: 2px;
  --ac-icon-size: 12px;
}

.ac-agenda-for-item::before {
  --ac-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6l3 3 5-5'/%3E%3C/svg%3E");
  border: 1px solid color-mix(in srgb, var(--ac-icon-color, var(--ac-red)) 30%, transparent);
  background-color: var(--ac-icon-color, var(--ac-red));
}

.ac-agenda-not-for {
  border-bottom: 1px solid var(--ac-light);
  background: var(--ac-offwhite);
  padding: 64px 56px;
}

.ac-agenda-not-for .ac-agenda-section-eyebrow {
  margin-bottom: 32px;
}

.ac-agenda-not-grid {
  flex-wrap: wrap !important;
  gap: 1px;
  margin: 0;
  border: 1px solid var(--ac-light);
  background: var(--ac-light);
}

.ac-agenda-not-grid > .wp-block-column {
  flex-basis: calc(50% - 1px) !important;
  margin: 0;
}

.ac-agenda-not-item {
  height: 100%;
  background: var(--ac-offwhite);
}

.ac-agenda-not-item:hover {
  background: var(--ac-red-wash);
  color: var(--ac-ink);
}

.ac-agenda-not-item::before {
  --ac-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M3 3l6 6M9 3l-6 6'/%3E%3C/svg%3E");
  border: 1px solid color-mix(in srgb, var(--ac-icon-color, var(--ac-mid)) 30%, transparent);
  background-color: var(--ac-icon-color, var(--ac-mid));
}

.ac-agenda-not-item:hover::before {
  border-color: color-mix(in srgb, var(--ac-icon-active-color, var(--ac-red)) 50%, transparent);
  background-color: var(--ac-icon-active-color, var(--ac-red));
}

.ac-agenda-schedule {
  align-items: flex-start;
  gap: 80px;
  margin: 0;
  border-bottom: 1px solid var(--ac-light);
  padding: 96px 56px;
}

.ac-agenda-schedule > .ac-agenda-schedule-left {
  flex-basis: 41.66% !important;
}

.ac-agenda-schedule > .ac-agenda-schedule-right {
  flex-basis: 58.33% !important;
}

.ac-agenda-schedule-title {
  margin: 0 0 24px;
}

.ac-agenda-schedule-sub {
  margin: 0 0 40px;
}

.ac-agenda-call-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Icon: the class ac-agenda-icon-<name>, picked in the paragraph's
   «Detail icon» panel (assets/js/editor-collections.js). */
.ac-agenda-call-detail {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
}

.ac-agenda-call-detail::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--ac-light);
  background-color: var(--ac-icon-color, var(--ac-red));
  --ac-icon-size: 16px;
}

.ac-agenda-icon-clock::before {
  --ac-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 5v3l2 2'/%3E%3C/svg%3E");
}

.ac-agenda-icon-calendar::before {
  --ac-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='1'/%3E%3Cpath d='M2 7h12M5 1v4M11 1v4'/%3E%3C/svg%3E");
}

.ac-agenda-icon-pin::before {
  --ac-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M8 2C5.24 2 3 4.24 3 7c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5z'/%3E%3Ccircle cx='8' cy='7' r='1.5'/%3E%3C/svg%3E");
}

.ac-agenda-icon-check::before {
  --ac-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4l-5 5-2-2-4 4'/%3E%3C/svg%3E");
}

.ac-agenda-faq {
  border-bottom: 1px solid var(--ac-light);
  padding: 96px 56px;
}

.ac-agenda-faq-items {
  margin-top: 56px;
}

.ac-agenda-faq-item {
  border-bottom: 1px solid var(--ac-light);
}

/* The question takes its typography and colour from the details block (role
   agenda-faq-question), so that block's own panels reach it. */
.ac-agenda-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
  padding: 28px 0;
  transition: color .2s;
}

.ac-agenda-faq-item summary::-webkit-details-marker {
  display: none;
}

.ac-agenda-faq-item summary:hover {
  color: var(--ac-red);
}

.ac-agenda-faq-item summary::after {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--ac-light);
  --ac-icon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M6 2v8M2 6h8'/%3E%3C/svg%3E");
  --ac-icon-size: 12px;
  background-color: var(--ac-icon-color, var(--ac-ink));
  transition: border-color .2s, transform .3s;
}

.ac-agenda-faq-item[open] summary::after {
  transform: rotate(45deg);
  border-color: var(--ac-icon-active-color, var(--ac-red));
  background-color: var(--ac-icon-active-color, var(--ac-red));
}

/* The question's own Decoration (its details block): on the summary only, so
   the answer is not underlined too (inc/theme-icons.php, T13). */
.has-ac-summary-decoration-underline > summary { text-decoration: underline; }
.has-ac-summary-decoration-line-through > summary { text-decoration: line-through; }
.has-ac-summary-decoration-none > summary { text-decoration: none; }

.ac-agenda-faq-item > p {
  margin: 0;
  padding-bottom: 28px;
}

.ac-agenda-final {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--ac-ink);
  padding: 80px 56px;
  text-align: center;
}

/* Layer "glow" of `.ac-agenda-final` (inc/style-roles.php): colour, opacity
   and visibility from the Background layers panel; a gradient on the base
   background hides it instead of stacking a second one. */
.ac-agenda-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 80% at 50% 50%, var(--ac-layer-glow-color, var(--ac-red)), transparent);
  opacity: var(--ac-layer-glow-opacity, .12);
  pointer-events: none;
}

.ac-agenda-final.has-ac-base-gradient::before,
.ac-agenda-final.is-ac-layer-glow-hidden.is-ac-layer-glow-hidden::before {
  display: none;
}

.ac-agenda-final.is-ac-layer-glow-shown.is-ac-layer-glow-shown.is-ac-layer-glow-shown::before {
  display: block;
}

.ac-agenda-final > * {
  position: relative;
  z-index: 1;
}

.ac-agenda-final-label {
  margin: 0 0 24px;
}

.ac-agenda-final-quote {
  max-width: 640px;
  margin: 0;
}

.ac-agenda-final-buttons {
  margin-top: 40px;
}

@media (max-width: 900px) {
  .ac-agenda-hero { padding: 140px 32px 80px; }

  .ac-agenda-expect { flex-wrap: wrap !important; }
  .ac-agenda-expect > .wp-block-column { flex-basis: 100% !important; }

  .ac-agenda-for {
    flex-wrap: wrap !important;
    gap: 40px;
    padding: 96px 32px;
  }

  .ac-agenda-for > .wp-block-column { flex-basis: 100% !important; }

  .ac-agenda-not-grid > .wp-block-column { flex-basis: 100% !important; }

  .ac-agenda-schedule {
    flex-wrap: wrap !important;
    gap: 48px;
    padding: 64px 32px;
  }

  .ac-agenda-schedule > .wp-block-column { flex-basis: 100% !important; }

  .ac-agenda-not-for,
  .ac-agenda-expect-footer,
  .ac-agenda-faq,
  .ac-agenda-final {
    padding-right: 32px;
    padding-left: 32px;
  }
}

@media (max-width: 600px) {
  .ac-agenda-expect-card { padding: 48px 32px; }
}

/*
 * Shared visual controls for custom Action blocks.
 * The editor emits --ac-visual-* variables only when visual overrides are enabled.
 */
:where(
  .has-ac-visual-controls.wp-block-action-consultants-scroll-video,
  .has-ac-visual-controls.wp-block-action-consultants-calendly,
  .has-ac-visual-controls.wp-block-action-consultants-methodology-hero,
  .has-ac-visual-controls.wp-block-action-consultants-process-carousel,
  .has-ac-visual-controls.wp-block-action-consultants-services-hero,
  .has-ac-visual-controls.wp-block-action-consultants-services-plans,
  .has-ac-visual-controls.wp-block-action-consultants-mobile-process,
  .has-ac-visual-controls.wp-block-action-consultants-business-hero,
  .has-ac-visual-controls.wp-block-action-consultants-business-cases,
  .has-ac-visual-controls.wp-block-action-consultants-business-stats,
  .has-ac-visual-controls.wp-block-action-consultants-career-roles,
  .has-ac-visual-controls.wp-block-action-consultants-career-application,
  .has-ac-visual-controls.wp-block-action-consultants-methodology-results,
  .has-ac-visual-controls.wp-block-action-consultants-demo-calendar
) {
  padding: var(--ac-visual-padding-desktop);
  gap: var(--ac-visual-gap-desktop);
  min-height: var(--ac-visual-min-height);
  aspect-ratio: var(--ac-visual-aspect-ratio);
  color: var(--ac-visual-text-color);
  transition-duration: var(--ac-visual-speed);
}

:where(
  .has-ac-visual-controls.wp-block-action-consultants-scroll-video,
  .has-ac-visual-controls.wp-block-action-consultants-calendly,
  .has-ac-visual-controls.wp-block-action-consultants-methodology-hero,
  .has-ac-visual-controls.wp-block-action-consultants-process-carousel,
  .has-ac-visual-controls.wp-block-action-consultants-services-hero,
  .has-ac-visual-controls.wp-block-action-consultants-services-plans,
  .has-ac-visual-controls.wp-block-action-consultants-mobile-process,
  .has-ac-visual-controls.wp-block-action-consultants-business-hero,
  .has-ac-visual-controls.wp-block-action-consultants-business-cases,
  .has-ac-visual-controls.wp-block-action-consultants-business-stats,
  .has-ac-visual-controls.wp-block-action-consultants-career-roles,
  .has-ac-visual-controls.wp-block-action-consultants-career-application,
  .has-ac-visual-controls.wp-block-action-consultants-methodology-results,
  .has-ac-visual-controls.wp-block-action-consultants-demo-calendar
) :where(h1, h2, h3, h4, .ac-business-hero-title, .ac-method-hero-title, .ac-services-hero-title, .ac-process-title, .ac-career-section-title) {
  color: var(--ac-visual-heading-color);
}

:where(
  .has-ac-visual-controls.wp-block-action-consultants-scroll-video,
  .has-ac-visual-controls.wp-block-action-consultants-calendly,
  .has-ac-visual-controls.wp-block-action-consultants-methodology-hero,
  .has-ac-visual-controls.wp-block-action-consultants-process-carousel,
  .has-ac-visual-controls.wp-block-action-consultants-services-hero,
  .has-ac-visual-controls.wp-block-action-consultants-services-plans,
  .has-ac-visual-controls.wp-block-action-consultants-mobile-process,
  .has-ac-visual-controls.wp-block-action-consultants-business-hero,
  .has-ac-visual-controls.wp-block-action-consultants-business-cases,
  .has-ac-visual-controls.wp-block-action-consultants-business-stats,
  .has-ac-visual-controls.wp-block-action-consultants-career-roles,
  .has-ac-visual-controls.wp-block-action-consultants-career-application,
  .has-ac-visual-controls.wp-block-action-consultants-methodology-results,
  .has-ac-visual-controls.wp-block-action-consultants-demo-calendar
) :where(em, a, button, .wp-block-button__link, .ac-business-chart-line, .ac-business-chart-dot, .ac-demo-cal-day.is-available) {
  border-color: var(--ac-visual-accent-color);
  color: var(--ac-visual-accent-color);
  stroke: var(--ac-visual-accent-color);
}

:where(
  .has-ac-visual-controls.wp-block-action-consultants-services-plans .ac-services-plan-card,
  .has-ac-visual-controls.wp-block-action-consultants-business-cases .ac-business-case-panel,
  .has-ac-visual-controls.wp-block-action-consultants-business-stats .ac-business-stat,
  .has-ac-visual-controls.wp-block-action-consultants-career-roles .ac-career-role-row,
  .has-ac-visual-controls.wp-block-action-consultants-career-application .ac-career-application-panel,
  .has-ac-visual-controls.wp-block-action-consultants-methodology-results .ac-method-result,
  .has-ac-visual-controls.wp-block-action-consultants-demo-calendar .ac-demo-cal,
  .has-ac-visual-controls.wp-block-action-consultants-process-carousel .ac-process-phase-card
) {
  background: var(--ac-visual-card-background);
  transition-duration: var(--ac-visual-speed);
}

:where(
  .has-ac-visual-controls.wp-block-action-consultants-services-plans .ac-services-plan-card,
  .has-ac-visual-controls.wp-block-action-consultants-business-cases .ac-business-case-panel,
  .has-ac-visual-controls.wp-block-action-consultants-business-stats .ac-business-stat,
  .has-ac-visual-controls.wp-block-action-consultants-career-roles .ac-career-role-row,
  .has-ac-visual-controls.wp-block-action-consultants-career-application .ac-career-application-panel,
  .has-ac-visual-controls.wp-block-action-consultants-methodology-results .ac-method-result,
  .has-ac-visual-controls.wp-block-action-consultants-demo-calendar .ac-demo-cal-day.is-available,
  .has-ac-visual-controls.wp-block-action-consultants-process-carousel .ac-process-phase-card
):hover {
  background: var(--ac-visual-hover-background, var(--ac-visual-card-background));
}

:where(
  .has-ac-visual-controls.wp-block-action-consultants-services-plans .ac-services-plans-grid,
  .has-ac-visual-controls.wp-block-action-consultants-business-stats,
  .has-ac-visual-controls.wp-block-action-consultants-career-roles .ac-career-roles-list,
  .has-ac-visual-controls.wp-block-action-consultants-business-cases .ac-business-cases-body,
  .has-ac-visual-controls.wp-block-action-consultants-process-carousel .ac-process-phases,
  .has-ac-visual-controls.wp-block-action-consultants-demo-calendar .ac-demo-cal-slot-list
) {
  gap: var(--ac-visual-gap-desktop);
  grid-template-columns: repeat(var(--ac-visual-columns-desktop), minmax(0, 1fr));
}

@media (max-width: 1024px) {
  :where(
    .has-ac-visual-controls.wp-block-action-consultants-scroll-video,
    .has-ac-visual-controls.wp-block-action-consultants-calendly,
    .has-ac-visual-controls.wp-block-action-consultants-methodology-hero,
    .has-ac-visual-controls.wp-block-action-consultants-process-carousel,
    .has-ac-visual-controls.wp-block-action-consultants-services-hero,
    .has-ac-visual-controls.wp-block-action-consultants-services-plans,
    .has-ac-visual-controls.wp-block-action-consultants-mobile-process,
    .has-ac-visual-controls.wp-block-action-consultants-business-hero,
    .has-ac-visual-controls.wp-block-action-consultants-business-cases,
    .has-ac-visual-controls.wp-block-action-consultants-business-stats,
    .has-ac-visual-controls.wp-block-action-consultants-career-roles,
    .has-ac-visual-controls.wp-block-action-consultants-career-application,
    .has-ac-visual-controls.wp-block-action-consultants-methodology-results,
    .has-ac-visual-controls.wp-block-action-consultants-demo-calendar
  ) {
    padding: var(--ac-visual-padding-tablet, var(--ac-visual-padding-desktop));
    gap: var(--ac-visual-gap-tablet, var(--ac-visual-gap-desktop));
  }

  :where(
    .has-ac-visual-controls.wp-block-action-consultants-services-plans .ac-services-plans-grid,
    .has-ac-visual-controls.wp-block-action-consultants-business-stats,
    .has-ac-visual-controls.wp-block-action-consultants-career-roles .ac-career-roles-list,
    .has-ac-visual-controls.wp-block-action-consultants-business-cases .ac-business-cases-body,
    .has-ac-visual-controls.wp-block-action-consultants-process-carousel .ac-process-phases,
    .has-ac-visual-controls.wp-block-action-consultants-demo-calendar .ac-demo-cal-slot-list
  ) {
    gap: var(--ac-visual-gap-tablet, var(--ac-visual-gap-desktop));
    grid-template-columns: repeat(var(--ac-visual-columns-tablet, var(--ac-visual-columns-desktop)), minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  :where(
    .has-ac-visual-controls.wp-block-action-consultants-scroll-video,
    .has-ac-visual-controls.wp-block-action-consultants-calendly,
    .has-ac-visual-controls.wp-block-action-consultants-methodology-hero,
    .has-ac-visual-controls.wp-block-action-consultants-process-carousel,
    .has-ac-visual-controls.wp-block-action-consultants-services-hero,
    .has-ac-visual-controls.wp-block-action-consultants-services-plans,
    .has-ac-visual-controls.wp-block-action-consultants-mobile-process,
    .has-ac-visual-controls.wp-block-action-consultants-business-hero,
    .has-ac-visual-controls.wp-block-action-consultants-business-cases,
    .has-ac-visual-controls.wp-block-action-consultants-business-stats,
    .has-ac-visual-controls.wp-block-action-consultants-career-roles,
    .has-ac-visual-controls.wp-block-action-consultants-career-application,
    .has-ac-visual-controls.wp-block-action-consultants-methodology-results,
    .has-ac-visual-controls.wp-block-action-consultants-demo-calendar
  ) {
    padding: var(--ac-visual-padding-mobile, var(--ac-visual-padding-tablet, var(--ac-visual-padding-desktop)));
    gap: var(--ac-visual-gap-mobile, var(--ac-visual-gap-tablet, var(--ac-visual-gap-desktop)));
  }

  :where(
    .has-ac-visual-controls.wp-block-action-consultants-services-plans .ac-services-plans-grid,
    .has-ac-visual-controls.wp-block-action-consultants-business-stats,
    .has-ac-visual-controls.wp-block-action-consultants-career-roles .ac-career-roles-list,
    .has-ac-visual-controls.wp-block-action-consultants-business-cases .ac-business-cases-body,
    .has-ac-visual-controls.wp-block-action-consultants-process-carousel .ac-process-phases,
    .has-ac-visual-controls.wp-block-action-consultants-demo-calendar .ac-demo-cal-slot-list
  ) {
    gap: var(--ac-visual-gap-mobile, var(--ac-visual-gap-tablet, var(--ac-visual-gap-desktop)));
    grid-template-columns: repeat(var(--ac-visual-columns-mobile), minmax(0, 1fr));
  }
}