/* ============================================================
   Integrated Biosciences — replica-v2 GLOBAL stylesheet
   Clean rewrite of WP dist/css/app-styles.css.
   Every value sourced from components/00-global.spec.md and
   the truth CSS (dist/css/app-styles.css). No external CDN.
   ============================================================ */

/* ---------- Fonts (local, vendored) ---------- */
@font-face {
  font-family: "Aspekta";
  src: url("../assets/fonts/Aspekta-400.DnG7D574.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aspekta";
  src: url("../assets/fonts/Aspekta-600.B1yRRxUg.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("../assets/fonts/RobotoMono-Regular.Dl_9wEMW.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  /* colors */
  --color--1: #c9cbbe;            /* warm grey — hover bg / borders */
  --color--2: #a7e26e;            /* lime — burger bars / status dots */
  --color--3: #cef79e;            /* light green — button blob hover */
  --color--4: #eee;
  --color--5: #e4e3e3;
  --color--6: #f7f7f5;            /* nav hover bg */
  --color--7: #222f30;            /* ink — body text / dark bg */
  --color--7-rgb: 34, 47, 48;
  --color--8: #f5f8f7;
  --color--9: #445e5f;
  /* easings / outline */
  --transition-ease--1: cubic-bezier(.16, 1, .3, 1);
  --outline-color: var(--color--7);
  --outline-style: solid;
  --outline-width: 4px;
  --outline-offset: 4px;
  --outline-transition-duration: .15s;
  /* families */
  --family--1: "Aspekta", -apple-system, BlinkMacSystemFont, avenir next, avenir,
    segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --family--2: "Roboto Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  /* container / gap */
  --container-max-width-1: 1524px;
  --gap: 20px;
  --container-padding-lg: 48px;
  --container-padding-sm: 24px;
  --container-padding: var(--container-padding-sm);
  /* base */
  --base--background-color: #f7f7f5;
  --base--text-color: #222f30;
  --base--font-family: var(--family--1);
  --base--font-size: 16px;
  --base--font-weight: 400;
  --base--line-height: 1em;
  --cw: 100vw;
  /* 12-col grid */
  --grid-column-count: 12;
  --grid-gap: calc(var(--container-padding) / 2);
  --col-1: calc(100% * 1 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 1 / var(--grid-column-count)));
  --col-2: calc(100% * 2 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 2 / var(--grid-column-count)));
  --col-3: calc(100% * 3 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 3 / var(--grid-column-count)));
  --col-4: calc(100% * 4 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 4 / var(--grid-column-count)));
  --col-5: calc(100% * 5 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 5 / var(--grid-column-count)));
  --col-6: calc(100% * 6 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 6 / var(--grid-column-count)));
  --col-7: calc(100% * 7 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 7 / var(--grid-column-count)));
  --col-8: calc(100% * 8 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 8 / var(--grid-column-count)));
  --col-9: calc(100% * 9 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 9 / var(--grid-column-count)));
  --col-10: calc(100% * 10 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 10 / var(--grid-column-count)));
  --col-11: calc(100% * 11 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 11 / var(--grid-column-count)));
  --col-12: calc(100% * 12 / var(--grid-column-count) - (var(--grid-gap) - var(--grid-gap) * 12 / var(--grid-column-count)));
}
@media (min-width: 1025px) {
  :root { --container-padding: var(--container-padding-lg); }
}
@media (min-width: 1025px) {
  :root { --grid-gap: var(--container-padding); }
}

/* ---------- View Transitions ---------- */
@view-transition { navigation: auto; }
:root { view-transition-name: root; }
@keyframes fade-out { 0% { opacity: 1 } to { opacity: 0 } }
@keyframes fade-in { 0% { opacity: 0 } to { opacity: 1 } }
::view-transition-old(root) { animation: .8s cubic-bezier(.76, 0, .24, 1) both fade-out; }
::view-transition-new(root) { animation: .8s cubic-bezier(.76, 0, .24, 1) both fade-in; }

/* ---------- Base (html / body) ---------- */
html, body {
  margin: 0;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: clip;
  width: 100%;
  font-size: var(--base--font-size, 16px);
  font-family: var(--base--font-family);
  font-weight: var(--base--font-weight);
  line-height: var(--base--line-height, 100%);
  background: var(--base--background-color, #f7f7f5);
  color: var(--base--text-color, #000);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}
html {
  scroll-behavior: initial;
  min-height: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow-y: scroll;
}
@media (prefers-reduced-motion: reduce) {
  html *, html *:before, html *:after { transition: none !important; }
}

/* ---------- Global element reset (truth: .wp-site-blocks * :where(...)) ----------
   Replica scope: everything under <body>, minus the truth exclusion list
   (plus script/style/meta plumbing that lives under body in this build). */
body *:where(:not(html):not(iframe):not(canvas):not(img):not(svg):not(video):not(audio):not(svg *):not(symbol *):not(script):not(style):not(link):not(meta):not(title):not(noscript)) {
  all: unset;
  display: revert;
  margin: 0;
}
body *, body *:before, body *:after { box-sizing: border-box; }
a, button { cursor: revert; }
img { max-width: 100%; max-height: 100%; }

/* ---------- Typography baseline ----------
   Fluid formula pattern: max(minR, min(calc(minR + slope*(100vw - 27.5rem)), maxR)) */
h1, h2, h3, h4, h5, h6 { display: block; font-weight: 400; text-wrap: pretty; }
b, strong { font-weight: 600; }
h1 { /* hero .main_heading */
  font-size: max(3.125rem, min(calc(3.125rem + .062 * (100vw - 27.5rem)), 7rem));
  letter-spacing: -.03em;
  line-height: 1em;
  max-width: 1070px;
}
h2 { /* hero .main_text */
  font-size: max(1.25rem, min(calc(1.25rem + .004 * (100vw - 27.5rem)), 1.5rem));
  letter-spacing: -.02em;
  line-height: 1.2em;
}
h3 { /* hgroup .heading */
  font-size: max(1.625rem, min(calc(1.625rem + .05 * (100vw - 27.5rem)), 4.75rem));
  letter-spacing: -.02em;
  line-height: 1.1em;
  text-wrap: balance;
}
h4 { /* hgroup .text */
  font-size: max(1rem, min(calc(1rem + .003 * (100vw - 27.5rem)), 1.1875rem));
  letter-spacing: -.02em;
  line-height: 1.3em;
  max-width: 790px;
  text-wrap: pretty;
}

/* Mono fluid size used by labels/buttons/tags/dates:
   max(.75rem, min(calc(.75rem + .002*(100vw - 27.5rem)), .875rem))
   .8125rem variant: slope .002, cap .9375rem (see .meta_date blocks) */

/* ---------- u-ts--1 : mono pill tag with lime dot ---------- */
.u-ts--1 {
  align-items: center;
  background: var(--background-color, #fff);
  border-radius: var(--border-radius, 8px);
  color: var(--color, var(--base--text-color));
  display: inline-flex;
  font-family: var(--family--2);
  font-size: max(.75rem, min(calc(.75rem + .002 * (100vw - 27.5rem)), .875rem));
  letter-spacing: 0;
  line-height: 1em;
  padding: 8px 12px 8px 8px;
  text-transform: uppercase;
  width: -moz-fit-content;
  width: fit-content;
}
.u-ts--1:before {
  background: var(--blob-color, var(--color--2));
  content: "";
  display: inline-flex;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 12px;
  width: 10px;
  height: 10px;
}

/* ---------- main.page-main : container-query anchor ---------- */
main.page-main {
  container-type: inline-size;
  container-name: main;
  --cw: 100vw;
  width: 100%;
}
@supports (-webkit-touch-callout: none) {
  main.page-main { min-height: -webkit-fill-available; }
}
main.page-main > .page-content {
  background: var(--base--background-color, #f7f7f5);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin-bottom: -20px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
@media (min-width: 1025px) {
  main.page-main > .page-content {
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    margin-bottom: -40px;
  }
}

/* ---------- Lenis html class family ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-stopped { overflow-y: scroll !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ---------- Button system ---------- */
/* shared reset for all button variants */
.u-btn--1, .u-btn--2, .u-btn--3, .u-btn--4 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
  display: inline-flex;
  font-weight: 400;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  -webkit-text-decoration: none;
  text-decoration: none;
  width: auto;
  width: -moz-fit-content;
  width: fit-content;
}
.u-btn--1:not(:disabled), .u-btn--2:not(:disabled), .u-btn--3:not(:disabled), .u-btn--4:not(:disabled) {
  pointer-events: auto;
}

/* --- u-btn--1 : morph pill (footer CTA) --- */
.u-btn--1 {
  --button-text-background: var(--color--7);
  --button-text-background-hover: var(--color--3);
  --button-text-color: #fff;
  --button-text-color-hover: var(--color--7);
  --button-blob-background: var(--color--3);
  --button-blob-background-hover: var(--color--7);
  --button-blob-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23222F30' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-image-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-position: center left -150%, center left 50%;
  --button-blob-icon-position-hover: center left 50%, center left 150%;
  --button-blob-scale: .875;
  --button-transition-duration: .6s;
  --button-transition-timing-function: cubic-bezier(.25, 1, .5, 1);
  align-items: stretch;
  background: transparent;
  border-radius: 0;
  height: 48px;
}
.u-btn--1 svg { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 1; }
.u-btn--1 svg path {
  transition-duration: var(--button-transition-duration);
  transition-property: fill;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--1 .btn_label {
  align-items: center;
  background: var(--button-text-background);
  border-radius: 12px 0 0 12px;
  color: var(--button-text-color);
  display: inline-flex;
  font-family: var(--family--2);
  font-size: max(.75rem, min(calc(.75rem + .002 * (100vw - 27.5rem)), .875rem));
  justify-content: flex-start;
  letter-spacing: 0;
  line-height: 1;
  margin-right: 16px;
  overflow: visible;
  padding: 8px 8px 8px 20px;
  position: relative;
  text-transform: uppercase;
  transition-duration: var(--button-transition-duration);
  transition-property: background-color, color, margin-inline-end, padding-right;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--1 .label_corner {
  background: transparent;
  display: block;
  top: 0;
  right: -16px;
  bottom: 0;
  position: absolute;
  width: 18px;
  height: 100%;
}
.u-btn--1 .label_corner svg path { fill: var(--button-text-background); }
.u-btn--1 .btn_icon {
  background-color: transparent;
  display: inline-flex;
  overflow: hidden;
  padding: 10px;
  position: relative;
  width: 51px;
  height: 100%;
  transform: scale(1);
  transform-origin: center right;
  transition-duration: var(--button-transition-duration);
  transition-property: transform;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--1 .btn_icon:before {
  background-color: transparent;
  background-image: var(--button-blob-icon-image-hover), var(--button-blob-icon-image);
  background-repeat: no-repeat;
  background-position: var(--button-blob-icon-position);
  background-size: 10px 10px;
  content: "";
  top: 0;
  left: 4px;
  position: absolute;
  width: calc(100% - 4px);
  height: 100%;
  transition-duration: var(--button-transition-duration);
  transition-property: background-position;
  transition-timing-function: var(--button-transition-timing-function);
  z-index: 2;
}
.u-btn--1 .btn_icon svg path { fill: var(--button-blob-background); }
@media (hover: hover) and (pointer: fine) {
  .u-btn--1:hover .btn_label {
    background-color: var(--button-text-background-hover);
    color: var(--button-text-color-hover);
    margin-right: 12px;
    padding-right: 14px;
  }
  .u-btn--1:hover .label_corner svg path { fill: var(--button-text-background-hover); }
  .u-btn--1:hover .btn_icon { transform: scale(var(--button-blob-scale)); }
  .u-btn--1:hover .btn_icon:before { background-position: var(--button-blob-icon-position-hover); }
  .u-btn--1:hover .btn_icon svg path { fill: var(--button-blob-background-hover); }
}

/* --- u-btn--2 : round arrow button 48x48 --- */
.u-btn--2 {
  --button-blob-background: var(--color--3);
  --button-blob-background-hover: var(--color--7);
  --button-blob-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23222F30' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-image-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-position: center left calc((100% + 22px) * -1), center left calc(0% + 22px);
  --button-blob-icon-position-hover: center left calc(0% + 22px), center left calc(100% + 22px);
  --button-blob-icon-size: 10px 10px;
  --button-blob-scale: .875;
  --button-transition-duration: .6s;
  --button-transition-timing-function: cubic-bezier(.25, 1, .5, 1);
  align-items: center;
  background: transparent;
  border-radius: 0;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}
.u-btn--2 svg { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 1; }
.u-btn--2 svg path {
  transition-property: fill;
  transition-duration: var(--button-transition-duration);
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--2 .btn_icon {
  background-color: transparent;
  overflow: hidden;
  padding: 10px;
  position: relative;
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: center;
  transition-duration: var(--button-transition-duration);
  transition-property: transform;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--2 .btn_icon:before {
  background-color: transparent;
  background-image: var(--button-blob-icon-image-hover), var(--button-blob-icon-image);
  background-repeat: no-repeat;
  background-position: var(--button-blob-icon-position);
  background-size: var(--button-blob-icon-size);
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  transition-duration: var(--button-transition-duration);
  transition-property: background-position;
  transition-timing-function: var(--button-transition-timing-function);
  z-index: 2;
}
.u-btn--2 .btn_icon svg path { fill: var(--button-blob-background); }
@media (hover: hover) and (pointer: fine) {
  .u-btn--2:hover .btn_icon { transform: scale(var(--button-blob-scale)); }
  .u-btn--2:hover .btn_icon:before { background-position: var(--button-blob-icon-position-hover); }
  .u-btn--2:hover .btn_icon svg path { fill: var(--button-blob-background-hover); }
}

/* --- u-btn--3 : solid ink rect (header CTA) --- */
.u-btn--3 {
  --button-background: var(--color--7);
  --button-background-hover: var(--color--1);
  --button-border: transparent;
  --button-border-hover: transparent;
  --button-text-color: #fff;
  --button-text-color-hover: var(--color--7);
  --button-transition-duration: .3s;
  --button-transition-timing-function: cubic-bezier(.76, 0, .24, 1);
  align-items: center;
  background: var(--button-background);
  border: var(--button-border);
  border-radius: 12px;
  color: var(--button-text-color);
  font-family: var(--family--2);
  font-size: max(.75rem, min(calc(.75rem + .002 * (100vw - 27.5rem)), .875rem));
  justify-content: flex-start;
  letter-spacing: 0;
  line-height: 1;
  height: 46px;
  overflow: hidden;
  padding: 8px 20px;
  position: relative;
  text-transform: uppercase;
  transition-delay: .1s;
  transition-duration: .1s;
  transition-property: background-color, background-position, border;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--3 .btn_label {
  display: inline-flex;
  transform: translateY(0);
  transition-duration: var(--button-transition-duration);
  transition-property: transform;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--3:after {
  align-items: center;
  background: var(--button-background-hover);
  border-radius: inherit;
  color: var(--button-text-color-hover);
  content: attr(data-label);
  display: flex;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  justify-content: flex-start;
  padding: inherit;
  top: -1px;
  left: -1px;
  position: absolute;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  text-align: left;
  text-transform: uppercase;
  transform: translateY(100%);
  transition-duration: var(--button-transition-duration);
  transition-property: transform;
  transition-timing-function: var(--button-transition-timing-function);
  z-index: 1;
}
.u-btn--3.-plus { padding-right: 40px; }
.u-btn--3.-plus:before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='12' fill='none' viewBox='0 0 11 12'%3E%3Cpath fill='%23222F30' d='M5.5.583a.75.75 0 0 1 .75.75V5.25h3.915a.75.75 0 1 1 0 1.5H6.25v3.916a.75.75 0 0 1-1.5 0V6.75H.832a.75.75 0 0 1 0-1.5H4.75V1.333a.75.75 0 0 1 .75-.75Z'/%3E%3C/svg%3E") no-repeat center / 11px 12px;
  content: "";
  display: flex;
  margin-top: auto;
  margin-bottom: auto;
  top: 0;
  right: 20px;
  bottom: 0;
  position: absolute;
  width: 11px;
  height: 12px;
  transform: rotate(0);
  transform-origin: center;
  transition-duration: .6s;
  transition-property: transform;
  transition-timing-function: var(--transition-ease--1);
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .u-btn--3:hover {
    background: var(--button-background-hover);
    border: var(--button-border-hover);
    transition-delay: .15s;
  }
  .u-btn--3:hover .btn_label { transform: translateY(-12px); }
  .u-btn--3:hover:after { transform: translateY(0); }
  .u-btn--3:hover.-plus:before { transform: rotate(180deg); }
}

/* --- u-btn--4 : text + arrow blob --- */
.u-btn--4 {
  --button-text-color: var(--base--text-color);
  --button-text-color-hover: var(--button-text-color);
  --button-blob-background: var(--color--3);
  --button-blob-background-hover: var(--color--7);
  --button-blob-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23222F30' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-image-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-position: center left -150%, center left 50%;
  --button-blob-icon-position-hover: center left 50%, center left 150%;
  --button-blob-scale: .875;
  --button-transition-duration: .6s;
  --button-transition-timing-function: cubic-bezier(.25, 1, .5, 1);
  align-items: stretch;
  background: transparent;
  border-radius: 0;
  -moz-column-gap: 7px;
  column-gap: 7px;
  height: 42px;
  overflow: hidden;
  position: relative;
}
.u-btn--4 svg { top: 0; left: 0; position: absolute; width: 100%; height: 100%; z-index: 1; }
.u-btn--4 svg path {
  transition-duration: var(--button-transition-duration);
  transition-property: fill;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--4 .btn_label {
  align-items: center;
  color: var(--button-text-color);
  display: inline-flex;
  font-family: var(--family--2);
  font-size: max(.75rem, min(calc(.75rem + .002 * (100vw - 27.5rem)), .875rem));
  justify-content: flex-start;
  letter-spacing: 0;
  line-height: 1;
  overflow: visible;
  padding: 0;
  position: relative;
  text-transform: uppercase;
  transition-duration: var(--button-transition-duration);
  transition-property: color;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--4 .label_corner { display: none; }
.u-btn--4 .btn_icon {
  background-color: transparent;
  display: inline-flex;
  overflow: hidden;
  padding: 10px;
  position: relative;
  width: 51px;
  height: 100%;
  transform: scale(1);
  transform-origin: center right;
  transition-duration: var(--button-transition-duration);
  transition-property: transform;
  transition-timing-function: var(--button-transition-timing-function);
}
.u-btn--4 .btn_icon:before {
  background-color: transparent;
  background-image: var(--button-blob-icon-image-hover), var(--button-blob-icon-image);
  background-repeat: no-repeat;
  background-position: var(--button-blob-icon-position);
  background-size: 10px 10px;
  content: "";
  top: 0;
  left: 4px;
  position: absolute;
  width: calc(100% - 8px);
  height: 100%;
  transition-duration: var(--button-transition-duration);
  transition-property: background-position;
  transition-timing-function: var(--button-transition-timing-function);
  z-index: 2;
}
.u-btn--4 .btn_icon svg path { fill: var(--button-blob-background); }
@media (hover: hover) and (pointer: fine) {
  .u-btn--4:hover .btn_label { color: var(--button-text-color-hover); }
  .u-btn--4:hover .btn_icon { transform: scale(var(--button-blob-scale)); }
  .u-btn--4:hover .btn_icon:before { background-position: var(--button-blob-icon-position-hover); }
  .u-btn--4:hover .btn_icon svg path { fill: var(--button-blob-background-hover); }
}
/* .-reverse : arrow on the left, mirrored */
.u-btn--4.-reverse {
  --button-blob-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-image-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23222F30' d='M7.703 5.8H.398V4.6h7.305l-3.36-3.36.855-.84 4.8 4.8-4.8 4.8-.855-.84 3.36-3.36Z'/%3E%3C/svg%3E");
  --button-blob-icon-position: center right calc(50% - 2px), center right calc(150% - 2px);
  --button-blob-icon-position-hover: center right calc((150% - 2px) * -1), center right calc(50% - 2px);
  flex-direction: row-reverse;
}
.u-btn--4.-reverse .btn_icon { transform: scaleX(-1) !important; transform-origin: center !important; }
.u-btn--4.-reverse .btn_icon:before { left: auto; right: 4px; }

/* ---------- Container utilities ---------- */
.u-container { box-sizing: border-box; margin-left: auto; margin-right: auto; width: 100%; }
.u-container--pad {
  padding-left: var(--container-padding, 40px);
  padding-right: var(--container-padding, 40px);
}
.u-container--1 {
  --width: var(--container-max-width-1);
  max-width: var(--container-max-width-1);
}
@media (min-width: 1025px) {
  .u-container--1.u-container--pad {
    max-width: calc(var(--width) + calc(2 * var(--container-padding, 40px)));
  }
}

/* ---------- Section protocol : [data-cid].u-default (layered below block css) ---------- */
/* unlayered (was @layer defaults) */
[data-cid].u-default {
    --block-block-radius: 20px;
    background-color: transparent;
    display: block;
    font-size: 0;
    overflow: clip;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}

@media (min-width: 1025px) {
    [data-cid].u-default { --block-block-radius: 40px; }
  }
  [data-cid].u-default a { -webkit-text-decoration: none; text-decoration: none; }
  [data-cid].u-default h1, [data-cid].u-default h2, [data-cid].u-default h3,
  [data-cid].u-default h4, [data-cid].u-default h5, [data-cid].u-default h6 { font-weight: 400; }
  [data-cid].u-default.-round-block-offset { z-index: 2; }
  [data-cid].u-default.-round-block { border-radius: var(--block-block-radius); }
  [data-cid].u-default.-round-block.-round-block-offset {
    margin-top: calc(var(--block-block-radius) * -1);
    margin-bottom: calc(var(--block-block-radius) * -1);
  }
  [data-cid].u-default.-round-block--start { border-radius: var(--block-block-radius) var(--block-block-radius) 0 0; }
  [data-cid].u-default.-round-block--start.-round-block-offset { margin-top: calc(var(--block-block-radius) * -1); }
  [data-cid].u-default.-round-block--end { border-radius: 0 0 var(--block-block-radius) var(--block-block-radius); }
  [data-cid].u-default.-round-block--end.-round-block-offset { margin-bottom: calc(var(--block-block-radius) * -1); }

/* ---------- Misc utilities ---------- */
.u-cover-bg { background-position: center; background-repeat: no-repeat; background-size: cover; }
.u-cover-object { top: 0; left: 0; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.u-absolute-fill, .u-absolute-anchor { top: 0; left: 0; position: absolute; width: 100%; height: 100%; }
.u-absolute-anchor { color: transparent; font-size: 0; text-indent: -999px; }
.u-ff--1 { font-family: var(--family--1); }
.u-ff--2 { font-family: var(--family--2); }
.u-visible { opacity: 1 !important; visibility: visible !important; }
.u-invisible { opacity: 0 !important; visibility: hidden !important; }
.u-hidden { display: none !important; visibility: hidden !important; }
.u-screen-reader {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  height: 1px;
  word-wrap: normal !important;
}
.u-disable-button { pointer-events: none; }

/* ---------- text-reveal system (driven by js/app.js) ---------- */
.text-reveal-word {
  clip-path: inset(-.1em);
  overflow: visible !important;
  overflow: initial !important;
  display: inline-block;
  position: relative;
}
.text-reveal-overlay {
  background-color: var(--overlay-color, var(--color--5));
  pointer-events: none;
  inset: .15em 0 -.15em;
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .text-reveal-overlay { display: none; transition: none; }
}