/*
Theme Name:        XK3 Agency (Block)
Theme URI:         https://www.xk3.com
Author:            The XK3 Agency
Author URI:        https://www.xk3.com
Description:       Block theme for The XK3 Agency -- B2B healthcare marketing. Structure and design live in the theme (theme.json, templates, parts, block patterns); ALL page content is editable in the WordPress block editor. No page builder, no hardcoded copy in templates.
Version:           2.1.2
Requires at least: 6.6
Tested up to:      7.0
Requires PHP:      8.1
License:           Proprietary
License URI:       https://www.xk3.com
Text Domain:       xk3
Tags:              full-site-editing, block-patterns, custom-colors, custom-logo, editor-style, featured-images, threaded-comments
*/

/* =====================================================================
   XK3 DESIGN SYSTEM -- front-end + editor styles
   ---------------------------------------------------------------------
   Design tokens (colors, fonts) are declared in theme.json and surface
   as CSS custom properties below for use by the bespoke section styles.
   These classes are applied to core blocks via the block patterns, so
   the markup stays editable in the block editor while the look is owned
   here in code.  Do NOT put page copy in this file.
   ===================================================================== */

:root {
  --navy:       #0d1e2d;
  --navy-mid:   #1a3048;
  --gold:       #FAAB3A;
  --gold-light: #FAAB3A;
  --teal:       #1d7a8c;
  --teal-dark:  #155e6e;
  --white:      #ffffff;
  --off-white:  #f6f4f0;
  --border:     #e0dcd5;
  --text:       #2c2c2c;
  --muted:      #666666;
}

/* =====================================================================
   WORDPRESS NORMALIZATION LAYER
   ---------------------------------------------------------------------
   The prototype is a plain HTML page; WordPress injects its own vertical
   spacing (block gap), wraps images in <figure>, and renders menus as
   Navigation blocks instead of <ul>. This layer removes that injected
   spacing and bridges WP's block markup back to the prototype's classes
   so the page renders pixel-faithful to xk3-homepage.html.
   ===================================================================== */

/* 1. Kill all injected inter-block spacing. Every XK3 section owns its
      own padding; sections butt directly against each other. */
.wp-site-blocks,
.wp-site-blocks > *,
.wp-block-post-content,
.wp-block-post-content > *,
.xk3-section,
.xk3-section > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
.wp-site-blocks > * + *,
.wp-block-post-content > * + * { margin-top: 0; }

/* No gap between header, main and footer (removes the nav<->hero gap). */
.wp-site-blocks { gap: 0; }

/* The site-main wrapper must be flush and full-bleed. */
main.xk3-section { padding: 0; margin: 0; }

/* NOTE: WordPress's injected block-gap margins come from zero-specificity
   :where() selectors, so theme.json's blockGap:0 already neutralizes them
   without overriding the prototype's intentional per-element margins below.
   We deliberately do NOT add a blanket "> * { margin:0 }" reset here, which
   would clobber that intentional spacing. */

/* Figures (wp:image) must not add the default block margin. */
.xk3-section figure.wp-block-image { margin: 0; }

/* 2. HERO image -- WP wraps the <img> in a <figure>; make the figure fill
      the absolutely-positioned .hero-image box so object-fit can crop. */
.hero-image,
.hero-image .wp-block-image,
.hero-image figure { margin: 0; height: 100%; width: 100%; }
.hero-image .wp-block-image { position: absolute; inset: 0; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 3. PARTNERSHIP & SPLIT-CTA images -- same figure-fill treatment. */
.partnership-image .wp-block-image,
.partnership-image figure,
.split-cta-image .wp-block-image,
.split-cta-image figure { margin: 0; height: 100%; width: 100%; }
.partnership-image img,
.split-cta-image img,
.showcase-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-item .wp-block-image,
.showcase-item figure { margin: 0; height: 100%; width: 100%; }

/* 4. HEADER navigation -- WP renders the menu as a Navigation block, not a
      <ul class="nav-links">. Re-apply the prototype nav styling to it. */
.xk3-nav .wp-block-navigation { gap: 36px; }
.xk3-nav .wp-block-navigation a,
.xk3-nav .wp-block-navigation .wp-block-navigation-item__content {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s;
}
.xk3-nav .wp-block-navigation a:hover,
.xk3-nav .wp-block-navigation .wp-block-navigation-item__content:hover { color: #fff; }
.xk3-nav .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content {
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 22px;
  border-radius: 2px;
  color: #fff;
}
.xk3-nav .wp-block-navigation-item.nav-cta .wp-block-navigation-item__content:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
/* Mobile menu toggle colour */
.xk3-nav .wp-block-navigation__responsive-container-open,
.xk3-nav .wp-block-navigation__responsive-container-close { color: #fff; }

/* Mobile menu OPEN overlay -- core renders this as a white full-screen panel
   and our links are white, so it blanked out. Force navy panel + white items.
   !important is required because the block sets the background inline. */
.xk3-nav .wp-block-navigation__responsive-container.is-menu-open,
.xk3-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.xk3-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.xk3-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  background-color: var(--navy) !important;
}
.xk3-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 24px; }
.xk3-nav .wp-block-navigation__responsive-container.is-menu-open a,
.xk3-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.xk3-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  color: #fff !important;
}
.xk3-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background-color: transparent !important;
  border: none; box-shadow: none; padding-left: 12px;
}
.xk3-nav .wp-block-navigation__responsive-container-close,
.xk3-nav .wp-block-navigation__responsive-container-close svg { color: #fff !important; fill: #fff !important; }

/* Solutions dropdown (Navigation submenu) -- styled to match the navy bar.
   NOTE: WordPress core paints submenus white via
   .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container
   (specificity 0,3,0), so these rules raise specificity and force the colors. */
.xk3-nav .wp-block-navigation .wp-block-navigation__submenu-container {
  background-color: var(--navy-mid) !important;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 2px;
  padding: 8px 0;
  min-width: 248px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}
.xk3-nav .wp-block-navigation__submenu-container a,
.xk3-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 11px 22px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255,255,255,0.78) !important;
  white-space: nowrap;
}
.xk3-nav .wp-block-navigation__submenu-container a:hover,
.xk3-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06);
}
/* Gold chevron on the parent, gold accent on hovered child */
.xk3-nav .wp-block-navigation-submenu__toggle svg { fill: var(--gold); }
.xk3-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover { box-shadow: inset 3px 0 0 var(--gold); }

/* 5. FOOTER navigation -- same: Navigation block, not <ul><li><a>. */
.xk3-footer .footer-col .wp-block-navigation {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.xk3-footer .footer-col .wp-block-navigation a,
.xk3-footer .footer-col .wp-block-navigation .wp-block-navigation-item__content {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.2s;
}
.xk3-footer .footer-col .wp-block-navigation a:hover,
.xk3-footer .footer-col .wp-block-navigation .wp-block-navigation-item__content:hover { color: #fff; }

/* 6. Site logo (header + footer) keeps the white-mark blend. */
.xk3-nav .wp-block-site-logo img,
.xk3-footer .wp-block-site-logo img { height: 72px; width: auto; mix-blend-mode: screen; }

/* -- BASE ----------------------------------------------------------- */
body {
  font-family: 'Open Sans', sans-serif;
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;       /* keeps the "3" in XK3 on baseline */
  font-feature-settings: "lnum" 1;
}
html { scroll-behavior: smooth; }

/* Neutralise the default constrained content width for our full-bleed
   sections -- patterns manage their own internal padding. */
.xk3-section { width: 100%; }

/* -- UTILITY -------------------------------------------------------- */
.label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  display: block;
}
.gold-bar { width: 44px; height: 6px; background: var(--gold); margin: 20px 0 32px; }

.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent 0%, #bcb8b2 3%, #bcb8b2 97%, transparent 100%);
  margin: 40px 0;
}

/* fade-in animation (driven by assets/js/xk3.js IntersectionObserver).
   The hidden state is scoped to .xk3-anim-ready (added to <html> by a tiny
   head script) so that if JS is disabled or fails, nothing stays invisible. */
.fade-in { transition: opacity 0.7s ease, transform 0.7s ease; }
.xk3-anim-ready .fade-in { opacity: 0; transform: translateY(24px); }
.xk3-anim-ready .fade-in.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .xk3-anim-ready .fade-in { opacity: 1; transform: none; transition: none; }
}
/* Staggered reveal to match the prototype's transition-delays. */
.pain-grid .fade-in:nth-child(2) { transition-delay: 0.05s; }
.pain-grid .fade-in:nth-child(3) { transition-delay: 0.10s; }
.pain-grid .fade-in:nth-child(4) { transition-delay: 0.15s; }
.pain-grid .fade-in:nth-child(5) { transition-delay: 0.20s; }
.steps .fade-in:nth-child(2) { transition-delay: 0.10s; }
.steps .fade-in:nth-child(3) { transition-delay: 0.20s; }
.deliver-grid .fade-in:nth-child(3n+2) { transition-delay: 0.05s; }
.deliver-grid .fade-in:nth-child(3n+3) { transition-delay: 0.10s; }
.approach-steps .fade-in:nth-child(2) { transition-delay: 0.08s; }
.approach-steps .fade-in:nth-child(3) { transition-delay: 0.16s; }
.approach-steps .fade-in:nth-child(4) { transition-delay: 0.24s; }

/* -- BUTTONS -------------------------------------------------------- */
.btn,
.wp-block-button.is-style-xk3 .wp-block-button__link {
  display: inline-block;
  padding: 14px 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: 2px;
  transition: all 0.2s;
}
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); }
.btn-outline-teal { border: 2px solid var(--teal); color: var(--teal); background: transparent; }
.btn-outline-teal:hover { background: var(--teal); color: #fff; }
.btn-gold-solid { background: var(--gold); color: #fff; }
.btn-gold-solid:hover { background: #d4891f; }
.btn-white-solid { background: #fff; color: var(--navy); }
.btn-white-solid:hover { background: var(--gold); color: var(--navy); }
.btn-outline-white { border: 2px solid rgba(255,255,255,0.45); color: #fff; background: transparent; }
.btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-outline-navy { border: 2px solid var(--navy); color: var(--navy); background: transparent; }
.btn-outline-navy:hover { background: var(--navy); color: #fff; }

/* -- HEADER / NAV --------------------------------------------------- */
/* Make the header template-part wrapper sticky. The nav itself is sticky, but
   block themes wrap each template part in a <div> only as tall as its contents,
   which neutralizes the nav's own sticky -- so we stick the wrapper instead. */
.wp-site-blocks > .wp-block-template-part:first-child {
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Offset the sticky header by the WordPress admin bar height when logged in.
   The admin bar is 32px (fixed) on desktop; on screens <=782px it is 46px and
   scrolls with the page, so no offset is needed there. Public visitors are
   unaffected (no .admin-bar class). */
.admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: 32px; }
.admin-bar .filter-bar { top: 100px; }
@media screen and (max-width: 782px) {
  .admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: 0; }
  .admin-bar .filter-bar { top: 68px; }
}

.xk3-nav {
  background: var(--navy);
  padding: 0 56px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.xk3-nav .wp-block-site-logo img,
.xk3-nav .logo-img { height: 72px; width: auto; mix-blend-mode: screen; display: block; }
.xk3-nav .wp-block-navigation a {
  color: rgba(255,255,255,0.75);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.xk3-nav .wp-block-navigation a:hover { color: #fff; }
.xk3-nav .wp-block-navigation { gap: 36px; }
.nav-cta a,
.wp-block-navigation-item.nav-cta a {
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 22px;
  border-radius: 2px;
  color: #fff;
}
.nav-cta a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* -- HERO (homepage) ------------------------------------------------ */
.hero { position: relative; min-height: 580px; background: var(--navy); display: flex; align-items: center; overflow: hidden; }
.hero-image { position: absolute; inset: 0; z-index: 0; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; opacity: 0.92; transform: scaleX(-1); }
.hero-image::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(13,30,45,0.92) 0%, rgba(13,30,45,0.82) 20%, rgba(13,30,45,0.65) 38%, rgba(13,30,45,0.3) 58%, transparent 75%);
}
.hero-text { position: relative; z-index: 2; padding: 80px 64px 72px 80px; max-width: 620px; }
.hero-text h1 { font-family: 'Playfair Display', serif; font-size: clamp(36px, 4vw, 52px); font-weight: 700; color: #fff; line-height: 1.12; margin-bottom: 24px; }
.hero-text h1 em { font-style: normal; color: var(--gold-light); }

/* -- BELOW HERO ----------------------------------------------------- */
.hero-below { background: #fff; padding: 36px 80px; display: grid; grid-template-columns: 1fr 220px; gap: 48px; align-items: center; }
.hero-below-copy p { font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.hero-below-copy p + p { margin-top: 10px; }
.cta-stack { display: flex; flex-direction: column; gap: 12px; }

/* -- WE GET IT ------------------------------------------------------ */
.we-get-it { padding: 88px 80px 64px; background: #fff; }
.better-way-block { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 56px; }
.better-way-block h3 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 42px); color: var(--navy); line-height: 1.2; }
.better-way-block p { font-size: 15px; line-height: 1.75; color: var(--muted); }
.pain-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 52px; }
.pain-card { border: 1px solid var(--teal); border-radius: 4px; padding: 28px 20px; transition: border-color 0.2s, box-shadow 0.2s; }
.pain-card:hover { border-color: var(--gold); box-shadow: 0 4px 20px rgba(200,148,42,0.1); }
.pain-icon { width: 36px; height: 36px; margin-bottom: 18px; }
.pain-card p { font-size: 13px; line-height: 1.6; color: #555; }

/* -- ONE PARTNERSHIP ------------------------------------------------ */
.partnership { display: grid; grid-template-columns: 48% 52%; min-height: 160px; }
.partnership-image { position: relative; overflow: hidden; }
.partnership-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.partnership-content { background: var(--navy); padding: 20px 72px; display: flex; flex-direction: column; justify-content: center; }
.partnership-content .label { color: var(--gold); }
.partnership-content h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 40px); color: #fff; line-height: 1.18; margin-bottom: 36px; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 18px; padding: 0; }
.check-list li { display: flex; gap: 14px; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.82); }
.check-list li::before {
  content: ''; display: block; flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23FAAB3A' stroke-width='1.5'/%3E%3Cpath d='M6 10l3 3 5-5' stroke='%23FAAB3A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* -- BUILT FOR HEALTHCARE ------------------------------------------- */
.healthcare { background: var(--off-white); padding: 88px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.healthcare h2 { font-family: 'Playfair Display', serif; font-size: clamp(30px, 3vw, 42px); color: var(--navy); line-height: 1.15; margin-bottom: 28px; }
.healthcare .intro { font-size: 17px; line-height: 1.75; color: var(--navy); font-style: italic; margin-top: 24px; padding-left: 16px; border-left: 3px solid var(--gold); }
.understand-list { list-style: none; display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; padding: 0; }
.understand-list li { font-size: 14.5px; line-height: 1.65; color: #444; padding-left: 22px; position: relative; }
.understand-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; background: var(--gold); border-radius: 50%; }
.stat-card { background: var(--teal); border-radius: 6px; padding: 36px 48px; display: flex; flex-direction: column; gap: 40px; }
.stat-item { padding-bottom: 36px; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 3%, rgba(255,255,255,0.3) 97%, transparent 100%) no-repeat bottom / 100% 1px; }
.stat-item:last-child { background: none; padding-bottom: 0; }
.stat-number { font-family: 'Playfair Display', serif; font-size: 56px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* -- HOW IT WORKS --------------------------------------------------- */
.how-it-works { padding: 88px 80px 40px; background: #fff; }
.how-it-works h2 { font-family: 'Playfair Display', serif; font-size: clamp(30px, 3vw, 42px); color: var(--navy); margin-bottom: 10px; }
.how-it-works .subhead { font-size: 16px; font-weight: 400; color: var(--navy); font-style: italic; line-height: 1.75; padding-left: 16px; border-left: 3px solid var(--gold); margin-bottom: 64px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.steps::before { content: ''; position: absolute; top: 30px; left: 0; right: 0; height: 1px; background: linear-gradient(to right, #bcb8b2 0%, #bcb8b2 97%, transparent 100%); z-index: 0; }
.step { padding: 0 40px 0 0; position: relative; z-index: 1; }
.step:last-child { padding-right: 0; }
.step-circle { width: 60px; height: 60px; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; flex-shrink: 0; }
.step-circle span { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--gold); }
.step h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.step p { font-size: 14px; line-height: 1.72; color: var(--muted); }
.how-cta { margin-top: 64px; text-align: center; }

/* -- SOCIAL PROOF --------------------------------------------------- */
.social-proof { background: var(--off-white); padding: 88px 80px; }
.social-proof-header { text-align: center; margin-bottom: 56px; }
.social-proof-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 38px); color: var(--navy); }
.logo-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; align-items: center; margin-bottom: 20px; }
.logo-row:last-of-type { margin-bottom: 64px; }
.logo-pill { height: 80px; background: #fff; border-radius: 4px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; padding: 2px 4px; }
.logo-pill img { max-width: 100%; max-height: 68px; width: 100%; height: auto; object-fit: contain; transition: opacity 0.2s; }

/* -- TESTIMONIAL SLIDER (driven by assets/js/xk3.js) ---------------- */
.testimonial-slider { position: relative; max-width: 760px; margin: 0 auto; }
.testimonial-track { position: relative; min-height: 220px; }
.testimonial { background: #fff; border-left: 4px solid var(--gold); border-radius: 0 4px 4px 0; padding: 48px 56px; position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; }
.testimonial.active { opacity: 1; pointer-events: auto; position: relative; }
.testimonial p { font-family: 'Playfair Display', serif; font-size: 19px; line-height: 1.7; color: var(--navy); font-style: italic; margin-bottom: 28px; }
.testimonial cite { font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-style: normal; }
.slider-dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; cursor: pointer; padding: 0; transition: background 0.3s, transform 0.3s; }
.slider-dot.active { background: var(--gold); transform: scale(1.3); }

/* -- FINAL CTA ------------------------------------------------------ */
.final-cta { background: var(--navy); padding: 96px 80px; display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.final-cta h2 { font-family: 'Playfair Display', serif; font-size: clamp(32px, 3.5vw, 46px); color: #fff; line-height: 1.15; margin-bottom: 16px; }
.final-cta p { font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,0.65); max-width: 480px; }
.final-cta-btns { display: flex; flex-direction: column; gap: 14px; min-width: 200px; }

/* -- SOLUTION PAGE: HERO -------------------------------------------- */
.hero--solution { min-height: 520px; }
.hero--solution .hero-image img { object-position: center 30%; transform: none; }
.hero-content { position: relative; z-index: 2; padding: 80px; max-width: 680px; }
.breadcrumb { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 20px; display: flex; gap: 10px; align-items: center; }
.breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { color: rgba(255,255,255,0.25); }
.breadcrumb .current { color: rgba(255,255,255,0.75); }
.hero-content h1 { font-family: 'Playfair Display', serif; font-size: clamp(38px, 4.5vw, 58px); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 8px; }
.hero-content .tagline { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: block; }
.hero-content .gold-bar { margin: 18px 0 28px; }
.hero-content p { font-size: 16.5px; line-height: 1.75; color: rgba(255,255,255,0.78); max-width: 520px; }

/* -- SOLUTION: INTRO STRIP ------------------------------------------ */
.intro-strip { background: #fff; padding: 64px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; border-bottom: 1px solid var(--border); }
.intro-strip h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 2.8vw, 36px); color: var(--navy); line-height: 1.2; }
.intro-strip p { font-size: 15.5px; line-height: 1.8; color: var(--muted); }
.intro-strip p + p { margin-top: 16px; }

/* -- SOLUTION: CHALLENGE -------------------------------------------- */
.challenge { background: var(--teal); padding: 80px; }
.challenge-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.challenge h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 38px); color: #fff; line-height: 1.2; margin-bottom: 24px; }
.challenge p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.82); margin-bottom: 16px; }
.challenge-cards { display: flex; flex-direction: column; gap: 20px; }
.challenge-card { background: #fff; border-radius: 4px; border-left: 4px solid var(--gold); padding: 24px 28px; }
.challenge-card h4 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.challenge-card p { font-size: 13.5px; line-height: 1.65; color: var(--muted); margin-bottom: 0; }

/* -- SOLUTION: WHAT WE DELIVER -------------------------------------- */
.deliver { background: #fff; padding: 88px 80px; }
.deliver-header { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.deliver-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 40px); color: var(--navy); line-height: 1.2; margin-bottom: 16px; }
.deliver-header p { font-size: 15.5px; line-height: 1.8; color: var(--muted); }
.deliver-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.deliver-card { border: 1px solid var(--teal); border-radius: 4px; padding: 36px 32px; transition: border-color 0.2s, box-shadow 0.2s; }
.deliver-card:hover { border-color: var(--gold); box-shadow: 0 4px 24px rgba(250,171,58,0.1); }
.deliver-card-icon { width: 44px; height: 44px; background: rgba(250,171,58,0.12); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.deliver-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 12px; line-height: 1.3; }
.deliver-card p { font-size: 13.5px; line-height: 1.7; color: var(--muted); }

/* -- SOLUTION: BRANDING SHOWCASE ------------------------------------ */
.showcase { display: grid; grid-template-columns: repeat(3, 1fr); height: 360px; }
.showcase-item { position: relative; overflow: hidden; height: 360px; }
.showcase-item img { transition: transform 0.5s ease; object-position: center; }
.showcase-item:hover img { transform: scale(1.05); }
.showcase-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,30,45,0.85) 0%, transparent 60%); display: flex; align-items: flex-end; padding: 28px; }
.showcase-item-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }

/* -- SOLUTION: APPROACH --------------------------------------------- */
.approach { background: var(--navy); padding: 88px 80px; }
.approach-header { max-width: 560px; margin-bottom: 64px; }
.approach-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 40px); color: #fff; line-height: 1.2; margin-bottom: 16px; }
.approach-header p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.65); }
.approach-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.approach-step { background: rgba(29,122,140,0.18); padding: 40px 32px; border-top: 3px solid var(--teal); border-radius: 4px; transition: background 0.2s, border-color 0.2s; }
.approach-step:hover { background: rgba(29,122,140,0.30); border-color: var(--gold); }
.approach-step-num { font-family: 'Playfair Display', serif; font-size: 42px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 16px; }
.approach-step h3 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.approach-step p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.6); }

/* -- SOLUTION: RESULTS STRIP ---------------------------------------- */
.results-strip { background: #fff; padding: 56px 80px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.result-item { text-align: center; padding: 24px 32px; }
.result-number { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.result-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); line-height: 1.5; }

/* -- SOLUTION: SPLIT CTA -------------------------------------------- */
.split-cta { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
.split-cta-image { position: relative; overflow: hidden; }
.split-cta-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-cta-content { background: var(--teal); padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; }
.split-cta-content h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 2.8vw, 36px); color: #fff; line-height: 1.2; margin-bottom: 16px; }
.split-cta-content p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.8); margin-bottom: 36px; }
.cta-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* -- SOLUTION: PREV / NEXT NAV -------------------------------------- */
.solution-nav { background: #fff; padding: 40px 80px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sol-nav-item { display: flex; flex-direction: column; text-decoration: none; padding: 16px 0; transition: opacity 0.2s; }
.sol-nav-item:hover { opacity: 0.7; }
.sol-nav-item.next { text-align: right; border-left: 1px solid var(--border); padding-left: 48px; }
.sol-nav-item.prev { padding-right: 48px; }
.sol-nav-direction { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.sol-nav-title { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--navy); line-height: 1.2; }
.sol-nav-tag { font-size: 11px; color: var(--gold); font-weight: 600; letter-spacing: 0.08em; margin-top: 4px; }

/* -- LANDING PAGE HERO (Solutions / Why XK3 / Resources / Connect) -- */
.page-hero { background: var(--navy); position: relative; overflow: hidden; padding: 80px 80px 72px; display: flex; align-items: flex-end; min-height: 520px; }
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0.45; display: block; }
.page-hero-bg .wp-block-image, .page-hero-bg figure { margin: 0; height: 100%; width: 100%; }
.page-hero-content { position: relative; z-index: 1; max-width: 640px; }
.page-hero-content .label { color: var(--gold); }
.page-hero-content h1 { font-family: 'Playfair Display', serif; font-size: clamp(38px, 4.5vw, 58px); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 20px; }
.page-hero-content p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.72); max-width: 520px; }
.page-hero-content .gold-bar { margin-bottom: 24px; }

/* -- SOLUTIONS LANDING -- */
.solutions-intro { background: #fff; padding: 72px 80px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; border-bottom: 1px solid var(--border); }
.solutions-intro h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 38px); color: var(--navy); line-height: 1.2; }
.solutions-intro p { font-size: 15.5px; line-height: 1.8; color: var(--muted); }
.solution-block { display: grid; grid-template-columns: 50% 50%; min-height: 480px; }
.solution-block.reverse .solution-image { order: 2; }
.solution-image { position: relative; overflow: hidden; }
.solution-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.solution-image:hover img { transform: scale(1.03); }
.solution-image .wp-block-image, .solution-image figure { margin: 0; height: 100%; width: 100%; }
.solution-image-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(13,30,45,0.5) 100%); z-index: 1; }
.solution-content { padding: 64px 64px 64px 72px; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.solution-block:nth-child(even) .solution-content { background: var(--off-white); }
.solution-number { font-family: 'Playfair Display', serif; font-size: 80px; font-weight: 700; color: var(--border); line-height: 1; margin-bottom: 4px; display: block; }
.solution-content h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 2.8vw, 36px); color: var(--navy); line-height: 1.15; margin-bottom: 8px; }
.solution-tagline { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; display: block; }
.solution-content p { font-size: 15px; line-height: 1.8; color: var(--muted); margin-bottom: 16px; }
.solution-bullets { list-style: none; margin: 8px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.solution-bullets li { font-size: 14px; line-height: 1.65; color: #444; padding-left: 20px; position: relative; }
.solution-bullets li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; }
.cta-band { background: var(--teal); padding: 56px 80px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.cta-band h3 { font-family: 'Playfair Display', serif; font-size: clamp(24px, 2.5vw, 32px); color: #fff; line-height: 1.2; }
.cta-band p { font-size: 15px; color: rgba(255,255,255,0.8); margin-top: 8px; line-height: 1.65; }

/* -- WHY XK3: MISSION -- */
.mission { background: #fff; padding: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; border-bottom: 1px solid var(--border); }
.mission h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 42px); color: var(--navy); line-height: 1.2; }
.mission h2 em { font-style: italic; color: var(--teal); }
.mission p { font-size: 15.5px; line-height: 1.85; color: var(--muted); }
.mission p + p { margin-top: 16px; }

/* -- WHY XK3: VALUES -- */
.values { background: var(--off-white); padding: 88px 80px; }
.values-header { text-align: center; max-width: 600px; margin: 0 auto 64px; }
.values-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 42px); color: var(--navy); line-height: 1.2; margin-bottom: 16px; }
.values-header p { font-size: 15.5px; line-height: 1.8; color: var(--muted); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value-card { background: #fff; border-radius: 4px; border-top: 3px solid var(--gold); padding: 36px 28px; text-align: center; transition: box-shadow 0.2s, transform 0.2s; }
.value-card:hover { box-shadow: 0 8px 28px rgba(13,30,45,0.10); transform: translateY(-3px); }
.value-icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.value-icon svg { width: 64px; height: 64px; stroke: var(--teal); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.value-title { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.2; margin-bottom: 12px; }
.value-card p { font-size: 13.5px; line-height: 1.7; color: var(--muted); }

/* -- WHY XK3: THE DIFFERENCE -- */
.difference { background: #fff; padding: 0 0 88px; }
.difference-banner { display: grid; grid-template-columns: 1fr 600px; height: 320px; margin-bottom: 56px; overflow: hidden; }
.difference-banner-content { background: var(--navy); padding: 48px 80px; display: flex; flex-direction: column; justify-content: center; }
.difference-banner-content .label { color: var(--gold); margin-bottom: 12px; }
.difference-banner-content h2 { font-family: 'Playfair Display', serif; font-size: clamp(32px, 3.5vw, 46px); color: #fff; line-height: 1.15; margin-bottom: 16px; }
.difference-banner-content p { font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,0.65); max-width: 480px; }
.difference-banner-image { position: relative; overflow: hidden; }
.difference-banner-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }
.difference-banner-image .wp-block-image, .difference-banner-image figure { margin: 0; height: 100%; width: 100%; }
.difference-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 80px; }
.diff-card { border: 1px solid var(--border); border-radius: 4px; padding: 32px 28px; transition: border-color 0.2s, box-shadow 0.2s; }
.diff-card:hover { border-color: var(--gold); box-shadow: 0 4px 24px rgba(250,171,58,0.08); }
.diff-icon { width: 44px; height: 44px; background: rgba(29,122,140,0.1); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.diff-icon svg { stroke: var(--teal); fill: none; }
.diff-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 10px; line-height: 1.3; }
.diff-card p { font-size: 13.5px; line-height: 1.75; color: var(--muted); }

/* -- WHY XK3: HISTORY (teal) -- */
.history { background: var(--teal); padding: 88px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.history-content h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 42px); color: #fff; line-height: 1.2; margin-bottom: 24px; }
.history-content p { font-size: 15.5px; line-height: 1.85; color: rgba(255,255,255,0.85); }
.history-content p + p { margin-top: 16px; }
.history-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.history-stat { background: rgba(13,30,45,0.25); border-top: 3px solid var(--gold); border-radius: 4px; padding: 36px 28px; }
.history-stat-number { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.history-stat-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); line-height: 1.5; }

/* -- WHY XK3: TEAM -- */
.team { background: var(--off-white); padding: 88px 80px; }
.team-header { text-align: center; max-width: 600px; margin: 0 auto 64px; }
.team-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 42px); color: var(--navy); line-height: 1.2; margin-bottom: 16px; }
.team-header p { font-size: 15.5px; line-height: 1.8; color: var(--muted); }
.team-grid { display: flex; flex-direction: column; gap: 24px; max-width: 900px; margin: 0 auto; }
.team-card { background: #fff; border-radius: 4px; overflow: hidden; transition: box-shadow 0.2s; display: flex; flex-direction: row; align-items: stretch; }
.team-card:hover { box-shadow: 0 6px 24px rgba(13,30,45,0.10); }
.team-photo { flex-shrink: 0; width: 200px; min-height: 240px; background: var(--navy); overflow: hidden; position: relative; }
.team-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 10%; display: block; }
.team-photo .wp-block-image, .team-photo figure { margin: 0; position: absolute; inset: 0; height: 100%; width: 100%; }
.team-info { padding: 32px 36px; display: flex; flex-direction: column; justify-content: center; }
.team-info h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.team-info .team-title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
.team-info .gold-bar-sm { width: 32px; height: 4px; background: var(--gold); margin-bottom: 16px; }
.team-info p { font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.team-li { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; text-decoration: none; color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s; }
.team-li:hover { color: var(--navy); }
.team-li svg { fill: currentColor; width: 16px; height: 16px; }

/* -- WHY XK3: CLIENTS -- */
.clients { background: #fff; padding: 40px 80px 80px; border-bottom: 1px solid var(--border); }
.clients-header { text-align: center; margin-bottom: 56px; }
.clients-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(24px, 2.5vw, 34px); color: var(--navy); }
.clients-header p { font-size: 15px; line-height: 1.8; color: var(--muted); margin: 12px auto 0; max-width: 520px; }
.clients-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.client-pill { background: #fff; border: 1px solid var(--border); border-radius: 4px; height: 80px; padding: 2px 4px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; }
.client-pill:hover { border-color: var(--gold); }
.client-pill img { max-width: 100%; max-height: 68px; width: 100%; height: auto; object-fit: contain; }
.client-pill span { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; letter-spacing: 0.04em; }

/* -- RESOURCES -- */
.hero--resources { min-height: 440px; }
.hero--wide .hero-content { max-width: 860px; }
.hero-content p em { color: var(--gold); font-style: normal; }
.hero--resources .hero-content { max-width: 860px; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: #e89a28; }
.topics { background: var(--off-white); padding: 64px 80px; }
.topics-header { text-align: center; margin-bottom: 40px; }
.topics-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(24px, 2.5vw, 36px); color: var(--navy); line-height: 1.2; }
.topics-header p { font-size: 15px; color: var(--muted); margin: 12px auto 0; max-width: 540px; line-height: 1.7; }
.topics-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 860px; margin: 0 auto; }
.topic-pill { display: inline-block; padding: 10px 22px; background: #fff; border: 1.5px solid var(--border); border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--navy); text-decoration: none; text-transform: uppercase; transition: all 0.2s; }
.topic-pill:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.featured { padding: 88px 80px; background: #fff; }
.featured-header { text-align: center; margin-bottom: 56px; }
.featured-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 3vw, 40px); color: var(--navy); line-height: 1.2; }
.featured-header p { font-size: 15.5px; color: var(--muted); margin: 12px auto 0; max-width: 540px; line-height: 1.7; }
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto 56px; }
.post-card { background: #fff; border: 1.5px solid var(--border); border-radius: 4px; overflow: hidden; transition: box-shadow 0.2s, transform 0.2s; }
.post-card:hover { box-shadow: 0 8px 32px rgba(13,30,45,0.10); transform: translateY(-3px); }
.post-card-image { width: 100%; height: 180px; background: var(--navy); overflow: hidden; }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.post-card-image .wp-block-image, .post-card-image figure { margin: 0; height: 100%; width: 100%; }
.post-card:hover .post-card-image img { transform: scale(1.04); }
.post-card-body { padding: 24px; }
.post-topic { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; display: block; }
.post-card-body h3 { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--navy); line-height: 1.35; margin-bottom: 12px; }
.post-card-body p { font-size: 13px; line-height: 1.7; color: var(--muted); margin-bottom: 18px; }
.post-read-more { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); text-decoration: none; }
.post-read-more:hover { color: var(--teal-dark); }
.featured-cta { text-align: center; }
.blog-cta { background: var(--teal); padding: 88px 80px; text-align: center; }
.blog-cta .label { display: block; margin-bottom: 12px; }
.blog-cta h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 44px); color: #fff; line-height: 1.2; margin-bottom: 20px; }
.blog-cta p { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.72); max-width: 540px; margin: 0 auto 36px; }
.blog-cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ai-section { background: var(--off-white); padding: 88px 80px; border-top: 1px solid var(--border); }
.ai-inner { display: grid; grid-template-columns: 1fr 320px; gap: 64px; max-width: 1100px; margin: 0 auto; align-items: start; }
.ai-text h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3vw, 42px); color: var(--navy); line-height: 1.2; margin-bottom: 8px; }
.ai-text p { font-size: 15px; line-height: 1.8; color: var(--muted); margin-bottom: 20px; }
.ai-uses { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 28px; }
.ai-uses h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
.ai-uses ul { list-style: none; padding: 0; }
.ai-uses ul li { font-size: 13.5px; color: var(--text); padding: 8px 0; border-bottom: 1px solid var(--border); }
.ai-uses ul li:last-child { border-bottom: none; }

/* -- CONNECT -- */
.hero--connect { min-height: 460px; }
.hero--connect .hero-content { max-width: 860px; }
.hero--connect .hero-image img { object-position: center 60%; }
.connect-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0; min-height: 640px; }
.connect-info { background: var(--teal); padding: 72px 56px; color: #fff; }
.connect-info h2 { font-family: 'Playfair Display', serif; font-size: clamp(22px, 2.5vw, 32px); color: #fff; line-height: 1.25; margin-bottom: 8px; }
.connect-info > p { font-size: 15px; line-height: 1.8; color: rgba(255,255,255,0.80); margin-bottom: 48px; }
.info-block { margin-bottom: 36px; display: flex; gap: 18px; align-items: flex-start; }
.info-icon { flex-shrink: 0; width: 44px; height: 44px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.info-icon svg { opacity: 0.75; }
.info-label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; display: block; }
.info-text { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.82); }
.info-text a { color: rgba(255,255,255,0.82); text-decoration: none; }
.info-text a:hover { color: #fff; }
.social-row { display: flex; gap: 12px; margin-top: 48px; }
.social-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s; }
.social-btn:hover { background: var(--gold); }
.social-btn svg { fill: rgba(255,255,255,0.75); width: 16px; height: 16px; transition: fill 0.2s; }
.social-btn:hover svg { fill: var(--navy); }
.connect-form-wrap { background: var(--off-white); padding: 72px 64px; }
.connect-form-wrap h2 { font-family: 'Playfair Display', serif; font-size: clamp(22px, 2.5vw, 32px); color: var(--navy); line-height: 1.25; margin-bottom: 8px; }
.connect-form-wrap > p { font-size: 15px; line-height: 1.8; color: var(--muted); margin-bottom: 40px; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 13px 16px; font-family: 'Open Sans', sans-serif; font-size: 14px; color: var(--text); background: #fff; border: 1.5px solid var(--border); border-radius: 2px; outline: none; transition: border-color 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--teal); }
.form-group textarea { resize: vertical; min-height: 140px; }
.form-submit { grid-column: 1 / -1; margin-top: 8px; }
.form-submit .btn { width: 100%; text-align: center; padding: 16px; font-size: 12px; border: none; cursor: pointer; }
.form-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }
.nashville-strip { position: relative; height: 280px; overflow: hidden; }
.nashville-strip img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
.nashville-strip .wp-block-image, .nashville-strip figure { margin: 0; height: 100%; width: 100%; }
.nashville-strip::after { content: ''; position: absolute; inset: 0; background: rgba(13,30,45,0.35); }
.nashville-label { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; }
.nashville-label span { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
/* Connect's light closing CTA ("Not Ready to Reach Out?") overrides the navy .final-cta */
.final-cta--light { display: block; background: #fff; padding: 72px 80px; text-align: center; border-top: 1px solid var(--border); }
.final-cta--light .label { color: var(--teal); }
.final-cta--light h2 { color: var(--navy); margin-bottom: 16px; }
.final-cta--light p { font-size: 16px; color: var(--muted); max-width: 520px; margin: 0 auto 36px; line-height: 1.75; }
.final-cta--light .final-cta-btns { display: flex; flex-direction: row; gap: 16px; justify-content: center; flex-wrap: wrap; min-width: 0; }

/* -- SUCCESSES: PAGE HERO (work) -- */
.page-hero--work { display: block; min-height: 0; padding: 88px 80px 80px; }
.page-hero-img { position: absolute; inset: 0; z-index: 0; }
.page-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; opacity: 0.5; }
.page-hero-img .wp-block-image, .page-hero-img figure { margin: 0; height: 100%; width: 100%; }
.page-hero--work .label, .page-hero--work h1, .page-hero--work p, .page-hero--work .gold-bar { position: relative; z-index: 1; }
.page-hero--work .label { color: var(--gold); }
.page-hero--work h1 { font-family: 'Playfair Display', serif; font-size: clamp(40px, 5vw, 64px); color: #fff; line-height: 1.1; max-width: 700px; margin-bottom: 24px; }
.page-hero--work p { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.7); max-width: 560px; }

/* -- SUCCESSES: FILTER BAR -- */
.filter-bar { background: #fff; border-bottom: 1px solid var(--border); padding: 0 80px; display: flex; align-items: center; gap: 4px; position: sticky; top: 68px; z-index: 100; overflow-x: auto; }
.filter-btn { background: none; border: none; padding: 20px 20px; font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s; white-space: nowrap; }
.filter-btn:hover { color: var(--navy); }
.filter-btn.active { color: var(--navy); border-bottom-color: var(--gold); }

/* -- SUCCESSES: PORTFOLIO GRID -- */
.portfolio-section { background: var(--off-white); padding: 64px 80px 96px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.portfolio-item { position: relative; cursor: pointer; overflow: hidden; border-radius: 4px; background: #ccc; aspect-ratio: 4/3; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.portfolio-item[data-hidden="true"] { display: none; }
.portfolio-item:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(13,30,45,0.18); }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.portfolio-item:hover img { transform: scale(1.06); }
.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,30,45,0.92) 0%, rgba(13,30,45,0.4) 50%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-cat { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.portfolio-title { font-family: 'Playfair Display', serif; font-size: 16px; color: #fff; line-height: 1.3; margin-bottom: 4px; }
.portfolio-client { font-size: 11px; color: rgba(255,255,255,0.6); }
.portfolio-expand { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.portfolio-item:hover .portfolio-expand { opacity: 1; }

/* -- SUCCESSES: LIGHTBOX -- */
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(13,30,45,0.95); align-items: center; justify-content: center; padding: 40px; }
.lightbox.open { display: flex; }
.lightbox-inner { position: relative; max-width: 1100px; width: 100%; display: grid; grid-template-columns: 1fr 320px; gap: 0; border-radius: 4px; overflow: hidden; max-height: 85vh; }
.lightbox-image { position: relative; background: #111; }
.lightbox-image img { width: 100%; height: 100%; object-fit: contain; display: block; max-height: 85vh; }
.lightbox-info { background: #fff; padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }
.lightbox-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.lightbox-title { font-family: 'Playfair Display', serif; font-size: 26px; color: var(--navy); line-height: 1.2; margin-bottom: 8px; }
.lightbox-client { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
.lightbox-desc { font-size: 14px; line-height: 1.75; color: #555; }
.lightbox-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; color: #fff; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 10; }
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 10; }
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; left: auto; }

/* -- FOOTER --------------------------------------------------------- */
.xk3-footer { background: var(--teal); padding: 64px 80px 32px; }   /* teal per prototype; see docs */
.xk3-footer.is-navy { background: var(--navy); }                    /* navy variant (e.g. brief default) */
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 64px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 28px; }
.footer-brand p { font-size: 13px; line-height: 1.75; color: rgba(255,255,255,0.75); margin-top: 20px; max-width: 320px; }
.footer-col h4 { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; }
.footer-col ul li a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 13px; transition: color 0.2s; }
.footer-col ul li a:hover { color: #fff; }
.footer-bottom { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.10); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s; }
.footer-social-btn:hover { background: var(--gold); }
.footer-social-btn svg { fill: rgba(255,255,255,0.65); width: 15px; height: 15px; transition: fill 0.2s; }
.footer-social-btn:hover svg { fill: var(--navy); }

/* -- RESPONSIVE GUARD ----------------------------------------------- */
@media (max-width: 900px) {
  .xk3-nav { padding: 0 24px; flex-wrap: wrap; }
  .hero-text { padding: 56px 32px; }
  .hero-content { padding: 56px 32px; }
  .hero-below, .we-get-it, .healthcare, .how-it-works, .social-proof, .final-cta,
  .intro-strip, .challenge, .deliver, .approach, .results-strip, .solution-nav,
  .xk3-footer { padding-left: 24px; padding-right: 24px; }
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
  .partnership { grid-template-columns: 1fr; }
  .partnership-image { min-height: 300px; }
  .healthcare { grid-template-columns: 1fr; gap: 40px; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .steps::before { display: none; }
  .logo-row { grid-template-columns: repeat(3, 1fr); }
  .final-cta { grid-template-columns: 1fr; gap: 40px; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .better-way-block { grid-template-columns: 1fr; }
  .intro-strip, .challenge-inner, .deliver-grid, .split-cta { grid-template-columns: 1fr; gap: 40px; }
  .showcase { grid-template-columns: 1fr; height: auto; }
  .showcase-item { height: 280px; }
  .approach-steps { grid-template-columns: 1fr 1fr; }
  .results-strip { grid-template-columns: 1fr; }
  .solution-nav { grid-template-columns: 1fr; }
  .sol-nav-item.next { text-align: left; border-left: none; padding-left: 0; border-top: 1px solid var(--border); }
  .page-hero { padding: 56px 24px; }
  .solutions-intro, .solution-block, .cta-band { grid-template-columns: 1fr; gap: 32px; }
  .solution-block.reverse .solution-image { order: 0; }
  .solution-image { min-height: 280px; }
  .solution-content { padding: 48px 24px; }
  .mission, .history { grid-template-columns: 1fr; gap: 40px; }
  .values-grid, .difference-grid { grid-template-columns: 1fr; }
  .difference-grid { padding: 0 24px; }
  .difference-banner { grid-template-columns: 1fr; height: auto; }
  .difference-banner-content { padding: 48px 24px; }
  .difference-banner-image { min-height: 240px; }
  .team-card { flex-direction: column; }
  .team-photo { width: 100%; min-height: 280px; }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
  .topics, .featured, .ai-section, .blog-cta { padding-left: 24px; padding-right: 24px; }
  .posts-grid { grid-template-columns: 1fr; }
  .ai-inner { grid-template-columns: 1fr; gap: 40px; }
  .connect-wrap { grid-template-columns: 1fr; }
  .connect-info, .connect-form-wrap { padding: 56px 24px; }
  .contact-form { grid-template-columns: 1fr; }
  .final-cta--light { padding: 56px 24px; }
  .page-hero--work { padding: 56px 24px; }
  .filter-bar { padding: 0 24px; }
  .portfolio-section { padding-left: 24px; padding-right: 24px; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .lightbox-inner { grid-template-columns: 1fr; max-height: 92vh; }
  .lightbox-prev { left: 16px; }
  .lightbox-next { right: 16px; left: auto; }
}
@media (max-width: 1100px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }


/* =====================================================================
   EYEBROW LABEL / TAGLINE SPECIFICITY GUARD
   The eyebrow labels are <p class="label"> blocks. Section rules such as
   `.deliver-header p { color: var(--muted) }` (specificity 0,1,1) outrank
   the plain `.label` rule (0,1,0) and were clobbering the gold colour, size
   and uppercase styling. Scoping under `.xk3-section` (0,2,1) wins cleanly. */
.xk3-section p.label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
  display: block; line-height: 1.4;
}
.xk3-section p.tagline {
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0; display: block;
}
.xk3-section p.solution-tagline {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 24px; display: block;
}
/* Blog-cta eyebrow keeps its tighter spacing */
.xk3-section .blog-cta p.label { margin-bottom: 12px; }
