/*
 * Mono UI Primitives — v1.1.9.6.10
 * Canonical geometry for repeated interface elements.
 * Page-family styles may change accent colour/content, not component sizing.
 */
:root{
  --mono-ui-accent:var(--mono-accent);
  --mono-ui-accent-rgb:0,191,255;
  --mono-ui-pill-radius:999px;
  --mono-ui-eyebrow-height:32px;
  --mono-ui-pill-height:34px;
  --mono-ui-badge-height:28px;
  --mono-ui-button-height:46px;
  --mono-ui-icon-size:48px;
  --mono-ui-icon-glyph:25px;
  --mono-ui-card-radius:24px;
  --mono-ui-card-radius-prominent:28px;
  --mono-ui-control-radius:14px;
  --mono-ui-pill-gap:9px;
  --mono-ui-meta-gap:10px;
}

/* Page-family accent adapter. Shared components never depend directly on a
   service/solution-only variable, preventing missing styles on other pages. */
body[class] .mono-main{
  --mono-ui-accent:var(--mono-accent);
  --mono-ui-accent-rgb:0,191,255;
}
body.mono-service-family-page .mono-main{
  --mono-ui-accent:var(--service-accent,var(--mono-accent));
  --mono-ui-accent-rgb:var(--service-accent-rgb,0,191,255);
}
body.mono-solution-family-page .mono-main{
  --mono-ui-accent:var(--solution-accent,var(--mono-accent));
  --mono-ui-accent-rgb:var(--solution-accent-rgb,0,191,255);
}

/* Eyebrow — one size and spacing everywhere; only the dot accent changes. */
body[class] .mono-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:var(--mono-ui-eyebrow-height);
  gap:8px;
  margin:0 0 15px;
  padding:7px 12px;
  border:1px solid var(--mono-border);
  border-radius:var(--mono-ui-pill-radius);
  background:rgba(255,255,255,.035);
  color:var(--mono-muted);
  font-size:.82rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body[class] .mono-eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--mono-ui-accent);
  box-shadow:0 0 22px rgba(var(--mono-ui-accent-rgb),.72);
}

/* Kicker — text label primitive. */
body[class] .mono-kicker{
  margin:0 0 var(--mono-space-2,10px);
  color:var(--mono-ui-accent);
  font-size:.82rem;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* Outcome/proof pills. Supports div/span and ul/li renderers. */
body[class] :is(.mono-hero-proof,.mono-solution-pills,.mono-proof-pills,.mono-about-hero-proof,.mono-contact-hero-proof){
  display:flex;
  flex-wrap:wrap;
  gap:var(--mono-ui-pill-gap);
  max-width:760px;
  margin:var(--mono-space-5,24px) 0 0;
  padding:0;
  list-style:none;
}
body[class] :is(.mono-hero-proof,.mono-solution-pills,.mono-proof-pills,.mono-about-hero-proof,.mono-contact-hero-proof) > :is(span,li){
  display:inline-flex;
  align-items:center;
  min-height:var(--mono-ui-pill-height);
  gap:7px;
  padding:7px 12px;
  border:1px solid rgba(var(--mono-ui-accent-rgb),.24);
  border-radius:var(--mono-ui-pill-radius);
  background:rgba(var(--mono-ui-accent-rgb),.075);
  color:#d8f8ff;
  font-size:.80rem;
  font-weight:800;
  line-height:1.2;
}
body[class] :is(.mono-hero-proof,.mono-solution-pills,.mono-proof-pills,.mono-about-hero-proof,.mono-contact-hero-proof) > :is(span,li)::before{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--mono-ui-accent);
  box-shadow:0 0 18px rgba(var(--mono-ui-accent-rgb),.68);
}

/* Compact tags / metadata badges share one compact chip size. */
body[class] :is(.mono-tag,.mono-meta-badge){
  display:inline-flex;
  align-items:center;
  min-height:var(--mono-ui-badge-height);
  margin:0 6px 6px 0;
  padding:5px 10px;
  border:1px solid var(--mono-border);
  border-radius:var(--mono-ui-pill-radius);
  background:rgba(255,255,255,.035);
  color:var(--mono-muted);
  font-size:.78rem;
  font-weight:800;
  line-height:1.2;
}
body[class] .mono-meta-badge.is-work-type{
  border-color:rgba(var(--mono-ui-accent-rgb),.34);
  background:rgba(var(--mono-ui-accent-rgb),.08);
  color:#cdefff;
}
body[class] :is(.mono-tag,.mono-meta-badge):is(:hover,:focus-visible){
  border-color:rgba(var(--mono-ui-accent-rgb),.52);
  color:var(--mono-text);
}

/* Tag clouds are a non-status pill list, same geometry without the leading dot. */
body[class] .mono-tag-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:var(--mono-ui-pill-gap);
}
body[class] .mono-tag-cloud > span{
  display:inline-flex;
  align-items:center;
  min-height:var(--mono-ui-pill-height);
  padding:7px 12px;
  border:1px solid rgba(var(--mono-ui-accent-rgb),.22);
  border-radius:var(--mono-ui-pill-radius);
  background:rgba(255,255,255,.035);
  color:#cdefff;
  font-size:.80rem;
  font-weight:800;
  line-height:1.2;
}

/* Interactive filter chips keep their own role but use the same radius/height scale. */
body[class] .mono-filter-btn{
  min-height:38px;
  padding:8px 13px;
  border-radius:var(--mono-ui-pill-radius);
  font-size:.88rem;
  line-height:1.2;
}

/* Buttons — one control height and geometry site-wide. Page families may alter colour. */
body[class] :is(.mono-btn,.wp-block-button__link,.mono-form button){
  min-height:var(--mono-ui-button-height);
  gap:10px;
  padding:11px 20px;
  border-radius:var(--mono-ui-pill-radius);
  font-size:.90rem;
  font-weight:800;
  line-height:1.2;
}
body[class] .mono-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:var(--mono-space-5,24px);
}

/* Section heading primitive. Context layouts may change positioning, not rhythm. */
body[class] .mono-section-head{
  width:100%;
  max-width:820px;
  margin-bottom:var(--mono-section-head-gap,30px);
}
body[class] .mono-section-head-row{
  display:flex;
  max-width:none;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
}
body[class] .mono-section-head-row > div{
  min-width:0;
  max-width:800px;
}
body[class] .mono-section-head > :last-child{margin-bottom:0}

/* 1.1.9.6.5 visual-reference contextual heading measures. */
body[class] .mono-faq-section .mono-section-head{max-width:440px}
body[class] .mono-content .mono-post-faq-section .mono-section-head{max-width:100%}
body[class] .mono-about-purpose-section .mono-section-head{max-width:900px}
body[class] .mono-archive-section-head{max-width:820px}

@media(max-width:980px){
  body[class] .mono-section-head-row{display:block}
  body[class] .mono-section-head-row > div{max-width:800px}
  body[class] .mono-faq-section .mono-section-head{position:static;max-width:760px}
}

/* Metadata row primitive. */
body[class] .mono-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--mono-ui-meta-gap);
  color:var(--mono-muted);
  font-size:.90rem;
  line-height:1.4;
}
body[class] .mono-work-card-meta{margin-bottom:12px}

/* Shared icon box geometry. Page context owns only accent colour. */
body[class] .mono-icon,
body[class] .mono-system-layers .mono-icon,
body[class] .mono-about-principles .mono-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--mono-ui-icon-size);
  height:var(--mono-ui-icon-size);
  flex:0 0 var(--mono-ui-icon-size);
  border-radius:16px;
}
body[class] :is(.mono-icon,.mono-system-layers .mono-icon,.mono-about-principles .mono-icon) svg{
  width:var(--mono-ui-icon-glyph);
  height:var(--mono-ui-icon-glyph);
}

/* Primary surface geometry. Visual variants retain their own background/border colours. */
body[class] :is(
  .mono-card,
  .mono-feature-card,
  .mono-system-panel,
  .mono-testimonial-card,
  .mono-service-pillars article,
  .mono-service-process article,
  .mono-review-checks-grid article,
  .mono-review-option,
  .mono-diagnosis-card,
  .mono-scope-grid article,
  .mono-readiness-grid article,
  .mono-contact-route-card,
  .mono-cookie-category
){border-radius:var(--mono-ui-card-radius)}
body[class] :is(.mono-home-work-card,.mono-problem-card,.mono-post-card){border-radius:var(--mono-ui-card-radius-prominent)}

/* Review trust marker — intentionally a little larger than the previous 12/11px. */
body[class] .mono-review-stars{
  position:absolute;
  top:var(--mono-card-pad,24px);
  right:var(--mono-card-pad,24px);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  margin:0;
  color:#fbbc04;
  font-size:14px;
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}
body[class] .mono-review-stars span{
  width:14px;
  height:14px;
  line-height:14px;
}

@media(max-width:640px){
  :root{
    --mono-ui-card-radius:22px;
    --mono-ui-card-radius-prominent:24px;
  }
  body[class] .mono-eyebrow{min-height:30px;padding:6px 10px;font-size:.74rem;margin-bottom:14px}
  body[class] :is(.mono-hero-proof,.mono-solution-pills,.mono-proof-pills,.mono-about-hero-proof,.mono-contact-hero-proof){gap:8px;margin-top:20px}
  body[class] :is(.mono-hero-proof,.mono-solution-pills,.mono-proof-pills,.mono-about-hero-proof,.mono-contact-hero-proof) > :is(span,li){min-height:32px;padding:6px 10px;font-size:.76rem}
  body[class] :is(.mono-btn,.wp-block-button__link,.mono-form button){min-height:46px}
  body[class] .mono-review-stars{top:20px;right:20px;font-size:13px;gap:2px}
  body[class] .mono-review-stars span{width:13px;height:13px;line-height:13px}
}

/* Form controls — shared field geometry across System Review and standard forms. */
body[class] .mono-form :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border-radius:var(--mono-ui-control-radius);
  font:inherit;
  line-height:1.35;
}
body[class] .mono-form textarea{min-height:150px;resize:vertical}

/* Text links — common interaction geometry; context owns colour. */
body[class] .mono-text-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:850;
  line-height:1.3;
}

/* FAQ — one shell radius and question touch target across page families. */
body[class] .mono-faq-item{border-radius:18px}
body[class] .mono-faq-question{min-height:58px}

/* Trust strips — one outer/inner geometry regardless of page family. */
body[class] .mono-trust-strip{
  gap:14px;
  padding:14px;
  border-radius:30px;
}
body[class] .mono-trust-strip > :is(div,li){
  padding:18px;
  border-radius:20px;
}

/* Process timelines — same grid rhythm, card radius and sequence marker size. */
body[class] .mono-process-timeline{gap:var(--mono-grid-gap,18px)}
body[class] .mono-process-timeline article{border-radius:var(--mono-ui-card-radius)}
body[class] .mono-process-timeline article > span{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:15px;
}

/* Final CTA panels — one layout scale; page families keep their accent/background. */
body[class] :is(.mono-cta-panel,.mono-solution-cta){
  padding:40px;
  border-radius:34px;
}

/* Data/comparison tables — consistent shell and cell rhythm. */
body[class] .mono-table-wrap{border-radius:24px}
body[class] .mono-table :is(th,td){padding:16px 18px}

@media(max-width:640px){
  body[class] .mono-trust-strip{gap:10px;padding:10px;border-radius:22px}
  body[class] .mono-trust-strip > :is(div,li){padding:16px;border-radius:18px}
  body[class] :is(.mono-cta-panel,.mono-solution-cta){padding:24px;border-radius:26px}
  body[class] .mono-table :is(th,td){padding:14px}
}


/* --------------------------------------------------------------------------
   Page/content frame system — v1.1.9.6.10
   Every page family keeps the same outer frame, vertical rhythm and readable
   content measure. Legal and single templates no longer own a separate scale.
   -------------------------------------------------------------------------- */
:root{
  --mono-reading-width:800px;
  --mono-reading-wide:980px;
  --mono-aside-width:320px;
  --mono-breadcrumb-top:18px;
  --mono-breadcrumb-gap:34px;
}
/* One physical page frame everywhere. Inner layouts may divide this frame,
   but legal/single templates may not shrink the page shell itself. */
body[class] .mono-container,
body[class] .mono-breadcrumb{
  width:min(var(--mono-max),calc(100% - (var(--mono-page-gutter) * 2)));
  max-width:none;
  margin-inline:auto;
}
body[class] .mono-content{
  width:100%;
  max-width:var(--mono-reading-width);
}
body[class] .mono-container.mono-content,
body[class] .mono-container.mono-archive-hero-inner,
body[class] .mono-container.mono-narrow{
  max-width:none;
}
body[class] .mono-content.alignwide{max-width:var(--mono-max)}
body[class] .mono-article-layout{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,var(--mono-aside-width));
  gap:var(--mono-layout-gap);
  align-items:start;
}
body[class] .mono-article-layout > .mono-content,
body[class] .mono-single-content,
body[class] .mono-legal-copy{
  width:100%;
  max-width:none;
}
body[class] .mono-single-reading-layout,
body[class] .mono-legal-layout{
  width:min(var(--mono-max),100%);
  max-width:var(--mono-max);
  margin-inline:auto;
}

body[class] .mono-content > :is(h2,h3,h4){scroll-margin-top:110px}
body[class] .mono-content > h2{margin-top:var(--mono-space-8);margin-bottom:var(--mono-space-3)}
body[class] .mono-content > h3{margin-top:var(--mono-space-7);margin-bottom:var(--mono-space-3)}
body[class] .mono-content > h4{margin-top:var(--mono-space-6);margin-bottom:var(--mono-space-2)}
body[class] .mono-content > :first-child{margin-top:0}

/* Legal templates use the same hero grid, section scale and content width. */
body[class] .mono-legal-hero{padding-block:var(--mono-hero-top) var(--mono-hero-bottom)}
body[class] .mono-legal-hero-grid{gap:var(--mono-layout-gap)}
body[class] .mono-legal-hero h1{max-width:none;margin-top:0}
body[class] .mono-legal-meta{display:flex;gap:var(--mono-space-2) var(--mono-space-4);flex-wrap:wrap;margin-top:var(--mono-space-5)}
body[class] .mono-legal-meta span{display:inline-flex;align-items:center;gap:8px}
body[class] .mono-legal-summary{padding:var(--mono-card-pad);border-radius:var(--mono-ui-card-radius-prominent)}
body[class] .mono-legal-summary ul{list-style:none;padding:0;margin:var(--mono-space-3) 0 0;display:grid;gap:var(--mono-space-3)}
body[class] .mono-legal-summary li{position:relative;padding-left:24px;line-height:1.55}
body[class] .mono-legal-summary li:before{position:absolute;left:0;top:0}
body[class] .mono-legal-nav-wrap{margin:0 0 var(--mono-section-head-gap)}
body[class] .mono-legal-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mono-space-2);padding:var(--mono-card-pad-compact);border-radius:var(--mono-ui-card-radius)}
body[class] .mono-legal-nav strong{grid-column:1/-1;margin:0 0 var(--mono-space-1);font-size:.92rem}
body[class] .mono-legal-nav a{display:block;padding:10px 12px;border-radius:10px;font-size:.88rem;line-height:1.35}
body[class] .mono-legal-section{scroll-margin-top:112px;padding:0 0 var(--mono-space-7);margin:0 0 var(--mono-space-7)}
body[class] .mono-legal-section:last-of-type{margin-bottom:0}
body[class] .mono-legal-section h2{max-width:28ch;margin-bottom:var(--mono-space-3);}
body[class] .mono-legal-section ul{margin:var(--mono-space-4) 0 0;padding-left:22px}
body[class] .mono-legal-section li{padding-left:5px;margin:var(--mono-space-2) 0}
body[class] .mono-legal-callout{margin-top:var(--mono-space-4);padding:var(--mono-card-pad-compact);border-radius:18px}
body[class] .mono-legal-callout strong{display:block;margin-bottom:var(--mono-space-1)}
body[class] .mono-legal-callout p{margin:0}
body[class] .mono-legal-table-wrap{margin:var(--mono-space-4) 0 var(--mono-space-1);overflow-x:auto;border-radius:18px}
body[class] .mono-legal-table{min-width:680px}
body[class] .mono-legal-table :is(th,td){padding:15px 16px;text-align:left;vertical-align:top}
body[class] .mono-legal-table th{font-size:.88rem}
body[class] .mono-legal-contact-card{display:flex;align-items:center;justify-content:space-between;gap:var(--mono-layout-gap);margin-top:var(--mono-space-8);padding:var(--mono-card-pad);border-radius:var(--mono-ui-card-radius)}
body[class] .mono-legal-contact-card h2{margin-bottom:var(--mono-space-2);}
body[class] .mono-legal-contact-card p{margin:0;max-width:62ch}
body[class] .mono-legal-contact-card .mono-btn{flex:0 0 auto;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center}

/* Footer legal row is one interactive component, including Cookie settings. */
body[class] .mono-footer-legal{display:inline-flex;flex-wrap:wrap;gap:var(--mono-space-3);align-items:center}
body[class] .mono-footer-legal :is(.mono-footer-legal-link,a,.mono-cookie-settings-link){
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(159,207,232,.76);
  font:inherit;
  cursor:pointer;
  transition:color .18s ease;
}
body[class] .mono-footer-legal :is(.mono-footer-legal-link,a,.mono-cookie-settings-link)::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:7px;
  height:1px;
  background:var(--mono-accent);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .18s ease;
}
body[class] .mono-footer-legal :is(.mono-footer-legal-link,a,.mono-cookie-settings-link):is(:hover,:focus-visible){color:var(--mono-text)}
body[class] .mono-footer-legal :is(.mono-footer-legal-link,a,.mono-cookie-settings-link):is(:hover,:focus-visible)::after{transform:scaleX(1)}

@media(max-width:980px){
  body[class] .mono-article-layout{grid-template-columns:1fr}
  body[class] .mono-sidebar{position:static}
  body[class] .mono-legal-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  body[class] .mono-legal-meta{display:grid;gap:var(--mono-space-2);margin-top:var(--mono-space-4)}
  body[class] .mono-legal-summary{padding:var(--mono-card-pad);border-radius:var(--mono-ui-card-radius)}
  body[class] .mono-legal-nav-wrap{margin-bottom:var(--mono-section-head-gap)}
  body[class] .mono-legal-mobile-nav{border-radius:var(--mono-ui-control-radius)}
  body[class] .mono-legal-mobile-nav summary{padding:14px 16px}
  body[class] .mono-legal-mobile-nav nav{display:grid;gap:4px;padding:0 10px 10px}
  body[class] .mono-legal-mobile-nav a{display:block;padding:10px 8px;border-radius:8px;font-size:.9rem;line-height:1.35}
  body[class] .mono-legal-section{padding-bottom:var(--mono-space-6);margin-bottom:var(--mono-space-6)}
  body[class] .mono-legal-section h2{margin-bottom:var(--mono-space-3);}
  body[class] .mono-legal-callout{padding:var(--mono-card-pad-compact);border-radius:15px}
  body[class] .mono-legal-table tbody{gap:var(--mono-space-3)}
  body[class] .mono-legal-table tr{border-radius:15px}
  body[class] .mono-legal-table td{padding:12px 14px;font-size:.92rem}
  body[class] .mono-legal-table td:before{margin-bottom:4px;font-size:.76rem}
  body[class] .mono-legal-contact-card{display:block;margin-top:var(--mono-space-7);padding:var(--mono-card-pad);border-radius:var(--mono-ui-card-radius)}
  body[class] .mono-legal-contact-card .mono-btn{width:100%;margin-top:var(--mono-space-4)}
  body[class] .mono-footer-legal{gap:0 var(--mono-space-4)}
}


/* --------------------------------------------------------------------------
   Canonical breadcrumb + hero shell — v1.1.9.6.10
   Breadcrumb-led pages render the breadcrumb inside the hero background.
   Every page uses the same top offset, content gap and outer 1180px frame.
   -------------------------------------------------------------------------- */
body[class] .mono-hero-has-breadcrumb{
  padding-top:0!important;
  padding-bottom:var(--mono-hero-bottom)!important;
}
body[class] .mono-hero-has-breadcrumb > .mono-breadcrumb{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-height:24px;
  margin:0 auto!important;
  padding:var(--mono-breadcrumb-top) 0 var(--mono-breadcrumb-gap)!important;
}
body[class] .mono-hero-has-breadcrumb > .mono-container{
  position:relative;
  z-index:2;
}
/* Archive breadcrumb is no longer a separate spacing system. */
body[class] .mono-archive-hero-has-breadcrumb > .mono-archive-breadcrumb{
  margin:0 auto!important;
  padding:var(--mono-breadcrumb-top) 0 var(--mono-breadcrumb-gap)!important;
}
@media(max-width:980px){
  body[class] .mono-article-layout{grid-template-columns:1fr}
}
@media(max-width:640px){
  :root{
    --mono-breadcrumb-top:14px;
    --mono-breadcrumb-gap:24px;
  }
  body[class] .mono-hero-has-breadcrumb > .mono-breadcrumb{
    min-height:22px;
    font-size:.82rem;
  }
}


/* ==========================================================================
   Mono 1.2.0.1 — selected Work + single Insight frame fixes
   ========================================================================== */
/* Single Insight uses the exact same physical 1180px site frame as the rest of
   Mono. WordPress/Gutenberg wide/full alignments are also contained inside the
   article column instead of escaping to viewport width. */
body.mono-page-slug-insight-single .mono-insight-single-frame{
  width:min(var(--mono-max),calc(100% - (var(--mono-page-gutter) * 2)));
  max-width:var(--mono-max);
  margin-inline:auto;
}
body.mono-page-slug-insight-single .mono-insight-single-body .mono-article-layout{
  width:min(var(--mono-max),calc(100% - (var(--mono-page-gutter) * 2)));
  max-width:var(--mono-max);
  margin-inline:auto;
}
body.mono-page-slug-insight-single .mono-content > :is(.alignwide,.alignfull),
body.mono-page-slug-insight-single .mono-content :is(.wp-block-group.alignwide,.wp-block-group.alignfull){
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
}
@media(max-width:640px){
  body.mono-page-slug-insight-single .mono-insight-single-frame,
  body.mono-page-slug-insight-single .mono-insight-single-body .mono-article-layout{
    width:min(var(--mono-max),calc(100% - (var(--mono-page-gutter) * 2)));
  }
}