/* =============================================
   CULTIVATE CAPABILITIES – MAIN STYLESHEET
   Brand Colours:
     Teal/Primary:   #00c2a8
     Dark Green:     #035159
     Light BG:       #f5fcfc
     White:          #ffffff
     Dark Text:      #1a1a1a
   ============================================= */

/* =============================================
   POLLY ROUNDED — self-hosted
   ---------------------------------------------
   WOFF2 only. Universally supported since 2016, and ~62% smaller than the
   TTF equivalents (178KB -> 68KB across four weights). No OTF/TTF fallback
   is shipped: any browser without WOFF2 support (IE11, Android 4.x) also
   lacks the CSS custom properties, grid and async/await this theme relies
   on, so it would not render correctly regardless.
   ============================================= */
@font-face {
  font-family: 'Polly Rounded';
  src: url('../fonts/PollyRounded-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Polly Rounded';
  src: url('../fonts/PollyRounded-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Polly Rounded';
  src: url('../fonts/PollyRounded-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Polly Rounded';
  src: url('../fonts/PollyRounded-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- CSS Variables --- */
:root {
  --cc-teal:        #00c2a8;
  --cc-teal-dark:   #00a892;
  --cc-green:       #035159;
  --cc-green-light: #064d58;
  --cc-bg:          #f5fcfc;
  --cc-white:       #ffffff;
  --cc-dark:        #1a2e2e;
  --cc-text:        #2d3838;
  --cc-muted:       #607070;
  --cc-border:      #d0eaea;

  --font-heading:  'Polly Rounded', sans-serif;
  --font-body:     'Polly Rounded', Arial, sans-serif;

  --shadow-sm:  0 2px 8px rgba(3,81,89,0.10);
  --shadow-md:  0 4px 20px rgba(3,81,89,0.15);
  --shadow-lg:  0 8px 40px rgba(3,81,89,0.20);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --container-max: 1200px;
  --container-pad: 1.5rem;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--cc-text);
  background: var(--cc-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--cc-teal); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cc-green); }
ul, ol { list-style: none; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--cc-green);
  line-height: 1.2;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; font-weight: 700; }

p { margin-bottom: 1.2rem; }
p:last-child { margin-bottom: 0; }

/* --- Container --- */
.cc-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* --- Buttons --- */
.cc-btn {
  display: inline-block;
  padding: .85rem 2rem;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .25s ease;
  line-height: 1;
}
.cc-btn-primary {
  background: var(--cc-teal);
  color: var(--cc-white);
  border-color: var(--cc-teal);
}
.cc-btn-primary:hover {
  background: var(--cc-teal-dark);
  border-color: var(--cc-teal-dark);
  color: var(--cc-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* DARK BACKGROUNDS ONLY — white text on a white border. On a light card
   this renders invisible until hover, when the fill arrives behind it.
   Use .cc-btn-line on light surfaces instead. */
.cc-btn-outline {
  background: transparent;
  color: var(--cc-white);
  border-color: var(--cc-white);
}
.cc-btn-outline:hover {
  background: var(--cc-white);
  color: var(--cc-green);
}

/* Light-surface outline: the mirror of .cc-btn-outline. */
.cc-btn-line {
  background: transparent;
  color: var(--cc-green);
  border-color: var(--cc-green);
}
.cc-btn-line:hover {
  background: var(--cc-green);
  color: var(--cc-white);
  border-color: var(--cc-green);
}

/* Quiet secondary action for dark bands — reads as subordinate to the
   primary button beside it without disappearing into the background. */
.cc-btn-ghost {
  background: transparent;
  color: var(--cc-white);
  border-color: rgba(255, 255, 255, .45);
}
.cc-btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--cc-white);
  color: var(--cc-white);
}
.cc-btn-green {
  background: var(--cc-green);
  color: #ffffff;
  border-color: var(--cc-green);
}
.cc-btn-green:hover {
  background: transparent;
  border-color: var(--cc-green);
  color: var(--cc-green);
  transform: translateY(-2px);
}

/* --- Section Utility --- */
.cc-section { padding: 5rem 0; }
.cc-section-sm { padding: 3rem 0; }
.cc-section-bg { background: var(--cc-bg); }
.cc-section-dark {
  background: var(--cc-green);
  color: var(--cc-white);
}
.cc-section-dark h1,
.cc-section-dark h2,
.cc-section-dark h3,
.cc-section-dark h4 { color: var(--cc-white); }

.cc-section-title {
  text-align: center;
  margin-bottom: .75rem;
}
.cc-section-subtitle {
  text-align: center;
  color: var(--cc-muted);
  max-width: 700px;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
}
.cc-overline {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-teal);
  margin-bottom: .6rem;
}

/* =============================================
   HEADER / NAVIGATION
   ============================================= */
#site-header {
  position: sticky;
  top: 0;
  /* Above the mobile panel (1001) so the hamburger stays tappable while the
     menu is open — it becomes the close button. */
  z-index: 1002;
  background: var(--cc-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.site-logo img { height: 55px; width: auto; }
.site-logo .logo-text {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--cc-green);
  line-height: 1.1;
}
.site-logo .logo-tagline {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cc-teal);
}

/* Nav */
.site-nav { display: flex; align-items: center; gap: .25rem; }
.site-nav > ul { display: flex; align-items: center; gap: .1rem; }
.site-nav a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--cc-dark);
  padding: .5rem .8rem;
  border-radius: var(--radius-sm);
  transition: all .2s;
}
.site-nav a:hover { color: var(--cc-teal); background: rgba(0,194,168,.08); }
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a { color: var(--cc-teal); }

/* Dropdown
   ---------------------------------------------------------------
   The menu used to close before you could reach it. Three causes,
   all fixed below:

   1. `top: calc(100% + .5rem)` left an 8px dead gap between the parent
      link and the panel. Crossing it dropped :hover on the <li> and the
      menu closed. Bridged with an invisible ::before that spans the gap,
      so the pointer never leaves the hover region.
   2. `transform: translateY(8px)` meant the panel animated *into* place,
      so its hit area was still moving while you aimed at it.
   3. `transition: all` applied to pointer-events too. When hover was lost
      the panel became unclickable instantly while still fading out — it
      looked open for another quarter second after it had stopped working.

   Also added: a close delay so a brief wobble off the menu doesn't kill
   it, and :focus-within so the dropdowns are reachable by keyboard —
   previously tabbing to a parent item did nothing at all.
   --------------------------------------------------------------- */
.site-nav .menu-item-has-children { position: relative; }
.site-nav .sub-menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 200px;
  background: var(--cc-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: .5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  /* Closing: wait .2s, then fade. Visibility flips only once the fade has
     finished, so the panel stays clickable for as long as it is visible. */
  transition:
    opacity .2s ease .2s,
    transform .2s ease .2s,
    visibility 0s linear .4s;
  z-index: 100;
  border-top: 3px solid var(--cc-teal);
}

/* Invisible bridge across the 8px gap. Sits inside the panel, so hovering
   it keeps the parent <li> in :hover. Inert while the panel is hidden. */
.site-nav .sub-menu::before {
  content: '';
  position: absolute;
  top: -.6rem;
  left: 0;
  right: 0;
  height: .6rem;
}

.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* Opening is immediate — the delay above is for closing only. */
  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility 0s;
}

/* Widen the parent's own hover target a little so small horizontal drifts
   on the way down don't fall outside it. */
.site-nav .menu-item-has-children > a { position: relative; }

/* Reduced motion: drop the fade and the slide, but keep the close delay —
   that delay is a usability affordance, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .site-nav .sub-menu {
    transform: none;
    transition: opacity 0s linear .2s, visibility 0s linear .2s;
  }
  .site-nav .menu-item-has-children:hover > .sub-menu,
  .site-nav .menu-item-has-children:focus-within > .sub-menu {
    transform: none;
    transition: none;
  }
}
.site-nav .sub-menu li a {
  display: block;
  padding: .5rem 1.2rem;
  border-radius: 0;
  font-size: .85rem;
  color: var(--cc-text);
}
.site-nav .sub-menu li a:hover {
  background: var(--cc-bg);
  color: var(--cc-teal);
}

/* Nav CTA */
.nav-cta .cc-btn { padding: .6rem 1.4rem; font-size: .8rem; }

/* Hamburger — animates to a close icon when the panel is open */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  /* 44px minimum touch target (WCAG 2.2 target size). */
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1002;
  border-radius: 8px;
}
.nav-toggle:focus-visible { outline: 2px solid var(--cc-teal); outline-offset: 2px; }

.nav-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}
.nav-toggle__bars span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--cc-dark);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), opacity .18s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Submenu chevron — a real button, so the parent link still navigates */
.nav-sub-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 48px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  color: var(--cc-green);
  flex-shrink: 0;
}
.nav-sub-toggle svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sub-toggle:focus-visible { outline: 2px solid var(--cc-teal); outline-offset: -2px; border-radius: 6px; }

/* Backdrop behind the open panel */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(3, 81, 89, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-backdrop[hidden] { display: none; }
.nav-backdrop.is-visible { opacity: 1; }

/* Panel footer — hidden on desktop, revealed inside the mobile panel */
.site-nav__footer { display: none; }

/* =============================================
   HERO SECTION
   ============================================= */
.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cc-green) 0%, #064d58 50%, #02363d 100%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(0,194,168,.15) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300c2a8' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 4rem 0;
}

/* Full-bleed hero: the page's Featured Image fills the whole section */
.hero--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Teal overlay keeps white text legible over any photo (heavier on the left) */
.hero--image::before {
  background:
    linear-gradient(90deg, rgba(2,54,61,.92) 0%, rgba(3,81,89,.72) 45%, rgba(2,54,61,.42) 100%);
}
.hero--image .hero-content h1 span { color: var(--cc-white); }

/* Intro paragraphs, relocated directly below the hero */
.hero-intro__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.hero-intro__inner p { color: var(--cc-text-light, var(--cc-text)); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.25rem; }
.hero-intro__inner p:last-child { margin-bottom: 0; }
.hero-intro__lead { color: var(--cc-text) !important; font-weight: 600; font-size: 1.15rem !important; }
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 4rem 0;
}
.hero-content .cc-overline { color: var(--cc-teal); font-size: .85rem; }
.hero-content h1 {
  color: var(--cc-white);
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin: 1rem 0;
  line-height: 1.1;
}
.hero-content h1 span { color: var(--cc-teal); }
.hero-content .hero-tagline {
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1.5rem;
}
.hero-content p {
  color: rgba(255,255,255,.8);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  max-width: 520px;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: visible;
  box-shadow: var(--shadow-lg);
}
.hero-image img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}
.hero-image-placeholder {
  background: linear-gradient(135deg, rgba(0,194,168,.3) 0%, rgba(3,81,89,.5) 100%);
  min-height: 520px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}
.hero-image-placeholder span {
  color: rgba(255,255,255,.5);
  font-size: .9rem;
  font-family: var(--font-heading);
}
.hero-badge {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background: var(--cc-white);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-md);
  text-align: center;
  min-width: 130px;
}
.hero-badge .badge-number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2rem;
  color: var(--cc-teal);
  line-height: 1;
}
.hero-badge .badge-text {
  font-size: .75rem;
  font-weight: 600;
  color: var(--cc-text);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.5);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
}
.hero-scroll svg { width: 20px; height: 20px; }
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* =============================================
   INTRO / QUOTE BAND
   ============================================= */
.intro-band {
  background: var(--cc-teal);
  padding: 3rem 0;
}
.intro-band blockquote {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  color: var(--cc-white);
  line-height: 1.5;
}
.intro-band cite {
  display: block;
  margin-top: 1rem;
  font-size: .85rem;
  font-weight: 400;
  color: rgba(255,255,255,.75);
  font-style: normal;
}

/* =============================================
   SERVICES CARDS
   ============================================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.service-card {
  background: var(--cc-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.service-card__image {
  aspect-ratio: 16/10;
  background: var(--cc-bg);
  overflow: hidden;
}
.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.service-card:hover .service-card__image img { transform: scale(1.05); }
.service-card__body {
  padding: 1.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.service-card__icon {
  width: 52px;
  height: 52px;
  background: rgba(0,194,168,.12);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.service-card__icon svg { width: 26px; height: 26px; color: var(--cc-teal); fill: none; stroke: currentColor; stroke-width: 2; }
.service-card h3 { font-size: 1.4rem; margin-bottom: .75rem; }
.service-card p { color: var(--cc-muted); flex: 1; margin-bottom: 1.5rem; }
.service-card .cc-btn { align-self: flex-start; }

/* =============================================
   ABOUT SECTION (2-col)
   ============================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.about-image { position: relative; }

/* Top-align the image where the text column is long enough that centring
   would push the image visibly down the page. Opt-in, so the About page
   keeps its centred treatment. */
.about-grid--top { align-items: start; }

/* Flip the column order without the direction:rtl trick. That hack reverses
   the bidi base direction for everything inside, which can misplace
   punctuation and breaks down the moment any RTL content appears. Grid
   ordering does the same job with no side effects, and collapses back to
   image-first on mobile where source order is what matters. */
.about-grid--reverse .about-image { order: 2; }
.about-grid--reverse .about-content { order: 1; }
@media (max-width: 900px) {
  .about-grid--reverse .about-image,
  .about-grid--reverse .about-content { order: initial; }
}

.cc-btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* Wrapped buttons at auto width leave ragged edges and an uneven gap once
   they stack. Below 520px give them the full column and an even rhythm. */
@media (max-width: 520px) {
  .cc-btn-row { flex-direction: column; gap: .75rem; align-items: stretch; }
  .cc-btn-row .cc-btn { width: 100%; text-align: center; }
}

/* Detail copy below an intro grid */
.cc-detail-block {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--cc-border);
}
.cc-detail-block > h3 {
  font-size: 1.4rem;
  line-height: 1.35;
  max-width: 34ch;
  margin-bottom: 1.75rem;
}
.cc-detail-block .cc-prose-cols {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Proven results band */
.cc-results-band { padding-top: 0; }
.cc-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.cc-result-card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.75rem 1.5rem;
  background: var(--cc-white);
  border: 1px solid var(--cc-border);
  border-radius: var(--radius-md);
  transition: box-shadow .3s, transform .3s;
}
.cc-result-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cc-result-card__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cc-teal);
  color: var(--cc-white);
  flex-shrink: 0;
}
.cc-result-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  font-weight: 600;
}

@media (max-width: 900px) { .cc-results-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cc-results-grid { grid-template-columns: 1fr; } }

/* Numbered process timeline */
.cc-steps {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  position: relative;
}
/* The <li> carries its own reset as well as the parent's: display:grid
   already suppresses the marker, but an explicit list-style keeps this
   correct if the display value is ever changed. */
.cc-step {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1.75rem;
  padding-bottom: 2.25rem;
}
.cc-step:last-child { padding-bottom: 0; }

/* Connector runs between the numbers, not past the final one. */
.cc-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 62px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--cc-teal), var(--cc-border));
}
.cc-step__num {
  width: 56px;
  height: 56px;
  justify-self: start;
  border-radius: 50%;
  background: var(--cc-teal);
  color: var(--cc-white);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.cc-step__body {
  background: var(--cc-bg);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
}
.cc-step__body h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
.cc-step__body p { color: var(--cc-muted); font-size: .95rem; margin: 0; line-height: 1.7; }
.cc-step__cite {
  margin-top: .85rem !important;
  font-size: .8rem !important;
  font-style: italic;
  padding-top: .75rem;
  border-top: 1px solid var(--cc-border);
}

@media (max-width: 640px) {
  .cc-step { grid-template-columns: 1fr; gap: .9rem; }
  .cc-step:not(:last-child)::before { display: none; }
  .cc-step__body { padding: 1.25rem 1.35rem; }
}
.about-grid--top .about-content > .cc-btn { margin-top: 1.5rem; }

/* Pull quote — was an inline style block, now reusable */
.cc-pullquote {
  border-left: 4px solid var(--cc-teal);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
}
.cc-lead-accent {
  font-style: italic;
  color: var(--cc-teal);
  font-weight: 600;
}

/* Two-column prose band, for explanatory copy that would otherwise
   stretch the intro column and unbalance the grid above it. */
.cc-prose-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 4rem;
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--cc-border);
}
.cc-prose-cols p { margin: 0; line-height: 1.75; color: var(--cc-muted); }

@media (max-width: 900px) {
  .cc-prose-cols { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; padding-top: 2rem; }
}

/* Four-domain summary list. Reuses the .domain-* colour classes, which
   only set --domain, so the bullets stay in step with the cards below. */
.cc-domain-list {
  /* Fallback lives on the parent, not the li. An inherited custom property
     always loses to one applied directly to the element, so the .domain-*
     class on each <li> wins without a specificity fight. Setting this on
     .cc-domain-list li (0,1,1) would outrank .domain-executing (0,1,0)
     and every bullet would come out teal. */
  --domain: var(--cc-teal);
  list-style: none;
  margin: 1.75rem 0 2.25rem;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.cc-domain-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .5rem;
  padding: .7rem 1rem .7rem 1.1rem;
  border-left: 3px solid var(--domain);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--domain) 6%, var(--cc-white));
}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .cc-domain-list li { background: var(--cc-white); }
}
.cc-domain-list strong {
  color: var(--domain);
  font-weight: 800;
  font-size: .95rem;
}
.cc-domain-list strong::after { content: ':'; }
.cc-domain-list span { font-size: .95rem; color: var(--cc-text); }
.about-image img {
  border-radius: var(--radius-lg);
  width: 100%;
  box-shadow: var(--shadow-md);
}
.about-image::after {
  content: '';
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 60%;
  height: 60%;
  background: var(--cc-teal);
  opacity: .12;
  border-radius: var(--radius-lg);
  z-index: -1;
}
.about-content .cc-overline { margin-bottom: 1rem; }
.about-content h2 { margin-bottom: 1.5rem; }
.about-content p { color: var(--cc-muted); margin-bottom: 1rem; }

/* =============================================
   FOUNDER SECTION
   ============================================= */
.founder-section {
  background: linear-gradient(135deg, var(--cc-green) 0%, #064d58 100%);
  padding: 5rem 0;
}
.founder-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4rem;
  align-items: center;
}
.founder-photo {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid var(--cc-teal);
  flex-shrink: 0;
  box-shadow: var(--shadow-lg);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-content h2 { color: var(--cc-white); margin-bottom: .5rem; }
.founder-content .founder-title {
  color: var(--cc-teal);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.founder-content p { color: rgba(255,255,255,.85); margin-bottom: 1.25rem; }
.founder-strengths {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}

/* Base pill — white bg, solid coloured border + text */
.founder-strength-tag {
  border-radius: 50px;
  padding: .3rem .9rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  border: 1.5px solid;
  display: inline-block;
  background: #ffffff;
}

/* ── Gallup official domain colours ─────────────
   Strategic Thinking  #007DC5  blue
   Executing           #7B2D8B  purple
   Influencing         #E87722  orange
   Relationship Build  #0099A0  teal
   ─────────────────────────────────────────────── */
.founder-strength-tag--thinking {
  color: #007DC5;
  border-color: #007DC5;
}
.founder-strength-tag--executing {
  color: #7B2D8B;
  border-color: #7B2D8B;
}
.founder-strength-tag--influencing {
  color: #E87722;
  border-color: #E87722;
}
.founder-strength-tag--relationship {
  color: #0099A0;
  border-color: #0099A0;
}

/* Cert logos */
.founder-certs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.founder-cert-badge {
  height: 90px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Header logo image (fallback when no Customizer logo is set) */
.site-logo-link { display: inline-block; line-height: 0; }
.site-logo-img { height: 52px; width: auto; display: block; }

/* Responsive video embed (About + Testimonials) */
.cc-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #000;
}
.cc-video iframe,
.cc-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cc-video--shorts {
  aspect-ratio: 9 / 16;
  max-width: 400px;
  margin-inline: auto;
}

/* Centred certification strip (Case Studies & Testimonials page) */
.certs-strip .founder-certs { justify-content: center; }

/* =============================================
   CTA BAND
   ============================================= */
.cta-band {
  background: linear-gradient(135deg, var(--cc-teal) 0%, #00a892 100%);
  padding: 4.5rem 0;
  text-align: center;
}
.cta-band h2 { color: var(--cc-white); margin-bottom: 1rem; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 600px; margin: 0 auto 2rem; font-size: 1.05rem; }

/* =============================================
   TESTIMONIALS
   ============================================= */
.testimonials-section { background: var(--cc-bg); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}
.testimonial-card {
  background: var(--cc-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  border-top: 4px solid var(--cc-teal);
}
.testimonial-card::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 5rem;
  color: var(--cc-teal);
  opacity: .2;
  position: absolute;
  top: .5rem;
  left: 1.25rem;
  line-height: 1;
}
.testimonial-text {
  color: var(--cc-text);
  font-size: .95rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 1rem; }
.testimonial-author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cc-bg);
}
.testimonial-author-info strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .9rem;
  color: var(--cc-dark);
}
.testimonial-author-info span {
  font-size: .8rem;
  color: var(--cc-muted);
}

/* =============================================
   CLIENTS / LOGOS
   ============================================= */
.clients-section { background: var(--cc-white); padding: 4rem 0; }
.clients-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
  margin-top: 2.5rem;
}
.clients-logos img {
  max-height: 60px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .55;
  transition: all .3s;
}
.clients-logos img:hover { filter: grayscale(0); opacity: 1; }

/* =============================================
   NEWSLETTER
   ============================================= */
.newsletter-section {
  background: var(--cc-green);
  padding: 4rem 0;
}
.newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.newsletter-content h2 { color: var(--cc-white); margin-bottom: 1rem; }
.newsletter-content p { color: rgba(255,255,255,.8); }
.newsletter-form { display: flex; flex-direction: column; gap: .75rem; }
.newsletter-form input[type="email"] {
  padding: .9rem 1.25rem;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1);
  color: var(--cc-white);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  transition: border-color .2s;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,.5); }
.newsletter-form input[type="email"]:focus { border-color: var(--cc-teal); }
.newsletter-form button {
  align-self: flex-start;
  padding: .85rem 2rem;
}

/* =============================================
   FOOTER
   ============================================= */
/* =============================================
   FOOTER
   ============================================= */
#site-footer {
  background-color: var(--cc-dark);
  color: rgba(255,255,255,.75);
}

.footer-body {
  padding: 5rem 0 4rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 3rem;
  align-items: start;
}

/* Brand column */
.footer-brand-col {
  position: relative;
}

.footer-logo {
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

/* Bundled asset logo in footer */
.footer-logo-link { display: inline-block; }
.footer-logo-img {
  width: 200px;
  height: auto;
  display: block;
}

.footer-brand-col .footer-tagline,
.footer-brand-col .footer-desc,
.footer-brand-col .footer-social {
  position: relative;
  z-index: 1;
}

.footer-brand-col .logo-text {
  color: var(--cc-white);
  font-size: 1.3rem;
}
.footer-brand-col .logo-tagline {
  color: var(--cc-teal);
  font-size: .8rem;
}

.footer-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cc-teal);
  margin-bottom: .75rem;
}

.footer-desc {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: 320px;
}

.footer-social {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.5);
  transition: all .2s;
}
.footer-social a:hover {
  border-color: var(--cc-teal);
  color: var(--cc-teal);
  background: rgba(0,194,168,.1);
}
.footer-social svg {
  width: 16px;
  height: 16px;
  /* These are outline glyphs — the markup sets fill="none"
     stroke="currentColor", but a CSS declaration beats a presentation
     attribute, so `fill: currentColor` here was flooding them. LinkedIn and
     Facebook are single closed paths so they survived it; Instagram (rounded
     rect + circle + dot) and YouTube (body + play triangle) collapsed into
     solid blobs. Let the markup's own fill/stroke stand. */
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Light-surface variant. The rules above are built for the dark footer —
   translucent white on a translucent white border — so on the contact page
   the icons rendered white-on-white and were effectively invisible. */
.cc-social--light a {
  border-color: var(--cc-border);
  color: var(--cc-green);
  background: var(--cc-bg);
}
.cc-social--light a:hover {
  border-color: var(--cc-teal);
  background: var(--cc-teal);
  color: var(--cc-white);
}

/* Nav columns */
.footer-nav-col {}

.footer-col-heading {
  color: var(--cc-white);
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-nav-col ul {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  list-style: none;
}

.footer-nav-col ul li a {
  color: rgba(255,255,255,.55);
  font-size: .875rem;
  text-decoration: none;
  transition: color .2s, padding-left .2s;
  display: block;
}

.footer-nav-col ul li a:hover {
  color: var(--cc-teal);
  padding-left: 4px;
}

/* CTA button in footer */
.footer-cta-btn {
  /* inline-flex + nowrap so the label and arrow cannot break across two
     lines in a narrow footer column, which is what was happening. */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  margin-top: 1.75rem;
  background: var(--cc-teal);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .6rem 1.25rem;
  border-radius: 50px;
  transition: background .2s, transform .2s;
}
/* Arrow as a pseudo-element rather than part of the translatable string —
   translators should not have to carry a glyph, and this lets it move. */
.footer-cta-btn::after {
  content: '\2192';
  font-size: 1em;
  line-height: 1;
  transition: transform .2s ease;
}
.footer-cta-btn:hover {
  background: #00a593;
  transform: translateY(-2px);
}
.footer-cta-btn:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .footer-cta-btn,
  .footer-cta-btn::after { transition: none; }
  .footer-cta-btn:hover { transform: none; }
  .footer-cta-btn:hover::after { transform: none; }
}

/* Bottom bar */
.footer-bottom-bar {
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.25rem 0;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copyright {
  font-size: .8rem;
  color: rgba(255,255,255,.35);
}
.footer-copyright strong { color: rgba(255,255,255,.5); }
.footer-copyright a {
  color: var(--cc-teal);
  text-decoration: none;
  opacity: .8;
}
.footer-copyright a:hover { opacity: 1; }

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  color: rgba(255,255,255,.3);
}
.footer-legal-links a {
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color .2s;
}
.footer-legal-links a:hover { color: var(--cc-teal); }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-body { padding: 3rem 0 2.5rem; }
  .footer-logo-img { width: 160px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* =============================================
   PAGE HERO (Interior pages)
   ============================================= */
.page-hero {
  background: linear-gradient(135deg, var(--cc-green) 0%, #064d58 100%);
  padding: 5rem 0 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,194,168,.2) 0%, transparent 70%);
}
.page-hero h1 { color: var(--cc-white); position: relative; z-index: 1; }
.page-hero .breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  position: relative;
  z-index: 1;
}
.page-hero .breadcrumbs a { color: var(--cc-teal); }
.page-hero .breadcrumbs span { color: rgba(255,255,255,.4); }

/* Featured-image page hero (set a page's Featured Image to activate) */
.page-hero--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 7rem 0 6rem;
}
.page-hero--image::before {
  background:
    linear-gradient(135deg, rgba(6,77,88,.88) 0%, rgba(4,58,66,.82) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(0,194,168,.25) 0%, transparent 70%);
}

/* =============================================
   CONTENT / ENTRY
   ============================================= */
.entry-content {
  max-width: 820px;
  margin: 0 auto;
}
.entry-content h2,
.entry-content h3 { margin: 2rem 0 1rem; }
.entry-content p { margin-bottom: 1.25rem; color: var(--cc-text); }
.entry-content ul, .entry-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: .5rem; }

/* =============================================
   BLOG / CARDS
   ============================================= */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.post-card {
  background: var(--cc-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .3s;
  display: flex;
  flex-direction: column;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--cc-bg);
}
.post-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.post-card:hover .post-card__thumb img { transform: scale(1.05); }
.post-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.post-card__meta { font-size: .8rem; color: var(--cc-muted); margin-bottom: .75rem; }
.post-card h3 { font-size: 1.2rem; margin-bottom: .75rem; }
.post-card h3 a { color: var(--cc-dark); }
.post-card h3 a:hover { color: var(--cc-teal); }
.post-card p { color: var(--cc-muted); font-size: .9rem; flex: 1; }
.post-card__footer { margin-top: 1.25rem; }

/* =============================================
   PRICING
   ============================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.pricing-card {
  background: var(--cc-white);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--cc-border);
  transition: all .3s;
  position: relative;
}
.pricing-card:hover { box-shadow: var(--shadow-md); border-color: var(--cc-teal); }
.pricing-card.featured {
  background: var(--cc-green);
  border-color: var(--cc-green);
  color: var(--cc-white);
}
.pricing-card.featured h3 { color: var(--cc-white); }
.pricing-card.featured p { color: rgba(255,255,255,.8); }
.pricing-card .featured-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cc-teal);
  color: var(--cc-white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .9rem;
  border-radius: 50px;
}
.pricing-price {
  margin: 1rem 0;
}
.pricing-price .amount {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.5rem;
  color: var(--cc-teal);
  line-height: 1;
}
.pricing-price .period { font-size: .85rem; color: var(--cc-muted); }
.pricing-features {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .9rem;
}
.pricing-features li::before {
  content: '✓';
  color: var(--cc-teal);
  font-weight: 900;
  flex-shrink: 0;
  margin-top: .05rem;
}

/* =============================================
   GALLUP / STRENGTHS DOMAINS
   ============================================= */
/* ---- The DNA mark ----
   The client's own branded icon, kept as the anchor for this section. */
.cc-dna-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  margin: 2.5rem 0 .5rem;
}
.cc-dna-mark img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.cc-dna-mark span {
  font-family: var(--font-heading);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cc-muted);
}

/* ---- The four domains ----
   Each card carries its Gallup domain colour through one custom property,
   so the head rule, the chips and the top bar all stay in step and a colour
   change is a single-line edit. */
.domains-grid {
  --domain: var(--cc-teal);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: stretch;
}
.domain-card {
  display: flex;
  flex-direction: column;
  padding: 0 0 1.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--cc-border);
  background: var(--cc-white);
  overflow: hidden;
  text-align: left;
  transition: box-shadow .3s, transform .3s;
}
.domain-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.domain-card__head {
  position: relative;
  padding: 1.5rem 1.4rem 1.1rem;
  background: color-mix(in srgb, var(--domain) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--domain) 18%, transparent);
}
.domain-card__head::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--domain);
}
.domain-card__count {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--domain) 78%, black);
  margin-bottom: .35rem;
}
.domain-card__head h3 {
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0;
  color: color-mix(in srgb, var(--domain) 82%, black);
}

.domain-card__blurb {
  font-size: .86rem;
  line-height: 1.55;
  color: var(--cc-muted);
  padding: 1.1rem 1.4rem .25rem;
  margin: 0;
}

.domain-card__themes {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 1rem 1.4rem 0;
}
.domain-card__themes li {
  font-size: .74rem;
  font-weight: 600;
  line-height: 1;
  padding: .34rem .55rem;
  border-radius: 4px;
  color: color-mix(in srgb, var(--domain) 80%, black);
  background: color-mix(in srgb, var(--domain) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--domain) 22%, transparent);
}

/* Gallup domain palette. Verify against current Gallup brand guidance
   before any printed collateral reuses these values. */
.domain-executing   { --domain: #7b2d8e; } /* purple */
.domain-influencing { --domain: #e87722; } /* orange */
.domain-relationship{ --domain: #0086c3; } /* blue   */
.domain-thinking    { --domain: #00945e; } /* green  */

/* color-mix() is unsupported below Safari 16.2 / Firefox 113. These
   fallbacks keep the cards legible rather than transparent. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .domain-card__head { background: var(--cc-bg); }
  .domain-card__themes li { background: var(--cc-bg); border-color: var(--cc-border); color: var(--cc-text); }
  .domain-executing   .domain-card__count, .domain-executing   .domain-card__head h3 { color: #7b2d8e; }
  .domain-influencing .domain-card__count, .domain-influencing .domain-card__head h3 { color: #b85c15; }
  .domain-relationship.domain-card .domain-card__count, .domain-relationship .domain-card__head h3 { color: #0086c3; }
  .domain-thinking    .domain-card__count, .domain-thinking    .domain-card__head h3 { color: #00945e; }
}

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

/* =============================================
   FAQ ACCORDION
   ============================================= */
.faq-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 5rem; align-items: start; }
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}
.faq-item {
  border: 1px solid var(--cc-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cc-dark);
  text-align: left;
  transition: background .2s;
}
.faq-question:hover { background: var(--cc-bg); }
.faq-question.active { color: var(--cc-teal); }
.faq-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cc-teal);
  color: var(--cc-white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform .3s;
}
.faq-question.active .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.faq-answer-inner { padding: 0 1.5rem 1.25rem; color: var(--cc-muted); line-height: 1.8; }

/* =============================================
   STATS ROW
   ============================================= */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
  padding: 3.5rem 0;
}
.stat-item .stat-number {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 3rem;
  color: var(--cc-teal);
  line-height: 1;
}
.stat-item .stat-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--cc-muted);
  margin-top: .5rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  margin-top: 3rem;
}
.contact-info h3 { margin-bottom: 1.5rem; }
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.contact-detail-icon {
  width: 44px;
  height: 44px;
  background: rgba(0,194,168,.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-detail-icon svg { width: 20px; height: 20px; stroke: var(--cc-teal); fill: none; stroke-width: 2; }
.contact-form-wrap { background: var(--cc-bg); border-radius: var(--radius-lg); padding: 2.5rem; }
.cc-form { display: flex; flex-direction: column; gap: 1.25rem; }
.cc-form label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  color: var(--cc-dark);
  margin-bottom: .35rem;
  display: block;
}
.cc-form input,
.cc-form textarea,
.cc-form select {
  width: 100%;
  padding: .85rem 1rem;
  border: 2px solid var(--cc-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--cc-text);
  background: var(--cc-white);
  outline: none;
  transition: border-color .2s;
}
.cc-form input:focus,
.cc-form textarea:focus,
.cc-form select:focus { border-color: var(--cc-teal); }
.cc-form textarea { min-height: 140px; resize: vertical; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
  .hero-content p { max-width: 100%; }
  .hero-actions { justify-content: center; }
  .hero-image { max-width: 500px; margin: 0 auto; }
  .hero-image img, .hero-image-placeholder { min-height: 340px; }
  .hero-badge { left: 50%; transform: translateX(-50%); bottom: -1rem; }
  .about-grid { grid-template-columns: 1fr; }
  .about-image { max-width: 500px; margin: 0 auto; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .domains-grid { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .founder-inner { grid-template-columns: 1fr; text-align: center; }
  .founder-photo { margin: 0 auto; }
  .founder-strengths { justify-content: center; }
}

@media (max-width: 768px) {
  :root { --container-pad: 1.25rem; }
  .cc-section { padding: 3.5rem 0; }

  .nav-cta { display: none; }

  .services-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .newsletter-inner { grid-template-columns: 1fr; gap: 2rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .domains-grid { grid-template-columns: 1fr 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }

  .hero { min-height: auto; }
  .hero-inner { padding: 3rem 0; }
  .hero-content { max-width: 100%; padding: 3rem 0; }
}

@media (max-width: 480px) {
  .domains-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .cc-btn { text-align: center; }
}

/* =============================================
   ACCESSIBILITY & FOCUS
   ============================================= */
:focus-visible {
  outline: 3px solid var(--cc-teal);
  outline-offset: 3px;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* =============================================
   SKIP LINK
   ============================================= */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--cc-teal);
  color: var(--cc-white);
  padding: .5rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 9999;
  font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* =============================================
   WP ALIGNMENT HELPERS
   ============================================= */
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1rem; text-align: center; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .85rem; color: var(--cc-muted); margin-top: .5rem; text-align: center; }

/* =============================================
   LEGAL PAGES (Terms & Conditions / Privacy Policy)
   ============================================= */
.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
}

.legal-intro {
  background: var(--cc-bg);
  border-left: 4px solid var(--cc-teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.75rem 2rem;
  margin-bottom: 3rem;
}

.legal-updated {
  font-size: .8rem;
  color: var(--cc-muted);
  font-family: var(--font-heading);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}

.legal-section {
  border-bottom: 1px solid var(--cc-border);
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
}

.legal-section:last-child {
  border-bottom: none;
}

.legal-heading {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--cc-dark);
  margin-bottom: 1.25rem;
}

.legal-num {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--cc-teal);
  background: rgba(0,194,168,.1);
  padding: .2rem .6rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.legal-section h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--cc-dark);
  margin: 1.5rem 0 .6rem;
}

.legal-section h3:first-of-type {
  margin-top: 0;
}

.legal-section p {
  color: var(--cc-text);
  line-height: 1.75;
  margin-bottom: .85rem;
}

.legal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1rem;
}

.legal-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: var(--cc-text);
  line-height: 1.65;
  font-size: .95rem;
}

.legal-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-teal);
  flex-shrink: 0;
  margin-top: .55rem;
}

.legal-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--cc-teal);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.legal-link:hover { border-bottom-color: var(--cc-teal); }

.legal-section--contact {
  background: var(--cc-bg);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  border: none;
  margin-top: 1rem;
}

.legal-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.25rem 0 1.5rem;
}

.legal-contact-grid div {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.legal-contact-grid strong {
  font-family: var(--font-heading);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cc-muted);
}

.legal-contact-grid a,
.legal-contact-grid span {
  color: var(--cc-text);
  font-size: .95rem;
}

.legal-contact-grid a { color: var(--cc-teal); }

.legal-acknowledgement {
  background: var(--cc-dark);
  color: rgba(255,255,255,.85) !important;
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  font-size: .9rem !important;
  font-style: italic;
  margin-bottom: 0 !important;
}

@media (max-width: 640px) {
  .legal-contact-grid { grid-template-columns: 1fr; }
  .legal-section--contact { padding: 1.5rem; }
  .legal-heading { font-size: 1.15rem; }
}

/* Footer legal links row */
.footer-legal-links {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-legal-links a {
  color: var(--cc-muted);
  font-size: .8rem;
  text-decoration: none;
  transition: color .2s;
}
.footer-legal-links a:hover { color: var(--cc-teal); }

/* =============================================
   SINGLE BLOG POST — full width, no sidebar
   ============================================= */
.single-post-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.single-post-thumb {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.single-post-meta {
  display: none;
}

.single-post-author {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--cc-dark);
}

.single-post-sep { opacity: .4; }

.entry-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--cc-text);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-heading);
  color: var(--cc-dark);
  margin: 2rem 0 .75rem;
}

.entry-content h2 { font-size: 1.6rem; }
.entry-content h3 { font-size: 1.25rem; }

.entry-content p { margin-bottom: 1.25rem; }

.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.entry-content a:not(.cc-btn) {
  color: var(--cc-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content blockquote {
  border-left: 4px solid var(--cc-teal);
  margin: 2rem 0;
  padding: 1.25rem 1.75rem;
  background: var(--cc-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--cc-dark);
  font-size: 1.05rem;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 1rem 0;
}

.entry-content figure { margin: 1.5rem 0; }
.entry-content figcaption {
  font-size: .82rem;
  color: var(--cc-muted);
  text-align: center;
  margin-top: .5rem;
}

.single-post-nav {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cc-border);
}

/* the_post_navigation() renders:
     nav.post-navigation > h2.screen-reader-text + div.nav-links > .nav-previous + .nav-next
   The grid used to sit on the <nav>, which made the hidden heading a grid
   item — it silently occupied the first column and pushed both links into
   the second, where they stacked. The grid belongs on .nav-links. */
.single-post-nav .post-navigation { display: block; }

.single-post-nav .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

/* Keep Next in the right column even when there is no Previous. */
.single-post-nav .nav-next:only-child { grid-column: 2; }

.single-post-nav .nav-previous,
.single-post-nav .nav-next { display: flex; }

.single-post-nav .nav-links a {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  width: 100%;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--cc-border);
  border-radius: var(--radius-md);
  background: var(--cc-white);
  color: var(--cc-dark);
  text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.single-post-nav .nav-links a:hover {
  border-color: var(--cc-teal);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
  color: var(--cc-dark);
}
.single-post-nav .nav-links a strong {
  font-size: .98rem;
  line-height: 1.35;
  font-weight: 700;
}
.single-post-nav .nav-links a:hover strong { color: var(--cc-teal); }

.single-post-nav .nav-next a { text-align: right; align-items: flex-end; }

.single-post-nav .nav-label {
  font-size: .72rem;
  color: var(--cc-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
/* Arrows via CSS so they sit with the label and mirror correctly. */
.single-post-nav .nav-previous .nav-label::before { content: '\2190\00a0'; }
.single-post-nav .nav-next .nav-label::after { content: '\00a0\2192'; }

@media (max-width: 640px) {
  .single-post-nav .nav-links { grid-template-columns: 1fr; }
  .single-post-nav .nav-next:only-child { grid-column: 1; }
  .single-post-nav .nav-next a { text-align: left; align-items: flex-start; }
  .single-post-nav .nav-next .nav-label::after { content: none; }
  .single-post-nav .nav-next .nav-label::before { content: '\2192\00a0'; }
}

/* =============================================
   CASE STUDY CARDS
   ============================================= */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

.cs-card {
  background: var(--cc-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cc-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s, transform .25s;
}

.cs-card:hover {
  box-shadow: 0 8px 32px rgba(3,81,89,.1);
  transform: translateY(-3px);
}

.cs-card__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cc-bg);
}

.cs-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.cs-card:hover .cs-card__image img {
  transform: scale(1.04);
}

.cs-card__body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
}

.cs-card__tag {
  display: inline-block;
  background: rgba(0,194,168,.12);
  color: var(--cc-teal);
  border-radius: 50px;
  padding: .25rem .85rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  width: fit-content;
}

.cs-card__name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--cc-dark);
  margin: 0;
}

.cs-card__name a {
  color: inherit;
  text-decoration: none;
}

.cs-card__name a:hover { color: var(--cc-teal); }

.cs-card__role {
  font-size: .875rem;
  color: var(--cc-muted);
  margin: 0;
}

.cs-card__result {
  font-size: .82rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--cc-dark);
  background: var(--cc-bg);
  border-left: 3px solid var(--cc-teal);
  padding: .4rem .75rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0;
}

.cs-card__excerpt {
  font-size: .9rem;
  color: var(--cc-text);
  line-height: 1.65;
  flex: 1;
}

.cs-card__excerpt p { margin: 0; }

.cs-card__btn {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  font-size: .78rem;
  padding: .8rem 1.25rem;
}

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

/* =============================================
   CASE STUDY — SINGLE PAGE LAYOUT
   ============================================= */
.cs-single-wrap {
  max-width: 820px;
  margin: 0 auto;
}

.cs-single-header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--cc-border);
}

.cs-single-header__left {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  flex: 1;
}

.cs-single-avatar {
  flex-shrink: 0;
}

.cs-single-avatar__img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--cc-teal);
  display: block;
}

.cs-single-header__info {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.cs-single-company {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--cc-teal);
  margin: 0;
}

.cs-single-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--cc-dark);
  margin: 0;
}

.cs-single-role,
.cs-single-result {
  font-family: var(--font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cc-muted);
  margin: 0;
}

.cs-single-content {
  font-size: 1.0625rem;
  line-height: 1.8;
}

/* Media block */
.cs-single-media {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--cc-border);
}

.cs-single-media__heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--cc-dark);
  margin-bottom: 1.25rem;
}

.cs-single-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 landscape */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--cc-dark);
}

/* YouTube Shorts — 9:16 portrait, centred and capped width */
.cs-single-embed--shorts {
  padding-bottom: 0;
  height: auto;
  max-width: 380px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
}

.cs-single-embed--shorts iframe {
  position: static;
  width: 100%;
  height: 100%;
  display: block;
}

.cs-single-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Back link */
.cs-single-back {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cc-border);
}

.cs-single-back__link {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  color: var(--cc-teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap .2s;
}

.cs-single-back__link:hover { gap: .6rem; }

@media (max-width: 600px) {
  .cs-single-header__left { flex-direction: column; gap: 1rem; }
  .cs-single-avatar__img  { width: 80px; height: 80px; }
}

/* =============================================
   HONEYPOT
   Positioned off-canvas rather than display:none — a number of bots skip
   fields that are display:none or hidden, which would defeat the trap.
   Hidden from assistive tech via aria-hidden on the wrapper in PHP.
   ============================================= */
.cc-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Placeholder shown when a service-card image has not been set in the
   Customizer, or its file is missing. Prevents src="" which browsers
   resolve against the current page URL and re-request. */
.service-card__image-placeholder {
  aspect-ratio: 8 / 5;
  width: 100%;
  background: linear-gradient(135deg, var(--cc-bg), var(--cc-border));
  border-radius: inherit;
}

/* =============================================
   GALLERY (front end)
   Styles moved out of page-gallery.php — the template previously carried
   inline style attributes plus inline onmouseover/onmouseout handlers, which
   made the markup hard to read and blocked tightening the CSP.
   ============================================= */
.cc-overline--center { text-align: center; display: block; }

.cc-gallery-grid {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.cc-gallery-grid__item {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--cc-bg);
}
.cc-gallery-grid__figure {
  margin: 0;
  width: 100%;
  height: 100%;
}
.cc-gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.cc-gallery-grid__item:hover img,
.cc-gallery-grid__item:focus-within img { transform: scale(1.05); }

.cc-gallery-grid__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem .75rem .6rem;
  font-size: .8rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}

.cc-gallery-videos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.cc-gallery-videos__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--cc-dark);
}
.cc-gallery-videos__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .cc-gallery-videos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cc-gallery-videos { grid-template-columns: 1fr; }
  .cc-gallery-grid   { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-gallery-grid__figure {
  margin: 0;
  width: 100%;
  height: 100%;
}
.cc-gallery-grid__item img { transition: none; }
  .cc-gallery-grid__item:hover img { transform: none; }
}

/* Fallback avatar when a featured testimonial has no photo set. */
.testimonial-author__placeholder {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--cc-bg);
  flex-shrink: 0;
}

/* =============================================
   MOBILE NAVIGATION — slide-in panel
   ---------------------------------------------
   Replaces the old absolutely-positioned dropdown, which hung off a hardcoded
   top:80px, had no animation, no scroll lock and no focus management, and hid
   the primary CTA entirely.
   ============================================= */
@media (max-width: 900px) {

  .nav-toggle { display: flex; }
  .nav-cta     { display: none; }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 88vw);
    z-index: 1001;

    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;

    background: var(--cc-white);
    box-shadow: -8px 0 40px rgba(3, 81, 89, .18);

    /* Off-canvas until opened. translate rather than display so it animates,
       and visibility keeps it out of the tab order while closed. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility .34s;

    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* Clear the header, and respect notched devices. */
    padding: calc(80px + env(safe-area-inset-top)) 0 calc(1.5rem + env(safe-area-inset-bottom));
  }

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

  /* ---------- lists ---------- */
  .site-nav > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .site-nav > ul > li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--cc-border);
  }

  .site-nav > ul > li > a {
    flex: 1;
    display: flex;
    align-items: center;
    /* 52px tall — comfortably above the 44px minimum. */
    min-height: 52px;
    padding: .85rem 1.5rem;
    border-radius: 0;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--cc-green);
    background: none;
  }
  .site-nav > ul > li > a:active { background: rgba(0, 194, 168, .08); }

  .site-nav .current-menu-item > a,
  .site-nav .current-menu-ancestor > a {
    color: var(--cc-teal);
    box-shadow: inset 3px 0 0 var(--cc-teal);
  }

  .site-nav .nav-sub-toggle { display: flex; }

  /* ---------- submenus: height-animated accordion ---------- */
  .site-nav .sub-menu {
    position: static;
    order: 3;
    width: 100%;
    opacity: 1;
    /* Desktop hides the panel with visibility, so it must be reset here
       or the whole mobile accordion inherits visibility:hidden. */
    visibility: visible;
    pointer-events: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    border-top: 1px solid var(--cc-border);
    margin: 0;
    padding: 0;
    background: var(--cc-bg);

    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s cubic-bezier(.4, 0, .2, 1);
  }
  .site-nav .sub-menu::before { content: none; }
  .site-nav .sub-menu.is-open { max-height: 32rem; }

  .site-nav .sub-menu li { width: 100%; }
  .site-nav .sub-menu li a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: .7rem 1.5rem .7rem 2.5rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--cc-text);
    background: none;
    position: relative;
  }
  .site-nav .sub-menu li a::before {
    content: '';
    position: absolute;
    left: 1.6rem;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--cc-teal);
    opacity: .5;
  }
  .site-nav .sub-menu li a:active { background: rgba(0, 194, 168, .1); }

  /* ---------- panel footer ---------- */
  .site-nav__footer {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: auto;
    padding: 1.5rem;
  }
  .site-nav__cta {
    width: 100%;
    justify-content: center;
    min-height: 50px;
  }
  .site-nav__contact {
    display: block;
    text-align: center;
    font-size: .9rem;
    color: var(--cc-muted);
    padding: .35rem;
  }
  .site-nav__contact:hover { color: var(--cc-teal); }

  /* Scroll lock is applied from JS using the position:fixed technique, not
     overflow:hidden — overflow:hidden on html or body silently disables
     position:sticky on every descendant, which pushed the site header (and
     with it the hamburger) off-screen the moment the menu opened. */
  body.nav-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }
}

/* Below 380px the panel may as well be full width. */
@media (max-width: 420px) {
  .site-nav { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav .sub-menu,
  .nav-backdrop,
  .nav-toggle__bars span,
  .nav-sub-toggle svg { transition: none; }
}

/* =============================================
   LAYOUT UTILITIES + OVERFLOW SAFEGUARDS
   ---------------------------------------------
   Two causes of the horizontal scrolling on mobile:

   1. Fixed two-column grids written as inline style attributes. Inline styles
      outrank any stylesheet rule, so no media query could ever collapse them —
      the page stayed two columns at 375px and overflowed. Those are now
      classes, which media queries CAN reach.

   2. Grid and flex children default to min-width:auto, meaning they refuse to
      shrink below their content's minimum width. One long unbreakable string —
      hello@cultivatecapabilities.com.au, 34 characters — sets a floor the
      column cannot go under, and the whole grid pushes past the viewport.
      That is what broke Contact even though its grid did collapse correctly.
   ============================================= */

/* ---------- responsive grid utilities ---------- */
.cc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.cc-grid-sidebar {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 4rem;
  align-items: start;
}

.cc-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 2rem;
}
.cc-grid-auto--sm { --cc-grid-min: 220px; }
.cc-grid-auto--md { --cc-grid-min: 240px; }
.cc-grid-auto--sm,
.cc-grid-auto--md {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--cc-grid-min, 280px), 100%), 1fr));
}

@media (max-width: 900px) {
  .cc-grid-sidebar { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 768px) {
  .cc-grid-2 { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- the min-width:auto floor ----------
   Grid and flex children are allowed to shrink. Without this a single long
   word or email address holds the whole layout open. */
.cc-grid-2 > *,
.cc-grid-sidebar > *,
.cc-grid-auto > *,
.contact-grid > *,
.faq-layout > *,
.services-grid > *,
.testimonials-grid > *,
.footer-grid > *,
.newsletter-inner > *,
.pricing-grid > *,
.cs-single-header > * { min-width: 0; }

/* ---------- long strings ---------- */
.contact-detail a,
.site-nav__contact,
.footer-contact a,
.legal-contact-grid a,
.cc-form input,
.cc-form textarea { overflow-wrap: anywhere; }

/* ---------- media never exceeds its box ---------- */
img, svg, video, iframe, canvas, table { max-width: 100%; }
img, video { height: auto; }

/* Tables scroll inside themselves rather than pushing the page wide. */
.entry-content table,
.cs-single-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- last line of defence ----------
   Nothing should overflow after the above, but a stray embed or a pasted
   block shouldn't be able to break the whole page on a phone. Applied to
   <body> only — putting it on <html> would break position:sticky on the
   header in several browsers. */
body { overflow-x: clip; }
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

/* =============================================
   MOBILE PANEL HEADER + STICKY SIDEBAR
   ============================================= */

/* The panel's own close button. Hidden on desktop, where there is no panel. */
.site-nav__head { display: none; }

@media (max-width: 900px) {
  .site-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 1rem 1.5rem;
    border-bottom: 1px solid var(--cc-border);
    background: var(--cc-white);

    /* Stays put while the menu list scrolls. */
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .site-nav__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cc-muted);
  }

  .site-nav__close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    background: var(--cc-white);
    color: var(--cc-green);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
  }
  .site-nav__close svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round;
  }
  .site-nav__close:hover { background: var(--cc-bg); border-color: var(--cc-teal); }
  .site-nav__close:focus-visible { outline: 2px solid var(--cc-teal); outline-offset: 2px; }

  /* The panel now supplies its own header, so it no longer needs to clear
     the site header. */
  .site-nav { padding-top: env(safe-area-inset-top); }
}

/* Sticky side panels: useful on desktop, harmful on mobile — once the layout
   stacks, a sticky card rides over the content beneath it as you scroll.
   That is what put Ali's card on top of the consultation form. */
.cc-sticky-panel { position: sticky; top: 100px; }

@media (max-width: 900px) {
  .cc-sticky-panel { position: static; top: auto; }
}


/* =============================================
   PRICING PAGE (data-driven)
   ============================================= */

.cc-pricing-intro { padding-bottom: 1rem; }
.cc-pricing-intro__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.cc-pricing-intro p { color: var(--cc-muted); font-size: 1.02rem; line-height: 1.65; }

.cc-pricing-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.75rem;
}
.cc-pricing-jump a {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--cc-green);
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: 50px;
  padding: .45rem 1rem;
  transition: background .2s, color .2s, border-color .2s;
}
.cc-pricing-jump a:hover {
  background: var(--cc-teal);
  border-color: var(--cc-teal);
  color: var(--cc-white);
}

/* ---- Grids: each section shapes itself to how many cards it holds ---- */
.cc-pricing-grid {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  align-items: start;
}
.cc-pricing-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.cc-pricing-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* ---- Tier label: replaces the medal emoji ----
   A small uppercase chip above the product name. Reads as a product
   classification rather than a decoration, which is the point — these
   are four-figure engagements sold to corporate L&D buyers. */
.cc-tier-label {
  display: inline-block;
  /* .pricing-card is a column flex container, so children stretch to full
     width by default and the chip loses its shape. Opt this one out. */
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-green);
  background: var(--cc-bg);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  padding: .28rem .65rem;
  margin-bottom: .85rem;
}
.pricing-card.featured .cc-tier-label {
  color: var(--cc-teal);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
}

/* ---- Price presentation ---- */
.cc-price-prefix {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cc-muted);
  margin-bottom: .1rem;
}
.pricing-card.featured .cc-price-prefix { color: rgba(255, 255, 255, .7); }

.pricing-card.featured .pricing-price .amount { color: var(--cc-teal); }
.pricing-card.featured .pricing-price .period { color: rgba(255, 255, 255, .65); }

.pricing-price .amount {
  /* stops the figures shifting width as the tiered total updates */
  font-variant-numeric: tabular-nums;
}
.pricing-price .period {
  display: block;
  margin-top: .25rem;
}

.cc-price-note {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--cc-muted);
  margin: -.35rem 0 .9rem;
}
.pricing-card.featured .cc-price-note { color: rgba(255, 255, 255, .75); }

/* ---- Card media ---- */
.cc-pricing-card__media {
  display: block;
  margin: -.5rem 0 1.25rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cc-bg);
  aspect-ratio: 16 / 10;
}
.cc-pricing-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.pricing-card:hover .cc-pricing-card__media img { transform: scale(1.04); }
.pricing-card.featured .cc-pricing-card__media { background: rgba(255,255,255,.08); }

.cc-pricing-banner__media {
  float: right;
  width: 190px;
  margin: 0 0 1rem 1.75rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cc-pricing-banner__media img { width: 100%; height: auto; display: block; }

@media (max-width: 640px) {
  .cc-pricing-banner__media { float: none; width: 100%; margin: 0 0 1.25rem; }
}

.cc-pricing-card__blurb {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--cc-muted);
  margin-bottom: .25rem;
}

.pricing-card.featured .pricing-features li { color: rgba(255, 255, 255, .92); }
.cc-features-more a { font-size: .85rem; font-weight: 600; }
.cc-features-more::before { content: '' !important; }

/* ---- Card footer ---- */
.cc-pricing-card__cta { margin-top: auto; }
.cc-pricing-card__cta .cc-btn { width: 100%; text-align: center; justify-content: center; }

.cc-secure-note {
  font-size: .74rem;
  color: var(--cc-muted);
  text-align: center;
  margin-top: .5rem;
}
.pricing-card.featured .cc-secure-note { color: rgba(255, 255, 255, .65); }

.cc-pricing-card__detail {
  display: block;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  margin-top: .75rem;
  color: var(--cc-muted);
}
.cc-pricing-card__detail:hover { color: var(--cc-teal); }
.pricing-card.featured .cc-pricing-card__detail { color: rgba(255, 255, 255, .7); }
.pricing-card.featured .cc-pricing-card__detail:hover { color: var(--cc-teal); }

.pricing-card {
  display: flex;
  flex-direction: column;
}

/* ---- Banner layout: a single quoted engagement ---- */
.cc-pricing-banner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background: var(--cc-white);
  border: 2px solid var(--cc-border);
  border-radius: var(--radius-lg);
  padding: 2.75rem;
  margin-top: 3rem;
  box-shadow: var(--shadow-sm);
}
.cc-pricing-banner h3 {
  font-size: 1.6rem;
  margin-bottom: .75rem;
}
.cc-pricing-banner__body p {
  color: var(--cc-muted);
  line-height: 1.65;
}
.cc-pricing-banner__aside {
  border-left: 2px solid var(--cc-border);
  padding-left: 2.5rem;
}
.cc-pricing-banner__aside .cc-btn { width: 100%; text-align: center; justify-content: center; }

/* ---- Footnote ---- */
.cc-pricing-footnote {
  max-width: 780px;
  margin: 2.25rem auto 0;
  text-align: center;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--cc-muted);
}

/* ---- Closing CTA ---- */
.cc-pricing-close__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background: var(--cc-green);
  border-radius: var(--radius-lg);
  padding: 3rem;
}
.cc-pricing-close__copy h2 { color: var(--cc-white); margin-bottom: .75rem; }
.cc-pricing-close__copy p { color: rgba(255, 255, 255, .8); line-height: 1.65; margin: 0; }
.cc-pricing-close__actions { display: flex; flex-direction: column; gap: .75rem; }
.cc-pricing-close__actions .cc-btn { width: 100%; text-align: center; justify-content: center; }

@media (max-width: 860px) {
  .cc-pricing-banner,
  .cc-pricing-close__inner { grid-template-columns: 1fr; gap: 1.75rem; padding: 2rem; }
  .cc-pricing-banner__aside { border-left: 0; border-top: 2px solid var(--cc-border); padding-left: 0; padding-top: 1.75rem; }
}

/* =============================================
   FORM NOTICES + CONDITIONAL FIELDS
   ============================================= */
.cc-form-notice {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-size: .92rem;
  line-height: 1.5;
  border-left: 4px solid;
}
.cc-form-notice--success {
  background: rgba(0, 194, 168, .1);
  border-color: var(--cc-teal);
  color: var(--cc-green);
}
.cc-form-notice--error {
  background: rgba(200, 60, 60, .08);
  border-color: #c83c3c;
  color: #8d2626;
}

/* Revealed by main.js when "Other" is selected. [hidden] alone loses to
   any display rule the form sets on .cc-form-group, so make it explicit. */
.cc-form-other[hidden] { display: none; }

/* Consent checkbox — the label wraps the box so the whole line is clickable. */
.cc-form-consent label {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--cc-muted);
  cursor: pointer;
  font-weight: 400;
}
.cc-form-consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: .1rem 0 0;
  flex-shrink: 0;
  accent-color: var(--cc-teal);
  cursor: pointer;
}
.cc-form-consent a { color: var(--cc-teal); font-weight: 600; text-decoration: underline; }