.elementor-kit-8907{--e-global-color-primary:#0F2A44;--e-global-color-secondary:#0A1826;--e-global-color-text:#37414B;--e-global-color-accent:#C41320;--e-global-color-b17ground:#FFFFFF;--e-global-color-b17wash:#F4F5F7;--e-global-color-b17rule:#DFE3E8;--e-global-color-b17ink:#0A1826;--e-global-color-b17body:#37414B;--e-global-color-b17muted:#5D6B7A;--e-global-color-b17plate:#0F2A44;--e-global-color-b17platedeep:#0A1826;--e-global-color-b17ruledark:#1B3A57;--e-global-color-b17ondark:#FFFFFF;--e-global-color-b17ondark2:#8FA8BC;--e-global-color-b17onplate2:#C6D5E4;--e-global-color-b17red:#C41320;--e-global-color-b17redhover:#A81020;--e-global-color-b17redpress:#8E0D17;--e-global-color-b17redondark:#E8635A;--e-global-color-b17redondarkhover:#F0918A;--e-global-typography-primary-font-family:"Plus Jakarta Sans";--e-global-typography-primary-font-size:56px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:1.04em;--e-global-typography-primary-letter-spacing:-0.03em;--e-global-typography-secondary-font-family:"Plus Jakarta Sans";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.18em;--e-global-typography-secondary-letter-spacing:-0.02em;--e-global-typography-text-font-family:"Plus Jakarta Sans";--e-global-typography-text-font-size:16.5px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"IBM Plex Mono";--e-global-typography-accent-font-size:11px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.14em;--e-global-typography-b17h1-font-family:"Plus Jakarta Sans";--e-global-typography-b17h1-font-size:44px;--e-global-typography-b17h1-font-weight:800;--e-global-typography-b17h1-line-height:1.06em;--e-global-typography-b17h1-letter-spacing:-0.028em;--e-global-typography-b17h2-font-family:"Plus Jakarta Sans";--e-global-typography-b17h2-font-size:32px;--e-global-typography-b17h2-font-weight:800;--e-global-typography-b17h2-line-height:1.1em;--e-global-typography-b17h2-letter-spacing:-0.025em;--e-global-typography-b17h3-font-family:"Plus Jakarta Sans";--e-global-typography-b17h3-font-size:24px;--e-global-typography-b17h3-font-weight:700;--e-global-typography-b17h3-line-height:1.18em;--e-global-typography-b17h3-letter-spacing:-0.02em;--e-global-typography-b17h4-font-family:"Plus Jakarta Sans";--e-global-typography-b17h4-font-size:20px;--e-global-typography-b17h4-font-weight:700;--e-global-typography-b17h4-line-height:1.25em;--e-global-typography-b17h4-letter-spacing:-0.015em;--e-global-typography-b17h5-font-family:"Plus Jakarta Sans";--e-global-typography-b17h5-font-size:17px;--e-global-typography-b17h5-font-weight:700;--e-global-typography-b17h5-line-height:1.3em;--e-global-typography-b17h5-letter-spacing:-0.01em;--e-global-typography-b17deck-font-family:"Plus Jakarta Sans";--e-global-typography-b17deck-font-size:18px;--e-global-typography-b17deck-font-weight:400;--e-global-typography-b17deck-line-height:1.7em;--e-global-typography-b17meta-font-family:"IBM Plex Mono";--e-global-typography-b17meta-font-size:11px;--e-global-typography-b17meta-font-weight:500;--e-global-typography-b17meta-text-transform:uppercase;--e-global-typography-b17meta-line-height:1.4em;--e-global-typography-b17meta-letter-spacing:0.12em;}.elementor-kit-8907 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1076px;}.e-con{--container-max-width:1076px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-8907{--e-global-typography-primary-font-size:44px;--e-global-typography-secondary-font-size:22px;--e-global-typography-b17h1-font-size:36px;--e-global-typography-b17h2-font-size:28px;--e-global-typography-b17h3-font-size:22px;--e-global-typography-b17h4-font-size:19px;--e-global-typography-b17deck-font-size:17.5px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-8907{--e-global-typography-primary-font-size:34px;--e-global-typography-secondary-font-size:20px;--e-global-typography-text-font-size:16px;--e-global-typography-b17h1-font-size:30px;--e-global-typography-b17h2-font-size:24px;--e-global-typography-b17h3-font-size:20px;--e-global-typography-b17h4-font-size:18px;--e-global-typography-b17deck-font-size:17px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   XPRO HEADER NAV - current page weight. Color and the 3px red
   underline come from the nav-menu widget's own active controls;
   the weight bump is the one thing its UI cannot do.
   Both ancestor spellings covered so About stays lit while a
   team member's child page is open.
   ========================================================= */
.xpro-theme-builder-header .elementor-item-active,
.xpro-theme-builder-header .current-menu-item > a,
.xpro-theme-builder-header .current-menu-ancestor > a,
.xpro-theme-builder-header .current-page-ancestor > a,
.xpro-theme-builder-header .current_page_ancestor > a {
  font-weight: 800;
  color: var(--e-global-color-b17ink);
}

/* =========================================================
   B17 V2 BASE - design system v2 (direction 2d), 2026-08-16.
   Only what Elementor's UI cannot reach. Colors reference the
   global variables so Site Settings rebranding still works.
   ========================================================= */

/* base type: bare text outside styled widgets must not fall back
   to Astra's DM Sans */
body {
  font-family: var(--e-global-typography-text-font-family), system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.7;
  color: var(--e-global-color-text);
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--e-global-typography-primary-font-family), system-ui, sans-serif;
  color: var(--e-global-color-b17ink);
}

/* links (kit.css defect fixes folded in: buttons exempted below) */
.b17-content a {
  color: var(--e-global-color-b17red);
  text-decoration: underline;
  text-decoration-color: rgba(196,19,32,.45);
  text-underline-offset: 3px;
}
.b17-content a:hover { color: var(--e-global-color-b17redpress); text-decoration-color: var(--e-global-color-b17redpress); }
.b17-content a:visited { color: var(--e-global-color-b17redpress); }
.b17-dark.b17-content a, .b17-dark .b17-content a { color: var(--e-global-color-b17redondark); text-decoration-color: rgba(232,99,90,.5); }
.b17-dark.b17-content a:hover, .b17-dark .b17-content a:hover { color: var(--e-global-color-b17redondarkhover); }

/* buttons never inherit link styling, any ground, any state */
a.elementor-button, a.elementor-button:hover, a.elementor-button:focus,
a.elementor-button:active, a.elementor-button:visited { text-decoration: none; }
.elementor-button:active { background-color: var(--e-global-color-b17redpress); }

/* focus, never removed */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible,
.elementor-button:focus-visible { outline: 3px solid var(--e-global-color-b17ink); outline-offset: 2px; }
.b17-dark a:focus-visible,
.b17-dark .elementor-button:focus-visible { outline: 3px solid var(--e-global-color-b17redondark); }

/* =========================================================
   B17 COMPONENTS - states and rich-text rules the Elementor UI
   cannot reach. Layout stays in the containers.
   ========================================================= */

/* type scale for headings inside rich-text widgets (kit.css values) */
h1{font-weight:800;font-size:44px;line-height:1.06;letter-spacing:-0.028em;}
h2{font-weight:800;font-size:32px;line-height:1.10;letter-spacing:-0.025em;}
h3{font-weight:700;font-size:24px;line-height:1.18;letter-spacing:-0.02em;}
h4{font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-0.015em;}
h5{font-weight:700;font-size:17px;line-height:1.30;letter-spacing:-0.01em;}
h6{font-weight:700;font-size:15px;line-height:1.35;}
@media (max-width:1024px){h1{font-size:36px}h2{font-size:28px}h3{font-size:22px}h4{font-size:19px}}
@media (max-width:767px){h1{font-size:30px}h2{font-size:24px}h3{font-size:20px}h4{font-size:18px}}

/* hero ground pattern, verbatim from direction 2d */
.b17-hero-pattern{background-image:repeating-linear-gradient(112deg,rgba(235,242,250,.08) 0 2px,rgba(235,242,250,0) 2px 26px);}

/* cards: hover states cross parent/child, unreachable per-widget */
.b17-card{transition:border-color 120ms ease-out;}
.b17-card:hover{border-color:var(--e-global-color-b17ink);}
.b17-card:hover .card-title-en .elementor-heading-title,
.b17-card:hover .card-title-en{color:var(--e-global-color-b17red);}
.team-card:hover h4,.team-card:hover .elementor-heading-title{color:var(--e-global-color-b17red);}

/* episode rows */
.ep-row{transition:background-color 120ms ease-out;}
.ep-row:hover{background:var(--e-global-color-b17wash);}
.ep-row:hover .ep-row__title .elementor-heading-title,
.ep-row:hover .ep-row__title{color:var(--e-global-color-b17red);}

/* search + filter (markup lives in the sanctioned custom-code widgets) */
.search-bar{margin-bottom:32px;max-width:560px;}
.search-count{margin:8px 0 0;font-family:var(--e-global-typography-accent-font-family),monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--e-global-color-b17muted);}
.b17-field-label{display:block;font-family:var(--e-global-typography-accent-font-family),monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--e-global-color-b17body);margin-bottom:8px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;}
button.chip{font-family:var(--e-global-typography-text-font-family),sans-serif;font-size:14px;font-weight:600;line-height:1;padding:12px 14px;min-height:44px;border:1px solid var(--e-global-color-b17rule);border-radius:0;background:var(--e-global-color-b17ground);color:var(--e-global-color-b17body);cursor:pointer;transition:background-color 120ms ease-out,border-color 120ms ease-out;}
button.chip:hover{border-color:var(--e-global-color-b17ink);color:var(--e-global-color-b17ink);}
button.chip[aria-pressed="true"]{background:var(--e-global-color-b17plate);border-color:var(--e-global-color-b17plate);color:#fff;}
.no-results{margin-top:24px;color:var(--e-global-color-b17muted);}
[hidden]{display:none !important;}

/* form fields (kit.css verbatim, tokens swapped; covers WPForms + search) */
input[type=text],input[type=email],input[type=tel],input[type=search],textarea,select{font-family:var(--e-global-typography-text-font-family),sans-serif;font-size:16.5px;color:var(--e-global-color-b17ink);background:var(--e-global-color-b17ground);border:1px solid var(--e-global-color-b17rule);border-radius:0;padding:12px 14px;min-height:48px;width:100%;}
input::placeholder,textarea::placeholder{color:var(--e-global-color-b17muted);}
input:hover,textarea:hover,select:hover{border-color:#B9C1CA;}
input:focus,textarea:focus,select:focus{border-color:var(--e-global-color-b17plate);outline:none;box-shadow:0 0 0 3px rgba(196,19,32,.30);}

/* WPForms: labels, submit as primary button, paired fields */
.wpforms-form .wpforms-field-label{font-family:var(--e-global-typography-accent-font-family),monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--e-global-color-b17body);margin-bottom:8px;font-weight:500;}
.wpforms-form button[type=submit]{font-family:var(--e-global-typography-text-font-family),sans-serif;font-weight:600;font-size:15px;line-height:1;padding:14px 22px;min-height:48px;border-radius:0;border:0;background:var(--e-global-color-b17red);color:#fff;transition:background-color 120ms ease-out;cursor:pointer;}
.wpforms-form button[type=submit]:hover{background:var(--e-global-color-b17redhover);color:#fff;}
.wpforms-form button[type=submit]:active{background:var(--e-global-color-b17redpress);}
.wpforms-form .wpforms-field-container{display:flex;flex-wrap:wrap;column-gap:20px;}
.wpforms-form .wpforms-field{flex:1 1 100%;}
.wpforms-form [id$="field_0-container"],.wpforms-form [id$="field_1-container"],.wpforms-form [id$="field_2-container"],.wpforms-form [id$="field_3-container"]{flex:1 1 calc(50% - 10px);}
@media (max-width:767px){.wpforms-form [id$="field_0-container"],.wpforms-form [id$="field_1-container"],.wpforms-form [id$="field_2-container"],.wpforms-form [id$="field_3-container"]{flex-basis:100%;}}

/* objectives rail items (rich-text pairs) */
.obj-item .obj-en{display:block;font-weight:700;color:var(--e-global-color-b17ondark);margin:0;}
.obj-item .obj-chin{display:block;font-size:14.5px;color:var(--e-global-color-b17ondark2);margin:2px 0 0;}

/* placeholders + misc */
.photo--placeholder{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;border:1px solid var(--e-global-color-b17rule);color:var(--e-global-color-b17muted);background:var(--e-global-color-b17wash);width:100%;}
.contact-direct{border-top:1px solid var(--e-global-color-b17rule);padding-top:20px;font-size:15px;}
.contact-direct a{font-weight:600;text-decoration:none;}
.contact-direct a:hover{text-decoration:underline;}
/* 17. The 62ch measure left the last line of a three-line deck holding a
   single word ("...its full episode list." on /topics/).
   text-wrap:pretty was tried first as the orphan-specific tool and
   MEASURED AS INEFFECTIVE here: 739/787/104px, the orphan intact.
   balance evens the block instead: 550/516/565px. Same idiom the hero
   already uses via .ta-center. Unsupported browsers ignore it and get
   the previous rendering, so there is no downside. */
.deck-62ch p{max-width:62ch;margin:0;text-wrap:balance;}
.ta-center p{text-align:center;margin-left:auto;margin-right:auto;max-width:42em;text-wrap:balance;}
.fw-600 p{font-weight:600;margin:0;}
.article h2{margin-top:48px;}
.article h3{margin-top:32px;}
.article p{max-width:68ch;}

/* =========================================================
   B17 TYPE UTILITIES - every one resolves to a Global Font
   variable, so changing a Global Font in Site Settings still
   rebrands the whole site. Elementor's per-widget __globals__
   does not emit CSS from the file generator on this install,
   which is why type is applied by class instead.
   ========================================================= */
.b17-t-display, .b17-t-display .elementor-heading-title,
.b17-t-h1, .b17-t-h1 .elementor-heading-title,
.b17-t-h2, .b17-t-h2 .elementor-heading-title,
.b17-t-h3, .b17-t-h3 .elementor-heading-title,
.b17-t-h4, .b17-t-h4 .elementor-heading-title,
.b17-t-h5, .b17-t-h5 .elementor-heading-title,
.b17-t-label, .b17-t-label .elementor-heading-title,
.b17-t-meta, .b17-t-meta .elementor-heading-title { margin:0; }

.b17-t-display, .b17-t-display .elementor-heading-title{font-family:var(--e-global-typography-primary-font-family),system-ui,sans-serif;font-size:var(--e-global-typography-primary-font-size);font-weight:var(--e-global-typography-primary-font-weight);line-height:var(--e-global-typography-primary-line-height);letter-spacing:var(--e-global-typography-primary-letter-spacing);}
.b17-t-h1, .b17-t-h1 .elementor-heading-title{font-family:var(--e-global-typography-b17h1-font-family),system-ui,sans-serif;font-size:var(--e-global-typography-b17h1-font-size);font-weight:var(--e-global-typography-b17h1-font-weight);line-height:var(--e-global-typography-b17h1-line-height);letter-spacing:var(--e-global-typography-b17h1-letter-spacing);}
.b17-t-h2, .b17-t-h2 .elementor-heading-title{font-family:var(--e-global-typography-b17h2-font-family),system-ui,sans-serif;font-size:var(--e-global-typography-b17h2-font-size);font-weight:var(--e-global-typography-b17h2-font-weight);line-height:var(--e-global-typography-b17h2-line-height);letter-spacing:var(--e-global-typography-b17h2-letter-spacing);}
.b17-t-h3, .b17-t-h3 .elementor-heading-title{font-family:var(--e-global-typography-b17h3-font-family),system-ui,sans-serif;font-size:var(--e-global-typography-b17h3-font-size);font-weight:var(--e-global-typography-b17h3-font-weight);line-height:var(--e-global-typography-b17h3-line-height);letter-spacing:var(--e-global-typography-b17h3-letter-spacing);}
.b17-t-h4, .b17-t-h4 .elementor-heading-title{font-family:var(--e-global-typography-b17h4-font-family),system-ui,sans-serif;font-size:var(--e-global-typography-b17h4-font-size);font-weight:var(--e-global-typography-b17h4-font-weight);line-height:var(--e-global-typography-b17h4-line-height);letter-spacing:var(--e-global-typography-b17h4-letter-spacing);}
.b17-t-h5, .b17-t-h5 .elementor-heading-title{font-family:var(--e-global-typography-b17h5-font-family),system-ui,sans-serif;font-size:var(--e-global-typography-b17h5-font-size);font-weight:var(--e-global-typography-b17h5-font-weight);line-height:var(--e-global-typography-b17h5-line-height);letter-spacing:var(--e-global-typography-b17h5-letter-spacing);}
.b17-t-label, .b17-t-label .elementor-heading-title{font-family:var(--e-global-typography-accent-font-family),ui-monospace,monospace;font-size:var(--e-global-typography-accent-font-size);font-weight:var(--e-global-typography-accent-font-weight);line-height:var(--e-global-typography-accent-line-height);letter-spacing:var(--e-global-typography-accent-letter-spacing);text-transform:uppercase;}
.b17-t-meta, .b17-t-meta .elementor-heading-title{font-family:var(--e-global-typography-b17meta-font-family),ui-monospace,monospace;font-size:var(--e-global-typography-b17meta-font-size);font-weight:var(--e-global-typography-b17meta-font-weight);line-height:var(--e-global-typography-b17meta-line-height);letter-spacing:var(--e-global-typography-b17meta-letter-spacing);text-transform:uppercase;}
.b17-t-deck, .b17-t-deck p{font-family:var(--e-global-typography-b17deck-font-family),system-ui,sans-serif;font-size:var(--e-global-typography-b17deck-font-size);font-weight:var(--e-global-typography-b17deck-font-weight);line-height:var(--e-global-typography-b17deck-line-height);}
.b17-t-body, .b17-t-body p{font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;font-size:var(--e-global-typography-text-font-size);font-weight:var(--e-global-typography-text-font-weight);line-height:var(--e-global-typography-text-line-height);}
.b17-t-body p:last-child, .b17-t-deck p:last-child{margin-bottom:0;}

/* mono is Latin-only (IBM Plex Mono lacks U+1E6C/U+1E6D): never set Chin text
   in a label or meta slot. Falam titles use the sans stack below. */
.b17-t-falam, .b17-t-falam .elementor-heading-title{font-family:var(--e-global-typography-text-font-family),system-ui,sans-serif;font-weight:600;}

/* =========================================================
   B17 LAYOUT - ported from the static build's site.css so the
   live site matches the mockup exactly.

   Two scoping rules learned the hard way:
   1. Elementor defines --e-global-* on BODY, not :root. Aliasing
      them at :root yields an invalid var(), which kills the whole
      declaration (border became 0px none).
   2. Elementor's own .e-con sets flex-basis, so grid children must
      be targeted as `.grid > .e-con` (0,2,0) to win.
   ========================================================= */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-14:56px;
  --space-16:72px; --space-20:96px; --space-24:128px;
}
body{
  --ground:var(--e-global-color-b17ground); --wash:var(--e-global-color-b17wash);
  --rule:var(--e-global-color-b17rule); --ink:var(--e-global-color-b17ink);
  --body:var(--e-global-color-b17body); --muted:var(--e-global-color-b17muted);
  --plate:var(--e-global-color-b17plate); --plate-deep:var(--e-global-color-b17platedeep);
  --rule-dark:var(--e-global-color-b17ruledark);
  --on-dark:var(--e-global-color-b17ondark); --on-dark-2:var(--e-global-color-b17ondark2);
  --on-plate-2:var(--e-global-color-b17onplate2);
  --red:var(--e-global-color-b17red); --red-hover:var(--e-global-color-b17redhover);
  --red-press:var(--e-global-color-b17redpress);
  --red-on-dark:var(--e-global-color-b17redondark);
}

/* grids: flush outer edges via a calc() basis Elementor cannot express */
.card-grid, .team-grid, .vision-grid, .ep-grid { flex-wrap:wrap; }
.card-grid, .team-grid, .vision-grid { gap:var(--space-6); }
.ep-grid { gap:var(--space-8) var(--space-6); }
.card-grid > .e-con, .team-grid > .e-con { flex:0 0 calc((100% - 2 * var(--space-6)) / 3); }
.vision-grid > .e-con { flex:0 0 calc((100% - var(--space-6)) / 2); }
.ep-grid > .e-con { flex:0 0 calc((100% - var(--space-6)) / 2); }
.team-grid.team-grid--mini > .e-con { flex:0 0 calc((100% - 3 * var(--space-6)) / 4); }

/* topic card */
.b17-card { background:var(--ground); border:1px solid var(--rule);
  transition:border-color 120ms ease-out; }
.b17-card:hover { border-color:var(--ink); }
.b17-card img { display:block; width:100%; }
.b17-card__body { padding:var(--space-5); }
/* Hover colour must out-specify Elementor's per-widget colour rule, which is
   also (0,4,0) and loads after the kit stylesheet. The leading `body` adds a
   type .elementor-kit-8907 and settles it without !important. */
body .b17-card:hover .card-title-en .elementor-heading-title { color:var(--red); }
body .team-card:hover .elementor-heading-title { color:var(--red); }
body .ep-row:hover { background:var(--wash); }
body .ep-row:hover .ep-row__title .elementor-heading-title { color:var(--red); }
body .ep-row { transition:background-color 120ms ease-out; }

/* lists */
.ep-rows, .means-list { display:flex; flex-direction:column; }
.mission-list > .e-con { border-bottom:1px solid var(--rule-dark); }
.mission-list > .e-con:first-child { border-top:1px solid var(--rule-dark); }

@media (max-width:1024px){
  .card-grid, .team-grid { gap:var(--space-5); }
  .card-grid > .e-con, .team-grid > .e-con { flex:0 0 calc((100% - var(--space-5)) / 2); }
  .team-grid.team-grid--mini > .e-con { flex:0 0 calc((100% - var(--space-5)) / 2); }
}
@media (max-width:767px){
  .card-grid > .e-con, .team-grid > .e-con,
  .ep-grid > .e-con, .vision-grid > .e-con { flex:0 0 100%; }
  .team-grid--mini { gap:var(--space-5); }
  .team-grid.team-grid--mini > .e-con { flex:0 0 calc((100% - var(--space-5)) / 2); }
}
/* A body column sitting beside a fixed-width number column must shrink beside a fixed number column.
   Elementor gives every e-con-full width:100%, so the pair overflowed its row
   by exactly the number column's width at tablet. */
.means-list > .e-con > .e-con + .e-con,
.ep-row > .e-con + .e-con { flex:1 1 0; min-width:0; width:auto; }
/* The fixed number column, pinned in CSS. Elementor did not emit the container
   width control here (--width stayed 100%), so the number cell swallowed the
   row and the title cell collapsed to 0. Values match the mockup's
   .ep-row__num (40px) and .means-num (48px). */
.ep-row > .e-con:first-child { flex:0 0 40px; width:40px; }
.means-list > .e-con > .e-con:first-child { flex:0 0 48px; width:48px; }

/* =========================================================
   B17 VERTICAL RHYTHM - 2026-08-17
   Elementor's own heading rules outrank the kit's type
   utilities, so every h3/h4/h6 heading widget rendered at
   line-height 1 and the type scale's leading was lost:
     .elementor-widget-heading h6.elementor-heading-title{line-height:1em}  (0,2,1)
     .elementor-heading-title{line-height:1}                                (0,1,0)
   beat the kit's .b17-t-meta .elementor-heading-title       (0,2,0).
   Third instance of this specificity trap on this site; the
   first two were a:hover vs .b17-btn. Selectors below are
   (0,3,0) and (0,3,1), and they re-assert the same Global
   Font variables, so Site Settings still rebrands the site.
   h1/h2 are deliberately NOT included: they render at 1.2 and
   the scale wants 1.06/1.10, which would tighten them.
   ========================================================= */
.elementor-widget.b17-t-h3 .elementor-heading-title{line-height:var(--e-global-typography-b17h3-line-height);}
.elementor-widget.b17-t-h4 .elementor-heading-title{line-height:var(--e-global-typography-b17h4-line-height);}
.elementor-widget.b17-t-h5 .elementor-heading-title{line-height:var(--e-global-typography-b17h5-line-height);}
.elementor-widget.b17-t-label .elementor-heading-title{line-height:var(--e-global-typography-accent-line-height);}
.elementor-widget.b17-t-meta .elementor-heading-title{line-height:var(--e-global-typography-b17meta-line-height);}

/* Heading widgets carrying no b17-t utility (the card Falam lines and the
   topic card titles) fall back to the kit's own tag scale, not Elementor's 1. */
.elementor-widget-heading:not([class*="b17-t-"]) h3.elementor-heading-title{line-height:1.18;}
.elementor-widget-heading:not([class*="b17-t-"]) h4.elementor-heading-title{line-height:1.25;}
.elementor-widget-heading:not([class*="b17-t-"]) h5.elementor-heading-title{line-height:1.30;}
.elementor-widget-heading:not([class*="b17-t-"]) h6.elementor-heading-title{line-height:1.35;}

/* =========================================================
   B17 HEADER + MOBILE - 2026-08-17
   1. The nav underline was pinned to the anchor padding box
   (left:0; width:100%), so it ran 28px wider than the label.
   Direction 2d draws it on an item with no side padding, i.e.
   exactly text width. Inset by the nav's own 14px padding.
   Elementor's pointer rule is (0,2,1); this is (0,3,1).
   ========================================================= */
body .xpro-theme-builder-header .e--pointer-underline .elementor-item::after,
body .xpro-theme-builder-header .e--pointer-double-line .elementor-item::after,
body .xpro-theme-builder-header .e--pointer-double-line .elementor-item::before,
body .xpro-theme-builder-header .e--pointer-overline .elementor-item::before{left:14px;right:14px;width:auto;}

/* 2. Social marks: YouTube keeps the house red, Facebook takes a
   brand blue. #0B5FCE is a deliberate, user-approved exception to
   'red is the only accent' (2026-08-17), because a Facebook mark in
   red misreads. Marked b17-fb-blue; used nowhere else on the site. */
/* Elementor's own .elementor-9086 .elementor-element.elementor-element-b17hdr04
   .elementor-social-icon:hover svg is (0,5,1), so a (0,3,2) .elementor-kit-8907 lost to it
   and Facebook stayed red. These are (0,5,2). YouTube needs no rule: Elementor
   already resolves it to the house red. */
body .elementor-9086 .elementor-element.elementor-element-b17hdr04 .elementor-social-icon-facebook-f:hover svg,
body .elementor-9086 .elementor-element.elementor-element-b17hdr04 .elementor-social-icon-facebook-f:focus-visible svg{fill:#0B5FCE;}

/* 3. Follow band buttons live in footer 9087 and only shifted to
   --wash on hover. Give each its own brand colour. The footer's own
   rule is (0,5,0); these are (0,5,1). */
/* Filled on hover and press, white label and mark. The kit's
   .elementor-button:active red-press rule is (0,1,1); these are (0,5,1). */
body .elementor-9087 .elementor-element .elementor-button[href*="youtube.com"]:hover,
body .elementor-9087 .elementor-element .elementor-button[href*="youtube.com"]:focus-visible,
body .elementor-9087 .elementor-element .elementor-button[href*="youtube.com"]:active{background-color:var(--e-global-color-b17red);border-color:var(--e-global-color-b17red);color:#fff;}
body .elementor-9087 .elementor-element .elementor-button[href*="facebook.com"]:hover,
body .elementor-9087 .elementor-element .elementor-button[href*="facebook.com"]:focus-visible,
body .elementor-9087 .elementor-element .elementor-button[href*="facebook.com"]:active{background-color:#0B5FCE;border-color:#0B5FCE;color:#fff;}
body .elementor-9087 .elementor-element .elementor-button:hover svg,
body .elementor-9087 .elementor-element .elementor-button:focus-visible svg,
body .elementor-9087 .elementor-element .elementor-button:active svg{fill:#fff;}

@media (max-width:767px){
  /* 4. The header container stayed a column, stacking logo (40px),
     hamburger (43px) and social icons (48px) into a 156px bar. One row
     instead: logo left, hamburger right. The icons leave the bar and
     remain in the Follow band and the footer on every page. */
  body .xpro-theme-builder-header .elementor-element.elementor-element-b17hdr01{flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:var(--space-4);position:relative;}
  body .xpro-theme-builder-header .elementor-element.elementor-element-b17hdr02,
  body .xpro-theme-builder-header .elementor-element.elementor-element-b17hdr03{width:auto;flex:0 0 auto;}
  body .xpro-theme-builder-header .elementor-element.elementor-element-b17hdr04{display:none;}
  /* the revealed panel spans the bar, not the toggle's 99px */
  body .xpro-theme-builder-header .elementor-element-b17hdr03{position:static;}
  body .xpro-theme-builder-header .elementor-element-b17hdr03 .elementor-nav-menu--dropdown{left:0;right:0;width:auto;}

  /* 5. kit.css line 175 verbatim, never ported into the kit. The button
     holders are column flexes with justify-content:center, which centres
     on the vertical axis and does nothing horizontally, so hero, Follow
     and About-the-Ministry buttons sat flush left at intrinsic width. */
  body .elementor-button{width:100%;}
  body .elementor-button-wrapper{width:100%;}
}

@media (max-width:767px){
  /* 4b. b17hdr01 is e-con-boxed, which wraps its children in
     .e-con-inner, so the flex parent is the inner, not the container.
     Styling the container alone centred the logo over the toggle. */
  body .xpro-theme-builder-header .elementor-element-b17hdr01 > .e-con-inner{
    flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:var(--space-4);}

  /* 5b. Some button WIDGETS are shrink-wrapped flex items (114px,
     175px), so width:100% on the button only filled the narrow
     wrapper. Widen the widget itself. */
  body .elementor-widget-button{width:100%;}
}

@media (max-width:767px){
  /* 4c. The dropdown is position:static inside the now-narrow nav
     widget, so it rendered 98.6px wide pinned right and left/right had
     no effect. Float it across the bar. b17hdr01 is position:relative
     and b17hdr03 is position:static, so this resolves to the bar. */
  body .xpro-theme-builder-header .elementor-element-b17hdr03 .elementor-nav-menu--dropdown{
    position:absolute;top:100%;left:0;right:0;width:auto;z-index:99;
    border-top:1px solid var(--e-global-color-b17rule);}
  body .xpro-theme-builder-header .elementor-element-b17hdr03 .elementor-nav-menu--dropdown a.elementor-item{
    min-height:56px;display:flex;align-items:center;}

  /* 4d. The toggle was a 33px hit area. The rest of the site uses 48px
     and phones are the primary surface, so bring it to 48. */
  body .xpro-theme-builder-header .elementor-menu-toggle{width:48px;height:48px;}

  /* 5c. kit.css sets min-height:48px on every button; buttons were
     rendering 43-45px. Restore the floor, which is also the touch-target
     minimum on a phone-first site. */
  body .elementor-button{min-height:48px;}
}

@media (max-width:767px){
  /* 4e. Elementor paints the active dropdown row a default grey
     (#3F444B), which is off-palette. kit.css marks the current page in
     the mobile nav with a 3px red bar on the left edge instead. */
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown a.elementor-item{position:relative;border-bottom:1px solid var(--e-global-color-b17rule);}
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{background-color:var(--e-global-color-b17wash);color:var(--e-global-color-b17ink);}
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active::after{left:0;right:auto;top:0;bottom:0;width:3px;height:auto;background-color:var(--e-global-color-b17red);opacity:1;}
}

@media (max-width:767px){
  /* 5d. The WPForms submit is a plain button, not an Elementor button
     widget, so the full-width rule missed it and it stayed 150px. The
     static build has it full width at 335 like every other button. */
  body .wpforms-form button[type=submit]{width:100%;min-height:48px;}
}

/* 6. Select: Astra pins height:40px and main.css sets line-height:1, so the
   control had a fixed 48px box with a 24px content area. On iOS that crops
   the chosen option along a horizontal line once the text is long enough.
   Let the box grow from padding and keep 48px only as a floor. */
body .wpforms-form select{height:auto;min-height:48px;line-height:1.4;}

@media (max-width:767px){
  /* 7. Footer columns stack with gap:0, so Connect's heading butted
     straight onto Explore's last link. The static build uses
     .footer-cols{gap:var(--space-10)} at this width. */
  body .elementor-9087 .elementor-element.elementor-element-b17ftr02{gap:var(--space-10);}

  /* 8. Elementor paints dropdown :hover and :focus #3F444B with white
     text, which reads far too dark here and persists after a tap. Match
     the active row instead. Elementor's rule is (0,3,0). */
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown a.elementor-item:hover,
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown a.elementor-item:focus{background-color:transparent;color:var(--e-global-color-b17ink);}
}

@media (max-width:767px){
  /* 9. Mono eyebrow / meta sits directly above its heading with a
     widget-to-widget gap of 0; the only separation was a per-widget
     margin-top of 0-8px, which reads cramped on a phone. Values come
     from direction 2d: 18px for the who-we-are style eyebrow, 10px for
     the card meta, and kit.css's 12px section-head gap for the title
     plus link pair. Written on .elementor-widget-container, which is
     where the page data sets its margin, so these override rather than
     stack. Elementor's per-widget rule is (0,4,0); these are (0,4,1). */
  body .elementor-widget.b17-t-label + .elementor-widget > .elementor-widget-container{margin-top:18px;}
  body .elementor-widget.b17-t-meta + .elementor-widget > .elementor-widget-container{margin-top:10px;}
  body .elementor-widget.b17-t-h2 + .elementor-widget.elementor-widget-heading > .elementor-widget-container{margin-top:12px;}
}

/* 10. Follow band mark must go white with the label. The earlier rule was
   (0,4,2) and lost to Elementor's per-widget
   .elementor-9087 .elementor-element.elementor-element-b17flw05
   .elementor-button:hover svg at (0,5,1), so the mark stayed ink on the
   filled button. These carry the widget id and are (0,6,2). */
body .elementor-9087 .elementor-element.elementor-element-b17flw05 .elementor-button:hover svg,
body .elementor-9087 .elementor-element.elementor-element-b17flw05 .elementor-button:focus-visible svg,
body .elementor-9087 .elementor-element.elementor-element-b17flw05 .elementor-button:active svg,
body .elementor-9087 .elementor-element.elementor-element-b17flw06 .elementor-button:hover svg,
body .elementor-9087 .elementor-element.elementor-element-b17flw06 .elementor-button:focus-visible svg,
body .elementor-9087 .elementor-element.elementor-element-b17flw06 .elementor-button:active svg{fill:#fff;}


@media (max-width:767px){
  /* 12. Menu panel hung 9px below the bar, showing a strip of the page
     between them. It was positioned against b17hdr01 (76px) rather than
     the header (77px), plus Elementor's own offset. Anchor it to the
     header and zero the offset so it butts against the bar. */
  body .xpro-theme-builder-header {position:relative;}
  body .xpro-theme-builder-header .elementor-element-b17hdr01{position:static;}
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown{top:100%;margin-top:0;left:0;right:0;width:auto;}

  /* 13. Selected page and hover must not read alike. Selected takes a red
     fill with white text (6.07:1); hover keeps the light wash. The 3px red
     left bar is redundant on a red fill. */
  /* 13 (revised 2026-08-17, user): red fill read as an eye sore, so the
     selected row goes back to the neutral wash. The two states are kept
     apart by structure rather than hue: selected carries a fill PLUS the
     3px red left bar, hover carries neither, only a darkened label. */
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active:hover,
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active:focus{background-color:var(--e-global-color-b17wash);color:var(--e-global-color-b17ink);}
  body .xpro-theme-builder-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active::after{display:block;left:0;right:auto;top:0;bottom:0;width:3px;height:auto;background-color:var(--e-global-color-b17red);opacity:1;}
}

/* 14. Section-head links read as sub-text rather than navigation, so they
   take a trailing arrow. This mirrors the leading arrow the backlinks
   already use, so it is an existing idiom rather than a new one. Requiring
   the descendant link keeps un-linked sub-headings out of it.
   NOTE: IBM Plex Mono does not carry U+2192; it falls back to the system
   mono, exactly as U+2190 already does in the backlinks. Verified by
   advance-width comparison against a glyph Plex is known to lack.
   Owned here, not in gen_elementor.py, so the arrow is never doubled. */
body .elementor-widget.b17-t-h2 + .elementor-widget.elementor-widget-heading .elementor-heading-title a::after{content:"→";padding-left:.45em;}

/* =========================================================
   B17 DESKTOP PARITY - 2026-08-17
   Three values that were only ever corrected inside the
   max-width:767px block, so the desktop rendering still
   disagreed with the static build.
   ========================================================= */

/* 15. Buttons rendered 43-45px against kit.css's min-height:48px, which was
   applied on mobile only. Elementor's .elementor-button is inline-block, so
   a bare min-height would grow the box downward and leave the label sitting
   high; the static build's own rule pairs the floor with inline-flex
   centring, so both are ported together. 48px is also the touch minimum. */
body .elementor-button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;}

/* 16. Mono eyebrow to heading measured 0px on desktop while the static build
   sets .b17-label{margin-bottom:var(--space-3)} at every use except the hero,
   which uses --space-4. The hero heading carries b17-t-display and its 16px
   comes from page data, so it is excluded rather than overridden. The
   max-width:767px rule below/above raises this to 18px on phones.
   Card meta to title (8px) and card title to Falam line (3px) were measured
   against the static build and already agree; they are deliberately untouched. */
/* Scoped to min-width:768px on purpose. Unscoped, the :not() makes this
   (0,5,1), which outranks the max-width:767px rule at (0,4,1) even from
   inside that media query, and the phone gap silently fell 18px -> 12px.
   A desktop-parity rule belongs in a desktop query. */
@media (min-width:768px){
  body .elementor-widget.b17-t-label + .elementor-widget:not(.b17-t-display) > .elementor-widget-container{margin-top:12px;}
}/* End custom CSS */