@charset "UTF-8";
:root {
  --brand:#EC411B;
  --brand_alt:#ff6a00;
  --ink:#0a0a0a;
  --paper:#ffffff;
  --font-body:Inter, sans-serif;
  --font-header:Poppins, sans-serif;
  --font-mono:Azeret Mono, monospace;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   Global Settings & Base Resets
   --------------------------------------------------------------------------
   Purpose:
   - Set universal element rules that apply to the entire site
   - Complement normalize.css (loaded before this)
   ========================================================================== */
/* 1. Universal box-sizing (your request) */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Safe base element rules */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --hdr-h: 6rem;
}

[id] {
  scroll-margin-top: var(--hdr-h);
}

body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--var_txt_clr_a);
  background-color: var(--var_bg_a);
  container-type: inline-size;
}

main {
  container-type: inline-size;
}

footer {
  container-type: inline-size;
}

/* 3. Inline highlights */
mark {
  background-color: transparent;
  color: var(--var_acnt_clr_a);
}

/* 4. Media elements */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 5. Form controls */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* 6. Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

/* 7. Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-header);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: clamp(1.75rem, 4.25vw, 3.0625rem);
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.4375rem);
}

h3 {
  font-size: clamp(1.25rem, 2.75vw, 1.8125rem);
}

h4 {
  font-size: clamp(1.125rem, 2.25vw, 1.375rem);
}

h5 {
  font-size: clamp(1rem, 1.75vw, 1.1875rem);
}

h6 {
  font-size: clamp(0.875rem, 1.25vw, 1rem);
}

/* 8. Paragraphs */
p {
  margin: 0;
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.8;
  text-wrap: pretty;
}

p.lg {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
}

p.sm {
  font-size: clamp(0.8125rem, 1.25vw, 0.875rem);
  line-height: 1.5;
}

p.xs {
  font-size: clamp(0.6875rem, 1vw, 0.75rem);
  line-height: 1.4;
}

/* 9. Layout utilities */
/* Sticky row: only while sections are a screen tall. Stacked (md and below) a
   row grows taller than the screen, and a stuck row would hide its lower part */
.uti_sticky.uti_sticky {
  position: sticky;
  top: 0;
}
@media (max-width: 1024px) {
  .uti_sticky.uti_sticky {
    position: relative;
  }
}

/* Fixed to the top of the viewport over the page (site header row). The row
   itself ignores the pointer — its interactive children re-enable it. */
.uti_fixed.uti_fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  overflow: visible;
  pointer-events: none;
  background: transparent;
}

/* Lets decorations escape the row up and down (.grd_row clips); still clipped
   at the screen's sides, so a bleeding decoration never scrolls the page sideways */
.uti_ovf_vis.uti_ovf_vis {
  overflow: visible;
  overflow-x: clip;
}

.uti_bdr_top.uti_bdr_top {
  border-top: 1px dashed var(--var_bdr_clr_a);
}

/* 10. Gradient backgrounds */
.uti_grad_a.uti_grad_a {
  background: radial-gradient(ellipse at 20% 50%, var(--var_grad_clr_a) 0%, transparent 40%), radial-gradient(ellipse at 80% 20%, var(--var_grad_clr_b) 0%, transparent 40%), radial-gradient(ellipse at 50% 80%, var(--var_grad_clr_c) 0%, transparent 40%), var(--var_bg_a);
}

.uti_grad_a_an.uti_grad_a_an {
  background: radial-gradient(ellipse at 20% 50%, var(--var_grad_clr_a) 0%, transparent 40%), radial-gradient(ellipse at 80% 20%, var(--var_grad_clr_b) 0%, transparent 40%), radial-gradient(ellipse at 50% 80%, var(--var_grad_clr_c) 0%, transparent 40%), var(--var_bg_a);
  background-size: 180% 180%;
  animation: uti_grad_a_shift 8s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .uti_grad_a_an.uti_grad_a_an {
    animation: none;
    background-size: auto;
  }
}

@keyframes uti_grad_a_shift {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 100%;
  }
}
/* 11. Decorative row overlays */
.uti_dec_row_a.uti_dec_row_a {
  position: relative;
}
.uti_dec_row_a.uti_dec_row_a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--var_bg_b);
  mask-image: url("../media/images/patterns/bg-pattern-1.png");
  -webkit-mask-image: url("../media/images/patterns/bg-pattern-1.png");
  mask-repeat: repeat;
  -webkit-mask-repeat: repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center;
  -webkit-mask-position: center;
  opacity: 0.5;
  pointer-events: none;
}
.uti_dec_row_a.uti_dec_row_a.repeat::before {
  mask-size: 40%;
  -webkit-mask-size: 40%;
}
.uti_dec_row_a.uti_dec_row_a.uti_grad_a_an {
  background: var(--var_bg_a);
  background-size: auto;
  animation: none;
}
.uti_dec_row_a.uti_dec_row_a.uti_grad_a_an::before {
  background: radial-gradient(ellipse at 20% 50%, var(--var_grad_clr_a) 0%, transparent 40%), radial-gradient(ellipse at 80% 20%, var(--var_grad_clr_b) 0%, transparent 40%), radial-gradient(ellipse at 50% 80%, var(--var_grad_clr_c) 0%, transparent 40%), var(--var_bg_b);
  background-size: 180% 180%;
  animation: uti_grad_a_shift 8s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .uti_dec_row_a.uti_dec_row_a.uti_grad_a_an::before {
    animation: none;
    background-size: auto;
  }
}

.uti_dec_row_b.uti_dec_row_b {
  position: relative;
}
.uti_dec_row_b.uti_dec_row_b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--var_bg_b);
  mask-image: linear-gradient(-45deg, black 0, black 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), black calc(50% - 0.5px), black calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), black calc(100% - 0.5px), black 100%);
  mask-size: 12px 12px;
  -webkit-mask-image: linear-gradient(-45deg, black 0, black 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), black calc(50% - 0.5px), black calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), black calc(100% - 0.5px), black 100%);
  -webkit-mask-size: 12px 12px;
  opacity: 0.5;
  pointer-events: none;
}
.uti_dec_row_b.uti_dec_row_b.uti_grad_a_an {
  background: var(--var_bg_a);
  background-size: auto;
  animation: none;
}
.uti_dec_row_b.uti_dec_row_b.uti_grad_a_an::before {
  background: radial-gradient(ellipse at 20% 50%, var(--var_grad_clr_a) 0%, transparent 40%), radial-gradient(ellipse at 80% 20%, var(--var_grad_clr_b) 0%, transparent 40%), radial-gradient(ellipse at 50% 80%, var(--var_grad_clr_c) 0%, transparent 40%), var(--var_bg_b);
  background-size: 180% 180%;
  animation: uti_grad_a_shift 8s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .uti_dec_row_b.uti_dec_row_b.uti_grad_a_an::before {
    animation: none;
    background-size: auto;
  }
}

/* ---------- Isometric utility ---------- */
.uti_iso_a.uti_iso_a {
  transform: rotateX(55deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}

.uti_iso_a_rev.uti_iso_a_rev {
  transform: rotateZ(45deg) rotateX(-55deg);
}

/* Page lock without a sideways jump: while Lenis is stopped (e.g. a modal
   is open) the scrollbar goes away; core.js sets --scrollbar-w to its width
   just before locking, and the page is padded by exactly that much, so the
   content stays put and the modal backdrop still covers the full width.
   (scrollbar-gutter: stable would also stop the jump, but leaves a strip the
   backdrop can't cover.) */
html.is_cursor_a,
html.is_cursor_a * {
  cursor: none !important;
}

html.is_cursor_a :is(textarea, [contenteditable=true], input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [type=range], [type=file], [type=color])) {
  cursor: text !important;
}

html.lenis.lenis-stopped {
  padding-right: var(--scrollbar-w, 0px);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
/* ==========================================================================
   Part: prt_dec_dots_a - Decorative dot grid
   ========================================================================== */
.prt_dec_dots_a {
  width: max-content;
}
.prt_dec_dots_a > .wrap {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  gap: 1rem;
}
.prt_dec_dots_a > .wrap span {
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 100%;
  background-color: var(--var_acnt_clr_a);
  transition: transform 0.2s ease-out;
}

/* ==========================================================================
   Part: prt_dec_circle_a - Decorative donut circle
   Modifier: alt_b (half accent).
   Size: --size (diameter, default 41.25rem; the hole scales with it) — set by
   the parent. Spin: `spin` config → data-spin = degrees per 100px of page
   scroll (core.js prtDecCircleA). Every spinning circle on a page takes the same
   angle for the same scroll, so a circle split across two sections stays whole.
   ========================================================================== */
@keyframes prt_dec_circle_a_stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 12px 0;
  }
}
.prt_dec_circle_a {
  width: var(--size, 41.25rem);
  aspect-ratio: 1;
  position: relative;
}
.prt_dec_circle_a > .wrap_a,
.prt_dec_circle_a > .wrap_b {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: linear-gradient(-45deg, var(--var_dec_circle_clr, var(--var_bdr_clr_a)) 0, var(--var_dec_circle_clr, var(--var_bdr_clr_a)) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_dec_circle_clr, var(--var_bdr_clr_a)) calc(50% - 0.5px), var(--var_dec_circle_clr, var(--var_bdr_clr_a)) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_dec_circle_clr, var(--var_bdr_clr_a)) calc(100% - 0.5px), var(--var_dec_circle_clr, var(--var_bdr_clr_a)) 100%);
  background-size: 12px 12px;
  mask-image: radial-gradient(circle at center, transparent calc(var(--size, 41.25rem) / 6), black calc(var(--size, 41.25rem) / 6));
  -webkit-mask-image: radial-gradient(circle at center, transparent calc(var(--size, 41.25rem) / 6), black calc(var(--size, 41.25rem) / 6));
  transform: translateZ(0);
  animation: prt_dec_circle_a_stripes 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .prt_dec_circle_a > .wrap_a,
  .prt_dec_circle_a > .wrap_b {
    animation: none;
  }
}
.prt_dec_circle_a .wrap_b {
  display: none;
}
.prt_dec_circle_a.alt_b .wrap_a {
  clip-path: inset(0 50% 0 0);
}
.prt_dec_circle_a.alt_b .wrap_b {
  display: block;
  clip-path: inset(0 0 0 50%);
  background: linear-gradient(-45deg, var(--var_dec_circle_clr_alt, var(--var_acnt_clr_a)) 0, var(--var_dec_circle_clr_alt, var(--var_acnt_clr_a)) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_dec_circle_clr_alt, var(--var_acnt_clr_a)) calc(50% - 0.5px), var(--var_dec_circle_clr_alt, var(--var_acnt_clr_a)) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_dec_circle_clr_alt, var(--var_acnt_clr_a)) calc(100% - 0.5px), var(--var_dec_circle_clr_alt, var(--var_acnt_clr_a)) 100%);
  background-size: 12px 12px;
}
.prt_dec_circle_a::before, .prt_dec_circle_a::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed var(--var_dec_circle_bdr, var(--var_bdr_clr_a));
}
.prt_dec_circle_a::before {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.prt_dec_circle_a::after {
  width: calc(var(--size, 41.25rem) / 3);
  height: calc(var(--size, 41.25rem) / 3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ==========================================================================
   Part: prt_dec_grid_a - Decorative vertical dotted lines
   Fills its positioned parent; the lines are spread edge to edge (count from
   the partial, default 6). Modifier `grid` = the site standard, used with
   count 7: lines on the 24-column grid every 4 columns, the outer two on the
   container edges (columns 0, 4, 8, 12, 16, 20, 24). The box is the
   container: the parent's width, capped at $xl and centered — so on a
   full-bleed row the lines still follow the 1400px container (and stay
   clear of the page margin, --page-inset).
   ========================================================================== */
.prt_dec_grid_a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.prt_dec_grid_a > .wrap {
  display: flex;
  justify-content: space-between;
  height: 100%;
  padding: 0 1px;
}
.prt_dec_grid_a > .wrap span {
  width: 1px;
  height: 100%;
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.prt_dec_grid_a.grid {
  left: 50%;
  width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  transform: translateX(-50%);
}
.prt_dec_grid_a.grid > .wrap {
  position: relative;
  padding: 0;
}
.prt_dec_grid_a.grid > .wrap span {
  position: absolute;
  top: 0;
  left: min(var(--i) / (var(--n) - 1) * 100%, 100% - 1px);
}

/* ==========================================================================
   Part: prt_logo_a - Animated NPG logo with bracket reveal
   Modifiers: `animate` (left bracket fades in, right one slides out, mark
   wipes in left to right) · `center` with `animate` (opens from the middle)
   ========================================================================== */
/* Keyframes */
@keyframes prt_logo_a_fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes prt_logo_a_bracket_slide {
  from {
    right: calc(100% - (34% + 15px));
  }
  to {
    right: 0;
  }
}
@keyframes prt_logo_a_open_left {
  from {
    left: 33%;
  }
  to {
    left: 0;
  }
}
@keyframes prt_logo_a_open_right {
  from {
    right: 33%;
  }
  to {
    right: 0;
  }
}
@keyframes prt_logo_a_text_center {
  from {
    clip-path: inset(0 50% 0 50%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes prt_logo_a_text_reveal {
  from {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
.prt_logo_a {
  max-width: 130px;
  aspect-ratio: 109/64;
}
.prt_logo_a > .cont {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}
.prt_logo_a .left_wrap,
.prt_logo_a .right_wrap {
  position: absolute;
  width: 17%;
  height: 100%;
  top: 0;
}
.prt_logo_a .left_wrap {
  left: 0;
}
.prt_logo_a .right_wrap {
  right: 0;
}
.prt_logo_a .top_left,
.prt_logo_a .top_right,
.prt_logo_a .bottom_left,
.prt_logo_a .bottom_right {
  position: absolute;
  width: 100%;
  aspect-ratio: 17.29/27.64;
  background-color: var(--var_acnt_clr_a);
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
.prt_logo_a .top_left {
  top: 0;
  left: 0;
  mask-image: url("../media/images/branding/marks/top_left_bracket.svg");
  -webkit-mask-image: url("../media/images/branding/marks/top_left_bracket.svg");
}
.prt_logo_a .bottom_left {
  bottom: 0;
  left: 0;
  mask-image: url("../media/images/branding/marks/bottom_left_bracket.svg");
  -webkit-mask-image: url("../media/images/branding/marks/bottom_left_bracket.svg");
}
.prt_logo_a .top_right {
  top: 0;
  right: 0;
  mask-image: url("../media/images/branding/marks/top_right_bracket.svg");
  -webkit-mask-image: url("../media/images/branding/marks/top_right_bracket.svg");
}
.prt_logo_a .bottom_right {
  bottom: 0;
  right: 0;
  mask-image: url("../media/images/branding/marks/bottom_right_bracket.svg");
  -webkit-mask-image: url("../media/images/branding/marks/bottom_right_bracket.svg");
}
.prt_logo_a .center_mark {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.prt_logo_a .center_mark > .wrap {
  width: 100%;
  aspect-ratio: 54.71/34.72;
  background-color: var(--var_txt_clr_a);
  mask-image: url("../media/images/branding/marks/NPG.svg");
  -webkit-mask-image: url("../media/images/branding/marks/NPG.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
.prt_logo_a {
  /* Animation sequence (triggered by .animate class) */
}
.prt_logo_a.animate {
  /* 1. Fade in left brackets (0s - 1s) */
}
.prt_logo_a.animate .left_wrap {
  opacity: 0;
  animation: prt_logo_a_fade_in 1s cubic-bezier(0.87, 0, 0.13, 1) forwards;
}
.prt_logo_a.animate {
  /* 2. Right bracket slides from left to right position (1.5s - 2s) */
}
.prt_logo_a.animate .right_wrap {
  opacity: 0;
  animation: prt_logo_a_fade_in 1s cubic-bezier(0.87, 0, 0.13, 1) forwards, prt_logo_a_bracket_slide 0.5s cubic-bezier(0.87, 0, 0.13, 1) 1.5s forwards;
  right: calc(100% - (34% + 15px));
}
.prt_logo_a.animate {
  /* 3. NPG text reveals via clip-path wipe (1.5s - 2.5s) */
}
.prt_logo_a.animate .center_mark > .wrap {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation: prt_logo_a_text_reveal 1s cubic-bezier(0.87, 0, 0.13, 1) 1.5s forwards;
}
.prt_logo_a {
  /* Modifier `center` (with .animate): the brackets appear closed in the
     middle and open out to both sides together while the NPG mark reveals
     from the center — symmetric, for a logo that sits centered (header) */
}
@media (prefers-reduced-motion: no-preference) {
  .prt_logo_a.animate.center .left_wrap {
    animation: prt_logo_a_fade_in 0.6s cubic-bezier(0.87, 0, 0.13, 1) forwards, prt_logo_a_open_left 0.7s cubic-bezier(0.87, 0, 0.13, 1) 0.7s both;
  }
  .prt_logo_a.animate.center .right_wrap {
    right: 0;
    animation: prt_logo_a_fade_in 0.6s cubic-bezier(0.87, 0, 0.13, 1) forwards, prt_logo_a_open_right 0.7s cubic-bezier(0.87, 0, 0.13, 1) 0.7s both;
  }
  .prt_logo_a.animate.center .center_mark > .wrap {
    clip-path: inset(0 50% 0 50%);
    animation: prt_logo_a_text_center 0.9s cubic-bezier(0.87, 0, 0.13, 1) 0.8s forwards;
  }
}
.prt_logo_a {
  /* Accessibility: respect reduced motion */
}
@media (prefers-reduced-motion: reduce) {
  .prt_logo_a.animate .left_wrap,
  .prt_logo_a.animate .right_wrap {
    opacity: 1;
    animation: none;
    right: unset;
  }
  .prt_logo_a.animate .right_wrap {
    right: 0;
  }
  .prt_logo_a.animate .center_mark > .wrap {
    clip-path: none;
    animation: none;
  }
}

/* ==========================================================================
   Part: prt_avatar_a - Circular avatar with gradient overlay
   ========================================================================== */
.prt_avatar_a {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background-color: var(--var_acnt_clr_a);
}
.prt_avatar_a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent 42%, var(--var_acnt_clr_b) 93%);
  pointer-events: none;
}
.prt_avatar_a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  mix-blend-mode: overlay;
}

/* ==========================================================================
   Part: prt_icn_a - Icon wrapper (Lucide-compatible)
   Drawn with square line ends and mitred corners (the brand's hard edges).
   ========================================================================== */
.prt_icn_a {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--var_icn_a_clr);
}
.prt_icn_a svg {
  width: 100% !important;
  height: 100% !important;
  stroke: currentColor !important;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  fill: none;
}
.prt_icn_a.sm {
  width: 1rem;
  height: 1rem;
}
.prt_icn_a.lg {
  width: 2rem;
  height: 2rem;
}
.prt_icn_a.xl {
  width: 2.5rem;
  height: 2.5rem;
}

/* ==========================================================================
   Part: prt_dec_xline_a - Decorative X-line accent (horizontal + vertical)
   Animation: GSAP parallax (slide right on scroll); optional draw-in (`draw`)
   Colors (theme variables; a module may re-point them on the part):
     --var_dec_xline_mark_clr      X marks        (default --var_bdr_clr_a)
     --var_dec_xline_mark_alt_clr  .alt X mark    (default --var_acnt_clr_a)
     --var_dec_xline_line_clr      horizontal line (default --var_txt_clr_a)
   Line length: --line (default 19.8rem) — a parent may set it, e.g. to grow
   the line with scroll. `rev` = mirrored: X — line — X X X.
   ========================================================================== */
.prt_dec_xline_a > .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.prt_dec_xline_a .mark {
  width: 1.6625rem;
  height: 1.6625rem;
  position: relative;
  flex-shrink: 0;
}
.prt_dec_xline_a .mark::before, .prt_dec_xline_a .mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 3px;
  background: var(--var_dec_xline_mark_clr);
  border-radius: 1px;
}
.prt_dec_xline_a .mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.prt_dec_xline_a .mark::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.prt_dec_xline_a .mark.alt::before, .prt_dec_xline_a .mark.alt::after {
  background: var(--var_dec_xline_mark_alt_clr);
}
.prt_dec_xline_a .line {
  flex: 0 1 var(--line, 19.8rem);
  width: var(--line, 19.8rem);
  min-width: 2rem;
  height: 2px;
  background: var(--var_dec_xline_line_clr);
}
.prt_dec_xline_a.rev > .wrap {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.prt_dec_xline_a.vertical {
  width: fit-content;
}
.prt_dec_xline_a.vertical > .wrap {
  flex-direction: column;
}
.prt_dec_xline_a.vertical .line {
  width: 2px;
  height: auto;
  min-width: 0;
  min-height: 2rem;
}
.prt_dec_xline_a.draw > .wrap > :nth-child(1) {
  --d: 0s;
}
.prt_dec_xline_a.draw > .wrap > :nth-child(2) {
  --d: .28s;
}
.prt_dec_xline_a.draw > .wrap > :nth-child(3) {
  --d: .56s;
}
.prt_dec_xline_a.draw > .wrap > :nth-child(4) {
  --d: .84s;
}
.prt_dec_xline_a.draw > .wrap > :nth-child(5) {
  --d: 1.84s;
}
.prt_dec_xline_a.draw .mark::before {
  transition: width 0.35s ease var(--d, 0s);
}
.prt_dec_xline_a.draw .mark::after {
  transition: width 0.35s ease calc(var(--d, 0s) + 0.16s);
}
.prt_dec_xline_a.draw .line {
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s);
}
.prt_dec_xline_a.draw.vertical .line {
  transform-origin: center top;
}
.prt_dec_xline_a.draw.rev .line {
  transform-origin: right center;
}
.prt_dec_xline_a.draw:not(.is_drawn) .mark::before,
.prt_dec_xline_a.draw:not(.is_drawn) .mark::after {
  width: 0;
}
.prt_dec_xline_a.draw:not(.is_drawn) .line {
  transform: scaleX(0);
}
.prt_dec_xline_a.draw.vertical:not(.is_drawn) .line {
  transform: scaleY(0);
}
@media (prefers-reduced-motion: reduce) {
  .prt_dec_xline_a.draw .mark::before, .prt_dec_xline_a.draw .mark::after, .prt_dec_xline_a.draw .line {
    transition: none;
  }
  .prt_dec_xline_a.draw:not(.is_drawn) .mark::before, .prt_dec_xline_a.draw:not(.is_drawn) .mark::after {
    width: 100%;
  }
  .prt_dec_xline_a.draw:not(.is_drawn) .line {
    transform: none;
  }
}

/* ==========================================================================
   Part: prt_btn_a - Primary button with icon
   Size: compact by default (16 × 24px padding, 14px); modifier `lg` = large.
   ========================================================================== */
.prt_btn_a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: transparent;
  border: 2px solid var(--var_btn_a_bdr_clr);
  color: var(--var_btn_a_txt_clr);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  width: fit-content;
}
.prt_btn_a .prt_icn_a {
  color: var(--var_btn_a_icn_clr);
  transition: transform 0.3s ease, color 0.3s ease;
}
.prt_btn_a:hover {
  background: var(--var_acnt_clr_a);
  border-color: var(--var_acnt_clr_a);
  color: var(--var_btn_a_hvr_clr);
  text-decoration: none;
}
.prt_btn_a:hover .prt_icn_a {
  transform: translateX(4px);
  color: var(--var_btn_a_hvr_clr);
}
.prt_btn_a.lg {
  gap: 0.625rem;
  padding: 1.625rem 2.8125rem;
  font-size: 1.1875rem;
  letter-spacing: 0;
}

/* ==========================================================================
   Part: prt_person_a - Person photo: a colour cutout (real <img>s, object-fit:
   contain, bottom-centered, never cropped) in the people treatment (mixin
   person-photo(), filters in partials/people_fx.php, spotlight core.js
   peopleSpot): black and white in the section's wash at rest, the colour in
   a soft spotlight that follows the pointer over the section.
   The box is sized by the module (width / height / aspect-ratio); the photo
   fills it absolutely. Colors: --var_person_a_base_clr, --var_person_a_lit_clr.
   ========================================================================== */
.prt_person_a {
  position: relative;
  --spot-x: -9999px;
  --spot-y: -9999px;
  --spot-power: 0;
  --spot-r: 24rem;
  --bright: 1;
  --contrast: 1;
  isolation: isolate;
}
.prt_person_a > .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.prt_person_a > .base {
  filter: var(--fx-g1) brightness(var(--var_person_a_level_b)) contrast(var(--var_person_a_level_c)) var(--fx-g2) brightness(var(--bright)) contrast(var(--contrast));
  mask-image: linear-gradient(black, black), radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max))) 12%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.997)) 18.3%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.977)) 24.6%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.931)) 30.9%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.855)) 37.1%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.754)) 43.4%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.632)) 49.7%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.5)) 56%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.368)) 62.3%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.246)) 68.6%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.145)) 74.9%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.069)) 81.1%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.023)) 87.4%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.003)) 93.7%, transparent 100%);
  mask-composite: subtract;
}
.prt_person_a > .clr {
  position: absolute;
  inset: 0;
  filter: var(--fx-c1) brightness(var(--var_person_a_level_b)) contrast(var(--var_person_a_level_c)) var(--fx-c2) brightness(var(--bright)) contrast(var(--contrast));
  mix-blend-mode: plus-lighter;
  mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max))) 12%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.997)) 18.3%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.977)) 24.6%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.931)) 30.9%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.855)) 37.1%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.754)) 43.4%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.632)) 49.7%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.5)) 56%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.368)) 62.3%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.246)) 68.6%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.145)) 74.9%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.069)) 81.1%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.023)) 87.4%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.003)) 93.7%, transparent 100%);
}
.prt_person_a > .tag {
  position: absolute;
  bottom: var(--tag-y, 12%);
  left: var(--tag-x, 6%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 88%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--var_acnt_clr_a);
  background: var(--var_bg_a);
  scale: var(--tag-flip, 1) 1;
}
.prt_person_a > .tag > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
}
.prt_person_a > .tag > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.prt_person_a > .fx {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.prt_person_a > .fx .wash {
  flood-color: var(--var_person_a_base_clr);
}
.prt_person_a > .fx .lit {
  flood-color: var(--var_person_a_lit_clr);
}
.prt_person_a > .fx .floor {
  flood-color: var(--var_person_a_floor_clr);
}
.prt_person_a.is_pixel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--var_person_a_pix_clr);
  pointer-events: none;
  -webkit-mask-image: var(--pix-edge), var(--pix-src);
  mask-image: var(--pix-edge), var(--pix-src);
  -webkit-mask-size: 100% 100%, contain;
  mask-size: 100% 100%, contain;
  -webkit-mask-position: 0 0, bottom center;
  mask-position: 0 0, bottom center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .prt_person_a:not(.is_pix_ready) {
    visibility: hidden;
    animation: prt_person_a_pix_show 0s 4s forwards;
  }
}
.prt_person_a > .img {
  position: absolute;
  inset: 0;
}
.prt_person_a.flip {
  scale: -1 1;
  --tag-flip: -1;
}
.prt_person_a.fade_x {
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

@keyframes prt_person_a_pix_show {
  to {
    visibility: visible;
  }
}
/* ==========================================================================
   Part: prt_icn_b - Layered icon frame (back/front offset layers)
   ========================================================================== */
.prt_icn_b {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  border: 1px dashed var(--var_bdr_clr_a);
  border-radius: 4px;
  background-color: transparent;
  transition: border-color 0.3s ease;
}
.prt_icn_b::before {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: var(--var_bg_b);
  border: 2px solid var(--var_bdr_clr_a);
  border-radius: 8px;
  transform: translateZ(0);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.prt_icn_b::after {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: var(--var_bg_a);
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 8px;
  transform: translateZ(10px);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.prt_icn_b .icn {
  width: auto;
  height: auto;
  max-width: 32%;
  transform: translateX(30%) translateY(-30%) rotateZ(45deg) rotateX(-55deg) translateZ(100px);
  transition: transform 0.3s ease;
}
.prt_icn_b .icn svg {
  transition: transform 0.3s ease;
}
.prt_icn_b .icn svg path {
  transition: fill 0.3s ease;
}
.prt_icn_b:hover {
  border-color: var(--var_acnt_clr_a);
}
.prt_icn_b:hover::before {
  background: color-mix(in srgb, var(--var_acnt_clr_a) 8%, var(--var_bg_b));
  border-color: var(--var_acnt_clr_a);
  transform: translateZ(4px);
}
.prt_icn_b:hover::after {
  border-color: var(--var_acnt_clr_a);
  transform: translateZ(18px);
}
.prt_icn_b:hover .icn {
  transform: translateX(30%) translateY(-30%) rotateZ(45deg) rotateX(-55deg) translateZ(120px);
}
.prt_icn_b:hover .icn svg {
  --var_txt_clr_a: var(--var_acnt_clr_a);
  transform: translateY(-8px);
}

/* ==========================================================================
   Part: prt_dec_code_a - Decorative scrolling code text
   ========================================================================== */
@keyframes prt_dec_code_a_scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
.prt_dec_code_a {
  overflow: hidden;
  pointer-events: none;
  opacity: 0.12;
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.prt_dec_code_a .scroll {
  animation: prt_dec_code_a_scroll 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .prt_dec_code_a .scroll {
    animation: none;
  }
}
.prt_dec_code_a .block {
  padding-left: 2.5rem;
}
.prt_dec_code_a .ln {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--var_txt_clr_b);
  white-space: nowrap;
}

/* ==========================================================================
   Part: prt_logo_card_a - Frosted glass tile with a client logo
   Modifiers: solid (opaque --var_bg_b tile; the logo multiplies into it, so
   a logo file with a white background loses it), invert (dark version of a
   white logo, for light tiles).
   ========================================================================== */
.prt_logo_card_a {
  background: color-mix(in srgb, var(--var_bg_b) 40%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem min(2.5rem, 6cqi);
  min-width: 0;
  min-height: 8.75rem;
}
.prt_logo_card_a img {
  max-width: min(7.5rem, 100%);
  max-height: 4.375rem;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
}
.prt_logo_card_a.solid {
  background: var(--var_bg_b);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.prt_logo_card_a.solid img {
  mix-blend-mode: multiply;
  opacity: 0.75;
}
.prt_logo_card_a.invert img {
  filter: grayscale(100%) invert(1);
}

/* ==========================================================================
   Part: prt_btn_b - Square icon button (carousel prev/next)
   Solid brand square (2px radius, like our other buttons); hover inverts to
   an outline and nudges the arrow toward its direction (.prev ← / .next →).
   Disabled = faded. Same look as prt_btn_c, icon only.
   Colors: --var_btn_b_bg_clr (fill / outline), --var_btn_b_icn_clr (icon)
   ========================================================================== */
.prt_btn_b {
  --var_icn_a_clr: var(--var_btn_b_icn_clr);
  --nudge: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--var_btn_b_bg_clr);
  border-radius: 2px;
  background: var(--var_btn_b_bg_clr);
  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.prt_btn_b > .prt_icn_a {
  transition: transform 0.3s ease;
}
.prt_btn_b.prev {
  --nudge: -3px;
}
.prt_btn_b.next {
  --nudge: 3px;
}
.prt_btn_b:hover:not(:disabled) {
  --var_icn_a_clr: var(--var_btn_b_bg_clr);
  background: transparent;
}
.prt_btn_b:hover:not(:disabled) > .prt_icn_a {
  transform: translateX(var(--nudge));
}
.prt_btn_b:focus-visible {
  outline: 2px solid var(--var_btn_b_bg_clr);
  outline-offset: 3px;
}
.prt_btn_b:disabled {
  opacity: 0.3;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .prt_btn_b,
  .prt_btn_b > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Part: prt_btn_c - Solid (filled) button with icon
   Strongest call to action. Same size/type as prt_btn_a; inverts on hover.
   Colors: --var_btn_c_bg_clr, --var_btn_c_txt_clr,
           --var_btn_c_hvr_bg_clr, --var_btn_c_hvr_txt_clr
   Size: compact by default (16 × 24px padding, 14px); modifier `lg` = large.
   ========================================================================== */
.prt_btn_c {
  --var_icn_a_clr: currentColor;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  width: fit-content;
  background: var(--var_btn_c_bg_clr);
  border: 2px solid var(--var_btn_c_bg_clr);
  color: var(--var_btn_c_txt_clr);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.prt_btn_c .prt_icn_a {
  transition: transform 0.3s ease;
}
.prt_btn_c:hover {
  background: var(--var_btn_c_hvr_bg_clr);
  color: var(--var_btn_c_hvr_txt_clr);
  text-decoration: none;
}
.prt_btn_c:hover .prt_icn_a {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .prt_btn_c, .prt_btn_c .prt_icn_a {
    transition: none;
  }
}
.prt_btn_c.lg {
  gap: 0.625rem;
  padding: 1.625rem 2.8125rem;
  font-size: 1.1875rem;
  letter-spacing: 0;
}

/* ==========================================================================
   Part: prt_btn_d - Text link button (label + arrow, growing underline)
   For inline / low-emphasis actions ("Learn more", "Read case study").
   Modifier `rev`: icon before the label (e.g. Back ←).
   Colors: --var_btn_d_txt_clr, --var_btn_d_icn_clr, --var_btn_d_line_clr
   ========================================================================== */
.prt_btn_d {
  --var_icn_a_clr: var(--var_btn_d_icn_clr);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding-block: 0.5rem;
  color: var(--var_btn_d_txt_clr);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
@media (pointer: coarse) {
  .prt_btn_d {
    min-height: 2.75rem;
  }
}
.prt_btn_d > .label {
  position: relative;
}
.prt_btn_d > .label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5rem;
  width: 100%;
  height: 2px;
  background: var(--var_btn_d_line_clr);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.prt_btn_d .prt_icn_a {
  transition: transform 0.3s ease;
}
.prt_btn_d:hover {
  text-decoration: none;
}
.prt_btn_d:hover > .label::after {
  transform: scaleX(1);
}
.prt_btn_d:hover .prt_icn_a {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .prt_btn_d > .label::after, .prt_btn_d .prt_icn_a {
    transition: none;
  }
}

.prt_btn_d.rev {
  flex-direction: row-reverse;
}

/* ==========================================================================
   Part: prt_btn_e - Compact neutral outline button
   Secondary / utility actions (filters, "view all", toolbar actions).
   tag 'button' renders a <button>; a filter marks its state with
   aria-pressed="true" (styled as selected).
   Colors: --var_btn_e_txt_clr, --var_btn_e_bdr_clr, --var_btn_e_hvr_clr
   ========================================================================== */
.prt_btn_e {
  --var_icn_a_clr: currentColor;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.75rem 1rem;
  border: 1px solid var(--var_btn_e_bdr_clr);
  background: transparent;
  color: var(--var_btn_e_txt_clr);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}
@media (pointer: coarse) {
  .prt_btn_e {
    min-height: 2.75rem;
  }
}
.prt_btn_e:hover {
  border-color: var(--var_btn_e_hvr_clr);
  color: var(--var_btn_e_hvr_clr);
  text-decoration: none;
}
.prt_btn_e:focus-visible {
  outline: 2px solid var(--var_btn_e_hvr_clr);
  outline-offset: 2px;
}
.prt_btn_e[aria-pressed=true] {
  border-color: var(--var_btn_e_hvr_clr);
  background: var(--var_btn_e_hvr_clr);
  color: var(--var_btn_c_txt_clr);
}
@media (prefers-reduced-motion: reduce) {
  .prt_btn_e {
    transition: none;
  }
}

/* ==========================================================================
   Part: prt_btn_f - Square outline icon link (social / utility)
   Colors: --var_btn_f_icn_clr, --var_btn_f_bdr_clr, --var_btn_f_hvr_clr
   ========================================================================== */
.prt_btn_f {
  --var_icn_a_clr: var(--var_btn_f_icn_clr);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--var_btn_f_bdr_clr);
  text-decoration: none;
  transition: border-color 0.3s ease;
}
.prt_btn_f .prt_icn_a,
.prt_btn_f .prt_icn_c {
  transition: color 0.3s ease;
}
.prt_btn_f:hover, .prt_btn_f:focus-visible {
  --var_icn_a_clr: var(--var_btn_f_hvr_clr);
  border-color: var(--var_btn_f_hvr_clr);
  text-decoration: none;
}
.prt_btn_f:focus-visible {
  outline: 2px solid var(--var_btn_f_hvr_clr);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .prt_btn_f, .prt_btn_f .prt_icn_a, .prt_btn_f .prt_icn_c {
    transition: none;
  }
}

/* ==========================================================================
   Part: prt_icn_c - Brand / social glyph (filled SVG, currentColor)
   Lucide has no filled brand marks, so these live here. Same size scale as
   prt_icn_a; color comes from --var_icn_a_clr or the parent's color.
   ========================================================================== */
.prt_icn_c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--var_icn_a_clr);
}
.prt_icn_c > svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.prt_icn_c.sm {
  width: 1rem;
  height: 1rem;
}
.prt_icn_c.lg {
  width: 2rem;
  height: 2rem;
}
.prt_icn_c.xl {
  width: 2.5rem;
  height: 2.5rem;
}

/* ==========================================================================
   Part: prt_icn_d - Small isometric code tile (inline icon)
   Same glyph as prt_icn_b, without the 3D frame — for stats, lists, labels.
   Colors: --var_icn_d_face_clr (tile faces), --var_icn_d_line_clr (outlines)
   ========================================================================== */
.prt_icn_d {
  display: inline-block;
  flex-shrink: 0;
  width: 2.75rem;
  aspect-ratio: 235/304;
}
.prt_icn_d > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.prt_icn_d > svg .face {
  fill: var(--var_icn_d_face_clr);
}
.prt_icn_d > svg .line {
  fill: var(--var_icn_d_line_clr);
}
.prt_icn_d.sm {
  width: 2rem;
}
.prt_icn_d.lg {
  width: 3.5rem;
}

/* ==========================================================================
   Part: prt_img_a - Plain content image (real <img>, no tint)
   The box is sized/positioned by the module; the image fills it with
   object-fit: contain (default — never cropped) or cover (modifier),
   anchored bottom center. Modifier `person`: a colour cutout of a person
   in the people treatment (mixin person-photo(), filters in
   partials/people_fx.php, spotlight core.js peopleSpot): black and white
   in the section's wash, the colour in a spotlight that follows the
   pointer. Modifier `blend`: a photo on white multiplied into a box of the
   section color (bio headshots). Modifier `mono`: black and white, whatever
   the file (no treatment, no hover colour: the team page). Modifier `tint`:
   the light tones take --var_img_a_tint_clr (no painted box); with `mono` a
   colour photo on a white background renders black and white and blends into
   what's behind it (no visible box). Colors: --var_img_a_tint_clr.
   ========================================================================== */
.prt_img_a {
  position: relative;
  margin: 0;
}
.prt_img_a > .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.prt_img_a.person {
  --spot-x: -9999px;
  --spot-y: -9999px;
  --spot-power: 0;
  --spot-r: 24rem;
  --bright: 1;
  --contrast: 1;
  isolation: isolate;
}
.prt_img_a.person > .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.prt_img_a.person > .base {
  filter: var(--fx-g1) brightness(var(--var_person_a_level_b)) contrast(var(--var_person_a_level_c)) var(--fx-g2) brightness(var(--bright)) contrast(var(--contrast));
  mask-image: linear-gradient(black, black), radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max))) 12%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.997)) 18.3%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.977)) 24.6%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.931)) 30.9%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.855)) 37.1%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.754)) 43.4%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.632)) 49.7%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.5)) 56%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.368)) 62.3%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.246)) 68.6%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.145)) 74.9%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.069)) 81.1%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.023)) 87.4%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.003)) 93.7%, transparent 100%);
  mask-composite: subtract;
}
.prt_img_a.person > .clr {
  position: absolute;
  inset: 0;
  filter: var(--fx-c1) brightness(var(--var_person_a_level_b)) contrast(var(--var_person_a_level_c)) var(--fx-c2) brightness(var(--bright)) contrast(var(--contrast));
  mix-blend-mode: plus-lighter;
  mask-image: radial-gradient(circle var(--spot-r) at var(--spot-x) var(--spot-y), rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max))) 12%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.997)) 18.3%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.977)) 24.6%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.931)) 30.9%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.855)) 37.1%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.754)) 43.4%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.632)) 49.7%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.5)) 56%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.368)) 62.3%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.246)) 68.6%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.145)) 74.9%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.069)) 81.1%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.023)) 87.4%, rgb(0, 0, 0, calc(var(--spot-power) * var(--var_person_a_spot_max) * 0.003)) 93.7%, transparent 100%);
}
.prt_img_a.person > .tag {
  position: absolute;
  bottom: var(--tag-y, 12%);
  left: var(--tag-x, 6%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 88%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--var_acnt_clr_a);
  background: var(--var_bg_a);
  scale: var(--tag-flip, 1) 1;
}
.prt_img_a.person > .tag > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
}
.prt_img_a.person > .tag > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.prt_img_a.person > .fx {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.prt_img_a.person > .fx .wash {
  flood-color: var(--var_person_a_base_clr);
}
.prt_img_a.person > .fx .lit {
  flood-color: var(--var_person_a_lit_clr);
}
.prt_img_a.person > .fx .floor {
  flood-color: var(--var_person_a_floor_clr);
}
.prt_img_a.is_pixel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--var_person_a_pix_clr);
  pointer-events: none;
  -webkit-mask-image: var(--pix-edge), var(--pix-src);
  mask-image: var(--pix-edge), var(--pix-src);
  -webkit-mask-size: 100% 100%, contain;
  mask-size: 100% 100%, contain;
  -webkit-mask-position: 0 0, bottom center;
  mask-position: 0 0, bottom center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .prt_img_a.person:not(.is_pix_ready), .prt_img_a.reveal:not(.is_pix_ready) {
    visibility: hidden;
    animation: prt_img_a_pix_show 0s 4s forwards;
  }
}
.prt_img_a.flip {
  scale: -1 1;
  --tag-flip: -1;
}
.prt_img_a.mono > .img {
  filter: grayscale(1);
}
.prt_img_a.cover > .img {
  object-fit: cover;
}
.prt_img_a.pos_right > .img {
  object-position: bottom right;
}
.prt_img_a.pos_top > .img {
  object-position: top center;
}
.prt_img_a.blend {
  background-color: var(--var_bg_a);
}
.prt_img_a.blend > .img {
  mix-blend-mode: multiply;
}
.prt_img_a.tint > .img {
  filter: var(--fx);
}
.prt_img_a.tint.mono > .img {
  filter: grayscale(1) var(--fx);
  mix-blend-mode: multiply;
}
.prt_img_a.tint > .fx {
  position: absolute;
  width: 0;
  height: 0;
}
.prt_img_a.tint > .fx .tint {
  flood-color: var(--var_img_a_tint_clr);
}

@keyframes prt_img_a_pix_show {
  to {
    visibility: visible;
  }
}
/* ==========================================================================
   Part: prt_icn_e - Icon tile (Lucide icon on a soft accent square)
   Inline by default: sized in em, so it sits in a heading line at the
   heading's size. `lg` = standalone tile.
   Colors: --var_icn_e_bg_clr (tile), --var_icn_e_clr (icon)
   ========================================================================== */
.prt_icn_e {
  --var_icn_a_clr: var(--var_icn_e_clr);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9em;
  aspect-ratio: 1;
  vertical-align: -0.1em;
  border-radius: 2px;
  background: var(--var_icn_e_bg_clr);
}
.prt_icn_e > .prt_icn_a {
  width: 55%;
  height: 55%;
}
.prt_icn_e.lg {
  width: 4.5rem;
  vertical-align: middle;
}

/* ==========================================================================
   Part: prt_bdg_a - Name badge (name + role), text only — no box
   Color: --var_bdg_a_txt_clr
   ========================================================================== */
.prt_bdg_a {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  color: var(--var_bdg_a_txt_clr);
}
.prt_bdg_a > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.1141304348rem + 0.8695652174cqi, 1.875rem);
  line-height: 1.15;
}
.prt_bdg_a > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.prt_bdg_a.on_photo {
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--var_person_a_label_bdr_clr);
  background: var(--var_person_a_label_bg_clr);
}

/* ==========================================================================
   Part: prt_photo_a - Instant-photo card (modern polaroid)
   Thin frame with a deeper bottom edge for the caption, greyscale photo,
   soft drop shadow. Width comes from the parent.
   Colors: --var_photo_a_bg_clr (frame), --var_photo_a_txt_clr (caption)
   ========================================================================== */
.prt_photo_a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0.5rem 0.5rem 1rem;
  border-radius: 4px;
  background: var(--var_photo_a_bg_clr);
  border: 1px solid var(--var_bdr_clr_a);
}
.prt_photo_a > .img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 2px;
  filter: grayscale(1);
}
.prt_photo_a > .label {
  padding-inline: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_photo_a_txt_clr);
}

/* ==========================================================================
   Part: prt_video_a - Silent looping background video
   Fills the box its parent gives it (object-fit: cover). Decorative
   (aria-hidden, muted, no controls). core.js prtVideoA plays it while it is
   on screen and pauses it off screen; never autoplays for reduced motion.
   Modifier `manual`: left alone by prtVideoA — the parent plays/pauses it.
   ========================================================================== */
.prt_video_a {
  position: relative;
  margin: 0;
}
.prt_video_a > .video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Part: prt_tile_a - Label cell
   A square-cornered cell that fills the width its parent gives it: optional
   mono index number (top, accent) and the name (bottom). Parents draw the
   lines between cells. Color: --var_tile_a_bg_clr (cell), text follows the
   section heading color; hover tints the cell.
   ========================================================================== */
.prt_tile_a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 6rem;
  padding: 1.5rem;
  background: var(--var_tile_a_bg_clr);
  transition: background-color 0.35s ease;
}
.prt_tile_a:hover {
  background: color-mix(in srgb, var(--var_tile_a_bg_clr) 94%, var(--var_hdr_clr_a));
}
.prt_tile_a > .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.prt_tile_a > .label {
  margin-top: auto;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.prt_tile_a.has_icn {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  min-height: 0;
  padding: 1rem 1.5rem;
}
.prt_tile_a.has_icn > .label {
  overflow: hidden;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .prt_tile_a {
    transition: none;
  }
}

/* ==========================================================================
   Part: prt_search_a - Search field with icon
   Outlined box (same height and border as prt_btn_e), icon inside on the
   left, label visually hidden. Width from the parent (default 18rem).
   Colors follow the section (border / text / accent on focus).
   ========================================================================== */
.prt_search_a {
  --var_icn_a_clr: var(--var_txt_clr_b);
  position: relative;
  display: flex;
  align-items: center;
  width: 18rem;
  max-width: 100%;
}
.prt_search_a > .label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.prt_search_a > .prt_icn_a {
  position: absolute;
  left: 0.75rem;
  pointer-events: none;
}
.prt_search_a > .field {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem 0.5rem calc(0.75rem * 2 + 1rem);
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--var_txt_clr_a);
}
@media (pointer: coarse) {
  .prt_search_a > .field {
    min-height: 2.75rem;
    font-size: 1rem;
  }
}
@container grd (max-width: 645px) {
  .prt_search_a > .field {
    font-size: 1rem;
  }
}
.prt_search_a > .field::placeholder {
  color: var(--var_txt_clr_b);
}
.prt_search_a > .field:focus {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -1px;
  border-color: var(--var_acnt_clr_a);
}

/* ==========================================================================
   Part: prt_avatar_b - Plain circular photo avatar
   Greyscale photo in a circle on a light backdrop (no tint — prt_avatar_a is
   the orange-tinted one). Sizes: default 4.5rem, `lg` 6rem; `top` = anchor the photo at the top (portraits). The photo
   multiplies (white backgrounds take the backdrop color). API: --zoom
   (photo scale, default 1, transitioned).
   Color: --var_avatar_b_bg_clr (backdrop behind transparent photos)
   ========================================================================== */
.prt_avatar_b {
  --zoom: 1;
  display: block;
  width: 4.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--var_avatar_b_bg_clr);
}
.prt_avatar_b > .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  transform: scale(var(--zoom));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .prt_avatar_b > .img {
    transition: none;
  }
}
.prt_avatar_b.lg {
  width: 6rem;
}
.prt_avatar_b.top > .img {
  object-position: center top;
}

/* ==========================================================================
   Part: prt_dec_mark_a - Small decorative accent mark (inline SVG)
   Shapes from the design file (10px rhythm, 4px strokes):
     lines  — 6 stacked, gently sloped lines (40 × 62)
     bars   — 6 slanted bars (62 × 40)
     plus   — 3 × 2 plus signs (64 × 40)   plus_v — 2 × 3 (40 × 64)
     hatch  — diagonal hatch on a ring band that hugs a 6rem round avatar;
              drawn for the bottom-right corner, the parent mirrors it
   Color: --var_dec_mark_a_clr (red); modifier `alt` = --var_dec_mark_a_clr_alt
   (orange). The parent positions it.
   Animation API: `--on: 1` on the part or an ancestor loops it — lines and
   hatch slide back and forth, bars hop, plus signs spin — each piece a beat
   after the one before (--i). The keyframes always run but scale their
   movement by --on, so with --on: 0 nothing moves and the mark snaps back
   to rest the moment --on drops. Reduced motion: no animation.
   ========================================================================== */
.prt_dec_mark_a {
  --on: 0;
  display: block;
  pointer-events: none;
  color: var(--var_dec_mark_a_clr);
}
.prt_dec_mark_a.alt {
  color: var(--var_dec_mark_a_clr_alt);
}
.prt_dec_mark_a > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
}
.prt_dec_mark_a > svg .item {
  transform-box: fill-box;
  transform-origin: center;
  animation: var(--loop) 1.1s ease-in-out calc(var(--i) * -90ms) infinite;
}
.prt_dec_mark_a.lines {
  --loop: prt_dec_mark_a_slide;
  width: 2.5rem;
}
.prt_dec_mark_a.bars {
  --loop: prt_dec_mark_a_hop;
  width: 3.875rem;
}
.prt_dec_mark_a.plus, .prt_dec_mark_a.plus_v {
  --loop: prt_dec_mark_a_spin;
}
.prt_dec_mark_a.plus > svg .item, .prt_dec_mark_a.plus_v > svg .item {
  animation-timing-function: linear;
}
.prt_dec_mark_a.plus {
  width: 4rem;
}
.prt_dec_mark_a.plus_v {
  width: 2.5rem;
}
.prt_dec_mark_a.hatch {
  --loop: prt_dec_mark_a_drift;
  width: 3.5rem;
}
.prt_dec_mark_a.hatch > svg {
  stroke-width: 3;
}
@media (prefers-reduced-motion: reduce) {
  .prt_dec_mark_a > svg .item {
    animation: none;
  }
}

@keyframes prt_dec_mark_a_slide {
  50% {
    transform: translateX(calc(var(--on) * 6px));
  }
}
@keyframes prt_dec_mark_a_hop {
  50% {
    transform: translateY(calc(var(--on) * -5px));
  }
}
@keyframes prt_dec_mark_a_spin {
  to {
    transform: rotate(calc(var(--on) * 90deg));
  }
}
@keyframes prt_dec_mark_a_drift {
  50% {
    transform: translate(calc(var(--on) * 4px), calc(var(--on) * -4px));
  }
}
/* ==========================================================================
   Part: prt_layer_a - One slice of the stack illustration
   A single isometric layer from blk_stack_a (kind: design | frontend |
   backend | ai | server), for use as a standalone graphic / placeholder.
   Animation API: `--on: 1` springs the scene's pieces slightly apart.
   Intro: core.js prtLayerA adds `is_pending` to scenes still off screen and
   removes it at 40% in view, so the pieces pop in one by one (no JS = shown).
   Kind `web`: a full isometric web-design scene (test illustration) with
   brand touches in the stack's hover palette: doodles + small details
   orange (--var_stack_a_hvr_clr_a), screen and pucks peach (_hvr_clr_b).
   Width from the parent (default 100%, the SVG keeps its 448:262 ratio).
   Modifier `lit`: the layer's highlight colors (as an active stack layer).
   Colors: the stack's palette (--var_stack_a_clr_a…d, _hvr_clr_a…c), so a
   slice always matches the full illustration.
   ========================================================================== */
.prt_layer_a {
  --layer-dark: var(--var_stack_a_clr_a);
  --layer-light: var(--var_stack_a_clr_b);
  --layer-mid: var(--var_stack_a_clr_c);
  --layer-paper: var(--var_stack_a_clr_d);
  --on: 0;
  display: block;
  width: 100%;
}
.prt_layer_a > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.prt_layer_a > svg :is(path, polygon, rect, circle, ellipse) {
  transition: fill 0.35s ease;
}
.prt_layer_a > svg :is(path, polygon, rect, circle, ellipse).clr_a {
  fill: var(--layer-dark);
}
.prt_layer_a > svg :is(path, polygon, rect, circle, ellipse).clr_b {
  fill: var(--layer-light);
}
.prt_layer_a > svg :is(path, polygon, rect, circle, ellipse).clr_c {
  fill: var(--layer-mid);
}
.prt_layer_a > svg :is(path, polygon, rect, circle, ellipse).clr_d {
  fill: var(--layer-paper);
}
.prt_layer_a > svg :is(path, polygon, rect, circle, ellipse).clr_e {
  fill: color-mix(in srgb, var(--var_stack_a_hvr_clr_a) 20%, var(--var_stack_a_clr_d));
}
.prt_layer_a > svg :is(path, polygon, rect, circle, ellipse).clr_f {
  fill: var(--var_stack_a_hvr_clr_a);
}
.prt_layer_a > svg .item {
  transform-box: fill-box;
  transform-origin: center;
  translate: calc(var(--on) * var(--x) * 1px) calc(var(--on) * var(--y) * 1px);
  transition: translate 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 35ms), scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(150ms + var(--k) * 60ms), opacity 0.3s ease calc(150ms + var(--k) * 60ms);
}
@media (prefers-reduced-motion: reduce) {
  .prt_layer_a > svg .item {
    transition: none;
    translate: none;
  }
}
.prt_layer_a.is_pending > svg .item {
  scale: 0.4;
  opacity: 0;
}
.prt_layer_a.lit {
  --layer-dark: var(--var_stack_a_hvr_clr_a);
  --layer-light: var(--var_stack_a_hvr_clr_b);
  --layer-mid: var(--var_stack_a_hvr_clr_c);
}

/* ==========================================================================
   Part: prt_dec_ruler_a - Ruler ticker (decorative)
   Full width of its parent: minor ticks every 1.25rem along the bottom and a
   tall major tick at the start with an optional mono label beside it. Laid
   end to end (no gaps), several read as one continuous ruler.
   API: --major-clr (major tick + label; default the heading color) — a
   parent may re-point it, e.g. to the accent for an active step.
   Modifier `vertical`: ticks down the left edge, major tick across the top.
   Colors: ticks follow the section (--var_txt_clr_b, translucent).
   ========================================================================== */
.prt_dec_ruler_a {
  --major-clr: var(--var_hdr_clr_a);
  position: relative;
  height: 2.5rem;
  background: repeating-linear-gradient(to right, color-mix(in srgb, var(--var_txt_clr_b) 45%, transparent) 0 1px, transparent 1px 1.25rem) 0 100%/100% 0.625rem no-repeat;
}
.prt_dec_ruler_a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 100%;
  background: var(--major-clr);
  transition: background 0.4s ease;
}
.prt_dec_ruler_a > .label {
  position: absolute;
  top: 0;
  left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--major-clr);
  transition: color 0.4s ease;
}
.prt_dec_ruler_a.vertical {
  width: 2.5rem;
  height: 100%;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--var_txt_clr_b) 45%, transparent) 0 1px, transparent 1px 1.25rem) 0 0/0.625rem 100% no-repeat;
}
.prt_dec_ruler_a.vertical::before {
  top: 0;
  bottom: auto;
  width: 100%;
  height: 2px;
}
.prt_dec_ruler_a.vertical > .label {
  top: 0.5rem;
  left: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  .prt_dec_ruler_a::before,
  .prt_dec_ruler_a > .label {
    transition: none;
  }
}

/* ==========================================================================
   Part: prt_dec_bracket_a - Large logo bracket (decorative)
   The NPG logo's bracket, scaled up: its top and bottom corner pieces (the
   same SVG masks as prt_logo_a) at the top and bottom of the box the parent
   gives it, open in between. Default = opening bracket "[", modifier
   `right` = closing bracket "]". Width from --size (default 2.5rem; the
   corner keeps the logo's proportions). Color: the section accent.
   ========================================================================== */
.prt_dec_bracket_a {
  --size: 2.5rem;
  position: relative;
  width: var(--size);
  height: 100%;
  pointer-events: none;
}
.prt_dec_bracket_a > .top,
.prt_dec_bracket_a > .bottom {
  position: absolute;
  left: 0;
  width: 100%;
  aspect-ratio: 39.094/62.58;
  background: var(--var_acnt_clr_a);
  mask-size: contain;
  mask-repeat: no-repeat;
}
.prt_dec_bracket_a > .top {
  top: 0;
  mask-image: url("../media/images/branding/marks/top_left_bracket.svg");
}
.prt_dec_bracket_a > .bottom {
  bottom: 0;
  mask-image: url("../media/images/branding/marks/bottom_left_bracket.svg");
}
.prt_dec_bracket_a.right > .top {
  mask-image: url("../media/images/branding/marks/top_right_bracket.svg");
}
.prt_dec_bracket_a.right > .bottom {
  mask-image: url("../media/images/branding/marks/bottom_right_bracket.svg");
}

/* ==========================================================================
   Part: prt_prose_a - Rich text (HTML stored by editors)
   Long-form typography on a ~68ch measure: h2 / h3 rhythm (<mark> = accent),
   h4 as a mono caps label, lists with accent square / mono number markers,
   blockquote with an accent rule, images and figures, inline code and code
   blocks, tables, links in the accent. Empty editor paragraphs
   (<p>&nbsp;</p>) are collapsed by the partials that feed it.
   Modifier `sm`: smaller, muted (descriptions inside cells).
   Colors: section variables only (--var_txt_clr_a/b, --var_hdr_clr_a,
   --var_acnt_clr_a, --var_bdr_clr_a, --var_bg_b)
   ========================================================================== */
.prt_prose_a {
  max-width: 68ch;
  font-size: clamp(1rem, 0.9347826087rem + 0.2173913043cqi, 1.125rem);
  line-height: 1.75;
  color: var(--var_txt_clr_a);
  overflow-wrap: break-word;
}
.prt_prose_a > * {
  margin: 0;
}
.prt_prose_a > * + * {
  margin-top: 1.5rem;
}
.prt_prose_a p {
  font-size: inherit;
  line-height: inherit;
}
.prt_prose_a h2, .prt_prose_a h3, .prt_prose_a h4 {
  color: var(--var_hdr_clr_a);
  scroll-margin-top: var(--hdr-h);
}
.prt_prose_a h2 mark, .prt_prose_a h3 mark, .prt_prose_a h4 mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.prt_prose_a h2 {
  font-size: clamp(1.5rem, 1.1739130435rem + 1.0869565217cqi, 2.125rem);
  line-height: 1.2;
}
.prt_prose_a > h2:not(:first-child) {
  margin-top: 4rem;
}
.prt_prose_a h3 {
  font-size: clamp(1.1875rem, 1.0244565217rem + 0.5434782609cqi, 1.5rem);
  line-height: 1.3;
}
.prt_prose_a > h3:not(:first-child) {
  margin-top: 3rem;
}
.prt_prose_a > h2 + *,
.prt_prose_a > h3 + *,
.prt_prose_a > h4 + * {
  margin-top: 1rem;
}
.prt_prose_a h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.prt_prose_a > h4:not(:first-child) {
  margin-top: 2rem;
}
.prt_prose_a strong, .prt_prose_a b {
  color: var(--var_hdr_clr_a);
  font-weight: 600;
}
.prt_prose_a a {
  color: var(--var_acnt_clr_a);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness 0.2s ease;
}
.prt_prose_a a:hover {
  text-decoration-thickness: 2px;
}
.prt_prose_a ul, .prt_prose_a ol {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}
.prt_prose_a li {
  position: relative;
  padding-left: 2rem;
}
.prt_prose_a li > ul, .prt_prose_a li > ol {
  margin-top: 0.5rem;
}
.prt_prose_a ul > li::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  background: var(--var_acnt_clr_a);
}
.prt_prose_a ul ul > li::before {
  background: none;
  border: 1px solid var(--var_acnt_clr_a);
}
.prt_prose_a ol {
  counter-reset: prt_prose_a_ol;
}
.prt_prose_a ol > li {
  counter-increment: prt_prose_a_ol;
}
.prt_prose_a ol > li::before {
  content: counter(prt_prose_a_ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.3em;
  font-family: var(--font-mono);
  font-size: 0.75em;
  line-height: 1.75;
  color: var(--var_acnt_clr_a);
}
.prt_prose_a blockquote {
  margin-inline: 0;
  padding: 0.25rem 0 0.25rem 2rem;
  border-left: 2px solid var(--var_acnt_clr_a);
  font-family: var(--font-header);
  font-size: clamp(1.1875rem, 1.0244565217rem + 0.5434782609cqi, 1.5rem);
  line-height: 1.45;
  color: var(--var_hdr_clr_a);
}
.prt_prose_a blockquote > * {
  margin: 0;
}
.prt_prose_a blockquote > * + * {
  margin-top: 0.75rem;
}
.prt_prose_a img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--var_bdr_clr_a);
}
.prt_prose_a figure {
  margin-inline: 0;
}
.prt_prose_a figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.prt_prose_a iframe, .prt_prose_a video {
  display: block;
  max-width: 100%;
}
.prt_prose_a code {
  padding: 0.1em 0.35em;
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--var_bg_b);
  border: 1px solid var(--var_bdr_clr_a);
}
.prt_prose_a pre {
  padding: 1.5rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre;
  background: var(--var_bg_b);
  border: 1px dashed var(--var_bdr_clr_a);
}
.prt_prose_a pre code {
  padding: 0;
  font-size: inherit;
  background: none;
  border: 0;
}
.prt_prose_a table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.prt_prose_a th, .prt_prose_a td {
  padding: 0.75rem 1rem;
  border-bottom: 1px dashed var(--var_bdr_clr_a);
  text-align: left;
  vertical-align: top;
}
.prt_prose_a th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.prt_prose_a hr {
  height: 0;
  border: 0;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.prt_prose_a.sm {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.prt_prose_a.sm > * + * {
  margin-top: 0.75rem;
}
.prt_prose_a.sm ul, .prt_prose_a.sm ol {
  gap: 0.25rem;
}
.prt_prose_a.sm li {
  padding-left: 1.5rem;
}
.prt_prose_a.sm ul > li::before {
  left: 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .prt_prose_a a {
    transition: none;
  }
}

/* ==========================================================================
   Part: prt_cursor_a - Site cursor (an arrow that turns toward its motion)
   A fixed, click-through layer over the page. Its arrow (32px, thick
   outline) has its tip exactly on the pointer and turns toward the
   direction of travel, and keeps that heading while the pointer rests
   (a cursor's usual tilt until the first move). Over links and buttons
   (is_link) it stays and changes instead of giving way to the hand: the
   arrow shrinks away into a small dot that pulses, and four corner
   brackets snap in around the pointer like a camera viewfinder (photo
   box), breathing gently; pressed, the frame tightens. A click fires the
   burst at the pointer: eight comic-book rays (long / short alternating)
   shoot out and fade, while the arrow squashes. core.js prtCursorA drives
   it all through custom properties (--x / --y / --r on the arrow,
   --bx / --by for the burst) and copies --var_cursor_a_clr / _bdr_clr
   from the section under the pointer, so it recolors per theme (white with
   a dark outline on orange). Only for a fine pointer with hover and no
   reduced motion: JS adds html.is_cursor_a (native arrow hidden,
   _settings_master) and the state is_on. States: is_hidden (over links /
   text fields, which keep the native I-beam, or outside the window; the
   burst still shows), is_link (over a link / button), is_down (pressed),
   is_pop (burst playing). The native cursor is hidden page-wide while it
   runs (_settings_master). The part is a manual popover shown by JS, so
   it lives in the browser's top layer and stays above open modals
   (<dialog>), which no z-index can reach.
   ========================================================================== */
.prt_cursor_a {
  --size: 32px;
  --tip-x: calc(var(--size) * .5);
  --tip-y: calc(var(--size) / 12);
  --x: -100px;
  --y: -100px;
  --r: -28deg;
  position: fixed;
  inset: 0;
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  color: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.prt_cursor_a.is_on {
  opacity: 1;
}
.prt_cursor_a > .arrow {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: var(--size);
  overflow: visible;
  translate: calc(var(--x) - var(--tip-x)) calc(var(--y) - var(--tip-y));
  transform: rotate(var(--r)) scale(var(--s, 1));
  transform-origin: var(--tip-x) var(--tip-y);
  transition: opacity 0.2s ease, scale 0.12s ease, transform 0.2s ease;
}
.prt_cursor_a > .arrow path {
  fill: var(--var_cursor_a_clr);
  stroke: var(--var_cursor_a_bdr_clr);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  paint-order: stroke;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.prt_cursor_a.is_down > .arrow {
  --s: .82;
}
.prt_cursor_a > .frame {
  --box: 34px;
  --k: 1.6;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--box);
  height: var(--box);
  opacity: 0;
  translate: calc(var(--x) - var(--box) / 2) calc(var(--y) - var(--box) / 2);
  scale: var(--k);
  transition: opacity 0.18s ease, scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.prt_cursor_a > .frame > span {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 0 solid var(--var_cursor_a_clr);
  transition: border-color 0.25s ease;
}
.prt_cursor_a > .frame > .top_left {
  top: 0;
  left: 0;
  border-top-width: 2.5px;
  border-left-width: 2.5px;
}
.prt_cursor_a > .frame > .top_right {
  top: 0;
  right: 0;
  border-top-width: 2.5px;
  border-right-width: 2.5px;
}
.prt_cursor_a > .frame > .bottom_left {
  bottom: 0;
  left: 0;
  border-bottom-width: 2.5px;
  border-left-width: 2.5px;
}
.prt_cursor_a > .frame > .bottom_right {
  bottom: 0;
  right: 0;
  border-bottom-width: 2.5px;
  border-right-width: 2.5px;
}
.prt_cursor_a > .dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--var_cursor_a_clr);
  outline: 2px solid var(--var_cursor_a_bdr_clr);
  opacity: 0;
  translate: calc(var(--x) - 4px) calc(var(--y) - 4px);
  scale: 0;
  transition: opacity 0.18s ease, scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
}
.prt_cursor_a.is_link > .frame {
  --k: 1;
  opacity: 1;
  animation: prt_cursor_a_breathe 1.8s ease-in-out 0.3s infinite;
}
.prt_cursor_a.is_link > .dot {
  opacity: 1;
  scale: 1;
  animation: prt_cursor_a_pulse 1.2s ease-in-out 0.25s infinite;
}
.prt_cursor_a.is_link > .arrow {
  --s: .2;
  opacity: 0;
}
.prt_cursor_a.is_link.is_down > .frame {
  --k: .72;
  animation: none;
}
.prt_cursor_a.is_hidden > .frame, .prt_cursor_a.is_hidden > .dot {
  opacity: 0;
}
.prt_cursor_a.is_hidden > .arrow {
  opacity: 0;
}
.prt_cursor_a > .burst {
  position: absolute;
  top: 0;
  left: 0;
  translate: var(--bx, -100px) var(--by, -100px);
}
.prt_cursor_a > .burst > .ray {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 18px;
  margin-left: -1.5px;
  border-radius: 1.5px;
  background: var(--var_cursor_a_clr);
  opacity: 0;
  rotate: calc(var(--i) * 45deg + 22.5deg);
  transform-origin: 1.5px 0;
}
.prt_cursor_a > .burst > .ray:nth-child(even) {
  height: 11px;
}
.prt_cursor_a.is_pop > .burst > .ray {
  animation: prt_cursor_a_burst 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes prt_cursor_a_burst {
  0% {
    opacity: 1;
    transform: translateY(8px) scaleY(0.3);
  }
  40% {
    opacity: 1;
    transform: translateY(18px) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateY(36px) scaleY(0.4);
  }
}
@keyframes prt_cursor_a_breathe {
  50% {
    scale: 1.1;
  }
}
@keyframes prt_cursor_a_pulse {
  50% {
    scale: 1.35;
  }
}
/* ==========================================================================
   Part: prt_burger_a - Menu icon (hamburger)
   Three 2px lines, 1.25rem wide and 6px apart (the weight of the Lucide
   icons beside it). Open (is_open, set by the script of the button it sits
   in): the middle line draws in to nothing and the outer two meet in the
   middle, then turn into a cross (.2s each). Closing runs it backwards:
   they turn back, then part. Under reduced motion it switches at once.
   Colour: --var_icn_a_clr (the button points it at its text colour)
   ========================================================================== */
.prt_burger_a {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--var_icn_a_clr);
}
.prt_burger_a > .line {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: translate 0.2s cubic-bezier(0.76, 0, 0.24, 1), rotate 0.2s cubic-bezier(0.76, 0, 0.24, 1), scale 0.2s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: 0.2s, 0s, 0.2s;
}
.prt_burger_a > .line:nth-child(1) {
  translate: 0 -6px;
}
.prt_burger_a > .line:nth-child(3) {
  translate: 0 6px;
}
.prt_burger_a.is_open > .line {
  translate: 0 0;
  transition-delay: 0s, 0.2s, 0s;
}
.prt_burger_a.is_open > .line:nth-child(1) {
  rotate: 45deg;
}
.prt_burger_a.is_open > .line:nth-child(2) {
  scale: 0 1;
}
.prt_burger_a.is_open > .line:nth-child(3) {
  rotate: -45deg;
}
@media (prefers-reduced-motion: reduce) {
  .prt_burger_a > .line {
    transition: none;
  }
}

/* ==========================================================================
   Grid System (Desktop-First)
   File: scss/blocks/_blk_grid.scss
   --------------------------------------------------------------------------
   - .grd_row / .blk_row (full-bleed) + .grd_col_wrap / .blk_col_wrap (max-width) + .grd_container / .blk_container (layout owner)
   - Legacy support: .blk_* classes supported for backward compatibility
   - Columns: col-[breakpoint]-[span]  e.g. col-xl-24 col-lg-12 col-md-8 col-sm-6 col-ms-4
   - Modes: .type-grid | .type-flex | .type-free
   - Token-driven gutters & column counts (from var_master)
   ========================================================================== */
.grd_row,
.blk_row {
  width: 100%;
  height: auto;
  position: relative;
  overflow: clip;
  /* No padding modifier. Rows have no default padding (spacing belongs to
     modules); kept so markup stays identical across NPG projects */
}
.grd_row.no-pad,
.blk_row.no-pad {
  padding: 0 !important;
}
.grd_row .grd_col_wrap,
.grd_row .blk_col_wrap,
.blk_row .grd_col_wrap,
.blk_row .blk_col_wrap {
  width: 100%;
  max-width: 1400px;
  height: auto;
  position: relative;
  container: grd/inline-size;
  margin: auto;
  /* Full-width modifier: removes max-width for edge-to-edge layouts
     Use for sections needing full-bleed backgrounds (parallax, heroes, etc.) */
}
.grd_row .grd_col_wrap.type-full,
.grd_row .blk_col_wrap.type-full,
.blk_row .grd_col_wrap.type-full,
.blk_row .blk_col_wrap.type-full {
  max-width: none;
}
.grd_row,
.blk_row {
  /* Page margin (page-level wraps only, not nested grids): content never
     touches the screen edge. The max-width grows by the margins, so content
     is still exactly $xl wide on wide screens. A full-width (type-full) row
     stays edge to edge and hands the margin to its content as --page-inset,
     which container(), container-inset() and the grid lines respect. */
}
.grd_row > .grd_col_wrap,
.grd_row > .blk_col_wrap,
.blk_row > .grd_col_wrap,
.blk_row > .blk_col_wrap {
  --page-inset: 0px;
  max-width: calc(1400px + 2 * clamp(1rem, 4.2vw, 2rem));
  padding-inline: clamp(1rem, 4.2vw, 2rem);
}
.grd_row > .grd_col_wrap.type-full,
.grd_row > .blk_col_wrap.type-full,
.blk_row > .grd_col_wrap.type-full,
.blk_row > .blk_col_wrap.type-full {
  --page-inset: clamp(1rem, 4.2vw, 2rem);
  max-width: none;
  padding-inline: 0;
}
.grd_row .grd_col_wrap .grd_container,
.grd_row .grd_col_wrap .blk_container,
.grd_row .blk_col_wrap .grd_container,
.grd_row .blk_col_wrap .blk_container,
.blk_row .grd_col_wrap .grd_container,
.blk_row .grd_col_wrap .blk_container,
.blk_row .blk_col_wrap .grd_container,
.blk_row .blk_col_wrap .blk_container {
  width: 100%;
  height: auto;
  position: relative;
  margin: auto;
  gap: var(--active_gutter);
  --active_gutter: 32px;
  --active_column: 24;
}
@container (max-width: 1280px) {
  .grd_row .grd_col_wrap .grd_container,
  .grd_row .grd_col_wrap .blk_container,
  .grd_row .blk_col_wrap .grd_container,
  .grd_row .blk_col_wrap .blk_container,
  .blk_row .grd_col_wrap .grd_container,
  .blk_row .grd_col_wrap .blk_container,
  .blk_row .blk_col_wrap .grd_container,
  .blk_row .blk_col_wrap .blk_container {
    --active_gutter: 28px;
    --active_column: 24;
  }
}
@container (max-width: 1024px) {
  .grd_row .grd_col_wrap .grd_container,
  .grd_row .grd_col_wrap .blk_container,
  .grd_row .blk_col_wrap .grd_container,
  .grd_row .blk_col_wrap .blk_container,
  .blk_row .grd_col_wrap .grd_container,
  .blk_row .grd_col_wrap .blk_container,
  .blk_row .blk_col_wrap .grd_container,
  .blk_row .blk_col_wrap .blk_container {
    --active_gutter: 24px;
    --active_column: 16;
  }
}
@container (max-width: 645px) {
  .grd_row .grd_col_wrap .grd_container,
  .grd_row .grd_col_wrap .blk_container,
  .grd_row .blk_col_wrap .grd_container,
  .grd_row .blk_col_wrap .blk_container,
  .blk_row .grd_col_wrap .grd_container,
  .blk_row .grd_col_wrap .blk_container,
  .blk_row .blk_col_wrap .grd_container,
  .blk_row .blk_col_wrap .blk_container {
    --active_gutter: 20px;
    --active_column: 12;
  }
}
@container (max-width: 480px) {
  .grd_row .grd_col_wrap .grd_container,
  .grd_row .grd_col_wrap .blk_container,
  .grd_row .blk_col_wrap .grd_container,
  .grd_row .blk_col_wrap .blk_container,
  .blk_row .grd_col_wrap .grd_container,
  .blk_row .grd_col_wrap .blk_container,
  .blk_row .blk_col_wrap .grd_container,
  .blk_row .blk_col_wrap .blk_container {
    --active_gutter: 16px;
    --active_column: 8;
  }
}
.grd_row .grd_col_wrap .grd_container,
.grd_row .grd_col_wrap .blk_container,
.grd_row .blk_col_wrap .grd_container,
.grd_row .blk_col_wrap .blk_container,
.blk_row .grd_col_wrap .grd_container,
.blk_row .grd_col_wrap .blk_container,
.blk_row .blk_col_wrap .grd_container,
.blk_row .blk_col_wrap .blk_container {
  /* base column hook */
}
.grd_row .grd_col_wrap .grd_container > [class^=col-],
.grd_row .grd_col_wrap .grd_container > [class*=" col-"],
.grd_row .grd_col_wrap .blk_container > [class^=col-],
.grd_row .grd_col_wrap .blk_container > [class*=" col-"],
.grd_row .blk_col_wrap .grd_container > [class^=col-],
.grd_row .blk_col_wrap .grd_container > [class*=" col-"],
.grd_row .blk_col_wrap .blk_container > [class^=col-],
.grd_row .blk_col_wrap .blk_container > [class*=" col-"],
.blk_row .grd_col_wrap .grd_container > [class^=col-],
.blk_row .grd_col_wrap .grd_container > [class*=" col-"],
.blk_row .grd_col_wrap .blk_container > [class^=col-],
.blk_row .grd_col_wrap .blk_container > [class*=" col-"],
.blk_row .blk_col_wrap .grd_container > [class^=col-],
.blk_row .blk_col_wrap .grd_container > [class*=" col-"],
.blk_row .blk_col_wrap .blk_container > [class^=col-],
.blk_row .blk_col_wrap .blk_container > [class*=" col-"] {
  min-width: 0;
  --span: var(--active_column); /* default full width */
}
.grd_row .grd_col_wrap .grd_container.type-grid,
.grd_row .grd_col_wrap .blk_container.type-grid,
.grd_row .blk_col_wrap .grd_container.type-grid,
.grd_row .blk_col_wrap .blk_container.type-grid,
.blk_row .grd_col_wrap .grd_container.type-grid,
.blk_row .grd_col_wrap .blk_container.type-grid,
.blk_row .blk_col_wrap .grd_container.type-grid,
.blk_row .blk_col_wrap .blk_container.type-grid {
  display: grid;
  grid-template-columns: repeat(var(--active_column), minmax(0, 1fr));
}
.grd_row .grd_col_wrap .grd_container.type-grid > [class^=col-],
.grd_row .grd_col_wrap .grd_container.type-grid > [class*=" col-"],
.grd_row .grd_col_wrap .blk_container.type-grid > [class^=col-],
.grd_row .grd_col_wrap .blk_container.type-grid > [class*=" col-"],
.grd_row .blk_col_wrap .grd_container.type-grid > [class^=col-],
.grd_row .blk_col_wrap .grd_container.type-grid > [class*=" col-"],
.grd_row .blk_col_wrap .blk_container.type-grid > [class^=col-],
.grd_row .blk_col_wrap .blk_container.type-grid > [class*=" col-"],
.blk_row .grd_col_wrap .grd_container.type-grid > [class^=col-],
.blk_row .grd_col_wrap .grd_container.type-grid > [class*=" col-"],
.blk_row .grd_col_wrap .blk_container.type-grid > [class^=col-],
.blk_row .grd_col_wrap .blk_container.type-grid > [class*=" col-"],
.blk_row .blk_col_wrap .grd_container.type-grid > [class^=col-],
.blk_row .blk_col_wrap .grd_container.type-grid > [class*=" col-"],
.blk_row .blk_col_wrap .blk_container.type-grid > [class^=col-],
.blk_row .blk_col_wrap .blk_container.type-grid > [class*=" col-"] {
  grid-column: span var(--span);
}
.grd_row .grd_col_wrap .grd_container.type-flex,
.grd_row .grd_col_wrap .blk_container.type-flex,
.grd_row .blk_col_wrap .grd_container.type-flex,
.grd_row .blk_col_wrap .blk_container.type-flex,
.blk_row .grd_col_wrap .grd_container.type-flex,
.blk_row .grd_col_wrap .blk_container.type-flex,
.blk_row .blk_col_wrap .grd_container.type-flex,
.blk_row .blk_col_wrap .blk_container.type-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
}
.grd_row .grd_col_wrap .grd_container.type-flex > [class^=col-],
.grd_row .grd_col_wrap .grd_container.type-flex > [class*=" col-"],
.grd_row .grd_col_wrap .blk_container.type-flex > [class^=col-],
.grd_row .grd_col_wrap .blk_container.type-flex > [class*=" col-"],
.grd_row .blk_col_wrap .grd_container.type-flex > [class^=col-],
.grd_row .blk_col_wrap .grd_container.type-flex > [class*=" col-"],
.grd_row .blk_col_wrap .blk_container.type-flex > [class^=col-],
.grd_row .blk_col_wrap .blk_container.type-flex > [class*=" col-"],
.blk_row .grd_col_wrap .grd_container.type-flex > [class^=col-],
.blk_row .grd_col_wrap .grd_container.type-flex > [class*=" col-"],
.blk_row .grd_col_wrap .blk_container.type-flex > [class^=col-],
.blk_row .grd_col_wrap .blk_container.type-flex > [class*=" col-"],
.blk_row .blk_col_wrap .grd_container.type-flex > [class^=col-],
.blk_row .blk_col_wrap .grd_container.type-flex > [class*=" col-"],
.blk_row .blk_col_wrap .blk_container.type-flex > [class^=col-],
.blk_row .blk_col_wrap .blk_container.type-flex > [class*=" col-"] {
  --w: calc(
    ((100% - (var(--active_gutter) * (var(--active_column) - 1))) / var(--active_column)) * var(--span)
    + (var(--active_gutter) * (var(--span) - 1))
  );
  flex: 0 0 var(--w);
  max-width: var(--w);
}
.grd_row .grd_col_wrap .grd_container.type-free,
.grd_row .grd_col_wrap .blk_container.type-free,
.grd_row .blk_col_wrap .grd_container.type-free,
.grd_row .blk_col_wrap .blk_container.type-free,
.blk_row .grd_col_wrap .grd_container.type-free,
.blk_row .grd_col_wrap .blk_container.type-free,
.blk_row .blk_col_wrap .grd_container.type-free,
.blk_row .blk_col_wrap .blk_container.type-free {
  display: block;
}
.grd_row .grd_col_wrap .grd_container.type-free > [class^=col-],
.grd_row .grd_col_wrap .grd_container.type-free > [class*=" col-"],
.grd_row .grd_col_wrap .blk_container.type-free > [class^=col-],
.grd_row .grd_col_wrap .blk_container.type-free > [class*=" col-"],
.grd_row .blk_col_wrap .grd_container.type-free > [class^=col-],
.grd_row .blk_col_wrap .grd_container.type-free > [class*=" col-"],
.grd_row .blk_col_wrap .blk_container.type-free > [class^=col-],
.grd_row .blk_col_wrap .blk_container.type-free > [class*=" col-"],
.blk_row .grd_col_wrap .grd_container.type-free > [class^=col-],
.blk_row .grd_col_wrap .grd_container.type-free > [class*=" col-"],
.blk_row .grd_col_wrap .blk_container.type-free > [class^=col-],
.blk_row .grd_col_wrap .blk_container.type-free > [class*=" col-"],
.blk_row .blk_col_wrap .grd_container.type-free > [class^=col-],
.blk_row .blk_col_wrap .grd_container.type-free > [class*=" col-"],
.blk_row .blk_col_wrap .blk_container.type-free > [class^=col-],
.blk_row .blk_col_wrap .blk_container.type-free > [class*=" col-"] {
  display: block;
}
.grd_row .grd_col_wrap .grd_container,
.grd_row .grd_col_wrap .blk_container,
.grd_row .blk_col_wrap .grd_container,
.grd_row .blk_col_wrap .blk_container,
.blk_row .grd_col_wrap .grd_container,
.blk_row .grd_col_wrap .blk_container,
.blk_row .blk_col_wrap .grd_container,
.blk_row .blk_col_wrap .blk_container {
  /* No-gap modifier: removes gutter between columns */
}
.grd_row .grd_col_wrap .grd_container.no-gap,
.grd_row .grd_col_wrap .blk_container.no-gap,
.grd_row .blk_col_wrap .grd_container.no-gap,
.grd_row .blk_col_wrap .blk_container.no-gap,
.blk_row .grd_col_wrap .grd_container.no-gap,
.blk_row .grd_col_wrap .blk_container.no-gap,
.blk_row .blk_col_wrap .grd_container.no-gap,
.blk_row .blk_col_wrap .blk_container.no-gap {
  gap: 0;
  --active_gutter: 0px;
}
.grd_row .grd_col_wrap .grd_container,
.grd_row .grd_col_wrap .blk_container,
.grd_row .blk_col_wrap .grd_container,
.grd_row .blk_col_wrap .blk_container,
.blk_row .grd_col_wrap .grd_container,
.blk_row .grd_col_wrap .blk_container,
.blk_row .blk_col_wrap .grd_container,
.blk_row .blk_col_wrap .blk_container {
  /* XL / base – col-# and col-xl-# */
}
.grd_row .grd_col_wrap .grd_container > [class~=col-1],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-1],
.grd_row .grd_col_wrap .blk_container > [class~=col-1],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-1],
.grd_row .blk_col_wrap .grd_container > [class~=col-1],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-1],
.grd_row .blk_col_wrap .blk_container > [class~=col-1],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-1],
.blk_row .grd_col_wrap .grd_container > [class~=col-1],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-1],
.blk_row .grd_col_wrap .blk_container > [class~=col-1],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-1],
.blk_row .blk_col_wrap .grd_container > [class~=col-1],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-1],
.blk_row .blk_col_wrap .blk_container > [class~=col-1],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-1] {
  --span: 1;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-2],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-2],
.grd_row .grd_col_wrap .blk_container > [class~=col-2],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-2],
.grd_row .blk_col_wrap .grd_container > [class~=col-2],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-2],
.grd_row .blk_col_wrap .blk_container > [class~=col-2],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-2],
.blk_row .grd_col_wrap .grd_container > [class~=col-2],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-2],
.blk_row .grd_col_wrap .blk_container > [class~=col-2],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-2],
.blk_row .blk_col_wrap .grd_container > [class~=col-2],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-2],
.blk_row .blk_col_wrap .blk_container > [class~=col-2],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-2] {
  --span: 2;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-3],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-3],
.grd_row .grd_col_wrap .blk_container > [class~=col-3],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-3],
.grd_row .blk_col_wrap .grd_container > [class~=col-3],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-3],
.grd_row .blk_col_wrap .blk_container > [class~=col-3],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-3],
.blk_row .grd_col_wrap .grd_container > [class~=col-3],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-3],
.blk_row .grd_col_wrap .blk_container > [class~=col-3],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-3],
.blk_row .blk_col_wrap .grd_container > [class~=col-3],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-3],
.blk_row .blk_col_wrap .blk_container > [class~=col-3],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-3] {
  --span: 3;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-4],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-4],
.grd_row .grd_col_wrap .blk_container > [class~=col-4],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-4],
.grd_row .blk_col_wrap .grd_container > [class~=col-4],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-4],
.grd_row .blk_col_wrap .blk_container > [class~=col-4],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-4],
.blk_row .grd_col_wrap .grd_container > [class~=col-4],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-4],
.blk_row .grd_col_wrap .blk_container > [class~=col-4],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-4],
.blk_row .blk_col_wrap .grd_container > [class~=col-4],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-4],
.blk_row .blk_col_wrap .blk_container > [class~=col-4],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-4] {
  --span: 4;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-5],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-5],
.grd_row .grd_col_wrap .blk_container > [class~=col-5],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-5],
.grd_row .blk_col_wrap .grd_container > [class~=col-5],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-5],
.grd_row .blk_col_wrap .blk_container > [class~=col-5],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-5],
.blk_row .grd_col_wrap .grd_container > [class~=col-5],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-5],
.blk_row .grd_col_wrap .blk_container > [class~=col-5],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-5],
.blk_row .blk_col_wrap .grd_container > [class~=col-5],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-5],
.blk_row .blk_col_wrap .blk_container > [class~=col-5],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-5] {
  --span: 5;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-6],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-6],
.grd_row .grd_col_wrap .blk_container > [class~=col-6],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-6],
.grd_row .blk_col_wrap .grd_container > [class~=col-6],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-6],
.grd_row .blk_col_wrap .blk_container > [class~=col-6],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-6],
.blk_row .grd_col_wrap .grd_container > [class~=col-6],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-6],
.blk_row .grd_col_wrap .blk_container > [class~=col-6],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-6],
.blk_row .blk_col_wrap .grd_container > [class~=col-6],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-6],
.blk_row .blk_col_wrap .blk_container > [class~=col-6],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-6] {
  --span: 6;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-7],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-7],
.grd_row .grd_col_wrap .blk_container > [class~=col-7],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-7],
.grd_row .blk_col_wrap .grd_container > [class~=col-7],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-7],
.grd_row .blk_col_wrap .blk_container > [class~=col-7],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-7],
.blk_row .grd_col_wrap .grd_container > [class~=col-7],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-7],
.blk_row .grd_col_wrap .blk_container > [class~=col-7],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-7],
.blk_row .blk_col_wrap .grd_container > [class~=col-7],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-7],
.blk_row .blk_col_wrap .blk_container > [class~=col-7],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-7] {
  --span: 7;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-8],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-8],
.grd_row .grd_col_wrap .blk_container > [class~=col-8],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-8],
.grd_row .blk_col_wrap .grd_container > [class~=col-8],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-8],
.grd_row .blk_col_wrap .blk_container > [class~=col-8],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-8],
.blk_row .grd_col_wrap .grd_container > [class~=col-8],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-8],
.blk_row .grd_col_wrap .blk_container > [class~=col-8],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-8],
.blk_row .blk_col_wrap .grd_container > [class~=col-8],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-8],
.blk_row .blk_col_wrap .blk_container > [class~=col-8],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-8] {
  --span: 8;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-9],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-9],
.grd_row .grd_col_wrap .blk_container > [class~=col-9],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-9],
.grd_row .blk_col_wrap .grd_container > [class~=col-9],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-9],
.grd_row .blk_col_wrap .blk_container > [class~=col-9],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-9],
.blk_row .grd_col_wrap .grd_container > [class~=col-9],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-9],
.blk_row .grd_col_wrap .blk_container > [class~=col-9],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-9],
.blk_row .blk_col_wrap .grd_container > [class~=col-9],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-9],
.blk_row .blk_col_wrap .blk_container > [class~=col-9],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-9] {
  --span: 9;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-10],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-10],
.grd_row .grd_col_wrap .blk_container > [class~=col-10],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-10],
.grd_row .blk_col_wrap .grd_container > [class~=col-10],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-10],
.grd_row .blk_col_wrap .blk_container > [class~=col-10],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-10],
.blk_row .grd_col_wrap .grd_container > [class~=col-10],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-10],
.blk_row .grd_col_wrap .blk_container > [class~=col-10],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-10],
.blk_row .blk_col_wrap .grd_container > [class~=col-10],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-10],
.blk_row .blk_col_wrap .blk_container > [class~=col-10],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-10] {
  --span: 10;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-11],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-11],
.grd_row .grd_col_wrap .blk_container > [class~=col-11],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-11],
.grd_row .blk_col_wrap .grd_container > [class~=col-11],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-11],
.grd_row .blk_col_wrap .blk_container > [class~=col-11],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-11],
.blk_row .grd_col_wrap .grd_container > [class~=col-11],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-11],
.blk_row .grd_col_wrap .blk_container > [class~=col-11],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-11],
.blk_row .blk_col_wrap .grd_container > [class~=col-11],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-11],
.blk_row .blk_col_wrap .blk_container > [class~=col-11],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-11] {
  --span: 11;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-12],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-12],
.grd_row .grd_col_wrap .blk_container > [class~=col-12],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-12],
.grd_row .blk_col_wrap .grd_container > [class~=col-12],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-12],
.grd_row .blk_col_wrap .blk_container > [class~=col-12],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-12],
.blk_row .grd_col_wrap .grd_container > [class~=col-12],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-12],
.blk_row .grd_col_wrap .blk_container > [class~=col-12],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-12],
.blk_row .blk_col_wrap .grd_container > [class~=col-12],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-12],
.blk_row .blk_col_wrap .blk_container > [class~=col-12],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-12] {
  --span: 12;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-13],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-13],
.grd_row .grd_col_wrap .blk_container > [class~=col-13],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-13],
.grd_row .blk_col_wrap .grd_container > [class~=col-13],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-13],
.grd_row .blk_col_wrap .blk_container > [class~=col-13],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-13],
.blk_row .grd_col_wrap .grd_container > [class~=col-13],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-13],
.blk_row .grd_col_wrap .blk_container > [class~=col-13],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-13],
.blk_row .blk_col_wrap .grd_container > [class~=col-13],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-13],
.blk_row .blk_col_wrap .blk_container > [class~=col-13],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-13] {
  --span: 13;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-14],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-14],
.grd_row .grd_col_wrap .blk_container > [class~=col-14],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-14],
.grd_row .blk_col_wrap .grd_container > [class~=col-14],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-14],
.grd_row .blk_col_wrap .blk_container > [class~=col-14],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-14],
.blk_row .grd_col_wrap .grd_container > [class~=col-14],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-14],
.blk_row .grd_col_wrap .blk_container > [class~=col-14],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-14],
.blk_row .blk_col_wrap .grd_container > [class~=col-14],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-14],
.blk_row .blk_col_wrap .blk_container > [class~=col-14],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-14] {
  --span: 14;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-15],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-15],
.grd_row .grd_col_wrap .blk_container > [class~=col-15],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-15],
.grd_row .blk_col_wrap .grd_container > [class~=col-15],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-15],
.grd_row .blk_col_wrap .blk_container > [class~=col-15],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-15],
.blk_row .grd_col_wrap .grd_container > [class~=col-15],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-15],
.blk_row .grd_col_wrap .blk_container > [class~=col-15],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-15],
.blk_row .blk_col_wrap .grd_container > [class~=col-15],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-15],
.blk_row .blk_col_wrap .blk_container > [class~=col-15],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-15] {
  --span: 15;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-16],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-16],
.grd_row .grd_col_wrap .blk_container > [class~=col-16],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-16],
.grd_row .blk_col_wrap .grd_container > [class~=col-16],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-16],
.grd_row .blk_col_wrap .blk_container > [class~=col-16],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-16],
.blk_row .grd_col_wrap .grd_container > [class~=col-16],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-16],
.blk_row .grd_col_wrap .blk_container > [class~=col-16],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-16],
.blk_row .blk_col_wrap .grd_container > [class~=col-16],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-16],
.blk_row .blk_col_wrap .blk_container > [class~=col-16],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-16] {
  --span: 16;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-17],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-17],
.grd_row .grd_col_wrap .blk_container > [class~=col-17],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-17],
.grd_row .blk_col_wrap .grd_container > [class~=col-17],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-17],
.grd_row .blk_col_wrap .blk_container > [class~=col-17],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-17],
.blk_row .grd_col_wrap .grd_container > [class~=col-17],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-17],
.blk_row .grd_col_wrap .blk_container > [class~=col-17],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-17],
.blk_row .blk_col_wrap .grd_container > [class~=col-17],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-17],
.blk_row .blk_col_wrap .blk_container > [class~=col-17],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-17] {
  --span: 17;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-18],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-18],
.grd_row .grd_col_wrap .blk_container > [class~=col-18],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-18],
.grd_row .blk_col_wrap .grd_container > [class~=col-18],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-18],
.grd_row .blk_col_wrap .blk_container > [class~=col-18],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-18],
.blk_row .grd_col_wrap .grd_container > [class~=col-18],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-18],
.blk_row .grd_col_wrap .blk_container > [class~=col-18],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-18],
.blk_row .blk_col_wrap .grd_container > [class~=col-18],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-18],
.blk_row .blk_col_wrap .blk_container > [class~=col-18],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-18] {
  --span: 18;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-19],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-19],
.grd_row .grd_col_wrap .blk_container > [class~=col-19],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-19],
.grd_row .blk_col_wrap .grd_container > [class~=col-19],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-19],
.grd_row .blk_col_wrap .blk_container > [class~=col-19],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-19],
.blk_row .grd_col_wrap .grd_container > [class~=col-19],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-19],
.blk_row .grd_col_wrap .blk_container > [class~=col-19],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-19],
.blk_row .blk_col_wrap .grd_container > [class~=col-19],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-19],
.blk_row .blk_col_wrap .blk_container > [class~=col-19],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-19] {
  --span: 19;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-20],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-20],
.grd_row .grd_col_wrap .blk_container > [class~=col-20],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-20],
.grd_row .blk_col_wrap .grd_container > [class~=col-20],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-20],
.grd_row .blk_col_wrap .blk_container > [class~=col-20],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-20],
.blk_row .grd_col_wrap .grd_container > [class~=col-20],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-20],
.blk_row .grd_col_wrap .blk_container > [class~=col-20],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-20],
.blk_row .blk_col_wrap .grd_container > [class~=col-20],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-20],
.blk_row .blk_col_wrap .blk_container > [class~=col-20],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-20] {
  --span: 20;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-21],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-21],
.grd_row .grd_col_wrap .blk_container > [class~=col-21],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-21],
.grd_row .blk_col_wrap .grd_container > [class~=col-21],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-21],
.grd_row .blk_col_wrap .blk_container > [class~=col-21],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-21],
.blk_row .grd_col_wrap .grd_container > [class~=col-21],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-21],
.blk_row .grd_col_wrap .blk_container > [class~=col-21],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-21],
.blk_row .blk_col_wrap .grd_container > [class~=col-21],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-21],
.blk_row .blk_col_wrap .blk_container > [class~=col-21],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-21] {
  --span: 21;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-22],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-22],
.grd_row .grd_col_wrap .blk_container > [class~=col-22],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-22],
.grd_row .blk_col_wrap .grd_container > [class~=col-22],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-22],
.grd_row .blk_col_wrap .blk_container > [class~=col-22],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-22],
.blk_row .grd_col_wrap .grd_container > [class~=col-22],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-22],
.blk_row .grd_col_wrap .blk_container > [class~=col-22],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-22],
.blk_row .blk_col_wrap .grd_container > [class~=col-22],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-22],
.blk_row .blk_col_wrap .blk_container > [class~=col-22],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-22] {
  --span: 22;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-23],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-23],
.grd_row .grd_col_wrap .blk_container > [class~=col-23],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-23],
.grd_row .blk_col_wrap .grd_container > [class~=col-23],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-23],
.grd_row .blk_col_wrap .blk_container > [class~=col-23],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-23],
.blk_row .grd_col_wrap .grd_container > [class~=col-23],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-23],
.blk_row .grd_col_wrap .blk_container > [class~=col-23],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-23],
.blk_row .blk_col_wrap .grd_container > [class~=col-23],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-23],
.blk_row .blk_col_wrap .blk_container > [class~=col-23],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-23] {
  --span: 23;
}
.grd_row .grd_col_wrap .grd_container > [class~=col-24],
.grd_row .grd_col_wrap .grd_container > [class~=col-xl-24],
.grd_row .grd_col_wrap .blk_container > [class~=col-24],
.grd_row .grd_col_wrap .blk_container > [class~=col-xl-24],
.grd_row .blk_col_wrap .grd_container > [class~=col-24],
.grd_row .blk_col_wrap .grd_container > [class~=col-xl-24],
.grd_row .blk_col_wrap .blk_container > [class~=col-24],
.grd_row .blk_col_wrap .blk_container > [class~=col-xl-24],
.blk_row .grd_col_wrap .grd_container > [class~=col-24],
.blk_row .grd_col_wrap .grd_container > [class~=col-xl-24],
.blk_row .grd_col_wrap .blk_container > [class~=col-24],
.blk_row .grd_col_wrap .blk_container > [class~=col-xl-24],
.blk_row .blk_col_wrap .grd_container > [class~=col-24],
.blk_row .blk_col_wrap .grd_container > [class~=col-xl-24],
.blk_row .blk_col_wrap .blk_container > [class~=col-24],
.blk_row .blk_col_wrap .blk_container > [class~=col-xl-24] {
  --span: 24;
}
.grd_row .grd_col_wrap .grd_container,
.grd_row .grd_col_wrap .blk_container,
.grd_row .blk_col_wrap .grd_container,
.grd_row .blk_col_wrap .blk_container,
.blk_row .grd_col_wrap .grd_container,
.blk_row .grd_col_wrap .blk_container,
.blk_row .blk_col_wrap .grd_container,
.blk_row .blk_col_wrap .blk_container {
  /* LG / MD / SM / MS in one loop */
}
@container (max-width: 1280px) {
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-1],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-1],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-1],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-1],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-1],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-1],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-1],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-1] {
    --span: 1;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-2],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-2],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-2],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-2],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-2],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-2],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-2],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-2] {
    --span: 2;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-3],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-3],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-3],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-3],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-3],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-3],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-3],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-3] {
    --span: 3;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-4],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-4],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-4],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-4],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-4],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-4],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-4],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-4] {
    --span: 4;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-5],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-5],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-5],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-5],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-5],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-5],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-5],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-5] {
    --span: 5;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-6],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-6],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-6],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-6],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-6],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-6],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-6],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-6] {
    --span: 6;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-7],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-7],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-7],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-7],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-7],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-7],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-7],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-7] {
    --span: 7;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-8],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-8],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-8],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-8],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-8],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-8],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-8],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-8] {
    --span: 8;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-9],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-9],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-9],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-9],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-9],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-9],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-9],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-9] {
    --span: 9;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-10],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-10],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-10],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-10],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-10],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-10],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-10],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-10] {
    --span: 10;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-11],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-11],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-11],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-11],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-11],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-11],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-11],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-11] {
    --span: 11;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-12],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-12],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-12],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-12],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-12],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-12],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-12],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-12] {
    --span: 12;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-13],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-13],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-13],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-13],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-13],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-13],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-13],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-13] {
    --span: 13;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-14],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-14],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-14],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-14],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-14],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-14],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-14],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-14] {
    --span: 14;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-15],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-15],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-15],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-15],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-15],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-15],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-15],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-15] {
    --span: 15;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-16],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-16],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-16],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-16],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-16],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-16],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-16],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-16] {
    --span: 16;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-17],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-17],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-17],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-17],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-17],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-17],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-17],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-17] {
    --span: 17;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-18],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-18],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-18],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-18],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-18],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-18],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-18],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-18] {
    --span: 18;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-19],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-19],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-19],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-19],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-19],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-19],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-19],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-19] {
    --span: 19;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-20],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-20],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-20],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-20],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-20],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-20],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-20],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-20] {
    --span: 20;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-21],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-21],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-21],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-21],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-21],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-21],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-21],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-21] {
    --span: 21;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-22],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-22],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-22],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-22],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-22],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-22],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-22],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-22] {
    --span: 22;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-23],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-23],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-23],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-23],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-23],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-23],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-23],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-23] {
    --span: 23;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-lg-24],
  .grd_row .grd_col_wrap .blk_container > [class~=col-lg-24],
  .grd_row .blk_col_wrap .grd_container > [class~=col-lg-24],
  .grd_row .blk_col_wrap .blk_container > [class~=col-lg-24],
  .blk_row .grd_col_wrap .grd_container > [class~=col-lg-24],
  .blk_row .grd_col_wrap .blk_container > [class~=col-lg-24],
  .blk_row .blk_col_wrap .grd_container > [class~=col-lg-24],
  .blk_row .blk_col_wrap .blk_container > [class~=col-lg-24] {
    --span: 24;
  }
}
@container (max-width: 1024px) {
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-1],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-1],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-1],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-1],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-1],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-1],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-1],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-1] {
    --span: 1;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-2],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-2],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-2],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-2],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-2],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-2],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-2],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-2] {
    --span: 2;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-3],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-3],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-3],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-3],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-3],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-3],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-3],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-3] {
    --span: 3;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-4],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-4],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-4],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-4],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-4],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-4],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-4],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-4] {
    --span: 4;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-5],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-5],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-5],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-5],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-5],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-5],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-5],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-5] {
    --span: 5;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-6],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-6],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-6],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-6],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-6],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-6],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-6],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-6] {
    --span: 6;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-7],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-7],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-7],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-7],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-7],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-7],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-7],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-7] {
    --span: 7;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-8],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-8],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-8],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-8],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-8],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-8],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-8],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-8] {
    --span: 8;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-9],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-9],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-9],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-9],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-9],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-9],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-9],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-9] {
    --span: 9;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-10],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-10],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-10],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-10],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-10],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-10],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-10],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-10] {
    --span: 10;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-11],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-11],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-11],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-11],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-11],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-11],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-11],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-11] {
    --span: 11;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-12],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-12],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-12],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-12],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-12],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-12],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-12],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-12] {
    --span: 12;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-13],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-13],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-13],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-13],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-13],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-13],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-13],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-13] {
    --span: 13;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-14],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-14],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-14],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-14],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-14],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-14],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-14],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-14] {
    --span: 14;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-15],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-15],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-15],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-15],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-15],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-15],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-15],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-15] {
    --span: 15;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-md-16],
  .grd_row .grd_col_wrap .blk_container > [class~=col-md-16],
  .grd_row .blk_col_wrap .grd_container > [class~=col-md-16],
  .grd_row .blk_col_wrap .blk_container > [class~=col-md-16],
  .blk_row .grd_col_wrap .grd_container > [class~=col-md-16],
  .blk_row .grd_col_wrap .blk_container > [class~=col-md-16],
  .blk_row .blk_col_wrap .grd_container > [class~=col-md-16],
  .blk_row .blk_col_wrap .blk_container > [class~=col-md-16] {
    --span: 16;
  }
}
@container (max-width: 645px) {
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-1],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-1],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-1],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-1],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-1],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-1],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-1],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-1] {
    --span: 1;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-2],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-2],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-2],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-2],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-2],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-2],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-2],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-2] {
    --span: 2;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-3],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-3],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-3],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-3],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-3],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-3],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-3],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-3] {
    --span: 3;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-4],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-4],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-4],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-4],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-4],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-4],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-4],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-4] {
    --span: 4;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-5],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-5],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-5],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-5],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-5],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-5],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-5],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-5] {
    --span: 5;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-6],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-6],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-6],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-6],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-6],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-6],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-6],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-6] {
    --span: 6;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-7],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-7],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-7],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-7],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-7],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-7],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-7],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-7] {
    --span: 7;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-8],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-8],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-8],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-8],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-8],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-8],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-8],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-8] {
    --span: 8;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-9],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-9],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-9],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-9],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-9],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-9],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-9],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-9] {
    --span: 9;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-10],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-10],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-10],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-10],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-10],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-10],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-10],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-10] {
    --span: 10;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-11],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-11],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-11],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-11],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-11],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-11],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-11],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-11] {
    --span: 11;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-sm-12],
  .grd_row .grd_col_wrap .blk_container > [class~=col-sm-12],
  .grd_row .blk_col_wrap .grd_container > [class~=col-sm-12],
  .grd_row .blk_col_wrap .blk_container > [class~=col-sm-12],
  .blk_row .grd_col_wrap .grd_container > [class~=col-sm-12],
  .blk_row .grd_col_wrap .blk_container > [class~=col-sm-12],
  .blk_row .blk_col_wrap .grd_container > [class~=col-sm-12],
  .blk_row .blk_col_wrap .blk_container > [class~=col-sm-12] {
    --span: 12;
  }
}
@container (max-width: 480px) {
  .grd_row .grd_col_wrap .grd_container > [class~=col-ms-1],
  .grd_row .grd_col_wrap .blk_container > [class~=col-ms-1],
  .grd_row .blk_col_wrap .grd_container > [class~=col-ms-1],
  .grd_row .blk_col_wrap .blk_container > [class~=col-ms-1],
  .blk_row .grd_col_wrap .grd_container > [class~=col-ms-1],
  .blk_row .grd_col_wrap .blk_container > [class~=col-ms-1],
  .blk_row .blk_col_wrap .grd_container > [class~=col-ms-1],
  .blk_row .blk_col_wrap .blk_container > [class~=col-ms-1] {
    --span: 1;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-ms-2],
  .grd_row .grd_col_wrap .blk_container > [class~=col-ms-2],
  .grd_row .blk_col_wrap .grd_container > [class~=col-ms-2],
  .grd_row .blk_col_wrap .blk_container > [class~=col-ms-2],
  .blk_row .grd_col_wrap .grd_container > [class~=col-ms-2],
  .blk_row .grd_col_wrap .blk_container > [class~=col-ms-2],
  .blk_row .blk_col_wrap .grd_container > [class~=col-ms-2],
  .blk_row .blk_col_wrap .blk_container > [class~=col-ms-2] {
    --span: 2;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-ms-3],
  .grd_row .grd_col_wrap .blk_container > [class~=col-ms-3],
  .grd_row .blk_col_wrap .grd_container > [class~=col-ms-3],
  .grd_row .blk_col_wrap .blk_container > [class~=col-ms-3],
  .blk_row .grd_col_wrap .grd_container > [class~=col-ms-3],
  .blk_row .grd_col_wrap .blk_container > [class~=col-ms-3],
  .blk_row .blk_col_wrap .grd_container > [class~=col-ms-3],
  .blk_row .blk_col_wrap .blk_container > [class~=col-ms-3] {
    --span: 3;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-ms-4],
  .grd_row .grd_col_wrap .blk_container > [class~=col-ms-4],
  .grd_row .blk_col_wrap .grd_container > [class~=col-ms-4],
  .grd_row .blk_col_wrap .blk_container > [class~=col-ms-4],
  .blk_row .grd_col_wrap .grd_container > [class~=col-ms-4],
  .blk_row .grd_col_wrap .blk_container > [class~=col-ms-4],
  .blk_row .blk_col_wrap .grd_container > [class~=col-ms-4],
  .blk_row .blk_col_wrap .blk_container > [class~=col-ms-4] {
    --span: 4;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-ms-5],
  .grd_row .grd_col_wrap .blk_container > [class~=col-ms-5],
  .grd_row .blk_col_wrap .grd_container > [class~=col-ms-5],
  .grd_row .blk_col_wrap .blk_container > [class~=col-ms-5],
  .blk_row .grd_col_wrap .grd_container > [class~=col-ms-5],
  .blk_row .grd_col_wrap .blk_container > [class~=col-ms-5],
  .blk_row .blk_col_wrap .grd_container > [class~=col-ms-5],
  .blk_row .blk_col_wrap .blk_container > [class~=col-ms-5] {
    --span: 5;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-ms-6],
  .grd_row .grd_col_wrap .blk_container > [class~=col-ms-6],
  .grd_row .blk_col_wrap .grd_container > [class~=col-ms-6],
  .grd_row .blk_col_wrap .blk_container > [class~=col-ms-6],
  .blk_row .grd_col_wrap .grd_container > [class~=col-ms-6],
  .blk_row .grd_col_wrap .blk_container > [class~=col-ms-6],
  .blk_row .blk_col_wrap .grd_container > [class~=col-ms-6],
  .blk_row .blk_col_wrap .blk_container > [class~=col-ms-6] {
    --span: 6;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-ms-7],
  .grd_row .grd_col_wrap .blk_container > [class~=col-ms-7],
  .grd_row .blk_col_wrap .grd_container > [class~=col-ms-7],
  .grd_row .blk_col_wrap .blk_container > [class~=col-ms-7],
  .blk_row .grd_col_wrap .grd_container > [class~=col-ms-7],
  .blk_row .grd_col_wrap .blk_container > [class~=col-ms-7],
  .blk_row .blk_col_wrap .grd_container > [class~=col-ms-7],
  .blk_row .blk_col_wrap .blk_container > [class~=col-ms-7] {
    --span: 7;
  }
  .grd_row .grd_col_wrap .grd_container > [class~=col-ms-8],
  .grd_row .grd_col_wrap .blk_container > [class~=col-ms-8],
  .grd_row .blk_col_wrap .grd_container > [class~=col-ms-8],
  .grd_row .blk_col_wrap .blk_container > [class~=col-ms-8],
  .blk_row .grd_col_wrap .grd_container > [class~=col-ms-8],
  .blk_row .grd_col_wrap .blk_container > [class~=col-ms-8],
  .blk_row .blk_col_wrap .grd_container > [class~=col-ms-8],
  .blk_row .blk_col_wrap .blk_container > [class~=col-ms-8] {
    --span: 8;
  }
}
.grd_row .grd_col_wrap,
.grd_row .blk_col_wrap,
.blk_row .grd_col_wrap,
.blk_row .blk_col_wrap {
  /* /.grd_container */
}

.dev-grid .grd_row,
.dev-grid .blk_row {
  padding-block: 0.75rem;
  border-bottom: 1px solid rgba(11, 99, 255, 0.1);
}
.dev-grid .grd_row .grd_col_wrap,
.dev-grid .grd_row .blk_col_wrap,
.dev-grid .blk_row .grd_col_wrap,
.dev-grid .blk_row .blk_col_wrap {
  border-radius: 8px;
}
.dev-grid .grd_row .grd_container,
.dev-grid .grd_row .blk_container,
.dev-grid .blk_row .grd_container,
.dev-grid .blk_row .blk_container {
  padding: 0.5rem;
  border-radius: 8px;
  border: 1px dashed rgba(11, 99, 255, 0.25);
  background: rgba(11, 99, 255, 0.02);
}
.dev-grid .grd_row .grd_container.type-grid,
.dev-grid .grd_row .blk_container.type-grid,
.dev-grid .blk_row .grd_container.type-grid,
.dev-grid .blk_row .blk_container.type-grid {
  border-color: rgba(11, 99, 255, 0.3);
}
.dev-grid .grd_row .grd_container.type-grid::before,
.dev-grid .grd_row .blk_container.type-grid::before,
.dev-grid .blk_row .grd_container.type-grid::before,
.dev-grid .blk_row .blk_container.type-grid::before {
  content: "type-grid";
}
.dev-grid .grd_row .grd_container.type-flex,
.dev-grid .grd_row .blk_container.type-flex,
.dev-grid .blk_row .grd_container.type-flex,
.dev-grid .blk_row .blk_container.type-flex {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.02);
}
.dev-grid .grd_row .grd_container.type-flex::before,
.dev-grid .grd_row .blk_container.type-flex::before,
.dev-grid .blk_row .grd_container.type-flex::before,
.dev-grid .blk_row .blk_container.type-flex::before {
  content: "type-flex";
}
.dev-grid .grd_row .grd_container.type-free,
.dev-grid .grd_row .blk_container.type-free,
.dev-grid .blk_row .grd_container.type-free,
.dev-grid .blk_row .blk_container.type-free {
  border-color: rgba(18, 163, 84, 0.4);
  background: rgba(18, 163, 84, 0.02);
}
.dev-grid .grd_row .grd_container.type-free::before,
.dev-grid .grd_row .blk_container.type-free::before,
.dev-grid .blk_row .grd_container.type-free::before,
.dev-grid .blk_row .blk_container.type-free::before {
  content: "type-free";
}
.dev-grid .grd_row .grd_container,
.dev-grid .grd_row .blk_container,
.dev-grid .blk_row .grd_container,
.dev-grid .blk_row .blk_container {
  /* Container type label */
}
.dev-grid .grd_row .grd_container::before,
.dev-grid .grd_row .blk_container::before,
.dev-grid .blk_row .grd_container::before,
.dev-grid .blk_row .blk_container::before {
  display: inline-block;
  position: absolute;
  top: -10px;
  left: 12px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fff;
  color: #0b63ff;
  border: 1px solid rgba(11, 99, 255, 0.2);
}
.dev-grid .grd_row .grd_container,
.dev-grid .grd_row .blk_container,
.dev-grid .blk_row .grd_container,
.dev-grid .blk_row .blk_container {
  /* BASE col debug styling (XL) - clean, modern look */
}
.dev-grid .grd_row .grd_container > [class^=col-],
.dev-grid .grd_row .grd_container > [class*=" col-"],
.dev-grid .grd_row .blk_container > [class^=col-],
.dev-grid .grd_row .blk_container > [class*=" col-"],
.dev-grid .blk_row .grd_container > [class^=col-],
.dev-grid .blk_row .grd_container > [class*=" col-"],
.dev-grid .blk_row .blk_container > [class^=col-],
.dev-grid .blk_row .blk_container > [class*=" col-"] {
  background: rgba(11, 99, 255, 0.06);
  border: 1px dashed rgba(11, 99, 255, 0.25);
  border-radius: 8px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  color: rgba(11, 99, 255, 0.8);
  transition: all 0.2s ease;
}
.dev-grid .grd_row .grd_container,
.dev-grid .grd_row .blk_container,
.dev-grid .blk_row .grd_container,
.dev-grid .blk_row .blk_container {
  /* LG – indigo */
}
@container (max-width: 1280px) {
  .dev-grid .grd_row .grd_container > [class^=col-],
  .dev-grid .grd_row .grd_container > [class*=" col-"],
  .dev-grid .grd_row .blk_container > [class^=col-],
  .dev-grid .grd_row .blk_container > [class*=" col-"],
  .dev-grid .blk_row .grd_container > [class^=col-],
  .dev-grid .blk_row .grd_container > [class*=" col-"],
  .dev-grid .blk_row .blk_container > [class^=col-],
  .dev-grid .blk_row .blk_container > [class*=" col-"] {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.3);
    color: rgba(99, 102, 241, 0.9);
  }
}
.dev-grid .grd_row .grd_container,
.dev-grid .grd_row .blk_container,
.dev-grid .blk_row .grd_container,
.dev-grid .blk_row .blk_container {
  /* MD – emerald */
}
@container (max-width: 1024px) {
  .dev-grid .grd_row .grd_container > [class^=col-],
  .dev-grid .grd_row .grd_container > [class*=" col-"],
  .dev-grid .grd_row .blk_container > [class^=col-],
  .dev-grid .grd_row .blk_container > [class*=" col-"],
  .dev-grid .blk_row .grd_container > [class^=col-],
  .dev-grid .blk_row .grd_container > [class*=" col-"],
  .dev-grid .blk_row .blk_container > [class^=col-],
  .dev-grid .blk_row .blk_container > [class*=" col-"] {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    color: rgba(16, 185, 129, 0.9);
  }
}
.dev-grid .grd_row .grd_container,
.dev-grid .grd_row .blk_container,
.dev-grid .blk_row .grd_container,
.dev-grid .blk_row .blk_container {
  /* SM – amber */
}
@container (max-width: 645px) {
  .dev-grid .grd_row .grd_container > [class^=col-],
  .dev-grid .grd_row .grd_container > [class*=" col-"],
  .dev-grid .grd_row .blk_container > [class^=col-],
  .dev-grid .grd_row .blk_container > [class*=" col-"],
  .dev-grid .blk_row .grd_container > [class^=col-],
  .dev-grid .blk_row .grd_container > [class*=" col-"],
  .dev-grid .blk_row .blk_container > [class^=col-],
  .dev-grid .blk_row .blk_container > [class*=" col-"] {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.35);
    color: rgba(180, 110, 0, 0.95);
  }
}
.dev-grid .grd_row .grd_container,
.dev-grid .grd_row .blk_container,
.dev-grid .blk_row .grd_container,
.dev-grid .blk_row .blk_container {
  /* MS – rose */
}
@container (max-width: 480px) {
  .dev-grid .grd_row .grd_container > [class^=col-],
  .dev-grid .grd_row .grd_container > [class*=" col-"],
  .dev-grid .grd_row .blk_container > [class^=col-],
  .dev-grid .grd_row .blk_container > [class*=" col-"],
  .dev-grid .blk_row .grd_container > [class^=col-],
  .dev-grid .blk_row .grd_container > [class*=" col-"],
  .dev-grid .blk_row .blk_container > [class^=col-],
  .dev-grid .blk_row .blk_container > [class*=" col-"] {
    background: rgba(244, 63, 94, 0.08);
    border-color: rgba(244, 63, 94, 0.35);
    color: rgba(244, 63, 94, 0.9);
  }
}
.dev-grid {
  /* Breakpoint indicator - modern pill style */
}
.dev-grid::after {
  content: "XL • 24 cols";
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(135deg, #0b63ff 0%, #6366f1 100%);
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(11, 99, 255, 0.35);
}
@media (max-width: 1280px) {
  .dev-grid::after {
    content: "LG • 24 cols";
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  }
}
@media (max-width: 1024px) {
  .dev-grid::after {
    content: "MD • 16 cols";
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  }
}
@media (max-width: 645px) {
  .dev-grid::after {
    content: "SM • 12 cols";
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #000;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
  }
}
@media (max-width: 480px) {
  .dev-grid::after {
    content: "MS • 8 cols";
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.35);
  }
}
.dev-grid {
  /* =========================================================
     FIXED GRID OVERLAY (built by dev-grid.js)
     Self-contained overlay that doesn't use the grd_row structure
  ========================================================== */
}
.dev-grid .dev-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
}
.dev-grid .dev-grid-overlay__inner {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 32px;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (max-width: 1280px) {
  .dev-grid .dev-grid-overlay__inner {
    grid-template-columns: repeat(24, 1fr);
    gap: 28px;
  }
}
@media (max-width: 1024px) {
  .dev-grid .dev-grid-overlay__inner {
    grid-template-columns: repeat(16, 1fr);
    gap: 24px;
  }
}
@media (max-width: 645px) {
  .dev-grid .dev-grid-overlay__inner {
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .dev-grid .dev-grid-overlay__inner {
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
  }
}
.dev-grid .dev-grid-overlay__col {
  background: rgba(11, 99, 255, 0.08);
  border: 1px solid rgba(11, 99, 255, 0.2);
  border-radius: 4px;
}
@media (max-width: 1280px) {
  .dev-grid .dev-grid-overlay__col {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
  }
}
@media (max-width: 1024px) {
  .dev-grid .dev-grid-overlay__col {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
  }
}
@media (max-width: 645px) {
  .dev-grid .dev-grid-overlay__col {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
  }
}
@media (max-width: 480px) {
  .dev-grid .dev-grid-overlay__col {
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.25);
  }
}

/* ==========================================================================
   Block: blk_side_bar_a - Side bar
   ========================================================================== */
.blk_side_bar_a {
  position: absolute;
  width: 75px;
  height: 100%;
  border-right: 1px solid var(--var_bdr_clr_a);
  top: 0;
  left: 0;
  z-index: 10;
  background-color: var(--var_bg_b);
  color: var(--var_txt_clr_a);
}
.blk_side_bar_a > .wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  padding: 2rem 0;
}
.blk_side_bar_a > .wrap .top,
.blk_side_bar_a > .wrap .bottom {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  white-space: nowrap;
}
.blk_side_bar_a > .wrap .top em,
.blk_side_bar_a > .wrap .bottom em {
  font-style: normal;
  color: var(--var_acnt_clr_a);
}
.blk_side_bar_a > .wrap .top {
  align-self: center;
}
.blk_side_bar_a > .wrap .bottom {
  align-self: center;
}
@container grd (max-width: 1024px) {
  .blk_side_bar_a {
    display: none;
  }
}

/* ==========================================================================
   Block: blk_stack_a - The original stack (Design · Frontend · Backend ·
   AI · Server), each layer one SVG drawn inline (pizza box effect): its
   files in media/images/stacks/original/, or one the CMS gives.
   Mechanics (--size, is_intro / is_expanded / is_active, hover) are the
   shared stack-layers() mixin (mxn/_mxn_stack.scss), and the colours the
   shared stack-colours(), the same as blk_stack_b / blk_stack_c: the SVG's
   fill classes clr_a-d read local slots that swap to the hover palette
   when lit.
   Colors: --var_stack_a_clr_a-d, --var_stack_a_hvr_clr_a-c
   ========================================================================== */
.blk_stack_a {
  --size: 28rem;
  --step: calc(var(--size) * 0.0125);
  --nudge: calc(var(--size) * -0.056);
  position: relative;
  display: inline-block;
}
.blk_stack_a.is_intro > .wrap {
  opacity: 0;
}
.blk_stack_a > .wrap {
  position: relative;
  display: inline-block;
}
.blk_stack_a > .wrap > .stack {
  display: inline-block;
  transition: transform 1s cubic-bezier(0.34, 1.2, 0.4, 1);
}
.blk_stack_a > .wrap > .stack:last-child {
  position: relative;
  z-index: 1;
}
.blk_stack_a > .wrap > .stack:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  transform: translateY(calc(var(--step) * -4));
}
.blk_stack_a > .wrap > .stack:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  transform: translateY(calc(var(--step) * -3));
}
.blk_stack_a > .wrap > .stack:nth-child(3) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  transform: translateY(calc(var(--step) * -2));
}
.blk_stack_a > .wrap > .stack:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translateY(calc(var(--step) * -1));
}
.blk_stack_a > .wrap > .stack > svg {
  display: block;
  width: var(--size);
  height: auto;
}
.blk_stack_a .stack em {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  transform: translate(0, -50%);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.2em 0.5em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.blk_stack_a.is_expanded .stack:hover em, .blk_stack_a.is_expanded .stack.is_active em {
  opacity: 1;
  transform: translate(-110%, -50%);
}
.blk_stack_a a.stack {
  color: inherit;
  text-decoration: none;
}
.blk_stack_a .stack[role=button],
.blk_stack_a a.stack {
  cursor: pointer;
}
.blk_stack_a .stack[role=button]:focus-visible,
.blk_stack_a a.stack:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 4px;
}
.blk_stack_a.is_expanded {
  --step: calc(var(--size) * 0.25);
}
.blk_stack_a.is_expanded > .wrap > .stack {
  transition: transform 1s cubic-bezier(0.34, 1.2, 0.4, 1), opacity 0.3s ease;
}
.blk_stack_a.is_expanded > .wrap > .stack:hover, .blk_stack_a.is_expanded > .wrap > .stack.is_active {
  transform: translateX(var(--nudge));
}
.blk_stack_a.is_expanded > .wrap > .stack:nth-child(1):hover, .blk_stack_a.is_expanded > .wrap > .stack:nth-child(1).is_active {
  transform: translateY(calc(var(--step) * -4)) translateX(var(--nudge));
}
.blk_stack_a.is_expanded > .wrap > .stack:nth-child(2):hover, .blk_stack_a.is_expanded > .wrap > .stack:nth-child(2).is_active {
  transform: translateY(calc(var(--step) * -3)) translateX(var(--nudge));
}
.blk_stack_a.is_expanded > .wrap > .stack:nth-child(3):hover, .blk_stack_a.is_expanded > .wrap > .stack:nth-child(3).is_active {
  transform: translateY(calc(var(--step) * -2)) translateX(var(--nudge));
}
.blk_stack_a.is_expanded > .wrap > .stack:nth-child(4):hover, .blk_stack_a.is_expanded > .wrap > .stack:nth-child(4).is_active {
  transform: translateY(calc(var(--step) * -1)) translateX(var(--nudge));
}
@media (prefers-reduced-motion: reduce) {
  .blk_stack_a > .wrap > .stack, .blk_stack_a.is_expanded > .wrap > .stack,
  .blk_stack_a .stack em {
    transition: none;
  }
}
.blk_stack_a {
  --stack-dark: var(--var_stack_a_clr_a);
  --stack-light: var(--var_stack_a_clr_b);
  --stack-mid: var(--var_stack_a_clr_c);
  --stack-paper: var(--var_stack_a_clr_d);
}
.blk_stack_a .stack.is_active, .blk_stack_a.is_expanded > .wrap > .stack:hover {
  --stack-dark: var(--var_stack_a_hvr_clr_a);
  --stack-light: var(--var_stack_a_hvr_clr_b);
  --stack-mid: var(--var_stack_a_hvr_clr_c);
}
.blk_stack_a .stack > svg {
  --var_iso_clr_a: var(--stack-dark);
  --var_iso_clr_b: var(--stack-light);
  --var_iso_clr_c: var(--stack-mid);
  --var_iso_clr_d: var(--stack-paper);
  --var_iso_clr_f: var(--var_stack_a_hvr_clr_a);
}
.blk_stack_a .stack > svg * {
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.blk_stack_a .stack > svg .clr_a {
  fill: var(--stack-dark);
}
.blk_stack_a .stack > svg .clr_b {
  fill: var(--stack-light);
}
.blk_stack_a .stack > svg .clr_c {
  fill: var(--stack-mid);
}
.blk_stack_a .stack > svg .clr_d {
  fill: var(--stack-paper);
}
.blk_stack_a .stack > svg .clr_e {
  fill: var(--var_stack_a_hvr_clr_b);
}
.blk_stack_a .stack > svg .clr_f {
  fill: var(--var_stack_a_hvr_clr_a);
}
@media (prefers-reduced-motion: reduce) {
  .blk_stack_a .stack > svg * {
    transition: none;
  }
}
.blk_stack_a .stack em {
  color: var(--stack-paper);
  background: var(--stack-dark);
}

/* ==========================================================================
   Block: blk_stack_b - How We Work stack (5 layers)
   Same mechanics as blk_stack_a (shared stack-layers() mixin: --size,
   is_intro / is_expanded / is_active, hover nudge + label) and the same
   colours (stack-colours()): each layer is one SVG drawn inline (its file
   in media/images/stacks/how_we_work/, or one the CMS gives), its clr_a-d
   shapes in the theme's stack colours, the lit palette when lit or
   hovered. The label chip uses the section's heading / background colors.
   ========================================================================== */
.blk_stack_b {
  --size: 28rem;
  --step: calc(var(--size) * 0.0125);
  --nudge: calc(var(--size) * -0.056);
  position: relative;
  display: inline-block;
}
.blk_stack_b.is_intro > .wrap {
  opacity: 0;
}
.blk_stack_b > .wrap {
  position: relative;
  display: inline-block;
}
.blk_stack_b > .wrap > .stack {
  display: inline-block;
  transition: transform 1s cubic-bezier(0.34, 1.2, 0.4, 1);
}
.blk_stack_b > .wrap > .stack:last-child {
  position: relative;
  z-index: 1;
}
.blk_stack_b > .wrap > .stack:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  transform: translateY(calc(var(--step) * -4));
}
.blk_stack_b > .wrap > .stack:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  transform: translateY(calc(var(--step) * -3));
}
.blk_stack_b > .wrap > .stack:nth-child(3) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  transform: translateY(calc(var(--step) * -2));
}
.blk_stack_b > .wrap > .stack:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translateY(calc(var(--step) * -1));
}
.blk_stack_b > .wrap > .stack > svg {
  display: block;
  width: var(--size);
  height: auto;
}
.blk_stack_b .stack em {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  transform: translate(0, -50%);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.2em 0.5em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.blk_stack_b.is_expanded .stack:hover em, .blk_stack_b.is_expanded .stack.is_active em {
  opacity: 1;
  transform: translate(-110%, -50%);
}
.blk_stack_b a.stack {
  color: inherit;
  text-decoration: none;
}
.blk_stack_b .stack[role=button],
.blk_stack_b a.stack {
  cursor: pointer;
}
.blk_stack_b .stack[role=button]:focus-visible,
.blk_stack_b a.stack:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 4px;
}
.blk_stack_b.is_expanded {
  --step: calc(var(--size) * 0.25);
}
.blk_stack_b.is_expanded > .wrap > .stack {
  transition: transform 1s cubic-bezier(0.34, 1.2, 0.4, 1), opacity 0.3s ease;
}
.blk_stack_b.is_expanded > .wrap > .stack:hover, .blk_stack_b.is_expanded > .wrap > .stack.is_active {
  transform: translateX(var(--nudge));
}
.blk_stack_b.is_expanded > .wrap > .stack:nth-child(1):hover, .blk_stack_b.is_expanded > .wrap > .stack:nth-child(1).is_active {
  transform: translateY(calc(var(--step) * -4)) translateX(var(--nudge));
}
.blk_stack_b.is_expanded > .wrap > .stack:nth-child(2):hover, .blk_stack_b.is_expanded > .wrap > .stack:nth-child(2).is_active {
  transform: translateY(calc(var(--step) * -3)) translateX(var(--nudge));
}
.blk_stack_b.is_expanded > .wrap > .stack:nth-child(3):hover, .blk_stack_b.is_expanded > .wrap > .stack:nth-child(3).is_active {
  transform: translateY(calc(var(--step) * -2)) translateX(var(--nudge));
}
.blk_stack_b.is_expanded > .wrap > .stack:nth-child(4):hover, .blk_stack_b.is_expanded > .wrap > .stack:nth-child(4).is_active {
  transform: translateY(calc(var(--step) * -1)) translateX(var(--nudge));
}
@media (prefers-reduced-motion: reduce) {
  .blk_stack_b > .wrap > .stack, .blk_stack_b.is_expanded > .wrap > .stack,
  .blk_stack_b .stack em {
    transition: none;
  }
}
.blk_stack_b {
  --stack-dark: var(--var_stack_a_clr_a);
  --stack-light: var(--var_stack_a_clr_b);
  --stack-mid: var(--var_stack_a_clr_c);
  --stack-paper: var(--var_stack_a_clr_d);
}
.blk_stack_b .stack.is_active, .blk_stack_b.is_expanded > .wrap > .stack:hover {
  --stack-dark: var(--var_stack_a_hvr_clr_a);
  --stack-light: var(--var_stack_a_hvr_clr_b);
  --stack-mid: var(--var_stack_a_hvr_clr_c);
}
.blk_stack_b .stack > svg {
  --var_iso_clr_a: var(--stack-dark);
  --var_iso_clr_b: var(--stack-light);
  --var_iso_clr_c: var(--stack-mid);
  --var_iso_clr_d: var(--stack-paper);
  --var_iso_clr_f: var(--var_stack_a_hvr_clr_a);
}
.blk_stack_b .stack > svg * {
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.blk_stack_b .stack > svg .clr_a {
  fill: var(--stack-dark);
}
.blk_stack_b .stack > svg .clr_b {
  fill: var(--stack-light);
}
.blk_stack_b .stack > svg .clr_c {
  fill: var(--stack-mid);
}
.blk_stack_b .stack > svg .clr_d {
  fill: var(--stack-paper);
}
.blk_stack_b .stack > svg .clr_e {
  fill: var(--var_stack_a_hvr_clr_b);
}
.blk_stack_b .stack > svg .clr_f {
  fill: var(--var_stack_a_hvr_clr_a);
}
@media (prefers-reduced-motion: reduce) {
  .blk_stack_b .stack > svg * {
    transition: none;
  }
}
.blk_stack_b .stack em {
  color: var(--var_bg_a);
  background: var(--var_hdr_clr_a);
}

/* ==========================================================================
   Block: blk_stack_c - What We Do stack (5 layers)
   Same mechanics as blk_stack_a (shared stack-layers() mixin: --size,
   is_intro / is_expanded / is_active, hover nudge + label) and the same
   colours (stack-colours()): each layer is one SVG drawn inline (its file
   in media/images/stacks/what_we_do/, or one the CMS gives), its clr_a-d
   shapes in the theme's stack colours, the lit palette when lit or
   hovered. The label chip uses the section's heading / background colors.
   ========================================================================== */
.blk_stack_c {
  --size: 28rem;
  --step: calc(var(--size) * 0.0125);
  --nudge: calc(var(--size) * -0.056);
  position: relative;
  display: inline-block;
}
.blk_stack_c.is_intro > .wrap {
  opacity: 0;
}
.blk_stack_c > .wrap {
  position: relative;
  display: inline-block;
}
.blk_stack_c > .wrap > .stack {
  display: inline-block;
  transition: transform 1s cubic-bezier(0.34, 1.2, 0.4, 1);
}
.blk_stack_c > .wrap > .stack:last-child {
  position: relative;
  z-index: 1;
}
.blk_stack_c > .wrap > .stack:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  transform: translateY(calc(var(--step) * -4));
}
.blk_stack_c > .wrap > .stack:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  transform: translateY(calc(var(--step) * -3));
}
.blk_stack_c > .wrap > .stack:nth-child(3) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  transform: translateY(calc(var(--step) * -2));
}
.blk_stack_c > .wrap > .stack:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translateY(calc(var(--step) * -1));
}
.blk_stack_c > .wrap > .stack > svg {
  display: block;
  width: var(--size);
  height: auto;
}
.blk_stack_c .stack em {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  transform: translate(0, -50%);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.2em 0.5em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.blk_stack_c.is_expanded .stack:hover em, .blk_stack_c.is_expanded .stack.is_active em {
  opacity: 1;
  transform: translate(-110%, -50%);
}
.blk_stack_c a.stack {
  color: inherit;
  text-decoration: none;
}
.blk_stack_c .stack[role=button],
.blk_stack_c a.stack {
  cursor: pointer;
}
.blk_stack_c .stack[role=button]:focus-visible,
.blk_stack_c a.stack:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 4px;
}
.blk_stack_c.is_expanded {
  --step: calc(var(--size) * 0.25);
}
.blk_stack_c.is_expanded > .wrap > .stack {
  transition: transform 1s cubic-bezier(0.34, 1.2, 0.4, 1), opacity 0.3s ease;
}
.blk_stack_c.is_expanded > .wrap > .stack:hover, .blk_stack_c.is_expanded > .wrap > .stack.is_active {
  transform: translateX(var(--nudge));
}
.blk_stack_c.is_expanded > .wrap > .stack:nth-child(1):hover, .blk_stack_c.is_expanded > .wrap > .stack:nth-child(1).is_active {
  transform: translateY(calc(var(--step) * -4)) translateX(var(--nudge));
}
.blk_stack_c.is_expanded > .wrap > .stack:nth-child(2):hover, .blk_stack_c.is_expanded > .wrap > .stack:nth-child(2).is_active {
  transform: translateY(calc(var(--step) * -3)) translateX(var(--nudge));
}
.blk_stack_c.is_expanded > .wrap > .stack:nth-child(3):hover, .blk_stack_c.is_expanded > .wrap > .stack:nth-child(3).is_active {
  transform: translateY(calc(var(--step) * -2)) translateX(var(--nudge));
}
.blk_stack_c.is_expanded > .wrap > .stack:nth-child(4):hover, .blk_stack_c.is_expanded > .wrap > .stack:nth-child(4).is_active {
  transform: translateY(calc(var(--step) * -1)) translateX(var(--nudge));
}
@media (prefers-reduced-motion: reduce) {
  .blk_stack_c > .wrap > .stack, .blk_stack_c.is_expanded > .wrap > .stack,
  .blk_stack_c .stack em {
    transition: none;
  }
}
.blk_stack_c {
  --stack-dark: var(--var_stack_a_clr_a);
  --stack-light: var(--var_stack_a_clr_b);
  --stack-mid: var(--var_stack_a_clr_c);
  --stack-paper: var(--var_stack_a_clr_d);
}
.blk_stack_c .stack.is_active, .blk_stack_c.is_expanded > .wrap > .stack:hover {
  --stack-dark: var(--var_stack_a_hvr_clr_a);
  --stack-light: var(--var_stack_a_hvr_clr_b);
  --stack-mid: var(--var_stack_a_hvr_clr_c);
}
.blk_stack_c .stack > svg {
  --var_iso_clr_a: var(--stack-dark);
  --var_iso_clr_b: var(--stack-light);
  --var_iso_clr_c: var(--stack-mid);
  --var_iso_clr_d: var(--stack-paper);
  --var_iso_clr_f: var(--var_stack_a_hvr_clr_a);
}
.blk_stack_c .stack > svg * {
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.blk_stack_c .stack > svg .clr_a {
  fill: var(--stack-dark);
}
.blk_stack_c .stack > svg .clr_b {
  fill: var(--stack-light);
}
.blk_stack_c .stack > svg .clr_c {
  fill: var(--stack-mid);
}
.blk_stack_c .stack > svg .clr_d {
  fill: var(--stack-paper);
}
.blk_stack_c .stack > svg .clr_e {
  fill: var(--var_stack_a_hvr_clr_b);
}
.blk_stack_c .stack > svg .clr_f {
  fill: var(--var_stack_a_hvr_clr_a);
}
@media (prefers-reduced-motion: reduce) {
  .blk_stack_c .stack > svg * {
    transition: none;
  }
}
.blk_stack_c .stack em {
  color: var(--var_bg_a);
  background: var(--var_hdr_clr_a);
}

/* ==========================================================================
   Block: blk_service_list_a - 2x2 service card grid with glass effect
   ========================================================================== */
.blk_service_list_a {
  display: flex;
  flex-wrap: wrap;
  max-width: 38rem;
}
.blk_service_list_a .item {
  width: 50%;
  background: color-mix(in srgb, var(--var_bg_a) 45%, transparent);
  border: 1px solid var(--var_bdr_clr_a);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 2rem 2.625rem;
  text-decoration: none;
  display: block;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.blk_service_list_a .item:nth-child(2) {
  margin-left: -1px;
}
.blk_service_list_a .item:nth-child(3), .blk_service_list_a .item:nth-child(4) {
  margin-top: -1px;
}
.blk_service_list_a .item:nth-child(4) {
  margin-left: -1px;
}
.blk_service_list_a .item:nth-child(1) {
  border-radius: 4px 0 0 0;
}
.blk_service_list_a .item:nth-child(2) {
  border-radius: 0 4px 0 0;
}
.blk_service_list_a .item:nth-child(3) {
  border-radius: 0 0 0 4px;
}
.blk_service_list_a .item:nth-child(4) {
  border-radius: 0 0 4px 0;
}
.blk_service_list_a .item > .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.blk_service_list_a .item .label {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--var_txt_clr_a);
  margin: 0;
  flex-grow: 1;
}
.blk_service_list_a .item .arrow {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--var_bdr_clr_a);
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.3s ease, color 0.3s ease;
}
.blk_service_list_a .item .arrow svg {
  stroke-width: 2;
}
.blk_service_list_a .item:hover {
  background: color-mix(in srgb, var(--var_bg_a) 65%, transparent);
  border-color: var(--var_acnt_clr_a);
  z-index: 1;
}
.blk_service_list_a .item:hover .arrow {
  transform: translateX(4px);
  color: var(--var_acnt_clr_a);
}
@container (max-width: 645px) {
  .blk_service_list_a .item {
    padding: 1.5rem;
  }
}
@container (max-width: 480px) {
  .blk_service_list_a .item {
    width: 100%;
  }
  .blk_service_list_a .item:nth-child(n) {
    margin-left: 0;
    border-radius: 0;
  }
  .blk_service_list_a .item + .item {
    margin-top: -1px;
  }
  .blk_service_list_a .item:first-child {
    border-radius: 4px 4px 0 0;
  }
  .blk_service_list_a .item:last-child {
    border-radius: 0 0 4px 4px;
  }
}

/* ==========================================================================
   Block: blk_accordion_a - Accordion with glass-morphism items
   ========================================================================== */
.blk_accordion_a {
  display: flex;
  flex-direction: column;
}
.blk_accordion_a .item {
  background: color-mix(in srgb, var(--var_bg_a) 45%, transparent);
  border: 1px solid var(--var_bdr_clr_a);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transition: background 0.3s ease;
  cursor: pointer;
  position: relative;
}
.blk_accordion_a .item + .item {
  margin-top: -1px;
}
.blk_accordion_a .item:first-child {
  border-radius: 4px 4px 0 0;
}
.blk_accordion_a .item:last-child {
  border-radius: 0 0 4px 4px;
}
.blk_accordion_a .item .hdr {
  appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.625rem 2.625rem;
  gap: 1rem;
}
.blk_accordion_a .item .wrap {
  display: flex;
  flex-direction: column;
}
.blk_accordion_a .item .tier {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.blk_accordion_a .item .title {
  font-family: var(--font-header);
  font-weight: 400;
  font-size: 1.2625rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--var_txt_clr_a);
  transition: color 0.3s ease;
}
.blk_accordion_a .item .prt_icn_a {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--var_txt_clr_b);
  transition: transform 0.3s ease, color 0.3s ease;
}
.blk_accordion_a .item .body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease, padding 0.4s ease;
  padding: 0 2.625rem;
}
.blk_accordion_a .item .body > * {
  min-height: 0;
  overflow: hidden;
}
.blk_accordion_a .item .des {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--var_txt_clr_b);
  margin: 0;
}
.blk_accordion_a .item .des > p,
.blk_accordion_a .item .des > ul,
.blk_accordion_a .item .des > ol {
  margin: 0 0 0.75rem;
}
.blk_accordion_a .item .des > :last-child {
  margin-bottom: 0;
}
.blk_accordion_a .item .des > ul,
.blk_accordion_a .item .des > ol {
  padding-left: 1.1em;
}
.blk_accordion_a .item:hover {
  background: color-mix(in srgb, var(--var_bg_a) 60%, transparent);
}
.blk_accordion_a .item.is_active {
  background: color-mix(in srgb, var(--var_bg_a) 65%, transparent);
}
.blk_accordion_a .item.is_active .prt_icn_a {
  transform: rotate(180deg);
  color: var(--var_acnt_clr_a);
}
.blk_accordion_a .item.is_active .body {
  grid-template-rows: 1fr;
  padding: 0 2.625rem 1.625rem;
}
.blk_accordion_a .item:not(.is_active) .title {
  color: var(--var_txt_clr_b);
}
.blk_accordion_a .item:not(.is_active):hover .title {
  color: var(--var_txt_clr_a);
}
@container (max-width: 645px) {
  .blk_accordion_a .item .hdr {
    padding: 1rem 1.5rem;
  }
  .blk_accordion_a .item .body {
    padding-inline: 1.5rem;
  }
  .blk_accordion_a .item.is_active .body {
    padding: 0 1.5rem 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blk_accordion_a .item,
  .blk_accordion_a .item .title,
  .blk_accordion_a .item .prt_icn_a,
  .blk_accordion_a .item .body {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_person_list_a - Row of people (avatar + name + role)
   ========================================================================== */
.blk_person_list_a {
  display: flex;
  align-items: center;
  gap: 5rem;
}
.blk_person_list_a .item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.blk_person_list_a .item > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.blk_person_list_a .item .name {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.667;
  letter-spacing: -0.01em;
  color: var(--var_txt_clr_a);
}
.blk_person_list_a .item .role {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 1rem;
  line-height: 2;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
@container (max-width: 1024px) {
  .blk_person_list_a {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 3rem;
  }
}
@container (max-width: 480px) {
  .blk_person_list_a {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

/* ==========================================================================
   Block: blk_service_card_a - Linked service cell
   Square cell with a solid 1px border on --var_bg_b (covers the grid
   lines): top row = accent icon, optional mono index, arrow in the right
   corner; then title and description. Hover / focus: the cell tints, the
   title takes the accent and the arrow nudges. The parent shares borders.
   ========================================================================== */
.blk_service_card_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_b);
  color: var(--var_txt_clr_a);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.blk_service_card_a > .hdr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.blk_service_card_a > .hdr > .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--var_txt_clr_b);
}
.blk_service_card_a > .hdr > .arrow {
  margin-left: auto;
  transition: transform 0.3s ease;
}
.blk_service_card_a > .body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.blk_service_card_a > .body > .title {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.089673913rem + 0.3260869565cqi, 1.375rem);
  line-height: 1.25;
  color: var(--var_hdr_clr_a);
  transition: color 0.3s ease;
}
.blk_service_card_a > .body > .des {
  max-width: 30rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--var_txt_clr_b);
}
.blk_service_card_a:hover, .blk_service_card_a:focus-visible {
  background-color: color-mix(in srgb, var(--var_txt_clr_a) 3%, var(--var_bg_b));
  text-decoration: none;
}
.blk_service_card_a:hover > .body > .title, .blk_service_card_a:focus-visible > .body > .title {
  color: var(--var_acnt_clr_a);
}
.blk_service_card_a:hover > .hdr > .arrow, .blk_service_card_a:focus-visible > .hdr > .arrow {
  transform: translateX(4px);
}
.blk_service_card_a:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
@container (max-width: 645px) {
  .blk_service_card_a {
    gap: 1.5rem;
    padding: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blk_service_card_a,
  .blk_service_card_a > .hdr > .arrow,
  .blk_service_card_a > .body > .title {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_work_card_a - Portfolio work card (media + hover overlay + info)
   Modifier locked (confidential work): media blurred + greyscale, no hover
   overlay, a mono lock badge centered over it.
   Colors: --var_work_card_a_ovl_bg (blur overlay), --var_work_card_a_ovl_clr
           (overlay text + icon)
   ========================================================================== */
.blk_work_card_a {
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.blk_work_card_a .media {
  width: 100%;
  aspect-ratio: 829/470;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.blk_work_card_a .media img,
.blk_work_card_a .media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blk_work_card_a .media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--var_work_card_a_ovl_bg, color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent));
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.blk_work_card_a .media .hover_meta {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  pointer-events: none;
}
.blk_work_card_a .media .hover_icn {
  --var_icn_a_clr: var(--var_work_card_a_ovl_clr, var(--var_bg_a));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 3.9375rem;
  height: 3.9375rem;
  border-radius: 50%;
  background: var(--var_acnt_clr_a);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  overflow: hidden;
}
.blk_work_card_a .media .hover_icn .prt_icn_a {
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.blk_work_card_a .media .hover_icn .prt_icn_a svg {
  stroke-width: 2;
}
.blk_work_card_a .media .hover_info {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.blk_work_card_a .media .hover_info .name,
.blk_work_card_a .media .hover_info .type {
  margin: 0;
  color: var(--var_work_card_a_ovl_clr, var(--var_bg_a));
}
.blk_work_card_a .media .hover_info .name {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 0.95;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}
.blk_work_card_a .media .hover_info .type {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.44;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.08s;
}
.blk_work_card_a:hover .media::before {
  opacity: 1;
}
.blk_work_card_a:hover .media .hover_icn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.blk_work_card_a:hover .media .hover_icn .prt_icn_a {
  transform: translate(2px, -2px);
}
.blk_work_card_a:hover .media .hover_info .name,
.blk_work_card_a:hover .media .hover_info .type {
  clip-path: inset(0 0 0 0);
}
.blk_work_card_a .info {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: opacity 0.3s ease;
}
.blk_work_card_a .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.525rem;
  line-height: 1.04;
  color: var(--var_txt_clr_a);
  margin: 0;
}
.blk_work_card_a .type {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.44;
  color: var(--var_txt_clr_b);
  opacity: 0.8;
  margin: 0;
  text-transform: uppercase;
}
.blk_work_card_a:hover > .info {
  opacity: 0;
}
@media (hover: none) {
  .blk_work_card_a:hover .media::before,
  .blk_work_card_a:hover .media .hover_icn {
    opacity: 0;
  }
  .blk_work_card_a:hover .media .hover_info .name,
  .blk_work_card_a:hover .media .hover_info .type {
    clip-path: inset(100% 0 0 0);
  }
  .blk_work_card_a:hover > .info {
    opacity: 1;
  }
}
.blk_work_card_a.locked .media img,
.blk_work_card_a.locked .media video {
  filter: blur(22px) grayscale(1) brightness(0.85);
  transform: scale(1.15);
}
.blk_work_card_a.locked .media::before {
  display: none;
}
.blk_work_card_a.locked .lock {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100% - 2rem);
  padding: 0.75rem 1rem;
  translate: -50% -50%;
  background: var(--var_hdr_clr_a);
  color: var(--var_bg_a);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.blk_work_card_a.locked:hover > .info {
  opacity: 1;
}

/* ==========================================================================
   Block: blk_post_list_a - Panel of linked post teasers (thumbnail, title, excerpt)
   Responds to its OWN width (container on the root, cq() on descendants):
   in a two-column module it is only ~40rem wide at desktop. Narrow (ms of
   its own width, a phone): the image runs the teaser's full width on top,
   the arrow sits beside the title, the excerpt is two lines.
   ========================================================================== */
.blk_post_list_a {
  container-type: inline-size;
  background: var(--var_bg_b);
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 0.5rem;
  overflow: hidden;
}
.blk_post_list_a > .list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.blk_post_list_a .item + .item {
  border-top: 1px solid var(--var_bdr_clr_a);
}
.blk_post_list_a .link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}
.blk_post_list_a .link .go {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  transition: translate 0.3s ease;
}
.blk_post_list_a .link:hover .go, .blk_post_list_a .link:focus-visible .go {
  translate: 2px -2px;
}
.blk_post_list_a .link {
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.blk_post_list_a .link:hover {
  text-decoration: none;
  background-color: color-mix(in srgb, var(--var_acnt_clr_a) 4%, var(--var_bg_b));
}
.blk_post_list_a .link:hover .title {
  color: var(--var_acnt_clr_a);
}
.blk_post_list_a .link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.blk_post_list_a .hdr {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.blk_post_list_a .thumb {
  flex: 0 0 auto;
  width: 5.5rem;
  aspect-ratio: 9/7;
  object-fit: cover;
  object-position: center top;
  border-radius: 2px;
  background-color: var(--var_bdr_clr_a);
}
.blk_post_list_a .title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--var_txt_clr_b);
  transition: color 0.3s ease;
}
.blk_post_list_a .des {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@container (max-width: 480px) {
  .blk_post_list_a .link {
    padding: 1.5rem;
  }
  .blk_post_list_a .hdr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 1rem;
  }
  .blk_post_list_a .hdr > .thumb {
    grid-column: 1/-1;
    width: 100%;
    aspect-ratio: 16/9;
  }
  .blk_post_list_a .hdr > .go {
    position: static;
  }
  .blk_post_list_a .des {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blk_post_list_a .link, .blk_post_list_a .title {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_social_a - Row of social links: square icon buttons joined as
   one table (no gaps, shared 1px lines; the hovered cell's border on top)
   ========================================================================== */
.blk_social_a {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 0 0 1px;
  list-style: none;
}
.blk_social_a > .item {
  position: relative;
  margin-left: -1px;
}
.blk_social_a > .item:hover, .blk_social_a > .item:focus-within {
  z-index: 1;
}

/* ==========================================================================
   Block: blk_contact_a - Contact details with icons (address, phone, email)
   Icon color: --var_icn_a_clr (accent in light themes)
   ========================================================================== */
.blk_contact_a {
  font-style: normal;
}
.blk_contact_a > .list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blk_contact_a .item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.blk_contact_a .txt {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--var_txt_clr_a);
}
.blk_contact_a a.txt:hover {
  color: var(--var_acnt_clr_a);
  text-decoration: none;
}
@media (pointer: coarse) {
  .blk_contact_a a.txt {
    display: inline-block;
    padding-block: 0.5rem;
  }
}
.blk_contact_a .prt_icn_a {
  margin-top: 0.25rem;
}

/* ==========================================================================
   Block: blk_nav_a - Horizontal navigation link list
   Responds to its own width: stacks into a column when narrower than 480px.
   Modifier `columns`: two columns (top to bottom), smaller links (footer menu).
   ========================================================================== */
.blk_nav_a {
  container-type: inline-size;
}
.blk_nav_a > .list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blk_nav_a .link {
  font-family: var(--font-header);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
  transition: color 0.3s ease;
}
.blk_nav_a .link:hover {
  color: var(--var_acnt_clr_a);
  text-decoration: none;
}
.blk_nav_a.columns > .list {
  display: block;
  columns: 2 8rem;
  column-gap: 2rem;
}
.blk_nav_a.columns > .list > .item {
  break-inside: avoid;
  padding-bottom: 0.75rem;
}
.blk_nav_a.columns .link {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}
@container (max-width: 480px) {
  .blk_nav_a > .list {
    flex-direction: column;
    gap: 0.75rem;
  }
  .blk_nav_a:not(.columns) .link {
    font-size: 1.25rem;
  }
}
@media (pointer: coarse) {
  .blk_nav_a .link {
    display: inline-block;
    padding-block: 0.5rem;
  }
  .blk_nav_a.columns > .list > .item {
    padding-bottom: 0;
  }
  .blk_nav_a.columns .link {
    display: block;
    padding-block: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blk_nav_a .link {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_stats_a - Frosted bar of key figures (number, label)
   Responds to its own width: one row at every width, tighter and smaller under 480px
   (rules on the items — a container can't query itself).
   Colors: --var_stats_a_label_clr (labels), theme fg/bdr for the glass
   ========================================================================== */
.blk_stats_a {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--var_fg_a) 18%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--var_fg_a) 4%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.blk_stats_a .item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
}
.blk_stats_a .item + .item {
  border-left: 1px dashed color-mix(in srgb, var(--var_fg_a) 30%, transparent);
}
.blk_stats_a .body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.blk_stats_a .num {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(2.5rem, 1.9130434783rem + 1.9565217391cqi, 3.625rem);
  line-height: 1;
  color: var(--var_fg_a);
}
.blk_stats_a .label {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_stats_a_label_clr);
}
@container (max-width: 480px) {
  .blk_stats_a .item {
    padding: 1.5rem 0.5rem;
  }
  .blk_stats_a .num {
    font-size: clamp(1.625rem, 1.1684782609rem + 1.5217391304cqi, 2.5rem);
  }
  .blk_stats_a .label {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }
}

/* ==========================================================================
   Block: blk_link_list_a - Bordered list of links with chevrons
   Rows highlight (accent label + chevron, tinted row) on hover / keyboard focus.
   ========================================================================== */
.blk_link_list_a {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--var_bg_b);
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 0.25rem;
  overflow: hidden;
}
.blk_link_list_a .item + .item {
  border-top: 1px solid var(--var_bdr_clr_a);
}
.blk_link_list_a .link {
  --var_icn_a_clr: color-mix(in srgb, var(--var_txt_clr_b) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  color: var(--var_txt_clr_a);
  text-decoration: none;
}
.blk_link_list_a a.link {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.blk_link_list_a a.link:hover, .blk_link_list_a a.link:focus-visible {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  background-color: color-mix(in srgb, var(--var_txt_clr_a) 4%, var(--var_bg_b));
  color: var(--var_acnt_clr_a);
  text-decoration: none;
}
.blk_link_list_a a.link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.blk_link_list_a .label {
  font-family: var(--font-header);
  font-size: 1rem;
  line-height: 1.3;
}
.blk_link_list_a .prt_icn_a {
  transition: color 0.3s ease, transform 0.3s ease;
}
.blk_link_list_a a.link:hover .prt_icn_a {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .blk_link_list_a .link, .blk_link_list_a .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_point_grid_a - Grid of points two across
   Each cell: an accent icon over the label. Closed cell lines (list top +
   left, cells right + bottom); an odd last cell spans the row. A cell with
   a real link gets an arrow in its top-right corner and tints on hover /
   focus. One column at ms.
   ========================================================================== */
.blk_point_grid_a {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--var_bdr_clr_a);
  border-left: 1px solid var(--var_bdr_clr_a);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--var_bg_b);
}
.blk_point_grid_a > .item {
  border-right: 1px solid var(--var_bdr_clr_a);
  border-bottom: 1px solid var(--var_bdr_clr_a);
}
.blk_point_grid_a > .item:last-child:nth-child(odd) {
  grid-column: 1/-1;
}
.blk_point_grid_a > .item > .link {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 1.5rem;
  color: var(--var_txt_clr_a);
  text-decoration: none;
}
.blk_point_grid_a > .item > .link > .label {
  font-family: var(--font-header);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--var_hdr_clr_a);
  text-wrap: balance;
}
.blk_point_grid_a > .item > .link > .arrow {
  --var_icn_a_clr: var(--var_txt_clr_b);
  position: absolute;
  top: 1rem;
  right: 1rem;
  transition: transform 0.3s ease, color 0.3s ease;
}
.blk_point_grid_a > .item > a.link {
  transition: background-color 0.3s ease;
}
.blk_point_grid_a > .item > a.link:hover, .blk_point_grid_a > .item > a.link:focus-visible {
  background-color: color-mix(in srgb, var(--var_txt_clr_a) 4%, var(--var_bg_b));
  text-decoration: none;
}
.blk_point_grid_a > .item > a.link:hover > .label, .blk_point_grid_a > .item > a.link:focus-visible > .label {
  color: var(--var_acnt_clr_a);
}
.blk_point_grid_a > .item > a.link:hover > .arrow, .blk_point_grid_a > .item > a.link:focus-visible > .arrow {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  transform: translate(2px, -2px);
}
.blk_point_grid_a > .item > a.link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
@container (max-width: 480px) {
  .blk_point_grid_a > .item > .link {
    gap: 0.75rem;
    padding: 1rem;
  }
  .blk_point_grid_a > .item > .link > .label {
    font-size: 0.9375rem;
  }
  .blk_point_grid_a > .item > .link > .arrow {
    top: 0.75rem;
    right: 0.75rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blk_point_grid_a > .item > a.link,
  .blk_point_grid_a > .item > .link > .arrow {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_point_list_a - Short statements as a stack of cards
   Each card (1px border, a faint step off the section so it covers the
   grid lines): a top row with the accent icon on the left and the number
   in the diagonal stripes on the right (the striped numbers of the site,
   smaller), then the statement in the heading font (<mark> = accent, e.g.
   figures). For short sentences (guardrails, results) where a card with a
   graphic would be mostly graphic.
   ========================================================================== */
.blk_point_list_a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.blk_point_list_a > .item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.5rem 1.5rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_point_list_a_bg_clr);
}
.blk_point_list_a > .item > .hdr {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.blk_point_list_a > .item > .hdr > .num {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.6141304348rem + 0.8695652174cqi, 2.375rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(-45deg, var(--var_acnt_clr_a) 0, var(--var_acnt_clr_a) 1px, transparent 1px, transparent calc(50% - 1px), var(--var_acnt_clr_a) calc(50% - 1px), var(--var_acnt_clr_a) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(100% - 1px), var(--var_acnt_clr_a) calc(100% - 1px), var(--var_acnt_clr_a) 100%) 0 0/6px 6px;
  -webkit-background-clip: text;
  background-clip: text;
}
.blk_point_list_a > .item > .des {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1rem, 0.9347826087rem + 0.2173913043cqi, 1.125rem);
  line-height: 1.45;
  color: var(--var_hdr_clr_a);
}
.blk_point_list_a > .item > .des mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
@container (max-width: 645px) {
  .blk_point_list_a > .item {
    gap: 0.75rem;
    padding: 1rem;
  }
}

/* ==========================================================================
   Block: blk_info_card_a - Static card (icon, title, description)
   Colors: --var_info_card_a_bg_clr (card), border/text follow the section
   ========================================================================== */
.blk_info_card_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 2rem 3rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 4px;
  background: var(--var_info_card_a_bg_clr);
}
.blk_info_card_a > .prt_icn_a {
  margin-bottom: 1.5rem;
}
.blk_info_card_a > .title {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--var_hdr_clr_a);
}
.blk_info_card_a > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--var_txt_clr_b);
}

/* ==========================================================================
   Block: blk_post_card_a - Post card
   Image · date (accent tick, right above the title) · title · small excerpt
   (3 lines max) · one bottom row: Category and Author side by side + arrow.
   The title link is stretched over the whole card (one click target, named
   by the title). Arrow always accent. Hover: photo eases in, arrow slides.
   Width from the parent. White card with a border; the bottom row carries the
   diagonal stripe pattern (as in prt_dec_circle_a).
   Modifier `locked` (a confidential case study): the image blurred and
   greyed (stays so on hover), a mono lock chip in its top left corner
   (option locked_label, default Confidential).
   API: --thumb-ratio (the image's shape, default 16 / 10): a listing that
   features one card across its whole row sets a wider one.
   Colors: --var_post_card_a_bg_clr (card), --var_bdr_clr_a / _b (border, stripes).
   ========================================================================== */
.blk_post_card_a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 8px;
  background: var(--var_post_card_a_bg_clr);
}
.blk_post_card_a > .thumb {
  position: relative;
  aspect-ratio: var(--thumb-ratio, 16/10);
  overflow: hidden;
}
.blk_post_card_a > .thumb > .label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
  background: var(--var_post_card_a_bg_clr);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_hdr_clr_a);
}
.blk_post_card_a > .thumb > .label > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
}
.blk_post_card_a > .thumb > .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s ease;
}
.blk_post_card_a > .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 2rem 2rem;
}
.blk_post_card_a > .body > .num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_post_card_a > .body > .num::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--var_acnt_clr_a);
}
.blk_post_card_a > .body > .title {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.3;
}
.blk_post_card_a > .body > .title > .link {
  color: var(--var_hdr_clr_a);
  text-decoration: none;
}
.blk_post_card_a > .body > .title > .link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.blk_post_card_a > .body > .title > .link:focus-visible {
  outline: none;
}
.blk_post_card_a > .body > .des {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.blk_post_card_a > .bottom {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem 1.5rem;
  border-top: 1px solid var(--var_bdr_clr_a);
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
.blk_post_card_a > .bottom > .list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0;
}
.blk_post_card_a > .bottom > .list > .item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.blk_post_card_a > .bottom > .list > .item > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_post_card_a > .bottom > .list > .item > .des {
  margin: 0;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--var_hdr_clr_a);
}
.blk_post_card_a > .bottom > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  transition: transform 0.3s ease;
}
.blk_post_card_a:hover > .thumb > .img {
  transform: scale(1.04);
}
.blk_post_card_a:hover > .bottom > .prt_icn_a {
  transform: translateX(4px);
}
.blk_post_card_a:has(.link:focus-visible) {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .blk_post_card_a > .thumb > .img,
  .blk_post_card_a > .bottom > .prt_icn_a {
    transition: none;
  }
}
.blk_post_card_a.locked > .thumb > .img, .blk_post_card_a.locked:hover > .thumb > .img, .blk_post_card_a.locked:focus-within > .thumb > .img {
  filter: blur(12px) grayscale(0.6);
  transform: scale(1.12);
}

/* ==========================================================================
   Block: blk_signup_a - Newsletter signup form
   Inline fields: the label lives inside the field as its placeholder (the
   real <label> stays for screen readers, visually hidden). Fields and the
   button sit in one row at the same height; they stack under 645px (own
   width). Outlined in the section's text color, so it recolors with any theme.
   ========================================================================== */
.blk_signup_a {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}
.blk_signup_a > .list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 0.75rem;
}
.blk_signup_a > .list > .item {
  display: flex;
}
.blk_signup_a > .list > .item > .label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.blk_signup_a > .list > .item > .field {
  width: 100%;
  padding: 0 1rem;
  border: 1px solid color-mix(in srgb, var(--var_txt_clr_a) 55%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--var_txt_clr_a) 8%, transparent);
  font-size: 1rem;
  color: var(--var_txt_clr_a);
}
.blk_signup_a > .list > .item > .field::placeholder {
  color: var(--var_txt_clr_b);
}
.blk_signup_a > .list > .item > .field:focus {
  outline: 2px solid var(--var_txt_clr_a);
  outline-offset: -1px;
  border-color: var(--var_txt_clr_a);
}
.blk_signup_a > .list > .prt_btn_c {
  padding-block: 1rem;
}
.blk_signup_a > .des {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--var_txt_clr_b);
}
@container (max-width: 645px) {
  .blk_signup_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
  .blk_signup_a > .list > .item > .field {
    min-height: 3.25rem;
  }
}

/* ==========================================================================
   Block: blk_select_a - Multi-select dropdown
   .hdr button (aria-expanded) shows the label + how many are selected
   ("Categories · 2"); .body panel (hidden attribute) lists checkboxes and a
   "Clear all" link. core.js blkSelectA: open/close, Escape, click outside,
   label count. Checkbox changes bubble a normal `change` event to the parent.
   Colors follow the section (panel = --var_bg_a, borders, accent).
   ========================================================================== */
.blk_select_a {
  position: relative;
}
.blk_select_a > .hdr {
  --var_icn_a_clr: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 13rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_a);
  cursor: pointer;
}
@media (pointer: coarse) {
  .blk_select_a > .hdr {
    min-height: 2.75rem;
  }
}
.blk_select_a > .hdr > .prt_icn_a {
  transition: transform 0.2s ease;
}
.blk_select_a > .hdr:hover, .blk_select_a > .hdr[aria-expanded=true] {
  border-color: var(--var_acnt_clr_a);
}
.blk_select_a > .hdr[aria-expanded=true] > .prt_icn_a {
  transform: rotate(180deg);
}
.blk_select_a > .hdr:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
.blk_select_a > .body {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: max-content;
  min-width: 100%;
  max-width: 20rem;
  padding: 1rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_a);
}
.blk_select_a > .body[hidden] {
  display: none;
}
.blk_select_a > .body > .list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 18rem;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-y: auto;
}
.blk_select_a > .body > .list > .label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.blk_select_a > .body > .list > .item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  cursor: pointer;
}
.blk_select_a > .body > .list > .item:hover {
  background: color-mix(in srgb, var(--var_acnt_clr_a) 8%, transparent);
}
.blk_select_a > .body > .list > .item > input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--var_acnt_clr_a);
}
.blk_select_a > .body > .list > .item > .des {
  font-size: 0.9375rem;
  color: var(--var_txt_clr_a);
}
.blk_select_a > .body > .link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.875rem;
  color: var(--var_acnt_clr_a);
  text-decoration: underline;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .blk_select_a > .hdr > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_leader_card_a - Linked leader card
   Name + role at the top (dark, clear of the photo), accent arrow top right,
   portrait below (prt_img_a, contained — the whole photo, bottom-anchored;
   any cut edge is the photo's own; black and white whatever the CMS
   stores, modifier mono: no colour on the team page), drifting slowly down as the page
   scrolls (an_parallax, speed 60).
   Hover / keyboard focus: an orange panel slides up from the bottom behind
   the photo; the photo box multiplies into it (mix-blend-mode on the box —
   the parallax transform would isolate a blend set on the <img> inside) and
   the text + arrow turn white.
   Width from the parent. Tablet (md): less side padding so a long name
   breaks between words. Phone (sm): a compact card a full row wide, the
   name and role on the left, the portrait on the right half.
   Colors: --var_leader_card_a_bg_clr (card), --var_leader_card_a_txt_clr
   (name / role), --var_leader_card_a_hvr_bg_clr (panel),
   --var_leader_card_a_hvr_txt_clr (text + arrow on the panel).
   ========================================================================== */
.blk_leader_card_a {
  --ease: cubic-bezier(.65, 0, .35, 1);
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  overflow: hidden;
  isolation: isolate;
  background: var(--var_leader_card_a_bg_clr);
  text-decoration: none;
}
.blk_leader_card_a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--var_leader_card_a_hvr_bg_clr);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}
.blk_leader_card_a > .prt_img_a {
  position: absolute;
  inset: 6rem 0 calc(-1 * 2rem);
  mix-blend-mode: multiply;
}
.blk_leader_card_a > .body {
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-inline: 3rem;
  text-align: center;
  color: var(--var_leader_card_a_txt_clr);
  transition: color 0.3s ease 0.1s;
}
.blk_leader_card_a > .body > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.9891304348rem + 0.8695652174cqi, 1.75rem);
  line-height: 1.2;
}
.blk_leader_card_a > .body > .label {
  font-family: var(--font-mono);
  line-height: 1.4;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.blk_leader_card_a > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  transition: transform 0.3s ease;
}
.blk_leader_card_a:hover, .blk_leader_card_a:focus-visible {
  text-decoration: none;
}
.blk_leader_card_a:hover::before, .blk_leader_card_a:focus-visible::before {
  transform: translateY(0);
}
.blk_leader_card_a:hover > .body, .blk_leader_card_a:focus-visible > .body {
  color: var(--var_leader_card_a_hvr_txt_clr);
}
.blk_leader_card_a:hover > .prt_icn_a, .blk_leader_card_a:focus-visible > .prt_icn_a {
  --var_icn_a_clr: var(--var_leader_card_a_hvr_txt_clr);
  transform: translate(3px, -3px);
}
.blk_leader_card_a:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .blk_leader_card_a::before,
  .blk_leader_card_a > .body,
  .blk_leader_card_a > .prt_icn_a {
    transition: none;
  }
}
@container (max-width: 1024px) {
  .blk_leader_card_a > .body {
    padding-inline: 1.5rem;
  }
  .blk_leader_card_a > .body > .name {
    text-wrap: balance;
  }
}
@container (max-width: 645px) {
  .blk_leader_card_a {
    aspect-ratio: auto;
    height: 15rem;
  }
  .blk_leader_card_a > .body {
    top: 50%;
    right: 50%;
    translate: 0 -50%;
    align-items: flex-start;
    padding-inline: 1.5rem 0;
    text-align: left;
  }
  .blk_leader_card_a > .prt_img_a {
    inset: 1rem 0 calc(-1 * 2rem) 46%;
  }
}

/* ==========================================================================
   Block: blk_member_card_a - Team member card
   Centered: avatar (prt_avatar_b) with a small accent mark (prt_dec_mark_a)
   tucked behind one corner — corner set by the mark's position class
   (top_left · top_right · bottom_left · bottom_right · mid_left; + `front`
   to sit over the photo instead of behind it) — name, role. Avatar 6rem.
   Hover: the photo zooms out (avatar --zoom 1.12 → 1) and the mark loops
   its animation (--on: 1).
   With a `link` the root is an <a>: no underline, the name turns accent
   on hover / focus.
   Card color: --var_member_card_a_bg_clr. Width from the parent. Phone:
   less padding (it sits two across).
   ========================================================================== */
.blk_member_card_a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 4rem 1.5rem 3rem;
  background: var(--var_member_card_a_bg_clr);
  color: inherit;
  text-align: center;
  text-decoration: none;
}
.blk_member_card_a:is(a):hover, .blk_member_card_a:is(a):focus-visible {
  text-decoration: none;
}
.blk_member_card_a:is(a):hover > .name, .blk_member_card_a:is(a):focus-visible > .name {
  color: var(--var_acnt_clr_a);
}
.blk_member_card_a:is(a):focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.blk_member_card_a > .thumb {
  position: relative;
  margin-bottom: 1.5rem;
}
.blk_member_card_a > .thumb > .prt_avatar_b {
  position: relative;
  z-index: 1;
}
.blk_member_card_a > .thumb > .prt_dec_mark_a {
  position: absolute;
  z-index: 0;
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.top_left {
  top: -0.5rem;
  left: -1.5rem;
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.top_right {
  top: -0.5rem;
  right: -1.5rem;
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.bottom_left {
  bottom: -0.25rem;
  left: -1.5rem;
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.bottom_right {
  bottom: -0.25rem;
  right: -1.5rem;
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.mid_left {
  top: 50%;
  left: -2rem;
  transform: translateY(-50%);
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.hatch.bottom_right {
  bottom: -0.5rem;
  right: -0.5rem;
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.hatch.bottom_left {
  bottom: -0.5rem;
  left: -0.5rem;
  transform: scaleX(-1);
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.hatch.top_right {
  top: -0.5rem;
  right: -0.5rem;
  transform: scaleY(-1);
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.hatch.top_left {
  top: -0.5rem;
  left: -0.5rem;
  transform: scale(-1);
}
.blk_member_card_a > .thumb > .prt_dec_mark_a.front {
  z-index: 2;
}
.blk_member_card_a > .thumb > .prt_avatar_b {
  --zoom: 1.12;
}
.blk_member_card_a:hover > .thumb > .prt_avatar_b {
  --zoom: 1;
}
.blk_member_card_a:hover > .thumb > .prt_dec_mark_a {
  --on: 1;
}
.blk_member_card_a > .name {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
  transition: color 0.3s ease;
}
.blk_member_card_a > .label {
  margin: 0;
  font-family: var(--font-mono);
  line-height: 1.4;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
@container (max-width: 645px) {
  .blk_member_card_a {
    padding: 2rem 0.75rem 1.5rem;
  }
  .blk_member_card_a > .thumb {
    margin-bottom: 1rem;
  }
  .blk_member_card_a > .thumb > .prt_dec_mark_a.front {
    z-index: 0;
  }
}

/* ==========================================================================
   Block: blk_modal_a - Profile modal (native <dialog>)
   Opened with showModal() (core.js blkModalA): the page behind is blurred and
   tinted (::backdrop), the browser handles focus, Escape and the top layer.
   Panel: fixed, centered, up to 72rem wide and 88svh tall; it scrolls inside
   itself when the copy is long (data-lenis-prevent lets the mouse wheel
   scroll it — Lenis would otherwise swallow wheel events page-wide). Layout (own container): photo left (side_a,
   whole photo, bottom-anchored on a soft panel), info right (side_b: name,
   role, summary, quote, Get in Touch); stacks under 645px.
   Motion both ways: slides/fades in on open; on close core.js adds
   `is_closing`, plays the reverse, then closes (none for reduced motion).
   Close: square prt_btn_b (x), pinned top right while the panel scrolls
   (sticky) — a <form method="dialog">, so it works without JS too. `open` attribute (config) = shown inline, not modal
   (style guide).
   Colors: --var_modal_a_bg_clr (panel), --var_modal_a_side_clr (photo
   panel), --var_modal_a_ovl_clr (backdrop tint).
   ========================================================================== */
.blk_modal_a {
  container-type: inline-size;
  width: min(72rem, 100vw - 2rem);
  max-width: none;
  max-height: min(88svh, 52rem);
  margin: auto;
  padding: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 4px;
  background: var(--var_modal_a_bg_clr);
  color: var(--var_txt_clr_a);
}
.blk_modal_a[open]:not(:modal) {
  position: relative;
  margin: 0;
}
.blk_modal_a::backdrop {
  background: color-mix(in srgb, var(--var_modal_a_ovl_clr) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.blk_modal_a:modal[open] {
  animation: blk_modal_a_in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.blk_modal_a:modal[open]::backdrop {
  animation: blk_modal_a_fade 0.35s ease;
}
.blk_modal_a:modal[open].is_closing {
  animation: blk_modal_a_out 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.blk_modal_a:modal[open].is_closing::backdrop {
  animation: blk_modal_a_fade_out 0.25s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .blk_modal_a:modal[open], .blk_modal_a:modal[open]::backdrop, .blk_modal_a:modal[open].is_closing, .blk_modal_a:modal[open].is_closing::backdrop {
    animation: none;
  }
}
.blk_modal_a > .content {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: min(36rem, 80svh);
}
.blk_modal_a .side_a {
  position: sticky;
  top: 0;
  align-self: start;
  height: calc(min(88svh, 52rem) - 2px);
  min-height: 20rem;
  background: var(--var_modal_a_side_clr);
}
.blk_modal_a .side_a > .prt_img_a {
  position: absolute;
  inset: 3rem 0 0;
}
.blk_modal_a .side_b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 3rem 3rem 2rem;
}
.blk_modal_a .side_b > .title {
  margin: 0;
  font-size: clamp(1.875rem, 1.5489130435rem + 1.0869565217cqi, 2.5rem);
  line-height: 1.05;
  color: var(--var_hdr_clr_a);
}
.blk_modal_a .side_b > .label {
  margin: calc(-1 * 0.75rem) 0 1rem;
  font-family: var(--font-mono);
  line-height: 1.4;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.blk_modal_a .side_b > .des {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blk_modal_a .side_b > .des > p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.blk_modal_a .side_b > .sub {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
}
.blk_modal_a .side_b > .sub > .prt_icn_a {
  width: 2rem;
  height: 2rem;
}
.blk_modal_a .side_b > .sub > p {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1rem, 0.902173913rem + 0.3260869565cqi, 1.1875rem);
  line-height: 1.45;
  color: var(--var_hdr_clr_a);
}
.blk_modal_a .side_b > .prt_btn_c {
  margin-top: auto;
}
.blk_modal_a > .controls {
  position: sticky;
  top: 1rem;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  height: 0;
  margin: 0;
  padding-right: 1rem;
}
.blk_modal_a[open]:not(:modal) > .controls {
  display: none;
}
@container (max-width: 645px) {
  .blk_modal_a > .content {
    grid-template-columns: minmax(0, 1fr);
  }
  .blk_modal_a .side_a {
    position: relative;
    height: auto;
    min-height: 18rem;
  }
  .blk_modal_a .side_b {
    padding: 2rem 1.5rem;
  }
}

@keyframes blk_modal_a_in {
  from {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.98);
  }
}
@keyframes blk_modal_a_fade {
  from {
    opacity: 0;
  }
}
@keyframes blk_modal_a_out {
  to {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.98);
  }
}
@keyframes blk_modal_a_fade_out {
  to {
    opacity: 0;
  }
}
/* ==========================================================================
   Block: blk_quote_a - Quote card
   Accent quote mark, heading, paragraph, then the person: round avatar
   (prt_avatar_b.top) with name + role. Bordered card on --var_bg_b with a
   short accent rule on top. Width from the parent.
   ========================================================================== */
.blk_quote_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 2rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 4px;
  background: var(--var_bg_b);
}
.blk_quote_a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 2rem;
  width: 3rem;
  height: 3px;
  background: var(--var_acnt_clr_a);
}
.blk_quote_a > .prt_icn_a {
  width: 2rem;
  height: 2rem;
}
.blk_quote_a > .body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}
.blk_quote_a > .body > .title {
  margin: 0;
  font-size: clamp(1.25rem, 1.0543478261rem + 0.652173913cqi, 1.625rem);
  line-height: 1.25;
  color: var(--var_hdr_clr_a);
}
.blk_quote_a > .body > .des {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.blk_quote_a > .bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--var_bdr_clr_a);
}
.blk_quote_a > .bottom > .prt_avatar_b {
  width: 3rem;
}
.blk_quote_a > .bottom > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.blk_quote_a > .bottom > .wrap > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
  color: var(--var_hdr_clr_a);
}
.blk_quote_a > .bottom > .wrap > .label {
  font-family: var(--font-mono);
  line-height: 1.4;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}

/* ==========================================================================
   Block: blk_feature_card_a - Large feature card
   Two columns (own container): left = number (mono, accent), title,
   description, button pinned to the bottom; right = image (cover), or —
   with no image — a flush full-height striped panel (.dec_a) holding the
   isometric tile (prt_icn_b), rising in on view (an_inview).
   White card, 1px border, square corners, no shadow. Columns split exactly at the center (no column gap).
   Own width: under 1024px less padding (--pad) and gutter (--gut); under 645px it stacks, the graphic panel full
   width and flush with the card's edges (after the text; flip: before it, a line under it), as tall as its graphic.
   Optional icon / label beside the number, and points (accent ticks).
   Modifier flip: graphic panel on the left, content on the right.
   Colors: --var_feature_card_a_bg_clr (card).
   ========================================================================== */
.blk_feature_card_a {
  --des-w: 30rem;
  --pad: 2rem;
  --gut: 3rem;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pad) 0;
  min-height: 26rem;
  padding: var(--pad);
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 0;
  background: var(--var_feature_card_a_bg_clr);
}
.blk_feature_card_a > .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem var(--gut) 0.5rem 0;
}
.blk_feature_card_a > .body > .hdr {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.blk_feature_card_a > .body > .hdr > .num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--var_acnt_clr_a);
}
.blk_feature_card_a > .body > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_feature_card_a > .body > .list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.blk_feature_card_a > .body > .list > .item {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--var_txt_clr_a);
}
.blk_feature_card_a > .body > .list > .item::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.625rem;
  height: 1px;
  background: var(--var_acnt_clr_a);
}
.blk_feature_card_a > .body > .title {
  margin: 0;
  font-size: clamp(1.5rem, 1.2391304348rem + 0.8695652174cqi, 2rem);
  line-height: 1.15;
  color: var(--var_hdr_clr_a);
}
.blk_feature_card_a > .body > .des {
  max-width: var(--des-w);
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.blk_feature_card_a > .body > .des > p,
.blk_feature_card_a > .body > .des > ul,
.blk_feature_card_a > .body > .des > ol {
  margin: 0 0 0.75rem;
}
.blk_feature_card_a > .body > .des > :last-child {
  margin-bottom: 0;
}
.blk_feature_card_a > .body > .des > ul,
.blk_feature_card_a > .body > .des > ol {
  padding-left: 1.1em;
}
.blk_feature_card_a > .body > .des li + li {
  margin-top: 0.25rem;
}
.blk_feature_card_a > .body > .des strong {
  color: var(--var_hdr_clr_a);
  font-weight: 600;
}
.blk_feature_card_a > .body > .prt_btn_a {
  margin-top: auto;
}
.blk_feature_card_a > .thumb {
  position: relative;
  min-height: 16rem;
  overflow: hidden;
  border-radius: 2px;
}
.blk_feature_card_a > .thumb > .prt_img_a {
  position: absolute;
  inset: 0;
}
.blk_feature_card_a > .dec_a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 18rem;
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  border-left: 1px solid var(--var_bdr_clr_a);
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/12px 12px;
  overflow: hidden;
}
.blk_feature_card_a > .dec_a > .wrap:has(> .prt_layer_a) {
  width: min(72%, 22rem);
}
.blk_feature_card_a > .dec_a > .wrap > .item {
  width: 11rem;
  aspect-ratio: 1;
  transform: rotateX(55deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}
.blk_feature_card_a.flip > .dec_a,
.blk_feature_card_a.flip > .thumb {
  order: -1;
}
.blk_feature_card_a.flip > .dec_a {
  margin: calc(-1 * var(--pad)) 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));
  border-left: 0;
  border-right: 1px solid var(--var_bdr_clr_a);
}
.blk_feature_card_a.flip > .body {
  padding: 1rem 0 0.5rem var(--gut);
}
.blk_feature_card_a:hover > .dec_a > .wrap > .prt_layer_a, .blk_feature_card_a:focus-within > .dec_a > .wrap > .prt_layer_a {
  --on: 1;
}
@container (max-width: 1024px) {
  .blk_feature_card_a {
    --pad: 1.5rem;
    --gut: 2rem;
    min-height: 0;
  }
  .blk_feature_card_a > .dec_a {
    min-height: 14rem;
  }
  .blk_feature_card_a > .dec_a > .wrap:has(> .prt_layer_a) {
    width: min(64%, 17rem);
  }
}
@container (max-width: 645px) {
  .blk_feature_card_a {
    --gut: 0px;
  }
  .blk_feature_card_a > .dec_a {
    grid-column: 1/-1;
    min-height: 0;
    padding-block: 1.5rem;
    margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));
  }
  .blk_feature_card_a > .dec_a > .wrap:has(> .prt_layer_a) {
    width: min(56%, 16rem);
  }
  .blk_feature_card_a > .dec_a {
    border-left: 0;
    border-top: 1px solid var(--var_bdr_clr_a);
  }
  .blk_feature_card_a.flip > .dec_a {
    margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid var(--var_bdr_clr_a);
  }
  .blk_feature_card_a > .body,
  .blk_feature_card_a > .thumb {
    grid-column: 1/-1;
  }
  .blk_feature_card_a > .body {
    padding: 0;
  }
  .blk_feature_card_a > .body > .prt_btn_a {
    margin-top: 1rem;
  }
}
@container (max-width: 480px) {
  .blk_feature_card_a {
    --pad: 1rem;
  }
  .blk_feature_card_a > .dec_a {
    padding-block: 1rem;
  }
  .blk_feature_card_a > .dec_a > .wrap:has(> .prt_layer_a) {
    width: min(46%, 11rem);
  }
}
@container (max-width: 1024px) {
  .blk_feature_card_a > .body > .prt_btn_a > span > .more {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ==========================================================================
   Block: blk_person_card_a - Person card
   Flat card (no border, no shadow): name (accent) + role on top, cutout
   photo (prt_img_a, contained) centered at the bottom. With a quote
   (`is_quote`, set by the partial) it's two columns — quote mark, text and
   name on the left, photo bottom-right — and the photo breaks out above the card's top edge
   (parent must leave room above). No hover state.
   Colors: --var_person_card_a_bg_clr (card).
   ========================================================================== */
.blk_person_card_a {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 34rem;
  overflow: hidden;
  border-radius: 4px;
  background: var(--var_person_card_a_bg_clr);
}
.blk_person_card_a > .body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  width: 52%;
  padding: 2rem;
}
.blk_person_card_a > .body > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
}
.blk_person_card_a > .body > .des {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.blk_person_card_a > .body > .name {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--var_acnt_clr_a);
}
.blk_person_card_a > .body > .label {
  margin: 0;
  font-family: var(--font-mono);
  line-height: 1.4;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_person_card_a > .prt_img_a {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 92%;
}
.blk_person_card_a > .prt_img_a > .img {
  object-position: bottom right;
}
.blk_person_card_a:not(.is_quote) > .body {
  justify-content: flex-start;
  width: 100%;
}
.blk_person_card_a:not(.is_quote) > .prt_img_a {
  left: 50%;
  right: auto;
  width: 86%;
  height: 76%;
  margin-left: -43%;
}
.blk_person_card_a:not(.is_quote) > .prt_img_a > .img {
  object-position: bottom center;
}
.blk_person_card_a.is_quote {
  overflow: visible;
}
.blk_person_card_a.is_quote > .body {
  width: 46%;
}
.blk_person_card_a.is_quote > .prt_img_a {
  width: 60%;
  height: calc(100% + 3rem);
}
@container grd (max-width: 1024px) {
  .blk_person_card_a:not(.is_quote) {
    min-height: 30rem;
  }
  .blk_person_card_a:not(.is_quote) > .prt_img_a {
    width: 92%;
    height: 80%;
    margin-left: -46%;
  }
}
@container grd (max-width: 645px) {
  .blk_person_card_a:not(.is_quote) {
    min-height: 26rem;
  }
  .blk_person_card_a:not(.is_quote) > .body {
    padding: 1.5rem;
  }
}
@container (max-width: 480px) {
  .blk_person_card_a.is_quote {
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .blk_person_card_a.is_quote > .body {
    width: 100%;
    padding-bottom: 0.5rem;
  }
  .blk_person_card_a.is_quote > .prt_img_a {
    position: relative;
    right: auto;
    width: 72%;
    height: 16rem;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Block: blk_step_a - Process step
   The ruler runs the block's full width (steps placed side by side form one
   continuous ruler); below it, after a buffer, one card: title + description
   on a plain panel joined to the striped graphic panel (stripes only there),
   with a gap on the right. States (set by a parent, e.g.
   core.js mdlProcessA): `is_active` = the step on the ruler's needle (accent
   major tick + number, graphic full size); `is_muted` = the others (text and
   graphic faded and the graphic — not its panel — slightly smaller); the
   active panel's stripes drift. Neither = plain, fully visible.
   Options: label (mono eyebrow), points (accent-tick list), link / link_text.
   Modifier `compact`: shorter image panel (cards with points).
   Modifier `top`: the graphic panel above the text (card grids).
   Modifier `solid`: muted panels stay opaque, only their content fades.
   Modifier `connect`: a dotted accent line runs from the panel across the
   gap to the next step, drawn to --grow (0–1; a parent animates it).
   The gap on the card's right (--gap) narrows at sm, so a swiped row's card
   keeps its width on a phone.
   Colors: --var_step_a_bg_clr (panel, under the stripes).
   ========================================================================== */
.blk_step_a {
  --gap: 4rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
@container (max-width: 645px) {
  .blk_step_a {
    --gap: 2rem;
  }
}
.blk_step_a > .prt_dec_ruler_a {
  margin-bottom: 2rem;
}
.blk_step_a > .body,
.blk_step_a > .dec_a {
  margin-right: var(--gap);
  transition: opacity 0.6s ease;
}
.blk_step_a > .body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-bottom: 0;
  background: var(--var_step_a_bg_clr);
}
.blk_step_a > .body > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  margin-bottom: 0.5rem;
}
.blk_step_a > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.blk_step_a > .body > .title {
  margin: 0;
  font-size: clamp(1.0625rem, 0.964673913rem + 0.3260869565cqi, 1.25rem);
  line-height: 1.25;
  color: var(--var_hdr_clr_a);
}
.blk_step_a > .body > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.blk_step_a > .body > .des {
  max-width: 26rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.blk_step_a > .body > .des > p,
.blk_step_a > .body > .des > ul,
.blk_step_a > .body > .des > ol {
  margin: 0 0 0.75rem;
}
.blk_step_a > .body > .des > :last-child {
  margin-bottom: 0;
}
.blk_step_a > .body > .des > ul,
.blk_step_a > .body > .des > ol {
  padding-left: 1.1em;
}
.blk_step_a > .body > .des li + li {
  margin-top: 0.25rem;
}
.blk_step_a > .body > .des strong {
  color: var(--var_hdr_clr_a);
  font-weight: 600;
}
.blk_step_a > .body > .list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0 0;
  padding: 0.75rem 0 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.blk_step_a > .body > .list > .item {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--var_txt_clr_a);
}
.blk_step_a > .body > .list > .item::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.625rem;
  height: 1px;
  background: var(--var_acnt_clr_a);
}
.blk_step_a > .body > .prt_btn_d {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.8125rem;
}
.blk_step_a > .dec_a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(11rem, 30svh, 18rem);
  padding: 1.5rem;
  container-type: size;
  border: 1px solid var(--var_bdr_clr_a);
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/12px 12px, var(--var_step_a_bg_clr);
}
.blk_step_a > .dec_a > .prt_layer_a {
  width: min(70%, 15rem, 100cqh);
  transition: scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.blk_step_a.top > .body,
.blk_step_a.top > .dec_a {
  margin-right: 0;
}
.blk_step_a.top > .dec_a {
  order: 1;
  border-bottom: 0;
}
.blk_step_a.top > .body {
  order: 2;
  border-bottom: 1px solid var(--var_bdr_clr_a);
}
.blk_step_a.compact > .dec_a {
  height: clamp(8rem, 20svh, 12rem);
  padding: 1rem;
}
.blk_step_a.compact > .dec_a > .prt_layer_a {
  width: min(60%, 11rem, 100cqh);
}
.blk_step_a.is_active > .dec_a {
  animation: blk_step_a_stripes 1.2s linear infinite;
}
.blk_step_a.connect > .dec_a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--gap);
  border-top: 2px dotted var(--var_acnt_clr_a);
  transform: scaleX(var(--grow, 1));
  transform-origin: left center;
  pointer-events: none;
}
.blk_step_a.is_active > .prt_dec_ruler_a {
  --major-clr: var(--var_acnt_clr_a);
}
.blk_step_a.is_muted > .body {
  opacity: 0.4;
}
.blk_step_a.is_muted > .dec_a {
  opacity: 0.45;
}
.blk_step_a.is_muted > .dec_a > .prt_layer_a {
  scale: 0.9;
}
.blk_step_a.solid > .body > *,
.blk_step_a.solid > .dec_a > .prt_layer_a {
  transition: opacity 0.6s ease, scale 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.blk_step_a.solid.is_muted > .body,
.blk_step_a.solid.is_muted > .dec_a {
  opacity: 1;
}
.blk_step_a.solid.is_muted > .body > * {
  opacity: 0.4;
}
.blk_step_a.solid.is_muted > .dec_a > .prt_layer_a {
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .blk_step_a > .body,
  .blk_step_a > .dec_a {
    transition: none;
  }
  .blk_step_a.is_active > .dec_a {
    animation: none;
  }
  .blk_step_a > .dec_a > .prt_layer_a, .blk_step_a.solid > .body > * {
    transition: none;
  }
}

@keyframes blk_step_a_stripes {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 12px 0, 0 0;
  }
}
/* ==========================================================================
   Block: blk_nav_group_a - Navigation cell (header dropdowns)
   Type first: a small accent icon (or a mono label), the title, a two-line
   description (clamped, fixed height so rows align) and optional links.
   The whole cell links to `link`: the title link stretches over it, an
   arrow sits in the top-right corner (nudges up-right on hover) and the
   cell tints; the optional links sit above the stretch and work on their
   own. Modifier `feature` (a post): mono label, larger title, meta line
   (.sub), excerpt, a "Read article" cue (.bottom) and the image on the right.
   Fills the box its parent gives it; the parent draws the grid lines.
   Colors follow the section (heading / muted text / accent); API --cell-hvr
   (hover tint, default 5% of the heading color).
   ========================================================================== */
.blk_nav_group_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 1.5rem;
  transition: background 0.3s ease;
}
.blk_nav_group_a:hover {
  background: var(--cell-hvr, color-mix(in srgb, var(--var_hdr_clr_a) 5%, transparent));
}
.blk_nav_group_a > .prt_icn_a,
.blk_nav_group_a > .label {
  margin-bottom: 0.5rem;
}
.blk_nav_group_a > .label {
  display: flex;
  align-items: center;
  min-height: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.blk_nav_group_a > .link {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
  text-decoration: none;
}
.blk_nav_group_a > .link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.blk_nav_group_a > .link:hover {
  text-decoration: none;
}
.blk_nav_group_a > .link:focus-visible {
  outline: none;
}
.blk_nav_group_a > .link:focus-visible::after {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.blk_nav_group_a > .link > .prt_icn_a {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  transition: translate 0.3s ease;
}
.blk_nav_group_a:hover > .link > .prt_icn_a {
  translate: 2px -2px;
}
.blk_nav_group_a > .sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--var_txt_clr_b);
}
.blk_nav_group_a > .des {
  display: -webkit-box;
  max-width: 22rem;
  min-height: 3.1em;
  margin: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--var_txt_clr_b);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.blk_nav_group_a > .list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.blk_nav_group_a > .list > .item > .link {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--var_txt_clr_a);
  text-decoration: none;
  transition: color 0.2s ease;
}
.blk_nav_group_a > .list > .item > .link:hover {
  color: var(--var_acnt_clr_a);
  text-decoration: none;
}
.blk_nav_group_a > .list > .item > .link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
.blk_nav_group_a.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-content: start;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
}
.blk_nav_group_a.feature > * {
  grid-column: 1;
}
.blk_nav_group_a.feature > .link {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.125rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.blk_nav_group_a.feature > .link > .prt_icn_a {
  display: none;
}
.blk_nav_group_a.feature > .sub {
  margin-top: 0.25rem;
}
.blk_nav_group_a.feature > .des {
  margin-top: 0.25rem;
}
.blk_nav_group_a.feature > .bottom {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.blk_nav_group_a.feature > .bottom > .prt_icn_a {
  transition: translate 0.3s ease;
}
.blk_nav_group_a.feature:hover > .bottom > .prt_icn_a {
  translate: 0.25rem 0;
}
.blk_nav_group_a.feature > .thumb {
  position: relative;
  grid-column: 2;
  grid-row: 1/span 6;
  min-height: 100%;
  overflow: hidden;
}
.blk_nav_group_a.feature > .thumb > .prt_img_a {
  position: absolute;
  inset: 0;
  transition: scale 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.blk_nav_group_a.feature:hover > .thumb > .prt_img_a {
  scale: 1.04;
}
@media (prefers-reduced-motion: reduce) {
  .blk_nav_group_a,
  .blk_nav_group_a > .link > .prt_icn_a,
  .blk_nav_group_a > .list > .item > .link, .blk_nav_group_a.feature > .bottom > .prt_icn_a, .blk_nav_group_a.feature > .thumb > .prt_img_a {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_process_card_a - Process step card
   One card, two halves side by side (stacked under 645px of its own width):
   .body = step number (mono accent) at the top, then a larger accent icon
   left-aligned above the title, and a
   short description on a plain panel; .dec_a = a striped panel holding a
   stack graphic (prt_layer_a, option `layer`) — the same language as the
   horizontal process (blk_step_a). 1px border, no shadow.
   Colors: --var_process_card_a_bg_clr (plain panel, under the stripes)
   ========================================================================== */
.blk_process_card_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 20rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 2px;
  background: var(--var_process_card_a_bg_clr);
  overflow: hidden;
}
.blk_process_card_a > .body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 2rem 2rem;
}
.blk_process_card_a > .body > .hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: auto;
  padding-bottom: 1.5rem;
}
.blk_process_card_a > .body > .hdr > .num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--var_acnt_clr_a);
}
.blk_process_card_a > .body > .prt_icn_a {
  margin-bottom: 0.5rem;
}
.blk_process_card_a > .body > .title {
  margin: 0;
  font-size: clamp(1.375rem, 1.1141304348rem + 0.8695652174cqi, 1.875rem);
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
}
.blk_process_card_a > .body > .des {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.blk_process_card_a > .body > .des > p,
.blk_process_card_a > .body > .des > ul,
.blk_process_card_a > .body > .des > ol {
  margin: 0 0 0.75rem;
}
.blk_process_card_a > .body > .des > :last-child {
  margin-bottom: 0;
}
.blk_process_card_a > .body > .des > ul,
.blk_process_card_a > .body > .des > ol {
  padding-left: 1.1em;
}
.blk_process_card_a > .body > .des li + li {
  margin-top: 0.25rem;
}
.blk_process_card_a > .body > .des strong {
  color: var(--var_hdr_clr_a);
  font-weight: 600;
}
.blk_process_card_a > .dec_a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--var_bdr_clr_a);
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/12px 12px, var(--var_process_card_a_bg_clr);
}
.blk_process_card_a > .dec_a > .prt_layer_a {
  width: min(86%, 21rem);
}
.blk_process_card_a > .body:only-child {
  grid-column: 1/-1;
}
@container grd (max-width: 1024px) {
  .blk_process_card_a > .dec_a {
    padding-block: 1.5rem;
  }
}
@container (max-width: 645px) {
  .blk_process_card_a > .body,
  .blk_process_card_a > .dec_a {
    grid-column: 1/-1;
  }
  .blk_process_card_a > .dec_a {
    min-height: 12rem;
    border-left: 0;
    border-top: 1px solid var(--var_bdr_clr_a);
  }
}
@container grd (max-width: 645px) {
  .blk_process_card_a {
    min-height: 0;
  }
  .blk_process_card_a > .body {
    padding: 1.5rem;
  }
  .blk_process_card_a > .body > .hdr {
    padding-bottom: 1rem;
  }
  .blk_process_card_a > .dec_a {
    min-height: 0;
  }
  .blk_process_card_a > .dec_a > .prt_layer_a {
    width: min(64%, 15rem);
  }
}

/* ==========================================================================
   Block: blk_job_card_a - Job opening card
   A link card: title, a short description, the job type (mono, clock icon)
   and an accent arrow on the right that nudges on hover; 1px
   border, square-ish corners, no shadow. Hover / focus: the card tints.
   Colors: --var_job_card_a_bg_clr (card)
   ========================================================================== */
.blk_job_card_a {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 0;
  background: var(--var_job_card_a_bg_clr);
  color: var(--var_txt_clr_a);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.blk_job_card_a:hover {
  background-color: color-mix(in srgb, var(--var_job_card_a_bg_clr) 94%, var(--var_hdr_clr_a));
  text-decoration: none;
}
.blk_job_card_a:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
.blk_job_card_a > .body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.blk_job_card_a > .body > .title {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.blk_job_card_a > .body > .des {
  max-width: 40rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.blk_job_card_a > .body > .label {
  --var_icn_a_clr: var(--var_txt_clr_a);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.blk_job_card_a > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  flex-shrink: 0;
  transition: translate 0.3s ease;
}
.blk_job_card_a:hover > .prt_icn_a, .blk_job_card_a:focus-visible > .prt_icn_a {
  translate: 0.25rem 0;
}
@media (prefers-reduced-motion: reduce) {
  .blk_job_card_a,
  .blk_job_card_a > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_perk_a - Perk / benefit cell
   Accent icon, title, short description on a plain cell that fills the
   box its parent gives it (the parent draws / shares the borders).
   Colors: --var_perk_a_bg_clr (cell)
   ========================================================================== */
.blk_perk_a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 2rem;
  background: var(--var_perk_a_bg_clr);
}
.blk_perk_a > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  margin-bottom: 1rem;
}
.blk_perk_a > .title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.blk_perk_a > .des {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}

/* ==========================================================================
   Block: blk_disclosure_a - Content card
   A static card (<section>, h2 title); the body takes rich content
   (paragraphs, bullet lists) and an optional outline button. 1px border,
   no shadow.
   Colors: --var_disclosure_a_bg_clr (card)
   ========================================================================== */
.blk_disclosure_a {
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 2px;
  background: var(--var_disclosure_a_bg_clr);
}
.blk_disclosure_a > .hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
}
.blk_disclosure_a > .hdr > .title {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.blk_disclosure_a > .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 0 2rem 2rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.blk_disclosure_a > .body p {
  margin: 0;
}
.blk_disclosure_a > .body ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1rem;
}
.blk_disclosure_a > .body > .prt_btn_a {
  margin-top: 0.5rem;
}

/* ==========================================================================
   Block: blk_form_a - Project form
   A form card (1px border, no shadow): title + optional live status (pulsing
   accent dot), numbered field groups (`01 About you`, optional des) on a
   2-column grid (`wide` fields span both), visible mono all-caps labels
   above outlined fields (square corners; accent outline on focus), a custom
   chevron on selects, `chips` = radios (or checkboxes with `multiple`) as
   toggle tiles (selected = solid accent), `range` = slider with a large live
   value and an accent fill to the thumb (--fill), an error line (.body) and
   missing fields marked `is_error`, and a bottom row with the required-
   fields count, a note and the buttons (.controls). An accent bar along the
   card's top edge fills as the required fields are completed (--progress).
   core.js blkFormA validates and posts the form (AJAX, form action) and
   redirects to data-success.
   Modifier `steps` (with JS, `is_ready`): one group at a time — step tabs
   (.hdr: number + title, active / done in accent, done steps clickable),
   groups stacked in one grid cell so the card keeps the tallest step's
   height and slides between them, a giant striped step number (.dec_a) in
   each panel, Back (prt_btn_a) / Next (prt_btn_c), the submit on the last
   step only. Without JS every group shows, as in the plain form.
   One column under 480px of its own width.
   Colors: --var_form_a_bg_clr (card)
   ========================================================================== */
.blk_form_a {
  --progress: 0;
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 3rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_form_a_bg_clr);
}
.blk_form_a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: 3px;
  background: var(--var_acnt_clr_a);
  transform: scaleX(var(--progress));
  transform-origin: left;
  transition: transform 0.5s ease;
}
.blk_form_a > .top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}
.blk_form_a > .top > .title {
  margin: 0;
  font-size: clamp(1.375rem, 1.1793478261rem + 0.652173913cqi, 1.75rem);
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
}
.blk_form_a > .top > .label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_form_a > .top > .label > .dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--var_acnt_clr_a);
}
.blk_form_a > .top > .label > .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--var_acnt_clr_a);
  animation: blk_form_a_pulse 2s ease-out infinite;
}
.blk_form_a > .hdr {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.5rem;
  margin: -1rem 0 0;
  padding: 0;
  list-style: none;
}
.blk_form_a > .hdr[hidden] {
  display: none;
}
.blk_form_a > .hdr > .item > .link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 2px solid var(--var_bdr_clr_a);
  background: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
  cursor: default;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.blk_form_a > .hdr > .item > .link > .num {
  color: var(--var_txt_clr_b);
}
.blk_form_a > .hdr > .item > .link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
.blk_form_a > .hdr > .item.is_done > .link {
  border-top-color: color-mix(in srgb, var(--var_acnt_clr_a) 45%, transparent);
  cursor: pointer;
}
.blk_form_a > .hdr > .item.is_done > .link > .num {
  color: var(--var_acnt_clr_a);
}
.blk_form_a > .hdr > .item.is_done > .link:hover {
  color: var(--var_hdr_clr_a);
}
.blk_form_a > .hdr > .item.is_active > .link {
  border-top-color: var(--var_acnt_clr_a);
  color: var(--var_hdr_clr_a);
}
.blk_form_a > .hdr > .item.is_active > .link > .num {
  color: var(--var_acnt_clr_a);
}
.blk_form_a > .body {
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--var_acnt_clr_a);
  background: color-mix(in srgb, var(--var_acnt_clr_a) 8%, transparent);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--var_hdr_clr_a);
}
.blk_form_a > .body[hidden] {
  display: none;
}
.blk_form_a > .body p {
  margin: 0;
}
.blk_form_a > .body.is_done {
  padding: 1.5rem;
  font-size: 1.125rem;
}
.blk_form_a.is_sent > .hdr,
.blk_form_a.is_sent > .wrap,
.blk_form_a.is_sent > .check,
.blk_form_a.is_sent > .bottom {
  display: none;
}
.blk_form_a > .trap {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.blk_form_a > .wrap {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.blk_form_a > .wrap > .group {
  position: relative;
  isolation: isolate;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.blk_form_a > .wrap > .group > .sub {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px dashed var(--var_bdr_clr_a);
  font-family: var(--font-header);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--var_hdr_clr_a);
}
.blk_form_a > .wrap > .group > .sub > .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--var_acnt_clr_a);
}
.blk_form_a > .wrap > .group > .des {
  max-width: 32rem;
  margin: -0.75rem 0 1.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.blk_form_a > .wrap > .group > .dec_a {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  font-family: var(--font-header);
  font-size: clamp(6.875rem, 4.5923913043rem + 7.6086956522cqi, 11.25rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(-45deg, var(--var_acnt_clr_a) 0, var(--var_acnt_clr_a) 1px, transparent 1px, transparent calc(50% - 1px), var(--var_acnt_clr_a) calc(50% - 1px), var(--var_acnt_clr_a) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(100% - 1px), var(--var_acnt_clr_a) calc(100% - 1px), var(--var_acnt_clr_a) 100%) 0 0/10px 10px;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0.35;
  pointer-events: none;
}
.blk_form_a > .wrap > .group > .list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.blk_form_a > .wrap > .group > .list > .item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.blk_form_a > .wrap > .group > .list > .item.wide {
  grid-column: 1/-1;
}
.blk_form_a > .wrap > .group > .list > .item > .label {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_form_a > .wrap > .group > .list > .item.chips > .label {
  margin-bottom: 0.5rem;
}
.blk_form_a > .wrap > .group > .list > .item .field {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 0;
  background: var(--var_form_a_bg_clr);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--var_txt_clr_a);
  transition: border-color 0.2s ease;
}
@media (pointer: coarse) {
  .blk_form_a > .wrap > .group > .list > .item .field {
    font-size: 1rem;
  }
}
@container grd (max-width: 645px) {
  .blk_form_a > .wrap > .group > .list > .item .field {
    font-size: 1rem;
  }
}
.blk_form_a > .wrap > .group > .list > .item .field::placeholder {
  color: var(--var_txt_clr_b);
  opacity: 0.7;
}
.blk_form_a > .wrap > .group > .list > .item .field:hover {
  border-color: color-mix(in srgb, var(--var_txt_clr_a) 35%, transparent);
}
.blk_form_a > .wrap > .group > .list > .item .field:focus {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -1px;
  border-color: var(--var_acnt_clr_a);
}
.blk_form_a > .wrap > .group > .list > .item textarea.field {
  resize: vertical;
}
.blk_form_a > .wrap > .group > .list > .item.is_error > .label {
  color: var(--var_acnt_clr_a);
}
.blk_form_a > .wrap > .group > .list > .item.is_error .field,
.blk_form_a > .wrap > .group > .list > .item.is_error > .options > .chip > span {
  border-color: var(--var_acnt_clr_a);
}
.blk_form_a > .wrap > .group > .list > .item > .wrap {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: relative;
}
.blk_form_a > .wrap > .group > .list > .item > .wrap > .field {
  appearance: none;
  padding-right: 3rem;
  cursor: pointer;
}
.blk_form_a > .wrap > .group > .list > .item > .wrap > .prt_icn_a {
  position: absolute;
  top: 50%;
  right: 1rem;
  translate: 0 -50%;
  pointer-events: none;
}
.blk_form_a > .wrap > .group > .list > .item > .options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.blk_form_a > .wrap > .group > .list > .item > .options > .chip {
  position: relative;
  cursor: pointer;
}
.blk_form_a > .wrap > .group > .list > .item > .options > .chip > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.blk_form_a > .wrap > .group > .list > .item > .options > .chip > span {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_form_a_bg_clr);
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--var_txt_clr_a);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.blk_form_a > .wrap > .group > .list > .item > .options > .chip:hover > span {
  border-color: var(--var_acnt_clr_a);
}
.blk_form_a > .wrap > .group > .list > .item > .options > .chip > input:checked + span {
  border-color: var(--var_btn_c_bg_clr);
  background: var(--var_btn_c_bg_clr);
  color: var(--var_btn_c_txt_clr);
}
.blk_form_a > .wrap > .group > .list > .item > .options > .chip > input:focus-visible + span {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
.blk_form_a > .wrap > .group > .list > .item.range > .num {
  font-family: var(--font-header);
  font-size: clamp(1.75rem, 1.3586956522rem + 1.3043478261cqi, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.blk_form_a > .wrap > .group > .list > .item.range > .field {
  min-height: 0;
  height: 1.5rem;
  padding: 0;
  border: 0;
  appearance: none;
  background: linear-gradient(var(--var_acnt_clr_a), var(--var_acnt_clr_a)) 0 50%/calc(var(--fill) * 100%) 3px no-repeat, linear-gradient(var(--var_bdr_clr_a), var(--var_bdr_clr_a)) 0 50%/100% 1px no-repeat;
  cursor: pointer;
}
.blk_form_a > .wrap > .group > .list > .item.range > .field:focus {
  outline: none;
}
.blk_form_a > .wrap > .group > .list > .item.range > .field::-webkit-slider-thumb {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--var_form_a_bg_clr);
  background: var(--var_acnt_clr_a);
  transition: scale 0.2s ease;
}
.blk_form_a > .wrap > .group > .list > .item.range > .field::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--var_form_a_bg_clr);
  border-radius: 0;
  background: var(--var_acnt_clr_a);
}
.blk_form_a > .wrap > .group > .list > .item.range > .field:hover::-webkit-slider-thumb {
  scale: 1.15;
}
.blk_form_a > .wrap > .group > .list > .item.range > .field:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
.blk_form_a > .wrap > .group > .list > .item.range > .field:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .blk_form_a > .wrap > .group > .list > .item.range > .field {
    height: 2.75rem;
  }
  .blk_form_a > .wrap > .group > .list > .item.range > .field::-webkit-slider-thumb {
    width: 1.75rem;
    height: 1.75rem;
  }
  .blk_form_a > .wrap > .group > .list > .item.range > .field::-moz-range-thumb {
    width: 1.75rem;
    height: 1.75rem;
  }
}
.blk_form_a > .wrap > .group > .list > .item.range > .bottom {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_form_a > .bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.blk_form_a > .bottom > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.blk_form_a > .bottom > .wrap > .label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.blk_form_a > .bottom > .wrap > .des {
  max-width: 26rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.blk_form_a > .bottom > .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.blk_form_a > .bottom > .controls > [hidden] {
  display: none;
}
.blk_form_a.is_loading > .bottom > .controls > [type=submit] {
  opacity: 0.6;
  cursor: progress;
}
.blk_form_a.steps.is_ready > .wrap {
  display: grid;
  flex: 1;
  align-items: start;
  overflow: hidden;
}
.blk_form_a.steps.is_ready > .wrap > .group {
  grid-area: 1/1;
  height: 100%;
  transition: opacity 0.4s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.6s;
}
.blk_form_a.steps.is_ready > .wrap > .group:not(.is_active) {
  visibility: hidden;
  opacity: 0;
  translate: 3rem 0;
  pointer-events: none;
}
.blk_form_a.steps.is_ready > .wrap > .group.is_prev:not(.is_active) {
  translate: -3rem 0;
}
.blk_form_a.steps.is_ready > .wrap > .group.is_active {
  transition-delay: 0s;
}
.blk_form_a.steps.is_ready > .wrap > .group > .sub {
  display: none;
}
.blk_form_a.steps.is_ready > .wrap > .group > .des {
  margin-top: 0;
  font-size: 1rem;
  color: var(--var_hdr_clr_a);
}
@media (prefers-reduced-motion: reduce) {
  .blk_form_a::before,
  .blk_form_a > .hdr > .item > .link,
  .blk_form_a > .wrap > .group,
  .blk_form_a > .wrap > .group > .list > .item .field,
  .blk_form_a > .wrap > .group > .list > .item > .options > .chip > span {
    transition: none;
  }
  .blk_form_a > .top > .label > .dot::after {
    animation: none;
  }
  .blk_form_a > .wrap > .group > .list > .item.range > .field::-webkit-slider-thumb {
    transition: none;
  }
}
@container grd (max-width: 645px) {
  .blk_form_a {
    padding: 1.5rem;
  }
}
@container grd (max-width: 480px) {
  .blk_form_a {
    padding: 1rem;
  }
}
@container (max-width: 480px) {
  .blk_form_a > .wrap > .group > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 645px) {
  .blk_form_a > .hdr > .item > .link > .label {
    display: none;
  }
}
@container grd (max-width: 1024px) {
  .blk_form_a > .wrap > .group > .dec_a {
    display: none;
  }
}

@keyframes blk_form_a_pulse {
  from {
    transform: scale(1);
    opacity: 0.6;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}
/* ==========================================================================
   Block: blk_channel_a - Contact channel row
   One row: an outlined icon tile, then mono label / value (the cell's link
   or button, stretched over the whole cell) / short hint, and an arrow on
   the right that nudges on hover. Plain cell that fills the box its parent
   gives it, content centered vertically (the parent draws / shares the
   borders); tints on hover / focus.
   ========================================================================== */
.blk_channel_a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
  padding: 1.5rem 2rem;
  transition: background-color 0.3s ease;
}
.blk_channel_a > .wrap {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  border: 1px solid var(--var_bdr_clr_a);
}
.blk_channel_a > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  transition: translate 0.3s ease;
}
.blk_channel_a > .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.blk_channel_a > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.blk_channel_a > .body > .link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--font-header);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--var_hdr_clr_a);
  text-decoration: none;
  cursor: pointer;
}
.blk_channel_a > .body > .link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.blk_channel_a > .body > .link:focus-visible {
  outline: none;
}
.blk_channel_a > .body > .link:focus-visible::after {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.blk_channel_a > .body > .des {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--var_txt_clr_b);
}
.blk_channel_a:hover, .blk_channel_a:focus-within {
  background-color: color-mix(in srgb, var(--var_hdr_clr_a) 4%, transparent);
}
.blk_channel_a:hover > .prt_icn_a, .blk_channel_a:focus-within > .prt_icn_a {
  translate: 0.25rem 0;
}
@media (prefers-reduced-motion: reduce) {
  .blk_channel_a,
  .blk_channel_a > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_story_card_a - Story cell (client story, post)
   A cell for a dashed cell grid (no border or radius of its own; the parent
   draws the lines): image (16:10, square corners), mono caps meta line
   (category or place in the accent, date), title, description. With a link
   (`is_link`, set by the partial) the title link is stretched over the cell,
   an arrow sits in the top-right corner of the body and the cell tints on
   hover; without one it's static.
   Colors: section variables (--var_bg_a, --var_bg_b, --var_hdr_clr_a,
   --var_txt_clr_b, --var_acnt_clr_a)
   ========================================================================== */
.blk_story_card_a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  padding: 1.5rem;
  background: var(--var_bg_a);
  transition: background-color 0.3s ease;
}
.blk_story_card_a > .thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--var_bg_b);
}
.blk_story_card_a > .thumb > .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.blk_story_card_a > .body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blk_story_card_a > .body > .label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_story_card_a > .body > .label > .name {
  color: var(--var_acnt_clr_a);
}
.blk_story_card_a > .body > .title {
  margin: 0;
  font-size: clamp(1.1875rem, 1.089673913rem + 0.3260869565cqi, 1.375rem);
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.blk_story_card_a > .body > .title > .link {
  color: inherit;
  text-decoration: none;
}
.blk_story_card_a > .body > .title > .link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.blk_story_card_a > .body > .title > .link:focus-visible {
  outline: none;
}
.blk_story_card_a > .body > .des {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.blk_story_card_a > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  transition: transform 0.3s ease;
}
.blk_story_card_a.is_link > .body {
  padding-right: 2rem;
}
.blk_story_card_a.is_link:hover {
  background: color-mix(in srgb, var(--var_bg_a) 94%, var(--var_hdr_clr_a));
}
.blk_story_card_a.is_link:hover > .thumb > .img {
  transform: scale(1.04);
}
.blk_story_card_a.is_link:hover > .prt_icn_a {
  transform: translate(3px, -3px);
}
.blk_story_card_a:has(.link:focus-visible) {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .blk_story_card_a,
  .blk_story_card_a > .thumb > .img,
  .blk_story_card_a > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_case_step_a - Case-study step cell
   Mono accent number with a short accent rule, title, short description,
   on a plain cell in the section color that fills the box its parent gives
   it (the parent draws / shares the dashed borders; the solid cell covers
   the grid lines behind it).
   ========================================================================== */
.blk_case_step_a {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 2rem;
  background: var(--var_bg_a);
}
.blk_case_step_a > .num {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--var_acnt_clr_a);
}
.blk_case_step_a > .num::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--var_acnt_clr_a);
}
.blk_case_step_a > .title {
  margin: 0;
  font-size: clamp(1.125rem, 0.9945652174rem + 0.4347826087cqi, 1.375rem);
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.blk_case_step_a > .des {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}

/* ==========================================================================
   Block: blk_testimonial_a - Testimonial card
   A card of its own (on --var_bg_b, 1px border, square) with the logo's
   brackets on its four corners (.frame: one accent border masked down to its
   corners, which grow on hover). On top (.hdr) the site's quote icon (Lucide
   quote, accent, as in mdl_quote_a) and the client logo (greyscale). Then the
   quote: short ones large and whole (`lg`, set by the partial), longer ones
   with their first sentence as a lead line (heading font) and the rest at
   reading size; a long quote (`is_long`) folds to a few lines behind a Read
   more button once core.js blkTestimonialA adds `is_clamped` (no JS = all
   shown), `is_expanded` opens it. At the bottom, after a dashed rule: a
   monogram (the author's initial on a square lifted off the accent stripes), name
   and mono role / client.
   Hover / focus: the border takes the accent, the corner brackets grow, the
   quote icon lifts, the monogram's square fills.
   Modifiers (set by the parent): `alt` = a dark card (--var_testimonial_a_alt_*),
   for rhythm in a wall of cards; `feature` = the large featured quote, no
   card of its own (the parent paints it, e.g. a themed band).
   ========================================================================== */
.blk_testimonial_a {
  --clamp-h: 12rem;
  --corner: 14px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  margin: 0;
  padding: 2rem;
  background: var(--var_bg_b);
  border: 1px solid var(--var_bdr_clr_a);
  transition: border-color 0.3s ease;
}
.blk_testimonial_a > .frame {
  position: absolute;
  inset: -1px;
  border: 2px solid var(--var_acnt_clr_a);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black);
  mask-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black);
  -webkit-mask-position: top left, top right, bottom left, bottom right;
  mask-position: top left, top right, bottom left, bottom right;
  -webkit-mask-size: var(--corner) var(--corner);
  mask-size: var(--corner) var(--corner);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: mask-size 0.45s var(--spring), -webkit-mask-size 0.45s var(--spring);
}
.blk_testimonial_a > .hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2rem;
}
.blk_testimonial_a > .hdr > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  flex: none;
  width: 2rem;
  height: 2rem;
  transition: translate 0.45s var(--spring);
}
.blk_testimonial_a > .hdr > .thumb {
  flex: none;
  width: auto;
  max-width: 7rem;
  height: 1.75rem;
  object-fit: contain;
  object-position: right center;
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  opacity: 0.75;
}
.blk_testimonial_a:hover, .blk_testimonial_a:focus-within {
  --corner: 28px;
  border-color: var(--var_acnt_clr_a);
}
.blk_testimonial_a:hover > .hdr > .prt_icn_a, .blk_testimonial_a:focus-within > .hdr > .prt_icn_a {
  translate: 0 -0.25rem;
}
.blk_testimonial_a > .body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}
.blk_testimonial_a > .body > .lead {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1.1875rem, 1.089673913rem + 0.3260869565cqi, 1.375rem);
  line-height: 1.4;
  color: var(--var_hdr_clr_a);
}
.blk_testimonial_a > .body > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_a);
}
.blk_testimonial_a.lg > .body > .des {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1195652174rem + 0.4347826087cqi, 1.5rem);
  line-height: 1.4;
  color: var(--var_hdr_clr_a);
}
.blk_testimonial_a.is_clamped:not(.is_expanded) > .body {
  max-height: var(--clamp-h);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent);
  mask-image: linear-gradient(to bottom, black 55%, transparent);
}
.blk_testimonial_a > .more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  margin-top: -0.5rem;
  padding: 0.25rem 0;
  border: 0;
  border-bottom: 1px solid var(--var_acnt_clr_a);
  background: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_hdr_clr_a);
  cursor: pointer;
}
.blk_testimonial_a > .more > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  width: 0.875rem;
  height: 0.875rem;
  transition: rotate 0.3s ease;
}
.blk_testimonial_a > .more:hover > .prt_icn_a {
  rotate: 90deg;
}
.blk_testimonial_a.is_expanded > .more > .prt_icn_a {
  rotate: 45deg;
}
.blk_testimonial_a > .bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.blk_testimonial_a > .bottom > .avatar {
  position: relative;
  flex: none;
  width: 3rem;
  height: 3rem;
  background: linear-gradient(-45deg, var(--var_acnt_clr_a) 0, var(--var_acnt_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_acnt_clr_a) calc(50% - 0.5px), var(--var_acnt_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_acnt_clr_a) calc(100% - 0.5px), var(--var_acnt_clr_a) 100%) 0 0/6px 6px;
}
.blk_testimonial_a > .bottom > .avatar > .initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  translate: -0.25rem -0.25rem;
  border: 1px solid var(--var_acnt_clr_a);
  background: var(--var_bg_b);
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--var_acnt_clr_a);
  transition: background-color 0.3s ease, color 0.3s ease, translate 0.3s var(--spring);
}
.blk_testimonial_a > .bottom > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.blk_testimonial_a > .bottom > .wrap > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.blk_testimonial_a > .bottom > .wrap > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_testimonial_a:hover > .bottom > .avatar > .initial {
  translate: -0.5rem -0.5rem;
  background: var(--var_acnt_clr_a);
  color: var(--var_testimonial_a_alt_txt_clr);
}
.blk_testimonial_a.alt {
  --var_hdr_clr_a: var(--var_testimonial_a_alt_txt_clr);
  --var_txt_clr_a: color-mix(in srgb, var(--var_testimonial_a_alt_txt_clr) 82%, transparent);
  --var_txt_clr_b: color-mix(in srgb, var(--var_testimonial_a_alt_txt_clr) 62%, transparent);
  --var_bdr_clr_a: color-mix(in srgb, var(--var_testimonial_a_alt_txt_clr) 18%, transparent);
  --var_bg_b: var(--var_testimonial_a_alt_bg_clr);
  background: var(--var_testimonial_a_alt_bg_clr);
  border-color: var(--var_testimonial_a_alt_bg_clr);
}
.blk_testimonial_a.alt > .hdr > .thumb {
  filter: grayscale(100%) invert(1);
  mix-blend-mode: screen;
}
.blk_testimonial_a.feature {
  --var_bg_b: var(--var_bg_a);
  padding: 3rem 3rem 2rem;
  background: none;
  border-color: transparent;
}
.blk_testimonial_a.feature > .frame {
  inset: 1rem;
  border-color: var(--var_txt_clr_a);
}
.blk_testimonial_a.feature > .hdr > .prt_icn_a {
  --var_icn_a_clr: var(--var_txt_clr_a);
  width: 2.75rem;
  height: 2.75rem;
}
.blk_testimonial_a.feature > .hdr > .thumb {
  filter: grayscale(100%) brightness(0) invert(1);
  mix-blend-mode: normal;
  opacity: 0.85;
}
.blk_testimonial_a.feature > .body > .lead,
.blk_testimonial_a.feature > .body > .des {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1739130435rem + 1.0869565217cqi, 2.125rem);
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.blk_testimonial_a.feature > .bottom {
  border-top-color: color-mix(in srgb, var(--var_txt_clr_a) 35%, transparent);
}
.blk_testimonial_a.feature > .bottom > .avatar {
  background-image: linear-gradient(-45deg, var(--var_txt_clr_a) 0, var(--var_txt_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_txt_clr_a) calc(50% - 0.5px), var(--var_txt_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_txt_clr_a) calc(100% - 0.5px), var(--var_txt_clr_a) 100%);
}
.blk_testimonial_a.feature > .bottom > .avatar > .initial {
  border-color: var(--var_txt_clr_a);
  color: var(--var_txt_clr_a);
}
.blk_testimonial_a.feature:hover, .blk_testimonial_a.feature:focus-within {
  border-color: transparent;
}
.blk_testimonial_a.feature:hover > .bottom > .avatar > .initial {
  background: var(--var_txt_clr_a);
  color: var(--var_bg_a);
}
@container (max-width: 480px) {
  .blk_testimonial_a {
    padding: 1.5rem;
  }
  .blk_testimonial_a.feature {
    padding: 2rem 1.5rem 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blk_testimonial_a > .frame,
  .blk_testimonial_a > .hdr > .prt_icn_a,
  .blk_testimonial_a > .bottom > .avatar > .initial,
  .blk_testimonial_a > .more > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_way_card_a - Option cell ("one of the ways forward")
   Accent icon beside the title; an optional mono badge as a solid accent
   chip in the top-left corner (over the graphic panel when there is one).
   Description, a dashed rule, checked points (accent check icons), an
   optional note (HTML; faint accent wash with an accent edge), and a text
   link (prt_btn_d) pinned to the bottom. Plain cell that fills the box
   its parent gives it (the parent draws / shares the borders).
   Option `layer`: a striped panel flush across the top of the card (as
   blk_step_a's) holding an isometric slice (prt_layer_a) that rises in,
   sized to most of the panel's width; it lights up orange on hover / focus.
   Modifier `wide`: no panel; intro full width, points two across, link row.
   Modifier `primary` (the recommended way): --var_bg_b cell with a full-width
   accent rule on its top edge.
   ========================================================================== */
.blk_way_card_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 2rem;
  background: var(--var_bg_a);
}
.blk_way_card_a > .dec_a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(11rem, 24svh, 14rem);
  margin: calc(-1 * 2rem) calc(-1 * 2rem) 0.75rem;
  padding: 1rem;
  border-bottom: 1px dashed var(--var_bdr_clr_a);
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/12px 12px, var(--var_bg_a);
}
.blk_way_card_a > .dec_a > .prt_layer_a {
  width: min(64%, 18rem);
}
.blk_way_card_a:hover > .dec_a > .prt_layer_a, .blk_way_card_a:focus-within > .dec_a > .prt_layer_a {
  --layer-dark: var(--var_stack_a_hvr_clr_a);
  --layer-light: var(--var_stack_a_hvr_clr_b);
  --layer-mid: var(--var_stack_a_hvr_clr_c);
}
.blk_way_card_a > .label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_bg_a);
  background: var(--var_acnt_clr_a);
}
.blk_way_card_a > .hdr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.blk_way_card_a > .hdr > .title {
  margin: 0;
  font-size: clamp(1.25rem, 1.1195652174rem + 0.4347826087cqi, 1.5rem);
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
}
.blk_way_card_a > .des {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.blk_way_card_a > .list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.blk_way_card_a > .list > .item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--var_txt_clr_a);
}
.blk_way_card_a > .list > .item > .prt_icn_a {
  margin-top: 0.2em;
}
.blk_way_card_a > .note {
  margin: 0.25rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--var_acnt_clr_a);
  background: color-mix(in srgb, var(--var_acnt_clr_a) 6%, transparent);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.blk_way_card_a > .note strong {
  color: var(--var_hdr_clr_a);
}
.blk_way_card_a > .bottom {
  margin-top: auto;
  padding-top: 1rem;
  text-wrap: balance;
}
.blk_way_card_a.primary {
  background: var(--var_bg_b);
}
.blk_way_card_a.primary::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 3px;
  background: var(--var_acnt_clr_a);
}
.blk_way_card_a.wide > .label {
  position: static;
  align-self: flex-start;
  margin-bottom: 0.25rem;
}
.blk_way_card_a.wide > .list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  margin-top: 0.75rem;
  padding-block: 1rem 0;
}
.blk_way_card_a.wide > .bottom {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.blk_way_card_a.wide > .list + .bottom,
.blk_way_card_a.wide > .note + .bottom {
  margin-top: 1rem;
}
.blk_way_card_a.wide.primary::before {
  inset: -1px -1px auto;
}
@container (max-width: 645px) {
  .blk_way_card_a {
    padding: 1.5rem;
  }
  .blk_way_card_a > .dec_a {
    margin: calc(-1 * 1.5rem) calc(-1 * 1.5rem) 0.75rem;
  }
  .blk_way_card_a.wide > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Block: blk_route_card_a - Link cell
   A square-cornered cell that fills the box its parent gives it (the parent
   draws the shared dashed lines). Top row: accent icon (or a mono index) on
   the left, an arrow on the right when there is no cue. Then a mono eyebrow,
   the title, a description, optional points (accent ticks) and, pinned to
   the bottom, a mono cue with an arrow. Hover / focus: the cell tints, the
   title turns accent, the arrow nudges.
   Modifier compact: icon over the label, arrow top right (a jump-link row).
   Modifier inline: icon | index over the label | arrow on one row; in a row
   of narrow cells between md and desktop its spacing and label ease down
   with the container (fluid-c, 1036 → 1180px) so a short name keeps a line.
   Colors: --var_route_card_a_bg_clr (cell)
   ========================================================================== */
.blk_route_card_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
  padding: 2rem;
  background: var(--var_route_card_a_bg_clr);
  color: var(--var_txt_clr_a);
  text-decoration: none;
  transition: background-color 0.35s ease;
}
.blk_route_card_a:hover, .blk_route_card_a:focus-visible {
  background: color-mix(in srgb, var(--var_route_card_a_bg_clr) 94%, var(--var_hdr_clr_a));
  text-decoration: none;
}
.blk_route_card_a:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.blk_route_card_a > .hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-height: 1.5rem;
}
.blk_route_card_a > .hdr > .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_route_card_a > .hdr > .prt_icn_a:first-child + .num {
  margin-left: auto;
}
.blk_route_card_a > .hdr > .go {
  margin-left: auto;
  transition: translate 0.3s ease;
}
.blk_route_card_a > .body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blk_route_card_a > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.blk_route_card_a > .body > .title {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.125rem, 0.9945652174rem + 0.4347826087cqi, 1.375rem);
  line-height: 1.25;
  color: var(--var_hdr_clr_a);
  transition: color 0.3s ease;
}
.blk_route_card_a > .body > .des {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.blk_route_card_a > .body > .list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.blk_route_card_a > .body > .list > .item {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--var_txt_clr_a);
}
.blk_route_card_a > .body > .list > .item::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.625rem;
  height: 1px;
  background: var(--var_acnt_clr_a);
}
.blk_route_card_a > .cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_hdr_clr_a);
}
.blk_route_card_a > .cue > .prt_icn_a {
  transition: translate 0.3s ease;
}
.blk_route_card_a:hover > .body > .title, .blk_route_card_a:focus-visible > .body > .title {
  color: var(--var_acnt_clr_a);
}
.blk_route_card_a:hover > .hdr > .go,
.blk_route_card_a:hover > .cue > .prt_icn_a, .blk_route_card_a:focus-visible > .hdr > .go,
.blk_route_card_a:focus-visible > .cue > .prt_icn_a {
  translate: 0.25rem 0;
}
.blk_route_card_a.compact {
  gap: 2rem;
  padding: 1.5rem;
}
.blk_route_card_a.compact > .body > .title {
  font-size: 1rem;
  line-height: 1.3;
}
.blk_route_card_a.inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  padding: 1.5rem;
  padding-inline: clamp(0.75rem, -4.6458333333rem + 8.3333333333cqi, 1.5rem);
  column-gap: clamp(0.5rem, -1.2986111111rem + 2.7777777778cqi, 0.75rem);
}
.blk_route_card_a.inline > .hdr,
.blk_route_card_a.inline > .body {
  display: contents;
}
.blk_route_card_a.inline > .hdr > .prt_icn_a:not(.go) {
  grid-area: 1/1/3/2;
}
.blk_route_card_a.inline > .hdr > .index {
  grid-area: 1/2;
  align-self: end;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--var_acnt_clr_a);
}
.blk_route_card_a.inline > .body > .title {
  grid-area: 2/2;
  align-self: start;
  font-size: clamp(0.9375rem, 0.4878472222rem + 0.6944444444cqi, 1rem);
  line-height: 1.3;
}
.blk_route_card_a.inline > .hdr > .go {
  grid-area: 1/3/3/4;
}
.blk_route_card_a.inline > .body > .des {
  grid-area: 3/2;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--var_txt_clr_b);
}
.blk_route_card_a.inline:has(> .body > .des) {
  grid-template-rows: auto auto auto;
}
.blk_route_card_a.inline:has(> .body > .des) > .hdr > .prt_icn_a:not(.go) {
  grid-area: 1/1/4/2;
  align-self: start;
}
.blk_route_card_a.inline:has(> .body > .des) > .hdr > .go {
  grid-area: 1/3/4/4;
}
@container (max-width: 1024px) {
  .blk_route_card_a.inline {
    padding-inline: 1.5rem;
    column-gap: 0.75rem;
  }
  .blk_route_card_a.inline > .body > .title {
    font-size: 1rem;
  }
}
.blk_route_card_a.drop:hover > .hdr > .go, .blk_route_card_a.drop:focus-visible > .hdr > .go {
  translate: 0 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .blk_route_card_a,
  .blk_route_card_a > .body > .title,
  .blk_route_card_a > .hdr > .go,
  .blk_route_card_a > .cue > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_route_link_a - Link row
   Optional name (heading font, small) and badges (pastel mono chips).
   Modifier card: a soft panel (padded, faint tint), accent border on hover.
   Option redact: the name shows as struck-through gibberish (the real
   text and badges are the link's aria-label).
   Optional mono eyebrow (accent; a lock + "Confidential" flag in the muted
   text color), the link text, and an accent arrow on the right that nudges
   on hover. No border or background of its own: parents draw the lines
   between rows / cells. Modifier strong: heading font for the text.
   Modifier cell: padded cell on --var_route_link_a_bg_clr, hover tint.
   ========================================================================== */
.blk_route_link_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  color: var(--var_txt_clr_a);
  text-decoration: none;
}
.blk_route_link_a:hover, .blk_route_link_a:focus-visible {
  text-decoration: none;
}
.blk_route_link_a:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
.blk_route_link_a > .body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.blk_route_link_a > .body > .name {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.blk_route_link_a > .body > .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.blk_route_link_a > .body > .list > .item {
  --var_icn_a_clr: var(--var_txt_clr_b);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 3px 0.5rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--var_acnt_clr_a) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--var_acnt_clr_a) 80%, var(--var_hdr_clr_a));
}
.blk_route_link_a > .body > .list > .item:has(> .prt_icn_a) {
  background: color-mix(in srgb, var(--var_hdr_clr_a) 7%, transparent);
  color: var(--var_txt_clr_b);
}
.blk_route_link_a > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.blk_route_link_a > .body > .label > .lock {
  --var_icn_a_clr: var(--var_txt_clr_b);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  vertical-align: top;
  color: var(--var_txt_clr_b);
}
.blk_route_link_a > .body > .label > .lock > .prt_icn_a {
  width: 0.75rem;
  height: 0.75rem;
}
.blk_route_link_a > .body > .title {
  font-size: 1rem;
  line-height: 1.5;
  transition: color 0.3s ease;
}
.blk_route_link_a > .prt_icn_a {
  margin-top: 0.25rem;
  transition: translate 0.3s ease;
}
.blk_route_link_a:hover > .body > .title, .blk_route_link_a:focus-visible > .body > .title {
  color: var(--var_acnt_clr_a);
}
.blk_route_link_a:hover > .prt_icn_a, .blk_route_link_a:focus-visible > .prt_icn_a {
  translate: 0.25rem 0;
}
.blk_route_link_a.card {
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 3%, transparent);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.blk_route_link_a.card:hover, .blk_route_link_a.card:focus-visible {
  border-color: var(--var_acnt_clr_a);
  background: color-mix(in srgb, var(--var_acnt_clr_a) 4%, transparent);
}
.blk_route_link_a.card > .body {
  gap: 0.5rem;
}
.blk_route_link_a.card > .body > .name {
  font-size: 0.9375rem;
}
.blk_route_link_a > .body > .name.is_redacted {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--var_acnt_clr_a);
  user-select: none;
}
.blk_route_link_a.strong > .body > .title {
  font-family: var(--font-header);
  font-weight: 600;
  line-height: 1.35;
  color: var(--var_hdr_clr_a);
}
.blk_route_link_a.strong:hover > .body > .title, .blk_route_link_a.strong:focus-visible > .body > .title {
  color: var(--var_acnt_clr_a);
}
.blk_route_link_a.cell {
  padding: 1.5rem;
  background: var(--var_route_link_a_bg_clr);
  transition: background-color 0.35s ease;
}
.blk_route_link_a.cell:hover, .blk_route_link_a.cell:focus-visible {
  background: color-mix(in srgb, var(--var_route_link_a_bg_clr) 94%, var(--var_hdr_clr_a));
}
.blk_route_link_a.cell:focus-visible {
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .blk_route_link_a.cell,
  .blk_route_link_a > .body > .title,
  .blk_route_link_a > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Block: blk_figure_a - Key figure cell
   Fills the box its parent gives it (the parent draws the shared dashed
   lines; the solid cell covers the grid lines). Small mono index top
   right, an optional accent icon (normal size) beside a large number in
   the heading font, a short accent rule, then the
   label in regular sentence case (readable, not mono caps).
   ========================================================================== */
.blk_figure_a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 2rem;
  background: var(--var_bg_a);
}
.blk_figure_a > .label {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--var_txt_clr_b);
}
.blk_figure_a > .hdr {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
}
.blk_figure_a > .hdr::after {
  content: "";
  flex: 0 0 100%;
  height: 2px;
  margin-top: 1rem;
  background: linear-gradient(var(--var_acnt_clr_a), var(--var_acnt_clr_a)) 0 0/1.5rem 100% no-repeat;
}
.blk_figure_a > .hdr > .num {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(2.75rem, 2.097826087rem + 2.1739130435cqi, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--var_hdr_clr_a);
}
.blk_figure_a > .des {
  max-width: 22rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
@container grd (max-width: 1024px) {
  .blk_figure_a > .hdr {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.5rem;
  }
  .blk_figure_a > .hdr::after {
    flex: none;
    align-self: stretch;
    margin-top: 0.5rem;
  }
  .blk_figure_a > .hdr > .num {
    font-size: clamp(1.875rem, 0.8823529412rem + 3.3088235294cqi, 3rem);
  }
}
@container grd (max-width: 645px) {
  .blk_figure_a {
    padding: 1.5rem 1rem;
  }
  .blk_figure_a > .label {
    top: 1rem;
    right: 1rem;
  }
}

/* ==========================================================================
   Block: blk_agent_a - An agent
   A framed square tile on --var_bg_b: inside it a square tinted with the
   accent, the bot (Lucide) in the accent, a pulsing status dot at the top
   right; four accent corner brackets just outside the frame; a faint glow
   in the accent (the one glow the system allows: agent tiles). The role
   under it as a pill (its icon + mono label), or, modifier `chip`, as a
   small icon chip on the tile's lower-right corner with the name as plain
   mono text under the tile (mdl_agents_a). Modifier `alt`: the second
   accent. API, set by a parent: --size (tile size, default 4.5rem); --open
   (0–1) steps the brackets out and spreads the glow; --tilt (the bot's
   rotation, default 0deg); --delay (the status dot's pulse offset); --label
   (0–1, the role pill shown, default 1) and --label-delay (its transition
   delay); --name-clr (the name's colour, accent on hover). Decorative
   (aria-hidden). Used by mdl_agents_a and mdl_reveal_a.
   ========================================================================== */
.blk_agent_a {
  --open: 0;
  --size: 4.5rem;
  --tilt: 0deg;
  --delay: 0s;
  --label: 1;
  --label-delay: 0s;
  --name-clr: var(--var_txt_clr_b);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.blk_agent_a > .hdr {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_b);
  box-shadow: 0 0 2.5rem calc(var(--open) * 0.375rem) color-mix(in srgb, var(--var_acnt_clr_a) 16%, transparent);
  transition: box-shadow 0.4s ease;
}
.blk_agent_a > .hdr::after {
  content: "";
  position: absolute;
  inset: 0.375rem;
  border: 1px solid color-mix(in srgb, var(--var_acnt_clr_a) 30%, transparent);
  background: color-mix(in srgb, var(--var_acnt_clr_a) 15%, var(--var_bg_b));
}
.blk_agent_a > .hdr::before {
  content: "";
  position: absolute;
  inset: calc(-0.5rem - var(--open) * 0.25rem);
  border: 2px solid var(--var_acnt_clr_a);
  mask: conic-gradient(at 0.625rem 0.625rem, transparent 75%, var(--var_acnt_clr_a) 0) 0 0/calc(100% - 0.625rem) calc(100% - 0.625rem);
  transition: inset 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.blk_agent_a > .hdr > .prt_icn_a {
  position: relative;
  z-index: 1;
  width: calc(var(--size) * 0.4);
  height: calc(var(--size) * 0.4);
  rotate: var(--tilt);
  transition: rotate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.blk_agent_a > .hdr > .chip {
  --var_icn_a_clr: var(--var_txt_clr_a);
  position: absolute;
  right: -0.375rem;
  bottom: -0.375rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_a);
}
.blk_agent_a > .hdr > .chip > .prt_icn_a {
  width: 0.875rem;
  height: 0.875rem;
}
.blk_agent_a > .hdr > .dec_a {
  position: absolute;
  top: 0.1875rem;
  right: 0.1875rem;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--var_acnt_clr_a);
  animation: blk_agent_a_pulse 2.4s ease-in-out var(--delay) infinite;
}
.blk_agent_a > .label {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_a);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_a);
  white-space: nowrap;
  opacity: var(--label);
  translate: 0 calc((1 - var(--label)) * -0.5rem);
  transition: opacity 0.3s ease var(--label-delay), translate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--label-delay);
}
.blk_agent_a > .label > .prt_icn_a {
  width: 0.75rem;
  height: 0.75rem;
}
.blk_agent_a > .name {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--name-clr);
  transition: color 0.3s ease;
}
.blk_agent_a.alt > .hdr {
  --var_icn_a_clr: var(--var_acnt_clr_b);
  box-shadow: 0 0 2.5rem calc(var(--open) * 0.375rem) color-mix(in srgb, var(--var_acnt_clr_b) 16%, transparent);
}
.blk_agent_a.alt > .hdr::after {
  border-color: color-mix(in srgb, var(--var_acnt_clr_b) 30%, transparent);
  background: color-mix(in srgb, var(--var_acnt_clr_b) 15%, var(--var_bg_b));
}
.blk_agent_a.alt > .hdr::before {
  border-color: var(--var_acnt_clr_b);
}
.blk_agent_a.alt > .hdr > .dec_a {
  background: var(--var_acnt_clr_b);
}
.blk_agent_a.alt > .label {
  --var_icn_a_clr: var(--var_acnt_clr_b);
}
@media (prefers-reduced-motion: reduce) {
  .blk_agent_a > .hdr > .dec_a {
    animation: none;
  }
  .blk_agent_a > .hdr,
  .blk_agent_a > .hdr::before,
  .blk_agent_a > .hdr > .prt_icn_a,
  .blk_agent_a > .label,
  .blk_agent_a > .name {
    transition: none;
  }
}

@keyframes blk_agent_a_pulse {
  0%, 100% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 0.35;
    scale: 0.7;
  }
}
/* forward your module partials here */
/* ==========================================================================
   Module: mdl_hero_a - Hero banner
   ========================================================================== */
.mdl_hero_a {
  width: 100%;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_hero_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_hero_a {
    --screen-h: 100svh;
  }
}
.mdl_hero_a {
  overflow: hidden;
  border-bottom: 1px solid var(--var_bdr_clr_a);
}
.mdl_hero_a > .content {
  display: flex;
  flex: 1;
  width: 100%;
}
.mdl_hero_a > .content .side_a {
  position: relative;
  width: calc((100% - min(100% - 2 * var(--page-inset, 0px), 1400px)) / 2 + min(100% - 2 * var(--page-inset, 0px), 1400px) * 2 / 3);
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--var_bg_b);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mdl_hero_a > .content .side_a > .wrap {
  padding: 2rem 8rem 2rem 110px;
  padding-left: max(110px, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 6rem);
  z-index: 5;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mdl_hero_a > .content .side_a > .wrap .des {
  max-width: 650px;
}
.mdl_hero_a > .content .side_a > .dec_a {
  width: 40.6875rem;
  aspect-ratio: 651/417;
  position: absolute;
  bottom: -10px;
  right: -45px;
}
.mdl_hero_a > .content .side_a > .dec_a > .wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--var_bg_a);
  mask-image: url("data:image/svg+xml,%3Csvg width='651' height='417' viewBox='0 0 651 417' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_213_2728)'%3E%3Cpath d='M609.934 92.333H435.775V169.365C443.218 161.178 453.637 154.479 467.034 149.27C480.431 144.06 494.944 141.455 510.574 141.455C538.484 141.455 561.556 147.781 579.791 160.434C598.398 173.086 611.981 189.46 620.54 209.555C629.099 229.651 633.378 251.42 633.378 274.865C633.378 318.405 621.098 353.013 596.537 378.69C571.976 403.995 537.368 416.648 492.712 416.648C462.941 416.648 437.077 411.624 415.122 401.577C393.166 391.157 376.234 376.83 364.325 358.595C352.417 340.36 345.905 319.335 344.788 295.518H438.008C440.241 307.054 445.637 316.73 454.196 324.545C462.755 331.987 474.477 335.709 489.362 335.709C506.853 335.709 519.877 330.127 528.436 318.963C536.996 307.799 541.275 292.913 541.275 274.307C541.275 256.072 536.809 242.117 527.878 232.442C518.947 222.766 505.922 217.928 488.804 217.928C476.152 217.928 465.732 221.091 457.545 227.418C449.358 233.372 443.962 241.373 441.357 251.42H349.254V8.60284H609.934V92.333Z' fill='white'/%3E%3Cpath d='M0.77485 340.174C13.4274 330.127 19.1955 325.475 18.0791 326.219C54.5482 296.076 83.2026 271.33 104.042 251.979C125.254 232.628 143.116 212.346 157.629 191.135C172.143 169.923 179.399 149.27 179.399 129.174C179.399 113.917 175.864 102.008 168.793 93.4494C161.723 84.8903 151.117 80.6108 136.976 80.6108C122.835 80.6108 111.671 86.0067 103.484 96.7986C95.6691 107.218 91.7617 122.104 91.7617 141.455H-0.341553C0.402716 109.823 7.10113 83.4018 19.7537 62.1901C32.7784 40.9785 49.7105 25.3489 70.55 15.3012C91.7617 5.25362 115.206 0.229797 140.883 0.229797C185.167 0.229797 218.473 11.5799 240.801 34.2801C263.502 56.9803 274.852 86.565 274.852 123.034C274.852 162.852 261.269 199.88 234.103 234.116C206.937 267.98 172.329 301.1 130.278 333.476H280.992V411.066H0.77485V340.174Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_213_2728'%3E%3Crect width='651' height='417' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='651' height='417' viewBox='0 0 651 417' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_213_2728)'%3E%3Cpath d='M609.934 92.333H435.775V169.365C443.218 161.178 453.637 154.479 467.034 149.27C480.431 144.06 494.944 141.455 510.574 141.455C538.484 141.455 561.556 147.781 579.791 160.434C598.398 173.086 611.981 189.46 620.54 209.555C629.099 229.651 633.378 251.42 633.378 274.865C633.378 318.405 621.098 353.013 596.537 378.69C571.976 403.995 537.368 416.648 492.712 416.648C462.941 416.648 437.077 411.624 415.122 401.577C393.166 391.157 376.234 376.83 364.325 358.595C352.417 340.36 345.905 319.335 344.788 295.518H438.008C440.241 307.054 445.637 316.73 454.196 324.545C462.755 331.987 474.477 335.709 489.362 335.709C506.853 335.709 519.877 330.127 528.436 318.963C536.996 307.799 541.275 292.913 541.275 274.307C541.275 256.072 536.809 242.117 527.878 232.442C518.947 222.766 505.922 217.928 488.804 217.928C476.152 217.928 465.732 221.091 457.545 227.418C449.358 233.372 443.962 241.373 441.357 251.42H349.254V8.60284H609.934V92.333Z' fill='white'/%3E%3Cpath d='M0.77485 340.174C13.4274 330.127 19.1955 325.475 18.0791 326.219C54.5482 296.076 83.2026 271.33 104.042 251.979C125.254 232.628 143.116 212.346 157.629 191.135C172.143 169.923 179.399 149.27 179.399 129.174C179.399 113.917 175.864 102.008 168.793 93.4494C161.723 84.8903 151.117 80.6108 136.976 80.6108C122.835 80.6108 111.671 86.0067 103.484 96.7986C95.6691 107.218 91.7617 122.104 91.7617 141.455H-0.341553C0.402716 109.823 7.10113 83.4018 19.7537 62.1901C32.7784 40.9785 49.7105 25.3489 70.55 15.3012C91.7617 5.25362 115.206 0.229797 140.883 0.229797C185.167 0.229797 218.473 11.5799 240.801 34.2801C263.502 56.9803 274.852 86.565 274.852 123.034C274.852 162.852 261.269 199.88 234.103 234.116C206.937 267.98 172.329 301.1 130.278 333.476H280.992V411.066H0.77485V340.174Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_213_2728'%3E%3Crect width='651' height='417' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}
.mdl_hero_a > .content .side_b {
  position: relative;
  width: auto;
  container-type: inline-size;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: flex-end;
}
.mdl_hero_a > .content .side_b > .prt_dec_circle_a {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}
.mdl_hero_a > .content .side_b > .prt_dec_dots_a {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
.mdl_hero_a > .content .side_b > .wrap {
  --stack: clamp(16rem, min(92cqi, (var(--screen-h) - 8rem) * 0.55), 28rem);
}
.mdl_hero_a > .content .side_b > .wrap > .blk_stack_a,
.mdl_hero_a > .content .side_b > .wrap > .blk_stack_b,
.mdl_hero_a > .content .side_b > .wrap > .blk_stack_c {
  --size: var(--stack);
  transform: translate(calc(var(--size) * -0.11), calc(var(--size) * -0.22));
  z-index: 5;
}
@container grd (max-width: 1024px) {
  .mdl_hero_a > .content > .blk_side_bar_a,
  .mdl_hero_a > .content .side_a > .wrap > .logo,
  .mdl_hero_a > .content .side_a > .dec_a {
    display: none;
  }
  .mdl_hero_a > .content .side_a > .wrap {
    padding-left: var(--page-inset, 0px);
  }
}
@container grd (max-width: 900px) {
  .mdl_hero_a {
    min-height: 0;
  }
  .mdl_hero_a > .content {
    flex-direction: column;
  }
  .mdl_hero_a > .content .side_a {
    width: 100%;
  }
  .mdl_hero_a > .content .side_a > .wrap {
    padding: 6rem var(--page-inset, 0px) 3rem;
  }
  .mdl_hero_a > .content .side_b > .wrap {
    --stack: clamp(16rem, min(60cqi, 32svh), 26rem);
    padding: calc(var(--stack) * 1.1) 0 3rem;
    text-align: center;
  }
  .mdl_hero_a > .content .side_b > .wrap > .blk_stack_a,
  .mdl_hero_a > .content .side_b > .wrap > .blk_stack_b,
  .mdl_hero_a > .content .side_b > .wrap > .blk_stack_c {
    transform: none;
  }
  .mdl_hero_a > .content .side_b > .prt_dec_circle_a {
    --size: min(41.25rem, 80cqi);
  }
}
@container grd (max-width: 645px) {
  .mdl_hero_a > .content .side_b > .prt_dec_dots_a {
    display: none;
  }
  .mdl_hero_a > .content .side_a > .wrap {
    padding: 6rem var(--page-inset, 0px) 2rem;
  }
  .mdl_hero_a > .content .side_b > .wrap {
    --stack: clamp(13rem, min(76cqi, 30svh), 26rem);
  }
}

.mdl_hero_a {
  position: relative;
  isolation: isolate;
}
.mdl_hero_a > .prt_dec_grid_a.grid {
  z-index: 3;
}
@container (max-width: 1024px) {
  .mdl_hero_a > .prt_dec_grid_a.grid {
    display: none !important;
  }
}

/* ==========================================================================
   Module: mdl_trusted_a - Trusted by / social proof
   Six columns on the container grid lines: title, text and photo on 4,
   the client logos as cells on the last 2 (dashed rows, the grid lines as
   column dividers). Stacks at tab (900): text beside the person on a tablet,
   logos four across; on a phone text, person, logos two across.
   ========================================================================== */
.mdl_trusted_a {
  width: 100%;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 44rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_trusted_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_trusted_a {
    --screen-h: 100svh;
  }
}
.mdl_trusted_a {
  overflow: hidden;
  position: relative;
}
.mdl_trusted_a > .dec_b,
.mdl_trusted_a > .dec_c {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: color-mix(in srgb, var(--var_txt_clr_b) 40%, transparent);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_b) 40%, transparent);
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
@container (max-width: 1024px) {
  .mdl_trusted_a > .dec_b,
  .mdl_trusted_a > .dec_c {
    display: none !important;
  }
}
.mdl_trusted_a > .dec_b {
  top: 50%;
  left: 1rem;
}
.mdl_trusted_a > .dec_c {
  right: 2rem;
  bottom: 2rem;
}
.mdl_trusted_a > .content {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  position: relative;
  z-index: 2;
}
.mdl_trusted_a .side_a {
  grid-column: span 4;
  padding-top: 6rem;
  padding-right: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mdl_trusted_a .side_a > .wrap .title {
  max-width: min(100%, 30ch);
  font-family: var(--font-header);
  color: var(--var_hdr_clr_a);
  margin: 0 0 1rem;
}
.mdl_trusted_a .side_a > .wrap .des {
  color: var(--var_txt_clr_b);
  margin: 0;
  max-width: 36rem;
}
.mdl_trusted_a .side_a .prt_person_a {
  width: 100%;
  height: calc(var(--screen-h) * 0.65);
  min-height: 22rem;
}
.mdl_trusted_a > .prt_dec_circle_a {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  pointer-events: none;
  z-index: 1;
}
@container (max-width: 1024px) {
  .mdl_trusted_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_trusted_a .side_b {
  grid-column: span 2;
  display: flex;
  align-items: center;
}
.mdl_trusted_a .side_b > .logo_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_trusted_a .side_b > .logo_grid > .prt_logo_card_a {
  min-height: 9.5rem;
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
  border-radius: 0;
  transition: background-color 0.3s ease;
}
.mdl_trusted_a .side_b > .logo_grid > .prt_logo_card_a:hover {
  background-color: color-mix(in srgb, var(--var_bg_b) 94%, var(--var_hdr_clr_a));
}
@media (prefers-reduced-motion: reduce) {
  .mdl_trusted_a .side_b > .logo_grid > .prt_logo_card_a {
    transition: none;
  }
}
@container (max-width: 900px) {
  .mdl_trusted_a {
    min-height: 0;
    padding-bottom: 4rem;
  }
  .mdl_trusted_a > .content {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_trusted_a .side_a,
  .mdl_trusted_a .side_b {
    grid-column: auto;
  }
  .mdl_trusted_a .side_a {
    flex-direction: row;
    align-items: flex-end;
    gap: 2rem;
    padding-top: 4rem;
    padding-right: 0;
  }
  .mdl_trusted_a .side_a > .wrap {
    flex: 1;
    min-width: 0;
    align-self: center;
  }
  .mdl_trusted_a .side_a .prt_person_a {
    flex: 0 0 46%;
    width: 46%;
    height: min(40svh, 26rem);
    min-height: 0;
  }
  .mdl_trusted_a .side_b > .logo_grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@container (max-width: 645px) {
  .mdl_trusted_a {
    padding-bottom: 3rem;
  }
  .mdl_trusted_a .side_a {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .mdl_trusted_a .side_a .prt_person_a {
    flex: none;
    width: 100%;
    height: min(42svh, 72cqi);
    min-height: 14rem;
    margin-top: 2rem;
  }
  .mdl_trusted_a .side_b > .logo_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Module: mdl_cred_a - Credentials / about section
   ========================================================================== */
.mdl_cred_a {
  width: 100%;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_cred_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_cred_a {
    --screen-h: 100svh;
  }
}
.mdl_cred_a {
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.mdl_cred_a > .content {
  padding: 8rem 0 4rem;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mdl_cred_a .wrap_a {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  width: 100%;
}
.mdl_cred_a .wrap_a .side_a {
  grid-column: 1/span 3;
  position: relative;
}
.mdl_cred_a .wrap_a .side_a > .wrap {
  text-align: center;
  position: relative;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.mdl_cred_a .wrap_a .side_a > .prt_dec_dots_a {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.mdl_cred_a .wrap_a .side_a .num {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: clamp(10rem, 18vw, 22rem);
  line-height: 0.85;
  color: var(--var_txt_clr_a);
  letter-spacing: -0.03em;
}
.mdl_cred_a .wrap_a .side_a .des {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.625rem, 1.0951086957rem + 1.7663043478cqi, 2.4375rem);
  line-height: 1.025;
  color: var(--var_txt_clr_b);
  margin: 1rem 0 0;
}
.mdl_cred_a .wrap_a .side_b {
  grid-column: 4/span 3;
  padding-inline: 2rem;
}
.mdl_cred_a .wrap_a .side_b > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.mdl_cred_a .wrap_a .side_b > .wrap .title {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3016304348rem + 1.4945652174cqi, 2.4375rem);
  line-height: 1.025;
  color: var(--var_hdr_clr_b);
  margin: 0;
}
.mdl_cred_a .wrap_a .side_b > .wrap .des {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--var_txt_clr_b);
  max-width: 38rem;
  margin: 0;
}
.mdl_cred_a .wrap_a .side_b .prt_dec_xline_a {
  margin-top: 1.5rem;
}
.mdl_cred_a .wrap_b {
  margin-top: 3rem;
  width: 100%;
  padding: 2rem 0;
  display: flex;
  justify-content: center;
}

.mdl_cred_a {
  isolation: isolate;
}
@container (max-width: 1024px) {
  .mdl_cred_a {
    min-height: 0;
  }
  .mdl_cred_a > .content {
    padding: 4rem 0 2rem;
  }
  .mdl_cred_a .wrap_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }
  .mdl_cred_a .wrap_a .side_a,
  .mdl_cred_a .wrap_a .side_b {
    grid-column: auto;
  }
  .mdl_cred_a .wrap_a .side_b {
    padding-inline: 0;
  }
}
.mdl_cred_a > .prt_dec_grid_a.grid {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_cred_a > .prt_dec_grid_a.grid {
    display: none !important;
  }
}

/* ==========================================================================
   Module: mdl_tier_a - Service tiers / engagements
   Accordion layout (more than two items, or layout: accordion): the
   accordion beside the intro, circle half below the bottom edge. Option
   `image` (+ image_alt, image_ratio): a tinted person standing on the
   bottom edge under the intro column. Modifier `flip`: the columns swap
   (accordion right, intro and person left).
   Open layout (`open`, set by the partial for two or fewer items, or
   layout: open — too little content for an accordion): header on the grid
   (title + drawing x-line on cols 1-3; sub, description and the outline
   button on cols 4-6), then every item as an open cell side by side
   (--cols = count, up to 3) with shared dashed lines: a big number filled
   with the accent stripes, mono tier label, title, description; dots
   bottom left, spinning circle half below. The header stacks at md, the
   cells at sm.
   Process layout (`process`, layout: process): the steps along the shared
   process-track design (as mdl_process_a: pinned, the row scrolls
   sideways past the accent needle, core.js mdlProcessA); each step a
   blk_step_a card with an icon and an isometric slice (the item's own
   icon / layer, else from its title / in turn); header = title, sub,
   description and the outline button, with the step counter.
   ========================================================================== */
.mdl_tier_a:not(.open):not(.process) {
  width: 100%;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_tier_a:not(.open):not(.process) {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_tier_a:not(.open):not(.process) {
    --screen-h: 100svh;
  }
}
.mdl_tier_a:not(.open):not(.process) {
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
.mdl_tier_a:not(.open):not(.process) > .content {
  display: grid;
  grid-template-columns: 50% minmax(0, 1fr);
  column-gap: 5rem;
  width: 100%;
  padding: 6rem 2rem;
  position: relative;
  z-index: 2;
}
.mdl_tier_a:not(.open):not(.process) .side_a {
  grid-column: 1;
  grid-row: 1;
}
.mdl_tier_a:not(.open):not(.process) .side_b {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1.4375rem;
}
.mdl_tier_a:not(.open):not(.process) .intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mdl_tier_a:not(.open):not(.process) .intro .title {
  font-weight: 500;
  font-size: clamp(2rem, 1.5108695652rem + 1.6304347826cqi, 2.75rem);
  line-height: 1.09;
  color: var(--var_txt_clr_a);
  opacity: 0.8;
  margin: 0;
}
.mdl_tier_a:not(.open):not(.process) .intro .sub {
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.45;
  color: var(--var_txt_clr_a);
  opacity: 0.8;
  margin: 0;
}
.mdl_tier_a:not(.open):not(.process) > .dec_a {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 50%;
  pointer-events: none;
  z-index: 1;
}
.mdl_tier_a:not(.open):not(.process).has_img > .content {
  flex: 1;
  padding-bottom: 0;
}
.mdl_tier_a:not(.open):not(.process).has_img .side_b > .dec_b {
  position: relative;
  align-self: flex-end;
  width: min(100%, 58svh * var(--ratio));
  aspect-ratio: var(--ratio);
  margin-top: auto;
  pointer-events: none;
}
.mdl_tier_a:not(.open):not(.process).has_img .side_b > .dec_b > .prt_person_a {
  position: absolute;
  inset: 0;
}
@container (max-width: 1024px) {
  .mdl_tier_a:not(.open):not(.process).has_img .side_b > .dec_b {
    display: none !important;
  }
}
.mdl_tier_a:not(.open):not(.process).flip > .content {
  grid-template-columns: minmax(0, 1fr) 50%;
}
.mdl_tier_a:not(.open):not(.process).flip .side_a {
  grid-column: 2;
}
.mdl_tier_a:not(.open):not(.process).flip .side_b {
  grid-column: 1;
}
.mdl_tier_a:not(.open):not(.process).flip .side_b > .dec_b {
  align-self: flex-start;
}
.mdl_tier_a:not(.open):not(.process) .details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mdl_tier_a:not(.open):not(.process) .details .des {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.78;
  color: var(--var_txt_clr_a);
  opacity: 0.8;
  margin: 0;
}
@container (max-width: 1024px) {
  .mdl_tier_a:not(.open):not(.process) {
    min-height: 0;
  }
  .mdl_tier_a:not(.open):not(.process) > .content, .mdl_tier_a:not(.open):not(.process).flip > .content, .mdl_tier_a:not(.open):not(.process).has_img > .content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
    padding: 4rem 0;
  }
  .mdl_tier_a:not(.open):not(.process) .side_a, .mdl_tier_a:not(.open):not(.process).flip .side_a {
    grid-column: 1;
    grid-row: 2;
  }
  .mdl_tier_a:not(.open):not(.process) .side_b, .mdl_tier_a:not(.open):not(.process).flip .side_b {
    grid-column: 1;
    grid-row: 1;
  }
}
.mdl_tier_a.process {
  position: relative;
  height: var(--h, auto);
}
.mdl_tier_a.process > .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  min-height: min(100svh, 56rem);
  padding-block: 4rem;
}
@container (max-width: 1024px) {
  .mdl_tier_a.process > .wrap > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_tier_a.process > .wrap > .dec_a {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 94%;
  aspect-ratio: var(--ratio);
  max-width: 62%;
  pointer-events: none;
}
.mdl_tier_a.process > .wrap > .dec_a > .prt_person_a {
  width: 100%;
  height: 100%;
}
.mdl_tier_a.process > .wrap > .dec_a.flip > .prt_person_a {
  scale: -1 1;
  --tag-flip: -1;
}
.mdl_tier_a.process > .wrap > .dec_a > .prt_bdg_a {
  position: absolute;
  top: 18%;
  right: 62%;
  width: max-content;
}
@container (max-width: 1024px) {
  .mdl_tier_a.process > .wrap > .dec_a {
    display: none !important;
  }
}
.mdl_tier_a.process > .wrap > .hdr,
.mdl_tier_a.process > .wrap > .track {
  z-index: 1;
}
.mdl_tier_a.process > .wrap > .hdr {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.mdl_tier_a.process > .wrap > .hdr > .body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mdl_tier_a.process > .wrap > .hdr > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_tier_a.process > .wrap > .hdr > .body > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_tier_a.process > .wrap > .hdr > .body > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_tier_a.process > .wrap > .hdr > .body > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_tier_a.process > .wrap > .hdr > .controls > .num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--var_txt_clr_b);
}
.mdl_tier_a.process > .wrap > .hdr > .controls > .num > .label {
  color: var(--var_acnt_clr_a);
}
.mdl_tier_a.process > .wrap > .hdr > .controls > .prt_btn_b {
  display: none;
}
.mdl_tier_a.process > .wrap > .track {
  position: relative;
}
.mdl_tier_a.process > .wrap > .track > .needle {
  position: absolute;
  top: -0.5rem;
  left: 0;
  z-index: 2;
  width: 2px;
  height: calc(2.5rem + 0.5rem + 2rem + 0.75rem);
  background: var(--var_acnt_clr_a);
  will-change: transform;
}
.mdl_tier_a.process > .wrap > .track > .needle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.75rem;
  aspect-ratio: 1;
  background: var(--var_acnt_clr_a);
  translate: -50% -50%;
}
.mdl_tier_a.process > .wrap > .track > .list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.mdl_tier_a.process > .wrap > .track > .list > .item {
  flex: 0 0 min(32rem, 44cqi);
}
.mdl_tier_a.process.is_ready > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
}
.mdl_tier_a.process:not(.is_ready) > .wrap > .track > .list {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.mdl_tier_a.process:not(.is_ready) > .wrap > .track > .list::-webkit-scrollbar {
  display: none;
}
.mdl_tier_a.process:not(.is_ready) > .wrap > .track > .list > .item {
  scroll-snap-align: start;
}
@container (max-width: 1024px) {
  .mdl_tier_a.process {
    height: auto;
  }
  .mdl_tier_a.process > .wrap > .hdr > .controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .mdl_tier_a.process > .wrap > .hdr > .controls > .num {
    margin-right: 0.75rem;
  }
  .mdl_tier_a.process > .wrap > .hdr > .controls > .prt_btn_b {
    display: flex;
  }
  .mdl_tier_a.process > .wrap > .track > .list {
    --bleed: calc((100vw - 100cqi) / 2);
    margin-inline: calc(-1 * var(--bleed));
    padding-inline: var(--bleed);
    scroll-padding-inline: var(--bleed);
  }
  .mdl_tier_a.process > .wrap > .track > .list > .item {
    flex-basis: 80cqi;
  }
}
.mdl_tier_a.process {
  min-height: 0;
  overflow: visible;
}
.mdl_tier_a.process > .wrap > .hdr > .body > .title {
  max-width: min(100%, 44rem);
}
.mdl_tier_a.process > .wrap > .hdr > .body > .prt_btn_a {
  margin-top: 0.5rem;
}
.mdl_tier_a.open {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-block: 6rem 8rem;
}
.mdl_tier_a.open > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_tier_a.open > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_tier_a.open > .prt_dec_dots_a {
  position: absolute;
  bottom: 1rem;
  left: 2rem;
  z-index: -1;
}
.mdl_tier_a.open > .dec_a {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  translate: -50% 50%;
  pointer-events: none;
}
.mdl_tier_a.open > .hdr {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
}
.mdl_tier_a.open > .hdr > .side_a {
  grid-column: 1/span 3;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-right: 4rem;
}
.mdl_tier_a.open > .hdr > .side_a > .title {
  margin: 0;
  font-size: clamp(2.5rem, 1.7173913043rem + 2.6086956522cqi, 4rem);
  line-height: 1.04;
  color: var(--var_hdr_clr_a);
}
.mdl_tier_a.open > .hdr > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_tier_a.open > .hdr > .side_a > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_txt_clr_a);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  width: 100%;
}
.mdl_tier_a.open > .hdr > .side_b {
  grid-column: 4/span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-left: 2rem;
}
.mdl_tier_a.open > .hdr > .side_b > .sub {
  margin: 0;
  font-size: clamp(1.25rem, 1.0543478261rem + 0.652173913cqi, 1.625rem);
  line-height: 1.4;
  color: var(--var_hdr_clr_a);
}
.mdl_tier_a.open > .hdr > .side_b > .des {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_tier_a.open > .list {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_tier_a.open > .list > .item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 3rem 2rem 2rem;
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
  background: var(--var_bg_a);
}
.mdl_tier_a.open > .list > .item > .num {
  margin-bottom: 1.5rem;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: clamp(5rem, 3.4347826087rem + 5.2173913043cqi, 8rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(-45deg, var(--var_acnt_clr_a) 0, var(--var_acnt_clr_a) 1px, transparent 1px, transparent calc(50% - 1px), var(--var_acnt_clr_a) calc(50% - 1px), var(--var_acnt_clr_a) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(100% - 1px), var(--var_acnt_clr_a) calc(100% - 1px), var(--var_acnt_clr_a) 100%) 0 0/10px 10px;
  -webkit-background-clip: text;
  background-clip: text;
}
.mdl_tier_a.open > .list > .item > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_tier_a.open > .list > .item > .title {
  margin: 0;
  font-size: clamp(1.375rem, 1.1141304348rem + 0.8695652174cqi, 1.875rem);
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
}
.mdl_tier_a.open > .list > .item > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
@container (max-width: 1024px) {
  .mdl_tier_a.open {
    gap: 3rem;
    padding-block: 4rem 6rem;
  }
  .mdl_tier_a.open > .prt_dec_dots_a {
    display: none;
  }
  .mdl_tier_a.open > .hdr {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }
  .mdl_tier_a.open > .hdr > .side_a,
  .mdl_tier_a.open > .hdr > .side_b {
    grid-column: auto;
  }
  .mdl_tier_a.open > .hdr > .side_a {
    padding-right: 0;
  }
  .mdl_tier_a.open > .hdr > .side_b {
    padding-left: 0;
  }
}
@container (max-width: 645px) {
  .mdl_tier_a.open > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mdl_tier_a {
  isolation: isolate;
}
.mdl_tier_a > .prt_dec_grid_a.grid {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_tier_a > .prt_dec_grid_a.grid {
    display: none !important;
  }
}

/* ==========================================================================
   Module: mdl_work_a - Portfolio / Our Work carousel
   ========================================================================== */
.mdl_work_a {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--var_bg_a) 0%, var(--var_bg_b) 100%);
}
.mdl_work_a > .content {
  padding: 7.8rem 0 6rem;
}
.mdl_work_a .intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 12.65rem 0 12.65rem;
  padding-left: max(12.65rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 6rem);
  padding-right: max(12.65rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 6rem);
  margin-bottom: 4rem;
}
.mdl_work_a .intro .wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mdl_work_a .intro .title {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.0570652174rem + 2.3097826087cqi, 2.8125rem);
  line-height: 0.96;
  color: var(--var_txt_clr_a);
  margin: 0;
}
.mdl_work_a .intro .des {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.44;
  color: var(--var_txt_clr_b);
  opacity: 0.8;
  margin: 0;
  max-width: 28rem;
}
@media (pointer: coarse) {
  .mdl_work_a .intro .des a {
    position: relative;
  }
  .mdl_work_a .intro .des a::after {
    content: "";
    position: absolute;
    inset: -12px -4px;
  }
}
.mdl_work_a .controls {
  display: flex;
  gap: 1.125rem;
  flex-shrink: 0;
}
.mdl_work_a .carousel {
  overflow: visible;
  padding-left: 12.65rem;
  padding-left: max(12.65rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 6rem);
}
.mdl_work_a .track {
  display: flex;
  gap: 2.625rem;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}
.mdl_work_a .track > .blk_work_card_a {
  flex-shrink: 0;
  width: 51.8rem;
}
@container (max-width: 1024px) {
  .mdl_work_a > .content {
    padding: 4rem 0;
  }
  .mdl_work_a .intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-bottom: 2rem;
    padding-inline: var(--page-inset, 0px);
  }
  .mdl_work_a .intro > .wrap {
    display: contents;
  }
  .mdl_work_a .intro > .wrap > .title {
    grid-column: 1;
    grid-row: 1;
  }
  .mdl_work_a .intro > .wrap > .des {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .mdl_work_a .intro > .controls {
    grid-column: 2;
    grid-row: 1;
    gap: 0.75rem;
  }
  .mdl_work_a .carousel {
    padding-left: var(--page-inset, 0px);
  }
  .mdl_work_a .track {
    gap: 1.5rem;
  }
  .mdl_work_a .track > .blk_work_card_a {
    width: min(51.8rem, 80cqi);
  }
}
@container (max-width: 645px) {
  .mdl_work_a > .content {
    padding: 3rem 0;
  }
}
@container (max-width: 480px) {
  .mdl_work_a .track {
    gap: 1rem;
  }
  .mdl_work_a .track > .blk_work_card_a {
    width: 84cqi;
  }
  .mdl_work_a .track > .blk_work_card_a .media {
    aspect-ratio: 4/3;
  }
}

.mdl_work_a {
  isolation: isolate;
}
.mdl_work_a > .prt_dec_grid_a.grid {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_work_a > .prt_dec_grid_a.grid {
    display: none !important;
  }
}

/* ==========================================================================
   Module: mdl_work_grid_a - Case studies listing
   On the container (works in a full-bleed row too), the 7 grid lines
   behind. Optional header: mono label + title on the left half,
   description on the right half. Then the case studies as cells three
   across as the blog listing's cards (blk_post_card_a: thumbnail, client,
   description, the service in the striped bottom row), the same gap.
   2 across at md while a card keeps 21rem, else 1; with an odd number of
   cases the first is featured across the row there (wider image), so the
   last row is never a lone card.
   ========================================================================== */
.mdl_work_grid_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_work_grid_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_work_grid_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_work_grid_a > .content {
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.mdl_work_grid_a > .content > .hdr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  column-gap: 4rem;
}
.mdl_work_grid_a > .content > .hdr > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mdl_work_grid_a > .content > .hdr > .wrap > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_work_grid_a > .content > .hdr > .wrap > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_work_grid_a > .content > .hdr > .wrap > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_work_grid_a > .content > .hdr > .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.mdl_work_grid_a > .content > .hdr > .body > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.mdl_work_grid_a > .content > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@container (max-width: 1024px) {
  .mdl_work_grid_a {
    padding-block: 4rem;
  }
  .mdl_work_grid_a > .content > .hdr {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }
  .mdl_work_grid_a > .content > .list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(21rem, (100% - 1.5rem) / 2 - 1px)), 1fr));
  }
  .mdl_work_grid_a > .content > .list.odd > .item:first-child {
    grid-column: 1/-1;
    --thumb-ratio: 2 / 1;
  }
}
@container (max-width: 645px) {
  .mdl_work_grid_a > .content > .list.odd > .item:first-child {
    --thumb-ratio: 16 / 10;
  }
}
@container (max-width: 1024px) {
  .mdl_work_grid_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_work_grid_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_quote_a - Quote / Client Services
   Options (data): icon (quote glyph, --var_quote_a_icn_clr), name + role
   (prt_bdg_a over the photo), circle (spinning prt_dec_circle_a top left),
   xline (x-line modifiers, e.g. 'rev'). Title <mark> = --var_quote_a_mark_clr.
   Always (circle_b: false = off): a circle centered on the bottom edge under
   the right side, half showing, turning with the scroll.
   Modifier `flip`: text left, photo right.
   Layout: photo 45% | text 55% (grid). md and below: the text first, then
   the person in a box of their own standing on the bottom edge.
   ========================================================================== */
.mdl_quote_a {
  width: 100%;
  position: relative;
  overflow-y: clip;
}
.mdl_quote_a > .dec_a {
  position: absolute;
  top: 22%;
  left: calc((100% - 100vw) / 2);
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mdl_quote_a > .dec_a > .prt_dec_circle_a {
  --size: 44rem;
  transform: translate(-50%, -50%);
}
.mdl_quote_a > .dec_b {
  position: absolute;
  bottom: 0;
  left: 75%;
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mdl_quote_a > .dec_b > .prt_dec_circle_a {
  --size: min(48rem, 54vw);
  transform: translate(-50%, -50%);
}
@container (max-width: 1024px) {
  .mdl_quote_a > .dec_b {
    display: none !important;
  }
}
.mdl_quote_a > .content {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  position: relative;
  z-index: 2;
  min-height: 61.375rem;
}
.mdl_quote_a .side_a {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
}
.mdl_quote_a .side_a > .prt_person_a {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.mdl_quote_a .side_a .dec_dots {
  position: absolute;
  top: 8.5rem;
  left: 7rem;
  z-index: 0;
}
.mdl_quote_a .side_a > .prt_bdg_a {
  position: absolute;
  left: 7rem;
  bottom: 12%;
  z-index: 2;
}
.mdl_quote_a .side_b {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 5rem;
  gap: 2.5rem;
  position: sticky;
  top: 6rem;
  align-self: start;
}
.mdl_quote_a .side_b > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.8125rem;
}
.mdl_quote_a .side_b > .wrap > .prt_icn_a {
  --var_icn_a_clr: var(--var_quote_a_icn_clr);
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.5rem;
}
.mdl_quote_a .side_b > .wrap .title {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.875rem, 1.0597826087rem + 2.7173913043cqi, 3.125rem);
  line-height: 1.08;
  color: var(--var_txt_clr_a);
  margin: 0;
}
.mdl_quote_a .side_b > .wrap .title mark {
  color: var(--var_quote_a_mark_clr);
}
.mdl_quote_a .side_b > .wrap .des {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.9402173913rem + 0.4076086957cqi, 1.25rem);
  line-height: 1.75;
  color: var(--var_quote_a_des_clr, var(--var_txt_clr_a));
  opacity: 0.8;
  margin: 0;
  max-width: 37.5rem;
}
.mdl_quote_a .side_b .prt_dec_xline_a {
  --var_dec_xline_mark_clr: color-mix(in srgb, var(--var_quote_a_des_clr, var(--var_txt_clr_a)) 60%, transparent);
  --var_dec_xline_mark_alt_clr: color-mix(in srgb, var(--var_txt_clr_a) 80%, transparent);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_a) 80%, transparent);
  margin-top: 0.5rem;
}

.mdl_quote_a {
  isolation: isolate;
}
.mdl_quote_a > .prt_dec_grid_a.grid {
  --var_bdr_clr_a: color-mix(in srgb, var(--var_txt_clr_a) 22%, transparent);
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_quote_a > .prt_dec_grid_a.grid {
    display: none !important;
  }
}

.mdl_quote_a.flip > .content {
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
}
.mdl_quote_a.flip > .dec_a {
  left: 30%;
  top: 18%;
}
.mdl_quote_a.flip .side_a {
  grid-column: 2;
}
.mdl_quote_a.flip .side_a .dec_dots {
  left: auto;
  right: 4rem;
}
.mdl_quote_a.flip .side_b {
  grid-column: 1;
  padding-left: 0;
}

@container (max-width: 1024px) {
  .mdl_quote_a > .content, .mdl_quote_a.flip > .content {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .mdl_quote_a > .content > .side_a {
    grid-column: 1;
    grid-row: 2;
    height: clamp(20rem, 60svh, 34rem);
  }
  .mdl_quote_a > .content > .side_a .dec_dots {
    top: 2rem;
    right: auto;
    left: 1rem;
  }
  .mdl_quote_a > .content > .side_a > .prt_bdg_a {
    left: 1rem;
    bottom: 2rem;
  }
  .mdl_quote_a.flip > .content > .side_a .dec_dots {
    left: auto;
    right: 1rem;
  }
  .mdl_quote_a > .content > .side_b {
    grid-column: 1;
    grid-row: 1;
    position: static;
    padding: 4rem 0 2rem;
    gap: 1.5rem;
  }
  .mdl_quote_a > .dec_a > .prt_dec_circle_a {
    --size: min(44rem, 80cqi);
  }
}
@container (max-width: 480px) {
  .mdl_quote_a > .content > .side_b {
    padding-top: 3rem;
  }
}
.mdl_quote_a.img_wide .side_a > .prt_person_a {
  flex: none;
  width: 135%;
  height: auto;
  margin-inline: -17.5%;
  aspect-ratio: var(--ratio);
}
@container (max-width: 1024px) {
  .mdl_quote_a.img_wide .side_a > .prt_person_a {
    width: min(135%, clamp(20rem, 60svh, 34rem) * (var(--ratio)));
    margin-inline: 0;
  }
}
@container (max-width: 1024px) {
  .mdl_quote_a.img_wide > .content > .side_a {
    justify-content: center;
  }
}

/* ==========================================================================
   Module: mdl_services_a - Services / expertise
   On the 6-column grid of the 7 container lines: the service cells
   (blk_service_card_a, square, solid borders, numbered) on cols 1-2,
   flush with the lines, each sticky a step lower than the last so earlier
   ones peek above; they share borders (no gaps). The heading block (title,
   des, button, x-line) pinned on cols 3-6, inset like the other
   sections' text. Dots top right. Sticky offsets clear the fixed header
   (--hdr-h). Stacks at md: heading first, then the cells three across (two on
   a tablet, one on a phone).
   ========================================================================== */
.mdl_services_a {
  position: relative;
  padding-block: 6rem;
}
.mdl_services_a > .dec_dots {
  position: absolute;
  top: 4rem;
  right: 0;
  z-index: 3;
}
@container (max-width: 1024px) {
  .mdl_services_a > .dec_dots {
    display: none !important;
  }
}
.mdl_services_a > .content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
}
.mdl_services_a > .content > .side_a {
  grid-column: 1/span 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
}
.mdl_services_a > .content > .side_a > .blk_service_card_a {
  position: sticky;
}
.mdl_services_a > .content > .side_a > .blk_service_card_a + .blk_service_card_a {
  margin-top: -1px;
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(1) {
  top: calc(var(--hdr-h) + 1rem * 0);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(2) {
  top: calc(var(--hdr-h) + 1rem * 1);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(3) {
  top: calc(var(--hdr-h) + 1rem * 2);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(4) {
  top: calc(var(--hdr-h) + 1rem * 3);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(5) {
  top: calc(var(--hdr-h) + 1rem * 4);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(6) {
  top: calc(var(--hdr-h) + 1rem * 5);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(7) {
  top: calc(var(--hdr-h) + 1rem * 6);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(8) {
  top: calc(var(--hdr-h) + 1rem * 7);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(9) {
  top: calc(var(--hdr-h) + 1rem * 8);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(10) {
  top: calc(var(--hdr-h) + 1rem * 9);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(11) {
  top: calc(var(--hdr-h) + 1rem * 10);
}
.mdl_services_a > .content > .side_a > .blk_service_card_a:nth-child(12) {
  top: calc(var(--hdr-h) + 1rem * 11);
}
.mdl_services_a > .content > .side_b {
  grid-column: 3/span 4;
  grid-row: 1;
  position: sticky;
  top: var(--hdr-h);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-left: 4rem;
}
.mdl_services_a > .content > .side_b > .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.mdl_services_a > .content > .side_b > .wrap > .title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.12;
  color: var(--var_hdr_clr_a);
}
.mdl_services_a > .content > .side_b > .wrap > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_services_a > .content > .side_b > .wrap > .des {
  max-width: 32rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_services_a > .content > .side_b > .wrap > .des:empty {
  display: none;
}
.mdl_services_a > .content > .side_b > .wrap > .prt_btn_a {
  margin-top: 0.5rem;
}
@container (max-width: 1024px) {
  .mdl_services_a {
    padding-block: 4rem;
  }
  .mdl_services_a > .content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }
  .mdl_services_a > .content > .side_a,
  .mdl_services_a > .content > .side_b {
    grid-column: auto;
  }
  .mdl_services_a > .content > .side_b {
    grid-row: 1;
    position: static;
    padding-left: 0;
  }
  .mdl_services_a > .content > .side_b > .prt_dec_xline_a {
    display: none;
  }
  .mdl_services_a > .content > .side_a {
    --cols: 3;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    padding: 0 1px 1px 0;
  }
  .mdl_services_a > .content > .side_a:has(> .blk_service_card_a:nth-child(4):last-child), .mdl_services_a > .content > .side_a:has(> .blk_service_card_a:nth-child(8):last-child) {
    --cols: 4;
  }
  .mdl_services_a > .content > .side_a > .blk_service_card_a,
  .mdl_services_a > .content > .side_a > .blk_service_card_a + .blk_service_card_a {
    position: static;
    margin: 0 -1px -1px 0;
  }
}
@container (max-width: 900px) {
  .mdl_services_a > .content > .side_a {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 645px) {
  .mdl_services_a > .content > .side_a {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mdl_services_a.has_img {
  padding-bottom: 0;
}
.mdl_services_a.has_img > .content > .side_a {
  padding-bottom: 6rem;
}
.mdl_services_a.has_img > .content > .side_b {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: 2rem;
  height: calc(100svh - var(--hdr-h));
}
.mdl_services_a.has_img > .content > .side_b > .wrap,
.mdl_services_a.has_img > .content > .side_b > .prt_dec_xline_a {
  grid-column: 1;
}
.mdl_services_a.has_img > .content > .side_b > .wrap {
  position: relative;
  z-index: 1;
}
.mdl_services_a.has_img > .content > .side_b > .dec_b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 80%;
  pointer-events: none;
}
.mdl_services_a.has_img > .content > .side_b > .dec_b > .prt_person_a {
  width: 100%;
  height: 100%;
}
.mdl_services_a.has_img > .content > .side_b > .dec_b > .prt_person_a > .img {
  object-position: right bottom;
}
@container (max-width: 1024px) {
  .mdl_services_a.has_img {
    padding-bottom: 4rem;
  }
  .mdl_services_a.has_img > .content > .side_a {
    padding-bottom: 0;
  }
  .mdl_services_a.has_img > .content > .side_b {
    display: flex;
    height: auto;
  }
  .mdl_services_a.has_img > .content > .side_b > .dec_b {
    display: none;
  }
}

.mdl_services_a {
  isolation: isolate;
}
.mdl_services_a > .prt_dec_grid_a.grid {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_services_a > .prt_dec_grid_a.grid {
    display: none !important;
  }
}

/* ==========================================================================
   Module: mdl_leaders_a - Leadership Team (three-column)
   ========================================================================== */
.mdl_leaders_a {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
}
.mdl_leaders_a > .dec_dots {
  position: absolute;
  top: 5rem;
  right: 5rem;
  z-index: 3;
}
.mdl_leaders_a > .dec_num {
  position: absolute;
  top: max(3rem, 7svh);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--var_fg_a);
}
.mdl_leaders_a > .dec_num .label {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.4347826087rem + 2.7173913043cqi, 3.5rem);
  line-height: 1;
  letter-spacing: 0.1em;
}
.mdl_leaders_a > .dec_num .num {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: min(32rem, 50svh, 80cqi);
  line-height: 0.85;
  margin-top: 2rem;
}
.mdl_leaders_a > .dec_num .sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--var_leaders_a_ink_clr, var(--var_txt_clr_a));
  text-align: center;
  max-width: 28rem;
  white-space: normal;
}
.mdl_leaders_a > .content {
  width: 100%;
  display: flex;
  position: relative;
  z-index: 2;
}
.mdl_leaders_a > .content .person {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  justify-content: flex-end;
  overflow: hidden;
}
.mdl_leaders_a > .content .person .prt_person_a {
  width: min(100%, 52.2796005706svh);
  height: auto;
  aspect-ratio: 1018/1402;
  transition: transform 0.6s ease;
}
.mdl_leaders_a > .content .person.img_wide .prt_person_a {
  --keep-w: calc(var(--fit) * 1.1);
  flex-shrink: 0;
  width: min(100% / var(--keep-w), 72svh * var(--ratio-n));
  aspect-ratio: var(--ratio);
  translate: calc((0.5 - (var(--keep-l) + var(--keep-r)) / 2) * 100%) 0;
}
.mdl_leaders_a > .content .person > .wrap {
  padding: 3rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  isolation: isolate;
}
.mdl_leaders_a > .content .person > .wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%);
  mask-size: 100% 30%;
  -webkit-mask-size: 100% 15%;
  mask-position: bottom;
  -webkit-mask-position: bottom;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  z-index: -1;
  transition: mask-size 0.5s ease, -webkit-mask-size 0.5s ease;
}
.mdl_leaders_a > .content .person > .wrap .quote {
  opacity: 0;
  max-width: 22rem;
  margin: auto auto 1.5rem;
  padding: 0 1rem;
  text-align: center;
  transition: opacity 0.4s ease 0.1s;
}
.mdl_leaders_a > .content .person > .wrap .quote .prt_icn_a {
  --var_icn_a_clr: var(--var_leaders_a_ink_clr, var(--var_txt_clr_a));
  margin: 0 auto 0.5rem;
}
.mdl_leaders_a > .content .person > .wrap .quote p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.6;
  color: var(--var_txt_clr_a);
  margin: 0;
}
.mdl_leaders_a > .content .person > .wrap .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 2.1875rem;
  line-height: 1.2;
  color: var(--var_txt_clr_a);
  margin: 0;
}
.mdl_leaders_a > .content .person > .wrap .role {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--var_txt_clr_a);
  text-transform: uppercase;
  margin: 0;
}
.mdl_leaders_a > .content .person:hover > .wrap::before {
  mask-size: 100% 40%;
  -webkit-mask-size: 100% 40%;
}
.mdl_leaders_a > .content .person:hover > .wrap .quote {
  opacity: 1;
}
.mdl_leaders_a > .content .person:hover .prt_person_a {
  transform: scale(1);
}
@media (hover: none) {
  .mdl_leaders_a > .content .person > .wrap::before {
    mask-size: 100% 40%;
    -webkit-mask-size: 100% 40%;
  }
  .mdl_leaders_a > .content .person > .wrap .quote {
    opacity: 1;
  }
}
.mdl_leaders_a > .content .divider {
  width: 1px;
  align-self: stretch;
  border-left: 1px dashed var(--var_leaders_a_bdr_clr, var(--var_bdr_clr_a));
  flex-shrink: 0;
}
.mdl_leaders_a > .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(0deg, color-mix(in srgb, var(--var_bg_a) 35%, transparent) 1%, transparent 77%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1;
  pointer-events: none;
}
@container (max-width: 1024px) {
  .mdl_leaders_a > .dec_dots {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_leaders_a {
    flex-direction: column;
    min-height: 0;
  }
  .mdl_leaders_a > .dec_num {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    padding-top: 4rem;
  }
  .mdl_leaders_a > .dec_num .num {
    font-size: min(13rem, 30cqi);
    margin-top: 1rem;
  }
  .mdl_leaders_a > .dec_num .sub {
    max-width: 32rem;
  }
  .mdl_leaders_a > .overlay {
    display: none;
  }
  .mdl_leaders_a > .content {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    margin-top: 3rem;
  }
  .mdl_leaders_a > .content > .divider {
    display: none;
  }
  .mdl_leaders_a > .content > .divider + .person {
    border-left: 1px dashed var(--var_leaders_a_bdr_clr, var(--var_bdr_clr_a));
  }
  .mdl_leaders_a > .content > .person {
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    isolation: isolate;
  }
  .mdl_leaders_a > .content > .person::before {
    content: "";
    grid-area: 3/1/5/2;
    align-self: stretch;
    justify-self: stretch;
    z-index: 1;
    background: var(--var_person_a_label_bg_clr);
    border-top: 2px solid var(--var_person_a_label_bdr_clr);
  }
  .mdl_leaders_a > .content > .person > .prt_person_a {
    grid-area: 2/1/5/2;
    align-self: end;
  }
  .mdl_leaders_a > .content > .person > .wrap {
    display: contents;
  }
  .mdl_leaders_a > .content > .person > .wrap::before {
    display: none;
  }
  .mdl_leaders_a > .content > .person > .wrap > .quote {
    grid-area: 1/1;
    align-self: start;
    opacity: 1;
    margin: 0 auto 2rem;
    padding: 0 1rem;
  }
  .mdl_leaders_a > .content > .person > .wrap > .quote p {
    font-size: clamp(0.9375rem, 0.7744565217rem + 0.5434782609cqi, 1.25rem);
    line-height: 1.5;
  }
  .mdl_leaders_a > .content > .person > .wrap > .name {
    grid-area: 3/1;
    align-self: end;
    z-index: 2;
    padding: 0.75rem 0.75rem 0;
    font-size: clamp(1.5rem, 1.1413043478rem + 1.1956521739cqi, 2.1875rem);
  }
  .mdl_leaders_a > .content > .person > .wrap > .role {
    grid-area: 4/1;
    z-index: 2;
    padding: 0 0.75rem 1.5rem;
    font-size: 0.8125rem;
  }
}
@container (max-width: 645px) {
  .mdl_leaders_a > .dec_num {
    padding-top: 3rem;
  }
  .mdl_leaders_a > .dec_num .num {
    font-size: min(10rem, 40cqi);
  }
  .mdl_leaders_a > .content {
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 11%;
    padding-inline: 11%;
    scrollbar-width: none;
  }
  .mdl_leaders_a > .content::-webkit-scrollbar {
    display: none;
  }
  .mdl_leaders_a > .content > .person {
    scroll-snap-align: center;
  }
  .mdl_leaders_a > .content > .person > .prt_person_a {
    width: min(100%, 33.4008559201svh);
  }
  .mdl_leaders_a > .content > .person.img_wide > .prt_person_a {
    width: min(100% / var(--keep-w), 46svh * var(--ratio-n));
  }
}

.mdl_leaders_a {
  isolation: isolate;
}
.mdl_leaders_a > .prt_dec_grid_a.grid {
  --var_bdr_clr_a: color-mix(in srgb, var(--var_txt_clr_a) 22%, transparent);
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_leaders_a > .prt_dec_grid_a.grid {
    display: none !important;
  }
}

/* ==========================================================================
   Module: mdl_tech_a - Technologies We Love
   Text 45% | isometric tile grid 55% (grid). md and below: text, then the
   tile grid under it, sized to the width.
   ========================================================================== */
.mdl_tech_a {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.mdl_tech_a > .prt_dec_code_a {
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  z-index: 1;
}
@container (max-width: 1024px) {
  .mdl_tech_a > .prt_dec_code_a {
    display: none !important;
  }
}
.mdl_tech_a > .content {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  min-height: 61.375rem;
}
.mdl_tech_a .side_a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 5rem;
  gap: 2.5rem;
}
.mdl_tech_a .side_a > .wrap {
  display: flex;
  flex-direction: column;
  gap: 1.0625rem;
}
.mdl_tech_a .side_a > .wrap .title {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.875rem, 1.1005434783rem + 2.5815217391cqi, 3.0625rem);
  line-height: 1.08;
  color: var(--var_txt_clr_a);
  margin: 0;
  max-width: 24rem;
}
.mdl_tech_a .side_a > .wrap .des {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--var_txt_clr_b);
  opacity: 0.8;
  margin: 0;
  max-width: 30rem;
}
.mdl_tech_a .side_b {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem;
}
.mdl_tech_a .side_b .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.mdl_tech_a .side_b .grid .item {
  aspect-ratio: 1;
  width: 10rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
@container (max-width: 1024px) {
  .mdl_tech_a > .content {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .mdl_tech_a .side_a {
    padding: 4rem 0 2rem;
  }
  .mdl_tech_a .side_b {
    padding: 2rem 0 4rem;
  }
  .mdl_tech_a .side_b .grid {
    gap: min(1.5rem, 4cqi);
  }
  .mdl_tech_a .side_b .grid .item {
    width: min(10rem, 20cqi);
  }
}

.mdl_tech_a {
  isolation: isolate;
}
.mdl_tech_a > .prt_dec_grid_a.grid {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_tech_a > .prt_dec_grid_a.grid {
    display: none !important;
  }
}

/* ==========================================================================
   Module: mdl_blog_a - Blog / insights
   Layout: nested grid (side_a post list · side_b intro), person photo and
   vertical x-line positioned against the module root.
   ========================================================================== */
.mdl_blog_a {
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 50rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_blog_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_blog_a {
    --screen-h: 100svh;
  }
}
.mdl_blog_a {
  padding-block: 6rem 4rem;
}
.mdl_blog_a > .content {
  position: relative;
  z-index: 2;
  padding-inline: 6rem 8rem;
}
.mdl_blog_a .side_a {
  position: relative;
}
.mdl_blog_a .side_a > .prt_dec_dots_a {
  position: absolute;
  top: -4rem;
  left: -3rem;
}
.mdl_blog_a .side_a > .blk_post_list_a {
  position: relative;
}
.mdl_blog_a .side_b > .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.mdl_blog_a .side_b > .wrap > .title {
  font-size: clamp(2rem, 1.347826087rem + 2.1739130435cqi, 3.25rem);
  line-height: 1.08;
  color: var(--var_hdr_clr_a);
}
.mdl_blog_a .side_b > .wrap > .des {
  max-width: 34rem;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_blog_a > .prt_person_a {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 58%;
  height: var(--img-h, 62%);
}
.mdl_blog_a > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: color-mix(in srgb, var(--var_txt_clr_b) 40%, transparent);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_b) 40%, transparent);
  position: absolute;
  top: 5rem;
  right: 2rem;
  z-index: 2;
}
@container (max-width: 1024px) {
  .mdl_blog_a {
    min-height: 0;
    padding-block: 4rem;
  }
  .mdl_blog_a > .content {
    padding-inline: 0;
  }
  .mdl_blog_a .side_b {
    order: -1;
  }
  .mdl_blog_a .side_a > .prt_dec_dots_a {
    display: none;
  }
}
@container (max-width: 1024px) {
  .mdl_blog_a > .prt_person_a,
  .mdl_blog_a > .prt_dec_xline_a {
    display: none !important;
  }
}
@container (max-width: 480px) {
  .mdl_blog_a {
    padding-block: 3rem;
  }
}
@container (max-width: 1024px) {
  .mdl_blog_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_blog_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.mdl_blog_a {
  isolation: isolate;
}
.mdl_blog_a > .prt_dec_grid_a.grid {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_blog_a > .prt_dec_grid_a.grid {
    display: none !important;
  }
}
.mdl_blog_a.cards {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  min-height: 0;
  padding-block: 6rem;
}
.mdl_blog_a.cards > .hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.mdl_blog_a.cards > .hdr > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 40rem;
}
.mdl_blog_a.cards > .hdr > .wrap > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_blog_a.cards > .hdr > .wrap > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_blog_a.cards > .hdr > .wrap > .des {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_blog_a.cards > .hdr > .prt_btn_a {
  flex: none;
}
.mdl_blog_a.cards > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@container (max-width: 1024px) {
  .mdl_blog_a.cards {
    padding-block: 4rem;
  }
  .mdl_blog_a.cards > .hdr {
    flex-direction: column;
    align-items: flex-start;
  }
  .mdl_blog_a.cards > .list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(21rem, (100% - 1.5rem) / 2 - 1px)), 1fr));
  }
  .mdl_blog_a.cards > .list.odd > .item:first-child {
    grid-column: 1/-1;
    --thumb-ratio: 2 / 1;
  }
}
@container (max-width: 645px) {
  .mdl_blog_a.cards > .list.odd > .item:first-child {
    --thumb-ratio: 16 / 10;
  }
}
@container (max-width: 1024px) {
  .mdl_blog_a.cards {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_blog_a.cards {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_ftr_a - Site footer
   Layout: nested grid — logo | social, about (col-10) | contact (col-6) |
   menu (col-8, two across, on the right),
   legal row. Dashed column lines (prt_dec_grid_a) sit behind the content.
   ========================================================================== */
.mdl_ftr_a {
  position: relative;
  padding-block: 4rem;
}
.mdl_ftr_a > .content {
  position: relative;
  z-index: 1;
  padding-inline: 6rem;
}
.mdl_ftr_a .logo > .link {
  display: inline-block;
  width: 6rem;
}
.mdl_ftr_a .social {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.mdl_ftr_a .side_a,
.mdl_ftr_a .side_b,
.mdl_ftr_a .side_c {
  margin-top: 3rem;
}
.mdl_ftr_a .side_a > .wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 27rem;
}
.mdl_ftr_a .side_a > .wrap > .title {
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.mdl_ftr_a .side_a > .wrap > .title a {
  color: var(--var_acnt_clr_a);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.mdl_ftr_a .side_a > .wrap > .des {
  color: var(--var_txt_clr_b);
}
.mdl_ftr_a .legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  margin-top: 4rem;
}
.mdl_ftr_a .legal > .sm {
  color: var(--var_txt_clr_b);
}
.mdl_ftr_a .legal > .link {
  font-size: 0.875rem;
  color: var(--var_acnt_clr_a);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (pointer: coarse) {
  .mdl_ftr_a .legal > .link {
    display: inline-block;
    padding-block: 0.75rem;
  }
}
@container (max-width: 1024px) {
  .mdl_ftr_a > .prt_dec_grid_a {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_ftr_a > .content {
    padding-inline: 0;
  }
  .mdl_ftr_a .side_a > .wrap {
    max-width: 40rem;
  }
}
@container (max-width: 900px) {
  .mdl_ftr_a .legal > .sm {
    flex-basis: 100%;
  }
}
@container (max-width: 480px) {
  .mdl_ftr_a .social {
    justify-content: flex-start;
    margin-top: 1.5rem;
  }
  .mdl_ftr_a .side_a {
    margin-top: 2rem;
  }
  .mdl_ftr_a .side_b,
  .mdl_ftr_a .side_c {
    margin-top: 2rem;
  }
}

/* ==========================================================================
   Module: mdl_hero_b - Page hero (orange)
   Layout: content on the container as a nested grid —
     side_a (col-12): logo, title, intro, x-line
     side_b (col-12): image, bleeding a little left and a lot right
   Side bar, name, dots and the key-figure bar are positioned on the module.
   Child colors are re-pointed via their theme variables (dark brackets,
   dark side-bar text, x-line marks) — no restyling of child internals.
   Option `grid`: the 7 container grid lines (prt_dec_grid_a.grid).
   Options `btn_text`/`btn_link` (prt_btn_a under the intro), `circle`
   (spinning prt_dec_circle_a behind the person), `image_ratio` (--ratio for
   the photo box, default 1203 / 806 — e.g. "1000 / 947"), `info_pos`
   ([x, y] of the name in % of the photo, default 52% 52%), `image_x`
   (photo's left offset from the column, default -10rem), `image_blend`
   (false = no section tint box — needed to see the circle behind the person),
   `image_h` / `image_y` (photo height / bottom offset in % of the hero;
   default 82% / 0 — a negative offset crops the photo at the bottom). To
   keep people the same size on every hero, size each photo so the head is
   ~25% of the hero tall and starts ~18% from the top, as What We Do's.
   Logo brackets: --var_hero_b_logo_clr (dark on orange, accent elsewhere).
   Modifier `flip`: photo on the left (bleeding left into the side bar's
   column), text on the right. Modifier `large`: the photo 1.35× its height
   (image_h, default 82%), the extra cropped by the hero's bottom edge. Modifier `img_flip`: the photo
   mirrored, independently of `flip` (layout, name and circle unchanged).
   All three combine; set them in `class`. Option xline 'vertical …': the x-line runs
   down the left edge (.dec_a) instead of under the text.
   ========================================================================== */
.mdl_hero_b {
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 50rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_hero_b {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_hero_b {
    --screen-h: 100svh;
  }
}
.mdl_hero_b {
  justify-content: stretch;
  overflow: hidden;
  container: mdl_hero_b/inline-size;
}
.mdl_hero_b > .blk_side_bar_a {
  --var_bg_b: var(--var_bg_a);
  --var_txt_clr_a: var(--var_hero_b_ink_clr);
  --var_bdr_clr_a: color-mix(in srgb, var(--var_hero_b_ink_clr) 20%, transparent);
}
.mdl_hero_b > .content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  width: 100%;
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  padding-left: 7rem;
}
.mdl_hero_b > .content > .grd_col_wrap {
  display: flex;
  align-self: stretch;
  margin-block: 0;
}
.mdl_hero_b > .content > .grd_col_wrap > .grd_container {
  align-self: stretch;
  margin-block: 0;
}
.mdl_hero_b .side_a {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-block: 6rem 8rem;
}
.mdl_hero_b .side_a > .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  min-width: 0;
  max-width: 38rem;
}
.mdl_hero_b .side_a > .wrap > .logo {
  --var_acnt_clr_a: var(--var_hero_b_logo_clr);
  width: 8.5rem;
}
.mdl_hero_b .side_a > .wrap > .title {
  font-size: clamp(2.5rem, 1.4565217391rem + 3.4782608696cqi, 4.5rem);
  line-height: 1.05;
  color: var(--var_hdr_clr_a);
}
.mdl_hero_b .side_a > .wrap > .des {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--var_hero_b_ink_clr);
}
.mdl_hero_b .side_a > .wrap > .prt_btn_a {
  margin-top: 0.5rem;
}
.mdl_hero_b .side_a > .wrap > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_hero_b_xline_clr);
  --var_dec_xline_mark_alt_clr: var(--var_hero_b_xline_alt_clr);
  width: min(100%, 32rem);
  margin-top: 1rem;
}
.mdl_hero_b .side_b {
  position: relative;
  z-index: 1;
}
.mdl_hero_b .side_b > .media {
  position: absolute;
  bottom: var(--media-y, 0);
  left: var(--media-x, -10rem);
  z-index: 1;
  height: calc(var(--media-h, 82%) * var(--fit, 1));
  aspect-ratio: var(--ratio, 1203/806);
}
.mdl_hero_b .side_b > .media > .prt_img_a {
  position: absolute;
  inset: 0;
}
.mdl_hero_b .side_b > .media > .dec_b {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
}
.mdl_hero_b .side_b > .media > .dec_b > .prt_dec_circle_a {
  --size: min(54rem, 60cqi);
  transform: translate(-50%, 50%) rotate(-90deg);
}
.mdl_hero_b .side_b > .media > .info {
  position: absolute;
  left: var(--info-x, 52%);
  top: var(--info-y, 56%);
  z-index: 1;
  translate: var(--info-shift, 0) 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--var_person_a_label_bdr_clr);
  background: var(--var_person_a_label_bg_clr);
}
.mdl_hero_b .side_b > .media > .info > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--var_fg_a);
}
.mdl_hero_b .side_b > .media > .info > .role {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_hero_b > .dec_c {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 58%;
  right: 8%;
  z-index: 0;
  pointer-events: none;
}
.mdl_hero_b > .dec_c > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 0.75rem;
}
.mdl_hero_b > .dec_c > .list > .item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mdl_hero_b > .dec_c > .list > .item:nth-child(1) {
  margin-top: -4rem;
}
.mdl_hero_b > .dec_c > .list > .item:nth-child(2) {
  margin-top: calc(8rem + 2rem);
}
.mdl_hero_b > .dec_c > .list > .item:nth-child(3) {
  margin-top: 2rem;
}
.mdl_hero_b > .dec_c > .list > .item > .body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: 9rem;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 6%, var(--var_bg_a));
}
.mdl_hero_b > .dec_c > .list > .item > .body > .name {
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.mdl_hero_b > .dec_c > .list > .item > .body > .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.mdl_hero_b > .dec_c > .list > .item > .body > .list > .tag {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--var_txt_clr_b);
}
.mdl_hero_b > .dec_c > .list > .item > .thumb {
  position: relative;
  height: clamp(12rem, 28svh, 16.5rem);
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 6%, var(--var_bg_a));
}
.mdl_hero_b > .dec_c > .list > .item > .thumb > .prt_img_a {
  position: absolute;
  inset: 0;
  filter: grayscale(1);
  opacity: 0.3;
}
.mdl_hero_b > .dec_c > .list > .item > .thumb.alt > .prt_img_a {
  filter: none;
}
.mdl_hero_b > .dec_c > .list > .item > .thumb > .label {
  --var_icn_a_clr: var(--var_btn_c_txt_clr);
  position: absolute;
  left: 1rem;
  top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 2px;
  background: var(--var_acnt_clr_a);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--var_btn_c_txt_clr);
}
.mdl_hero_b.mosaic .side_b > .media > .info {
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  background: var(--var_bg_a);
}
.mdl_hero_b.mosaic > .prt_dec_dots_a {
  display: none;
}
.mdl_hero_b > .dec_a {
  position: absolute;
  top: 4rem;
  left: calc(75px + 4rem);
  z-index: 2;
}
.mdl_hero_b > .dec_a > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_hero_b_xline_clr);
  --var_dec_xline_mark_alt_clr: var(--var_hero_b_xline_alt_clr);
}
.mdl_hero_b.flip .side_a {
  order: 2;
}
.mdl_hero_b.flip .side_b {
  order: 1;
}
.mdl_hero_b.flip .side_b > .media {
  left: auto;
  right: -2rem;
  height: calc(88% * var(--fit, 1));
  aspect-ratio: 1397/1284;
}
.mdl_hero_b.flip .side_b > .media > .info {
  left: var(--info-x, 46%);
  top: var(--info-y, 77%);
}
.mdl_hero_b.large .side_b > .media {
  height: calc(var(--media-h, 82%) * 1.35 * var(--fit, 1));
  bottom: calc(var(--media-h, 82%) * -0.3);
}
.mdl_hero_b.img_flip .side_b > .media > .prt_img_a {
  scale: -1 1;
  --tag-flip: -1;
}
.mdl_hero_b > .prt_dec_grid_a {
  z-index: 4;
  --var_bdr_clr_a: color-mix(in srgb, var(--var_hero_b_ink_clr) 18%, transparent);
}
.mdl_hero_b > .prt_dec_dots_a {
  --var_acnt_clr_a: var(--var_hero_b_dots_clr);
  position: absolute;
  top: 3rem;
  right: max(2rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 0.5rem);
  z-index: 2;
}
.mdl_hero_b > .stats {
  position: absolute;
  left: 50%;
  bottom: 4rem;
  z-index: 3;
  width: min(48rem, 100% - 4rem);
  transform: translateX(-50%);
}
@container (max-width: 1024px) {
  .mdl_hero_b > .prt_dec_dots_a,
  .mdl_hero_b > .prt_dec_grid_a,
  .mdl_hero_b > .dec_a,
  .mdl_hero_b > .dec_c,
  .mdl_hero_b > .blk_side_bar_a {
    display: none !important;
  }
}
@container mdl_hero_b (max-width: 1024px) {
  .mdl_hero_b > .content {
    padding-left: 0;
  }
  .mdl_hero_b .side_a > .wrap > .logo {
    display: none;
  }
}
@container (max-width: 900px) {
  .mdl_hero_b {
    min-height: 0;
    display: block;
  }
}
@container mdl_hero_b (max-width: 900px) {
  .mdl_hero_b > .content {
    display: block;
  }
  .mdl_hero_b > .content > .grd_col_wrap > .grd_container > .side_a,
  .mdl_hero_b > .content > .grd_col_wrap > .grd_container > .side_b {
    grid-column: 1/-1;
  }
  .mdl_hero_b .side_a {
    padding-block: 6rem 2rem;
  }
  .mdl_hero_b .side_b > .media {
    --keep-w: calc(var(--keep-r, 1) - var(--keep-l, 0));
    position: relative;
    left: 50%;
    width: min(100% / var(--keep-w) * 0.94, 60svh * var(--ratio-n, 1.4926));
    height: auto;
    aspect-ratio: var(--ratio, 1203/806);
    translate: calc(-50% + (0.5 - (var(--keep-l, 0) + var(--keep-r, 1)) / 2) * 100%) 0;
  }
  .mdl_hero_b .side_b > .media > .dec_b,
  .mdl_hero_b .side_b > .media > .info {
    display: none;
  }
  .mdl_hero_b.flip .side_a,
  .mdl_hero_b.flip .side_b {
    order: 0;
  }
  .mdl_hero_b.flip .side_b > .media {
    left: 50%;
    right: auto;
    height: auto;
    aspect-ratio: var(--ratio, 1203/806);
  }
  .mdl_hero_b.large .side_b > .media {
    height: auto;
    bottom: 0;
  }
  .mdl_hero_b > .stats {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: auto;
    margin: 0 var(--page-inset, 0px) 2rem;
  }
}
.mdl_hero_b.long .side_a > .wrap > .title {
  font-size: clamp(2.25rem, 1.5326086957rem + 2.3913043478cqi, 3.625rem);
}
.mdl_hero_b.xlong .side_a > .wrap > .title {
  font-size: clamp(2rem, 1.4130434783rem + 1.9565217391cqi, 3.125rem);
  line-height: 1.08;
}

/* ==========================================================================
   Module: mdl_stack_scroll_a - Sticky stack illustration + scrolling chapters
   Left column pins the stack for the module's full height; each chapter on the
   right is a screen tall. core.js (mdlStackScrollA): expands the stack when the
   module comes into view, lights the active chapter's layers (blk_stack_a / _b / _c by option
   `stack`; .stack.is_active — same look as hover) and makes each layer scroll to its chapter.
   ========================================================================== */
.mdl_stack_scroll_a {
  position: relative;
  z-index: 0;
}
.mdl_stack_scroll_a > .content .side_a > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12svh;
  padding-left: 6rem;
}
.mdl_stack_scroll_a > .content .side_a > .wrap > .prt_dec_dots_a {
  position: absolute;
  top: 5rem;
  left: 0;
}
.mdl_stack_scroll_a > .content .side_a > .wrap > .blk_stack_a,
.mdl_stack_scroll_a > .content .side_a > .wrap > .blk_stack_b,
.mdl_stack_scroll_a > .content .side_a > .wrap > .blk_stack_c {
  --size: clamp(16rem, min(38cqi, (88svh - 8rem) * 0.63), 28rem);
}
.mdl_stack_scroll_a > .content .side_b {
  padding-left: 3rem;
}
.mdl_stack_scroll_a > .content .side_b > .item {
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_stack_scroll_a > .content .side_b > .item {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_stack_scroll_a > .content .side_b > .item {
    --screen-h: 100svh;
  }
}
.mdl_stack_scroll_a > .content .side_b > .item {
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 4rem;
}
.mdl_stack_scroll_a > .content .side_b > .item > .title {
  font-size: clamp(2rem, 1.5434782609rem + 1.5217391304cqi, 2.875rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_stack_scroll_a > .content .side_b > .item > .des {
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.mdl_stack_scroll_a > .content .side_b > .item > .blk_link_list_a,
.mdl_stack_scroll_a > .content .side_b > .item > .blk_point_grid_a {
  width: 100%;
  max-width: 38rem;
}
.mdl_stack_scroll_a > .content .side_b > .item > .blk_stats_a,
.mdl_stack_scroll_a > .content .side_b > .item > .blk_quote_a {
  width: 100%;
  max-width: 38rem;
}
.mdl_stack_scroll_a > .content .side_b > .item > .blk_stats_a {
  margin-top: 1.5rem;
}
.mdl_stack_scroll_a > .content .side_b > .item > .blk_stats_a + .blk_quote_a {
  margin-top: 0;
}
.mdl_stack_scroll_a > .content .side_b > .item > .blk_quote_a {
  margin-top: 1.5rem;
}
.mdl_stack_scroll_a > .content .side_b > .item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: -100vw;
  z-index: -1;
  background: var(--var_bg_a);
}
.mdl_stack_scroll_a > .content .side_b > .item:nth-child(even)::before {
  background: var(--var_bg_b);
}
.mdl_stack_scroll_a > .content .side_b > .item::before {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_stack_scroll_a > .dec_a {
  position: absolute;
  inset-block: 0;
  left: 0;
  right: calc((100% - 100vw) / 2);
  z-index: -1;
  pointer-events: none;
}
.mdl_stack_scroll_a > .dec_a > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
}
.mdl_stack_scroll_a > .dec_a > .wrap > .prt_dec_circle_a {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}
.mdl_stack_scroll_a > .dec_b {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.mdl_stack_scroll_a > .dec_b > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mdl_stack_scroll_a > .dec_b > .wrap > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: color-mix(in srgb, var(--var_txt_clr_b) 40%, transparent);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_b) 40%, transparent);
}
.mdl_stack_scroll_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_stack_scroll_a > .content .side_a,
  .mdl_stack_scroll_a > .dec_a,
  .mdl_stack_scroll_a > .dec_b,
  .mdl_stack_scroll_a > .prt_dec_grid_a {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_stack_scroll_a > .content .side_b {
    padding-left: 0;
  }
  .mdl_stack_scroll_a > .content .side_b > .item {
    min-height: 0;
    padding-block: 3rem;
  }
  .mdl_stack_scroll_a > .content .side_b > .item > .blk_link_list_a,
  .mdl_stack_scroll_a > .content .side_b > .item > .blk_point_grid_a,
  .mdl_stack_scroll_a > .content .side_b > .item > .blk_stats_a {
    max-width: none;
  }
  .mdl_stack_scroll_a > .content .side_b > .item > .blk_quote_a {
    max-width: 48rem;
  }
}

/* ==========================================================================
   Module: mdl_hero_c - Centered page hero
   Text centered on the container; two people photos anchored to the bottom,
   meeting near the middle and bleeding off the left / right (clipped by the
   hero). Behind them a prt_dec_circle_a centered on the hero's bottom edge,
   spinning with scroll — the next section (mdl_intro_a) draws the same
   circle centered on its top edge, so the two halves read as one circle.
   Layers: grid lines → circle → photos → text.
   ========================================================================== */
.mdl_hero_c {
  --size: min(56rem, 62vw, 90svh);
  --img-h: clamp(20rem, 56svh, 40rem);
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 50rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_hero_c {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_hero_c {
    --screen-h: 100svh;
  }
}
.mdl_hero_c {
  justify-content: flex-start;
  overflow: hidden;
}
.mdl_hero_c > .dec_a {
  position: absolute;
  left: 50%;
  bottom: 0;
  pointer-events: none;
}
.mdl_hero_c > .dec_a > .wrap {
  transform: translate(-50%, 50%) rotate(-90deg);
}
.mdl_hero_c > .content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  padding: max(5rem, 17svh) 2rem calc(var(--img-h) - 6rem);
  text-align: center;
}
.mdl_hero_c > .content > .title {
  max-width: 58rem;
  margin: 0;
  font-size: clamp(2.25rem, 1.5326086957rem + 2.3913043478cqi, 3.625rem);
  line-height: 1.15;
  color: var(--var_hdr_clr_a);
}
.mdl_hero_c > .content > .des {
  max-width: 42rem;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_hero_c > .content > .prt_btn_c {
  margin-top: 1rem;
}
.mdl_hero_c > .side_a,
.mdl_hero_c > .side_b {
  position: absolute;
  bottom: 0;
  z-index: 1;
}
.mdl_hero_c > .side_a > .prt_img_a,
.mdl_hero_c > .side_b > .prt_img_a {
  height: 100%;
}
.mdl_hero_c > .side_a {
  right: 51.5%;
  height: calc(var(--img-h) * var(--fit, 1));
  aspect-ratio: 1000/705;
}
.mdl_hero_c > .side_b {
  left: 54%;
  height: calc(var(--img-h) * 1.05 * var(--fit, 1));
  aspect-ratio: 1203/806;
}
@container (max-width: 1024px) {
  .mdl_hero_c > .prt_dec_grid_a {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_hero_c {
    --img-h: clamp(18rem, 44svh, 28rem);
  }
  .mdl_hero_c > .side_a {
    right: 50%;
  }
  .mdl_hero_c > .side_b {
    left: 52%;
  }
}
@container (max-width: 645px) {
  .mdl_hero_c {
    --size: 90vw;
  }
  .mdl_hero_c > .content {
    padding-top: 5rem;
    padding-inline: 0;
    padding-bottom: 80cqi;
  }
  .mdl_hero_c > .side_a {
    display: none;
  }
  .mdl_hero_c > .side_b {
    left: auto;
    right: 0;
    height: auto;
    width: 100%;
  }
}

/* ==========================================================================
   Module: mdl_intro_a - Section intro on the grid lines
   Six columns = the 7 container grid lines. Left (cols 1-4): plain accent
   icon over a large left-aligned title (<mark> accent). Right (cols 5-6,
   bottom-aligned with the title): description and a drawing x-line. Then
   the key figures as blk_figure_a cells (an accent icon beside each
   number: the figure's own `icon`, else picked from words in its label) (--n across, each 6 / --n grid
   columns: 3 figures = two columns each) with shared dashed lines (the
   list draws top + left, each cell right + bottom). Without figures
   (no_stats) the section ends after the text. Optional `dots` rise into
   the section above (row: uti_ovf_vis). Stacks at md, figures three across
   down to large phones, one per row at ms. (`circle` / `spin` from the old centered design are not drawn.)
   ========================================================================== */
.mdl_intro_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_intro_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_intro_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_intro_a > .prt_dec_dots_a {
  position: absolute;
  top: calc(-1 * 6rem);
  right: 2rem;
  z-index: 1;
}
@container (max-width: 1024px) {
  .mdl_intro_a > .prt_dec_dots_a {
    display: none !important;
  }
}
.mdl_intro_a > .content {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
}
.mdl_intro_a > .content > .side_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  grid-column: 1/span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-right: 4rem;
}
.mdl_intro_a > .content > .side_a > .title {
  margin: 0;
  font-size: clamp(1.75rem, 1.2282608696rem + 1.7391304348cqi, 2.75rem);
  line-height: 1.08;
  color: var(--var_hdr_clr_a);
}
.mdl_intro_a > .content > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_intro_a > .content > .side_b {
  grid-column: 5/span 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mdl_intro_a > .content > .side_b > .des {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_intro_a > .content > .side_b > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_txt_clr_a);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  width: 100%;
}
.mdl_intro_a > .list {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_intro_a > .list > .item {
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
@container (max-width: 1024px) {
  .mdl_intro_a {
    padding-block: 4rem;
  }
  .mdl_intro_a > .content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }
  .mdl_intro_a > .content > .side_a,
  .mdl_intro_a > .content > .side_b {
    grid-column: auto;
  }
  .mdl_intro_a > .content > .side_a {
    padding-right: 0;
  }
  .mdl_intro_a > .content > .side_b {
    max-width: 40rem;
  }
  .mdl_intro_a > .content > .side_b > .prt_dec_xline_a {
    display: none;
  }
  .mdl_intro_a > .list {
    margin-top: 3rem;
  }
}
@container (max-width: 645px) {
  .mdl_intro_a > .list:has(> .item:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 480px) {
  .mdl_intro_a > .list,
  .mdl_intro_a > .list:has(> .item:nth-child(4)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Module: mdl_statement_a - Pinned statement, filled in on scroll
   The module is three screens tall (two on a tablet); its .wrap pins for that distance. While
   pinned, core.js (mdlStatementA) fills the letters in reading order
   (`is_filled` on each letter span) and counts the year above them from
   data-from to data-to along a timeline ruler: a tick a year, the ones
   passed lit (`is_filled`), the track filled and its marker moved to the
   count (--fill, 0 → 1). Variant `with_photos`: the stored photos are dealt
   onto a stack at each side (`is_next` = not dealt yet; without JS every
   photo shows, stacked). On a phone it isn't pinned: the letters fill while
   the block scrolls past.
   Colors: --var_statement_a_txt_clr (unfilled letters, the ruler's ticks and
   track); filled: the accent; the year: the heading color.
   ========================================================================== */
.mdl_statement_a {
  --photo-w: clamp(10rem, 14vw, 15rem);
  position: relative;
  height: 300svh;
}
.mdl_statement_a > .wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 100svh;
  min-height: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding-inline: 2rem;
  overflow: hidden;
  isolation: isolate;
}
.mdl_statement_a > .wrap > .year {
  --fill: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: min(44rem, 100%);
}
.mdl_statement_a > .wrap > .year > .num {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(3.5rem, 1.6739130435rem + 6.0869565217cqi, 7rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--var_hdr_clr_a);
}
.mdl_statement_a > .wrap > .year > .ruler {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 1.5rem;
}
.mdl_statement_a > .wrap > .year > .ruler::before, .mdl_statement_a > .wrap > .year > .ruler::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--var_statement_a_txt_clr);
}
.mdl_statement_a > .wrap > .year > .ruler::after {
  height: 2px;
  translate: 0 -50%;
  background: var(--var_acnt_clr_a);
  transform: scaleX(var(--fill));
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.mdl_statement_a > .wrap > .year > .ruler > .tick {
  position: relative;
  width: 1px;
  height: 0.5rem;
  background: var(--var_statement_a_txt_clr);
  transition: background-color 0.25s ease;
}
.mdl_statement_a > .wrap > .year > .ruler > .tick.major {
  height: 1rem;
}
.mdl_statement_a > .wrap > .year > .ruler > .tick > .label {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--var_statement_a_txt_clr);
  transition: color 0.25s ease;
}
.mdl_statement_a > .wrap > .year > .ruler > .tick.start > .label {
  left: 0;
  translate: 0 0;
}
.mdl_statement_a > .wrap > .year > .ruler > .tick.end > .label {
  left: auto;
  right: 0;
  translate: 0 0;
}
.mdl_statement_a > .wrap > .year > .ruler > .tick.is_filled {
  background-color: var(--var_acnt_clr_a);
}
.mdl_statement_a > .wrap > .year > .ruler > .tick.is_filled > .label {
  color: var(--var_acnt_clr_a);
}
.mdl_statement_a > .wrap > .year > .ruler > .mark {
  position: absolute;
  top: 0;
  left: calc(var(--fill) * 100%);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  translate: -50% -50%;
  background: var(--var_acnt_clr_a);
  box-shadow: 0 0 0 0.25rem var(--var_bg_a);
  transition: left 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .mdl_statement_a > .wrap > .year > .ruler::after,
  .mdl_statement_a > .wrap > .year > .ruler > .tick,
  .mdl_statement_a > .wrap > .year > .ruler > .tick > .label,
  .mdl_statement_a > .wrap > .year > .ruler > .mark {
    transition: none;
  }
}
.mdl_statement_a > .wrap > .side_a,
.mdl_statement_a > .wrap > .side_b {
  position: absolute;
  top: 50%;
  display: grid;
  width: var(--photo-w);
  transform: translateY(-50%);
}
.mdl_statement_a > .wrap > .side_a > .item,
.mdl_statement_a > .wrap > .side_b > .item {
  grid-area: 1/1;
  transform: rotate(var(--r));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
.mdl_statement_a > .wrap > .side_a > .item.is_next,
.mdl_statement_a > .wrap > .side_b > .item.is_next {
  opacity: 0;
  transform: translate(var(--from), 2rem) rotate(calc(var(--r) * -2)) scale(0.92);
}
@media (prefers-reduced-motion: reduce) {
  .mdl_statement_a > .wrap > .side_a > .item,
  .mdl_statement_a > .wrap > .side_b > .item {
    transition: none;
  }
}
.mdl_statement_a > .wrap > .side_a {
  left: 1rem;
  --from: -3rem;
}
.mdl_statement_a > .wrap > .side_b {
  right: 1rem;
  --from: 3rem;
}
.mdl_statement_a > .wrap > .prt_dec_grid_a {
  z-index: -1;
}
.mdl_statement_a > .wrap > .title {
  max-width: min(64rem, 100%);
  margin: 0;
  font-size: clamp(1.25rem, 0.8586956522rem + 1.3043478261cqi, 2rem);
  line-height: 1.3;
  text-align: center;
  color: var(--var_statement_a_txt_clr);
}
.mdl_statement_a > .wrap > .title .item {
  white-space: nowrap;
}
.mdl_statement_a > .wrap > .title .item > span {
  transition: color 0.2s ease;
}
.mdl_statement_a > .wrap > .title .item > span.is_filled {
  color: var(--var_acnt_clr_a);
}
@media (prefers-reduced-motion: reduce) {
  .mdl_statement_a > .wrap > .title .item > span {
    transition: none;
  }
}
.mdl_statement_a.with_photos > .wrap > .title {
  max-width: min(64rem, 100% - 2 * (var(--photo-w) + 3rem));
}
@container (max-width: 1024px) {
  .mdl_statement_a > .wrap > .prt_dec_grid_a,
  .mdl_statement_a > .wrap > .side_a,
  .mdl_statement_a > .wrap > .side_b {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_statement_a {
    height: 200svh;
  }
  .mdl_statement_a > .wrap {
    padding-inline: 0;
  }
  .mdl_statement_a.with_photos > .wrap > .title {
    max-width: 100%;
  }
}
@container (max-width: 645px) {
  .mdl_statement_a {
    height: auto;
  }
  .mdl_statement_a > .wrap {
    position: relative;
    height: auto;
    min-height: 0;
    padding-block: 4rem;
    gap: 2rem;
  }
}

/* ==========================================================================
   Module: mdl_orbit_a - Pinned intro + cards turning on a wheel, then stacking
   The module is (1 + 0.7 × (cards − 1)) screens tall; its .wrap pins for that
   distance and unpins once every card is stacked. Each card's wrapper (.item)
   rotates around a hub far to its right (transform-origin), so the cards ride
   a big wheel: they come up from below, stop in the focus slot (0°) and stack.
   core.js (mdlOrbitA) sets per card --a (wheel angle) and --k (how many cards
   now lie on top of it). Without JS: --a = index × -30° (start position).
   While it turns: under the intro, an index of the cards (mono number +
   title) lights the one in focus (is_active) and keeps the passed ones lit
   (is_done), a progress line beside it filling with --p; behind the cards
   the wheel's track — a dashed circle through their path with a tick at
   every card's slot — turns with them (--turn, degrees).
   Stacks into a plain list at md (no index, no track).
   ========================================================================== */
.mdl_orbit_a {
  position: relative;
  height: calc(100svh + (var(--n) - 1) * 70svh);
}
.mdl_orbit_a > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 44rem;
  display: flex;
  align-items: center;
  overflow-y: clip;
  isolation: isolate;
}
.mdl_orbit_a > .wrap > .dec_a {
  position: absolute;
  top: 50%;
  left: calc((100% - 100vw) / 2);
  z-index: -1;
  pointer-events: none;
}
.mdl_orbit_a > .wrap > .dec_a > .prt_dec_circle_a {
  --size: 56rem;
  transform: translate(-50%, -50%);
}
.mdl_orbit_a > .wrap > .prt_dec_grid_a {
  z-index: -1;
}
.mdl_orbit_a > .wrap > .grd_col_wrap {
  width: 100%;
}
.mdl_orbit_a .side_a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
.mdl_orbit_a .side_a > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.12;
  color: var(--var_hdr_clr_a);
}
.mdl_orbit_a .side_a > .des {
  max-width: 36rem;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_orbit_a .side_a > .steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding: 0 0 0 1.5rem;
  list-style: none;
  border-left: 1px solid var(--var_bdr_clr_a);
}
.mdl_orbit_a .side_a > .steps::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: calc(var(--p, 0) * 100%);
  background: var(--var_acnt_clr_a);
}
.mdl_orbit_a .side_a > .steps > .step {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  opacity: 0.4;
  transition: opacity 0.35s ease, translate 0.35s ease;
}
.mdl_orbit_a .side_a > .steps > .step > .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--var_txt_clr_b);
}
.mdl_orbit_a .side_a > .steps > .step > .name {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--var_hdr_clr_a);
}
.mdl_orbit_a .side_a > .steps > .step.is_done {
  opacity: 0.7;
}
.mdl_orbit_a .side_a > .steps > .step.is_active {
  opacity: 1;
  translate: 0.5rem 0;
}
.mdl_orbit_a .side_a > .steps > .step.is_active > .num {
  color: var(--var_acnt_clr_a);
}
.mdl_orbit_a .side_b {
  display: flex;
  align-items: center;
  padding-left: 2rem;
}
.mdl_orbit_a .side_b > .list {
  position: relative;
  display: grid;
  width: min(100%, 36rem);
}
.mdl_orbit_a .side_b > .list > .track {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 80rem;
  max-width: none;
  height: 80rem;
  translate: 0 -50%;
  overflow: visible;
  pointer-events: none;
}
.mdl_orbit_a .side_b > .list > .track > .ring {
  fill: none;
  stroke: var(--var_bdr_clr_a);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
}
.mdl_orbit_a .side_b > .list > .track > .dial {
  rotate: calc(var(--turn, 0) * 1deg);
}
.mdl_orbit_a .side_b > .list > .track > .dial > line {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.mdl_orbit_a .side_b > .list > .track > .dial > .minor {
  stroke: var(--var_bdr_clr_a);
}
.mdl_orbit_a .side_b > .list > .track > .dial > .major {
  stroke: var(--var_acnt_clr_a);
  stroke-width: 2;
}
.mdl_orbit_a .side_b > .list > .item {
  grid-area: 1/1;
  transform-origin: calc(50% + 40rem) 50%;
  transform: rotate(var(--a, calc(var(--i) * -30deg)));
  will-change: transform;
}
.mdl_orbit_a .side_b > .list > .item > .blk_info_card_a {
  height: 100%;
  transform: translateY(calc(var(--k, 0) * -1rem)) scale(calc(1 - var(--k, 0) * 0.05));
  filter: brightness(calc(1 - var(--k, 0) * 0.2));
}
@container (max-width: 1024px) {
  .mdl_orbit_a > .wrap > .dec_a,
  .mdl_orbit_a > .wrap > .prt_dec_grid_a,
  .mdl_orbit_a .side_a > .steps,
  .mdl_orbit_a .side_b > .list > .track {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_orbit_a {
    height: auto;
  }
  .mdl_orbit_a > .wrap {
    position: relative;
    height: auto;
    min-height: 0;
    padding-block: 4rem;
  }
  .mdl_orbit_a .side_b {
    padding-left: 0;
    margin-top: 3rem;
  }
  .mdl_orbit_a .side_b > .list {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .mdl_orbit_a .side_b > .list > .item {
    grid-area: auto;
    transform: none;
  }
  .mdl_orbit_a .side_b > .list > .item > .blk_info_card_a {
    transform: none;
    filter: none;
  }
  .mdl_orbit_a .side_b > .list > .item:last-child:nth-of-type(odd) {
    grid-column: 1/-1;
  }
}
@container (max-width: 645px) {
  .mdl_orbit_a > .wrap {
    padding-block: 3rem;
  }
  .mdl_orbit_a .side_b > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Module: mdl_case_stack_a - Featured work
   Full-bleed row (type-full). Two layers:
   - .dec_a: a fixed (sticky, one screen tall) backdrop — every case's media,
     heavily blurred and darkened, crossfading to the current case
     (`.item.is_active`), with the 7 container grid lines on top.
   - .list: the cases scroll past on the container. Each case = a meta row
     (number · client · service) on the grid's thirds, a wide media frame,
     then title + View Case Study button (first third, left) and description
     (last third). core.js
     (mdlCaseStackA) brings each frame into focus as it nears the center
     (un-blur + brighten, same size) and drifts the media inside the frame
     (parallax); it also sets the current case for the backdrop.
   Reduced motion: no zoom / parallax / crossfade animation.
   ========================================================================== */
.mdl_case_stack_a {
  position: relative;
  isolation: isolate;
}
.mdl_case_stack_a > .dec_a {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.mdl_case_stack_a > .dec_a > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.mdl_case_stack_a > .dec_a > .wrap > .item {
  position: absolute;
  inset: -10%;
  opacity: 0;
  filter: blur(36px) brightness(0.32) saturate(1.1);
  transition: opacity 0.8s ease;
}
.mdl_case_stack_a > .dec_a > .wrap > .item.is_active {
  opacity: 1;
}
.mdl_case_stack_a > .dec_a > .wrap > .item > .prt_img_a,
.mdl_case_stack_a > .dec_a > .wrap > .item > .prt_video_a {
  position: absolute;
  inset: 0;
}
.mdl_case_stack_a > .dec_a > .wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, color-mix(in srgb, var(--var_bg_a) 70%, transparent) 100%);
}
.mdl_case_stack_a > .dec_a > .wrap > .prt_dec_grid_a {
  z-index: 1;
  --var_bdr_clr_a: color-mix(in srgb, var(--var_txt_clr_a) 12%, transparent);
}
.mdl_case_stack_a > .list {
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  padding-inline: 0;
}
.mdl_case_stack_a > .list > .item {
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_case_stack_a > .list > .item {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_case_stack_a > .list > .item {
    --screen-h: 100svh;
  }
}
.mdl_case_stack_a > .list > .item {
  gap: 1rem;
  padding-block: 4rem;
}
.mdl_case_stack_a > .list > .item > .hdr,
.mdl_case_stack_a > .list > .item > .body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.mdl_case_stack_a > .list > .item > .hdr > .label {
  display: flex;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mdl_case_stack_a > .list > .item > .hdr > .label > dt {
  color: var(--var_txt_clr_b);
}
.mdl_case_stack_a > .list > .item > .hdr > .label > dd {
  margin: 0;
  color: var(--var_txt_clr_a);
}
.mdl_case_stack_a > .list > .item > .media {
  position: relative;
  aspect-ratio: 21/9;
  max-height: 62svh;
  overflow: hidden;
  filter: blur(calc((1 - var(--focus, 1)) * 6px)) brightness(calc(0.55 + 0.45 * var(--focus, 1)));
  will-change: filter;
}
.mdl_case_stack_a > .list > .item > .media > .wrap {
  position: absolute;
  inset: -25% 0;
  will-change: transform;
}
.mdl_case_stack_a > .list > .item > .media > .wrap > .prt_img_a,
.mdl_case_stack_a > .list > .item > .media > .wrap > .prt_video_a {
  position: absolute;
  inset: 0;
}
.mdl_case_stack_a > .list > .item > .body {
  align-items: start;
  row-gap: 1rem;
  padding-top: 1rem;
}
.mdl_case_stack_a > .list > .item > .body > .title {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.5rem, 1.2391304348rem + 0.8695652174cqi, 2rem);
  line-height: 1.15;
  color: var(--var_hdr_clr_a);
}
.mdl_case_stack_a > .list > .item > .body > .des {
  grid-column: 3;
  grid-row: 1/span 2;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_case_stack_a > .list > .item > .body > .prt_btn_c {
  grid-column: 1;
}
@media (prefers-reduced-motion: reduce) {
  .mdl_case_stack_a > .dec_a > .wrap > .item {
    transition: none;
  }
}
@container (max-width: 1024px) {
  .mdl_case_stack_a > .list {
    padding-inline: 0;
  }
  .mdl_case_stack_a > .list > .item {
    min-height: 0;
  }
  .mdl_case_stack_a > .list > .item > .hdr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_case_stack_a > .list > .item > .hdr > .label:first-child {
    display: none;
  }
  .mdl_case_stack_a > .list > .item > .media {
    aspect-ratio: 16/10;
    filter: none;
  }
  .mdl_case_stack_a > .list > .item > .body {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_case_stack_a > .list > .item > .body > .title,
  .mdl_case_stack_a > .list > .item > .body > .des,
  .mdl_case_stack_a > .list > .item > .body > .prt_btn_c {
    grid-column: 1;
    grid-row: auto;
  }
}
@container (max-width: 480px) {
  .mdl_case_stack_a > .list > .item > .hdr {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.75rem;
  }
  .mdl_case_stack_a > .list > .item > .hdr > .label {
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* ==========================================================================
   Module: mdl_spotlight_a - Centered statement + centered person + figures
   Title centered at the top (title <mark> = --var_spotlight_a_mark_clr),
   photo bottom-centered (prt_person_a, tinted with the section color), the
   blk_stats_a frosted bar over its lower part. Decorations: spinning circle
   on the left edge, vertical drawing x-line, dots top right.
   Full-bleed row (type-full); text on the container.
   ========================================================================== */
.mdl_spotlight_a {
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 50rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_spotlight_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_spotlight_a {
    --screen-h: 100svh;
  }
}
.mdl_spotlight_a {
  justify-content: flex-start;
  overflow: hidden;
}
.mdl_spotlight_a > .dec_a {
  position: absolute;
  top: 45%;
  left: 0;
  pointer-events: none;
}
.mdl_spotlight_a > .dec_a > .prt_dec_circle_a {
  --size: 44rem;
  --var_dec_circle_clr: var(--var_bg_b);
  --var_dec_circle_bdr: transparent;
  transform: translate(-50%, -50%);
}
.mdl_spotlight_a > .dec_b {
  position: absolute;
  top: 4rem;
  left: max(4rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 3rem);
  z-index: 2;
}
.mdl_spotlight_a > .dec_b > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_spotlight_a_mark_clr);
}
.mdl_spotlight_a > .prt_dec_dots_a {
  position: absolute;
  top: 4rem;
  right: max(2rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 3rem);
  z-index: 2;
}
.mdl_spotlight_a > .content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  padding: 6rem 8rem 0;
  text-align: center;
}
.mdl_spotlight_a > .content > .title {
  max-width: 52rem;
  margin: 0 auto;
  font-size: clamp(2rem, 1.2173913043rem + 2.6086956522cqi, 3.5rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_spotlight_a > .content > .title mark {
  color: var(--var_spotlight_a_mark_clr);
}
.mdl_spotlight_a > .media {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  height: min(72%, 44rem);
  aspect-ratio: 1123/686;
  transform: translateX(-50%);
}
.mdl_spotlight_a > .media > .prt_person_a {
  position: absolute;
  inset: 0;
  --tag-y: 46%;
}
.mdl_spotlight_a > .stats {
  position: absolute;
  left: 50%;
  bottom: 4rem;
  z-index: 3;
  width: min(48rem, 100% - 4rem);
  transform: translateX(-50%);
}
@container (max-width: 1024px) {
  .mdl_spotlight_a > .dec_a,
  .mdl_spotlight_a > .dec_b,
  .mdl_spotlight_a > .prt_dec_dots_a {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_spotlight_a > .content {
    padding-inline: 2rem;
  }
  .mdl_spotlight_a > .media {
    height: 60%;
  }
}
@container (max-width: 645px) {
  .mdl_spotlight_a {
    min-height: 0;
  }
  .mdl_spotlight_a > .content {
    padding-bottom: 2rem;
  }
  .mdl_spotlight_a > .stats {
    order: 1;
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: 0 2rem;
    transform: none;
  }
  .mdl_spotlight_a > .media {
    order: 2;
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
    margin-top: auto;
    padding-top: 2rem;
    transform: none;
  }
}

/* ==========================================================================
   Module: mdl_logo_grid_a - Centered title + client logos on the grid
   Same treatment as the homepage's mdl_trusted_a: the logos are cells on
   the grid lines (four across on the middle four of the six columns, one
   logo per column), no gaps, shared dashed lines (the list draws top +
   left, each cell right + bottom, since the solid cells cover the lines),
   hover tint; striped fillers close an incomplete row. Cells are
   prt_logo_card_a.solid, colored by re-pointing the card's --var_bg_b to
   --var_logo_grid_a_card_clr; per-logo class from data (e.g. invert).
   Decorations: a drawing x-line under the title, dots top right and a
   spinning circle half off the left edge, low (option `circle`: left |
   right | none, per section) (off at md).
   Full width at md (lines hidden), two across at sm.
   ========================================================================== */
.mdl_logo_grid_a {
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 44rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_logo_grid_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_logo_grid_a {
    --screen-h: 100svh;
  }
}
.mdl_logo_grid_a > .dec_a {
  position: absolute;
  bottom: 2rem;
  left: 0;
  translate: -50% 0;
  pointer-events: none;
}
.mdl_logo_grid_a > .dec_a > .prt_dec_circle_a {
  --size: min(30rem, 40vw);
}
.mdl_logo_grid_a.circle_right > .dec_a {
  left: auto;
  right: 0;
  translate: 50% 0;
}
.mdl_logo_grid_a > .prt_dec_dots_a {
  position: absolute;
  top: 3rem;
  right: 2rem;
}
@container (max-width: 1024px) {
  .mdl_logo_grid_a > .dec_a,
  .mdl_logo_grid_a > .prt_dec_dots_a {
    display: none !important;
  }
}
.mdl_logo_grid_a > .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  padding-block: 6rem;
}
.mdl_logo_grid_a > .content > .title {
  max-width: 64rem;
  margin: 0;
  font-size: clamp(1.5rem, 1.1739130435rem + 1.0869565217cqi, 2.125rem);
  line-height: 1.15;
  text-align: center;
  color: var(--var_hdr_clr_a);
}
.mdl_logo_grid_a > .content > .des {
  max-width: 44rem;
  margin: calc(3rem * -1) 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  text-align: center;
  color: var(--var_txt_clr_b);
}
.mdl_logo_grid_a > .content > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_txt_clr_a);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  width: min(100%, 24rem);
  margin-top: calc(-1 * 2rem);
}
.mdl_logo_grid_a > .content > .list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 66.6666666667%;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_logo_grid_a > .content > .list > .prt_logo_card_a,
.mdl_logo_grid_a > .content > .list > .dec_a {
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_logo_grid_a > .content > .list > .prt_logo_card_a {
  --var_bg_b: var(--var_logo_grid_a_card_clr);
  min-height: 9.5rem;
  border-radius: 0;
  transition: background-color 0.3s ease;
}
.mdl_logo_grid_a > .content > .list > .prt_logo_card_a:hover {
  background-color: color-mix(in srgb, var(--var_bg_b) 94%, var(--var_hdr_clr_a));
}
.mdl_logo_grid_a > .content > .list > .dec_a {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
@media (prefers-reduced-motion: reduce) {
  .mdl_logo_grid_a > .content > .list > .prt_logo_card_a {
    transition: none;
  }
}
@container (max-width: 1024px) {
  .mdl_logo_grid_a {
    min-height: 0;
  }
  .mdl_logo_grid_a > .content {
    padding-block: 4rem;
  }
  .mdl_logo_grid_a > .content > .list {
    width: 100%;
  }
}
@container (max-width: 645px) {
  .mdl_logo_grid_a > .content {
    padding-block: 3rem;
  }
  .mdl_logo_grid_a > .content > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_logo_grid_a > .content > .list > .dec_a {
    display: none;
  }
}
@container (max-width: 1024px) {
  .mdl_logo_grid_a > .prt_dec_grid_a {
    display: none !important;
  }
}

/* ==========================================================================
   Module: mdl_industry_a - Industries we've worked in
   Drawing x-line, centered title (<mark> = accent), then numbered
   prt_tile_a cells on the grid lines with shared dashed lines (as
   mdl_logo_grid_b), staggering in (an_stagger / an_inview).
   3 columns → 2 at sm.
   ========================================================================== */
.mdl_industry_a {
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 44rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_industry_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_industry_a {
    --screen-h: 100svh;
  }
}
.mdl_industry_a > .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding-block: 6rem;
}
.mdl_industry_a > .content > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_txt_clr_a);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  max-width: 100%;
}
.mdl_industry_a > .content > .title {
  max-width: 40rem;
  margin: 0;
  font-size: clamp(1.75rem, 1.2282608696rem + 1.7391304348cqi, 2.75rem);
  line-height: 1.15;
  text-align: center;
  color: var(--var_hdr_clr_a);
}
.mdl_industry_a > .content > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_industry_a > .content > .list > .item {
  display: grid;
  min-width: 0;
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_industry_a > .content > .list > .item > .prt_tile_a {
  min-width: 0;
}
.mdl_industry_a > .content > .list > .dec_a {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
@container (max-width: 1024px) {
  .mdl_industry_a > .prt_dec_grid_a {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_industry_a {
    min-height: 0;
  }
  .mdl_industry_a > .content {
    padding-block: 4rem;
  }
  .mdl_industry_a > .content > .list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(16rem, 33.3333333333% - 1px)), 1fr));
  }
  .mdl_industry_a > .content > .list > .dec_a {
    display: none;
  }
}
@container (max-width: 645px) {
  .mdl_industry_a > .content {
    padding-block: 3rem;
  }
  .mdl_industry_a > .content > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_industry_a > .content > .list > .dec_a {
    display: none;
  }
}
@container (max-width: 480px) {
  .mdl_industry_a > .content > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Module: mdl_hero_d - Clean listing hero with a featured post
   Full-bleed row (type-full); content on the container as a nested grid:
   side_a (col-15, may overlap the photo) page label (the page h1, small), "Featured", post title,
   meta (category · author · date), excerpt, button; side_b (col-9) person
   photo, bottom-anchored, bleeding past the container on the right.
   Side bar (blk_side_bar_a) on the left like the other heroes; only other
   decoration: the dashed column lines.
   ========================================================================== */
.mdl_hero_d {
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 44rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_hero_d {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_hero_d {
    --screen-h: 100svh;
  }
}
.mdl_hero_d {
  justify-content: stretch;
  overflow: hidden;
}
.mdl_hero_d > .blk_side_bar_a {
  --var_bg_b: var(--var_bg_a);
}
.mdl_hero_d > .content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  width: 100%;
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  padding-left: 7rem;
}
.mdl_hero_d > .content > .grd_col_wrap {
  display: flex;
  align-self: stretch;
  margin-block: 0;
}
.mdl_hero_d > .content > .grd_col_wrap > .grd_container {
  align-self: stretch;
  margin-block: 0;
}
.mdl_hero_d .side_a {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 6rem;
}
.mdl_hero_d .side_a > .label {
  margin: 0 0 2rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_hero_d .side_a > .sub {
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
  background: var(--var_acnt_clr_a);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_btn_c_txt_clr);
}
.mdl_hero_d .side_a > .title {
  max-width: 52rem;
  margin: 0;
  font-size: clamp(2rem, 1.347826087rem + 2.1739130435cqi, 3.25rem);
  line-height: 1.1;
}
.mdl_hero_d .side_a > .title > .link {
  color: var(--var_hdr_clr_a);
  text-decoration: none;
}
.mdl_hero_d .side_a > .title > .link:hover {
  color: var(--var_acnt_clr_a);
}
.mdl_hero_d .side_a > .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_hero_d .side_a > .list > .item {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_hero_d .side_a > .list > .item + .item::before {
  content: "/";
  margin-right: 1.5rem;
  color: var(--var_acnt_clr_a);
}
.mdl_hero_d .side_a > .des {
  max-width: 40rem;
  margin: 0 0 1rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.mdl_hero_d .side_b {
  position: relative;
}
.mdl_hero_d .side_b > .media {
  position: absolute;
  bottom: 0;
  left: -10rem;
  height: calc(74% * var(--fit, 1));
  aspect-ratio: 1123/686;
}
.mdl_hero_d .side_b > .media > .prt_img_a {
  position: absolute;
  inset: 0;
}
@container (max-width: 1024px) {
  .mdl_hero_d > .prt_dec_grid_a {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_hero_d {
    min-height: 0;
    display: block;
  }
  .mdl_hero_d > .content {
    display: block;
    padding-inline: 0;
  }
  .mdl_hero_d .side_a {
    padding-block: 6rem 2rem;
  }
  .mdl_hero_d .side_b > .media {
    position: relative;
    left: auto;
    width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   Module: mdl_post_grid_a - Post listing with category filters + load more,
   and an optional carousel row inside the grid (e.g. CEO Picks).
   - Search (prt_search_a) + category multi-select (blk_select_a) filter in
     place, together; "Load More" reveals `data-step` more cards; .des =
     "no results" line. core.js (mdlPostGridA) adds `is_ready`; without JS
     the controls stay hidden and every post shows.
   - .insert: a full-width grid row after the first few posts. Its .track
     bleeds off both edges of the browser (no CSS snap: npgCarousel settles on cards), and can be
     dragged with the mouse (`is_dragging` while dragging). Hidden while a
     category filter is active. Optional `theme` (a thm_* class) turns the row
     into its own full-browser-width band in that theme.
   Grid: 3 columns → 2 at md → 1 at sm. Hidden cards: .is_hidden.
   ========================================================================== */
.mdl_post_grid_a {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-block: 6rem;
}
.mdl_post_grid_a > .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.mdl_post_grid_a > .wrap > .title {
  margin: 0;
  font-size: clamp(1.75rem, 1.2282608696rem + 1.7391304348cqi, 2.75rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_post_grid_a > .wrap > .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.mdl_post_grid_a > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_post_grid_a > .list > .item.is_hidden,
.mdl_post_grid_a > .list > .insert.is_hidden {
  display: none;
}
.mdl_post_grid_a > .list > .insert {
  --gap: 1.5rem;
  --per: 3;
  grid-column: 1/-1;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-block: 3rem;
}
.mdl_post_grid_a > .list > .insert[class*=thm_] {
  margin-block: 1.5rem;
  padding-block: 5rem;
  box-shadow: 0 0 0 100vmax var(--var_bg_a);
  clip-path: inset(0 -100vmax);
}
.mdl_post_grid_a > .list > .insert > .body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.mdl_post_grid_a > .list > .insert > .body > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mdl_post_grid_a > .list > .insert > .body > .wrap > .title {
  margin: 0;
  font-size: clamp(1.75rem, 1.2282608696rem + 1.7391304348cqi, 2.75rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_post_grid_a > .list > .insert > .body > .wrap > .des {
  max-width: 32rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_post_grid_a > .list > .insert > .body > .controls {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
}
.mdl_post_grid_a > .list > .insert > .track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100cqi - (var(--per) - 1) * var(--gap)) / var(--per));
  gap: var(--gap);
  --bleed: calc((100vw - 100cqi) / 2);
  margin: 0 calc(-1 * var(--bleed));
  padding: 0 var(--bleed) 0.5rem;
  scroll-padding-inline: var(--bleed);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.mdl_post_grid_a > .list > .insert > .track::-webkit-scrollbar {
  display: none;
}
.mdl_post_grid_a > .list > .insert > .track:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 4px;
}
.mdl_post_grid_a > .list > .insert > .track.is_dragging {
  cursor: grabbing;
  user-select: none;
}
.mdl_post_grid_a > .des {
  margin: 0;
  font-size: 1.125rem;
  color: var(--var_txt_clr_b);
}
.mdl_post_grid_a > .label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mdl_post_grid_a > .bottom {
  display: flex;
  justify-content: center;
}
.mdl_post_grid_a > .bottom.is_hidden {
  display: none;
}
.mdl_post_grid_a:not(.is_ready) > .wrap > .controls,
.mdl_post_grid_a:not(.is_ready) > .bottom {
  display: none;
}
@container (max-width: 1024px) {
  .mdl_post_grid_a > .wrap > .controls {
    width: 100%;
  }
  .mdl_post_grid_a > .wrap > .controls > .prt_search_a {
    flex: 1;
  }
  .mdl_post_grid_a > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_post_grid_a > .list > .insert {
    --per: 2;
  }
}
@container (max-width: 480px) {
  .mdl_post_grid_a > .wrap > .controls {
    flex-direction: column;
    align-items: stretch;
  }
  .mdl_post_grid_a > .wrap > .controls > .prt_search_a {
    flex: none;
    width: 100%;
  }
}
@container (max-width: 645px) {
  .mdl_post_grid_a {
    padding-block: 4rem;
  }
  .mdl_post_grid_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_post_grid_a > .list > .insert {
    --per: 1.15;
  }
  .mdl_post_grid_a > .list > .insert > .body > .controls {
    display: none;
  }
}

/* ==========================================================================
   Module: mdl_newsletter_a - Newsletter signup section
   Nested grid: side_a (col-14) title, description, blk_signup_a form;
   side_b (col-10) person photo (prt_person_a, tinted with the section),
   bottom-anchored to the section edge and allowed to reach left behind the
   form's empty space. Photo hidden below md.
   ========================================================================== */
.mdl_newsletter_a {
  position: relative;
}
.mdl_newsletter_a > .grd_col_wrap {
  display: flex;
  margin-block: 0;
}
.mdl_newsletter_a > .grd_col_wrap > .grd_container {
  margin-block: 0;
}
.mdl_newsletter_a .side_a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding-block: 6rem;
}
.mdl_newsletter_a .side_a > .title {
  max-width: 36rem;
  margin: 0;
  font-size: clamp(1.75rem, 1.2282608696rem + 1.7391304348cqi, 2.75rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_newsletter_a .side_a > .des {
  max-width: 32rem;
  margin: 0 0 1rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_newsletter_a .side_b {
  position: relative;
  min-height: 26rem;
}
.mdl_newsletter_a .side_b > .prt_person_a {
  position: absolute;
  right: calc(-1 * 2rem);
  bottom: 0;
  height: 94%;
  aspect-ratio: 1397/1284;
}
@container (max-width: 1024px) {
  .mdl_newsletter_a .side_a {
    padding-block: 4rem 2rem;
  }
  @container (max-width: 1024px) {
    .mdl_newsletter_a .side_b {
      display: none !important;
    }
  }
}

/* ==========================================================================
   Module: mdl_team_a - Team page
   Full-bleed row (type-full) on a fine diagonal-stripe ground.
   - .content: centered intro (page h1, des, button) on the container.
   - .list: three edge-to-edge columns (.item), each a stack of cells —
     leader card (.wrap_a) on top, member cards (.wrap_b) straight below.
     1px grid lines: the list draws top + left, each cell right + bottom (no
     negative-margin overlaps, so columns land on whole pixels). No bottom
     padding: the grid runs straight into the footer. The leader photos
     drift down inside their cards (parallax in blk_leader_card_a).
   - Tablet (md): the cells sit in rows (the columns `display: contents`,
     cells in reading order --o), three across as on desktop, so every row
     lines up; striped cells (fill_3) close the members' last row.
   - Phone (sm): two across on the page margin, each leader a full-width
     compact card (photo beside the name), members two across, fill_2
     closing an odd last row.
   Decorations: two dot grids.
   ========================================================================== */
.mdl_team_a {
  --line: 1px solid var(--var_bdr_clr_a);
  position: relative;
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_bdr_clr_a) 60%, transparent) 0, color-mix(in srgb, var(--var_bdr_clr_a) 60%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_bdr_clr_a) 60%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_bdr_clr_a) 60%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_bdr_clr_a) 60%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_bdr_clr_a) 60%, transparent) 100%) 0 0/12px 12px;
}
.mdl_team_a > .dec_a,
.mdl_team_a > .dec_b {
  position: absolute;
  z-index: 0;
}
.mdl_team_a > .dec_a {
  top: 2rem;
  right: max(2rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 2rem);
}
.mdl_team_a > .dec_b {
  top: 32%;
  left: 2rem;
}
.mdl_team_a > .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  padding: 6rem 2rem 5rem;
  text-align: center;
}
.mdl_team_a > .content > .title {
  margin: 0;
  font-size: clamp(2.25rem, 1.597826087rem + 2.1739130435cqi, 3.5rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_team_a > .content > .des {
  max-width: 36rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_team_a > .content > .prt_btn_c {
  margin-top: 1rem;
}
.mdl_team_a > .list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  border-top: var(--line);
  border-left: var(--line);
}
.mdl_team_a > .list > .item {
  display: flex;
  flex-direction: column;
}
.mdl_team_a > .list > .item > .wrap_a,
.mdl_team_a > .list > .item > .wrap_b {
  border-right: var(--line);
  border-bottom: var(--line);
}
@container (max-width: 1024px) {
  .mdl_team_a > .dec_a,
  .mdl_team_a > .dec_b {
    display: none !important;
  }
}
.mdl_team_a > .list > .item > .wrap_c {
  display: none;
  border-right: var(--line);
  border-bottom: var(--line);
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
@container (max-width: 1024px) {
  .mdl_team_a > .content {
    padding-inline: 0;
  }
  .mdl_team_a > .list {
    align-items: stretch;
  }
  .mdl_team_a > .list > .item {
    display: contents;
  }
  .mdl_team_a > .list > .item > .wrap_a,
  .mdl_team_a > .list > .item > .wrap_b,
  .mdl_team_a > .list > .item > .wrap_c {
    order: var(--o, 9999);
  }
  .mdl_team_a > .list > .item > .fill_3 {
    display: block;
  }
}
@container (max-width: 645px) {
  .mdl_team_a > .content {
    padding-block: 4rem 3rem;
  }
  .mdl_team_a > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: var(--page-inset, 0px);
    margin-bottom: 3rem;
  }
  .mdl_team_a > .list > .item > .wrap_a {
    grid-column: 1/-1;
  }
  .mdl_team_a > .list > .item > .fill_3 {
    display: none;
  }
  .mdl_team_a > .list > .item > .fill_2 {
    display: block;
  }
}

/* ==========================================================================
   Module: mdl_logo_grid_b - Clients, editorial layout (variant of
   mdl_logo_grid_a — that one stays as the simple title + grid)
   Three rows on the container, over the 7 grid lines:
   - .wrap_a: facts list (mono, small, first third) + a large statement
     (last two thirds) whose words fill from muted to ink as the section
     scrolls (core.js mdlLogoGridB sets `is_filled` per word; no JS = filled).
   - .wrap_b: "Our Clients" title + a short right-aligned description.
   - .content: logo cells (prt_logo_card_a.solid), 3 per row, on the grid
     system: no tile boxes, the cells are drawn by lines (dashed rows here,
     the columns are the grid lines at 8 / 16 of 24 behind), so the logos
     sit in the page's own grid on any theme. Cells rise in one after
     another (an_stagger / an_inview) and tint on hover; the last cell is
     the accent stat link ("350+ clients and counting").
   Stacks at sm.
   ========================================================================== */
.mdl_logo_grid_b {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  padding-block: 6rem;
}
@container (max-width: 1024px) {
  .mdl_logo_grid_b > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_logo_grid_b > .wrap_a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: 0;
  row-gap: 2rem;
}
.mdl_logo_grid_b > .wrap_a > .list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_logo_grid_b > .wrap_a > .list > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_logo_grid_b > .wrap_a > .sub {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.1086956522rem + 1.3043478261cqi, 2.25rem);
  line-height: 1.25;
}
.mdl_logo_grid_b > .wrap_a > .sub .item {
  color: var(--var_hdr_clr_a);
  transition: color 0.35s ease;
}
.mdl_logo_grid_b > .wrap_a > .sub.is_ready .item:not(.is_filled) {
  color: color-mix(in srgb, var(--var_hdr_clr_a) 28%, transparent);
}
.mdl_logo_grid_b > .wrap_b {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.mdl_logo_grid_b > .wrap_b > .title {
  margin: 0;
  font-size: clamp(2.5rem, 1.7173913043rem + 2.6086956522cqi, 4rem);
  line-height: 1;
  color: var(--var_hdr_clr_a);
}
.mdl_logo_grid_b > .wrap_b > .des {
  max-width: 26rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: right;
  color: var(--var_txt_clr_b);
}
.mdl_logo_grid_b > .content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: calc(-1 * 3rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_logo_grid_b > .content > li {
  display: grid;
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_logo_grid_b > .content > li > .prt_logo_card_a {
  min-height: 10rem;
  border-radius: 0;
  transition: background-color 0.35s ease;
}
.mdl_logo_grid_b > .content > li > .prt_logo_card_a:hover {
  background-color: color-mix(in srgb, var(--var_bg_b) 94%, var(--var_hdr_clr_a));
}
.mdl_logo_grid_b > .content > li > .body {
  --var_icn_a_clr: var(--var_btn_c_txt_clr);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.25rem;
  min-height: 10rem;
  padding: 1.5rem;
  background: var(--var_acnt_clr_a);
  color: var(--var_btn_c_txt_clr);
  text-decoration: none;
  transition: background-color 0.35s ease;
}
.mdl_logo_grid_b > .content > li > .body:is(a):hover {
  background: color-mix(in srgb, var(--var_acnt_clr_a) 88%, var(--var_hdr_clr_a));
  text-decoration: none;
}
.mdl_logo_grid_b > .content > li > .body:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 3px;
}
.mdl_logo_grid_b > .content > li > .body > .num {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(2rem, 1.6086956522rem + 1.3043478261cqi, 2.75rem);
  line-height: 1;
}
.mdl_logo_grid_b > .content > li > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mdl_logo_grid_b > .content > li > .body > .prt_icn_a {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .mdl_logo_grid_b > .wrap_a > .sub .item,
  .mdl_logo_grid_b > .content > li > .prt_logo_card_a,
  .mdl_logo_grid_b > .content > li > .body {
    transition: none;
  }
}
@container (max-width: 645px) {
  .mdl_logo_grid_b {
    gap: 4rem;
    padding-block: 4rem;
  }
  .mdl_logo_grid_b > .wrap_a {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_logo_grid_b > .wrap_b > .des {
    text-align: left;
  }
  .mdl_logo_grid_b > .content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }
  .mdl_logo_grid_b > .content > li:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}
@container (max-width: 1024px) {
  .mdl_logo_grid_b {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_logo_grid_b {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_card_stack_a - Sticky stacking cards (e.g. Service Overview)
   Centered title + description, then one blk_feature_card_a per item. Every
   card is sticky; each sticks a little lower than the one before
   (--i × space(4)), so the earlier cards stay peeking above the current one
   as they stack up. No gaps — cards share their 1px border, so the list
   reads as a grid (like the Our Work lists). No colour / scale change. Works for any
   number of cards (3–6 typical). The 7 grid lines run behind, and two
   spinning circles stay pinned on the left and right screen edges (.dec_a).
   Stacked (md): cards scroll normally, no sticky.
   ========================================================================== */
.mdl_card_stack_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
@container (max-width: 1024px) {
  .mdl_card_stack_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_card_stack_a > .dec_a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 100vw) / 2);
  right: calc((100% - 100vw) / 2);
  z-index: -1;
  pointer-events: none;
}
.mdl_card_stack_a > .dec_a > .wrap_a {
  position: sticky;
  top: 0;
  height: 100svh;
}
.mdl_card_stack_a > .dec_a > .wrap_a > .prt_dec_circle_a {
  --size: 34rem;
  position: absolute;
  top: 55%;
}
.mdl_card_stack_a > .dec_a > .wrap_a > .prt_dec_circle_a:first-child {
  left: 0;
  transform: translate(-50%, -50%);
}
.mdl_card_stack_a > .dec_a > .wrap_a > .prt_dec_circle_a:last-child {
  right: 0;
  transform: translate(50%, -50%);
}
@container (max-width: 1024px) {
  .mdl_card_stack_a > .dec_a {
    display: none !important;
  }
}
.mdl_card_stack_a > .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 4rem;
  text-align: center;
}
.mdl_card_stack_a > .wrap > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_card_stack_a > .wrap > .des {
  max-width: 40rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_card_stack_a > .list {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.mdl_card_stack_a > .list > .item {
  position: sticky;
  top: calc(4rem + var(--i) * 1rem);
}
.mdl_card_stack_a > .list > .item + .item {
  margin-top: -1px;
}
@container (max-width: 1024px) {
  .mdl_card_stack_a {
    padding-block: 4rem;
  }
  .mdl_card_stack_a > .wrap {
    margin-bottom: 3rem;
  }
  .mdl_card_stack_a > .list > .item {
    position: relative;
    top: auto;
  }
}
@container (max-width: 645px) {
  .mdl_card_stack_a > .wrap {
    margin-bottom: 2rem;
  }
}
@container (max-width: 1024px) {
  .mdl_card_stack_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_card_stack_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_case_scroll_a - Featured projects, horizontal scroll
   Header (title, description, counter "01 / 05", View All), a row of
   blk_work_card_a cards, and a progress bar. With more than one card the
   section pins (sticky .wrap, one screen tall) and vertical scrolling moves
   the row sideways; core.js mdlCaseScrollA sets the module height (--h =
   one screen + the row's overflow), the row's translateX, the counter and
   the bar (--progress). One card (`is_single`), no JS, md and below, or
   reduced motion: a normal swipeable row (scroll-snap), not pinned.
   The row starts on the container edge and slides off both screen edges.
   ========================================================================== */
.mdl_case_scroll_a {
  position: relative;
  height: var(--h, auto);
}
.mdl_case_scroll_a > .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  min-height: min(100svh, 56rem);
  padding-block: 4rem;
  overflow: visible;
}
@container (max-width: 1024px) {
  .mdl_case_scroll_a > .wrap > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_case_scroll_a > .wrap > .hdr {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.mdl_case_scroll_a > .wrap > .hdr > .body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mdl_case_scroll_a > .wrap > .hdr > .body > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_case_scroll_a > .wrap > .hdr > .body > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_case_scroll_a > .wrap > .hdr > .controls {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.mdl_case_scroll_a > .wrap > .hdr > .controls > .num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--var_txt_clr_b);
}
.mdl_case_scroll_a > .wrap > .hdr > .controls > .num > .label {
  color: var(--var_acnt_clr_a);
}
.mdl_case_scroll_a > .wrap > .hdr > .controls > .prt_btn_b {
  display: none;
}
.mdl_case_scroll_a > .wrap > .list {
  position: relative;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.mdl_case_scroll_a > .wrap > .list > .item {
  flex: 0 0 min(46rem, 62cqi);
}
.mdl_case_scroll_a > .wrap > .list > .item > .blk_work_card_a .media {
  aspect-ratio: 16/10;
}
.mdl_case_scroll_a > .wrap > .bottom {
  position: relative;
  height: 2px;
  background: var(--var_bdr_clr_a);
}
.mdl_case_scroll_a > .wrap > .bottom > .bar {
  display: block;
  height: 100%;
  width: calc(var(--progress, 0) * 100%);
  background: var(--var_acnt_clr_a);
}
.mdl_case_scroll_a.is_single > .wrap, .mdl_case_scroll_a:not(.is_ready) > .wrap {
  min-height: 0;
}
.mdl_case_scroll_a.is_single > .wrap > .list, .mdl_case_scroll_a:not(.is_ready) > .wrap > .list {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mdl_case_scroll_a.is_single > .wrap > .list::-webkit-scrollbar, .mdl_case_scroll_a:not(.is_ready) > .wrap > .list::-webkit-scrollbar {
  display: none;
}
.mdl_case_scroll_a.is_single > .wrap > .list > .item, .mdl_case_scroll_a:not(.is_ready) > .wrap > .list > .item {
  scroll-snap-align: start;
}
.mdl_case_scroll_a.is_single > .wrap > .bottom, .mdl_case_scroll_a:not(.is_ready) > .wrap > .bottom {
  display: none;
}
.mdl_case_scroll_a.is_ready:not(.is_single) > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
}
@container (max-width: 1024px) {
  .mdl_case_scroll_a {
    height: auto;
  }
  .mdl_case_scroll_a > .wrap {
    position: relative;
    height: auto;
  }
  .mdl_case_scroll_a > .wrap > .list {
    --bleed: calc((100vw - 100cqi) / 2);
    margin-inline: calc(-1 * var(--bleed));
    padding-inline: var(--bleed);
    scroll-padding-inline: var(--bleed);
  }
  .mdl_case_scroll_a > .wrap > .list > .item {
    flex-basis: 85cqi;
  }
  .mdl_case_scroll_a > .wrap > .hdr > .controls {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .mdl_case_scroll_a > .wrap > .hdr > .controls > .num {
    margin-right: 0.75rem;
  }
  .mdl_case_scroll_a > .wrap > .hdr > .controls > .prt_btn_b {
    display: flex;
  }
  .mdl_case_scroll_a > .wrap > .hdr > .controls > .prt_btn_a {
    margin-left: 0.75rem;
  }
}

/* ==========================================================================
   Module: mdl_team_carousel_a - Team carousel (e.g. "25+ Years of Digital
   Experience" on a service page)
   - .hdr: a huge number filled with the accent stripe pattern (text clipped
     to stripes()), title + description, square prev/next (prt_btn_b).
   - .list: blk_person_card_a cards (tall); the first can carry a quote and is
     wider (.is_wide) with its photo breaking out above the card. Row bleeds
     off both screen edges (first card on the container line at rest), no CSS snapping
     (settles on a card after a drag, via npgCarousel); core.js mdlTeamCarouselA = prev/next +
     mouse drag (shared npgCarousel helper). Swipe/trackpad scroll natively.
   - x-line under the row.
   ========================================================================== */
.mdl_team_carousel_a {
  --gap: 1.5rem;
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-block: 6rem;
}
.mdl_team_carousel_a > .hdr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 3rem;
}
.mdl_team_carousel_a > .hdr > .num {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: clamp(8.75rem, 4.8369565217rem + 13.0434782609cqi, 16.25rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(-45deg, var(--var_acnt_clr_a) 0, var(--var_acnt_clr_a) 1.5px, transparent 1.5px, transparent calc(50% - 1.5px), var(--var_acnt_clr_a) calc(50% - 1.5px), var(--var_acnt_clr_a) calc(50% + 1.5px), transparent calc(50% + 1.5px), transparent calc(100% - 1.5px), var(--var_acnt_clr_a) calc(100% - 1.5px), var(--var_acnt_clr_a) 100%) 0 0/10px 10px;
  -webkit-background-clip: text;
  background-clip: text;
}
.mdl_team_carousel_a > .hdr > .body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 36rem;
}
.mdl_team_carousel_a > .hdr > .body > .title {
  margin: 0;
  font-size: clamp(1.875rem, 1.4184782609rem + 1.5217391304cqi, 2.75rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_team_carousel_a > .hdr > .body > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.mdl_team_carousel_a > .hdr > .controls {
  display: flex;
  gap: 0.75rem;
  align-self: end;
}
.mdl_team_carousel_a > .list {
  --bleed: calc((100vw - 100cqi) / 2);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(30rem, 82cqi);
  gap: var(--gap);
  margin: calc(-1 * 4rem) calc(-1 * var(--bleed)) 0;
  padding: 4rem var(--bleed) 0.5rem;
  scroll-padding-inline: var(--bleed);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.mdl_team_carousel_a > .list::-webkit-scrollbar {
  display: none;
}
.mdl_team_carousel_a > .list:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 4px;
}
.mdl_team_carousel_a > .list.is_dragging {
  cursor: grabbing;
  user-select: none;
}
.mdl_team_carousel_a > .list > .item {
  container-type: inline-size;
}
.mdl_team_carousel_a > .list > .item.is_wide {
  grid-column: span 2;
}
.mdl_team_carousel_a > .prt_dec_xline_a {
  width: min(100%, 32rem);
}
@container (max-width: 1024px) {
  .mdl_team_carousel_a > .hdr {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 2rem;
    row-gap: 1.5rem;
  }
  .mdl_team_carousel_a > .hdr > .controls {
    grid-column: 2;
    justify-self: start;
  }
  .mdl_team_carousel_a > .list > .item.is_wide {
    grid-column: span 1;
  }
  .mdl_team_carousel_a > .list {
    grid-auto-columns: calc((100cqi - 2 * var(--gap)) / 2.25);
  }
}
@container (max-width: 645px) {
  .mdl_team_carousel_a > .hdr {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_team_carousel_a > .hdr > .controls {
    grid-column: auto;
  }
  .mdl_team_carousel_a > .list {
    grid-auto-columns: min(30rem, 82cqi);
  }
}
@container (max-width: 1024px) {
  .mdl_team_carousel_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_team_carousel_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_process_a - Process timeline (ticker)
   Header (label, title, description, counter "01 / 06"), then a row of
   blk_step_a laid end to end so their rulers read as one continuous ruler,
   with an accent needle starting on the container's left edge. Desktop: the
   section pins (sticky .wrap, one screen tall) and scrolling moves the row
   sideways until it is flush with the container's right edge while the
   needle glides from step to step; core.js mdlProcessA sets the height
   (--h = one screen + the row's overflow), the row's and the needle's
   translateX, the counter, and the steps' states (is_active at the needle,
   is_muted for the rest). md and
   below, no JS or reduced motion: a swipeable row, nothing pinned or muted.
   The row starts on the container edge and runs off the right screen edge.
   Option `person`: a large tinted photo (prt_person_a, `--ratio` = its
   shape, `flip` mirrors it) with a name badge, bottom-anchored on the right
   behind the header and ticker (.dec_a); hidden at md.
   ========================================================================== */
.mdl_process_a {
  position: relative;
  height: var(--h, auto);
}
.mdl_process_a > .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  min-height: min(100svh, 56rem);
  padding-block: 4rem;
}
@container (max-width: 1024px) {
  .mdl_process_a > .wrap > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_process_a > .wrap > .dec_a {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 94%;
  aspect-ratio: var(--ratio);
  max-width: 62%;
  pointer-events: none;
}
.mdl_process_a > .wrap > .dec_a > .prt_person_a {
  width: 100%;
  height: 100%;
}
.mdl_process_a > .wrap > .dec_a.flip > .prt_person_a {
  scale: -1 1;
  --tag-flip: -1;
}
.mdl_process_a > .wrap > .dec_a > .prt_bdg_a {
  position: absolute;
  top: 18%;
  right: 62%;
  width: max-content;
}
@container (max-width: 1024px) {
  .mdl_process_a > .wrap > .dec_a {
    display: none !important;
  }
}
.mdl_process_a > .wrap > .hdr,
.mdl_process_a > .wrap > .track {
  z-index: 1;
}
.mdl_process_a > .wrap > .hdr {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.mdl_process_a > .wrap > .hdr > .body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mdl_process_a > .wrap > .hdr > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_process_a > .wrap > .hdr > .body > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_process_a > .wrap > .hdr > .body > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_process_a > .wrap > .hdr > .body > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_process_a > .wrap > .hdr > .controls > .num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--var_txt_clr_b);
}
.mdl_process_a > .wrap > .hdr > .controls > .num > .label {
  color: var(--var_acnt_clr_a);
}
.mdl_process_a > .wrap > .hdr > .controls > .prt_btn_b {
  display: none;
}
.mdl_process_a > .wrap > .track {
  position: relative;
}
.mdl_process_a > .wrap > .track > .needle {
  position: absolute;
  top: -0.5rem;
  left: 0;
  z-index: 2;
  width: 2px;
  height: calc(2.5rem + 0.5rem + 2rem + 0.75rem);
  background: var(--var_acnt_clr_a);
  will-change: transform;
}
.mdl_process_a > .wrap > .track > .needle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.75rem;
  aspect-ratio: 1;
  background: var(--var_acnt_clr_a);
  translate: -50% -50%;
}
.mdl_process_a > .wrap > .track > .list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.mdl_process_a > .wrap > .track > .list > .item {
  flex: 0 0 min(32rem, 44cqi);
}
.mdl_process_a.is_ready > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
}
.mdl_process_a:not(.is_ready) > .wrap > .track > .list {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.mdl_process_a:not(.is_ready) > .wrap > .track > .list::-webkit-scrollbar {
  display: none;
}
.mdl_process_a:not(.is_ready) > .wrap > .track > .list > .item {
  scroll-snap-align: start;
}
@container (max-width: 1024px) {
  .mdl_process_a {
    height: auto;
  }
  .mdl_process_a > .wrap > .hdr > .controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .mdl_process_a > .wrap > .hdr > .controls > .num {
    margin-right: 0.75rem;
  }
  .mdl_process_a > .wrap > .hdr > .controls > .prt_btn_b {
    display: flex;
  }
  .mdl_process_a > .wrap > .track > .list {
    --bleed: calc((100vw - 100cqi) / 2);
    margin-inline: calc(-1 * var(--bleed));
    padding-inline: var(--bleed);
    scroll-padding-inline: var(--bleed);
  }
  .mdl_process_a > .wrap > .track > .list > .item {
    flex-basis: 80cqi;
  }
}

/* ==========================================================================
   Module: mdl_hdr_a - Global header (navigation)
   A centered frosted bar (.wrap_a): one bordered box of cells split by
   thin lines — links (side_a) | the animated logo | links (side_b); each
   side's cells stretch to fill their half so the logo stays centered. A dropdown item is a button that
   opens its panel (.body, a sibling of the bar so it spans the full width):
   a full-width grid of blk_nav_group_a cells (equal columns, dashed lines
   between them and across the top / bottom; a cell may span columns,
   --cols), optionally a strip under it with a button (.bottom). Behind the bar a
   frosted band (.dec_a) grows to the open panel's height (--panel-h) and a
   veil (.dec_b) blurs and tints the page below.
   States (core.js mdlHdrA): is_open (+ is_active on the open panel and its
   button's item), is_hidden (scrolling down), is_scrolled, is_menu (full
   menu below md). The header row takes the theme of the section under the
   bar (core.js swaps its thm_* class), so the colors follow the page.
   Page placement: partials/header.php puts it in a fixed row (uti_fixed);
   the row ignores the pointer, the bar, open panels and the menu take it.
   Below md: logo + menu button (MENU + prt_burger_a); the menu (.wrap_b, see
   "Full menu") is a screen-tall panel of numbered link cells.
   Colors: --var_hdr_a_bg_clr (bar), --var_hdr_a_panel_clr (band, menu),
   --var_hdr_a_txt_clr (links), --var_hdr_a_logo_clr (logo brackets),
   --var_hdr_a_icn_clr (icons, arrows, accents), --var_hdr_a_link_clr (cell
   links), --var_hdr_a_line_clr (dashed lines), --var_hdr_a_hvr_clr (cell
   hover tint)
   ========================================================================== */
.mdl_hdr_a {
  --panel-h: 0px;
  --var_acnt_clr_a: var(--var_hdr_a_icn_clr);
  --var_bdr_clr_a: var(--var_hdr_a_line_clr);
  position: relative;
  isolation: isolate;
  padding-top: 1rem;
  color: var(--var_hdr_a_txt_clr);
}
.mdl_hdr_a > .wrap_a {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  width: max-content;
  margin: 0 auto;
  padding: 0;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 4px;
  background: var(--var_hdr_a_bg_clr);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.mdl_hdr_a > .wrap_a > .list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_hdr_a > .wrap_a > .list > .item {
  flex: 1 1 auto;
  display: flex;
}
.mdl_hdr_a > .wrap_a > .list > .item + .item {
  border-left: 1px solid var(--var_bdr_clr_a);
}
.mdl_hdr_a > .wrap_a > .list > .item > .link,
.mdl_hdr_a > .wrap_a > .list > .item > .hdr,
.mdl_hdr_a > .wrap_a > .list > .item > .hdr_link {
  --var_icn_a_clr: currentColor;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border: 0;
  background: none;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.mdl_hdr_a > .wrap_a > .list > .item > .link:hover,
.mdl_hdr_a > .wrap_a > .list > .item > .hdr:hover,
.mdl_hdr_a > .wrap_a > .list > .item > .hdr_link:hover {
  background: var(--var_hdr_a_hvr_clr);
  text-decoration: none;
}
.mdl_hdr_a > .wrap_a > .list > .item > .link:focus-visible,
.mdl_hdr_a > .wrap_a > .list > .item > .hdr:focus-visible,
.mdl_hdr_a > .wrap_a > .list > .item > .hdr_link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.mdl_hdr_a > .wrap_a > .list > .item > .hdr > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  transition: rotate 0.3s ease;
}
.mdl_hdr_a > .wrap_a > .list > .item > .hdr_link {
  justify-content: flex-end;
  padding-right: 0.25rem;
}
.mdl_hdr_a > .wrap_a > .list > .item > .hdr.is_split {
  justify-content: flex-start;
  padding-left: 0.25rem;
}
.mdl_hdr_a > .wrap_a > .list > .item:has(> .hdr_link):hover > *, .mdl_hdr_a > .wrap_a > .list > .item.is_active > .hdr_link {
  background: var(--var_hdr_a_hvr_clr);
}
.mdl_hdr_a > .wrap_a > .list > .item > .link > .prt_icn_a {
  transition: none;
}
.mdl_hdr_a > .wrap_a > .list > .item > .link.cell {
  --var_icn_a_clr: var(--var_acnt_clr_a);
}
.mdl_hdr_a > .wrap_a > .list > .item.is_active > .hdr {
  background: var(--var_hdr_a_hvr_clr);
}
.mdl_hdr_a > .wrap_a > .list > .item.is_active > .hdr > .prt_icn_a {
  rotate: 180deg;
}
.mdl_hdr_a > .wrap_a > .logo {
  --var_acnt_clr_a: var(--var_hdr_a_logo_clr);
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-inline: 1px solid var(--var_bdr_clr_a);
  line-height: 0;
}
.mdl_hdr_a > .wrap_a > .logo > .prt_logo_a {
  width: 4.25rem;
}
.mdl_hdr_a > .wrap_a > .logo:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 4px;
}
.mdl_hdr_a > .wrap_a > .controls {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: none;
  align-items: center;
  align-self: stretch;
  gap: 0.75rem;
  padding: 0 1rem;
  border: 0;
  border-left: 1px solid var(--var_bdr_clr_a);
  background: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  transition: background 0.25s ease;
}
.mdl_hdr_a > .wrap_a > .controls:hover {
  background: var(--var_hdr_a_hvr_clr);
}
.mdl_hdr_a > .wrap_a > .controls:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.mdl_hdr_a > .wrap_a > .controls > .label {
  display: grid;
}
.mdl_hdr_a > .wrap_a > .controls > .label > span {
  grid-area: 1/1;
  text-align: right;
  transition: opacity 0.2s ease, translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mdl_hdr_a > .wrap_a > .controls > .label > span:last-child {
  opacity: 0;
  translate: 0 40%;
}
.mdl_hdr_a > .body {
  --var_txt_clr_a: var(--var_hdr_a_link_clr);
  --cell-hvr: var(--var_hdr_a_hvr_clr);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding-top: calc(1rem + 5rem);
  visibility: hidden;
  opacity: 0;
  translate: 0 -0.5rem;
  pointer-events: none;
  transition: opacity 0.25s ease, translate 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
}
.mdl_hdr_a > .body > .list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  border-block: 1px dashed var(--var_bdr_clr_a);
  list-style: none;
  pointer-events: auto;
}
.mdl_hdr_a > .body > .list > .item {
  grid-column: span var(--cols, 1);
  min-width: 0;
}
.mdl_hdr_a > .body > .list > .item + .item {
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_hdr_a > .body > .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px dashed var(--var_bdr_clr_a);
  pointer-events: auto;
}
.mdl_hdr_a > .body > .bottom > .des {
  margin: 0;
  font-size: 0.875rem;
  color: var(--var_txt_clr_b);
}
.mdl_hdr_a > .body.is_active {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.3s ease 0.05s, translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.mdl_hdr_a > .dec_a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: var(--panel-h);
  background: color-mix(in srgb, var(--var_hdr_a_panel_clr) 82%, transparent);
  backdrop-filter: blur(20px) saturate(1.2);
  opacity: 0;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.mdl_hdr_a > .dec_b {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -2;
  height: 100svh;
  background: color-mix(in srgb, var(--var_hdr_a_txt_clr) 12%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mdl_hdr_a > .wrap_b {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: none;
  height: 100svh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(1rem + 5rem + 0.5rem) 1rem 3rem;
  background: var(--var_hdr_a_panel_clr);
  color: var(--var_hdr_a_txt_clr);
  pointer-events: auto;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.28s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.28s;
}
.mdl_hdr_a > .wrap_b > .nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 100%;
}
.mdl_hdr_a > .wrap_b > .nav > .prt_dec_grid_a {
  z-index: 0;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  translate: 0 1rem;
  transition: opacity 0.2s ease, clip-path 0.2s ease, translate 0.2s ease;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a,
.mdl_hdr_a > .wrap_b > .nav > .list_b {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--var_bdr_clr_a);
  border-left: 1px solid var(--var_bdr_clr_a);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item {
  border-right: 1px solid var(--var_bdr_clr_a);
  border-bottom: 1px solid var(--var_bdr_clr_a);
  background: var(--var_hdr_a_panel_clr);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .link,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .hdr {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 0 1rem;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link::before,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr::before,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .link::before,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--var_acnt_clr_a);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link:hover, .mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link:focus-visible,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr:hover,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr:focus-visible,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .link:hover,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .link:focus-visible,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .hdr:hover,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .hdr:focus-visible {
  --var_icn_a_clr: currentColor;
  color: var(--var_hdr_a_panel_clr);
  text-decoration: none;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link:hover::before, .mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link:focus-visible::before,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr:hover::before,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr:focus-visible::before,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .link:hover::before,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .link:focus-visible::before,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .hdr:hover::before,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .hdr:focus-visible::before {
  transform: scaleY(1);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link:focus-visible,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr:focus-visible,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .link:focus-visible,
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .hdr:focus-visible {
  outline: 2px solid var(--var_hdr_a_panel_clr);
  outline-offset: -6px;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a {
  grid-template-columns: minmax(0, 1fr);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr {
  min-height: 5rem;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link > .num,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr > .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  opacity: 0.6;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link > .name,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr > .name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-header);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: clamp(1.5rem, 1.2391304348rem + 0.8695652174cqi, 2rem);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .link > .prt_icn_a,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr > .prt_icn_a {
  transition: rotate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr:not(.is_full) {
  justify-content: center;
  width: 5rem;
  padding: 0;
  border-left: 1px solid var(--var_bdr_clr_a);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .hdr.is_full,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body {
  grid-column: 1/-1;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_expanded > .hdr > .prt_icn_a {
  rotate: 180deg;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list {
  min-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item > .link {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1rem 1rem 3rem;
  color: inherit;
  text-decoration: none;
  transition: background 0.25s ease;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item > .link:hover {
  background: var(--var_hdr_a_hvr_clr);
  text-decoration: none;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item > .link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item > .link > .prt_icn_a {
  margin-top: 0.125rem;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item > .link > .txt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item > .link > .txt > .name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item > .link > .txt > .des {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--var_txt_clr_b);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_expanded > .body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.mdl_hdr_a > .wrap_b > .nav > .list_b {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item {
  display: flex;
}
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item:last-child:nth-child(odd) {
  grid-column: 1/-1;
}
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .link {
  flex: 1 1 auto;
  gap: 0.75rem;
  min-height: 4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item > .link > .label {
  flex: 1 1 auto;
}
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item:first-child > .link {
  --var_icn_a_clr: currentColor;
  background: var(--var_btn_c_bg_clr);
  color: var(--var_btn_c_txt_clr);
}
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item:first-child > .link::before {
  background: var(--var_btn_c_hvr_bg_clr);
}
.mdl_hdr_a > .wrap_b > .nav > .list_b > .item:first-child > .link:hover, .mdl_hdr_a > .wrap_b > .nav > .list_b > .item:first-child > .link:focus-visible {
  color: var(--var_btn_c_hvr_txt_clr);
}
.mdl_hdr_a.is_open > .dec_a,
.mdl_hdr_a.is_open > .dec_b {
  opacity: 1;
}
.mdl_hdr_a.is_open > .wrap_a {
  background: transparent;
  backdrop-filter: none;
}
.mdl_hdr_a.is_hidden > .wrap_a {
  translate: 0 calc(-100% - 1.5rem);
}
.mdl_hdr_a.is_menu > .wrap_b {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path 0.38s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}
.mdl_hdr_a.is_menu > .wrap_b > .nav > .list_a > .item,
.mdl_hdr_a.is_menu > .wrap_b > .nav > .list_b > .item {
  opacity: 1;
  clip-path: inset(0);
  translate: 0 0;
  transition: opacity 0.48s cubic-bezier(0.55, 0, 0.1, 1), clip-path 0.48s cubic-bezier(0.55, 0, 0.1, 1), translate 0.48s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: calc(140ms + var(--i, 0) * 50ms);
}
.mdl_hdr_a.is_menu > .wrap_a > .controls > .label > span:first-child {
  opacity: 0;
  translate: 0 -40%;
}
.mdl_hdr_a.is_menu > .wrap_a > .controls > .label > span:last-child {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .mdl_hdr_a > .wrap_a,
  .mdl_hdr_a > .wrap_a > .list > .item > .hdr > .prt_icn_a,
  .mdl_hdr_a > .wrap_a > .controls > .label > span,
  .mdl_hdr_a > .body,
  .mdl_hdr_a > .dec_a,
  .mdl_hdr_a > .dec_b,
  .mdl_hdr_a > .wrap_b,
  .mdl_hdr_a > .wrap_b > .nav > .list_a > .item,
  .mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body,
  .mdl_hdr_a > .wrap_b > .nav > .list_b > .item, .mdl_hdr_a.is_menu > .wrap_b, .mdl_hdr_a.is_menu > .wrap_b > .nav > .list_a > .item, .mdl_hdr_a.is_menu > .wrap_b > .nav > .list_b > .item {
    transition: none;
  }
}
@container (max-width: 1024px) {
  .mdl_hdr_a > .wrap_a {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 2rem);
  }
  .mdl_hdr_a > .wrap_a > .logo {
    border-inline: 0;
  }
  .mdl_hdr_a > .wrap_a > .list {
    display: none;
  }
  .mdl_hdr_a > .wrap_a > .controls {
    display: inline-flex;
  }
  .mdl_hdr_a > .wrap_b {
    display: block;
  }
  .mdl_hdr_a > .body,
  .mdl_hdr_a > .dec_a,
  .mdl_hdr_a > .dec_b {
    display: none;
  }
}
.mdl_hdr_a > .wrap_a > .list > .item.is_current {
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) 0, color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) 100%) 0 0/8px 8px;
  animation: mdl_hdr_a_current 1.6s linear infinite;
}
.mdl_hdr_a > .wrap_a > .list > .item.is_current > .link,
.mdl_hdr_a > .wrap_a > .list > .item.is_current > .hdr_link,
.mdl_hdr_a > .wrap_a > .list > .item.is_current > .hdr {
  font-weight: 700;
  color: var(--var_hdr_clr_a);
}
.mdl_hdr_a > .wrap_a > .list > .item.is_current > .link > .label,
.mdl_hdr_a > .wrap_a > .list > .item.is_current > .hdr_link > .label,
.mdl_hdr_a > .wrap_a > .list > .item.is_current > .hdr > .label {
  position: relative;
  z-index: 0;
}
.mdl_hdr_a > .wrap_a > .list > .item.is_current > .link > .label::before,
.mdl_hdr_a > .wrap_a > .list > .item.is_current > .hdr_link > .label::before,
.mdl_hdr_a > .wrap_a > .list > .item.is_current > .hdr > .label::before {
  content: "";
  position: absolute;
  inset: 38% -0.35em 4% -0.3em;
  z-index: -1;
  background: color-mix(in srgb, var(--var_hdr_a_icn_clr) 34%, transparent);
  border-radius: 0.4em 0.15em 0.5em 0.2em/0.3em 0.5em 0.2em 0.45em;
  rotate: -1.5deg;
  clip-path: polygon(1% 18%, 99% 0, 100% 78%, 97% 100%, 3% 92%, 0 60%);
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_current > .link,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_current > .hdr,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item.is_current > .link {
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) 0, color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_a_icn_clr) 22%, transparent) 100%) 0 0/8px 8px;
  animation: mdl_hdr_a_current 1.6s linear infinite;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_current > .link > .name,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_current > .hdr > .name,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item.is_current > .link > .txt > .name {
  font-weight: 700;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_current > .link > .num {
  color: var(--var_acnt_clr_a);
  opacity: 1;
}
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_current > .link:hover > .num,
.mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_current > .link:focus-visible > .num {
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .mdl_hdr_a > .wrap_a > .list > .item.is_current,
  .mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_current > .link,
  .mdl_hdr_a > .wrap_b > .nav > .list_a > .item.is_current > .hdr,
  .mdl_hdr_a > .wrap_b > .nav > .list_a > .item > .body > .list > .item.is_current > .link {
    animation: none;
  }
}

@keyframes mdl_hdr_a_current {
  to {
    background-position: 8px 0;
  }
}
/* ==========================================================================
   Module: mdl_process_b - Process, vertical (bracket frame + stacking cards)
   The 7 container grid lines behind everything; a centered intro (label,
   title, description); then .content: a pinned, one-screen stage (.dec_a,
   sticky) with the giant striped step number on the left (.dec_g, the
   active one shown — it ticks, no fade), a ring ticker centered behind the cards (.dec_c: an SVG of
   ticks all round, a step label every 360° / steps — the active one in accent — and
   an accent arc + square marker sweeping round on --line), a center line (.dec_b) growing down (--line), a spinning
   circle half off the right screen edge, dots, and a compact bracket frame
   (.wrap: two prt_dec_bracket_a) sized to the card stack that opens from
   the center (--open). The step cards (blk_process_card_a) scroll over the
   stage and stick in the middle, each a step lower (--i), stacking inside
   the frame; the first is already in place when the stage pins and fades /
   rises in as the brackets open (--intro). At the end the stage rests on
   the last card (brackets open) until it scrolls away.
   core.js mdlProcessB sets --open / --line; without JS or with reduced
   motion both are 1. Below md: no stage, the cards are a plain list.
   ========================================================================== */
.mdl_process_b {
  --card-h: 22rem;
  position: relative;
  padding-block: 6rem 4rem;
}
.mdl_process_b.is_long {
  --card-h: 27rem;
}
@container (max-width: 1024px) {
  .mdl_process_b > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_process_b > .hdr {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}
.mdl_process_b > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_process_b > .hdr > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_process_b > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_process_b > .hdr > .des {
  max-width: 48rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_process_b > .hdr > .prt_btn_a {
  margin-top: 0.75rem;
}
.mdl_process_b > .content {
  --open: 1;
  --intro: 1;
  --line: 1;
  position: relative;
  margin-top: 2rem;
}
.mdl_process_b > .content > .dec_a {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  pointer-events: none;
}
.mdl_process_b > .content > .dec_a > .dec_b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--var_acnt_clr_a);
  translate: -50% 0;
  transform: scaleY(var(--line));
  transform-origin: top center;
}
.mdl_process_b > .content > .dec_a > .prt_dec_circle_a {
  --size: 30rem;
  position: absolute;
  top: 50%;
  right: calc((100% - 100vw) / 2);
  transform: translate(50%, -50%);
}
.mdl_process_b > .content > .dec_a > .prt_dec_dots_a {
  position: absolute;
  top: 4rem;
  right: 0;
}
.mdl_process_b > .content > .dec_a > .dec_g {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: grid;
  translate: 0 -50%;
}
.mdl_process_b > .content > .dec_a > .dec_g > .num {
  grid-area: 1/1;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: clamp(5rem, 2.3913043478rem + 8.6956521739cqi, 10rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(-45deg, var(--var_acnt_clr_a) 0, var(--var_acnt_clr_a) 1.5px, transparent 1.5px, transparent calc(50% - 1.5px), var(--var_acnt_clr_a) calc(50% - 1.5px), var(--var_acnt_clr_a) calc(50% + 1.5px), transparent calc(50% + 1.5px), transparent calc(100% - 1.5px), var(--var_acnt_clr_a) calc(100% - 1.5px), var(--var_acnt_clr_a) 100%) 0 0/10px 10px;
  -webkit-background-clip: text;
  background-clip: text;
  visibility: hidden;
}
.mdl_process_b > .content > .dec_a > .dec_g > .num.is_active {
  visibility: visible;
}
.mdl_process_b > .content > .dec_a > .dec_c {
  --ring: min(60svh, 34rem);
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ring);
  aspect-ratio: 1;
  translate: -50% -50%;
}
.mdl_process_b > .content > .dec_a > .dec_c > .dec_d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}
.mdl_process_b > .content > .dec_a > .dec_c > .dec_d .dial {
  transform-box: view-box;
  transform-origin: 50% 50%;
  rotate: calc(var(--line) * -540deg);
}
.mdl_process_b > .content > .dec_a > .dec_c > .dec_d .minor {
  stroke: color-mix(in srgb, var(--var_txt_clr_b) 55%, transparent);
  stroke-width: 0.6;
}
.mdl_process_b > .content > .dec_a > .dec_c > .dec_d .major {
  stroke: var(--var_hdr_clr_a);
  stroke-width: 1.2;
}
.mdl_process_b > .content > .dec_a > .dec_c > .dec_d .track {
  stroke: var(--var_bdr_clr_a);
  stroke-width: 0.6;
}
.mdl_process_b > .content > .dec_a > .dec_c > .dec_d .arc {
  stroke: var(--var_acnt_clr_a);
  stroke-width: 0.9;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--line) * 100);
}
.mdl_process_b > .content > .dec_a > .dec_c > .dec_d line,
.mdl_process_b > .content > .dec_a > .dec_c > .dec_d .track {
  vector-effect: non-scaling-stroke;
}
.mdl_process_b > .content > .dec_a > .dec_c > .dec_f {
  position: absolute;
  inset: 7%;
  rotate: calc(var(--line) * 360deg);
}
.mdl_process_b > .content > .dec_a > .dec_c > .dec_f::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.75rem;
  aspect-ratio: 1;
  background: var(--var_acnt_clr_a);
  translate: -50% -50%;
}
.mdl_process_b > .content > .dec_a > .dec_c > .list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_process_b > .content > .dec_a > .dec_c > .list > .item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(var(--a)) translateY(calc(var(--ring) / -2 - 1rem)) rotate(calc(var(--a) * -1));
}
.mdl_process_b > .content > .dec_a > .dec_c > .list > .item > .label {
  display: block;
  padding: 0.25rem 0.5rem;
  background: var(--var_bg_a);
  translate: -50% -50%;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--var_txt_clr_b);
  transition: color 0.4s ease;
}
.mdl_process_b > .content > .dec_a > .dec_c > .list > .item.is_active > .label {
  color: var(--var_acnt_clr_a);
}
.mdl_process_b > .content > .dec_a > .wrap {
  position: relative;
  width: calc(min(46rem, 100% - 1.75rem * 2 - 4rem) + 1.75rem * 2 + 3rem);
  height: calc(var(--card-h) + calc(0.75rem * 5) + 4rem);
  translate: 0 calc(calc(0.75rem * 5) / -2);
}
.mdl_process_b > .content > .dec_a > .wrap > .prt_dec_bracket_a {
  --size: 1.75rem;
  position: absolute;
  top: 0;
}
.mdl_process_b > .content > .dec_a > .wrap > .prt_dec_bracket_a:first-child {
  left: calc((1 - var(--open)) * (50% - 1.75rem));
}
.mdl_process_b > .content > .dec_a > .wrap > .prt_dec_bracket_a.right {
  right: calc((1 - var(--open)) * (50% - 1.75rem));
}
.mdl_process_b > .content > .list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60svh;
  margin: -100svh 0 0;
  padding: calc(50svh - var(--card-h) / 2) 0;
}
.mdl_process_b > .content > .list::after {
  content: "";
  height: 20svh;
}
.mdl_process_b > .content > .list {
  list-style: none;
}
.mdl_process_b > .content > .list > .item {
  --k: 1;
  --behind: 0;
  position: sticky;
  top: calc(50svh - var(--card-h) / 2);
  width: min(46rem, 100% - 1.75rem * 2 - 4rem);
  opacity: var(--k);
  transform: translateY(calc((1 - var(--k)) * 2rem - var(--behind) * 0.75rem));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.mdl_process_b > .content > .list > .item:first-child {
  --k: var(--intro);
}
.mdl_process_b > .content > .list > .item > .blk_process_card_a {
  height: var(--card-h);
}
@media (prefers-reduced-motion: reduce) {
  .mdl_process_b > .content > .list > .item {
    transition: none;
  }
}
@container (max-width: 1024px) {
  .mdl_process_b {
    padding-block: 4rem;
  }
  .mdl_process_b > .content > .dec_a {
    display: none;
  }
  .mdl_process_b > .content > .list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
  }
  .mdl_process_b > .content > .list::after {
    display: none;
  }
  .mdl_process_b > .content > .list > .item {
    position: relative;
    top: auto;
    width: 100%;
    margin: 0;
    opacity: 1;
    transform: none;
  }
  .mdl_process_b > .content > .list > .item > .blk_process_card_a {
    height: auto;
  }
}
@container (max-width: 1024px) {
  .mdl_process_b {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_process_b {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_jobs_a - Current openings
   The 7 container grid lines behind; a centered intro (title, description);
   then one row per department on a 6-column grid that matches the lines:
   the department name (sticky) on the first 2 columns, its job cards
   (blk_job_card_a) across the last 4 as cells (no gaps, shared borders);
   dashed lines between the rows. Intro flush left. Stacks (name above its cards) at md.
   ========================================================================== */
.mdl_jobs_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_jobs_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_jobs_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_jobs_a > .hdr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 40rem;
  margin: 0 0 4rem;
}
.mdl_jobs_a > .hdr > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_jobs_a > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_jobs_a > .hdr > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_jobs_a > .list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_jobs_a > .list > .item {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-block: 3rem;
}
.mdl_jobs_a > .list > .item + .item {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_jobs_a > .list > .item > .name {
  grid-column: 1/span 2;
  position: sticky;
  top: 7rem;
  align-self: start;
  margin: 0;
  padding-right: 2rem;
  font-size: clamp(1.125rem, 0.9945652174rem + 0.4347826087cqi, 1.375rem);
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.mdl_jobs_a > .list > .item > .list {
  grid-column: 3/span 4;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_jobs_a > .list > .item > .list > .item + .item > .blk_job_card_a {
  margin-top: -1px;
}
@container (max-width: 1024px) {
  .mdl_jobs_a {
    padding-block: 4rem;
  }
  .mdl_jobs_a > .list > .item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }
  .mdl_jobs_a > .list > .item > .name,
  .mdl_jobs_a > .list > .item > .list {
    grid-column: auto;
  }
  .mdl_jobs_a > .list > .item > .name {
    position: static;
  }
}

/* ==========================================================================
   Module: mdl_hero_e - Compact page hero (no photo)
   A short hero for simple pages: the side bar, the 7 container grid lines,
   and on the container a label (mono), the animated logo, the title and a
   short intro across the first 4 of 6 grid columns; on the right (last 2
   columns) isometric art (an iso_art slot the CMS's ISO Agent fills, made
   from the title; art: false leaves it out) over a drawing x-line at the
   bottom; dots top right, behind the art. Height: content + room for the
   fixed header (min 28rem), not a full screen. Use on a full-bleed row
   (grd_col_wrap.type-full). Stacks / drops decorations (the art too) at md.
   Colors: --var_hero_e_ink_clr (intro, side bar text), --var_hero_e_logo_clr
   (logo brackets)
   ========================================================================== */
.mdl_hero_e {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 28rem;
  overflow: hidden;
}
.mdl_hero_e > .blk_side_bar_a {
  --var_bg_b: var(--var_bg_a);
  --var_txt_clr_a: var(--var_hero_e_ink_clr);
  --var_bdr_clr_a: color-mix(in srgb, var(--var_hero_e_ink_clr) 20%, transparent);
}
.mdl_hero_e > .prt_dec_grid_a {
  --var_bdr_clr_a: color-mix(in srgb, var(--var_txt_clr_a) 22%, transparent);
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_hero_e > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_hero_e > .content {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  width: 100%;
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  padding-block: 8rem 4rem;
}
.mdl_hero_e > .content > .wrap {
  grid-column: 1/span 4;
  grid-row: 1/span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-left: 6rem;
}
.mdl_hero_e > .content > .wrap > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_hero_e_ink_clr);
}
.mdl_hero_e > .content > .wrap > .logo {
  --var_acnt_clr_a: var(--var_hero_e_logo_clr);
  width: 6rem;
}
.mdl_hero_e > .content > .wrap > .title {
  margin: 0;
  font-size: clamp(2.75rem, 1.8369565217rem + 3.0434782609cqi, 4.5rem);
  line-height: 1;
  color: var(--var_hdr_clr_a);
}
.mdl_hero_e > .content > .wrap > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_hero_e_ink_clr);
}
.mdl_hero_e > .content > .art {
  grid-column: 5/span 2;
  grid-row: 1;
  justify-self: start;
  width: min(100% - 2rem, 20rem);
  margin: 0 0 1.5rem 2rem;
}
.mdl_hero_e > .content > .art > .prt_layer_a {
  width: 100%;
}
.mdl_hero_e > .content > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_hero_e_ink_clr);
  --var_dec_xline_mark_alt_clr: color-mix(in srgb, var(--var_fg_a) 70%, transparent);
  --var_dec_xline_line_clr: var(--var_fg_a);
  grid-column: 5/span 2;
  grid-row: 2;
  padding-inline: 2rem;
  margin-bottom: 0.75rem;
}
.mdl_hero_e > .prt_dec_dots_a {
  --var_acnt_clr_a: var(--var_hero_e_ink_clr);
  position: absolute;
  top: 6rem;
  z-index: -1;
  right: max(2rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 0.5rem);
}
@container (max-width: 1024px) {
  .mdl_hero_e {
    min-height: 0;
  }
  .mdl_hero_e > .blk_side_bar_a {
    display: none;
  }
  .mdl_hero_e > .content {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 8rem 3rem;
  }
  .mdl_hero_e > .content > .wrap {
    grid-column: auto;
    grid-row: auto;
    padding-left: 0;
  }
  .mdl_hero_e > .content > .wrap > .logo {
    display: none;
  }
  .mdl_hero_e > .content > .art,
  .mdl_hero_e > .content > .prt_dec_xline_a {
    display: none;
  }
  .mdl_hero_e > .prt_dec_dots_a {
    display: none;
  }
}
@container (max-width: 645px) {
  .mdl_hero_e > .content {
    padding-block: 6rem 3rem;
  }
}

/* ==========================================================================
   Module: mdl_perks_a - Text + perk cells, two columns on the grid
   Six columns = the 7 container grid lines. Left half (cols 1–3): mono
   label, title (<mark> accent), paragraphs, a drawing x-line. Right half
   (cols 4–6): blk_perk_a cells in two columns with no gaps; the list draws
   top + left lines and each cell right + bottom, on the grid-line
   positions (the cells cover the grid lines). Stacks at md.
   ========================================================================== */
.mdl_perks_a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  padding-block: 6rem;
}
.mdl_perks_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_perks_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_perks_a > .side_a {
  grid-column: 1/span 3;
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 4rem;
}
.mdl_perks_a > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_perks_a > .side_a > .title {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 1.6086956522rem + 1.3043478261cqi, 2.75rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_perks_a > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_perks_a > .side_a > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_perks_a > .side_a > .prt_dec_xline_a {
  width: 100%;
  margin-top: 1.5rem;
}
.mdl_perks_a > .list {
  grid-column: 4/span 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_perks_a > .list > .item {
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
@container (max-width: 1024px) {
  .mdl_perks_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
    padding-block: 4rem;
  }
  .mdl_perks_a > .side_a,
  .mdl_perks_a > .list {
    grid-column: auto;
  }
  .mdl_perks_a > .side_a {
    position: static;
    padding-right: 0;
  }
}
@container (max-width: 645px) {
  .mdl_perks_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 1024px) {
  .mdl_perks_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_perks_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_job_a - Job detail
   Two halves on a full-bleed row: the left half is a full-height sticky
   panel (one screen, --var_bg_b) from the screen edge to the middle — side
   bar, animated logo, title, type (mono caps, clock), Apply Now and a
   drawing x-line, vertically centered; the right half scrolls: a back link
   and the posting as static blk_disclosure_a cards. The 7 container grid
   lines run over the panel (cards above them). Stacks at md (panel first,
   not sticky).
   ========================================================================== */
.mdl_job_a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.mdl_job_a > .prt_dec_grid_a {
  z-index: 1;
}
@container (max-width: 1024px) {
  .mdl_job_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_job_a > .side_b {
  position: relative;
  z-index: 2;
}
.mdl_job_a > .side_a {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100svh;
  background: var(--var_bg_b);
}
.mdl_job_a > .side_a > .blk_side_bar_a {
  --var_bg_b: transparent;
}
.mdl_job_a > .side_a > .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  padding-left: max(8rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 6rem);
  padding-right: 3rem;
  padding-top: 4rem;
}
.mdl_job_a > .side_a > .wrap > .logo {
  width: 7rem;
}
.mdl_job_a > .side_a > .wrap > .title {
  margin: 0;
  font-size: clamp(2.5rem, 1.7173913043rem + 2.6086956522cqi, 4rem);
  line-height: 1.02;
  color: var(--var_hdr_clr_a);
}
.mdl_job_a > .side_a > .wrap > .label {
  --var_icn_a_clr: var(--var_txt_clr_a);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: -0.75rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_job_a > .side_a > .wrap > .prt_dec_xline_a {
  width: min(100%, 32rem);
  margin-top: 2rem;
}
.mdl_job_a > .side_b {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2rem;
  padding: 8rem max(2rem, (100vw - var(--scrollbar-w, 0px) - 1400px) / 2) 6rem 3rem;
}
.mdl_job_a > .side_b > .list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
@container (max-width: 1024px) {
  .mdl_job_a {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_job_a > .side_a {
    position: relative;
    height: auto;
  }
  .mdl_job_a > .side_a > .blk_side_bar_a {
    display: none;
  }
  .mdl_job_a > .side_a > .wrap {
    padding: 6rem var(--page-inset, 0px) 3rem;
  }
  .mdl_job_a > .side_a > .wrap > .logo {
    display: none;
  }
  .mdl_job_a > .side_b {
    padding: 3rem var(--page-inset, 0px) 4rem;
  }
}

/* ==========================================================================
   Module: mdl_contact_b - Contact
   Six columns = the 7 container grid lines. Left (cols 1–2): mono label,
   title (<mark> accent), intro, drawing x-line, then the contact channels
   (blk_channel_a) as cells with shared dashed lines that grow to fill the
   column, so the last line meets the form's bottom edge. Right (cols 3–6):
   the project form (blk_form_a), dots peeking out behind its top right
   corner. Stacks at md.
   Modifier `lead`: the page's first section (no hero above): clears the
   fixed header and sets a larger page title (pass title_tag 'h1').
   ========================================================================== */
.mdl_contact_b {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-block: 6rem;
}
.mdl_contact_b > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_contact_b > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_contact_b > .dec_a {
  position: absolute;
  top: 3rem;
  right: -2rem;
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_contact_b > .dec_a {
    display: none !important;
  }
}
.mdl_contact_b > .side_a {
  grid-column: 1/span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.mdl_contact_b > .side_a > .label,
.mdl_contact_b > .side_a > .title,
.mdl_contact_b > .side_a > .des {
  padding-right: 2rem;
}
.mdl_contact_b > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_contact_b > .side_a > .title {
  margin: 0;
  font-size: clamp(1.75rem, 1.3586956522rem + 1.3043478261cqi, 2.5rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_contact_b > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_contact_b > .side_a > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_contact_b > .side_a > .prt_dec_xline_a {
  width: 100%;
  margin-block: 1rem 2rem;
  padding-right: 2rem;
}
.mdl_contact_b > .side_a > .list {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
  background: var(--var_bg_b);
}
.mdl_contact_b > .side_a > .list > .item {
  flex: 1;
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_contact_b > .side_b {
  grid-column: 3/span 4;
  display: flex;
  flex-direction: column;
}
.mdl_contact_b > .side_b > .blk_form_a {
  flex: 1;
}
.mdl_contact_b.lead {
  padding-top: 10rem;
}
.mdl_contact_b.lead > .side_a > .title {
  font-size: clamp(2.25rem, 1.4673913043rem + 2.6086956522cqi, 3.75rem);
  line-height: 1.05;
}
@container (max-width: 1024px) {
  .mdl_contact_b {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
    padding-block: 4rem;
  }
  .mdl_contact_b > .side_a,
  .mdl_contact_b > .side_b {
    grid-column: auto;
  }
  .mdl_contact_b.lead {
    padding-top: 8rem;
  }
  .mdl_contact_b > .side_a > .label,
  .mdl_contact_b > .side_a > .title,
  .mdl_contact_b > .side_a > .des,
  .mdl_contact_b > .side_a > .prt_dec_xline_a {
    padding-right: 0;
  }
  .mdl_contact_b > .side_a > .list {
    border-right: 1px dashed var(--var_bdr_clr_a);
  }
  .mdl_contact_b > .side_a > .list > .item {
    flex: none;
  }
}

/* ==========================================================================
   Module: mdl_service_body_a - Service page body in parts
   The 7 container grid lines behind. Optional heading (h2, <mark> accent).
   Then one part per row on a 6-column grid that matches the lines: the
   part's title (sticky) on the first 2 columns, its content on the last 4 —
   rich text (prt_prose_a, covering the grid lines under it) and numbered item cells, 2 across (2 grid columns
   each) with shared dashed lines (list: top + left, cell: right + bottom),
   a striped filler closing an odd row. Dashed lines between parts; a part
   without a title (`is_cont`) continues the one above. The optional note
   ("With agents") is the first part: a striped card with a mono label.
   Stacks (title above content) at md; cells one across at sm.
   ========================================================================== */
.mdl_service_body_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_service_body_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_service_body_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_service_body_a > .hdr {
  max-width: 44rem;
  margin-bottom: 4rem;
}
.mdl_service_body_a > .hdr > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_service_body_a > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_service_body_a > .list {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_service_body_a > .list > .item {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-block: 4rem;
}
.mdl_service_body_a > .list > .item + .item:not(.is_cont) {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_service_body_a > .list > .item.is_cont {
  padding-top: 0;
}
.mdl_service_body_a > .list > .item > .side_a {
  grid-column: 1/span 2;
  position: sticky;
  top: 7rem;
  align-self: start;
  padding-right: 3rem;
}
.mdl_service_body_a > .list > .item > .side_a > .title {
  margin: 0;
  font-size: clamp(1.375rem, 1.1141304348rem + 0.8695652174cqi, 1.875rem);
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
}
.mdl_service_body_a > .list > .item > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_service_body_a > .list > .item > .side_a > .dec_a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  margin-top: 2rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/12px 12px, var(--var_bg_a);
}
.mdl_service_body_a > .list > .item > .side_a > .dec_a > .prt_layer_a {
  width: min(78%, 18rem);
}
@container (max-width: 1024px) {
  .mdl_service_body_a > .list > .item > .side_a > .dec_a {
    display: none !important;
  }
}
.mdl_service_body_a > .list > .item > .side_b {
  grid-column: 3/span 4;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
  border-left: 1px dashed var(--var_bdr_clr_a);
  background: linear-gradient(to right, var(--var_bg_a) calc(100% - 1px), transparent 0);
}
.mdl_service_body_a > .list > .item > .side_b > .prt_prose_a,
.mdl_service_body_a > .list > .item > .side_b > .sub {
  padding-left: 2rem;
}
.mdl_service_body_a > .list > .item > .side_b > .sub {
  margin: 0;
  font-weight: 600;
  color: var(--var_hdr_clr_a);
}
.mdl_service_body_a > .list > .item > .side_b > .list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_service_body_a > .list > .item > .side_b > .list > .item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem;
  background: var(--var_bg_a);
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
  transition: background-color 0.3s ease;
}
.mdl_service_body_a > .list > .item > .side_b > .list > .item:hover {
  background: color-mix(in srgb, var(--var_bg_a) 94%, var(--var_hdr_clr_a));
}
.mdl_service_body_a > .list > .item > .side_b > .list > .item > .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--var_acnt_clr_a);
}
.mdl_service_body_a > .list > .item > .side_b > .list > .item > .title {
  margin: 0;
  font-size: clamp(1.0625rem, 0.964673913rem + 0.3260869565cqi, 1.25rem);
  line-height: 1.35;
  color: var(--var_hdr_clr_a);
}
.mdl_service_body_a > .list > .item > .side_b > .list > .item.is_short {
  justify-content: space-between;
  min-height: 11rem;
}
.mdl_service_body_a > .list > .item > .side_b > .list > .item.is_short > .title {
  font-size: clamp(1.1875rem, 1.0244565217rem + 0.5434782609cqi, 1.5rem);
  line-height: 1.3;
}
.mdl_service_body_a > .list > .item > .side_b > .list > .dec_a {
  padding: 0;
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
.mdl_service_body_a > .list > .item > .side_b > .list > .dec_a:hover {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
.mdl_service_body_a > .list > .item.note > .side_b {
  border-left: 0;
  background: none;
}
.mdl_service_body_a > .list > .item.note > .side_b > .wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem 2rem 2rem 3rem;
  border: 1px dashed var(--var_bdr_clr_a);
  background: linear-gradient(var(--var_acnt_clr_a), var(--var_acnt_clr_a)) 0 0/3px 100% no-repeat, linear-gradient(var(--var_bg_b), var(--var_bg_b));
}
.mdl_service_body_a > .list > .item.note > .side_b > .wrap > .label {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_service_body_a > .list > .item.note > .side_b > .wrap > .des {
  max-width: 60ch;
  margin: 0;
  font-family: var(--font-header);
  font-size: clamp(1.125rem, 0.9945652174rem + 0.4347826087cqi, 1.375rem);
  line-height: 1.5;
  color: var(--var_hdr_clr_a);
}
@container (max-width: 1024px) {
  .mdl_service_body_a {
    padding-block: 4rem;
  }
  .mdl_service_body_a > .list > .item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
    padding-block: 3rem;
  }
  .mdl_service_body_a > .list > .item.is_cont {
    padding-top: 0;
  }
  .mdl_service_body_a > .list > .item > .side_a,
  .mdl_service_body_a > .list > .item > .side_b {
    grid-column: auto;
  }
  .mdl_service_body_a > .list > .item > .side_a {
    position: static;
    padding-right: 0;
  }
  .mdl_service_body_a > .list > .item > .side_b {
    border-left: 0;
  }
  .mdl_service_body_a > .list > .item > .side_b > .list {
    border-left: 1px dashed var(--var_bdr_clr_a);
  }
  .mdl_service_body_a > .list > .item > .side_b > .prt_prose_a,
  .mdl_service_body_a > .list > .item > .side_b > .sub {
    padding-left: 0;
  }
}
@container (max-width: 645px) {
  .mdl_service_body_a > .list > .item > .side_b > .list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_service_body_a > .list > .item > .side_b > .list > .item {
    padding: 1.5rem;
  }
  .mdl_service_body_a > .list > .item > .side_b > .list > .is_short {
    min-height: 0;
  }
  .mdl_service_body_a > .list > .item > .side_b > .list > .dec_a {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_service_body_a > .list > .item > .side_b > .list > .item {
    transition: none;
  }
}

/* ==========================================================================
   Module: mdl_article_hero_a - Article (blog post) hero
   The 7 container grid lines behind. On a 6-column grid that matches the
   lines: mono category label (accent), the h1 and the standfirst across the
   first 5 columns (clearing the fixed header); then a meta strip between
   two dashed lines whose cells sit between the grid lines: author (avatar
   + name + role, cols 1–2), published date (col 3), reading time (col 4), a
   drawing x-line (cols 5–6); then the cover image, full container width,
   square corners. At md the strip wraps (author on its own row, no x-line).
   ========================================================================== */
.mdl_article_hero_a {
  position: relative;
  isolation: isolate;
  padding-block: 8rem 4rem;
}
.mdl_article_hero_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_article_hero_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_article_hero_a > .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 83.3333333333%;
  padding-bottom: 3rem;
}
.mdl_article_hero_a > .content > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_article_hero_a > .content > .label > .sep {
  color: var(--var_txt_clr_b);
}
.mdl_article_hero_a > .content > .label > a {
  color: inherit;
  text-decoration: none;
}
.mdl_article_hero_a > .content > .label > a:hover, .mdl_article_hero_a > .content > .label > a:focus-visible {
  text-decoration: underline;
}
.mdl_article_hero_a > .content > .title {
  margin: 0;
  font-size: clamp(2.25rem, 1.3369565217rem + 3.0434782609cqi, 4rem);
  line-height: 1.05;
  color: var(--var_hdr_clr_a);
}
.mdl_article_hero_a > .content > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_article_hero_a > .content > .des {
  max-width: 44rem;
  font-size: clamp(1.0625rem, 0.964673913rem + 0.3260869565cqi, 1.25rem);
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_article_hero_a > .list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_article_hero_a > .list > .item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  min-height: 6.5rem;
  margin: 0;
  padding: 1.5rem;
  line-height: 1.4;
}
.mdl_article_hero_a > .list > .item .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_article_hero_a > .list > .item > .des {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
  color: var(--var_hdr_clr_a);
}
.mdl_article_hero_a > .list > .author {
  grid-column: 1/span 2;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  padding-left: 0;
}
.mdl_article_hero_a > .list > .author > .prt_avatar_b {
  width: 3.5rem;
  flex-shrink: 0;
}
.mdl_article_hero_a > .list > .author > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  line-height: 1.3;
}
.mdl_article_hero_a > .list > .author > .wrap > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
  color: var(--var_hdr_clr_a);
}
.mdl_article_hero_a > .list > .author > .wrap > .sub {
  font-size: 0.8125rem;
  color: var(--var_txt_clr_b);
}
.mdl_article_hero_a > .list > .date {
  grid-column: 3;
}
.mdl_article_hero_a > .list > .time {
  grid-column: 4;
}
.mdl_article_hero_a > .list > .dec_a {
  grid-column: 5/span 2;
  align-items: flex-end;
  padding-right: 0;
}
.mdl_article_hero_a > .list > .dec_a > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: color-mix(in srgb, var(--var_txt_clr_a) 25%, transparent);
  --var_dec_xline_mark_alt_clr: var(--var_acnt_clr_a);
  --var_dec_xline_line_clr: var(--var_txt_clr_a);
}
.mdl_article_hero_a > .media {
  margin: 3rem 0 0;
  aspect-ratio: 2/1;
  overflow: hidden;
  background: var(--var_bg_b);
}
.mdl_article_hero_a > .media > .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@container (max-width: 1024px) {
  .mdl_article_hero_a {
    padding-block: 6rem 3rem;
  }
  .mdl_article_hero_a > .content {
    width: 100%;
  }
  .mdl_article_hero_a > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_article_hero_a > .list > .author {
    grid-column: 1/-1;
    border-bottom: 1px dashed var(--var_bdr_clr_a);
  }
  .mdl_article_hero_a > .list > .date {
    grid-column: 1;
    padding-left: 0;
  }
  .mdl_article_hero_a > .list > .time {
    grid-column: 2;
  }
  .mdl_article_hero_a > .list > .item {
    min-height: 0;
    padding-block: 1rem;
  }
  .mdl_article_hero_a > .list > .dec_a {
    display: none;
  }
  .mdl_article_hero_a > .media {
    margin-top: 2rem;
    aspect-ratio: 16/10;
  }
}

/* ==========================================================================
   Module: mdl_article_a - Article body
   The 7 container grid lines behind. On a 6-column grid that matches the
   lines: a sticky side column on the first 2 columns: an optional card with
   the basics (author + role, published, reading time; white, solid border),
   then the "In this article" contents list
   (numbered links to the h2s, dashed rows, an accent reading-progress bar
   driven by the module's scroll position: CSS scroll-driven animation,
   static where unsupported), the prose (prt_prose_a, ~68ch) from column 3,
   then "Filed under" tag chips. The prose column covers the grid lines
   under the text (section background) and redraws its left line. Without a contents list (`solo`, e.g. legal
   pages) the prose starts at column 2. At md the contents list sits above
   the prose (not sticky).
   ========================================================================== */
.mdl_article_a {
  position: relative;
  isolation: isolate;
  padding-block: 5rem 6rem;
  view-timeline: --mdl_article_a block;
}
.mdl_article_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_article_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_article_a > .content {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
}
.mdl_article_a > .content > .side_a {
  grid-column: 1/span 2;
  position: sticky;
  top: var(--hdr-h);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-right: 3rem;
}
.mdl_article_a > .content > .side_a > .wrap {
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_a);
}
.mdl_article_a > .content > .side_a > .wrap > .hdr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid var(--var_bdr_clr_a);
}
.mdl_article_a > .content > .side_a > .wrap > .hdr > .prt_avatar_b {
  --size: 2.75rem;
  flex: none;
}
.mdl_article_a > .content > .side_a > .wrap > .hdr > .name {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.mdl_article_a > .content > .side_a > .wrap > .hdr > .name > .label {
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_article_a > .content > .side_a > .wrap > .hdr > .name > .sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--var_txt_clr_b);
}
.mdl_article_a > .content > .side_a > .wrap > .list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.mdl_article_a > .content > .side_a > .wrap > .list > .item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.75rem 1rem;
}
.mdl_article_a > .content > .side_a > .wrap > .list > .item + .item {
  border-left: 1px solid var(--var_bdr_clr_a);
}
.mdl_article_a > .content > .side_a > .wrap > .list > .item > .label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_article_a > .content > .side_a > .wrap > .list > .item > .des {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--var_hdr_clr_a);
}
.mdl_article_a > .content > .side_a > .body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mdl_article_a > .content > .side_a > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_article_a > .content > .side_a > .body > .list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_article_a > .content > .side_a > .body > .list > .item {
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_article_a > .content > .side_a > .body > .list > .item > .link {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--var_txt_clr_b);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mdl_article_a > .content > .side_a > .body > .list > .item > .link > .num {
  flex-shrink: 0;
  padding-top: 0.15em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--var_acnt_clr_a);
}
.mdl_article_a > .content > .side_a > .body > .list > .item > .link:hover, .mdl_article_a > .content > .side_a > .body > .list > .item > .link:focus-visible {
  color: var(--var_hdr_clr_a);
}
.mdl_article_a > .content > .side_a > .body > .dec_a {
  display: block;
  height: 2px;
  background: color-mix(in srgb, var(--var_txt_clr_a) 12%, transparent);
}
.mdl_article_a > .content > .side_a > .body > .dec_a::before {
  content: "";
  display: block;
  height: 100%;
  background: var(--var_acnt_clr_a);
  transform-origin: left;
  transform: scaleX(0);
}
@supports (animation-timeline: view()) {
  .mdl_article_a > .content > .side_a > .body > .dec_a::before {
    animation: mdl_article_a_progress linear both;
    animation-timeline: --mdl_article_a;
    animation-range: contain 0% contain 100%;
  }
}
.mdl_article_a > .content > .side_b {
  grid-column: 3/span 4;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  min-width: 0;
  padding-left: 3rem;
  border-left: 1px dashed var(--var_bdr_clr_a);
  background: linear-gradient(to right, var(--var_bg_a) calc(100% - 1px), transparent 0);
}
.mdl_article_a > .content > .side_b > .bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  max-width: 68ch;
  padding-top: 2rem;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_article_a > .content > .side_b > .bottom > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_article_a > .content > .side_b > .bottom > .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_article_a > .content > .side_b > .bottom > .tags > .item {
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--var_bdr_clr_a);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_hdr_clr_a);
}
.mdl_article_a.solo > .content > .side_b {
  grid-column: 2/span 5;
}
@container (max-width: 1024px) {
  .mdl_article_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_article_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
@container (max-width: 900px) {
  .mdl_article_a > .content {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }
  .mdl_article_a > .content > .side_a {
    grid-column: auto;
    position: static;
    padding-right: 0;
    max-width: 68ch;
  }
  .mdl_article_a > .content > .side_a > .body > .dec_a {
    display: none;
  }
  .mdl_article_a > .content > .side_b {
    grid-column: auto;
    padding-left: 0;
    border-left: 0;
  }
  .mdl_article_a.solo > .content > .side_b {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_article_a > .content > .side_a > .body > .list > .item > .link {
    transition: none;
  }
}

@keyframes mdl_article_a_progress {
  to {
    transform: scaleX(1);
  }
}
/* ==========================================================================
   Module: mdl_link_list_a - Related links
   The 7 container grid lines behind. 6 columns on the lines: the label
   (h2) and a mono link count on the first 2 columns; the links on the last
   4 as cells, 2 across (2 grid columns each), with shared dashed lines
   (list: top + left, cell: right + bottom) and a striped filler closing an
   odd row. Each cell is one link: mono index, label, arrow in the top-right
   corner that nudges; hover / focus tints the cell. Stacks at md, one
   across at sm.
   ========================================================================== */
.mdl_link_list_a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  padding-block: 5rem;
}
.mdl_link_list_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_link_list_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_link_list_a > .side_a {
  grid-column: 1/span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding-right: 3rem;
}
.mdl_link_list_a > .side_a > .title {
  margin: 0;
  font-size: clamp(1.75rem, 1.3586956522rem + 1.3043478261cqi, 2.5rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_link_list_a > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_link_list_a > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_link_list_a > .list {
  grid-column: 3/span 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_link_list_a > .list > .item {
  display: grid;
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_link_list_a > .list > .item > .link {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 10rem;
  padding: 1.5rem 4rem 1.5rem 1.5rem;
  background: var(--var_bg_a);
  color: var(--var_hdr_clr_a);
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.mdl_link_list_a > .list > .item > .link > .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--var_acnt_clr_a);
}
.mdl_link_list_a > .list > .item > .link > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.964673913rem + 0.3260869565cqi, 1.25rem);
  line-height: 1.3;
}
.mdl_link_list_a > .list > .item > .link > .prt_icn_a {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  transition: transform 0.3s ease;
}
.mdl_link_list_a > .list > .item > .link:hover, .mdl_link_list_a > .list > .item > .link:focus-visible {
  background: color-mix(in srgb, var(--var_bg_a) 94%, var(--var_hdr_clr_a));
}
.mdl_link_list_a > .list > .item > .link:hover > .prt_icn_a, .mdl_link_list_a > .list > .item > .link:focus-visible > .prt_icn_a {
  transform: translate(3px, -3px);
}
.mdl_link_list_a > .list > .item > .link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
.mdl_link_list_a > .list > .dec_a {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
@container (max-width: 1024px) {
  .mdl_link_list_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
    padding-block: 4rem;
  }
  .mdl_link_list_a > .side_a,
  .mdl_link_list_a > .list {
    grid-column: auto;
  }
  .mdl_link_list_a > .side_a {
    padding-right: 0;
  }
}
@container (max-width: 645px) {
  .mdl_link_list_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_link_list_a > .list > .item > .link {
    min-height: 0;
  }
  .mdl_link_list_a > .list > .dec_a {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_link_list_a > .list > .item > .link,
  .mdl_link_list_a > .list > .item > .link > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Module: mdl_post_row_a - Heading + a row of story / post cells
   The 7 container grid lines behind. Heading row on the 6 columns: mono
   label + title (<mark> accent) on the first 3, description + outline
   button on the last 3. Then blk_story_card_a cells 3 across (2 grid
   columns each) with shared dashed lines (list: top + left, cell: right +
   bottom), striped fillers closing the last row (at 3 across and at 2
   across: 2 at md), 1 at sm.
   ========================================================================== */
.mdl_post_row_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_post_row_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_post_row_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_post_row_a > .hdr {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  margin-bottom: 3rem;
}
.mdl_post_row_a > .hdr > .side_a {
  grid-column: 1/span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 3rem;
}
.mdl_post_row_a > .hdr > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_post_row_a > .hdr > .side_a > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_post_row_a > .hdr > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_post_row_a > .hdr > .side_b {
  grid-column: 4/span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-left: 2rem;
}
.mdl_post_row_a > .hdr > .side_b > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_post_row_a > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_post_row_a > .list > .item {
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_post_row_a > .list > .dec_a {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
.mdl_post_row_a > .list > .dec_a:not(.fill_3) {
  display: none;
}
@container (max-width: 1024px) {
  .mdl_post_row_a {
    padding-block: 4rem;
  }
  .mdl_post_row_a > .hdr {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }
  .mdl_post_row_a > .hdr > .side_a,
  .mdl_post_row_a > .hdr > .side_b {
    grid-column: auto;
    padding-inline: 0;
  }
  .mdl_post_row_a > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_post_row_a > .list > .dec_a {
    display: none;
  }
  .mdl_post_row_a > .list > .dec_a.fill_2 {
    display: block;
  }
}
@container (max-width: 645px) {
  .mdl_post_row_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_post_row_a > .list > .dec_a.fill_2 {
    display: none;
  }
}
@container (max-width: 1024px) {
  .mdl_post_row_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_post_row_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_case_hero_a - Case-study header
   Six columns = the 7 container grid lines. Left (cols 1–4): back link
   (prt_btn_d.rev), mono label (client · sector), the headline and the
   standfirst. Right (cols 5–6, bottom): the facts as stacked cells (accent icon beside each
   label: the fact's `icon`, else from its label) with
   shared dashed lines on the grid-line positions (the list draws top +
   left, each cell right + bottom; solid --var_bg_b so they cover the
   lines); without facts a drawing x-line closes the column. Dots top
   right. Clears the fixed header. Stacks at md.
   ========================================================================== */
.mdl_case_hero_a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  min-height: 34rem;
  padding-block: 8rem 4rem;
}
.mdl_case_hero_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_case_hero_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_case_hero_a > .side_a {
  grid-column: 1/span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 4rem;
}
.mdl_case_hero_a > .side_a > .prt_btn_d {
  margin-bottom: 2rem;
  font-size: 0.8125rem;
}
.mdl_case_hero_a > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_case_hero_a > .side_a > .title {
  margin: 0;
  font-size: clamp(2.5rem, 1.5869565217rem + 3.0434782609cqi, 4.25rem);
  line-height: 1.04;
  color: var(--var_hdr_clr_a);
}
.mdl_case_hero_a > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_case_hero_a > .side_a > .des {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  font-size: clamp(1.0625rem, 0.964673913rem + 0.3260869565cqi, 1.25rem);
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_case_hero_a > .side_b {
  grid-column: 5/span 2;
}
.mdl_case_hero_a > .side_b > .list {
  margin: 0;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_case_hero_a > .side_b > .list > .item {
  row-gap: 0.25rem;
  padding: 1rem 1.5rem;
  background: var(--var_bg_b);
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
}
.mdl_case_hero_a > .side_b > .list > .item > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  grid-row: 1/span 2;
}
.mdl_case_hero_a > .side_b > .list > .item > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_case_hero_a > .side_b > .list > .item > .name {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--var_hdr_clr_a);
}
.mdl_case_hero_a > .side_b > .prt_dec_xline_a {
  width: 100%;
  padding-inline: 1.5rem;
  margin-bottom: 1rem;
}
.mdl_case_hero_a > .prt_dec_dots_a {
  position: absolute;
  top: 8rem;
  right: 2rem;
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_case_hero_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
    min-height: 0;
    padding-block: 8rem 3rem;
  }
  .mdl_case_hero_a > .side_a,
  .mdl_case_hero_a > .side_b {
    grid-column: auto;
  }
  .mdl_case_hero_a > .side_a {
    padding-right: 0;
  }
  .mdl_case_hero_a > .side_b > .list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_case_hero_a > .side_b > .prt_dec_xline_a {
    display: none;
  }
  .mdl_case_hero_a > .prt_dec_dots_a {
    display: none;
  }
}
@container (max-width: 480px) {
  .mdl_case_hero_a > .side_b > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Module: mdl_case_body_a - Case-study body
   One row per filled part (challenge, what we built, how it works,
   guardrails, design, results, services) on a 6-column grid matching the
   7 container grid lines: number + heading sticky on cols 1–2, the content
   on cols 3–6 (reading text on 3–5); dashed lines between rows.
   Steps = blk_case_step_a cells, two across (each on two grid columns),
   shared dashed lines, a striped filler closing an odd count. Guardrails =
   rows with an accent shield icon; services = mono tags. Results (option
   results_layout): list (default) = blk_point_list_a cells (check icons,
   figures in accent) on cols 3-6, or, with an `image` (results split off as
   their own section, has_img), the person-list design (mxn person-list): the
   person standing on the bottom edge in the left half, the mono count, the
   heading (last word accent) and the listing on cols 4-6; cards = blk_step_a
   cards three across on the middle four columns under a centred heading;
   rows = a big striped number beside each statement in a closed table.
   Nothing is drawn when every part is empty (legacy entries). Stacks at md.
   ========================================================================== */
.mdl_case_body_a {
  position: relative;
  isolation: isolate;
  padding-block: 4rem 6rem;
}
.mdl_case_body_a.is_empty {
  display: none;
}
.mdl_case_body_a.has_img {
  padding-block: 0;
}
.mdl_case_body_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_case_body_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_case_body_a > .item {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  padding-block: 3rem;
}
.mdl_case_body_a > .item + .item {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_case_body_a > .item > .hdr {
  grid-column: 1/span 2;
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-right: 2rem;
}
.mdl_case_body_a > .item > .hdr > .num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--var_acnt_clr_a);
}
.mdl_case_body_a > .item > .hdr > .title {
  margin: 0;
  font-size: clamp(1.25rem, 1.0543478261rem + 0.652173913cqi, 1.625rem);
  line-height: 1.25;
  color: var(--var_hdr_clr_a);
}
.mdl_case_body_a > .item > .body {
  grid-column: 3/span 4;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 2rem;
}
.mdl_case_body_a > .item > .body > .des {
  max-width: 46rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--var_txt_clr_a);
}
.mdl_case_body_a > .item > .body > .sub {
  max-width: 50rem;
  margin: 0;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.9293478261rem + 0.652173913cqi, 1.5rem);
  line-height: 1.4;
  color: var(--var_hdr_clr_a);
}
.mdl_case_body_a > .item > .body > .list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_case_body_a > .item.steps > .body {
  padding-left: 0;
}
.mdl_case_body_a > .item.steps > .body > .list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_case_body_a > .item.steps > .body > .list > .item {
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_case_body_a > .item.steps > .body > .list > .dec_a {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
.mdl_case_body_a > .item.guardrails > .body > .list {
  max-width: 46rem;
}
.mdl_case_body_a > .item.guardrails > .body > .list > .item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1rem;
}
.mdl_case_body_a > .item.guardrails > .body > .list > .item + .item {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_case_body_a > .item.guardrails > .body > .list > .item:first-child {
  padding-top: 0;
}
.mdl_case_body_a > .item.guardrails > .body > .list > .item > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  flex-shrink: 0;
}
.mdl_case_body_a > .item.guardrails > .body > .list > .item > .des {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--var_txt_clr_a);
}
.mdl_case_body_a > .item.results.list > .hdr {
  grid-column: 1/span 2;
  grid-row: 1;
  position: sticky;
  top: var(--hdr-h);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding-right: 2rem;
}
.mdl_case_body_a > .item.results.list > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_case_body_a > .item.results.list > .hdr > .title {
  margin: 0;
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_case_body_a > .item.results.list > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_case_body_a > .item.results.list > .hdr > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_case_body_a > .item.results.list > .body {
  grid-column: 3/span 4;
  grid-row: 1;
}
.mdl_case_body_a > .item.results.list > .media {
  display: none;
}
.mdl_case_body_a > .item.results.list.has_img {
  align-content: center;
  row-gap: 2rem;
  min-height: clamp(36rem, 72svh, 44rem);
}
.mdl_case_body_a > .item.results.list.has_img > .media {
  position: absolute;
  right: calc(33.3333333333% + 1.5rem);
  bottom: 0;
  display: block;
  height: calc(100% - 2rem);
  max-width: calc(66.6666666667% - 1.5rem);
  aspect-ratio: var(--ratio, 1);
  pointer-events: none;
}
.mdl_case_body_a > .item.results.list.has_img > .media > .prt_img_a {
  position: absolute;
  inset: 0;
}
.mdl_case_body_a > .item.results.list.has_img > .media > .prt_dec_dots_a {
  position: absolute;
  top: 0;
  left: 2rem;
  z-index: -1;
}
.mdl_case_body_a > .item.results.list.has_img > .media > .dec_a {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  translate: -50% 50%;
}
.mdl_case_body_a > .item.results.list.has_img > .media > .dec_a > .prt_dec_circle_a {
  --size: min(46rem, 50vw);
}
.mdl_case_body_a > .item.results.list.has_img > .hdr,
.mdl_case_body_a > .item.results.list.has_img > .body {
  grid-column: 5/span 2;
}
.mdl_case_body_a > .item.results.list.has_img > .hdr {
  position: static;
  padding-right: 0;
  padding-left: 1.5rem;
}
.mdl_case_body_a > .item.results.list.has_img > .hdr > .title {
  font-size: clamp(1.875rem, 1.4836956522rem + 1.3043478261cqi, 2.625rem);
}
.mdl_case_body_a > .item.results.list.has_img > .body {
  grid-row: 2;
}
.mdl_case_body_a > .item.results.list.img_flip > .media > .prt_img_a {
  scale: -1 1;
  --tag-flip: -1;
}
@container (max-width: 1024px) {
  .mdl_case_body_a > .item.results.list > .hdr,
  .mdl_case_body_a > .item.results.list > .body {
    grid-column: 1/-1;
    padding-inline: 0;
  }
  .mdl_case_body_a > .item.results.list > .hdr {
    position: static;
  }
  .mdl_case_body_a > .item.results.list > .body {
    grid-row: 2;
  }
  .mdl_case_body_a > .item.results.list.has_img {
    min-height: 0;
  }
  .mdl_case_body_a > .item.results.list.has_img > .hdr,
  .mdl_case_body_a > .item.results.list.has_img > .body {
    grid-column: 1/-1;
  }
  .mdl_case_body_a > .item.results.list.has_img > .hdr {
    padding-left: 0;
  }
  .mdl_case_body_a > .item.results.list.has_img > .media {
    display: none;
  }
}
.mdl_case_body_a > .item.results.list > .body {
  padding-left: 0;
}
.mdl_case_body_a > .item.results.list.has_img {
  position: relative;
  padding-block: 5rem;
}
.mdl_case_body_a > .item.results.cards {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: 3rem;
}
.mdl_case_body_a > .item.results.cards > .hdr {
  grid-column: 1/-1;
  position: static;
  align-items: center;
  padding-right: 0;
  text-align: center;
}
.mdl_case_body_a > .item.results.cards > .hdr > .title {
  font-size: clamp(1.75rem, 1.3586956522rem + 1.3043478261cqi, 2.5rem);
}
.mdl_case_body_a > .item.results.cards > .body {
  grid-column: 1/-1;
  width: 66.6666666667%;
  padding-left: 0;
}
.mdl_case_body_a > .item.results.cards > .body > .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_case_body_a > .item.results.cards > .body > .list > .item {
  flex: 0 1 calc((100% - 1.5rem * 2) / 3);
}
.mdl_case_body_a > .item.results.rows > .body {
  padding-left: 0;
}
.mdl_case_body_a > .item.results.rows > .body > .list {
  border: 1px solid var(--var_bdr_clr_a);
}
.mdl_case_body_a > .item.results.rows > .body > .list > .item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: var(--var_bg_a);
}
.mdl_case_body_a > .item.results.rows > .body > .list > .item + .item {
  border-top: 1px solid var(--var_bdr_clr_a);
}
.mdl_case_body_a > .item.results.rows > .body > .list > .item > .num {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: clamp(3.5rem, 2.4565217391rem + 3.4782608696cqi, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  background: linear-gradient(-45deg, var(--var_acnt_clr_a) 0, var(--var_acnt_clr_a) 1px, transparent 1px, transparent calc(50% - 1px), var(--var_acnt_clr_a) calc(50% - 1px), var(--var_acnt_clr_a) calc(50% + 1px), transparent calc(50% + 1px), transparent calc(100% - 1px), var(--var_acnt_clr_a) calc(100% - 1px), var(--var_acnt_clr_a) 100%) 0 0/8px 8px;
  -webkit-background-clip: text;
  background-clip: text;
}
.mdl_case_body_a > .item.results.rows > .body > .list > .item > .des {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.9891304348rem + 0.8695652174cqi, 1.75rem);
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.mdl_case_body_a > .item.results.rows > .body > .list > .item > .des mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_case_body_a > .item.services {
  align-items: center;
  padding-block: 0 2rem;
}
.mdl_case_body_a > .item.services > .hdr {
  position: static;
}
.mdl_case_body_a > .item.services > .hdr > .title {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_case_body_a > .item.services > .body > .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mdl_case_body_a > .item.services > .body > .list > .item {
  padding: 3px 0.75rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--var_acnt_clr_a) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--var_acnt_clr_a) 80%, var(--var_hdr_clr_a));
}
.mdl_case_body_a > .item.pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--var_bdr_clr_a);
  padding-block: 0;
}
.mdl_case_body_a > .item.pair > .wrap {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: 3rem 2rem;
  background: var(--var_bg_a);
}
.mdl_case_body_a > .item.pair > .wrap + .wrap {
  border-left: 1px solid var(--var_bdr_clr_a);
}
.mdl_case_body_a > .item.pair > .wrap > .title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  font-size: clamp(1.375rem, 1.1793478261rem + 0.652173913cqi, 1.75rem);
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
}
.mdl_case_body_a > .item.pair > .wrap > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--var_txt_clr_a);
}
.mdl_case_body_a > .item.pair + .item {
  border-top: 0;
}
.mdl_case_body_a > .item.services + .item:not(.pair) {
  border-top: 0;
}
@container (max-width: 1024px) {
  .mdl_case_body_a > .item.results.cards > .body {
    width: 100%;
  }
  .mdl_case_body_a > .item.results.cards > .body > .list > .item {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
  .mdl_case_body_a > .item.results.has_img {
    padding-block: 3rem;
  }
}
@container (max-width: 645px) {
  .mdl_case_body_a > .item.results.cards > .body > .list > .item {
    flex-basis: 100%;
  }
}
@container (max-width: 1024px) {
  .mdl_case_body_a {
    padding-block: 3rem 4rem;
  }
  .mdl_case_body_a > .item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
    padding-block: 2rem;
  }
  .mdl_case_body_a > .item > .hdr,
  .mdl_case_body_a > .item > .body {
    grid-column: auto;
  }
  .mdl_case_body_a > .item > .hdr {
    position: static;
    flex-direction: row;
    align-items: baseline;
    padding-right: 0;
  }
  .mdl_case_body_a > .item > .body {
    padding-left: 0;
  }
  .mdl_case_body_a > .item.pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: 0;
  }
}
@container (max-width: 900px) {
  .mdl_case_body_a > .item.pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_case_body_a > .item.pair > .wrap + .wrap {
    border-left: 0;
    border-top: 1px solid var(--var_bdr_clr_a);
  }
}
@container (max-width: 645px) {
  .mdl_case_body_a > .item.steps > .body > .list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_case_body_a > .item.steps > .body > .list > .dec_a {
    display: none;
  }
}

/* ==========================================================================
   Module: mdl_tech_grid_a - "Built with" technology logos
   Six columns = the 7 container grid lines: mono label + title on cols
   1–2, the logos on cols 3–6 as solid prt_logo_card_a cells, four across
   (one per grid column), drawing their own dashed lines on the grid-line
   positions (list top + left, cells right + bottom); striped filler cells
   close the last row at every column count. 4 → 3 columns at md (title
   above), 2 at ms.
   ========================================================================== */
.mdl_tech_grid_a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  padding-block: 4rem;
}
.mdl_tech_grid_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_tech_grid_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_tech_grid_a > .side_a {
  grid-column: 1/span 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-right: 2rem;
}
.mdl_tech_grid_a > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_tech_grid_a > .side_a > .title {
  margin: 0;
  font-size: clamp(1.75rem, 1.3586956522rem + 1.3043478261cqi, 2.5rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_tech_grid_a > .list {
  grid-column: 3/span 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_tech_grid_a > .list > .item {
  display: grid;
  min-width: 0;
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_tech_grid_a > .list > .item > .prt_logo_card_a {
  border-radius: 0;
}
.mdl_tech_grid_a > .list > .dec_a {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
.mdl_tech_grid_a > .list > .dec_a:not(.fill_4) {
  display: none;
}
@container (max-width: 1024px) {
  .mdl_tech_grid_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
    padding-block: 3rem;
  }
  .mdl_tech_grid_a > .side_a,
  .mdl_tech_grid_a > .list {
    grid-column: auto;
  }
  .mdl_tech_grid_a > .list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mdl_tech_grid_a > .list > .dec_a {
    display: none;
  }
  .mdl_tech_grid_a > .list > .dec_a.fill_3 {
    display: block;
  }
}
@container (max-width: 480px) {
  .mdl_tech_grid_a > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_tech_grid_a > .list > .item > .prt_logo_card_a {
    padding-inline: 1rem;
  }
  .mdl_tech_grid_a > .list > .dec_a.fill_3 {
    display: none;
  }
  .mdl_tech_grid_a > .list > .dec_a.fill_2 {
    display: block;
  }
}
@container (max-width: 1024px) {
  .mdl_tech_grid_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_tech_grid_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_next_case_a - "Next" link to the following case study / bio
   One contained card (solid border) on the grid: mono accent label, the
   next item's client (mono) + industry (pastel badge) split from its
   eyebrow, and a large title on cols 1-4; a solid accent panel on cols 5-6
   with "View case" and a large arrow. Hover: the panel sweeps a little
   further in and the arrow slides. Stacks at md (panel underneath).
   ========================================================================== */
.mdl_next_case_a {
  position: relative;
  isolation: isolate;
  padding-block: 4rem;
}
.mdl_next_case_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_next_case_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_next_case_a > .link {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_a);
  color: inherit;
  text-decoration: none;
}
.mdl_next_case_a > .link > .label {
  grid-column: 1/span 4;
  grid-row: 1;
  padding: 2rem 2rem 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_next_case_a > .link > .wrap {
  grid-column: 1/span 4;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 2rem 3rem;
}
.mdl_next_case_a > .link > .wrap > .sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.mdl_next_case_a > .link > .wrap > .sub > .name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_next_case_a > .link > .wrap > .sub > .item {
  padding: 3px 0.5rem;
  border-radius: 2px;
  background: color-mix(in srgb, var(--var_acnt_clr_a) 12%, transparent);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--var_acnt_clr_a) 80%, var(--var_hdr_clr_a));
}
.mdl_next_case_a > .link > .wrap > .title {
  max-width: 22ch;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.1630434783rem + 1.9565217391cqi, 2.875rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_next_case_a > .link > .dec_a {
  grid-column: 5/span 2;
  grid-row: 1/span 2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  color: var(--var_bg_a);
}
.mdl_next_case_a > .link > .dec_a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--var_acnt_clr_a);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.mdl_next_case_a > .link > .dec_a > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mdl_next_case_a > .link > .dec_a > .prt_icn_a {
  --var_icn_a_clr: var(--var_bg_a);
  align-self: flex-end;
  width: 3rem;
  height: 3rem;
  transition: transform 0.35s ease;
}
.mdl_next_case_a > .link > .dec_a {
  isolation: isolate;
}
.mdl_next_case_a > .link:hover, .mdl_next_case_a > .link:focus-visible {
  text-decoration: none;
}
.mdl_next_case_a > .link:hover > .dec_a::before, .mdl_next_case_a > .link:focus-visible > .dec_a::before {
  transform: scaleX(1.25);
}
.mdl_next_case_a > .link:hover > .dec_a > .prt_icn_a, .mdl_next_case_a > .link:focus-visible > .dec_a > .prt_icn_a {
  transform: translateX(6px);
}
.mdl_next_case_a > .link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
@container (max-width: 1024px) {
  .mdl_next_case_a {
    padding-block: 3rem;
  }
  .mdl_next_case_a > .link {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_next_case_a > .link > .label,
  .mdl_next_case_a > .link > .wrap {
    grid-column: 1;
  }
  .mdl_next_case_a > .link > .dec_a {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
    align-items: center;
  }
  .mdl_next_case_a > .link > .dec_a::before {
    transform-origin: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_next_case_a > .link > .dec_a::before,
  .mdl_next_case_a > .link > .dec_a > .prt_icn_a {
    transition: none;
  }
}

/* ==========================================================================
   Module: mdl_case_lock_a - Confidential case study
   Six columns = the 7 container grid lines. Left (cols 1–3): back link,
   mono label, title, drawing x-line. Right (cols 4–6): the lock card
   (--var_form_a_bg_clr, 1px border, square): accent lock + mono label,
   heading, text, the password form (mono label, outlined field with accent
   focus, solid Unlock button; error line) between dashed rules, and a
   contact link. The inline script posts the password and swaps the section
   for the case. Clears the fixed header. Stacks at md.
   ========================================================================== */
.mdl_case_lock_a {
  position: relative;
  isolation: isolate;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_case_lock_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_case_lock_a {
    --screen-h: 100svh;
  }
}
.mdl_case_lock_a {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: center;
  align-items: center;
  padding-block: 8rem 6rem;
}
.mdl_case_lock_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_case_lock_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_case_lock_a > .side_a {
  grid-column: 1/span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 4rem;
}
.mdl_case_lock_a > .side_a > .prt_btn_d {
  margin-bottom: 2rem;
  font-size: 0.8125rem;
}
.mdl_case_lock_a > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_case_lock_a > .side_a > .title {
  margin: 0;
  font-size: clamp(2.5rem, 1.7173913043rem + 2.6086956522cqi, 4rem);
  line-height: 1.04;
  color: var(--var_hdr_clr_a);
}
.mdl_case_lock_a > .side_a > .prt_dec_xline_a {
  width: min(100%, 28rem);
  margin-top: 2rem;
}
.mdl_case_lock_a > .side_b {
  grid-column: 4/span 3;
}
.mdl_case_lock_a > .side_b > .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 3rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_form_a_bg_clr);
}
.mdl_case_lock_a > .side_b > .body > .hdr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mdl_case_lock_a > .side_b > .body > .hdr > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
}
.mdl_case_lock_a > .side_b > .body > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_case_lock_a > .side_b > .body > .sub {
  margin: 0.5rem 0 0;
  font-size: clamp(1.375rem, 1.1793478261rem + 0.652173913cqi, 1.75rem);
  line-height: 1.25;
  color: var(--var_hdr_clr_a);
}
.mdl_case_lock_a > .side_b > .body > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_case_lock_a > .side_b > .body > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin: 0.5rem 0;
  padding-block: 1.5rem;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_case_lock_a > .side_b > .body > .wrap > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_case_lock_a > .side_b > .body > .wrap > .controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mdl_case_lock_a > .side_b > .body > .wrap > .controls > .field {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 0;
  background: var(--var_form_a_bg_clr);
  font: inherit;
  font-size: 1rem;
  color: var(--var_txt_clr_a);
  transition: border-color 0.2s ease;
}
.mdl_case_lock_a > .side_b > .body > .wrap > .controls > .field:hover {
  border-color: color-mix(in srgb, var(--var_txt_clr_a) 35%, transparent);
}
.mdl_case_lock_a > .side_b > .body > .wrap > .controls > .field:focus {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -1px;
  border-color: var(--var_acnt_clr_a);
}
.mdl_case_lock_a > .side_b > .body > .wrap > .controls > .prt_btn_c:disabled {
  opacity: 0.6;
  cursor: wait;
}
.mdl_case_lock_a > .side_b > .body > .wrap > .error {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--var_acnt_clr_a);
}
@container (max-width: 1024px) {
  .mdl_case_lock_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
    min-height: 0;
    padding-block: 8rem 4rem;
  }
  .mdl_case_lock_a > .side_a,
  .mdl_case_lock_a > .side_b {
    grid-column: auto;
  }
  .mdl_case_lock_a > .side_a {
    padding-right: 0;
  }
  .mdl_case_lock_a > .side_b {
    max-width: 40rem;
  }
}
@container (max-width: 645px) {
  .mdl_case_lock_a > .side_b > .body {
    padding: 2rem 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_case_lock_a > .side_b > .body > .wrap > .controls > .field {
    transition: none;
  }
}

/* ==========================================================================
   Module: mdl_bio_a - Team member bio
   Six columns = the 7 container grid lines. Left (cols 1–2): the photo in a
   square --var_bg_b cell with a dashed frame on the grid lines, sticky
   below the header (prt_img_a.blend re-pointed to the cell color, so the
   photos' white backgrounds disappear into it). Right (cols 3–6): back
   link, mono role, the name and a drawing x-line, then one row per filled
   text (About, Outside of work): mono heading on col 3, the rich text on
   cols 4–6, dashed lines between rows (starting on the grid line, so they meet the photo frame). Stacks at md (photo capped).
   ========================================================================== */
.mdl_bio_a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  padding-block: 5rem 6rem;
}
.mdl_bio_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_bio_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_bio_a > .prt_btn_d {
  grid-column: 3/span 4;
  grid-row: 1;
  margin: 0 0 2rem 3rem;
  font-size: 0.8125rem;
}
.mdl_bio_a > .side_a {
  grid-column: 1/span 2;
  grid-row: 1/span 2;
  position: sticky;
  top: 7rem;
}
.mdl_bio_a > .side_a > .thumb {
  aspect-ratio: 1;
  background: var(--var_bg_b);
  border: 1px dashed var(--var_bdr_clr_a);
}
.mdl_bio_a > .side_a > .thumb > .prt_img_a {
  --var_bg_a: var(--var_bg_b);
  width: 100%;
  height: 100%;
}
.mdl_bio_a > .side_b {
  grid-column: 3/span 4;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.mdl_bio_a > .side_b > .hdr {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0 0 3rem 3rem;
}
.mdl_bio_a > .side_b > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_bio_a > .side_b > .hdr > .title {
  margin: 0;
  font-size: clamp(2.75rem, 1.5760869565rem + 3.9130434783cqi, 5rem);
  line-height: 1;
  color: var(--var_hdr_clr_a);
}
.mdl_bio_a > .side_b > .hdr > .prt_dec_xline_a {
  width: min(100%, 28rem);
  margin-top: 1.5rem;
}
.mdl_bio_a > .side_b > .item {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  padding-block: 2rem;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_bio_a > .side_b > .item > .sub {
  grid-column: 1;
  margin: 0;
  padding: 0.25rem 1.5rem 0 3rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_bio_a > .side_b > .item > .des {
  grid-column: 2/-1;
  max-width: 44rem;
  padding-left: 2rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--var_txt_clr_a);
}
.mdl_bio_a > .side_b > .item > .des p {
  margin: 0 0 1rem;
}
.mdl_bio_a > .side_b > .item > .des > :last-child {
  margin-bottom: 0;
}
.mdl_bio_a > .side_b > .item > .des a {
  color: var(--var_acnt_clr_a);
}
.mdl_bio_a > .side_b > .item.hobbies > .des {
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.9945652174rem + 0.4347826087cqi, 1.375rem);
  line-height: 1.5;
  color: var(--var_hdr_clr_a);
}
.mdl_bio_a > .side_b > .des {
  grid-column: 1/-1;
  margin: 0;
  padding: 2rem 0 0 3rem;
  border-top: 1px dashed var(--var_bdr_clr_a);
  font-size: 1.0625rem;
  color: var(--var_txt_clr_b);
}
@container (max-width: 1024px) {
  .mdl_bio_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
    padding-block: 3rem 4rem;
  }
  .mdl_bio_a > .prt_btn_d,
  .mdl_bio_a > .side_a,
  .mdl_bio_a > .side_b {
    grid-column: auto;
    grid-row: auto;
  }
  .mdl_bio_a > .prt_btn_d {
    margin: 0;
  }
  .mdl_bio_a > .side_a {
    position: static;
    width: min(100%, 22rem);
  }
  .mdl_bio_a > .side_b {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_bio_a > .side_b > .hdr,
  .mdl_bio_a > .side_b > .des {
    padding-left: 0;
  }
  .mdl_bio_a > .side_b > .item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.75rem;
  }
  .mdl_bio_a > .side_b > .item > .sub,
  .mdl_bio_a > .side_b > .item > .des {
    grid-column: auto;
    padding-left: 0;
  }
}

/* ==========================================================================
   Module: mdl_quote_grid_a - Testimonials
   The 7 container grid lines behind. On top: the intro (optional mono label,
   title with <mark> accent, description, drawing x-line) — beside it, with
   `feature`, one quote large in a themed band (`feature_theme`, default
   thm_orange: the one highlighted card) on cols 4-6 (has_feature), and
   isometric art above the intro (an iso_art slot the ISO Agent fills;
   feature_art: false leaves it out), so the two sides are about as tall.
   Then, optional, a ticker: the clients' own phrases in large type scrolling
   in a band across the row (the list twice, so it loops; paused on hover;
   still and wrapped for reduced motion).
   Then the wall: blk_testimonial_a cards in spaced columns (CSS columns,
   --cols = item count up to 3, gaps of space(6)), every fourth card dark
   (`alt`, set by the partial). 2 columns at md, 1 at sm; up to three quotes
   (`row`) stay one row down to tab, then one across.
   `row` (set for up to 3 quotes): one grid row of equal-height cards.
   `lead` (set when heading = h1, the page's first section): clears the
   fixed header, page-sized title.
   ========================================================================== */
.mdl_quote_grid_a {
  --gap: 1.5rem;
  --circle: min(28rem, 40vw);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-block: 6rem;
  padding-bottom: calc(var(--circle) / 2 + 3rem);
}
.mdl_quote_grid_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_quote_grid_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_quote_grid_a > .dec_a {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  translate: -50% 50%;
  pointer-events: none;
}
.mdl_quote_grid_a > .dec_a > .prt_dec_circle_a {
  --size: var(--circle);
}
.mdl_quote_grid_a > .prt_dec_dots_a {
  position: absolute;
  bottom: 1rem;
  left: 2rem;
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_quote_grid_a > .dec_a,
  .mdl_quote_grid_a > .prt_dec_dots_a {
    display: none !important;
  }
}
.mdl_quote_grid_a > .top {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--gap);
}
.mdl_quote_grid_a > .top > .hdr {
  grid-column: 1/span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 44rem;
}
.mdl_quote_grid_a > .top > .hdr > .art {
  width: min(100%, 24rem);
  margin-bottom: 1rem;
}
.mdl_quote_grid_a > .top > .hdr > .art > .prt_layer_a {
  width: 100%;
}
.mdl_quote_grid_a > .top > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_quote_grid_a > .top > .hdr > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_quote_grid_a > .top > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_quote_grid_a > .top > .hdr > .des {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.mdl_quote_grid_a > .top > .hdr > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_txt_clr_a);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  width: min(100%, 28rem);
  margin-top: 1rem;
}
.mdl_quote_grid_a > .top > .feature {
  grid-column: 4/span 3;
}
.mdl_quote_grid_a.has_feature > .top > .hdr {
  grid-column: 1/span 3;
}
.mdl_quote_grid_a > .ticker {
  display: flex;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: 1.5rem;
  overflow: hidden;
  border-block: 1px dashed var(--var_bdr_clr_a);
  background: var(--var_bg_a);
}
.mdl_quote_grid_a > .ticker > .list {
  flex: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: mdl_quote_grid_a_ticker 70s linear infinite;
}
.mdl_quote_grid_a > .ticker > .list > .item {
  display: flex;
  align-items: center;
  flex: none;
}
.mdl_quote_grid_a > .ticker > .list > .item > .txt {
  padding-inline: 2rem;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.375rem, 0.9836956522rem + 1.3043478261cqi, 2.125rem);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--var_hdr_clr_a);
}
.mdl_quote_grid_a > .ticker > .list > .item:nth-child(even) > .txt {
  color: var(--var_acnt_clr_a);
}
.mdl_quote_grid_a > .ticker > .list > .item > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  width: 1.5rem;
  height: 1.5rem;
}
.mdl_quote_grid_a > .ticker:hover > .list {
  animation-play-state: paused;
}
.mdl_quote_grid_a > .wall {
  columns: var(--cols, 3);
  column-gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_quote_grid_a > .wall > .item {
  break-inside: avoid;
  margin-bottom: var(--gap);
}
.mdl_quote_grid_a.row > .wall {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--gap);
  columns: auto;
}
.mdl_quote_grid_a.row > .wall > .item {
  margin-bottom: 0;
}
.mdl_quote_grid_a.lead {
  padding-top: 10rem;
}
.mdl_quote_grid_a.lead > .top > .hdr > .title {
  font-size: clamp(2.25rem, 1.3369565217rem + 3.0434782609cqi, 4rem);
  line-height: 1.05;
}
@container (max-width: 1024px) {
  .mdl_quote_grid_a {
    gap: 3rem;
    padding-block: 4rem;
  }
  .mdl_quote_grid_a.lead {
    padding-top: 8rem;
  }
  .mdl_quote_grid_a > .top {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }
  .mdl_quote_grid_a > .top > .hdr,
  .mdl_quote_grid_a > .top > .feature {
    grid-column: 1;
  }
  .mdl_quote_grid_a > .top > .hdr > .art {
    width: min(80%, 20rem);
  }
  .mdl_quote_grid_a.has_feature > .top > .hdr {
    grid-column: 1;
  }
  .mdl_quote_grid_a > .wall {
    columns: min(var(--cols, 3), 2);
  }
}
@container (max-width: 900px) {
  .mdl_quote_grid_a.row > .wall {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 645px) {
  .mdl_quote_grid_a > .wall {
    columns: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_quote_grid_a > .ticker {
    flex-wrap: wrap;
    justify-content: center;
  }
  .mdl_quote_grid_a > .ticker > .list {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.75rem;
    animation: none;
  }
  .mdl_quote_grid_a > .ticker > .list > .item {
    flex: 0 1 auto;
    max-width: 100%;
  }
  .mdl_quote_grid_a > .ticker > .list > .item > .txt {
    padding-inline: 1rem;
    white-space: normal;
    text-align: center;
  }
  .mdl_quote_grid_a > .ticker > .list[aria-hidden=true] {
    display: none;
  }
}
@container (max-width: 1024px) {
  .mdl_quote_grid_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_quote_grid_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@keyframes mdl_quote_grid_a_ticker {
  from {
    translate: 0 0;
  }
  to {
    translate: -100% 0;
  }
}
/* ==========================================================================
   Module: mdl_ways_a - Ways forward (side-by-side options)
   The 7 container grid lines behind. Header on the grid: optional mono
   label + title (<mark> accent) on cols 1-4, description and a drawing
   x-line on cols 5-6. With two options (has_fork) a fork joins them: a
   Launch marker on the middle line (accent icon from the icon system above
   a mono label; options fork_icon, fork_label) with dashed accent branches
   dropping to the centre of each option. The options (blk_way_card_a.wide:
   intro full width, the points two across below, the link its own row;
   optional isometric panel via option `layers` / an item's `layer`) are
   separate boxes side by side across the six grid columns (--span) (--cols =
   item count, up to 3) with a --gap between them, each with its
   own dashed border; the item with a badge is `primary` and takes its own
   theme (option primary_theme, default thm_black). Decorations: a
   spinning circle under the heading bleeding off the left edge, dots
   bottom left. Stacks at md (fork, circle and dots off).
   ========================================================================== */
.mdl_ways_a {
  --gap: 2rem;
  --span: 100%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-block: 5rem;
}
.mdl_ways_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_ways_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_ways_a > .prt_dec_dots_a {
  position: absolute;
  bottom: 1rem;
  left: 2rem;
  z-index: -1;
}
.mdl_ways_a > .hdr {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
}
.mdl_ways_a > .hdr > .side_a {
  grid-column: 1/span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 4rem;
}
.mdl_ways_a > .hdr > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_ways_a > .hdr > .side_a > .title {
  margin: 0;
  font-size: clamp(2rem, 1.5434782609rem + 1.5217391304cqi, 2.875rem);
  line-height: 1.08;
  color: var(--var_hdr_clr_a);
}
.mdl_ways_a > .hdr > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_ways_a > .hdr > .side_b {
  grid-column: 5/span 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mdl_ways_a > .hdr > .side_b > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.mdl_ways_a > .hdr > .side_b > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_txt_clr_a);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  width: 100%;
}
.mdl_ways_a > .hdr > .dec_a {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: -1;
  translate: -62% 1rem;
  pointer-events: none;
}
.mdl_ways_a > .hdr > .dec_a > .prt_dec_circle_a {
  --size: min(28rem, 38vw);
}
.mdl_ways_a > .dec_b {
  position: relative;
  align-self: center;
  width: var(--span);
  height: 6rem;
  margin-bottom: calc(-1 * 3rem);
}
.mdl_ways_a > .dec_b::before {
  content: "";
  position: absolute;
  top: 66%;
  bottom: 0;
  left: calc((100% - var(--gap)) / 4);
  right: calc((100% - var(--gap)) / 4);
  border: 1px dashed var(--var_acnt_clr_a);
  border-bottom: 0;
}
.mdl_ways_a > .dec_b::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 34%;
  left: 50%;
  border-left: 1px dashed var(--var_acnt_clr_a);
}
.mdl_ways_a > .dec_b > .body {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem 0.5rem;
  translate: -50% 0;
  border: 1px solid var(--var_acnt_clr_a);
  background: var(--var_bg_a);
}
.mdl_ways_a > .dec_b > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--var_hdr_clr_a);
  white-space: nowrap;
}
.mdl_ways_a > .list {
  align-self: center;
  width: var(--span);
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_ways_a > .list > .item {
  border: 1px dashed var(--var_bdr_clr_a);
}
@container (max-width: 1024px) {
  .mdl_ways_a {
    gap: 2rem;
    padding-block: 4rem;
  }
  .mdl_ways_a > .hdr > .dec_a,
  .mdl_ways_a > .dec_b,
  .mdl_ways_a > .prt_dec_dots_a {
    display: none;
  }
  .mdl_ways_a > .hdr {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.5rem;
  }
  .mdl_ways_a > .hdr > .side_a,
  .mdl_ways_a > .hdr > .side_b {
    grid-column: auto;
  }
  .mdl_ways_a > .hdr > .side_a {
    padding-right: 0;
  }
  .mdl_ways_a > .hdr > .side_b {
    max-width: 40rem;
  }
  .mdl_ways_a > .hdr > .side_b > .prt_dec_xline_a {
    display: none;
  }
  .mdl_ways_a > .list {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 1024px) {
  .mdl_ways_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_ways_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_contact_a - Contact (the page's first section)
   The CMS design, kept as it is (the page converts). Six columns = the 7
   container grid lines. Left (cols 1-3): mono eyebrow, large page title
   (<mark> accent), intro, address + phone (blk_contact_a, from the site
   settings), then the next steps as numbered rows between solid lines.
   Right (cols 4-6): the whole project form in one view (blk_form_a: the
   same fields and order as the CMS form). Clears the fixed header.
   Stacks at md.
   ========================================================================== */
.mdl_contact_a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  padding-block: 8rem 6rem;
}
.mdl_contact_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_contact_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_contact_a > .side_a {
  grid-column: 1/span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-right: 4rem;
}
.mdl_contact_a > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_contact_a > .side_a > .title {
  margin: 0;
  font-size: clamp(2.75rem, 1.8369565217rem + 3.0434782609cqi, 4.5rem);
  line-height: 1.02;
  color: var(--var_hdr_clr_a);
}
.mdl_contact_a > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_contact_a > .side_a > .des {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_a);
}
.mdl_contact_a > .side_a > .blk_contact_a {
  margin-top: 0.5rem;
}
.mdl_contact_a > .side_a > .list {
  width: 100%;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--var_bdr_clr_a);
}
.mdl_contact_a > .side_a > .list > .item {
  display: flex;
  gap: 1.5rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--var_bdr_clr_a);
}
.mdl_contact_a > .side_a > .list > .item > .num {
  flex: none;
  width: 1.5rem;
  padding-top: 0.2em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--var_acnt_clr_a);
}
.mdl_contact_a > .side_a > .list > .item > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mdl_contact_a > .side_a > .list > .item > .wrap > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--var_hdr_clr_a);
}
.mdl_contact_a > .side_a > .list > .item > .wrap > .des {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--var_txt_clr_b);
}
.mdl_contact_a > .side_b {
  grid-column: 4/span 3;
}
@container (max-width: 1024px) {
  .mdl_contact_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
    padding-block: 6rem 4rem;
  }
  .mdl_contact_a > .side_a,
  .mdl_contact_a > .side_b {
    grid-column: auto;
  }
  .mdl_contact_a > .side_a {
    padding-right: 0;
  }
}

/* ==========================================================================
   Module: mdl_tile_grid_a - Linked icon tiles on the grid lines
   The 7 container grid lines behind. Optional header (mono eyebrow, title
   with an accent <mark>, description; button on the right). Then
   blk_route_card_a cells with shared dashed lines (the list draws top +
   left, each cell right + bottom): 3 across (= every other grid line) or 4.
   Striped filler cells close an incomplete last row. Tablet: a single
   short row (3 or fewer) stays one row until tab, then one across; a
   longer list two across with an odd last tile running the row.
   compact (layout "row"): a mono label over one row of compact jump links,
   one per grid column with 6 items; 3 across at md, 2 at ms.
   split (layout "split"): the heading (title, des; else the row label) on
   the left half, pinned; the items two across on the right half as quick-
   link cells, closed solid lines (blk_route_card_a drop: icon, index,
   arrow down; label, the item's title as a line below). Option image
   (+ image_alt, image_ratio): a wide seated photo under the heading as in
   mdl_trusted_a, the column's full width, on the section's bottom edge,
   a striped circle behind it. Stacks at md; one across at ms.
   ========================================================================== */
.mdl_tile_grid_a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-block: 6rem;
}
.mdl_tile_grid_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_tile_grid_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_tile_grid_a > .hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.mdl_tile_grid_a > .hdr > .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 44rem;
}
.mdl_tile_grid_a > .hdr > .wrap > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_tile_grid_a > .hdr > .wrap > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_tile_grid_a > .hdr > .wrap > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_tile_grid_a > .hdr > .wrap > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_tile_grid_a > .hdr > .prt_btn_a {
  flex-shrink: 0;
}
.mdl_tile_grid_a > .label {
  margin-bottom: -2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_tile_grid_a > .list {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_tile_grid_a > .list > .item {
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_tile_grid_a > .list > .dec_a {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
.mdl_tile_grid_a.split {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: 0;
}
.mdl_tile_grid_a.split > .hdr {
  grid-column: 1/span 3;
  position: sticky;
  top: var(--hdr-h);
  flex-direction: column;
  align-items: flex-start;
  padding-right: 4rem;
}
.mdl_tile_grid_a.split > .hdr > .wrap > .des {
  font-size: 1.125rem;
  line-height: 1.65;
}
.mdl_tile_grid_a.split > .list {
  grid-column: 4/span 3;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top-style: solid;
  border-left-style: solid;
  background: var(--var_bg_b);
}
.mdl_tile_grid_a.split > .list > .item {
  border-right-style: solid;
  border-bottom-style: solid;
}
.mdl_tile_grid_a.split > .list.odd > .is_last {
  grid-column: 1/-1;
}
.mdl_tile_grid_a.split.has_img {
  align-items: stretch;
  padding-bottom: 0;
}
.mdl_tile_grid_a.split.has_img > .list {
  align-self: center;
  margin-bottom: 4rem;
}
.mdl_tile_grid_a.split.has_img > .hdr {
  position: relative;
  top: auto;
  align-items: stretch;
  justify-content: space-between;
  padding-right: 0;
}
.mdl_tile_grid_a.split.has_img > .hdr > .wrap {
  padding-right: 4rem;
}
.mdl_tile_grid_a.split.has_img > .hdr > .dec_b {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 1397/1284);
  max-height: 72svh;
  margin-top: 2rem;
}
.mdl_tile_grid_a.split.has_img > .hdr > .dec_b > .prt_person_a {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mdl_tile_grid_a.split.has_img > .hdr > .dec_b > .dec_a {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  translate: 40% 40%;
}
.mdl_tile_grid_a.split.has_img > .hdr > .dec_b > .dec_a > .prt_dec_circle_a {
  --size: min(26rem, 30vw);
}
.mdl_tile_grid_a.compact {
  padding-block: 3rem 4rem;
}
@container (max-width: 1024px) {
  .mdl_tile_grid_a {
    padding-block: 4rem;
  }
  .mdl_tile_grid_a > .hdr {
    flex-direction: column;
    align-items: flex-start;
  }
  .mdl_tile_grid_a > .list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(20rem, 100% / min(var(--cols), 2) - 1px)), 1fr));
  }
  .mdl_tile_grid_a > .list > .dec_a {
    display: none;
  }
  .mdl_tile_grid_a > .list.odd:not(.one_row) > .is_last {
    grid-column: 1/-1;
  }
  .mdl_tile_grid_a > .list.one_row {
    grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  }
  .mdl_tile_grid_a.compact > .list {
    grid-template-columns: repeat(min(var(--cols), 3), minmax(0, 1fr));
  }
  .mdl_tile_grid_a.split {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }
  .mdl_tile_grid_a.split > .hdr {
    grid-column: auto;
    position: static;
    padding-right: 0;
  }
  .mdl_tile_grid_a.split.has_img {
    padding-bottom: 4rem;
  }
  .mdl_tile_grid_a.split.has_img > .list {
    margin-bottom: 0;
  }
  .mdl_tile_grid_a.split.has_img > .hdr > .dec_b {
    display: none;
  }
  .mdl_tile_grid_a.split > .list {
    grid-column: auto;
  }
}
@container (max-width: 900px) {
  .mdl_tile_grid_a:not(.compact):not(.split) > .list.one_row {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 480px) {
  .mdl_tile_grid_a.split > .list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_tile_grid_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_tile_grid_a.compact > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 1024px) {
  .mdl_tile_grid_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_tile_grid_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_segments_a - Who We Help audiences
   The 7 container grid lines behind. Each audience (.item, the anchor the
   tile row jumps to; clears the fixed header) on a 6-column grid: left half
   sticky (mono index + label, title, intro, the animated isometric scene
   that builds in view: item `layer`, else option `layers`, default web); right half, centred, 30rem wide, stacked: Sound
   familiar? (numbered pain points) and How we help (link rows) in one
   dashed container, then Proof in its own box on its own theme (option proof_theme, default
   thm_black; case rows with dashed lines; a confidential case's title redacted).
   Headings carry accent icons. The sticky column follows with inertia
   (core.js stickyInertia). Modifier flip: the columns swap. Stacks at md.
   Colors: --var_segments_a_cell_clr (cells)
   ========================================================================== */
.mdl_segments_a {
  position: relative;
  isolation: isolate;
}
.mdl_segments_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_segments_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_segments_a > .item {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  padding-block: 6rem;
  scroll-margin-top: var(--hdr-h);
}
.mdl_segments_a > .item + .item {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_segments_a > .item > .side_a {
  grid-column: 1/span 3;
  grid-row: 1;
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 3rem;
}
.mdl_segments_a > .item > .side_a > .label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_segments_a > .item > .side_a > .label > .num {
  padding: 0.25rem 0.5rem;
  border: 1px solid currentColor;
  line-height: 1;
}
.mdl_segments_a > .item > .side_a > .title {
  margin: 0;
  font-size: clamp(1.875rem, 1.3532608696rem + 1.7391304348cqi, 2.875rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_segments_a > .item > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_segments_a > .item > .side_a > .des {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_segments_a > .item > .side_a > .dec_a {
  width: min(88%, 26rem);
  margin-top: 1.5rem;
}
.mdl_segments_a > .item > .side_b {
  grid-column: 4/span 3;
  grid-row: 1;
  justify-self: center;
  width: min(100%, 30rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.mdl_segments_a > .item > .side_b > .body {
  border: 1px solid var(--var_bdr_clr_a);
}
.mdl_segments_a > .item > .side_b > .body > .wrap_a + .wrap_b {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_segments_a > .item > .side_b > .body > .wrap_a,
.mdl_segments_a > .item > .side_b > .body > .wrap_b,
.mdl_segments_a > .item > .side_b > .wrap_c {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--var_segments_a_cell_clr);
}
.mdl_segments_a > .item > .side_b > .body > .wrap_a > .sub,
.mdl_segments_a > .item > .side_b > .body > .wrap_b > .sub,
.mdl_segments_a > .item > .side_b > .wrap_c > .sub {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.0244565217rem + 0.5434782609cqi, 1.5rem);
  line-height: 1.2;
  color: var(--var_hdr_clr_a);
}
.mdl_segments_a > .item > .side_b > .body > .wrap_a > .list,
.mdl_segments_a > .item > .side_b > .body > .wrap_b > .list,
.mdl_segments_a > .item > .side_b > .wrap_c > .list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_segments_a > .item > .side_b > .body > .wrap_a > .list > .item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 1rem;
}
.mdl_segments_a > .item > .side_b > .body > .wrap_a > .list > .item:first-child {
  padding-top: 0;
}
.mdl_segments_a > .item > .side_b > .body > .wrap_a > .list > .item + .item {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_segments_a > .item > .side_b > .body > .wrap_a > .list > .item > .num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--var_acnt_clr_a);
}
.mdl_segments_a > .item > .side_b > .body > .wrap_a > .list > .item > .des {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--var_txt_clr_a);
}
.mdl_segments_a > .item > .side_b > .body > .wrap_b > .list > .item {
  padding-block: 1rem;
}
.mdl_segments_a > .item > .side_b > .body > .wrap_b > .list > .item:first-child {
  padding-top: 0;
}
.mdl_segments_a > .item > .side_b > .body > .wrap_b > .list > .item + .item {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_segments_a > .item > .side_b > .wrap_c {
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_a);
}
.mdl_segments_a > .item > .side_b > .wrap_c > .list > .item {
  padding-block: 1rem;
}
.mdl_segments_a > .item > .side_b > .wrap_c > .list > .item:first-child {
  padding-top: 0;
}
.mdl_segments_a > .item > .side_b > .wrap_c > .list > .item:last-child {
  padding-bottom: 0;
}
.mdl_segments_a > .item > .side_b > .wrap_c > .list > .item + .item {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_segments_a.flip > .item > .side_a {
  grid-column: 4/span 3;
  padding-right: 0;
  padding-left: 3rem;
}
.mdl_segments_a.flip > .item > .side_b {
  grid-column: 1/span 3;
}
@container (max-width: 1024px) {
  .mdl_segments_a > .item, .mdl_segments_a.flip > .item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
    padding-block: 4rem;
  }
  .mdl_segments_a > .item > .side_a,
  .mdl_segments_a > .item > .side_b, .mdl_segments_a.flip > .item > .side_a,
  .mdl_segments_a.flip > .item > .side_b {
    grid-column: auto;
    grid-row: auto;
  }
  .mdl_segments_a > .item > .side_a, .mdl_segments_a.flip > .item > .side_a {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: 2rem;
    align-items: start;
    padding: 0;
  }
  .mdl_segments_a > .item > .side_a > .label,
  .mdl_segments_a > .item > .side_a > .title,
  .mdl_segments_a > .item > .side_a > .des, .mdl_segments_a.flip > .item > .side_a > .label,
  .mdl_segments_a.flip > .item > .side_a > .title,
  .mdl_segments_a.flip > .item > .side_a > .des {
    grid-column: 1;
  }
  .mdl_segments_a > .item > .side_a > .label, .mdl_segments_a.flip > .item > .side_a > .label {
    justify-self: start;
  }
  .mdl_segments_a > .item > .side_a > .dec_a, .mdl_segments_a.flip > .item > .side_a > .dec_a {
    grid-column: 2;
    grid-row: 1/span 3;
    align-self: center;
    width: 100%;
    max-width: 18rem;
    margin-top: 0;
    justify-self: end;
  }
  .mdl_segments_a > .item > .side_b, .mdl_segments_a.flip > .item > .side_b {
    justify-self: stretch;
    width: auto;
  }
  .mdl_segments_a > .item > .side_b > .body, .mdl_segments_a.flip > .item > .side_b > .body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_segments_a > .item > .side_b > .body > .wrap_a + .wrap_b, .mdl_segments_a.flip > .item > .side_b > .body > .wrap_a + .wrap_b {
    border-top: 0;
    border-left: 1px dashed var(--var_bdr_clr_a);
  }
}
@container (max-width: 645px) {
  .mdl_segments_a > .item, .mdl_segments_a.flip > .item {
    padding-block: 3rem;
  }
  .mdl_segments_a > .item > .side_a, .mdl_segments_a.flip > .item > .side_a {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_segments_a > .item > .side_a > .dec_a, .mdl_segments_a.flip > .item > .side_a > .dec_a {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: min(70%, 15rem);
  }
  .mdl_segments_a > .item > .side_b > .body, .mdl_segments_a.flip > .item > .side_b > .body {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_segments_a > .item > .side_b > .body > .wrap_a + .wrap_b, .mdl_segments_a.flip > .item > .side_b > .body > .wrap_a + .wrap_b {
    border-left: 0;
    border-top: 1px dashed var(--var_bdr_clr_a);
  }
  .mdl_segments_a > .item > .side_b > .body > .wrap_a,
  .mdl_segments_a > .item > .side_b > .body > .wrap_b,
  .mdl_segments_a > .item > .side_b > .wrap_c {
    padding: 1.5rem;
  }
}
.mdl_segments_a.lead > .item {
  padding-top: calc(var(--hdr-h) + 3rem);
}

/* ==========================================================================
   Module: mdl_pillars_a - Offerings as a process track
   The design of mdl_process_a (shared process-track() mixin, same markup,
   same core.js mdlProcessA): header (label, title, description, counter),
   then one blk_step_a per offering and the foundation band (band_*) as the
   last step, laid end to end along one ruler. Desktop: pins and scrolls
   sideways past the accent needle; md and below / reduced motion: a
   swipeable row. Each step: icon, title, text, points, its link and an
   isometric slice (prt_layer_a; option `layers` = kinds in order, an
   item's `layer` / `band_layer` win).
   Option layout: 'stack' = the card-stack design of mdl_card_stack_a
   (sticky stacking blk_feature_card_a.flip cards: the slice left; icon,
   number, label, title, text, points, link right).
   ========================================================================== */
.mdl_pillars_a:not(.stack) {
  position: relative;
  height: var(--h, auto);
}
.mdl_pillars_a:not(.stack) > .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  min-height: min(100svh, 56rem);
  padding-block: 4rem;
}
@container (max-width: 1024px) {
  .mdl_pillars_a:not(.stack) > .wrap > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_pillars_a:not(.stack) > .wrap > .dec_a {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 94%;
  aspect-ratio: var(--ratio);
  max-width: 62%;
  pointer-events: none;
}
.mdl_pillars_a:not(.stack) > .wrap > .dec_a > .prt_person_a {
  width: 100%;
  height: 100%;
}
.mdl_pillars_a:not(.stack) > .wrap > .dec_a.flip > .prt_person_a {
  scale: -1 1;
  --tag-flip: -1;
}
.mdl_pillars_a:not(.stack) > .wrap > .dec_a > .prt_bdg_a {
  position: absolute;
  top: 18%;
  right: 62%;
  width: max-content;
}
@container (max-width: 1024px) {
  .mdl_pillars_a:not(.stack) > .wrap > .dec_a {
    display: none !important;
  }
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr,
.mdl_pillars_a:not(.stack) > .wrap > .track {
  z-index: 1;
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr > .body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr > .body > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr > .body > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr > .body > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr > .controls > .num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--var_txt_clr_b);
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr > .controls > .num > .label {
  color: var(--var_acnt_clr_a);
}
.mdl_pillars_a:not(.stack) > .wrap > .hdr > .controls > .prt_btn_b {
  display: none;
}
.mdl_pillars_a:not(.stack) > .wrap > .track {
  position: relative;
}
.mdl_pillars_a:not(.stack) > .wrap > .track > .needle {
  position: absolute;
  top: -0.5rem;
  left: 0;
  z-index: 2;
  width: 2px;
  height: calc(2.5rem + 0.5rem + 2rem + 0.75rem);
  background: var(--var_acnt_clr_a);
  will-change: transform;
}
.mdl_pillars_a:not(.stack) > .wrap > .track > .needle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.75rem;
  aspect-ratio: 1;
  background: var(--var_acnt_clr_a);
  translate: -50% -50%;
}
.mdl_pillars_a:not(.stack) > .wrap > .track > .list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.mdl_pillars_a:not(.stack) > .wrap > .track > .list > .item {
  flex: 0 0 min(32rem, 44cqi);
}
.mdl_pillars_a:not(.stack).is_ready > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
}
.mdl_pillars_a:not(.stack):not(.is_ready) > .wrap > .track > .list {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.mdl_pillars_a:not(.stack):not(.is_ready) > .wrap > .track > .list::-webkit-scrollbar {
  display: none;
}
.mdl_pillars_a:not(.stack):not(.is_ready) > .wrap > .track > .list > .item {
  scroll-snap-align: start;
}
@container (max-width: 1024px) {
  .mdl_pillars_a:not(.stack) {
    height: auto;
  }
  .mdl_pillars_a:not(.stack) > .wrap > .hdr > .controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .mdl_pillars_a:not(.stack) > .wrap > .hdr > .controls > .num {
    margin-right: 0.75rem;
  }
  .mdl_pillars_a:not(.stack) > .wrap > .hdr > .controls > .prt_btn_b {
    display: flex;
  }
  .mdl_pillars_a:not(.stack) > .wrap > .track > .list {
    --bleed: calc((100vw - 100cqi) / 2);
    margin-inline: calc(-1 * var(--bleed));
    padding-inline: var(--bleed);
    scroll-padding-inline: var(--bleed);
  }
  .mdl_pillars_a:not(.stack) > .wrap > .track > .list > .item {
    flex-basis: 80cqi;
  }
}
.mdl_pillars_a.stack {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
@container (max-width: 1024px) {
  .mdl_pillars_a.stack > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_pillars_a.stack > .dec_a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 100vw) / 2);
  right: calc((100% - 100vw) / 2);
  z-index: -1;
  pointer-events: none;
}
.mdl_pillars_a.stack > .dec_a > .wrap_a {
  position: sticky;
  top: 0;
  height: 100svh;
}
.mdl_pillars_a.stack > .dec_a > .wrap_a > .prt_dec_circle_a {
  --size: 34rem;
  position: absolute;
  top: 55%;
}
.mdl_pillars_a.stack > .dec_a > .wrap_a > .prt_dec_circle_a:first-child {
  left: 0;
  transform: translate(-50%, -50%);
}
.mdl_pillars_a.stack > .dec_a > .wrap_a > .prt_dec_circle_a:last-child {
  right: 0;
  transform: translate(50%, -50%);
}
@container (max-width: 1024px) {
  .mdl_pillars_a.stack > .dec_a {
    display: none !important;
  }
}
.mdl_pillars_a.stack > .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 4rem;
  text-align: center;
}
.mdl_pillars_a.stack > .wrap > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_pillars_a.stack > .wrap > .des {
  max-width: 40rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_pillars_a.stack > .list {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.mdl_pillars_a.stack > .list > .item {
  position: sticky;
  top: calc(4rem + var(--i) * 1rem);
}
.mdl_pillars_a.stack > .list > .item + .item {
  margin-top: -1px;
}
@container (max-width: 1024px) {
  .mdl_pillars_a.stack {
    padding-block: 4rem;
  }
  .mdl_pillars_a.stack > .wrap {
    margin-bottom: 3rem;
  }
  .mdl_pillars_a.stack > .list > .item {
    position: relative;
    top: auto;
  }
}
@container (max-width: 645px) {
  .mdl_pillars_a.stack > .wrap {
    margin-bottom: 2rem;
  }
}
@container (max-width: 1024px) {
  .mdl_pillars_a.stack {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_pillars_a.stack {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_services_list_a - Every service, grouped by category
   The stack-scroll design of mdl_stack_scroll_a (shared stack-scroll()
   mixin, same markup, same core.js mdlStackScrollA): the original stack
   (blk_stack_a) pinned on the left lights each category's layers; on the
   right one screen-tall chapter per category in alternating full-width
   bands: title (last word accent), description (option `chapters`), its
   services as blk_link_list_a, Explore to the category page. Dots, pinned
   rotating circle, centre x-line and the 7 grid lines as in the original.
   Above it, the section header as its own band: mono count, title and
   description, then one row of the categories (blk_route_card_a compact
   inline, jumping to each chapter).
   ========================================================================== */
.mdl_services_list_a {
  position: relative;
  z-index: 0;
}
.mdl_services_list_a > .content .side_a > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12svh;
  padding-left: 6rem;
}
.mdl_services_list_a > .content .side_a > .wrap > .prt_dec_dots_a {
  position: absolute;
  top: 5rem;
  left: 0;
}
.mdl_services_list_a > .content .side_a > .wrap > .blk_stack_a,
.mdl_services_list_a > .content .side_a > .wrap > .blk_stack_b,
.mdl_services_list_a > .content .side_a > .wrap > .blk_stack_c {
  --size: clamp(16rem, min(38cqi, (88svh - 8rem) * 0.63), 28rem);
}
.mdl_services_list_a > .content .side_b {
  padding-left: 3rem;
}
.mdl_services_list_a > .content .side_b > .item {
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_services_list_a > .content .side_b > .item {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_services_list_a > .content .side_b > .item {
    --screen-h: 100svh;
  }
}
.mdl_services_list_a > .content .side_b > .item {
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 4rem;
}
.mdl_services_list_a > .content .side_b > .item > .title {
  font-size: clamp(2rem, 1.5434782609rem + 1.5217391304cqi, 2.875rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_services_list_a > .content .side_b > .item > .des {
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--var_txt_clr_b);
}
.mdl_services_list_a > .content .side_b > .item > .blk_link_list_a,
.mdl_services_list_a > .content .side_b > .item > .blk_point_grid_a {
  width: 100%;
  max-width: 38rem;
}
.mdl_services_list_a > .content .side_b > .item > .blk_stats_a,
.mdl_services_list_a > .content .side_b > .item > .blk_quote_a {
  width: 100%;
  max-width: 38rem;
}
.mdl_services_list_a > .content .side_b > .item > .blk_stats_a {
  margin-top: 1.5rem;
}
.mdl_services_list_a > .content .side_b > .item > .blk_stats_a + .blk_quote_a {
  margin-top: 0;
}
.mdl_services_list_a > .content .side_b > .item > .blk_quote_a {
  margin-top: 1.5rem;
}
.mdl_services_list_a > .content .side_b > .item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: -100vw;
  z-index: -1;
  background: var(--var_bg_a);
}
.mdl_services_list_a > .content .side_b > .item:nth-child(even)::before {
  background: var(--var_bg_b);
}
.mdl_services_list_a > .content .side_b > .item::before {
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.mdl_services_list_a > .dec_a {
  position: absolute;
  inset-block: 0;
  left: 0;
  right: calc((100% - 100vw) / 2);
  z-index: -1;
  pointer-events: none;
}
.mdl_services_list_a > .dec_a > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
}
.mdl_services_list_a > .dec_a > .wrap > .prt_dec_circle_a {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}
.mdl_services_list_a > .dec_b {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.mdl_services_list_a > .dec_b > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mdl_services_list_a > .dec_b > .wrap > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: color-mix(in srgb, var(--var_txt_clr_b) 40%, transparent);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_b) 40%, transparent);
}
.mdl_services_list_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_services_list_a > .content .side_a,
  .mdl_services_list_a > .dec_a,
  .mdl_services_list_a > .dec_b,
  .mdl_services_list_a > .prt_dec_grid_a {
    display: none !important;
  }
}
@container (max-width: 1024px) {
  .mdl_services_list_a > .content .side_b {
    padding-left: 0;
  }
  .mdl_services_list_a > .content .side_b > .item {
    min-height: 0;
    padding-block: 3rem;
  }
  .mdl_services_list_a > .content .side_b > .item > .blk_link_list_a,
  .mdl_services_list_a > .content .side_b > .item > .blk_point_grid_a,
  .mdl_services_list_a > .content .side_b > .item > .blk_stats_a {
    max-width: none;
  }
  .mdl_services_list_a > .content .side_b > .item > .blk_quote_a {
    max-width: 48rem;
  }
}
.mdl_services_list_a > .hdr {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding-block: 6rem 4rem;
  background: var(--var_bg_a);
}
.mdl_services_list_a > .hdr > .prt_dec_grid_a {
  z-index: -1;
}
.mdl_services_list_a > .hdr > .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 44rem;
}
.mdl_services_list_a > .hdr > .wrap > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_services_list_a > .hdr > .wrap > .title {
  margin: 0;
  font-size: clamp(2.25rem, 1.597826087rem + 2.1739130435cqi, 3.5rem);
  line-height: 1.05;
  color: var(--var_hdr_clr_a);
}
.mdl_services_list_a > .hdr > .wrap > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_services_list_a > .hdr > .wrap > .des {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_services_list_a > .hdr > .list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--var_bdr_clr_a);
  border-left: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_b);
}
.mdl_services_list_a > .hdr > .list > .item {
  border-right: 1px solid var(--var_bdr_clr_a);
  border-bottom: 1px solid var(--var_bdr_clr_a);
}
.mdl_services_list_a > .hdr > .list > .item .count {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--var_txt_clr_b);
}
@container (max-width: 1024px) {
  .mdl_services_list_a > .hdr {
    gap: 2rem;
    padding-block: 4rem 3rem;
  }
}
@container (max-width: 1024px) {
  .mdl_services_list_a > .hdr > .list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .mdl_services_list_a > .hdr > .list > .item {
    grid-column: span 2;
  }
  .mdl_services_list_a > .hdr > .list > .item:nth-child(3n+1):last-child {
    grid-column: span 6;
  }
  .mdl_services_list_a > .hdr > .list > .item:nth-child(3n+1):nth-last-child(2),
  .mdl_services_list_a > .hdr > .list > .item:nth-child(3n+2):last-child {
    grid-column: span 3;
  }
}
@container (max-width: 645px) {
  .mdl_services_list_a > .hdr > .list > .item:nth-child(n):nth-last-child(n) {
    grid-column: span 3;
  }
  .mdl_services_list_a > .hdr > .list > .item:nth-child(odd):last-child {
    grid-column: span 6;
  }
}
@container (max-width: 480px) {
  .mdl_services_list_a > .hdr > .list > .item:nth-child(n):nth-last-child(n),
  .mdl_services_list_a > .hdr > .list > .item:nth-child(odd):last-child {
    grid-column: span 6;
  }
}

/* ==========================================================================
   Module: mdl_card_grid_a - Heading + linked cards on the grid lines
   Six columns = the 7 container grid lines. Left (cols 1-2, sticky): mono
   label, title (<mark> accent), description, drawing x-line. Right (cols
   3-6): blk_route_card_a cells two across (each on 2 grid columns; mono
   index or icon, title, text, arrow) with shared dashed lines and a
   striped filler for an odd count. Without a heading (no_hdr) the cards
   run three across the full width. Stacks at md, one column at sm.
   ========================================================================== */
.mdl_card_grid_a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  padding-block: 6rem;
}
.mdl_card_grid_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_card_grid_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_card_grid_a > .hdr {
  grid-column: 1/span 2;
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 2rem;
}
.mdl_card_grid_a > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_card_grid_a > .hdr > .title {
  margin: 0;
  font-size: clamp(1.875rem, 1.4836956522rem + 1.3043478261cqi, 2.625rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_card_grid_a > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_card_grid_a > .hdr > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_card_grid_a > .hdr > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_txt_clr_a);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  width: 100%;
  margin-top: 1rem;
}
.mdl_card_grid_a > .list {
  grid-column: 3/span 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_card_grid_a > .list > .item {
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_card_grid_a > .list > .dec_a {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
.mdl_card_grid_a.no_hdr > .list {
  grid-column: 1/-1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mdl_card_grid_a.no_hdr > .list > .dec_a {
  display: none;
}
@container (max-width: 1024px) {
  .mdl_card_grid_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
    padding-block: 4rem;
  }
  .mdl_card_grid_a > .hdr,
  .mdl_card_grid_a > .list {
    grid-column: auto;
  }
  .mdl_card_grid_a > .hdr {
    position: static;
    padding-right: 0;
    max-width: 40rem;
  }
  .mdl_card_grid_a.no_hdr > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 645px) {
  .mdl_card_grid_a > .list, .mdl_card_grid_a.no_hdr > .list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_card_grid_a > .list > .dec_a, .mdl_card_grid_a.no_hdr > .list > .dec_a {
    display: none;
  }
}
@container (max-width: 1024px) {
  .mdl_card_grid_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_card_grid_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_page_head_a - Page header
   Six columns = the 7 container grid lines. Left (cols 1–4): back link
   (prt_btn_d.rev), accent icon + mono label, the h1 and the standfirst.
   Right (cols 5–6, bottom): the note as a cell (mono accent label + text,
   dashed border, solid --var_bg_b so it covers the lines); without a note
   a drawing x-line closes the column. Dots top right. Clears the fixed
   header. Stacks at md. Same frame as mdl_case_hero_a.
   ========================================================================== */
.mdl_page_head_a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  min-height: 30rem;
  padding-block: 8rem 4rem;
}
.mdl_page_head_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_page_head_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_page_head_a > .side_a {
  grid-column: 1/span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 4rem;
}
.mdl_page_head_a > .side_a > .prt_btn_d {
  margin-bottom: 2rem;
  font-size: 0.8125rem;
}
.mdl_page_head_a > .side_a > .hdr {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.mdl_page_head_a > .side_a > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_page_head_a > .side_a > .title {
  margin: 0;
  font-size: clamp(2.5rem, 1.5869565217rem + 3.0434782609cqi, 4.25rem);
  line-height: 1.04;
  color: var(--var_hdr_clr_a);
}
.mdl_page_head_a > .side_a > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_page_head_a > .side_a > .des {
  max-width: 44rem;
  margin: 0.5rem 0 0;
  font-size: clamp(1.0625rem, 0.964673913rem + 0.3260869565cqi, 1.25rem);
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_page_head_a > .side_b {
  grid-column: 5/span 2;
}
.mdl_page_head_a > .side_b > .body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--var_bg_b);
  border: 1px dashed var(--var_bdr_clr_a);
}
.mdl_page_head_a > .side_b > .body > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_page_head_a > .side_b > .body > .des {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--var_txt_clr_a);
}
.mdl_page_head_a > .side_b > .prt_dec_xline_a {
  width: 100%;
  padding-inline: 1.5rem;
  margin-bottom: 1rem;
}
.mdl_page_head_a > .prt_dec_dots_a {
  position: absolute;
  top: 8rem;
  right: 2rem;
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_page_head_a {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
    min-height: 0;
    padding-block: 8rem 3rem;
  }
  .mdl_page_head_a > .side_a,
  .mdl_page_head_a > .side_b {
    grid-column: auto;
  }
  .mdl_page_head_a > .side_a {
    padding-right: 0;
  }
  .mdl_page_head_a > .side_b {
    max-width: 40rem;
  }
  .mdl_page_head_a > .side_b > .prt_dec_xline_a {
    display: none;
  }
  .mdl_page_head_a > .prt_dec_dots_a {
    display: none;
  }
}

/* ==========================================================================
   Module: mdl_steps_strip_a - Heading + numbered steps in one row
   Heading row on the grid: mono label, title, description on the left
   (cols 1–4), the optional outline button bottom right. Then the steps as
   blk_case_step_a cells in one row (--n across, set by the partial) with
   shared dashed lines (the list draws top + left, each cell right +
   bottom; the solid cells cover the grid lines). Two across at md, one at
   sm. 7 grid lines behind.
   ========================================================================== */
.mdl_steps_strip_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_steps_strip_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_steps_strip_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_steps_strip_a > .hdr {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 2rem 0;
  margin-bottom: 3rem;
}
.mdl_steps_strip_a > .hdr > .wrap {
  grid-column: 1/span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 4rem;
}
.mdl_steps_strip_a > .hdr > .wrap > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_steps_strip_a > .hdr > .wrap > .title {
  margin: 0;
  font-size: clamp(1.875rem, 1.4836956522rem + 1.3043478261cqi, 2.625rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_steps_strip_a > .hdr > .wrap > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_steps_strip_a > .hdr > .wrap > .des {
  max-width: 40rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_steps_strip_a > .hdr > .prt_btn_a {
  grid-column: 5/span 2;
  justify-self: end;
}
.mdl_steps_strip_a > .list {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_steps_strip_a > .list > .item {
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
@container (max-width: 1024px) {
  .mdl_steps_strip_a {
    padding-block: 4rem;
  }
  .mdl_steps_strip_a > .hdr {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_steps_strip_a > .hdr > .wrap,
  .mdl_steps_strip_a > .hdr > .prt_btn_a {
    grid-column: auto;
  }
  .mdl_steps_strip_a > .hdr > .wrap {
    padding-right: 0;
  }
  .mdl_steps_strip_a > .hdr > .prt_btn_a {
    justify-self: start;
  }
  .mdl_steps_strip_a > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 645px) {
  .mdl_steps_strip_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Module: mdl_team_grid_a - Heading + team members
   Heading on the left four of the six grid columns (title, description);
   modifier lead (heading h1, set by the partial) = first section of the
   page, clears the fixed header with a larger title. Then the members as
   blk_member_card_a cells three across (two grid columns each) with
   shared dashed lines (the list draws top + left, each cell right +
   bottom) and striped fillers closing an incomplete last row. Two across
   at sm, one at ms. 7 grid lines behind.
   ========================================================================== */
.mdl_team_grid_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_team_grid_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_team_grid_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_team_grid_a > .hdr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 66.6666666667%;
  margin-bottom: 3rem;
  padding-right: 4rem;
}
.mdl_team_grid_a > .hdr > .title {
  margin: 0;
  font-size: clamp(1.875rem, 1.4836956522rem + 1.3043478261cqi, 2.625rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_team_grid_a > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_team_grid_a > .hdr > .des {
  max-width: 40rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_team_grid_a.lead {
  padding-top: 8rem;
}
.mdl_team_grid_a.lead > .hdr > .title {
  font-size: clamp(2.5rem, 1.5869565217rem + 3.0434782609cqi, 4.25rem);
  line-height: 1.04;
}
.mdl_team_grid_a > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_team_grid_a > .list > .item {
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_team_grid_a > .list > .item > .blk_member_card_a {
  height: 100%;
}
.mdl_team_grid_a > .list > .dec_a {
  background: linear-gradient(-45deg, var(--var_bdr_clr_a) 0, var(--var_bdr_clr_a) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% - 0.5px), var(--var_bdr_clr_a) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_bdr_clr_a) calc(100% - 0.5px), var(--var_bdr_clr_a) 100%) 0 0/10px 10px;
}
.mdl_team_grid_a > .list > .fill_2 {
  display: none;
}
@container (max-width: 1024px) {
  .mdl_team_grid_a {
    padding-block: 4rem;
  }
  .mdl_team_grid_a > .hdr {
    width: auto;
    padding-right: 0;
  }
  .mdl_team_grid_a.lead {
    padding-top: 8rem;
  }
}
@container (max-width: 645px) {
  .mdl_team_grid_a > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_team_grid_a > .list > .fill_3 {
    display: none;
  }
  .mdl_team_grid_a > .list > .fill_2 {
    display: block;
  }
}
@container (max-width: 480px) {
  .mdl_team_grid_a > .list > .fill_2 {
    display: none;
  }
}
@container (max-width: 480px) {
  .mdl_team_grid_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 1024px) {
  .mdl_team_grid_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_team_grid_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_case_grid_a - Case studies with a type filter
   Heading on the left four of the six grid columns. Filter row of
   prt_btn_e buttons (aria-pressed = selected; shown once core.js
   mdlCaseGridA has wired them, state is_ready — no JS = every case, no
   filters) with a screen-reader status line. Then the cases as
   blk_route_card_a cells three across (two grid columns each: index or
   lock, client label, title, hook, services as points, Read Case Study /
   Request Access) with shared dashed lines. Two across at md, one at sm.
   7 grid lines behind.
   ========================================================================== */
.mdl_case_grid_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_case_grid_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_case_grid_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_case_grid_a > .hdr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 66.6666666667%;
  margin-bottom: 2rem;
  padding-right: 4rem;
}
.mdl_case_grid_a > .hdr > .title {
  margin: 0;
  font-size: clamp(1.875rem, 1.4836956522rem + 1.3043478261cqi, 2.625rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_case_grid_a > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_case_grid_a > .hdr > .des {
  max-width: 40rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_case_grid_a > .controls {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.mdl_case_grid_a > .controls > .label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mdl_case_grid_a.is_ready > .controls {
  display: flex;
}
.mdl_case_grid_a > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--var_bdr_clr_a);
  border-left: 1px dashed var(--var_bdr_clr_a);
}
.mdl_case_grid_a > .list > .item {
  scroll-margin-top: var(--hdr-h);
  border-right: 1px dashed var(--var_bdr_clr_a);
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
@container (max-width: 1024px) {
  .mdl_case_grid_a {
    padding-block: 4rem;
  }
  .mdl_case_grid_a > .hdr {
    width: auto;
    padding-right: 0;
  }
  .mdl_case_grid_a > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 645px) {
  .mdl_case_grid_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 1024px) {
  .mdl_case_grid_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_case_grid_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_subnav_a - Section sub-menu
   Sits under the fixed site header (top padding clears it) on a dashed
   bottom line: mono caps links centered in a row, the current page
   (aria-current) and hover in accent with an accent underline. When the
   links don't fit (phones) it is one row that swipes sideways, out to the
   screen's edges: the current page scrolled into view, an edge with more
   links past it faded (is_more_start / is_more_end, core.js mdlSubnavA).
   ========================================================================== */
.mdl_subnav_a {
  padding-top: 6rem;
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.mdl_subnav_a > .list {
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.mdl_subnav_a > .list > .item {
  flex-shrink: 0;
}
.mdl_subnav_a > .list > .item:first-child {
  margin-left: auto;
}
.mdl_subnav_a > .list > .item:last-child {
  margin-right: auto;
}
.mdl_subnav_a .link {
  display: block;
  padding-block: 1rem;
  border-bottom: 2px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.mdl_subnav_a .link:hover, .mdl_subnav_a .link[aria-current] {
  color: var(--var_acnt_clr_a);
  border-color: var(--var_acnt_clr_a);
  text-decoration: none;
}
.mdl_subnav_a .link:focus-visible {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: -2px;
}
@media (pointer: coarse) {
  .mdl_subnav_a .link {
    min-width: 2.75rem;
    text-align: center;
  }
}
@container (max-width: 645px) {
  .mdl_subnav_a > .list {
    gap: 1.5rem;
  }
}
@container (max-width: 480px) {
  .mdl_subnav_a > .list {
    margin-inline: calc(-1 * clamp(1rem, 4.2vw, 2rem));
    padding-inline: clamp(1rem, 4.2vw, 2rem);
    scroll-padding-inline: clamp(1rem, 4.2vw, 2rem);
  }
}
.mdl_subnav_a.is_more_end > .list {
  mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
}
.mdl_subnav_a.is_more_start > .list {
  mask-image: linear-gradient(to left, #000 calc(100% - 4rem), transparent);
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 4rem), transparent);
}
.mdl_subnav_a.is_more_start.is_more_end > .list {
  mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
@media (prefers-reduced-motion: reduce) {
  .mdl_subnav_a .link {
    transition: none;
  }
}

/* ==========================================================================
   Module: mdl_case_guard_a - Case study "Where people stay in charge"
   Six columns = the 7 container grid lines. Meant for a dark row.
   Layout list (default): the person-list design (mxn person-list): a person
   standing on the bottom edge in the left half, a striped circle behind
   them; the mono count, the title (<mark> accent) and the guardrails as
   blk_point_list_a cells (shield icons) on cols 4-6. Without a person: the
   heading on cols 1-2, the listing on cols 3-6. Dots top left.
   Layout cards: centred header (count, shield, title), the guardrails as
   blk_step_a cards three across on the middle four columns, every row
   centred.
   Layout panel: a large accent shield, title, description and a drawing
   x-line sticky on cols 1-2; on cols 3-6 a control panel (solid border, a
   faint step lighter): a pulsing status dot and "Guardrails · N active",
   then one row per guardrail: mono accent index, the statement, a
   switched-on toggle. Dots bottom left.
   Stacks at md.
   Keys: guardrails (list of strings), as stored in mdl_case_body_a.
   ========================================================================== */
.mdl_case_guard_a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  padding-block: 6rem;
}
.mdl_case_guard_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_case_guard_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_case_guard_a > .prt_dec_dots_a {
  position: absolute;
  bottom: 1rem;
  left: 2rem;
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_case_guard_a > .prt_dec_dots_a {
    display: none !important;
  }
}
.mdl_case_guard_a.list > .hdr {
  grid-column: 1/span 2;
  grid-row: 1;
  position: sticky;
  top: var(--hdr-h);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding-right: 2rem;
}
.mdl_case_guard_a.list > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_case_guard_a.list > .hdr > .title {
  margin: 0;
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_case_guard_a.list > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_case_guard_a.list > .hdr > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_case_guard_a.list > .body {
  grid-column: 3/span 4;
  grid-row: 1;
}
.mdl_case_guard_a.list > .media {
  display: none;
}
.mdl_case_guard_a.list.has_img {
  align-content: center;
  row-gap: 2rem;
  min-height: clamp(36rem, 72svh, 44rem);
}
.mdl_case_guard_a.list.has_img > .media {
  position: absolute;
  right: calc(33.3333333333% + 1.5rem);
  bottom: 0;
  display: block;
  height: calc(100% - 2rem);
  max-width: calc(66.6666666667% - 1.5rem);
  aspect-ratio: var(--ratio, 1);
  pointer-events: none;
}
.mdl_case_guard_a.list.has_img > .media > .prt_img_a {
  position: absolute;
  inset: 0;
}
.mdl_case_guard_a.list.has_img > .media > .prt_dec_dots_a {
  position: absolute;
  top: 0;
  left: 2rem;
  z-index: -1;
}
.mdl_case_guard_a.list.has_img > .media > .dec_a {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  translate: -50% 50%;
}
.mdl_case_guard_a.list.has_img > .media > .dec_a > .prt_dec_circle_a {
  --size: min(46rem, 50vw);
}
.mdl_case_guard_a.list.has_img > .hdr,
.mdl_case_guard_a.list.has_img > .body {
  grid-column: 5/span 2;
}
.mdl_case_guard_a.list.has_img > .hdr {
  position: static;
  padding-right: 0;
  padding-left: 1.5rem;
}
.mdl_case_guard_a.list.has_img > .hdr > .title {
  font-size: clamp(1.875rem, 1.4836956522rem + 1.3043478261cqi, 2.625rem);
}
.mdl_case_guard_a.list.has_img > .body {
  grid-row: 2;
}
.mdl_case_guard_a.list.img_flip > .media > .prt_img_a {
  scale: -1 1;
  --tag-flip: -1;
}
@container (max-width: 1024px) {
  .mdl_case_guard_a.list > .hdr,
  .mdl_case_guard_a.list > .body {
    grid-column: 1/-1;
    padding-inline: 0;
  }
  .mdl_case_guard_a.list > .hdr {
    position: static;
  }
  .mdl_case_guard_a.list > .body {
    grid-row: 2;
  }
  .mdl_case_guard_a.list.has_img {
    min-height: 0;
  }
  .mdl_case_guard_a.list.has_img > .hdr,
  .mdl_case_guard_a.list.has_img > .body {
    grid-column: 1/-1;
  }
  .mdl_case_guard_a.list.has_img > .hdr {
    padding-left: 0;
  }
  .mdl_case_guard_a.list.has_img > .media {
    display: none;
  }
}
.mdl_case_guard_a.list > .hdr > .title {
  font-size: clamp(1.875rem, 1.4836956522rem + 1.3043478261cqi, 2.625rem);
}
.mdl_case_guard_a.list.has_img {
  padding-block: 5rem;
}
.mdl_case_guard_a.panel > .hdr {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  grid-column: 1/span 2;
  position: sticky;
  top: var(--hdr-h);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-right: 2rem;
}
.mdl_case_guard_a.panel > .hdr > .title {
  margin: 0;
  font-size: clamp(1.875rem, 1.4836956522rem + 1.3043478261cqi, 2.625rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_case_guard_a.panel > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_case_guard_a.panel > .hdr > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_case_guard_a.panel > .hdr > .prt_dec_xline_a {
  --var_dec_xline_mark_clr: var(--var_acnt_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_txt_clr_a);
  --var_dec_xline_line_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  width: 100%;
  margin-top: 1rem;
}
.mdl_case_guard_a.panel > .body {
  grid-column: 3/span 4;
  border: 1px solid var(--var_bdr_clr_a);
  background: color-mix(in srgb, var(--var_hdr_clr_a) 3%, var(--var_bg_a));
}
.mdl_case_guard_a.panel > .body > .hdr {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--var_bdr_clr_a);
}
.mdl_case_guard_a.panel > .body > .hdr > .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--var_acnt_clr_a);
  animation: mdl_case_guard_a_pulse 2s ease-in-out infinite;
}
.mdl_case_guard_a.panel > .body > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_case_guard_a.panel > .body > .list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_case_guard_a.panel > .body > .list > .item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
}
.mdl_case_guard_a.panel > .body > .list > .item + .item {
  border-top: 1px solid var(--var_bdr_clr_a);
}
.mdl_case_guard_a.panel > .body > .list > .item > .num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--var_acnt_clr_a);
}
.mdl_case_guard_a.panel > .body > .list > .item > .des {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1rem, 0.902173913rem + 0.3260869565cqi, 1.1875rem);
  line-height: 1.45;
  color: var(--var_hdr_clr_a);
}
.mdl_case_guard_a.panel > .body > .list > .item > .toggle {
  position: relative;
  width: 2.5rem;
  height: 1.375rem;
  border-radius: 1rem;
  background: var(--var_acnt_clr_a);
}
.mdl_case_guard_a.panel > .body > .list > .item > .toggle > .knob {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--var_bg_a);
}
.mdl_case_guard_a.cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
.mdl_case_guard_a.cards > .hdr {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 44rem;
  text-align: center;
}
.mdl_case_guard_a.cards > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_case_guard_a.cards > .hdr > .title {
  margin: 0;
  font-size: clamp(1.875rem, 1.4836956522rem + 1.3043478261cqi, 2.625rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_case_guard_a.cards > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_case_guard_a.cards > .hdr > .des {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--var_txt_clr_b);
}
.mdl_case_guard_a.cards > .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  width: 66.6666666667%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_case_guard_a.cards > .list > .item {
  flex: 0 1 calc((100% - 1.5rem * 2) / 3);
}
@container (max-width: 1024px) {
  .mdl_case_guard_a {
    padding-block: 4rem;
  }
  .mdl_case_guard_a.panel {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3rem;
  }
  .mdl_case_guard_a.panel > .hdr,
  .mdl_case_guard_a.panel > .body {
    grid-column: auto;
  }
  .mdl_case_guard_a.panel > .hdr {
    position: static;
    padding-right: 0;
  }
  .mdl_case_guard_a.list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }
  .mdl_case_guard_a.cards > .list {
    width: 100%;
  }
  .mdl_case_guard_a.cards > .list > .item {
    flex-basis: calc((100% - 1.5rem) / 2);
  }
}
@container (max-width: 645px) {
  .mdl_case_guard_a.panel > .body > .list > .item {
    gap: 1rem;
    padding: 1rem;
  }
  .mdl_case_guard_a.cards > .list > .item {
    flex-basis: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_case_guard_a.panel > .body > .hdr > .dot {
    animation: none;
  }
}

@keyframes mdl_case_guard_a_pulse {
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--var_acnt_clr_a) 25%, transparent);
  }
}
/* ==========================================================================
   Module: mdl_case_design_a - Case study design showcase
   A full-screen stage (sticky .wrap, 100svh) that stays pinned for one
   screen of scroll per visual (height = --n × 100svh). The visuals (images
   via prt_img_a cover, or videos via prt_video_a.manual) fill the stage and
   crossfade with a slight zoom as you scroll; core.js mdlCaseDesignA sets
   is_active, the counter and the progress (--p), and plays only the active
   video. Over a bottom shade: mono label + the stored design text (left), the
   current visual's title, counter and a progress bar (right), and a Skip
   link (top right) that jumps past the section. 7 grid lines on top. Meant
   for a dark row. md, no JS or reduced motion: not pinned, the visuals
   stack as plain images under the text.
   ========================================================================== */
.mdl_case_design_a {
  position: relative;
  height: calc(var(--n) * 100svh);
}
.mdl_case_design_a > .wrap {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  margin-inline: calc((100% - 100vw) / 2);
}
.mdl_case_design_a > .wrap > .list > .item {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0;
  scale: 1.06;
  transition: opacity 0.7s ease, scale 1.2s ease;
}
.mdl_case_design_a > .wrap > .list > .item.is_active {
  opacity: 1;
  scale: 1;
}
.mdl_case_design_a > .wrap > .list > .item > .prt_img_a,
.mdl_case_design_a > .wrap > .list > .item > .prt_video_a {
  position: absolute;
  inset: 0;
}
.mdl_case_design_a > .wrap::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--var_bg_a) 92%, transparent), transparent);
  pointer-events: none;
}
.mdl_case_design_a > .wrap > .prt_dec_grid_a {
  z-index: 1;
  opacity: 0.5;
}
@container (max-width: 1024px) {
  .mdl_case_design_a > .wrap > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_case_design_a > .wrap > .body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  width: min(100% - 2 * var(--page-inset, clamp(1rem, 4.2vw, 2rem)), 1400px);
  margin-inline: auto;
  padding-block: 6rem 3rem;
}
.mdl_case_design_a > .wrap > .body > .side_a {
  grid-column: 1/span 4;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-right: 3rem;
}
.mdl_case_design_a > .wrap > .body > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_case_design_a > .wrap > .body > .side_a > .des {
  max-width: 46rem;
  margin: 0;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1.125rem, 0.9293478261rem + 0.652173913cqi, 1.5rem);
  line-height: 1.45;
  color: var(--var_hdr_clr_a);
}
.mdl_case_design_a > .wrap > .body > .side_b {
  grid-column: 5/span 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
}
.mdl_case_design_a > .wrap > .body > .side_b > .controls {
  --var_icn_a_clr: currentColor;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--var_hdr_clr_a);
  background: color-mix(in srgb, var(--var_bg_a) 60%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_hdr_clr_a);
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.mdl_case_design_a > .wrap > .body > .side_b > .controls:hover, .mdl_case_design_a > .wrap > .body > .side_b > .controls:focus-visible {
  border-color: var(--var_acnt_clr_a);
  background: var(--var_acnt_clr_a);
  color: var(--var_bg_a);
}
.mdl_case_design_a > .wrap > .body > .side_b > .num {
  display: grid;
  justify-items: end;
  gap: 0.5rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mdl_case_design_a > .wrap > .body > .side_b > .num > .sub {
  grid-area: 1/1;
  font-size: 0.875rem;
  color: var(--var_hdr_clr_a);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.mdl_case_design_a > .wrap > .body > .side_b > .num > .sub.is_active {
  opacity: 1;
}
.mdl_case_design_a > .wrap > .body > .side_b > .num > .label {
  font-size: 0.75rem;
  color: var(--var_txt_clr_b);
}
.mdl_case_design_a > .wrap > .body > .side_b > .num > .label > .item {
  color: var(--var_acnt_clr_a);
}
.mdl_case_design_a > .wrap > .body > .side_b > .bottom {
  width: 100%;
  height: 2px;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 25%, transparent);
}
.mdl_case_design_a > .wrap > .body > .side_b > .bottom > .item {
  display: block;
  width: calc(var(--p, 0) * 100%);
  height: 100%;
  background: var(--var_acnt_clr_a);
}
.mdl_case_design_a > .dec_a {
  position: absolute;
  bottom: 0;
}
@container (max-width: 1024px) {
  .mdl_case_design_a {
    height: auto;
  }
  .mdl_case_design_a > .wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    margin-inline: 0;
    padding-bottom: 4rem;
  }
  .mdl_case_design_a > .wrap::after {
    display: none;
  }
  .mdl_case_design_a > .wrap > .list {
    display: grid;
    gap: 1rem;
  }
  .mdl_case_design_a > .wrap > .list > .item {
    position: relative;
    inset: auto;
    z-index: 0;
    aspect-ratio: 16/10;
    opacity: 1;
    scale: 1;
  }
  .mdl_case_design_a > .wrap > .body {
    position: relative;
    order: -1;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding-block: 4rem 2rem;
  }
  .mdl_case_design_a > .wrap > .body > .side_a,
  .mdl_case_design_a > .wrap > .body > .side_b {
    grid-column: auto;
    padding-right: 0;
  }
  .mdl_case_design_a > .wrap > .body > .side_b > .controls,
  .mdl_case_design_a > .wrap > .body > .side_b > .num,
  .mdl_case_design_a > .wrap > .body > .side_b > .bottom {
    display: none;
  }
  .mdl_case_design_a > .wrap > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mdl_case_design_a > .wrap > .list > .item:nth-child(odd):last-child {
    grid-column: 1/-1;
  }
}
@container (max-width: 645px) {
  .mdl_case_design_a > .wrap {
    padding-bottom: 3rem;
  }
  .mdl_case_design_a > .wrap > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_case_design_a > .wrap > .list > .item {
    transition: none;
  }
}

/* ==========================================================================
   Module: mdl_card_list_a - Card listing (three across)
   Plain step cards (blk_step_a.top with ruler: false — no ruler or number:
   graphic panel on top, icon, title, description, link) three across on the
   grid lines, under a header on the left (label, title, des, optional
   button). Each card's cell spans exactly two grid columns (no column gap;
   the air between cards is equal padding on both sides of each cell), so a
   grid line runs down the middle of every card and the others through the
   gaps. Nothing pins. 2 across at md, 1 at sm. Options: link_text (every
   card's link label), btn_text / btn_link.
   ========================================================================== */
.mdl_card_list_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_card_list_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_card_list_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_card_list_a > .hdr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 44rem;
}
.mdl_card_list_a > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_card_list_a > .hdr > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_card_list_a > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_card_list_a > .hdr > .des {
  max-width: 34rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_card_list_a > .hdr > .prt_btn_a {
  margin-top: 0.75rem;
}
.mdl_card_list_a > .list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 3rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.mdl_card_list_a > .list > .item {
  padding-inline: 1rem;
}
@container (max-width: 1024px) {
  .mdl_card_list_a {
    padding-block: 4rem;
  }
  .mdl_card_list_a > .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (max-width: 645px) {
  .mdl_card_list_a > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 1024px) {
  .mdl_card_list_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_card_list_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_card_list_b - Card listing (two across)
   The cards of mdl_process_b (blk_process_card_a: number, icon, title,
   description | striped panel with an isometric slice; icon from the title
   and slice in turn when missing) as a grid, under a centered header
   (label, title, des, optional button). No pinned stage. 1 across at md.
   Options: btn_text / btn_link.
   ========================================================================== */
.mdl_card_list_b {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
.mdl_card_list_b > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_card_list_b > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_card_list_b > .hdr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}
.mdl_card_list_b > .hdr > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_card_list_b > .hdr > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_card_list_b > .hdr > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_card_list_b > .hdr > .des {
  max-width: 48rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_card_list_b > .hdr > .prt_btn_a {
  margin-top: 0.75rem;
}
.mdl_card_list_b > .list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.mdl_card_list_b > .list > .item > .blk_process_card_a {
  height: 100%;
}
@container (max-width: 1024px) {
  .mdl_card_list_b {
    padding-block: 4rem;
  }
  .mdl_card_list_b > .list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 1024px) {
  .mdl_card_list_b {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_card_list_b {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* ==========================================================================
   Module: mdl_agents_a - "With agents"
   Label (sparkles + mono caps), title and text centered on the grid lines;
   around them a ring of agents (blk_agent_a, chip variant: a bot on a
   tinted square inside a framed tile with a very soft glow, four corner
   brackets, the role as an icon chip on the tile, the name under it, a
   pulsing "working" dot; the second accent on every other agent), each
   placed by --x / --y (% of the section) and floating on its own rhythm
   (--i). Hover: the corners step out, the bot tilts, the name and its links
   in the web turn accent (core.js mdlAgentsA adds is_active to the agent
   and its lines; the module passes --open / --tilt to the block). The web
   (.dec_b, an SVG drawn by core.js mdlAgentsA): dashed lines from each
   agent to its nearest neighbours plus bridges across the top and bottom,
   flowing slowly and following the floating agents, a small dot travelling
   along each. Reduced motion: still, no flow. md and below: the agents wrap
   in a row under the text, no web. Variants (class): `side`: text left, the
   agents a 4 × 2 zigzag grid on the right, linked by the web. Service pages
   pick one per page (override `vary`). Keys: label / title / des, or the
   service body's note_label / note_heading / note; optional agents [icon
   (role), label, bot].
   ========================================================================== */
.mdl_agents_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(36rem, 84svh, 48rem);
  padding-block: 6rem;
}
.mdl_agents_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_agents_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_agents_a > .dec_b {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.mdl_agents_a > .dec_b line {
  stroke: color-mix(in srgb, var(--var_txt_clr_a) 28%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  animation: mdl_agents_a_flow 2.4s linear infinite;
  transition: stroke 0.3s ease;
}
.mdl_agents_a > .dec_b line.is_active {
  stroke: var(--var_acnt_clr_a);
}
.mdl_agents_a > .dec_b circle {
  fill: var(--var_acnt_clr_a);
}
@container (max-width: 1024px) {
  .mdl_agents_a > .dec_b {
    display: none !important;
  }
}
.mdl_agents_a > .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 38rem;
  text-align: center;
}
.mdl_agents_a > .content > .label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_agents_a > .content > .title {
  margin: 0;
  font-size: clamp(2.25rem, 1.597826087rem + 2.1739130435cqi, 3.5rem);
  line-height: 1.05;
  color: var(--var_hdr_clr_a);
}
.mdl_agents_a > .content > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_agents_a > .content > .des {
  margin: 0;
  font-size: clamp(1.0625rem, 0.964673913rem + 0.3260869565cqi, 1.25rem);
  line-height: 1.6;
  color: var(--var_txt_clr_a);
}
.mdl_agents_a > .list {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.mdl_agents_a > .list > .item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  pointer-events: auto;
  animation: mdl_agents_a_float calc(5s + var(--i) * 0.6s) ease-in-out calc(var(--i) * -0.9s) infinite;
}
.mdl_agents_a > .list > .item > .blk_agent_a {
  --size: 4.75rem;
  --delay: calc(var(--i) * -.35s);
}
.mdl_agents_a > .list > .item.is_active > .blk_agent_a {
  --open: 1;
  --tilt: -12deg;
  --name-clr: var(--var_acnt_clr_a);
}
.mdl_agents_a.side {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  min-height: 0;
}
.mdl_agents_a.side > .content {
  grid-column: 1/span 3;
  align-items: flex-start;
  padding-right: 3rem;
  text-align: left;
}
.mdl_agents_a.side > .list {
  position: relative;
  inset: auto;
  grid-column: 4/span 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4rem 1rem;
  padding-block: 2rem;
}
.mdl_agents_a.side > .list > .item {
  position: relative;
  left: auto;
  top: auto;
  translate: none;
}
.mdl_agents_a.side > .list > .item:nth-child(even) {
  margin-top: 3rem;
}
@container (max-width: 1024px) {
  .mdl_agents_a {
    min-height: 0;
    padding-block: 4rem;
  }
  .mdl_agents_a.side {
    display: flex;
  }
  .mdl_agents_a.side > .content {
    align-items: center;
    padding-right: 0;
    text-align: center;
  }
  .mdl_agents_a.side > .list > .item:nth-child(even) {
    margin-top: 0;
  }
  .mdl_agents_a > .list, .mdl_agents_a.side > .list {
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 0;
    width: min(100%, 36rem);
    margin: 3rem auto 0;
    padding-block: 0;
    padding-inline: 0.5rem;
  }
  .mdl_agents_a > .list > .item, .mdl_agents_a.side > .list > .item {
    position: static;
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    translate: none;
    animation: none;
  }
}
@container (max-width: 480px) {
  .mdl_agents_a > .list > .item, .mdl_agents_a.side > .list > .item {
    flex-basis: 33.3333333333%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_agents_a > .dec_b line,
  .mdl_agents_a > .list > .item {
    animation: none;
  }
}
@container (max-width: 1024px) {
  .mdl_agents_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_agents_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@keyframes mdl_agents_a_float {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(4px, -10px);
  }
}
@keyframes mdl_agents_a_flow {
  to {
    stroke-dashoffset: -20;
  }
}
/* ==========================================================================
   Module: mdl_banner_a - Full-screen statement
   One screen tall (screen-height, 40rem floor), edge to edge (put it in a
   type-full row): a looping video (prt_video_a, option video + poster) or a
   large cover image (option image, slow parallax) fills the section under a
   shade of the section color (heavier at the bottom, where the text sits);
   the 7 grid lines and dots on top; the statement on the container, bottom
   left: optional mono label, a large title (<mark> in the accent) and, on
   the right half, the description, optional button and a drawing x-line.
   Modifier `cta`: a closing call to action (no media, centered, button).
   Modifier `quote`: a testimonial set across five columns at a reading
   size. Stacks at md. Use a dark theme (thm_black) over video.
   ========================================================================== */
.mdl_banner_a {
  position: relative;
  isolation: isolate;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_banner_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_banner_a {
    --screen-h: 100svh;
  }
}
.mdl_banner_a {
  justify-content: flex-end;
  overflow: hidden;
}
.mdl_banner_a > .dec_a {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.mdl_banner_a > .dec_a > .prt_video_a,
.mdl_banner_a > .dec_a > .prt_img_a {
  position: absolute;
  inset: -6% 0;
}
.mdl_banner_a > .dec_a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--var_bg_a) 62%, transparent), color-mix(in srgb, var(--var_bg_a) 94%, transparent));
}
.mdl_banner_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_banner_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_banner_a > .prt_dec_dots_a {
  position: absolute;
  top: 4rem;
  right: max(2rem, max(var(--page-inset, 0px), (100cqi - 1400px) / 2) + 0.5rem);
}
@container (max-width: 1024px) {
  .mdl_banner_a > .prt_dec_dots_a {
    display: none !important;
  }
}
.mdl_banner_a > .content {
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 1.5rem 0;
  width: 100%;
  padding-block: 8rem 5rem;
}
.mdl_banner_a > .content > .label {
  grid-column: 1/-1;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_banner_a > .content > .title {
  grid-column: 1/span 4;
  margin: 0;
  padding-right: 2rem;
  font-size: clamp(2.5rem, 1.4565217391rem + 3.4782608696cqi, 4.5rem);
  line-height: 1.02;
  color: var(--var_hdr_clr_a);
}
.mdl_banner_a > .content > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_banner_a > .content > .body {
  grid-column: 5/span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.mdl_banner_a > .content > .body > .des {
  margin: 0;
  font-size: clamp(1rem, 0.902173913rem + 0.3260869565cqi, 1.1875rem);
  line-height: 1.65;
  color: var(--var_txt_clr_a);
}
.mdl_banner_a.cta {
  min-height: 0;
}
.mdl_banner_a.cta > .dec_a {
  display: none;
}
.mdl_banner_a.cta > .content {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding-block: 5rem;
  text-align: center;
}
.mdl_banner_a.cta > .content > .title {
  grid-column: 1/-1;
  max-width: 48rem;
  padding-right: 0;
  font-size: clamp(2rem, 1.347826087rem + 2.1739130435cqi, 3.25rem);
}
.mdl_banner_a.cta > .content > .body {
  grid-column: 1/-1;
  align-items: center;
  max-width: 40rem;
}
.mdl_banner_a.cta > .content > .body > .prt_dec_xline_a {
  display: none;
}
.mdl_banner_a.quote > .content > .title {
  grid-column: 1/span 5;
  font-size: clamp(1.625rem, 1.0380434783rem + 1.9565217391cqi, 2.75rem);
  line-height: 1.2;
  font-weight: 500;
}
@container (max-width: 1024px) {
  .mdl_banner_a > .content {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 8rem 4rem;
  }
  .mdl_banner_a > .content > .title,
  .mdl_banner_a > .content > .body {
    grid-column: 1/-1;
  }
  .mdl_banner_a > .content > .title {
    padding-right: 0;
  }
  .mdl_banner_a > .content > .body > .prt_dec_xline_a {
    max-width: 100%;
  }
}

/* ==========================================================================
   Module: mdl_step_stack_a - Process steps as full-width cards
   The card-stack design (card-stack() mixin, as mdl_card_stack_a): centered
   header, then one full-width blk_feature_card_a per step, spaced apart
   (modifier `sticky`: each sticks a little lower than the last, so they
   stack as you scroll, no gaps) — number, icon,
   title and the step's full text (paragraphs and lists) on one half, an
   isometric slice (or the step's image) on the other, alternating right /
   left (flip on every second card). Cards grow with their text. Header adds
   an optional mono label and button. Stacked (md): plain list. Reads
   mdl_process_b's / mdl_tier_a's keys (title, sub + des, items or steps,
   btn_text / btn_link).
   ========================================================================== */
.mdl_step_stack_a {
  position: relative;
  isolation: isolate;
  padding-block: 6rem;
}
@container (max-width: 1024px) {
  .mdl_step_stack_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_step_stack_a > .dec_a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 100vw) / 2);
  right: calc((100% - 100vw) / 2);
  z-index: -1;
  pointer-events: none;
}
.mdl_step_stack_a > .dec_a > .wrap_a {
  position: sticky;
  top: 0;
  height: 100svh;
}
.mdl_step_stack_a > .dec_a > .wrap_a > .prt_dec_circle_a {
  --size: 34rem;
  position: absolute;
  top: 55%;
}
.mdl_step_stack_a > .dec_a > .wrap_a > .prt_dec_circle_a:first-child {
  left: 0;
  transform: translate(-50%, -50%);
}
.mdl_step_stack_a > .dec_a > .wrap_a > .prt_dec_circle_a:last-child {
  right: 0;
  transform: translate(50%, -50%);
}
@container (max-width: 1024px) {
  .mdl_step_stack_a > .dec_a {
    display: none !important;
  }
}
.mdl_step_stack_a > .wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 4rem;
  text-align: center;
}
.mdl_step_stack_a > .wrap > .title {
  margin: 0;
  font-size: clamp(2rem, 1.4782608696rem + 1.7391304348cqi, 3rem);
  line-height: 1.1;
  color: var(--var_hdr_clr_a);
}
.mdl_step_stack_a > .wrap > .des {
  max-width: 40rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_step_stack_a > .list {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.mdl_step_stack_a > .list > .item {
  position: sticky;
  top: calc(4rem + var(--i) * 1rem);
}
.mdl_step_stack_a > .list > .item + .item {
  margin-top: -1px;
}
@container (max-width: 1024px) {
  .mdl_step_stack_a {
    padding-block: 4rem;
  }
  .mdl_step_stack_a > .wrap {
    margin-bottom: 3rem;
  }
  .mdl_step_stack_a > .list > .item {
    position: relative;
    top: auto;
  }
}
@container (max-width: 645px) {
  .mdl_step_stack_a > .wrap {
    margin-bottom: 2rem;
  }
}
@container (max-width: 1024px) {
  .mdl_step_stack_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_step_stack_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
.mdl_step_stack_a > .wrap > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_step_stack_a > .wrap > .title mark {
  background: none;
  color: var(--var_acnt_clr_a);
}
.mdl_step_stack_a > .wrap > .prt_btn_a {
  margin-top: 0.5rem;
}
.mdl_step_stack_a > .list > .item > .blk_feature_card_a {
  --des-w: 36rem;
}
.mdl_step_stack_a:not(.sticky) > .list {
  gap: 2rem;
}
.mdl_step_stack_a:not(.sticky) > .list > .item {
  position: relative;
  top: auto;
}
.mdl_step_stack_a:not(.sticky) > .list > .item + .item {
  margin-top: 0;
}

/* ==========================================================================
   Module: mdl_testimonial_a - One client testimonial, centered
   On the grid lines: an optional mono label, an accent quote mark, the quote
   set large at a reading size (centered, up to ~52rem), and an optional
   attribution (name; role · client in mono). Dots top left drifting, a
   spinning circle half below the bottom edge. For a single quote; several
   go in mdl_quote_grid_a. Keys: quote (or items[0].quote, or des), author,
   role, client, label.
   ========================================================================== */
.mdl_testimonial_a {
  position: relative;
  isolation: isolate;
  --circle: min(30rem, 50vw);
  padding-block: 6rem calc(var(--circle) / 2 + 3rem);
  overflow: hidden;
}
.mdl_testimonial_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_testimonial_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_testimonial_a > .prt_dec_dots_a {
  position: absolute;
  top: 4rem;
  left: 2rem;
}
@container (max-width: 1024px) {
  .mdl_testimonial_a > .prt_dec_dots_a {
    display: none !important;
  }
}
.mdl_testimonial_a > .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
}
.mdl_testimonial_a > .content > .label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.mdl_testimonial_a > .content > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
  width: 3rem;
  height: 3rem;
}
.mdl_testimonial_a > .content > .des {
  margin: 0;
}
.mdl_testimonial_a > .content > .des > p {
  margin: 0;
  font-family: var(--font-header);
  font-weight: 500;
  font-size: clamp(1.375rem, 0.9836956522rem + 1.3043478261cqi, 2.125rem);
  line-height: 1.35;
  color: var(--var_hdr_clr_a);
}
.mdl_testimonial_a > .content > .name {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--var_hdr_clr_a);
}
.mdl_testimonial_a > .content > .name > .sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_testimonial_a > .dec_a {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  translate: -50% 50%;
  pointer-events: none;
}
.mdl_testimonial_a > .dec_a > .prt_dec_circle_a {
  --size: var(--circle);
}
@container (max-width: 1024px) {
  .mdl_testimonial_a {
    padding-block: 4rem calc(var(--circle) / 2 + 2rem);
  }
}

/* ==========================================================================
   Module: mdl_showcase_a - Splash statement for design work
   Full bleed (type-full row), one screen tall, on the grid lines: mono label,
   a large title (steps down when long: long > 60 characters, xlong > 100),
   text and an optional button on the left (cols 1-3); on the
   right a floating collage of a component guide drawn from the system's own
   tokens — palette, type specimen, buttons, an input with a toggle, a
   content card, a redline measurement, an agent tag assembling a piece —
   on a dashed blueprint grid; each piece at its own parallax depth (--x / --y
   / --w place it in % of the collage). Stacks at md (the collage becomes a
   plain grid of the pieces). Best on thm_orange.
   The pieces take the section's theme (on orange: an orange panel a shade
   darker, light borders, white text, dark UI accents); the palette swatches
   always show the real brand colours.
   Colors: --var_showcase_a_card_clr / _ink_clr / _line_clr (pieces),
   _acnt_clr / _on_acnt_clr (their UI accent), _pill_clr / _pill_txt_clr
   (agent tag), _swatch_a…d_clr (palette).
   ========================================================================== */
.mdl_showcase_a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.mdl_showcase_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_showcase_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_showcase_a > .content {
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 46rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_showcase_a > .content {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_showcase_a > .content {
    --screen-h: 100svh;
  }
}
.mdl_showcase_a > .content {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  padding-block: 6rem;
}
.mdl_showcase_a > .content > .side_a {
  grid-column: 1/span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding-right: 3rem;
}
.mdl_showcase_a > .content > .side_a > .label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_hdr_clr_a);
}
.mdl_showcase_a > .content > .side_a > .title {
  margin: 0;
  font-size: clamp(2rem, 1.347826087rem + 2.1739130435cqi, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--var_hdr_clr_a);
}
.mdl_showcase_a > .content > .side_a > .title mark {
  background: none;
  color: var(--var_showcase_a_mark_clr);
}
.mdl_showcase_a > .content > .side_a > .des {
  max-width: 32rem;
  margin: 0;
  font-size: clamp(1rem, 0.902173913rem + 0.3260869565cqi, 1.1875rem);
  line-height: 1.65;
  color: var(--var_txt_clr_a);
}
.mdl_showcase_a > .content > .side_b {
  grid-column: 4/span 3;
  position: relative;
  align-self: stretch;
  min-height: 38rem;
}
.mdl_showcase_a > .content > .side_b > .dec_a {
  position: absolute;
  inset: -2% -6%;
  z-index: -1;
  background: linear-gradient(var(--var_showcase_a_line_clr) 1px, transparent 1px) 0 0/2.5rem 2.5rem, linear-gradient(90deg, var(--var_showcase_a_line_clr) 1px, transparent 1px) 0 0/2.5rem 2.5rem;
  mask: radial-gradient(closest-side, var(--var_showcase_a_ink_clr) 55%, transparent);
}
.mdl_showcase_a > .content > .side_b > .item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, auto);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--var_showcase_a_line_clr);
  background: var(--var_showcase_a_card_clr);
  color: var(--var_showcase_a_ink_clr);
}
.mdl_showcase_a > .content > .side_b > .item > .label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.mdl_showcase_a > .content > .side_b > .palette > .list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.mdl_showcase_a > .content > .side_b > .palette > .list > .swatch {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--var_showcase_a_line_clr);
}
.mdl_showcase_a > .content > .side_b > .palette > .list > .swatch > .name {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mdl_showcase_a > .content > .side_b > .palette > .list > .swatch.acnt_a {
  background: var(--var_showcase_a_swatch_a_clr);
  color: var(--var_showcase_a_swatch_d_clr);
}
.mdl_showcase_a > .content > .side_b > .palette > .list > .swatch.acnt_b {
  background: var(--var_showcase_a_swatch_b_clr);
  color: var(--var_showcase_a_swatch_d_clr);
}
.mdl_showcase_a > .content > .side_b > .palette > .list > .swatch.ink {
  background: var(--var_showcase_a_swatch_c_clr);
  color: var(--var_showcase_a_swatch_d_clr);
}
.mdl_showcase_a > .content > .side_b > .palette > .list > .swatch.paper {
  background: var(--var_showcase_a_swatch_d_clr);
  color: var(--var_showcase_a_swatch_c_clr);
}
.mdl_showcase_a > .content > .side_b > .type {
  rotate: 2deg;
}
.mdl_showcase_a > .content > .side_b > .card {
  rotate: -1.5deg;
}
.mdl_showcase_a > .content > .side_b > .type {
  gap: 0.25rem;
}
.mdl_showcase_a > .content > .side_b > .type > .num {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: clamp(3.5rem, 2.1956521739rem + 4.347826087cqi, 6rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.mdl_showcase_a > .content > .side_b > .type > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.9375rem;
}
.mdl_showcase_a > .content > .side_b > .type > .sub {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.mdl_showcase_a > .content > .side_b > .btn_set > .list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.mdl_showcase_a > .content > .side_b > .btn_set > .list > .btn {
  --var_icn_a_clr: currentColor;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--var_showcase_a_ink_clr);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mdl_showcase_a > .content > .side_b > .btn_set > .list > .btn.solid {
  border-color: var(--var_showcase_a_acnt_clr);
  background: var(--var_showcase_a_acnt_clr);
  color: var(--var_showcase_a_on_acnt_clr);
}
.mdl_showcase_a > .content > .side_b > .field > .box {
  padding: 0.75rem;
  border: 1px solid var(--var_showcase_a_ink_clr);
  font-size: 0.8125rem;
  opacity: 0.7;
}
.mdl_showcase_a > .content > .side_b > .field > .toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.mdl_showcase_a > .content > .side_b > .field > .toggle > .dec_b {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 2px;
  background: var(--var_showcase_a_acnt_clr);
}
.mdl_showcase_a > .content > .side_b > .field > .toggle > .dec_b::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: calc(1.25rem - 6px);
  height: calc(1.25rem - 6px);
  border-radius: 2px;
  background: var(--var_showcase_a_on_acnt_clr);
}
.mdl_showcase_a > .content > .side_b > .card > .thumb {
  aspect-ratio: 16/9;
  border: 1px solid var(--var_showcase_a_line_clr);
  background: linear-gradient(-45deg, var(--var_showcase_a_line_clr) 0, var(--var_showcase_a_line_clr) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), var(--var_showcase_a_line_clr) calc(50% - 0.5px), var(--var_showcase_a_line_clr) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), var(--var_showcase_a_line_clr) calc(100% - 0.5px), var(--var_showcase_a_line_clr) 100%) 0 0/12px 12px;
}
.mdl_showcase_a > .content > .side_b > .card > .name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 1rem;
}
.mdl_showcase_a > .content > .side_b > .card > .des {
  height: 0.5rem;
  background: var(--var_showcase_a_line_clr);
}
.mdl_showcase_a > .content > .side_b > .card > .des.short {
  width: 60%;
}
.mdl_showcase_a > .content > .side_b > .card > .list {
  display: flex;
  gap: 0.5rem;
}
.mdl_showcase_a > .content > .side_b > .card > .list > .tag {
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--var_showcase_a_acnt_clr);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--var_showcase_a_acnt_clr);
}
.mdl_showcase_a > .content > .side_b > .redline {
  height: 0;
  padding: 0;
  border: 0;
  border-top: 1px dashed var(--var_showcase_a_ink_clr);
  background: none;
}
.mdl_showcase_a > .content > .side_b > .redline::before, .mdl_showcase_a > .content > .side_b > .redline::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 9px;
  background: var(--var_showcase_a_ink_clr);
}
.mdl_showcase_a > .content > .side_b > .redline::before {
  left: 0;
}
.mdl_showcase_a > .content > .side_b > .redline::after {
  right: 0;
}
.mdl_showcase_a > .content > .side_b > .redline > .num {
  position: absolute;
  left: 50%;
  top: -1.25rem;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--var_showcase_a_ink_clr);
}
.mdl_showcase_a > .content > .side_b > .agent {
  --var_icn_a_clr: var(--var_showcase_a_swatch_a_clr);
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-color: var(--var_showcase_a_pill_clr);
  background: var(--var_showcase_a_pill_clr);
  color: var(--var_showcase_a_pill_txt_clr);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mdl_showcase_a.long > .content > .side_a > .title {
  font-size: clamp(1.75rem, 1.2282608696rem + 1.7391304348cqi, 2.75rem);
}
.mdl_showcase_a.xlong > .content > .side_a > .title {
  font-size: clamp(1.625rem, 1.2336956522rem + 1.3043478261cqi, 2.375rem);
  line-height: 1.1;
}
@container (max-width: 1024px) {
  .mdl_showcase_a > .content {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 3rem;
    padding-block: 4rem;
  }
  .mdl_showcase_a > .content > .side_a {
    grid-column: 1/-1;
    padding-right: 0;
  }
  .mdl_showcase_a > .content > .side_b {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    min-height: 0;
  }
  .mdl_showcase_a > .content > .side_b > .item {
    position: static;
    width: auto;
    transform: none;
    rotate: none;
  }
  .mdl_showcase_a > .content > .side_b > .field {
    grid-column: 1;
  }
  .mdl_showcase_a > .content > .side_b > .card {
    grid-column: 2;
    grid-row: 2/span 2;
  }
  .mdl_showcase_a > .content > .side_b > .redline,
  .mdl_showcase_a > .content > .side_b > .agent,
  .mdl_showcase_a > .content > .side_b > .dec_a {
    display: none;
  }
}
@container (max-width: 645px) {
  .mdl_showcase_a > .content {
    padding-block: 3rem;
  }
  .mdl_showcase_a > .content > .side_b {
    grid-template-columns: minmax(0, 1fr);
  }
  .mdl_showcase_a > .content > .side_b > .field,
  .mdl_showcase_a > .content > .side_b > .card {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ==========================================================================
   Module: mdl_reveal_a - "Your users never see the agents. They see the design."
   A custom module, centred on the grid lines (dark theme). The statement
   (two-tone, <mark> in --var_reveal_a_mark_clr) fills in word by word as it
   scrolls into view (core.js mdlRevealA wraps the words, lights them is_on).
   Below it the stage: a mid-fi wireframe screen in greys (browser bar, app
   bar, title, chips, cards | a panel of list rows, day pills, a button; image
   blocks hatched with diagonal lines, bars for text, no copy) centred,
   building itself piece by piece once in view
   (is_built; --k = order). Behind it six agents (blk_agent_a) hide, a third
   of each peeking out at the screen's sides, tilted (--r), dimmed, nudging
   outward now and then. Hovering the stage (tapping on touch: is_open)
   shrinks the screen a little and the agents spring out from behind it to
   their places around it (--x/--y → --x2/--y2, staggered by --i), their
   role pills appear and dashed tethers run from each back to the screen.
   A first view plays it once as a hint. A caption says what to do (hover /
   tap text by pointer). Nothing pins. Without JS: words lit, screen built.
   Reduced motion: no springs, peeks or hint. Phone (sm): a taller stage,
   the screen on top, the agents under its bottom edge springing out into
   two rows below it (--x3 / --y3), no tethers. Keys: title, des, agents [icon, label, bot],
   hint / hint_touch.
   Colors: --var_reveal_a_dim_clr (words not lit yet), --var_reveal_a_wire_clr
   (wireframe lines), --var_reveal_a_screen_clr (the screen),
   --var_reveal_a_mark_clr (title <mark>).
   ========================================================================== */
.mdl_reveal_a {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-block: 6rem;
}
.mdl_reveal_a > .prt_dec_grid_a {
  z-index: -1;
}
@container (max-width: 1024px) {
  .mdl_reveal_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_reveal_a > .title {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(2rem, 1.2173913043rem + 2.6086956522cqi, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--var_hdr_clr_a);
}
.mdl_reveal_a > .title mark {
  background: none;
  color: var(--var_reveal_a_mark_clr);
}
.mdl_reveal_a > .title .word {
  color: var(--var_reveal_a_dim_clr);
  transition: color 0.35s ease;
}
.mdl_reveal_a > .title .word.is_on {
  color: inherit;
}
.mdl_reveal_a > .des {
  max-width: 36rem;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  text-align: center;
  color: var(--var_txt_clr_b);
}
.mdl_reveal_a > .body {
  position: relative;
  width: min(100%, 72rem);
  aspect-ratio: 16/9.5;
  margin-top: 1.5rem;
  cursor: default;
}
.mdl_reveal_a > .body > .dec_a {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.mdl_reveal_a > .body > .dec_a line {
  stroke: color-mix(in srgb, var(--var_acnt_clr_a) 70%, transparent);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: mdl_reveal_a_flow 1.6s linear infinite;
}
.mdl_reveal_a > .body > .list {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdl_reveal_a > .body > .list > .item {
  --size: clamp(3.5rem, 5.5cqi, 5.25rem);
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  rotate: var(--r);
  scale: 0.82;
  opacity: 0.6;
  transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 45ms), top 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 45ms), rotate 0.5s ease calc(var(--i) * 45ms), scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 45ms), opacity 0.3s ease calc(var(--i) * 45ms);
  animation: mdl_reveal_a_peek calc(4.5s + var(--i) * 0.7s) ease-in-out calc(var(--i) * -1.1s) infinite;
}
.mdl_reveal_a > .body > .list > .item > .blk_agent_a {
  --label: 0;
}
.mdl_reveal_a > .body > .dec_b {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  container-type: inline-size;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 64%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid var(--var_reveal_a_wire_clr);
  background: var(--var_reveal_a_screen_clr);
  translate: -50% -50%;
  transition: scale 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.mdl_reveal_a > .body > .dec_b .line {
  display: block;
  height: 0.7cqi;
  background: var(--var_reveal_a_wire_clr);
}
.mdl_reveal_a > .body > .dec_b .prt_icn_a {
  --var_icn_a_clr: var(--var_reveal_a_wire_clr);
  flex: none;
  width: 1.6cqi;
  height: 1.6cqi;
}
.mdl_reveal_a > .body > .dec_b > .hdr {
  display: flex;
  align-items: center;
  gap: 1.1cqi;
  padding: 1.2cqi 1.8cqi;
  border-bottom: 1px solid var(--var_reveal_a_wire_clr);
}
.mdl_reveal_a > .body > .dec_b > .hdr > .dot {
  width: 1.1cqi;
  height: 1.1cqi;
  border: 1px solid var(--var_reveal_a_wire_clr);
  border-radius: 50%;
}
.mdl_reveal_a > .body > .dec_b > .hdr > .link {
  width: 46%;
  margin-inline: auto;
  padding: 0.8cqi 1.2cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 10%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .hdr > .link > .line {
  width: 40%;
  height: 0.5cqi;
}
.mdl_reveal_a > .body > .dec_b > .nav {
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  padding: 1.6cqi 3.2cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 5%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .nav > .logo {
  flex: none;
  width: 2.8cqi;
  height: 2.8cqi;
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 100%) 0 0/8px 8px, color-mix(in srgb, var(--var_hdr_clr_a) 18%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .nav > .line {
  width: 7cqi;
  margin-left: -1cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 72%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .nav > .link {
  width: 4.6cqi;
  height: 0.6cqi;
  background: var(--var_reveal_a_wire_clr);
}
.mdl_reveal_a > .body > .dec_b > .nav > .link:first-of-type {
  margin-left: 2cqi;
}
.mdl_reveal_a > .body > .dec_b > .nav > .label {
  display: flex;
  align-items: center;
  gap: 1cqi;
  width: 24cqi;
  margin-left: auto;
  padding: 0.9cqi 1.2cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 10%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .nav > .label > .line {
  width: 50%;
  height: 0.5cqi;
}
.mdl_reveal_a > .body > .dec_b > .nav > .dot {
  flex: none;
  width: 2.8cqi;
  height: 2.8cqi;
  border-radius: 50%;
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 100%) 0 0/8px 8px, color-mix(in srgb, var(--var_hdr_clr_a) 18%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 3cqi;
  min-height: 0;
  padding: 3cqi 3.2cqi;
}
.mdl_reveal_a > .body > .dec_b > .body .controls {
  display: flex;
  gap: 1cqi;
}
.mdl_reveal_a > .body > .dec_b > .body .controls > .item {
  height: 2.6cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 10%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body .controls > .item.alt {
  background: color-mix(in srgb, var(--var_hdr_clr_a) 72%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a {
  display: flex;
  flex-direction: column;
  gap: 2cqi;
  min-height: 0;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .title {
  display: flex;
  flex-direction: column;
  gap: 1.1cqi;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .title > .line {
  width: 62%;
  height: 2.4cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 72%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .title > .line.short {
  width: 38%;
  height: 0.8cqi;
  background: var(--var_reveal_a_wire_clr);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .controls > .item {
  width: 8.5cqi;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .controls > .item:nth-child(2) {
  width: 10.5cqi;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .controls > .item:nth-child(4) {
  width: 7cqi;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8cqi;
  min-height: 0;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .list > .item {
  display: flex;
  flex-direction: column;
  gap: 0.9cqi;
  padding: 1.2cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 5%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .list > .item > .thumb {
  flex: 1;
  min-height: 0;
  margin-bottom: 0.4cqi;
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 100%) 0 0/8px 8px, color-mix(in srgb, var(--var_hdr_clr_a) 10%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .list > .item:nth-child(2) > .thumb {
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 100%) 0 0/8px 8px, color-mix(in srgb, var(--var_hdr_clr_a) 18%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .list > .item:nth-child(3) > .thumb {
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 100%) 0 0/8px 8px, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .list > .item > .line {
  width: 70%;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 72%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_a > .list > .item > .line.short {
  width: 45%;
  height: 0.5cqi;
  background: var(--var_reveal_a_wire_clr);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b {
  display: flex;
  flex-direction: column;
  gap: 1.6cqi;
  min-height: 0;
  padding: 1.8cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 5%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .hdr {
  display: flex;
  align-items: center;
  gap: 1cqi;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .hdr > .line {
  width: 42%;
  height: 0.9cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 72%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .list {
  display: flex;
  flex-direction: column;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .list > .item {
  display: flex;
  align-items: center;
  gap: 1.4cqi;
  padding-block: 1.2cqi;
  border-top: 1px solid color-mix(in srgb, var(--var_hdr_clr_a) 18%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .list > .item > .thumb {
  flex: none;
  width: 4.4cqi;
  height: 4.4cqi;
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 100%) 0 0/8px 8px, color-mix(in srgb, var(--var_hdr_clr_a) 18%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .list > .item:nth-child(2) > .thumb {
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 100%) 0 0/8px 8px, color-mix(in srgb, var(--var_hdr_clr_a) 10%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .list > .item > .wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.7cqi;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .list > .item > .wrap > .line {
  width: 64%;
  height: 0.65cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 72%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .list > .item > .wrap > .line.short {
  width: 44%;
  height: 0.5cqi;
  background: var(--var_reveal_a_wire_clr);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .list > .item > .wrap > .label {
  width: 7cqi;
  height: 1.6cqi;
  margin-top: 0.2cqi;
  background: linear-gradient(-45deg, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0, color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 0.5px, transparent 0.5px, transparent calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) calc(100% - 0.5px), color-mix(in srgb, var(--var_hdr_clr_a) 30%, transparent) 100%) 0 0/8px 8px, color-mix(in srgb, var(--var_hdr_clr_a) 10%, transparent);
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .controls {
  justify-content: space-between;
  margin-top: auto;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .controls > .item {
  flex: 1;
  height: 4.4cqi;
}
.mdl_reveal_a > .body > .dec_b > .body > .side_b > .btn {
  height: 3.2cqi;
  background: color-mix(in srgb, var(--var_hdr_clr_a) 72%, transparent);
}
.mdl_reveal_a > .body:hover > .dec_b, .mdl_reveal_a > .body.is_open > .dec_b {
  scale: 0.86;
}
.mdl_reveal_a > .body:hover > .dec_a line, .mdl_reveal_a > .body.is_open > .dec_a line {
  opacity: 1;
  transition-delay: 0.3s;
}
.mdl_reveal_a > .body:hover > .list > .item, .mdl_reveal_a > .body.is_open > .list > .item {
  --open: 1;
  left: var(--x2);
  top: var(--y2);
  rotate: 0deg;
  scale: 1;
  opacity: 1;
  animation: none;
}
.mdl_reveal_a > .body:hover > .list > .item > .blk_agent_a, .mdl_reveal_a > .body.is_open > .list > .item > .blk_agent_a {
  --open: 1;
  --label: 1;
  --label-delay: calc(.25s + var(--i) * 45ms);
}
.mdl_reveal_a.is_ready > .body > .dec_b [style*="--k"] {
  opacity: 0;
  translate: 0 0.75rem;
  transition: opacity 0.5s ease calc(var(--k) * 90ms), translate 0.5s ease calc(var(--k) * 90ms);
}
.mdl_reveal_a.is_ready.is_built > .body > .dec_b [style*="--k"] {
  opacity: 1;
  translate: 0 0;
}
.mdl_reveal_a > .label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_reveal_a > .label > .prt_icn_a {
  --var_icn_a_clr: var(--var_acnt_clr_a);
}
.mdl_reveal_a > .label > .touch {
  display: none;
}
@media (hover: none) {
  .mdl_reveal_a > .label > .hover {
    display: none;
  }
  .mdl_reveal_a > .label > .touch {
    display: inline;
  }
}
@container (max-width: 1024px) {
  .mdl_reveal_a {
    padding-block: 4rem;
  }
  .mdl_reveal_a > .body {
    aspect-ratio: 4/3.4;
  }
  .mdl_reveal_a > .body > .dec_b {
    width: 72%;
  }
}
@container (max-width: 645px) {
  .mdl_reveal_a > .body {
    aspect-ratio: 3/4.4;
  }
  .mdl_reveal_a > .body > .dec_a {
    display: none;
  }
  .mdl_reveal_a > .body > .dec_b {
    top: 30%;
    width: 88%;
  }
  .mdl_reveal_a > .body > .list > .item {
    --size: 3rem;
    --dx: 0;
    left: var(--x3);
    top: 47%;
    rotate: 0deg;
  }
  .mdl_reveal_a > .body:hover > .list > .item, .mdl_reveal_a > .body.is_open > .list > .item {
    left: var(--x3);
    top: var(--y3);
  }
}
@container (max-width: 480px) {
  .mdl_reveal_a > .body {
    aspect-ratio: 3/4.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mdl_reveal_a > .title .word,
  .mdl_reveal_a > .body > .dec_b,
  .mdl_reveal_a > .body > .dec_a line,
  .mdl_reveal_a > .body > .list > .item, .mdl_reveal_a.is_ready > .body > .dec_b [style*="--k"] {
    transition: none;
  }
  .mdl_reveal_a > .body > .list > .item,
  .mdl_reveal_a > .body > .dec_a line {
    animation: none;
  }
}
@container (max-width: 1024px) {
  .mdl_reveal_a {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@container (max-width: 645px) {
  .mdl_reveal_a {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@keyframes mdl_reveal_a_peek {
  0%, 70%, 100% {
    translate: -50% -50%;
  }
  80%, 90% {
    translate: calc(-50% + var(--dx) * 0.875rem) -50%;
  }
}
@keyframes mdl_reveal_a_flow {
  to {
    stroke-dashoffset: -16;
  }
}
/* ==========================================================================
   Module: mdl_not_found_a - The 404 page
   A pixel "404" in --var_not_found_a_live_clr blocks with a little robot
   under it (both drawn on the canvas by core.js mdlNotFoundA, which reads the
   theme variables below). Arrows / A-D, the mouse or a sideways drag steer
   it; Space, the on-screen key (.fire) or a click fire. A hit block flashes
   and turns --var_not_found_a_dead_clr, so the grey 404 stays readable; the
   tally counts hits, and a full clear sweeps the 404 back in. Under it the
   usual hero text: title, intro, button, all above the fold on a laptop.
   Layers: grid lines → content.
   ========================================================================== */
.mdl_not_found_a {
  position: relative;
  --screen-h: 100svh;
  min-height: max(var(--screen-h), 44rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@container grd (max-width: 1024px) {
  .mdl_not_found_a {
    --screen-h: min(100svh, 75vw);
  }
}
@container grd (max-width: 900px) {
  .mdl_not_found_a {
    --screen-h: 100svh;
  }
}
.mdl_not_found_a {
  justify-content: flex-start;
  overflow: hidden;
}
@container (max-width: 1024px) {
  .mdl_not_found_a > .prt_dec_grid_a {
    display: none !important;
  }
}
.mdl_not_found_a > .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: min(100% - 2 * var(--page-inset, 0px), 1400px);
  margin-inline: auto;
  padding: max(6rem, var(--screen-h) * 0.14) 2rem 6rem;
  text-align: center;
}
.mdl_not_found_a > .content > .game {
  width: 100%;
  height: clamp(14rem, var(--screen-h) * 0.41, 27rem);
}
.mdl_not_found_a > .content > .game > .field {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: crosshair;
}
.mdl_not_found_a > .content > .controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  font-family: "Azeret Mono", monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.mdl_not_found_a > .content > .controls > .hint {
  justify-self: start;
  margin: 0;
  text-align: left;
}
.mdl_not_found_a > .content > .controls > .hint > .touch {
  display: none;
}
.mdl_not_found_a > .content > .controls > .tally {
  justify-self: end;
  margin: 0;
  text-align: right;
}
.mdl_not_found_a > .content > .controls > .tally > .done {
  display: none;
  color: var(--var_acnt_clr_a);
}
.mdl_not_found_a > .content > .controls > .fire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: min(18rem, 62cqi);
  height: 3.25rem;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--var_txt_clr_a);
  background: var(--var_not_found_a_key_bg_clr);
  border: 1px solid var(--var_bdr_clr_a);
  border-bottom-width: 5px;
  border-radius: 0.625rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition-property: transform, border-bottom-width, border-color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .mdl_not_found_a > .content > .controls > .fire {
    transition-duration: 0ms !important;
  }
}
.mdl_not_found_a > .content > .controls > .fire > .label {
  color: var(--var_acnt_clr_a);
}
.mdl_not_found_a > .content > .controls > .fire:hover {
  border-color: color-mix(in srgb, var(--var_acnt_clr_a) 45%, var(--var_bdr_clr_a));
}
.mdl_not_found_a > .content > .controls > .fire.is_down {
  transform: translateY(4px);
  border-bottom-width: 1px;
  border-color: var(--var_acnt_clr_a);
}
.mdl_not_found_a > .content > .title {
  max-width: 58rem;
  margin: 1rem 0 0;
  font-size: clamp(2rem, 1.6086956522rem + 1.3043478261cqi, 2.75rem);
  line-height: 1.15;
  color: var(--var_hdr_clr_a);
}
.mdl_not_found_a > .content > .des {
  max-width: 42rem;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--var_txt_clr_b);
}
.mdl_not_found_a > .content > .prt_btn_c {
  margin-top: 1rem;
}
.mdl_not_found_a.is_clear > .content > .controls > .tally > .score {
  display: none;
}
.mdl_not_found_a.is_clear > .content > .controls > .tally > .done {
  display: inline;
}
@media (hover: none) and (pointer: coarse) {
  .mdl_not_found_a > .content > .controls > .hint > .mouse {
    display: none;
  }
  .mdl_not_found_a > .content > .controls > .hint > .touch {
    display: inline;
  }
}
@container (max-width: 645px) {
  .mdl_not_found_a > .content {
    padding-inline: 0;
  }
  .mdl_not_found_a > .content > .game {
    height: clamp(11rem, 58cqi, 15rem);
  }
  .mdl_not_found_a > .content > .controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
  }
  .mdl_not_found_a > .content > .controls > .fire {
    grid-column: 1/-1;
    order: -1;
    width: 100%;
    height: 3.75rem;
  }
  .mdl_not_found_a > .content > .title {
    margin-top: 1.5rem;
  }
}

/* forward your template partials here */
/* ==========================================================================
   Template: tem_styleguide - Living style guide page (styleguide.php)
   --------------------------------------------------------------------------
   Page chrome only (nav, section headers, specimen frames, swatches).
   Everything *inside* a specimen is the real component, styled by its own
   prt_/blk_/mdl_ file — never restyle components from here.
   ========================================================================== */
.tem_styleguide > .grd_row {
  padding-block: 3rem;
}
.tem_styleguide > .grd_row.nav_row {
  padding-block: 0.75rem;
  z-index: 50;
  border-bottom: 1px solid var(--var_bdr_clr_a);
}
.tem_styleguide > .grd_row.intro_row {
  padding-block: 3rem 2rem;
}
.tem_styleguide .nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.tem_styleguide .nav > .brand {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tem_styleguide .nav > .brand em {
  font-style: normal;
  color: var(--var_acnt_clr_a);
}
.tem_styleguide .nav > .links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}
.tem_styleguide .nav > .links a {
  color: var(--var_txt_clr_b);
}
.tem_styleguide .nav > .links a:hover {
  color: var(--var_acnt_clr_a);
  text-decoration: none;
}
.tem_styleguide .intro {
  max-width: 48rem;
}
.tem_styleguide .intro > .title {
  margin-block: 1rem;
}
.tem_styleguide .intro > .des {
  color: var(--var_txt_clr_b);
}
.tem_styleguide .legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.tem_styleguide .sec_hdr {
  margin-bottom: 2rem;
}
.tem_styleguide .sec_hdr > .eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--var_acnt_clr_a);
}
.tem_styleguide .sec_hdr > .des {
  max-width: 48rem;
  margin-top: 0.75rem;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .sub_hdr {
  margin-block: 2rem 1rem;
  font-size: 1rem;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .tag.is_prt {
  border-color: var(--var_acnt_clr_a);
  color: var(--var_acnt_clr_a);
}
.tem_styleguide code {
  font-family: var(--font-mono);
  font-size: 0.8125em;
}
.tem_styleguide .specimen {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--var_bdr_clr_a);
  border-radius: 0.5rem;
  overflow: hidden;
}
.tem_styleguide .specimen > .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.tem_styleguide .specimen > .meta > .name {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
}
.tem_styleguide .specimen > .meta > .path {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .specimen > .note {
  padding: 0.5rem 1rem 0;
  font-size: 0.8125rem;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .specimen > .stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  min-height: 10rem;
  padding: 2rem 1.5rem;
}
.tem_styleguide .specimen > .stage.is_block {
  display: block;
}
.tem_styleguide .specimen > .stage.is_tall {
  min-height: 24rem;
}
.tem_styleguide .specimen > .stage.is_flush {
  padding: 0;
}
.tem_styleguide .frame.row_set {
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding-block: 1.5rem;
}
.tem_styleguide .frame {
  position: relative;
  width: var(--fw, 100%);
  padding-top: var(--fpt, 0);
  height: var(--fh, auto);
  max-width: 100%;
}
.tem_styleguide .frame.is_fill > * {
  width: 100%;
  height: 100%;
}
.tem_styleguide .frame.is_zoom {
  zoom: var(--fz, 0.5);
}
.tem_styleguide .layer_label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.tem_styleguide .layer_label > .name {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
}
.tem_styleguide .layer_label > .path {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--var_txt_clr_b);
}
.tem_styleguide > .grd_row.label_row {
  padding-block: 1rem;
  border-top: 1px dashed var(--var_bdr_clr_a);
}
.tem_styleguide > .grd_row.layer_row {
  padding-block: 0;
}
.tem_styleguide .swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1rem;
}
.tem_styleguide .swatch > .chip {
  height: 4.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--var_bdr_clr_a);
  background: var(--sw);
}
.tem_styleguide .swatch > .label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  word-break: break-all;
}
.tem_styleguide .swatch > .value {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .palette_preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.tem_styleguide .palette_preview > .des {
  color: var(--var_txt_clr_b);
}
.tem_styleguide .palette_preview > .hdr_b {
  color: var(--var_hdr_clr_b);
}
.tem_styleguide .btn_set {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem;
}
.tem_styleguide .btn_set > .item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.tem_styleguide .btn_set > .item > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .type_row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1rem;
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.tem_styleguide .type_row > .spec {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .type_row > .spec strong {
  display: block;
  font-size: 0.75rem;
  color: var(--var_txt_clr_a);
}
.tem_styleguide .font_card > .sample {
  font-size: 3rem;
  line-height: 1.1;
}
.tem_styleguide .font_card > .chars {
  margin-top: 0.75rem;
  word-break: break-all;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .font_card.is_hdr > .sample {
  font-family: var(--font-header);
  font-weight: 600;
}
.tem_styleguide .font_card.is_body > .sample {
  font-family: var(--font-body);
}
.tem_styleguide .font_card.is_mono > .sample {
  font-family: var(--font-mono);
}
.tem_styleguide .space_row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  align-items: center;
  padding-block: 0.5rem;
}
.tem_styleguide .space_row > .spec {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.tem_styleguide .space_row > .bar {
  width: var(--sz);
  height: 1rem;
  min-width: 1px;
  background: var(--var_acnt_clr_a);
}
.tem_styleguide .grid_demo {
  margin-bottom: 1rem;
}
.tem_styleguide .grid_demo .cell {
  padding: 0.5rem;
  border: 1px dashed var(--var_acnt_clr_a);
  border-radius: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-align: center;
  color: var(--var_acnt_clr_a);
  word-break: break-word;
}
.tem_styleguide .icn_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 1rem;
}
.tem_styleguide .icn_grid > .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.5rem;
  border: 1px dashed var(--var_bdr_clr_a);
  border-radius: 0.5rem;
}
.tem_styleguide .icn_grid > .item > .label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--var_txt_clr_b);
}
.tem_styleguide .util_demo {
  width: 100%;
  min-height: 8rem;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.tem_styleguide .util_demo.is_plain {
  border: 1px dashed var(--var_bdr_clr_a);
}
.tem_styleguide .anim_demo {
  width: 100%;
  padding: 1.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--var_bg_b);
  border: 1px solid var(--var_bdr_clr_a);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: center;
}
.tem_styleguide .tbl_wrap {
  overflow-x: auto;
}
.tem_styleguide table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.tem_styleguide table th, .tem_styleguide table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px dashed var(--var_bdr_clr_a);
}
.tem_styleguide table th {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--var_txt_clr_b);
}

/* ==========================================================================
   Template: tem_index - Page index (index.php)
   Card grid of every page: live scaled preview (iframe), title link stretched
   over the card, desktop/mobile build status. Preview scale set by core.js.
   ========================================================================== */
.tem_index > .grd_row,
.tem_index > main > .grd_row {
  padding-block: 3rem;
}
.tem_index > .grd_row.intro_row,
.tem_index > main > .grd_row.intro_row {
  padding-block: 4rem 3rem;
}
.tem_index .intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.tem_index .intro > .logo {
  width: 6rem;
}
.tem_index .intro > .des {
  max-width: 40rem;
  color: var(--var_txt_clr_b);
}
.tem_index .intro > .des code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}
.tem_index .summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}
.tem_index .summary > .item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.tem_index .summary > .item strong {
  color: var(--var_acnt_clr_a);
}
.tem_index .group {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.5rem;
}
.tem_index .group > .count {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--var_txt_clr_b);
}
.tem_index .card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--var_bg_b);
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.tem_index .card:hover, .tem_index .card:focus-within {
  border-color: var(--var_acnt_clr_a);
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.tem_index .card:hover .meta > .title, .tem_index .card:focus-within .meta > .title {
  color: var(--var_acnt_clr_a);
}
.tem_index .card:hover .meta > .title .prt_icn_a, .tem_index .card:focus-within .meta > .title .prt_icn_a {
  transform: translate(2px, -2px);
}
.tem_index .card:focus-within {
  outline: 2px solid var(--var_acnt_clr_a);
  outline-offset: 2px;
}
.tem_index .preview {
  position: relative;
  aspect-ratio: 1440/900;
  overflow: hidden;
  border-bottom: 1px solid var(--var_bdr_clr_a);
  background: var(--var_bg_a);
}
.tem_index .preview > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  transform: scale(var(--scale, 0.25));
  transform-origin: 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tem_index .preview:not(.is_loaded) {
  animation: tem_index_pulse 1.6s ease-in-out infinite;
}
.tem_index .preview.is_loaded > iframe {
  opacity: 1;
}
@keyframes tem_index_pulse {
  50% {
    background: color-mix(in srgb, var(--var_bg_a) 92%, var(--var_hdr_clr_a));
  }
}
@media (prefers-reduced-motion: reduce) {
  .tem_index .preview {
    animation: none;
  }
  .tem_index .preview > iframe {
    transition: none;
  }
}
.tem_index .meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}
.tem_index .meta > .des {
  color: var(--var_txt_clr_b);
}
.tem_index .meta > .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 1.25rem;
  color: var(--var_hdr_clr_a);
  transition: color 0.3s ease;
}
.tem_index .meta > .title .prt_icn_a {
  transition: transform 0.3s ease;
}
.tem_index .link {
  color: inherit;
  text-decoration: none;
}
.tem_index .link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tem_index .link:focus-visible {
  outline: none;
}
.tem_index .path {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--var_txt_clr_b);
}
.tem_index .status {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: auto 0 0;
  padding: 0.75rem 0 0;
  list-style: none;
}
.tem_index .state {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--var_bdr_clr_a);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
}
.tem_index .state.is_done {
  background: var(--var_txt_clr_a);
  border-color: var(--var_txt_clr_a);
  color: var(--var_bg_b);
  --var_icn_a_clr: var(--var_bg_b);
}
.tem_index .state.is_in_progress {
  border-color: var(--var_acnt_clr_a);
  color: var(--var_acnt_clr_a);
  --var_icn_a_clr: var(--var_acnt_clr_a);
}
.tem_index .state.is_todo {
  border-style: dashed;
  color: var(--var_txt_clr_b);
  --var_icn_a_clr: var(--var_txt_clr_b);
}
@media (prefers-reduced-motion: reduce) {
  .tem_index .card, .tem_index .meta > .title, .tem_index .meta > .title .prt_icn_a {
    transition: none;
  }
  .tem_index .card:hover, .tem_index .card:focus-within {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Theme variable contract
   - :root holds the defaults (page background outside any themed row).
   - EVERY _thm_*.scss must define EVERY variable below. Custom properties
     resolve where they are declared, so a theme that omits one silently
     inherits the value of whatever theme wraps it.
   -------------------------------------------------------------------------- */
:root {
  --var_bg_a: var(--paper);
  --var_bg_b: #f7f9fc;
  --var_fg_a: var(--ink);
  --var_fg_b: rgba(10, 10, 10, 0.72);
  --var_bdr_clr_a: rgba(10, 10, 10, 0.12);
  --var_bdr_clr_b: rgba(10, 10, 10, 0.06);
  --var_txt_clr_a: var(--ink);
  --var_txt_clr_b: rgba(10, 10, 10, 0.72);
  --var_hdr_clr_a: var(--ink);
  --var_hdr_clr_b: var(--brand);
  --var_acnt_clr_a: var(--brand);
  --var_acnt_clr_b: #F26221;
  --var_icn_a_clr: var(--brand);
  --var_icn_a_bdr_clr: rgba(10, 10, 10, 0.12);
  --var_btn_a_txt_clr: var(--var_hdr_clr_a);
  --var_btn_a_bdr_clr: var(--brand);
  --var_btn_a_icn_clr: var(--brand);
  --var_btn_a_hvr_clr: #ffffff;
  --var_btn_b_bg_clr: var(--brand);
  --var_btn_b_icn_clr: #ffffff;
  --var_btn_c_bg_clr: var(--brand);
  --var_btn_c_txt_clr: #ffffff;
  --var_btn_c_hvr_bg_clr: transparent;
  --var_btn_c_hvr_txt_clr: var(--brand);
  --var_btn_d_txt_clr: var(--var_txt_clr_a);
  --var_btn_d_icn_clr: var(--var_acnt_clr_a);
  --var_btn_d_line_clr: var(--var_acnt_clr_a);
  --var_btn_e_txt_clr: var(--var_txt_clr_a);
  --var_btn_e_bdr_clr: var(--var_bdr_clr_a);
  --var_btn_e_hvr_clr: var(--var_acnt_clr_a);
  --var_btn_f_icn_clr: var(--var_txt_clr_a);
  --var_btn_f_bdr_clr: var(--var_bdr_clr_a);
  --var_btn_f_hvr_clr: var(--var_acnt_clr_a);
  --var_grad_clr_a: #f0e6ff;
  --var_grad_clr_b: #ffe6e0;
  --var_grad_clr_c: #e0f0ff;
  --var_dec_circle_clr: rgba(10, 10, 10, 0.12);
  --var_dec_circle_clr_alt: var(--brand);
  --var_dec_circle_bdr: rgba(10, 10, 10, 0.12);
  --var_dec_xline_mark_clr: var(--var_bdr_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_acnt_clr_a);
  --var_dec_xline_line_clr: var(--var_txt_clr_a);
  --var_hero_b_ink_clr: var(--var_txt_clr_a);
  --var_hero_b_xline_clr: var(--var_bdr_clr_a);
  --var_hero_b_xline_alt_clr: var(--var_acnt_clr_a);
  --var_hero_b_logo_clr: var(--brand);
  --var_hero_b_dots_clr: var(--brand);
  --var_stats_a_label_clr: var(--var_txt_clr_b);
  --var_icn_d_face_clr: var(--var_bg_a);
  --var_icn_d_line_clr: var(--var_txt_clr_a);
  --var_icn_e_bg_clr: color-mix(in srgb, var(--brand) 14%, transparent);
  --var_icn_e_clr: var(--brand);
  --var_cursor_a_clr: var(--brand);
  --var_cursor_a_bdr_clr: #ffffff;
  --var_bdg_a_txt_clr: var(--var_txt_clr_a);
  --var_photo_a_bg_clr: #ffffff;
  --var_reveal_a_dim_clr: rgba(21, 21, 28, 0.5);
  --var_reveal_a_wire_clr: rgba(21, 21, 28, 0.35);
  --var_reveal_a_screen_clr: #ffffff;
  --var_reveal_a_agent_clr: #15151C;
  --var_reveal_a_agent_txt_clr: #ffffff;
  --var_reveal_a_mark_clr: #EC411B;
  --var_showcase_a_card_clr: #ffffff;
  --var_showcase_a_mark_clr: #EC411B;
  --var_showcase_a_ink_clr: #15151C;
  --var_showcase_a_line_clr: rgba(21, 21, 28, 0.12);
  --var_showcase_a_acnt_clr: #EC411B;
  --var_showcase_a_on_acnt_clr: #ffffff;
  --var_showcase_a_pill_clr: #15151C;
  --var_showcase_a_pill_txt_clr: #ffffff;
  --var_showcase_a_swatch_a_clr: #EC411B;
  --var_showcase_a_swatch_b_clr: #F26221;
  --var_showcase_a_swatch_c_clr: #15151C;
  --var_showcase_a_swatch_d_clr: #ffffff;
  --var_img_a_tint_clr: var(--var_bg_a);
  --var_person_a_base_clr: var(--var_bg_a);
  --var_person_a_lit_clr: #ffffff;
  --var_person_a_floor_clr: #000000;
  --var_person_a_level_b: 1;
  --var_person_a_level_c: 1;
  --var_person_a_spot_max: 1;
  --var_person_a_pix_clr: var(--var_acnt_clr_a);
  --var_person_a_label_bg_clr: color-mix(in srgb, var(--var_bg_a) 90%, transparent);
  --var_person_a_label_bdr_clr: var(--var_acnt_clr_a);
  --var_testimonial_a_alt_bg_clr: #15151C;
  --var_testimonial_a_alt_txt_clr: #ffffff;
  --var_photo_a_txt_clr: #20222A;
  --var_spotlight_a_mark_clr: var(--var_acnt_clr_a);
  --var_logo_grid_a_card_clr: #ffffff;
  --var_tile_a_bg_clr: #F4F4F5;
  --var_post_card_a_bg_clr: #ffffff;
  --var_feature_card_a_bg_clr: #ffffff;
  --var_step_a_bg_clr: #ffffff;
  --var_process_card_a_bg_clr: #ffffff;
  --var_job_card_a_bg_clr: #ffffff;
  --var_perk_a_bg_clr: #ffffff;
  --var_route_card_a_bg_clr: #ffffff;
  --var_route_link_a_bg_clr: #ffffff;
  --var_segments_a_cell_clr: #ffffff;
  --var_disclosure_a_bg_clr: #ffffff;
  --var_form_a_bg_clr: #ffffff;
  --var_hero_e_ink_clr: var(--var_txt_clr_b);
  --var_hero_e_logo_clr: var(--var_acnt_clr_a);
  --var_hdr_a_bg_clr: rgba(255, 255, 255, 0.92);
  --var_hdr_a_panel_clr: #F4F4F5;
  --var_hdr_a_txt_clr: #1a1a1a;
  --var_hdr_a_logo_clr: var(--var_acnt_clr_a);
  --var_hdr_a_icn_clr: var(--var_acnt_clr_a);
  --var_hdr_a_link_clr: var(--var_txt_clr_a);
  --var_hdr_a_line_clr: var(--var_bdr_clr_a);
  --var_hdr_a_hvr_clr: rgba(26, 26, 26, 0.05);
  --var_person_card_a_bg_clr: #F4F4F5;
  --var_point_list_a_bg_clr: color-mix(in srgb, var(--var_hdr_clr_a) 3%, var(--var_bg_a));
  --var_avatar_b_bg_clr: #EDEDED;
  --var_dec_mark_a_clr: #FF2E00;
  --var_dec_mark_a_clr_alt: #FF8800;
  --var_leader_card_a_bg_clr: #ffffff;
  --var_leader_card_a_txt_clr: var(--var_hdr_clr_a);
  --var_leader_card_a_hvr_bg_clr: var(--brand);
  --var_leader_card_a_hvr_txt_clr: #ffffff;
  --var_member_card_a_bg_clr: #ffffff;
  --var_modal_a_bg_clr: #ffffff;
  --var_modal_a_side_clr: #F4F4F5;
  --var_modal_a_ovl_clr: #15151C;
  --var_info_card_a_bg_clr: var(--var_bg_b);
  --var_statement_a_txt_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  --var_quote_a_des_clr: #0a0a0a;
  --var_quote_a_icn_clr: var(--var_acnt_clr_a);
  --var_quote_a_mark_clr: var(--var_acnt_clr_a);
  --var_work_card_a_ovl_bg: rgba(0, 0, 0, 0.3);
  --var_work_card_a_ovl_clr: #ffffff;
  --var_leaders_a_ink_clr: #0a0a0a;
  --var_leaders_a_bdr_clr: rgba(0, 0, 0, 0.2);
  --var_stack_a_clr_a: #454545;
  --var_stack_a_clr_b: #E9EAEC;
  --var_stack_a_clr_c: #7C7C7C;
  --var_stack_a_clr_d: #ffffff;
  --var_stack_a_hvr_clr_a: #ff6a00;
  --var_stack_a_hvr_clr_b: #ffe0c2;
  --var_stack_a_hvr_clr_c: #ff9d4d;
  --var_not_found_a_live_clr: var(--var_acnt_clr_a);
  --var_not_found_a_dead_clr: #D9D9DD;
  --var_not_found_a_ship_clr: var(--var_hdr_clr_a);
  --var_not_found_a_key_bg_clr: #ffffff;
}

.thm_white, [data-theme=white],
.theme_light, [data-theme=light] {
  --var_bg_a: #ffffff;
  --var_bg_b: #FAFAFA;
  --var_fg_a: #1a1a1a;
  --var_fg_b: #444444;
  --var_bdr_clr_a: #DFDFDF;
  --var_bdr_clr_b: #DFDFDF;
  --var_txt_clr_a: #1a1a1a;
  --var_txt_clr_b: #666666;
  --var_hdr_clr_a: #1a1a1a;
  --var_hdr_clr_b: var(--brand);
  --var_acnt_clr_a: var(--brand);
  --var_acnt_clr_b: var(--brand);
  --var_icn_a_clr: var(--brand);
  --var_icn_a_bdr_clr: #DFDFDF;
  --var_btn_a_txt_clr: var(--var_hdr_clr_a);
  --var_btn_a_bdr_clr: var(--brand);
  --var_btn_a_icn_clr: var(--brand);
  --var_btn_a_hvr_clr: #ffffff;
  --var_btn_b_bg_clr: var(--brand);
  --var_btn_b_icn_clr: #ffffff;
  --var_btn_c_bg_clr: var(--brand);
  --var_btn_c_txt_clr: #ffffff;
  --var_btn_c_hvr_bg_clr: transparent;
  --var_btn_c_hvr_txt_clr: var(--brand);
  --var_btn_d_txt_clr: var(--var_txt_clr_a);
  --var_btn_d_icn_clr: var(--var_acnt_clr_a);
  --var_btn_d_line_clr: var(--var_acnt_clr_a);
  --var_btn_e_txt_clr: var(--var_txt_clr_a);
  --var_btn_e_bdr_clr: var(--var_bdr_clr_a);
  --var_btn_e_hvr_clr: var(--var_acnt_clr_a);
  --var_btn_f_icn_clr: var(--var_txt_clr_a);
  --var_btn_f_bdr_clr: var(--var_bdr_clr_a);
  --var_btn_f_hvr_clr: var(--var_acnt_clr_a);
  --var_grad_clr_a: #f0e6ff;
  --var_grad_clr_b: #ffe6e0;
  --var_grad_clr_c: #e0f0ff;
  --var_dec_circle_clr: #DFDFDF;
  --var_dec_circle_clr_alt: var(--brand);
  --var_dec_circle_bdr: #DFDFDF;
  --var_dec_xline_mark_clr: var(--var_bdr_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_acnt_clr_a);
  --var_dec_xline_line_clr: var(--var_txt_clr_a);
  --var_hero_b_ink_clr: var(--var_txt_clr_a);
  --var_hero_b_xline_clr: var(--var_bdr_clr_a);
  --var_hero_b_xline_alt_clr: var(--var_acnt_clr_a);
  --var_hero_b_logo_clr: var(--brand);
  --var_hero_b_dots_clr: var(--brand);
  --var_stats_a_label_clr: var(--var_txt_clr_b);
  --var_icn_d_face_clr: var(--var_bg_a);
  --var_icn_d_line_clr: var(--var_txt_clr_a);
  --var_icn_e_bg_clr: color-mix(in srgb, var(--brand) 14%, transparent);
  --var_icn_e_clr: var(--brand);
  --var_cursor_a_clr: var(--brand);
  --var_cursor_a_bdr_clr: #ffffff;
  --var_bdg_a_txt_clr: var(--var_txt_clr_a);
  --var_photo_a_bg_clr: #ffffff;
  --var_reveal_a_dim_clr: rgba(21, 21, 28, 0.5);
  --var_reveal_a_wire_clr: rgba(21, 21, 28, 0.35);
  --var_reveal_a_screen_clr: #ffffff;
  --var_reveal_a_agent_clr: #15151C;
  --var_reveal_a_agent_txt_clr: #ffffff;
  --var_reveal_a_mark_clr: #EC411B;
  --var_showcase_a_card_clr: #ffffff;
  --var_showcase_a_mark_clr: #EC411B;
  --var_showcase_a_ink_clr: #15151C;
  --var_showcase_a_line_clr: rgba(21, 21, 28, 0.12);
  --var_showcase_a_acnt_clr: #EC411B;
  --var_showcase_a_on_acnt_clr: #ffffff;
  --var_showcase_a_pill_clr: #15151C;
  --var_showcase_a_pill_txt_clr: #ffffff;
  --var_showcase_a_swatch_a_clr: #EC411B;
  --var_showcase_a_swatch_b_clr: #F26221;
  --var_showcase_a_swatch_c_clr: #15151C;
  --var_showcase_a_swatch_d_clr: #ffffff;
  --var_img_a_tint_clr: var(--var_bg_a);
  --var_person_a_base_clr: var(--var_bg_a);
  --var_person_a_lit_clr: #ffffff;
  --var_person_a_floor_clr: #000000;
  --var_person_a_level_b: 1;
  --var_person_a_level_c: 1;
  --var_person_a_spot_max: 1;
  --var_person_a_pix_clr: var(--var_acnt_clr_a);
  --var_person_a_label_bg_clr: color-mix(in srgb, var(--var_bg_a) 90%, transparent);
  --var_person_a_label_bdr_clr: var(--var_acnt_clr_a);
  --var_testimonial_a_alt_bg_clr: #15151C;
  --var_testimonial_a_alt_txt_clr: #ffffff;
  --var_photo_a_txt_clr: #20222A;
  --var_spotlight_a_mark_clr: var(--var_acnt_clr_a);
  --var_logo_grid_a_card_clr: #ffffff;
  --var_tile_a_bg_clr: #F4F4F5;
  --var_post_card_a_bg_clr: #ffffff;
  --var_feature_card_a_bg_clr: #ffffff;
  --var_step_a_bg_clr: #ffffff;
  --var_process_card_a_bg_clr: #ffffff;
  --var_job_card_a_bg_clr: #ffffff;
  --var_perk_a_bg_clr: #ffffff;
  --var_route_card_a_bg_clr: #ffffff;
  --var_route_link_a_bg_clr: #ffffff;
  --var_segments_a_cell_clr: #ffffff;
  --var_disclosure_a_bg_clr: #ffffff;
  --var_form_a_bg_clr: #ffffff;
  --var_hero_e_ink_clr: var(--var_txt_clr_b);
  --var_hero_e_logo_clr: var(--var_acnt_clr_a);
  --var_hdr_a_bg_clr: rgba(255, 255, 255, 0.92);
  --var_hdr_a_panel_clr: #F4F4F5;
  --var_hdr_a_txt_clr: #1a1a1a;
  --var_hdr_a_logo_clr: var(--var_acnt_clr_a);
  --var_hdr_a_icn_clr: var(--var_acnt_clr_a);
  --var_hdr_a_link_clr: var(--var_txt_clr_a);
  --var_hdr_a_line_clr: var(--var_bdr_clr_a);
  --var_hdr_a_hvr_clr: rgba(26, 26, 26, 0.05);
  --var_person_card_a_bg_clr: #F4F4F5;
  --var_point_list_a_bg_clr: color-mix(in srgb, var(--var_hdr_clr_a) 3%, var(--var_bg_a));
  --var_avatar_b_bg_clr: #EDEDED;
  --var_dec_mark_a_clr: #FF2E00;
  --var_dec_mark_a_clr_alt: #FF8800;
  --var_leader_card_a_bg_clr: #ffffff;
  --var_leader_card_a_txt_clr: var(--var_hdr_clr_a);
  --var_leader_card_a_hvr_bg_clr: var(--brand);
  --var_leader_card_a_hvr_txt_clr: #ffffff;
  --var_member_card_a_bg_clr: #ffffff;
  --var_modal_a_bg_clr: #ffffff;
  --var_modal_a_side_clr: #F4F4F5;
  --var_modal_a_ovl_clr: #15151C;
  --var_info_card_a_bg_clr: var(--var_bg_b);
  --var_statement_a_txt_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  --var_quote_a_des_clr: #1a1a1a;
  --var_quote_a_icn_clr: var(--var_acnt_clr_a);
  --var_quote_a_mark_clr: var(--var_acnt_clr_a);
  --var_work_card_a_ovl_bg: rgba(0, 0, 0, 0.3);
  --var_work_card_a_ovl_clr: #ffffff;
  --var_leaders_a_ink_clr: #0a0a0a;
  --var_leaders_a_bdr_clr: rgba(0, 0, 0, 0.2);
  --var_stack_a_clr_a: #454545;
  --var_stack_a_clr_b: #E9EAEC;
  --var_stack_a_clr_c: #7C7C7C;
  --var_stack_a_clr_d: #ffffff;
  --var_stack_a_hvr_clr_a: #ff6a00;
  --var_stack_a_hvr_clr_b: #ffe0c2;
  --var_stack_a_hvr_clr_c: #ff9d4d;
  --var_not_found_a_live_clr: var(--var_acnt_clr_a);
  --var_not_found_a_dead_clr: #DDDDE0;
  --var_not_found_a_ship_clr: var(--var_hdr_clr_a);
  --var_not_found_a_key_bg_clr: #ffffff;
  background-color: var(--var_bg_a);
  color: var(--var_txt_clr_a);
}

.thm_grey, [data-theme=grey] {
  --var_bg_a: #FAFAFA;
  --var_bg_b: #FFFFFF;
  --var_fg_a: #20222A;
  --var_fg_b: #444444;
  --var_bdr_clr_a: #DFDFDF;
  --var_bdr_clr_b: #DFDFDF;
  --var_txt_clr_a: #20222A;
  --var_txt_clr_b: #444444;
  --var_hdr_clr_a: #20222A;
  --var_hdr_clr_b: var(--brand);
  --var_acnt_clr_a: var(--brand);
  --var_acnt_clr_b: #F26221;
  --var_icn_a_clr: var(--brand);
  --var_icn_a_bdr_clr: #DFDFDF;
  --var_btn_a_txt_clr: var(--var_hdr_clr_a);
  --var_btn_a_bdr_clr: var(--brand);
  --var_btn_a_icn_clr: var(--brand);
  --var_btn_a_hvr_clr: #ffffff;
  --var_btn_b_bg_clr: var(--brand);
  --var_btn_b_icn_clr: #ffffff;
  --var_btn_c_bg_clr: var(--brand);
  --var_btn_c_txt_clr: #ffffff;
  --var_btn_c_hvr_bg_clr: transparent;
  --var_btn_c_hvr_txt_clr: var(--brand);
  --var_btn_d_txt_clr: var(--var_txt_clr_a);
  --var_btn_d_icn_clr: var(--var_acnt_clr_a);
  --var_btn_d_line_clr: var(--var_acnt_clr_a);
  --var_btn_e_txt_clr: var(--var_txt_clr_a);
  --var_btn_e_bdr_clr: var(--var_bdr_clr_a);
  --var_btn_e_hvr_clr: var(--var_acnt_clr_a);
  --var_btn_f_icn_clr: var(--var_txt_clr_a);
  --var_btn_f_bdr_clr: var(--var_bdr_clr_a);
  --var_btn_f_hvr_clr: var(--var_acnt_clr_a);
  --var_grad_clr_a: #e8dff5;
  --var_grad_clr_b: #f5dfe0;
  --var_grad_clr_c: #dfe8f5;
  --var_dec_circle_clr: #C0C0C0;
  --var_dec_circle_clr_alt: var(--brand);
  --var_dec_circle_bdr: #C0C0C0;
  --var_dec_xline_mark_clr: var(--var_bdr_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_acnt_clr_a);
  --var_dec_xline_line_clr: var(--var_txt_clr_a);
  --var_hero_b_ink_clr: var(--var_txt_clr_a);
  --var_hero_b_xline_clr: var(--var_bdr_clr_a);
  --var_hero_b_xline_alt_clr: var(--var_acnt_clr_a);
  --var_hero_b_logo_clr: var(--brand);
  --var_hero_b_dots_clr: var(--brand);
  --var_stats_a_label_clr: var(--var_txt_clr_b);
  --var_icn_d_face_clr: var(--var_bg_a);
  --var_icn_d_line_clr: var(--var_txt_clr_a);
  --var_icn_e_bg_clr: color-mix(in srgb, var(--brand) 14%, transparent);
  --var_icn_e_clr: var(--brand);
  --var_cursor_a_clr: var(--brand);
  --var_cursor_a_bdr_clr: #ffffff;
  --var_bdg_a_txt_clr: var(--var_txt_clr_a);
  --var_photo_a_bg_clr: #ffffff;
  --var_reveal_a_dim_clr: rgba(21, 21, 28, 0.5);
  --var_reveal_a_wire_clr: rgba(21, 21, 28, 0.35);
  --var_reveal_a_screen_clr: #ffffff;
  --var_reveal_a_agent_clr: #15151C;
  --var_reveal_a_agent_txt_clr: #ffffff;
  --var_reveal_a_mark_clr: #EC411B;
  --var_showcase_a_card_clr: #ffffff;
  --var_showcase_a_mark_clr: #EC411B;
  --var_showcase_a_ink_clr: #15151C;
  --var_showcase_a_line_clr: rgba(21, 21, 28, 0.12);
  --var_showcase_a_acnt_clr: #EC411B;
  --var_showcase_a_on_acnt_clr: #ffffff;
  --var_showcase_a_pill_clr: #15151C;
  --var_showcase_a_pill_txt_clr: #ffffff;
  --var_showcase_a_swatch_a_clr: #EC411B;
  --var_showcase_a_swatch_b_clr: #F26221;
  --var_showcase_a_swatch_c_clr: #15151C;
  --var_showcase_a_swatch_d_clr: #ffffff;
  --var_img_a_tint_clr: var(--var_bg_a);
  --var_person_a_base_clr: var(--var_bg_a);
  --var_person_a_lit_clr: #ffffff;
  --var_person_a_floor_clr: #000000;
  --var_person_a_level_b: 1;
  --var_person_a_level_c: 1;
  --var_person_a_spot_max: 1;
  --var_person_a_pix_clr: var(--var_acnt_clr_a);
  --var_person_a_label_bg_clr: color-mix(in srgb, var(--var_bg_a) 90%, transparent);
  --var_person_a_label_bdr_clr: var(--var_acnt_clr_a);
  --var_testimonial_a_alt_bg_clr: #15151C;
  --var_testimonial_a_alt_txt_clr: #ffffff;
  --var_photo_a_txt_clr: #20222A;
  --var_spotlight_a_mark_clr: var(--var_acnt_clr_a);
  --var_logo_grid_a_card_clr: #ffffff;
  --var_tile_a_bg_clr: #ffffff;
  --var_post_card_a_bg_clr: #ffffff;
  --var_feature_card_a_bg_clr: #ffffff;
  --var_step_a_bg_clr: #ffffff;
  --var_process_card_a_bg_clr: #ffffff;
  --var_job_card_a_bg_clr: #ffffff;
  --var_perk_a_bg_clr: #ffffff;
  --var_route_card_a_bg_clr: #ffffff;
  --var_route_link_a_bg_clr: #ffffff;
  --var_segments_a_cell_clr: #ffffff;
  --var_disclosure_a_bg_clr: #ffffff;
  --var_form_a_bg_clr: #ffffff;
  --var_hero_e_ink_clr: var(--var_txt_clr_b);
  --var_hero_e_logo_clr: var(--var_acnt_clr_a);
  --var_hdr_a_bg_clr: rgba(255, 255, 255, 0.92);
  --var_hdr_a_panel_clr: #F4F4F5;
  --var_hdr_a_txt_clr: #20222A;
  --var_hdr_a_logo_clr: var(--var_acnt_clr_a);
  --var_hdr_a_icn_clr: var(--var_acnt_clr_a);
  --var_hdr_a_link_clr: var(--var_txt_clr_a);
  --var_hdr_a_line_clr: var(--var_bdr_clr_a);
  --var_hdr_a_hvr_clr: rgba(32, 34, 42, 0.05);
  --var_person_card_a_bg_clr: #ffffff;
  --var_point_list_a_bg_clr: color-mix(in srgb, var(--var_hdr_clr_a) 3%, var(--var_bg_a));
  --var_avatar_b_bg_clr: #EDEDED;
  --var_dec_mark_a_clr: #FF2E00;
  --var_dec_mark_a_clr_alt: #FF8800;
  --var_leader_card_a_bg_clr: #F2F2F3;
  --var_leader_card_a_txt_clr: var(--var_hdr_clr_a);
  --var_leader_card_a_hvr_bg_clr: var(--brand);
  --var_leader_card_a_hvr_txt_clr: #ffffff;
  --var_member_card_a_bg_clr: #ffffff;
  --var_modal_a_bg_clr: #ffffff;
  --var_modal_a_side_clr: #F4F4F5;
  --var_modal_a_ovl_clr: #15151C;
  --var_info_card_a_bg_clr: var(--var_bg_b);
  --var_statement_a_txt_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  --var_quote_a_des_clr: #20222A;
  --var_quote_a_icn_clr: var(--var_acnt_clr_a);
  --var_quote_a_mark_clr: var(--var_acnt_clr_a);
  --var_work_card_a_ovl_bg: rgba(0, 0, 0, 0.3);
  --var_work_card_a_ovl_clr: #ffffff;
  --var_leaders_a_ink_clr: #0a0a0a;
  --var_leaders_a_bdr_clr: rgba(0, 0, 0, 0.2);
  --var_stack_a_clr_a: #454545;
  --var_stack_a_clr_b: #E9EAEC;
  --var_stack_a_clr_c: #7C7C7C;
  --var_stack_a_clr_d: #ffffff;
  --var_stack_a_hvr_clr_a: #ff6a00;
  --var_stack_a_hvr_clr_b: #ffe0c2;
  --var_stack_a_hvr_clr_c: #ff9d4d;
  --var_not_found_a_live_clr: var(--var_acnt_clr_a);
  --var_not_found_a_dead_clr: #D6D6DA;
  --var_not_found_a_ship_clr: var(--var_hdr_clr_a);
  --var_not_found_a_key_bg_clr: #ffffff;
  background-color: var(--var_bg_a);
  color: var(--var_txt_clr_a);
}

.thm_black, [data-theme=black],
.theme_dark, [data-theme=dark] {
  --var_bg_a: #15151C;
  --var_bg_b: #050505;
  --var_fg_a: #ffffff;
  --var_fg_b: rgba(255, 255, 255, 0.8);
  --var_bdr_clr_a: #33333B;
  --var_bdr_clr_b: rgba(255, 255, 255, 0.12);
  --var_txt_clr_a: #ffffff;
  --var_txt_clr_b: rgba(255, 255, 255, 0.8);
  --var_hdr_clr_a: #ffffff;
  --var_hdr_clr_b: rgba(255, 255, 255, 0.8);
  --var_acnt_clr_a: var(--brand);
  --var_acnt_clr_b: #F26221;
  --var_icn_a_clr: var(--brand);
  --var_icn_a_bdr_clr: #33333B;
  --var_btn_a_txt_clr: #ffffff;
  --var_btn_a_bdr_clr: var(--brand);
  --var_btn_a_icn_clr: #ffffff;
  --var_btn_a_hvr_clr: #ffffff;
  --var_btn_b_bg_clr: var(--brand);
  --var_btn_b_icn_clr: #ffffff;
  --var_btn_c_bg_clr: var(--brand);
  --var_btn_c_txt_clr: #ffffff;
  --var_btn_c_hvr_bg_clr: transparent;
  --var_btn_c_hvr_txt_clr: #ffffff;
  --var_btn_d_txt_clr: var(--var_txt_clr_a);
  --var_btn_d_icn_clr: var(--var_acnt_clr_a);
  --var_btn_d_line_clr: var(--var_acnt_clr_a);
  --var_btn_e_txt_clr: var(--var_txt_clr_a);
  --var_btn_e_bdr_clr: var(--var_bdr_clr_a);
  --var_btn_e_hvr_clr: var(--var_acnt_clr_a);
  --var_btn_f_icn_clr: var(--var_txt_clr_a);
  --var_btn_f_bdr_clr: var(--var_bdr_clr_a);
  --var_btn_f_hvr_clr: var(--var_acnt_clr_a);
  --var_grad_clr_a: #15151C;
  --var_grad_clr_b: #20202b;
  --var_grad_clr_c: #22222B;
  --var_dec_circle_clr: #33333B;
  --var_dec_circle_clr_alt: var(--brand);
  --var_dec_circle_bdr: #33333B;
  --var_dec_xline_mark_clr: var(--var_bdr_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_acnt_clr_a);
  --var_dec_xline_line_clr: var(--var_txt_clr_a);
  --var_hero_b_ink_clr: var(--var_txt_clr_a);
  --var_hero_b_xline_clr: var(--var_bdr_clr_a);
  --var_hero_b_xline_alt_clr: var(--var_acnt_clr_a);
  --var_hero_b_logo_clr: var(--brand);
  --var_hero_b_dots_clr: var(--brand);
  --var_stats_a_label_clr: var(--var_txt_clr_b);
  --var_icn_d_face_clr: var(--var_bg_a);
  --var_icn_d_line_clr: var(--var_txt_clr_a);
  --var_icn_e_bg_clr: color-mix(in srgb, var(--brand) 18%, transparent);
  --var_icn_e_clr: var(--brand);
  --var_cursor_a_clr: var(--brand);
  --var_cursor_a_bdr_clr: #ffffff;
  --var_bdg_a_txt_clr: var(--var_txt_clr_a);
  --var_photo_a_bg_clr: #20202b;
  --var_reveal_a_dim_clr: rgba(255, 255, 255, 0.35);
  --var_reveal_a_wire_clr: rgba(255, 255, 255, 0.3);
  --var_reveal_a_screen_clr: #1E1F29;
  --var_reveal_a_agent_clr: #2A2B36;
  --var_reveal_a_agent_txt_clr: #ffffff;
  --var_reveal_a_mark_clr: #EC411B;
  --var_showcase_a_card_clr: #20202b;
  --var_showcase_a_mark_clr: #EC411B;
  --var_showcase_a_ink_clr: #ffffff;
  --var_showcase_a_line_clr: rgba(255, 255, 255, 0.14);
  --var_showcase_a_acnt_clr: #EC411B;
  --var_showcase_a_on_acnt_clr: #ffffff;
  --var_showcase_a_pill_clr: #ffffff;
  --var_showcase_a_pill_txt_clr: #15151C;
  --var_showcase_a_swatch_a_clr: #EC411B;
  --var_showcase_a_swatch_b_clr: #F26221;
  --var_showcase_a_swatch_c_clr: #15151C;
  --var_showcase_a_swatch_d_clr: #ffffff;
  --var_img_a_tint_clr: #62636e;
  --var_person_a_base_clr: color-mix(in srgb, var(--var_bg_a) 82%, white);
  --var_person_a_lit_clr: color-mix(in srgb, var(--var_bg_a) 50%, white);
  --var_person_a_floor_clr: var(--var_bg_a);
  --var_person_a_level_b: 0.943;
  --var_person_a_level_c: 1.128;
  --var_person_a_spot_max: 0.7;
  --var_person_a_pix_clr: var(--var_acnt_clr_a);
  --var_person_a_label_bg_clr: transparent;
  --var_person_a_label_bdr_clr: transparent;
  --var_testimonial_a_alt_bg_clr: #22232C;
  --var_testimonial_a_alt_txt_clr: #ffffff;
  --var_photo_a_txt_clr: #ffffff;
  --var_spotlight_a_mark_clr: var(--var_acnt_clr_a);
  --var_logo_grid_a_card_clr: #1C1D28;
  --var_tile_a_bg_clr: #1C1D28;
  --var_post_card_a_bg_clr: #1C1D28;
  --var_feature_card_a_bg_clr: #1C1D28;
  --var_step_a_bg_clr: #1C1D28;
  --var_process_card_a_bg_clr: #1C1D28;
  --var_job_card_a_bg_clr: #1C1D28;
  --var_perk_a_bg_clr: #1C1D28;
  --var_route_card_a_bg_clr: #1C1D28;
  --var_route_link_a_bg_clr: #1C1D28;
  --var_segments_a_cell_clr: #1C1D28;
  --var_disclosure_a_bg_clr: #1C1D28;
  --var_form_a_bg_clr: #1C1D28;
  --var_hero_e_ink_clr: var(--var_txt_clr_b);
  --var_hero_e_logo_clr: var(--var_acnt_clr_a);
  --var_hdr_a_bg_clr: rgba(21, 21, 28, 0.92);
  --var_hdr_a_panel_clr: #1C1D28;
  --var_hdr_a_txt_clr: #ffffff;
  --var_hdr_a_logo_clr: var(--var_acnt_clr_a);
  --var_hdr_a_icn_clr: var(--var_acnt_clr_a);
  --var_hdr_a_link_clr: var(--var_txt_clr_a);
  --var_hdr_a_line_clr: var(--var_bdr_clr_a);
  --var_hdr_a_hvr_clr: rgba(255, 255, 255, 0.06);
  --var_person_card_a_bg_clr: #1C1D28;
  --var_point_list_a_bg_clr: color-mix(in srgb, var(--var_hdr_clr_a) 3%, var(--var_bg_a));
  --var_avatar_b_bg_clr: #2A2B36;
  --var_dec_mark_a_clr: #FF2E00;
  --var_dec_mark_a_clr_alt: #FF8800;
  --var_leader_card_a_bg_clr: #1C1D28;
  --var_leader_card_a_txt_clr: var(--var_hdr_clr_a);
  --var_leader_card_a_hvr_bg_clr: var(--brand);
  --var_leader_card_a_hvr_txt_clr: #ffffff;
  --var_member_card_a_bg_clr: #1C1D28;
  --var_modal_a_bg_clr: #1C1D28;
  --var_modal_a_side_clr: #2A2B36;
  --var_modal_a_ovl_clr: #000000;
  --var_info_card_a_bg_clr: #1C1D28;
  --var_statement_a_txt_clr: color-mix(in srgb, var(--var_txt_clr_a) 30%, transparent);
  --var_quote_a_des_clr: #ffffff;
  --var_quote_a_icn_clr: var(--var_acnt_clr_a);
  --var_quote_a_mark_clr: var(--var_acnt_clr_a);
  --var_work_card_a_ovl_bg: rgba(0, 0, 0, 0.3);
  --var_work_card_a_ovl_clr: #ffffff;
  --var_leaders_a_ink_clr: #ffffff;
  --var_leaders_a_bdr_clr: rgba(255, 255, 255, 0.2);
  --var_stack_a_clr_a: #C9CAD1;
  --var_stack_a_clr_b: #2A2B36;
  --var_stack_a_clr_c: #6E6F7B;
  --var_stack_a_clr_d: #1E1F29;
  --var_stack_a_hvr_clr_a: #ff6a00;
  --var_stack_a_hvr_clr_b: #4A2A17;
  --var_stack_a_hvr_clr_c: #ff9d4d;
  --var_not_found_a_live_clr: var(--var_acnt_clr_a);
  --var_not_found_a_dead_clr: #3A3A44;
  --var_not_found_a_ship_clr: var(--var_hdr_clr_a);
  --var_not_found_a_key_bg_clr: #20202A;
  background-color: var(--var_bg_a);
  color: var(--var_txt_clr_a);
}

.thm_orange, [data-theme=orange] {
  --var_bg_a: #FF390D;
  --var_bg_b: #FF1500;
  --var_fg_a: #ffffff;
  --var_fg_b: #ffe0cc;
  --var_bdr_clr_a: #ffaa00;
  --var_bdr_clr_b: #ff8800;
  --var_txt_clr_a: #ffffff;
  --var_txt_clr_b: #ffe0cc;
  --var_hdr_clr_a: #ffffff;
  --var_hdr_clr_b: #ffe0cc;
  --var_acnt_clr_a: #ffffff;
  --var_acnt_clr_b: #ffe0cc;
  --var_icn_a_clr: #ffffff;
  --var_icn_a_bdr_clr: #ffaa00;
  --var_btn_a_txt_clr: #ffffff;
  --var_btn_a_bdr_clr: #ffffff;
  --var_btn_a_icn_clr: #ffffff;
  --var_btn_a_hvr_clr: #ff6a00;
  --var_btn_b_bg_clr: #ffffff;
  --var_btn_b_icn_clr: var(--var_bg_a);
  --var_btn_c_bg_clr: #ffffff;
  --var_btn_c_txt_clr: var(--var_bg_a);
  --var_btn_c_hvr_bg_clr: transparent;
  --var_btn_c_hvr_txt_clr: #ffffff;
  --var_btn_d_txt_clr: var(--var_txt_clr_a);
  --var_btn_d_icn_clr: var(--var_acnt_clr_a);
  --var_btn_d_line_clr: var(--var_acnt_clr_a);
  --var_btn_e_txt_clr: var(--var_txt_clr_a);
  --var_btn_e_bdr_clr: rgba(255, 255, 255, 0.5);
  --var_btn_e_hvr_clr: var(--var_acnt_clr_a);
  --var_btn_f_icn_clr: var(--var_txt_clr_a);
  --var_btn_f_bdr_clr: var(--var_bdr_clr_a);
  --var_btn_f_hvr_clr: var(--var_acnt_clr_a);
  --var_grad_clr_a: #ff8833;
  --var_grad_clr_b: #cc3300;
  --var_grad_clr_c: #ff5500;
  --var_dec_circle_clr: #ffaa00;
  --var_dec_circle_clr_alt: #ffffff;
  --var_dec_circle_bdr: #ffaa00;
  --var_dec_xline_mark_clr: var(--var_bdr_clr_a);
  --var_dec_xline_mark_alt_clr: var(--var_acnt_clr_a);
  --var_dec_xline_line_clr: var(--var_txt_clr_a);
  --var_hero_b_ink_clr: #0a0a0a;
  --var_hero_b_xline_clr: #0a0a0a;
  --var_hero_b_xline_alt_clr: color-mix(in srgb, var(--var_fg_a) 70%, transparent);
  --var_hero_b_logo_clr: #0a0a0a;
  --var_hero_b_dots_clr: var(--var_bdr_clr_a);
  --var_stats_a_label_clr: #0a0a0a;
  --var_icn_d_face_clr: #ff8833;
  --var_icn_d_line_clr: #cc3300;
  --var_icn_e_bg_clr: rgba(255, 255, 255, 0.2);
  --var_icn_e_clr: #ffffff;
  --var_cursor_a_clr: #ffffff;
  --var_cursor_a_bdr_clr: var(--ink);
  --var_bdg_a_txt_clr: #ffffff;
  --var_photo_a_bg_clr: #ffffff;
  --var_reveal_a_dim_clr: rgba(255, 255, 255, 0.7);
  --var_reveal_a_wire_clr: rgba(255, 255, 255, 0.7);
  --var_reveal_a_screen_clr: #F0350C;
  --var_reveal_a_agent_clr: #15151C;
  --var_reveal_a_agent_txt_clr: #ffffff;
  --var_reveal_a_mark_clr: #15151C;
  --var_showcase_a_card_clr: #F0350C;
  --var_showcase_a_mark_clr: #15151C;
  --var_showcase_a_ink_clr: #ffffff;
  --var_showcase_a_line_clr: rgba(255, 255, 255, 0.38);
  --var_showcase_a_acnt_clr: #15151C;
  --var_showcase_a_on_acnt_clr: #ffffff;
  --var_showcase_a_pill_clr: #15151C;
  --var_showcase_a_pill_txt_clr: #ffffff;
  --var_showcase_a_swatch_a_clr: #EC411B;
  --var_showcase_a_swatch_b_clr: #F26221;
  --var_showcase_a_swatch_c_clr: #15151C;
  --var_showcase_a_swatch_d_clr: #ffffff;
  --var_img_a_tint_clr: var(--var_bg_a);
  --var_person_a_base_clr: var(--var_bg_a);
  --var_person_a_lit_clr: #ffffff;
  --var_person_a_floor_clr: #000000;
  --var_person_a_level_b: 1;
  --var_person_a_level_c: 1;
  --var_person_a_spot_max: 0.7;
  --var_person_a_pix_clr: #0a0a0a;
  --var_person_a_label_bg_clr: transparent;
  --var_person_a_label_bdr_clr: transparent;
  --var_testimonial_a_alt_bg_clr: #15151C;
  --var_testimonial_a_alt_txt_clr: #ffffff;
  --var_photo_a_txt_clr: #20222A;
  --var_spotlight_a_mark_clr: #0a0a0a;
  --var_logo_grid_a_card_clr: #FF1500;
  --var_tile_a_bg_clr: #FF1500;
  --var_post_card_a_bg_clr: #FF1500;
  --var_feature_card_a_bg_clr: #FF1500;
  --var_step_a_bg_clr: #FF1500;
  --var_process_card_a_bg_clr: #FF1500;
  --var_job_card_a_bg_clr: #FF1500;
  --var_perk_a_bg_clr: #FF1500;
  --var_route_card_a_bg_clr: #FF1500;
  --var_route_link_a_bg_clr: #FF1500;
  --var_segments_a_cell_clr: #FF1500;
  --var_disclosure_a_bg_clr: #FF1500;
  --var_form_a_bg_clr: #FF1500;
  --var_hero_e_ink_clr: #0a0a0a;
  --var_hero_e_logo_clr: #0a0a0a;
  --var_hdr_a_bg_clr: rgba(255, 57, 13, 0.92);
  --var_hdr_a_panel_clr: var(--var_bg_a);
  --var_hdr_a_txt_clr: #ffffff;
  --var_hdr_a_logo_clr: #0a0a0a;
  --var_hdr_a_icn_clr: #0a0a0a;
  --var_hdr_a_link_clr: rgba(10, 10, 10, 0.85);
  --var_hdr_a_line_clr: rgba(10, 10, 10, 0.18);
  --var_hdr_a_hvr_clr: rgba(10, 10, 10, 0.08);
  --var_person_card_a_bg_clr: #FF1500;
  --var_point_list_a_bg_clr: color-mix(in srgb, var(--var_hdr_clr_a) 3%, var(--var_bg_a));
  --var_avatar_b_bg_clr: #FF8833;
  --var_dec_mark_a_clr: #ffffff;
  --var_dec_mark_a_clr_alt: #0a0a0a;
  --var_leader_card_a_bg_clr: #FF1500;
  --var_leader_card_a_txt_clr: var(--var_hdr_clr_a);
  --var_leader_card_a_hvr_bg_clr: #0a0a0a;
  --var_leader_card_a_hvr_txt_clr: #ffffff;
  --var_member_card_a_bg_clr: #FF1500;
  --var_modal_a_bg_clr: #FF1500;
  --var_modal_a_side_clr: #FF390D;
  --var_modal_a_ovl_clr: #2A0800;
  --var_info_card_a_bg_clr: #FF1500;
  --var_statement_a_txt_clr: rgba(255, 255, 255, 0.45);
  --var_quote_a_des_clr: #0a0a0a;
  --var_quote_a_icn_clr: #0a0a0a;
  --var_quote_a_mark_clr: #0a0a0a;
  --var_work_card_a_ovl_bg: rgba(0, 0, 0, 0.3);
  --var_work_card_a_ovl_clr: #ffffff;
  --var_leaders_a_ink_clr: #0a0a0a;
  --var_leaders_a_bdr_clr: rgba(101, 0, 0, 0.5);
  --var_stack_a_clr_a: #ffffff;
  --var_stack_a_clr_b: #FF7A5C;
  --var_stack_a_clr_c: #FFC2B3;
  --var_stack_a_clr_d: #FF5A33;
  --var_stack_a_hvr_clr_a: #15151C;
  --var_stack_a_hvr_clr_b: #ffffff;
  --var_stack_a_hvr_clr_c: #FFD9CC;
  --var_not_found_a_live_clr: var(--var_acnt_clr_a);
  --var_not_found_a_dead_clr: #FF8F70;
  --var_not_found_a_ship_clr: var(--var_hdr_clr_a);
  --var_not_found_a_key_bg_clr: #15151C;
  background-color: var(--var_bg_a);
  color: var(--var_txt_clr_a);
}

/*# sourceMappingURL=all.css.map */