/*
Theme Name: Xanadu Child
Theme URI: https://staging.xanadu.co
Description: GeneratePress child theme for Xanadu. Holds the corporate brand system (teal/gold/mint on Xanadu Black), typography (DM Serif Display + Nunito Sans) and the homepage section styling. Built for a headless workflow: core Gutenberg blocks only, styled from this file. No page-builder or block-library plugins.
Author: Xanadu
Template: generatepress
Version: 1.13.9
Text Domain: xanadu-child
*/

/* ============================================================
   Brand tokens
   ============================================================ */
:root{
  --xa-teal:#02647e;        /* primary */
  --xa-teal-deep:#014a5e;   /* hover / dark */
  --xa-mint:#51dacf;        /* accent tick / gradients */
  --xa-gold:#f8aa00;        /* accent / bullets */
  --xa-black:#011419;       /* Xanadu Black */
  --xa-slate:#3b4a52;       /* body text */
  --xa-slate-2:#5a6b73;     /* muted */
  --xa-ink:#101828;         /* headings on light */
  --xa-tint:#e6f4f6;        /* icon chip bg */
  --xa-tint-2:#eef7f8;      /* band bg */
  --xa-tint-3:#f4fafb;      /* soft section */
  --xa-border:#e6eef1;      /* card / hairline border */
  --xa-white:#ffffff;
  --xa-container:1200px;
  --xa-radius:16px;
  --xa-radius-lg:22px;
}

/* ============================================================
   Base typography
   ============================================================ */
body{
  font-family:"Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--xa-slate);
  background:var(--xa-white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.xa-serif{
  font-family:"DM Serif Display", Georgia, "Times New Roman", serif;
  font-weight:400;
  color:var(--xa-ink);
  letter-spacing:.1px;
}
a{color:var(--xa-teal);}
a:hover{color:var(--xa-teal-deep);}

/* ============================================================
   Layout helpers
   ============================================================ */
.xa-section{ padding:70px 0; position:relative; overflow:hidden; }
.xa-section--tint{ background:var(--xa-tint-2); }
.xa-section--soft{ background:var(--xa-tint-3); }
.xa-container{ max-width:var(--xa-container); margin:0 auto; padding:0 24px; }

/* Make top-level homepage sections full-bleed regardless of theme container */
.home .entry-content > .xa-section,
.page-template-full-width .entry-content > .xa-section{ }
.xa-section.alignfull{ width:100%; }

/* Section header block */
.xa-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--xa-teal);
  margin:0 0 18px;
}
.xa-eyebrow::before{ content:""; width:26px; height:2px; background:var(--xa-mint); display:inline-block; border-radius:2px; }
.xa-h2{ font-size:clamp(32px,4.2vw,50px); line-height:1.08; color:var(--xa-black); margin:0 0 18px; max-width:30ch; }
.xa-lead{ font-size:18px; line-height:1.6; color:var(--xa-slate); margin:0; max-width:72ch; }
.xa-section__head{ margin-bottom:52px; }

/* ============================================================
   Buttons
   ============================================================ */
.xa-btn,
.wp-block-button.xa-btn__primary .wp-block-button__link,
.wp-block-button.xa-btn__ghost .wp-block-button__link,
.wp-block-button.xa-btn__white .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:16px;
  padding:15px 30px 20px; border-radius:10px; text-decoration:none; line-height:1;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
  border:2px solid transparent;
}
.wp-block-button.xa-btn__primary .wp-block-button__link{ background:var(--xa-teal); color:#fff; }
.wp-block-button.xa-btn__primary .wp-block-button__link:hover{ background:var(--xa-teal-deep); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(2,100,126,.7); }
.wp-block-button.xa-btn__ghost .wp-block-button__link{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.wp-block-button.xa-btn__ghost .wp-block-button__link:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.wp-block-button.xa-btn__white .wp-block-button__link{ background:#fff; color:var(--xa-teal); }
.wp-block-button.xa-btn__white .wp-block-button__link:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(1,20,25,.5); color:var(--xa-teal-deep); }

/* ============================================================
   Hero
   ============================================================ */
.xa-hero{ background:var(--xa-black); color:#fff; padding:0; }
.xa-hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; min-height:600px; padding-top:70px; padding-bottom:70px; }
.xa-hero__title{ font-size:clamp(40px,6vw,74px); line-height:1.02; color:#fff; margin:0 0 22px; letter-spacing:-.5px; }
.xa-hero__sub{ font-family:"Nunito Sans",sans-serif; font-size:19px; line-height:1.6; color:#c3d3d8; margin:0 0 34px; max-width:52ch; }
.xa-hero .wp-block-buttons{ gap:14px; }
.xa-hero__art{ position:relative; }
.xa-hero__art svg, .xa-hero__art img{ width:100%; height:auto; display:block; }
.xa-hero__media svg{ width:100%; height:auto; display:block; }

/* ============================================================
   Proof bar
   ============================================================ */
.xa-proof{ padding:56px 0 60px; border-bottom:1px solid var(--xa-border); }
.xa-proof__line{ text-align:center; font-size:16px; color:var(--xa-slate-2); margin:0 0 34px; }
.xa-proof__logos{ display:flex; align-items:center; justify-content:center; gap:64px; flex-wrap:wrap; }
.xa-proof__logos img{ height:46px; max-width:150px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.6; transition:filter .2s ease, opacity .2s ease; }
.xa-proof__logos img:hover{ filter:grayscale(0); opacity:1; }
/* MBZUAI (first) is a denser mark; scale it down so the row reads evenly */
.xa-proof__logos img:first-child{ height:40px; }

/* ============================================================
   Cards (shared)
   ============================================================ */
.xa-card{
  background:#fff; border:1px solid var(--xa-border); border-radius:var(--xa-radius);
  padding:34px; height:100%;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.xa-card:hover{ transform:translateY(-4px); box-shadow:0 22px 48px -30px rgba(2,100,126,.5); border-color:#d6e6ea; }
.xa-icon{
  width:56px; height:56px; border-radius:14px; background:var(--xa-tint);
  display:flex; align-items:center; justify-content:center; color:var(--xa-teal); margin-bottom:22px;
}
.xa-icon svg{ width:27px; height:27px; }
.xa-card h3, .xa-feature h3{ font-size:24px; line-height:1.2; color:var(--xa-black); margin:0 0 14px; }
.xa-card p{ font-size:16px; line-height:1.6; color:var(--xa-slate); margin:0; }
.xa-tag{
  display:inline-block; font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--xa-teal);
  background:var(--xa-tint); border:1px solid #d5ebef; border-radius:999px; padding:5px 12px; margin-bottom:16px;
}
/* Gold bullet lists inside cards */
.xa-bullets{ list-style:none; margin:0; padding:0; }
.xa-bullets li{ position:relative; padding-left:26px; margin:0 0 12px; font-size:16px; line-height:1.55; color:var(--xa-slate); }
.xa-bullets li::before{ content:""; position:absolute; left:0; top:8px; width:10px; height:10px; background:var(--xa-gold); border-radius:2px; }
.xa-caption{ display:table; margin:48px auto 0; font-family:"DM Serif Display",serif; font-size:23px; color:var(--xa-teal); background:var(--xa-tint); border:1px solid #cfeaef; border-radius:999px; padding:12px 32px; box-shadow:0 14px 34px -20px rgba(2,100,126,.55); }

/* Grids */
.xa-grid{ display:grid; gap:26px; }
.xa-grid--2{ grid-template-columns:repeat(2,1fr); }
.xa-grid--3{ grid-template-columns:repeat(3,1fr); }
.xa-grid--4{ grid-template-columns:repeat(4,1fr); }

/* ============================================================
   Forrester proof band
   ============================================================ */
.xa-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:8px; }
.xa-stat__num{ font-family:"DM Serif Display",serif; font-size:clamp(38px,4.4vw,54px); line-height:1; color:var(--xa-teal); margin:0 0 8px; }
.xa-stat__label{ font-size:15px; color:var(--xa-slate); margin:0; }
.xa-disclaimer{ font-size:12.5px; line-height:1.5; color:var(--xa-slate-2); margin:34px 0 0; max-width:96ch; }

/* Two-up stat row (Services: Design Leadership proof) */
.xa-stats--2{ grid-template-columns:repeat(2,1fr); max-width:640px; }

/* Session cards (Services: Canva Blueprint sessions) */
.xa-session .xa-step__num{ background:var(--xa-mint); color:var(--xa-black); }
.xa-session h3{ font-size:20px; margin:0 0 8px; }
.xa-session p{ font-size:15px; }

/* ============================================================
   Blueprint steps
   ============================================================ */
.xa-step__num{
  width:46px; height:46px; border-radius:12px; background:var(--xa-teal); color:#fff;
  font-family:"DM Serif Display",serif; font-size:22px;
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}

/* ============================================================
   Feature columns (Why Xanadu / How we think) - open, no card border
   ============================================================ */
.xa-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.xa-feature{ display:block; }
.xa-feature .xa-icon{ margin-bottom:18px; }
.xa-feature h3{ font-size:21px; margin:0 0 10px; }
.xa-feature p{ font-size:16px; line-height:1.6; color:var(--xa-slate); margin:0; }

/* ============================================================
   Final CTA band
   ============================================================ */
.xa-cta{ padding:36px 0 80px; }
.xa-cta__band{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,#51dacf 0%, #37b9bd 55%, #0d94a6 100%);
  border-radius:var(--xa-radius-lg); padding:46px 52px; max-width:1000px; margin:0 auto;
}
.xa-cta__band::after{
  content:""; position:absolute; right:36px; top:50%; transform:translateY(-50%);
  width:220px; height:220px; opacity:.18;
  background:url("/wp-content/uploads/2025/10/xanadu-icon-white.svg") center/contain no-repeat;
  pointer-events:none;
}
.xa-cta__band h2{ position:relative; font-size:clamp(28px,3.4vw,40px); line-height:1.08; color:var(--xa-black); margin:0 0 14px; max-width:18ch; }
.xa-cta__band p{ position:relative; font-size:17.5px; line-height:1.6; color:#08343b; margin:0 0 26px; max-width:46ch; }
.xa-cta__band .wp-block-buttons{ position:relative; }

/* ============================================================
   Header (GeneratePress nav)
   ============================================================ */
.site-header{ background:#fff; border-bottom:1px solid #eef2f4; }
.main-navigation, .main-navigation ul{ background:transparent; }
.main-navigation .main-nav ul li a{ font-family:"Nunito Sans",sans-serif; font-weight:700; color:#2c3a42; }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a{ color:var(--xa-teal); }
.main-navigation .main-nav ul li.current-menu-item > a{ box-shadow:inset 0 -3px 0 var(--xa-mint); }
.inside-header{ padding-top:14px; padding-bottom:14px; }
.site-header .site-logo img, .site-branding img, .header-image{ max-height:46px; width:auto; }
/* Logo already contains the wordmark: hide GeneratePress' text site title + tagline */
.site-header .main-title, .site-header .site-description{ display:none; }

/* ============================================================
   Footer (custom, via footer.php override)
   ============================================================ */
.xa-footer{ background:var(--xa-black); color:#c3d3d8; padding:78px 0 0; }
.xa-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1.3fr auto; gap:40px; align-items:start; }
.xa-footer__logo img{ height:44px; width:auto; margin-bottom:8px; }
.xa-footer h4{ font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:15px; letter-spacing:.02em; color:#fff; margin:0 0 18px; text-transform:none; }
.xa-footer ul{ list-style:none; margin:0; padding:0; }
.xa-footer li{ margin:0 0 12px; }
.xa-footer a{ color:#a9bcc2; text-decoration:none; font-size:15px; }
.xa-footer a:hover{ color:var(--xa-mint); }
.xa-footer__contact li{ display:flex; align-items:flex-start; gap:10px; }
.xa-footer__contact svg{ width:16px; height:16px; margin-top:3px; color:var(--xa-mint); flex:0 0 auto; }
.xa-footer__addr{ color:#8fa4ab; font-size:14px; line-height:1.55; margin-top:2px; }
.xa-footer__country{ display:block; color:#c3d3d8; font-weight:800; margin-bottom:2px; }
.xa-footer li.xa-footer__office2{ padding-left:26px; margin-top:-2px; }
.xa-footer__badge img{ width:150px; height:auto; }
.xa-footer__bar{ border-top:1px solid rgba(255,255,255,.1); margin-top:56px; padding:22px 0; }
.xa-footer__bar-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.xa-footer__copy{ font-size:13.5px; color:#8fa4ab; }
.xa-footer__legal a{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#8fa4ab; margin-left:22px; }

/* ============================================================
   Generic dark page hero (secondary pages)
   ============================================================ */
.xa-page-hero{ background:var(--xa-black); color:#fff; padding:76px 0 66px; }
.xa-page-hero .xa-eyebrow{ color:var(--xa-mint); }
.xa-page-hero .xa-eyebrow::before{ background:var(--xa-gold); }
.xa-page-hero h1{ font-size:clamp(36px,5vw,58px); color:#fff; line-height:1.04; margin:0 0 16px; max-width:20ch; }
.xa-page-hero p{ font-size:19px; line-height:1.55; color:#c3d3d8; margin:0; max-width:58ch; }

/* ============================================================
   Post listing (Insights / Blog query loop)
   ============================================================ */
.xa-posts .wp-block-post-template{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding:0; margin:0; list-style:none; }
.xa-posts li.wp-block-post{ background:#fff; border:1px solid var(--xa-border); border-radius:var(--xa-radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }
.xa-posts li.wp-block-post:hover{ transform:translateY(-4px); box-shadow:0 22px 48px -30px rgba(2,100,126,.5); }
.xa-posts .wp-block-post-featured-image{ margin:0; aspect-ratio:16/9; overflow:hidden; }
.xa-posts .wp-block-post-featured-image img{ width:100%; height:100%; object-fit:cover; }
.xa-posts .wp-block-post-title{ font-family:"DM Serif Display",serif; font-size:21px; line-height:1.22; margin:22px 24px 10px; }
.xa-posts .wp-block-post-title a{ color:var(--xa-black); text-decoration:none; }
.xa-posts .wp-block-post-title a:hover{ color:var(--xa-teal); }
.xa-posts .wp-block-post-excerpt{ margin:0 24px 20px; }
.xa-posts .wp-block-post-excerpt__excerpt{ font-size:15px; line-height:1.6; color:var(--xa-slate); }
.xa-posts .wp-block-post-excerpt__more-link{ display:inline-block; margin-top:10px; color:var(--xa-teal); font-weight:700; text-decoration:none; }
.xa-posts .wp-block-query-pagination{ margin-top:44px; gap:14px; }
.xa-posts .wp-block-query-pagination a, .xa-posts .wp-block-query-pagination .current{ color:var(--xa-teal); font-weight:700; }
@media (max-width:900px){ .xa-posts .wp-block-post-template{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .xa-posts .wp-block-post-template{ grid-template-columns:1fr; } }

/* ============================================================
   Legal / text pages (.xa-legal)
   ============================================================ */
.xa-legal-section{ padding:64px 0 88px; }
.xa-legal{ max-width:820px; }
.xa-legal__title{ font-size:clamp(34px,4vw,46px); color:var(--xa-black); line-height:1.1; margin:0 0 10px; }
.xa-legal h2{ font-size:25px; color:var(--xa-black); line-height:1.25; margin:42px 0 14px; }
.xa-legal h3{ font-size:19px; color:var(--xa-black); margin:28px 0 10px; }
.xa-legal p{ font-size:16.5px; line-height:1.72; color:var(--xa-slate); margin:0 0 16px; }
.xa-legal ul, .xa-legal ol{ margin:0 0 18px; padding-left:22px; }
.xa-legal li{ font-size:16.5px; line-height:1.7; color:var(--xa-slate); margin:0 0 9px; }
.xa-legal a{ color:var(--xa-teal); text-decoration:underline; text-underline-offset:2px; }
.xa-legal strong{ color:var(--xa-ink); }

/* ============================================================
   Contact page
   ============================================================ */
.xa-contact-hero{ background:var(--xa-black); color:#fff; padding:74px 0 66px; }
.xa-contact-hero .xa-eyebrow{ color:var(--xa-mint); }
.xa-contact-hero .xa-eyebrow::before{ background:var(--xa-gold); }
.xa-contact-hero h1{ font-size:clamp(34px,4.6vw,54px); color:#fff; line-height:1.05; margin:0 0 16px; max-width:20ch; }
.xa-contact-hero p{ font-size:18px; line-height:1.6; color:#c3d3d8; margin:0; max-width:56ch; }
.xa-contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
.xa-contact-form{ background:#fff; border:1px solid var(--xa-border); border-radius:var(--xa-radius); padding:34px; }
.xa-contact-form h2{ font-size:24px; color:var(--xa-black); margin:0 0 20px; }
.xa-contact-info h2{ font-size:22px; color:var(--xa-black); margin:0 0 10px; }
.xa-contact-info h3{ font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--xa-teal); margin:30px 0 10px; }
.xa-contact-info p{ font-size:16px; line-height:1.65; color:var(--xa-slate); margin:0 0 6px; }
.xa-contact-info a{ color:var(--xa-teal); }
.xa-contact-addr{ margin:0 0 20px; }
@media (max-width:900px){
  .xa-contact-grid{ grid-template-columns:1fr; gap:32px; }
}

/* ============================================================
   Review fixes: heading/lead widths so specific lines don't over-wrap
   ============================================================ */
.xa-blueprint .xa-lead{ max-width:none; }        /* one line */
.xa-edge .xa-h2{ max-width:34ch; }               /* not 4 lines */
.xa-pov .xa-h2{ max-width:none; }                /* one line */
.xa-proven .xa-h2{ max-width:none; }

/* ============================================================
   Split hero with image (secondary pages)
   ============================================================ */
.xa-page-hero.xa-hero--split .xa-container{ display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.xa-hero__media{ position:relative; }
.xa-hero__media img{ width:100%; height:auto; display:block; border-radius:var(--xa-radius); }
.xa-hero__media--plain img{ border-radius:0; }
@media (max-width:900px){ .xa-page-hero.xa-hero--split .xa-container{ grid-template-columns:1fr; } .xa-hero__media{ max-width:460px; } }

/* Section split: text + image side by side (fills whitespace) */
.xa-split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.xa-split--media-right{ }
.xa-split__media img{ width:100%; height:auto; display:block; border-radius:var(--xa-radius); }
@media (max-width:900px){ .xa-split{ grid-template-columns:1fr; gap:30px; } }

/* Partner logo lockups (Partnerships cards) — white logos on a dark chip */
.xa-partner-chip{ display:inline-flex; align-items:center; justify-content:center; background:var(--xa-black); border-radius:12px; padding:16px 20px; margin-bottom:20px; min-width:120px; min-height:58px; }
.xa-partner-chip img{ height:26px; width:auto; max-width:120px; object-fit:contain; }

/* Icon chip holding an uploaded icon image */
.xa-icon img{ width:30px; height:30px; object-fit:contain; }
.xa-icon--img{ background:var(--xa-tint); }

/* Team grid (About) */
.xa-team{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.xa-team__card{ text-align:left; }
.xa-team__photo{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--xa-radius); margin-bottom:16px; }
.xa-team__name{ font-family:"DM Serif Display",serif; font-size:20px; color:var(--xa-black); margin:0 0 2px; }
.xa-team__role{ font-family:"Nunito Sans",sans-serif; font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--xa-teal); margin:0; }
@media (max-width:820px){ .xa-team{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .xa-team{ grid-template-columns:1fr; } }

/* Insights search box */
.xa-search{ max-width:520px; margin:0 0 22px; }
.xa-search form{ display:flex; gap:10px; }
.xa-search .wp-block-search__input{ flex:1; border:1px solid var(--xa-border); border-radius:10px; padding:12px 16px; font-size:16px; }
.xa-search .wp-block-search__button{ background:var(--xa-teal); color:#fff; border:0; border-radius:10px; padding:12px 22px; font-weight:800; cursor:pointer; }

/* FAQ — native core Details block (replaces the Essential Blocks accordion) */
.xa-faq{ max-width:840px; margin:26px 0 0; display:flex; flex-direction:column; gap:14px; }
.xa-faq .wp-block-details{ background:var(--xa-tint-3); border:1px solid var(--xa-border); border-radius:var(--xa-radius); padding:20px 26px; transition:border-color .18s ease, box-shadow .18s ease; }
.xa-faq .wp-block-details[open]{ border-color:#d6e6ea; box-shadow:0 18px 40px -30px rgba(2,100,126,.5); }
.xa-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:18px; line-height:1.4; color:var(--xa-black); }
.xa-faq summary::-webkit-details-marker{ display:none; }
.xa-faq summary::after{ content:"+"; flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid #b8c2d2; border-radius:50%; color:var(--xa-teal); font-size:20px; line-height:1; }
.xa-faq .wp-block-details[open] summary::after{ content:"\2212"; }
.xa-faq .wp-block-details p{ font-size:16px; line-height:1.6; color:var(--xa-slate); margin:16px 0 0; }
.xa-faq .wp-block-details :is(ul,ol){ margin:14px 0 0; padding-left:20px; color:var(--xa-slate); }


/* ============================================================
   Front page: full-bleed content (no theme container padding)
   ============================================================ */
.home .site-content .content-area{ width:100%; }
.home .inside-article,
.home .entry-content,
.home .inside-article .entry-content{ padding:0 !important; margin:0 !important; }
.home article.post, .home .inside-article{ border:0; padding:0; }
.home .entry-content > *{ }
/* let alignfull sections truly span the viewport */
.home .entry-content > .alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* ============================================================
   GeneratePress ships no theme.json, so WordPress wraps every
   core/group in a .wp-block-group__inner-container. Flatten that
   wrapper inside our sections so grids/flex see the real children.
   ============================================================ */
.xa-section .wp-block-group__inner-container,
.xa-crosslink .wp-block-group__inner-container{ display:contents; }

/* Hero text colours must beat .entry-content h1/p (specificity 0,1,1) */
.xa-hero .xa-hero__title{ color:#fff; }
.xa-hero .xa-hero__sub{ color:#c3d3d8; }
.xa-cta .xa-cta__title{ color:var(--xa-black); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .xa-grid--4{ grid-template-columns:repeat(2,1fr); }
  .xa-stats{ grid-template-columns:repeat(2,1fr); gap:34px; }
  .xa-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .xa-section{ padding:70px 0; }
  .xa-hero__inner{ grid-template-columns:1fr; min-height:0; padding-top:56px; padding-bottom:56px; gap:32px; }
  .xa-hero__art{ order:-1; max-width:440px; }
  .xa-grid--2, .xa-grid--3{ grid-template-columns:1fr; }
  .xa-features{ grid-template-columns:1fr; gap:30px; }
  .xa-cta__band{ padding:44px 28px; }
  .xa-proof__logos{ gap:36px; }
  .xa-proof__logos img{ height:46px; }
}
@media (max-width:600px){
  .xa-grid--4{ grid-template-columns:1fr; }
  .xa-stats{ grid-template-columns:1fr 1fr; }
  .xa-footer__grid{ grid-template-columns:1fr; gap:34px; }
  .xa-section__head{ margin-bottom:36px; }
}

/* ============================================================
   Asset placeholder (.xa-slot)
   Every image slot on the /services tree ships as one of these
   until the art exists. The <img> carries the FINAL alt text now;
   the placeholder art is drawn in CSS from the data-slot-* attrs.
   To swap in the real asset: replace the img src and drop the
   xa-slot classes + data-slot-* attrs. Find every slot with
   [data-slot-id].
   ============================================================ */
.xa-slot{
  position:relative; margin:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:22px; text-align:center;
  border:2px dashed #9ab4bd; border-radius:var(--xa-radius);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(2,100,126,.05) 11px 22px),
    var(--xa-tint-3);
}
/* Ratio is reserved by the wrapper, so no reflow when the art lands. */
.xa-slot--16x9{ aspect-ratio:16/9; }
.xa-slot--4x3{ aspect-ratio:4/3; }
.xa-slot--1x1{ aspect-ratio:1/1; }
/* Present for the alt text and for a one-attribute swap; not shown. */
.xa-slot > img{ position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.xa-slot::before{
  content:attr(data-slot-id);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:700;
  letter-spacing:.03em; color:var(--xa-teal);
  background:var(--xa-white); border:1px solid #cfe3e8; border-radius:999px; padding:5px 12px;
}
.xa-slot::after{
  content:attr(data-slot-desc) "\A" attr(data-slot-dim);
  white-space:pre-wrap; max-width:44ch;
  font-family:"Nunito Sans",sans-serif; font-size:13.5px; line-height:1.5; color:var(--xa-slate-2);
}
/* Decorative backdrop slots sit behind card content and must not add height,
   so they keep the card at its real size for review. Label shrinks to a corner chip. */
.xa-slot--bg{
  position:absolute; inset:0; z-index:0; aspect-ratio:auto;
  padding:0; border-radius:inherit;
  align-items:flex-start; justify-content:flex-start;
}
.xa-slot--bg::before{ margin:12px; font-size:10.5px; padding:3px 9px; }
.xa-slot--bg::after{ display:none; }
.xa-slot--dark{ border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.04); }
.xa-slot--dark::before{ background:rgba(255,255,255,.9); border-color:transparent; }
.xa-slot--dark::after{ color:#9fb4bb; }

/* ============================================================
   /services — the two anchor cards
   Visual siblings running the same ladder: one method, two tracks. Canva
   leads, AI second. The .xa-path-note single-descriptor variant the Canva
   card used to carry was retired on 2026-07-22 along with the six-session
   framing — if a card ever needs a non-ladder descriptor again, it comes
   back here.
   ============================================================ */
.xa-anchor{ position:relative; display:flex; flex-direction:column; overflow:hidden; }
.xa-anchor > *:not(.xa-slot--bg){ position:relative; z-index:1; }
.xa-anchor__layer{ font-family:"DM Serif Display",serif; font-size:19px; color:var(--xa-teal); margin:0 0 12px; }
.xa-anchor__path{ margin-top:auto; padding-top:24px; }
.xa-anchor .wp-block-buttons{ margin-top:22px; }
.xa-path{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.xa-path span{
  font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:12.5px; color:var(--xa-teal);
  background:var(--xa-tint); border:1px solid #d5ebef; border-radius:8px; padding:6px 10px;
}
.xa-path i{ font-style:normal; color:var(--xa-slate-2); font-size:13px; }

/* ============================================================
   /services — Why both (prose thesis)
   ============================================================ */
.xa-why__body{ max-width:74ch; }
.xa-why__open{ font-family:"DM Serif Display",serif; font-size:clamp(21px,2.4vw,27px); line-height:1.4; color:var(--xa-black); margin:0 0 22px; }
.xa-why__body p{ font-size:17px; line-height:1.7; color:var(--xa-slate); margin:0 0 18px; }
.xa-why__body p:last-child{ margin-bottom:0; }
.xa-why__body strong{ color:var(--xa-black); font-weight:800; }

/* ============================================================
   Step / offer sections (AI pillar)
   ============================================================ */
.xa-walk{
  font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--xa-teal); margin:38px 0 16px;
}
.xa-prose{ font-size:16.5px; line-height:1.72; color:var(--xa-slate); margin:0 0 16px; max-width:74ch; }
.xa-prose:last-child{ margin-bottom:0; }
.xa-prose strong{ color:var(--xa-black); font-weight:800; }
/* Named deliverable blocks (Enable) — reuses the gold-square bullet idiom */
.xa-walk-list{ list-style:none; margin:0; padding:0; display:grid; gap:18px; max-width:74ch; }
.xa-walk-list li{ position:relative; padding-left:26px; font-size:16.5px; line-height:1.65; color:var(--xa-slate); margin:0; }
.xa-walk-list li::before{ content:""; position:absolute; left:0; top:9px; width:10px; height:10px; background:var(--xa-gold); border-radius:2px; }
.xa-walk-list strong{ color:var(--xa-black); font-weight:800; }
/* The detail box */
.xa-detail{ background:var(--xa-white); border:1px solid var(--xa-border); border-radius:var(--xa-radius); padding:26px 30px; margin:34px 0 0; max-width:74ch; }
.xa-section--tint .xa-detail{ background:var(--xa-white); }
.xa-detail h3{
  font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--xa-teal); margin:0 0 18px;
}
.xa-detail dl{ margin:0; display:grid; gap:13px; }
.xa-detail dl > div{ display:grid; grid-template-columns:124px 1fr; gap:16px; align-items:baseline; }
.xa-detail dt{ font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:14px; color:var(--xa-black); }
.xa-detail dd{ margin:0; font-size:15.5px; line-height:1.6; color:var(--xa-slate); }
/* Closing line that hands off to the next step */
.xa-kicker{ font-family:"DM Serif Display",serif; font-size:20px; line-height:1.45; color:var(--xa-teal); margin:28px 0 0; max-width:60ch; }
.xa-step-sec .wp-block-buttons{ margin-top:28px; }

/* ============================================================
   AI pillar — the five-step index in the opening
   ============================================================ */
/* It is a navigation control (every row jumps to its step), but hairline rows on a
   white section read as an unstyled spreadsheet, and the meta was set in the muted
   grey. Give it a card with a tinted fill so it lifts off the white, a chip for the
   step, readable meta contrast, and a chevron so it looks clickable before hover. */
.xa-steplist{
  list-style:none; margin:34px 0 0; padding:0;
  background:var(--xa-tint-3);
  border:1px solid var(--xa-border);
  border-radius:var(--xa-radius);
  overflow:hidden;
  box-shadow:0 26px 56px -40px rgba(2,100,126,.5);
}
.xa-steplist li + li{ border-top:1px solid var(--xa-border); }
.xa-steplist a{
  display:grid;
  /* Fixed name track. Each row is its own grid, so a max-content name column
     sizes per-row and leaves the descriptions ragged. Both rails (Canva + AI)
     now use short names (Assess..Build), so 96px lands every description on one
     x; minmax() means a longer name would grow rather than clip. */
  grid-template-columns:auto minmax(96px,max-content) minmax(0,1fr) auto;
  gap:0 26px; align-items:center;
  padding:19px 24px; text-decoration:none;
  transition:background .16s ease;
}
.xa-steplist a:hover{ background:var(--xa-white); }
.xa-steplist__step{
  font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--xa-teal);
  background:var(--xa-tint); border:1px solid #d5ebef; border-radius:999px;
  padding:5px 11px; white-space:nowrap;
}
.xa-steplist__name{
  font-family:"DM Serif Display",serif; font-size:21px; line-height:1.2;
  color:var(--xa-black); white-space:nowrap;
}
.xa-steplist a:hover .xa-steplist__name{ color:var(--xa-teal); }
.xa-steplist__meta{ font-size:15.5px; line-height:1.5; color:var(--xa-slate); }
.xa-steplist a::after{
  content:"\2192"; font-family:"Nunito Sans",sans-serif; font-size:17px; font-weight:700;
  color:var(--xa-teal); opacity:.3;
  transition:opacity .16s ease, transform .16s ease;
}
.xa-steplist a:hover::after{ opacity:1; transform:translateX(3px); }
.xa-note{ font-size:16px; line-height:1.65; color:var(--xa-slate); margin:26px 0 0; max-width:70ch; }
.xa-note strong{ color:var(--xa-black); font-weight:800; }

/* ============================================================
   Cross-link block ("The other half")
   ============================================================ */
.xa-crosslink{ background:var(--xa-black); color:#fff; padding:74px 0; }
.xa-crosslink .xa-container{ display:grid; grid-template-columns:1fr auto; gap:44px; align-items:center; }
.xa-crosslink .xa-eyebrow{ color:var(--xa-mint); }
.xa-crosslink .xa-eyebrow::before{ background:var(--xa-gold); }
.xa-crosslink h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.1; color:#fff; margin:0 0 12px; max-width:16ch; }
.xa-crosslink p{ font-size:17px; line-height:1.65; color:#c3d3d8; margin:0; max-width:60ch; }

/* ============================================================
   Responsive — new components
   ============================================================ */
@media (max-width:900px){
  .xa-crosslink .xa-container{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:600px){
  .xa-detail{ padding:22px; }
  .xa-detail dl > div{ grid-template-columns:1fr; gap:2px; }
  .xa-slot{ padding:16px; gap:8px; }
  .xa-slot::after{ font-size:12.5px; }
}

/* ============================================================
   Fixes / additions for the /services tree
   ============================================================ */

/* Dark hero eyebrow: mint text, gold rule (matches .xa-page-hero).
   Was an inline style on the old /services hero; belongs here. */
.xa-hero .xa-eyebrow{ color:var(--xa-mint); }
.xa-hero .xa-eyebrow::before{ background:var(--xa-gold); }

/* Ink button: dark outline for the mint CTA band, where the white-outline
   .xa-btn__ghost would be white-on-mint and fail contrast. */
.wp-block-button.xa-btn__ink .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:16px;
  padding:15px 30px; border-radius:10px; text-decoration:none; line-height:1;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
  border:2px solid rgba(1,20,25,.42); background:transparent; color:var(--xa-black);
}
.wp-block-button.xa-btn__ink .wp-block-button__link:hover{
  border-color:var(--xa-black); background:rgba(255,255,255,.28);
  color:var(--xa-black); transform:translateY(-2px);
}
.xa-cta__band .wp-block-buttons{ gap:14px; }

/* Backdrop slot chip sits bottom-right so it clears the card's tag pill (top-left)
   and its button (bottom-left). */
.xa-slot--bg{ align-items:flex-end; justify-content:flex-end; }

/* Two-up anchor cards: keep the hero art from stretching on the dark hero. */
.xa-hero__art .xa-slot{ width:100%; }

/* Slot used as a standalone block element rather than inside a split. */
.xa-slot--block{ margin:34px 0 0; }
.xa-prose--gap{ margin-top:26px; }

/* Step 0 is a one-line offer; it does not need a full section head gap. */
.xa-assess .xa-section__head{ margin-bottom:26px; }

/* Coaching: 1:1 portrait, so give the text the larger share. */
.xa-coaching__split{ grid-template-columns:1.45fr .75fr; align-items:start; }
@media (max-width:900px){ .xa-coaching__split{ grid-template-columns:1fr; } }
.xa-coaching__split .xa-detail{ margin-top:30px; }

/* Anchor cards carry the page's two h2s — slightly larger than a card h3. */
.xa-anchor h2{ font-size:29px; line-height:1.14; color:var(--xa-black); margin:0 0 10px; }

/* h4 inside cards (session names sit under the "in six sessions" h3). */
.xa-card h4{ font-size:24px; line-height:1.2; color:var(--xa-black); margin:0 0 14px; }
.xa-session h4{ font-size:20px; margin:0 0 8px; }

/* Canva page — was inline styles on the old /services markup. */
.xa-h2--wide{ max-width:none; }
.xa-stats--gap{ margin-top:28px; }
.xa-canva__intro{ margin-bottom:52px; }
.xa-canva__sub{ margin:0 0 30px; }
.xa-canva__cta{ margin-top:36px; }
.xa-value__card{ max-width:760px; }

/* Five-across step ladder (homepage AI Transformation summary).
   Compacted from .xa-card defaults: five columns in the 1200px container
   leaves ~212px each, which the 34px card padding would eat. */
.xa-grid--5{ grid-template-columns:repeat(5,1fr); gap:20px; }
.xa-grid--5 .xa-card{ padding:24px 20px; }
.xa-grid--5 .xa-step__num{ width:38px; height:38px; font-size:18px; border-radius:10px; margin-bottom:16px; }
.xa-grid--5 .xa-card h3{ font-size:19px; margin:0 0 8px; }
.xa-grid--5 .xa-card p{ font-size:14.5px; line-height:1.5; }
@media (max-width:1024px){ .xa-grid--5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .xa-grid--5{ grid-template-columns:1fr; } }

/* Backdrop slots sit *behind* live card copy, so drop the diagonal hatch the
   standalone slots use — it hurts legibility of the text on top. The dashed
   border and the slot-id chip still mark it as an unfilled slot. */
.xa-slot--bg{ background:rgba(2,100,126,.035); border-color:#cbdde3; }

/* ============================================================
   Click-to-play video facade (.xa-video)
   No YouTube request is made until the visitor presses play: the poster is
   served from our own media library and the youtube-nocookie iframe is
   injected on click (see the xa-video script in functions.php). Keeps an
   above-the-fold hero fast and sets no third-party cookies on load.
   ============================================================ */
.xa-video{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:16/9; border-radius:var(--xa-radius);
  background:var(--xa-black);
}
.xa-video__poster{ width:100%; height:100%; object-fit:cover; display:block; }
.xa-video__play{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
  display:block; cursor:pointer;
  /* Bottom scrim only: the poster's focal point is centred, so a full-cover
     tint plus a centred button would sit straight on top of it. */
  background:linear-gradient(to top, rgba(1,20,25,.5) 0%, rgba(1,20,25,0) 52%);
  transition:background .18s ease;
}
.xa-video__play:hover{ background:linear-gradient(to top, rgba(1,20,25,.62) 0%, rgba(1,20,25,.06) 52%); }
.xa-video__play::after{
  content:""; position:absolute; left:26px; bottom:26px; width:64px; height:64px;
  border-radius:50%; background:var(--xa-white);
  box-shadow:0 18px 40px -14px rgba(1,20,25,.65);
  transition:transform .18s ease;
}
.xa-video__play:hover::after{ transform:scale(1.08); }
.xa-video__play svg{
  position:absolute; left:48px; bottom:45px; width:26px; height:26px;
  z-index:1; fill:var(--xa-teal);
}
.xa-video__play:focus-visible{ outline:3px solid var(--xa-mint); outline-offset:3px; }
.xa-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:600px){
  .xa-video__play::after{ left:16px; bottom:16px; width:52px; height:52px; }
  .xa-video__play svg{ left:34px; bottom:31px; width:21px; height:21px; }
}

/* ============================================================
   Heading wrap control
   .xa-h2's global max-width:20ch was tuned for the homepage's short headings
   ("More than licences."). The /services tree has longer ones, which it forced
   into awkward breaks ("How we deliver, on" / "both."). Release the cap only on
   the new sections, so the already-approved pages are untouched, and let the
   copy's own <br> / &nbsp; decide the break.
   ============================================================ */
.xa-why .xa-h2,
.xa-deliver .xa-h2,
.xa-journey .xa-h2,
.xa-step-sec .xa-h2{ max-width:none; }

/* The CTA heading ("Ready to move from experiment to production?") was breaking
   three ways at the 18ch cap: "Ready to move from / experiment to / production?".
   26ch lets greedy wrapping land it on two. Same copy on /, /services and
   /services/canva, so it's fixed once here. */
.xa-cta__band h2{ max-width:26ch; }

/* ============================================================
   Review fixes — /services/ai-transformation (2026-07-16)
   ============================================================ */

/* Step sections pair short copy with a tall 4:3 artefact. align-items:center left
   the text floating ~100px below the image top, with whitespace above and below
   it. Align the two columns to the top so they start on the same line. The
   coaching split already sets its own columns, so don't touch those. */
.xa-step-sec .xa-split{ align-items:start; }

/* GeneratePress' separate-containers chrome adds .site-main{margin:20px 0} plus
   .inside-article{padding:40px} — a 60px white band above the first section and
   below the last. Invisible when a page ends on a light CTA; glaring on
   /services/ai-transformation, which ends on a black cross-link band.
   Pages built as a full-bleed section stack own their own padding, so drop it on
   exactly those. :has() keeps /ai-readiness — a self-contained HTML app that
   starts with a spacer, not a section — on the default chrome. */
.page .site-main:has(.entry-content > .alignfull:first-child){ margin-top:0; margin-bottom:0; }
.page .inside-article:has(> .entry-content > .alignfull:first-child){ padding:0; border:0; }

/* ============================================================
   Step intro (AI pillar) — 2026-07-17
   The heading used to run full-width above a half-width intro, so the text
   measure jumped mid-section (476px -> 646px) and the 4:3 artefact was stranded
   in a column with nothing under it. Putting the heading + opening copy together
   in the left column balances it against the image (~350px vs ~310px) and keeps
   one measure from the top of the section to the bottom.
   ============================================================ */
.xa-step__intro{ grid-template-columns:1.25fr .75fr; margin-bottom:12px; }
.xa-step__intro .xa-eyebrow{ margin-bottom:16px; }
.xa-step__intro .xa-h2{ margin-bottom:14px; }
.xa-step__intro .xa-lead{ margin-bottom:26px; }
.xa-step__intro .xa-prose:last-child{ margin-bottom:0; }
@media (max-width:900px){
  /* beat the generic .xa-split mobile rule, which sits earlier in this file */
  .xa-step__intro{ grid-template-columns:1fr; }
}

/* Keep a standalone slot on the same measure as the prose it sits between,
   instead of running the full container width. */
.xa-slot--block{ margin:34px 0; max-width:74ch; }

/* ============================================================
   Step section: copy column + sticky artefact rail — 2026-07-17
   Each step is a long read with one artefact. Parking the artefact beside the
   heading left ~40% of the width empty from there down, and divorced the image
   from the copy it proves. The rail spans the whole step and sticks, so the
   artefact stays beside the claim it evidences and the column is never empty.
   align-items:start is load-bearing: the default `stretch` would size the rail
   to the full row and leave sticky nothing to travel within.
   ============================================================ */
.xa-step__grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  column-gap:48px;
  align-items:start;
}
.xa-step__body > .xa-eyebrow{ margin-bottom:16px; }
.xa-step__body > .xa-h2{ margin-bottom:14px; }
.xa-step__body > .xa-lead{ margin-bottom:26px; }
.xa-step__body > .xa-prose:last-child,
.xa-step__body > .xa-kicker:last-child{ margin-bottom:0; }
/* the body already holds the measure, so let its children use the full column */
.xa-step__body .xa-prose,
.xa-step__body .xa-walk-list,
.xa-step__body .xa-detail{ max-width:none; }
.xa-step__rail{ position:sticky; top:40px; }

@media (max-width:900px){
  .xa-step__grid{ grid-template-columns:1fr; row-gap:30px; }
  .xa-step__rail{ position:static; top:auto; max-width:480px; }
}

/* .xa-section sets overflow:hidden (it clips decorative art on other sections).
   Any non-visible overflow on an ancestor makes THAT element the sticky scroll
   container, so the rail above would never pin. Step sections have nothing to
   clip, so release it there. */
.xa-step-sec{ overflow:visible; }

/* Step index — small screens: chip + name on one line, meta beneath, no chevron. */
@media (max-width:900px){
  .xa-steplist a{ grid-template-columns:auto 1fr; gap:8px 16px; padding:18px; }
  .xa-steplist__name{ white-space:normal; }
  .xa-steplist__meta{ grid-column:1 / -1; }
  .xa-steplist a::after{ display:none; }
}

/* ============================================================
   Step-index seam (Canva pillar) — 2026-07-23
   The Canva journey is "two gates, then a menu": Assess and Blueprint are
   bought in order, Enable/Govern/Build are picked off the roadmap. The index
   marks that shift with a labelled divider row between rows 2 and 3 — a gold
   rule (a change of kind, not another step) on a tint fill, sitting flush in
   the .xa-steplist card. It is a non-link <li>, so it never looks clickable.
   The Canva pillar itself now runs as full step sections that reuse the AI
   pillar's .xa-step-sec / .xa-step__grid / .xa-detail components verbatim —
   the two pages are structural twins, so there is deliberately no Canva-only
   step CSS here beyond this seam.
   ============================================================ */
.xa-steplist__seam{
  display:flex; align-items:center; gap:14px;
  padding:13px 24px;
  background:var(--xa-tint);
  font-family:"Nunito Sans",sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--xa-teal);
}
.xa-steplist__seam::before{
  content:""; flex:none; width:22px; height:2px; border-radius:2px; background:var(--xa-gold);
}
@media (max-width:900px){
  .xa-steplist__seam{ padding:12px 18px; }
}

/* ============================================================
   Canva pillar — density pass (page-scoped) — 2026-07-23
   The Canva steps run shorter than the AI pillar's, so the shared 96px
   section rhythm plus the top-pinned sticky rail left large voids — a
   small artefact stranded top-right with white space below it (worst on
   the shorter steps: Assess, Blueprint, Govern). Tightened on THIS page
   only (body.page-id-5522), so the approved AI pillar is untouched:
   - shorter section padding and section-head gap
   - the step artefact centres in its column instead of pinning to the
     top, so a short step reads as a balanced two-column rather than an
     image floating above empty space (the sticky travel earned its keep
     on the AI pillar's long steps; these are too short to benefit)
   ============================================================ */
.page-id-5522 .xa-section:not(.xa-hero):not(.xa-cta){ padding:76px 0; }
.page-id-5522 .xa-section__head{ margin-bottom:40px; }
.page-id-5522 .xa-step__grid{ column-gap:44px; align-items:center; }
.page-id-5522 .xa-step__rail{ position:static; top:auto; }
.page-id-5522 .xa-walk{ margin-top:30px; }
.page-id-5522 .xa-detail{ margin-top:28px; }
.page-id-5522 .xa-kicker{ margin-top:24px; }

/* ============================================================
   Filled artefact (real image replacing an .xa-slot placeholder) — 2026-07-23
   Sits in hero art (dark bg) and step rails (light bg) alike: hairline border +
   soft lift work on both. White data-artefacts read as "floating deliverables".
   ============================================================ */
.xa-artefact{ display:block; margin:0; border-radius:var(--xa-radius); overflow:hidden;
  border:1px solid var(--xa-border); background:#fff;
  box-shadow:0 30px 60px -30px rgba(1,20,25,.45); }
.xa-artefact img{ display:block; width:100%; height:auto; }

/* --- Homepage v5 alignment: methodology entry-points + focus supporting line (2026-07-23) --- */
.xa-track-links{ text-align:center; font-size:16px; line-height:1.6; color:var(--xa-slate); max-width:64ch; margin:34px auto 0; }
.xa-track-links a{ color:var(--xa-teal); font-weight:700; }
.xa-track-links a:hover{ color:var(--xa-teal-deep); }
.xa-track-note{ text-align:center; font-size:14px; line-height:1.6; color:var(--xa-slate-2); margin:10px auto 0; }
.xa-track-note a{ color:var(--xa-slate-2); text-decoration:underline; text-underline-offset:2px; }
.xa-track-note a:hover{ color:var(--xa-teal); }
.xa-focus__also{ text-align:center; font-size:15px; line-height:1.65; color:var(--xa-slate-2); max-width:72ch; margin:34px auto 0; }
.xa-focus__also a{ color:var(--xa-slate-2); text-decoration:underline; text-underline-offset:2px; }
.xa-focus__also a:hover{ color:var(--xa-teal); }

/* ============================================================
   Canva vertical pages — consolidated 2026-07-27
   These two rules previously shipped as an identical inline
   <style id="xa-vert-tweaks"> block duplicated across all 7 vertical pages
   (5455/5456/5457/5470/5471/5472/4563). Moved here so there is one copy.
   - .xa-step__time: teal duration line under each method step. Only these
     pages use the class, so it needs no scoping.
   - .xa-stats--3: verticals show 3 stats; the site default is 4 columns.
     Uses the existing .xa-stats--N modifier convention (cf. .xa-stats--2)
     instead of overriding .xa-stats globally, which would break the homepage,
     /services/ and the Canva pillar (4, 4 and 6 stats respectively).
     Must stay AFTER the responsive .xa-stats rules above to win source order,
     and keeps the original 782px breakpoint.
   ============================================================ */
.xa-step__time{ display:block; margin-top:10px; color:var(--xa-teal); font-weight:800; font-size:13px; letter-spacing:.01em; }
@media (min-width:782px){
  .xa-stats--3{ grid-template-columns:repeat(3,1fr); }
}