/* Home 2026 — Main Hero header + Pick Specialty Section (Figma « Site entreprise », frame Index 2026 FR) */

@font-face {
    font-family: 'DM Sharp Sans';
    src: url('../fonts/sharpsans/SharpSans-Semibold.otf') format('opentype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sharp Sans';
    src: url('../fonts/sharpsans/SharpSans-Bold.otf') format('opentype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sharp Sans';
    src: url('../fonts/sharpsans/SharpSans-Extrabold.otf') format('opentype');
    font-weight: 800;
    font-display: swap;
}

:root {
    --dm26-celestial-blue: #30a3f1;
    --dm26-title-brand-alt: #003a61;
    --dm26-text-link: #358dde;
    --dm26-stroke-button: #e2e6ec;
    --dm26-text-button: #101015;
    --dm26-icon-button: #363645;
    --dm26-card-stroke: #f0f1f4;
    --dm26-shadow-low: 0 2px 16px 0 rgba(52, 93, 158, .14), 0 1px 3px 0 rgba(52, 93, 158, .10);
    --dm26-shadow-badge: 0 8.07px 44.39px 0 rgba(52, 93, 158, .42), 0 8.07px 30.47px 0 rgba(52, 93, 158, .25);
    --dm26-shadow-high: 0 30px 45px -30px rgba(50, 50, 93, .25), 0 18px 36px -18px rgba(0, 0, 0, .10);
}

/* ---------------------------------- HERO ---------------------------------- */
.hero-2026 {
    --wave-h: clamp(70px, 12.15vw, 210px);
    position: relative;
    overflow: hidden;
    --art-w: min(800px, 100vw - 50px); /* width of .hero-2026__art, used to place the badge */
    padding-top: 175px;
    background: var(--dm26-celestial-blue);
}

/* Parallax (--parallax = scroll offset, set by the inline script in pages/fr/index.php).
   Foreground (waves, badge) scrolls normally; each layer further back lags by a larger fraction. */
.hero-2026__bg,
.hero-2026__inner,
.hero-2026__thumb { will-change: translate; }
.hero-2026__thumb--bl,
.hero-2026__thumb--br { translate: 0 calc(var(--parallax, 0px) * .10); }
.hero-2026__inner     { translate: 0 calc(var(--parallax, 0px) * .20); }
.hero-2026__thumb--tl,
.hero-2026__thumb--tr { translate: 0 calc(var(--parallax, 0px) * .30); }
.hero-2026__bg        { translate: 0 calc(var(--parallax, 0px) * .40); }
@media (prefers-reduced-motion: reduce) {
    .hero-2026__bg, .hero-2026__inner, .hero-2026__thumb { translate: none; }
}

.hero-2026__bg {
    position: absolute;
    inset: 0;
    background: url('/images/index-2026/hero-bg.jpg') center / cover no-repeat;
}
.hero-2026__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1116px;
    margin: 0 auto;
    padding: 0 25px;
}
.hero-2026 .hero-2026__title {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    font: 700 34px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #fff;
    text-align: center;
}
/* style.css styles « h1 span » (black, 34px) and responsive.css « .chir-page h1 » : inherit from the title instead */
.hero-2026 .hero-2026__title span {
    font: inherit;
    color: inherit;
    width: auto;
    text-box: trim-both cap alphabetic;
}
.hero-2026__lead { text-box: trim-both cap alphabetic; }
.hero-2026__lead {
    margin: 0;
    font: 500 18px/1.5 'Nunito Sans', sans-serif;
    color: #fff;
    text-align: center;
}
.hero-2026__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.hero-2026__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 45px; /* 42px + 1.5px stroke ×2 */
    padding: 8px 12px;
    border: 1.5px solid var(--dm26-stroke-button);
    border-radius: 10px;
    font: 600 16px/1.5 'Nunito Sans', sans-serif;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.hero-2026__btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 16px;
}
.hero-2026__btn--light {
    min-width: 240px;
    background: #fff;
    color: var(--dm26-text-button);
}
.hero-2026__btn--light i { color: var(--dm26-icon-button); }
.hero-2026__btn--light:hover { background: #f4f8fc; color: var(--dm26-text-button); text-decoration: none; }
.hero-2026__btn--ghost { color: #fff; background: transparent; }
.hero-2026__btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.hero-2026__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* App screenshot: 752×430 frame, 6px from the top of an 800×425 box, fading out towards the waves */
.hero-2026__art {
    position: relative;
    width: min(800px, 100%);
    aspect-ratio: 800 / 425;
    container-type: inline-size;
}
.hero-2026__frame {
    position: absolute;
    top: 1.41%;
    left: 50%;
    width: 94%;
    aspect-ratio: 752 / 430;
    transform: translateX(-50%);
    border: 1.5px solid rgba(162, 214, 249, .4);
    /* rayon proportionnel à la capture (12px à 800px de large) : sur mobile, il ne mord plus sur le logo du coin */
    border-radius: min(12px, 1.5cqi);
    box-shadow: var(--dm26-shadow-high);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 92.8%);
            mask-image: linear-gradient(to bottom, #000 70%, transparent 92.8%);
}
.hero-2026__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: max(0px, min(11px, 1.5cqi - 1px));
}

.hero-2026__thumb {
    position: absolute;
    width: 200px;
    height: 143px;
    object-fit: cover;
    border: 4px solid #fff;
    border-radius: 8px; /* outer 8px − 4px border = 4px radius on the image itself */
    box-shadow: var(--dm26-shadow-badge);
}
.hero-2026__thumb--bl { bottom: -9px;  left: calc(50% - 558px); }
.hero-2026__thumb--tl { bottom: 176px; left: calc(50% - 615px); opacity: .6; }
.hero-2026__thumb--tr { bottom: 210px; left: calc(50% + 416px); opacity: .6; }
.hero-2026__thumb--br { bottom: 26px;  left: calc(50% + 358px); }

.hero-2026__waves {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: calc(var(--wave-h) * -.5095); /* -107px at 1728px */
    width: 100%;
    height: var(--wave-h);
    pointer-events: none;
}

/* « Boosté avec IA » badge (218×218), foreground layer above the waves.
   Child of the section (not of the art box) so it doesn't follow the content parallax;
   placed 47.3% down the art box: bottom = art height × 52.7% − 218px = 0.28 × art width − 218px */
.badge-ia {
    position: absolute;
    z-index: 3;
    bottom: calc(var(--art-w) * .28 - 218px);
    left: 50%;
    width: 218px;
    height: 218px;
    transform: translateX(-50%);
}
.badge-ia > img { position: absolute; display: block; }
.badge-ia__outer          { left: 27px; top: 20px; }
.badge-ia__inner          { left: 29px; top: 22px; }
.badge-ia__polygon        { left: 35px; top: 28px; }
.badge-ia__polygon-stroke { left: 34px; top: 27px; }
.badge-ia__leader {
    position: absolute;
    top: calc(50% + 1px);
    left: 50%;
    width: 160px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.badge-ia__leader img { display: block; }
.badge-ia__kicker {
    font: 600 20px/1 'DM Sharp Sans', sans-serif;
    color: #c5a7f5;
    text-align: center;
}
.badge-ia__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.badge-ia__ia {
    font: 800 68px/1 'DM Sharp Sans', sans-serif;
    letter-spacing: -1.36px;
    text-transform: uppercase;
    color: #fff;
    text-box: trim-both cap alphabetic;
}
.badge-ia__flip { transform: rotate(180deg); }

/* ---------------------------------- PICK SPECIALTY ---------------------------------- */
.specialty-2026 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 30px 25px 50px;
    background: #fff;
}
.specialty-2026__union {
    position: absolute;
    top: calc(50% + 45.47px);
    left: 50%;
    width: 1922px;
    max-width: none;
    height: 233.946px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}
.specialty-2026__title {
    position: relative;
    margin: 0;
    font: 700 28px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-align: center;
    text-box: trim-both cap alphabetic;
}
.specialty-2026__grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 1124px;
}
.specialty-2026__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 261px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.specialty-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: #fff;
    border: 1.5px solid var(--dm26-card-stroke);
    border-radius: 10px;
    box-shadow: var(--dm26-shadow-low);
    font: 700 16px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: var(--dm26-title-brand-alt);
    white-space: nowrap;
    text-decoration: none;
}
.specialty-btn img { flex: none; display: block; }
/* Figma « Specialty Buttons », Hover State=True : medium elevation + brand title colour */
a.specialty-btn { transition: color .15s ease, box-shadow .15s ease; }
a.specialty-btn:hover {
    box-shadow: 0 5px 25px 2px rgba(0, 0, 0, .10);
    color: var(--dm26-celestial-blue);
    text-decoration: none;
}
a.specialty-btn:focus-visible { outline: 2px solid var(--dm26-text-link); outline-offset: 2px; }
.specialty-2026__more {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 832px;
    max-width: 100%;
    font: 400 18px/1.5 'Nunito Sans', sans-serif;
    color: #000;
    text-align: center;
}
.specialty-2026__more p { margin: 0; font: inherit; color: #000; text-box: trim-both cap alphabetic; }
.specialty-2026__more a { font-weight: 500; color: var(--dm26-text-link); }

/* ---------------------------------- RESPONSIVE ---------------------------------- */
@media (max-width: 1299.98px) {
    .hero-2026__thumb { display: none; }
}
@media (max-width: 899.98px) {
    .specialty-2026__union { display: none; }
}
/* Tablet and phone: 2 columns, the 3 Figma columns flow into one grid */
@media (max-width: 1023.98px) {
    .specialty-2026__grid { display: grid; grid-template-columns: repeat(2, 261px); justify-content: center; gap: 12px 24px; }
    .specialty-2026__col { display: contents; }
}
@media (max-width: 767.98px) {
    .hero-2026 { padding-top: 135px; }
    .hero-2026__inner { padding: 0 16px; gap: 20px; }
    .hero-2026 .hero-2026__title { font-size: 26px; gap: 14px; }
    .hero-2026__lead { font-size: 16px; }
    .hero-2026__ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
    .hero-2026__btn--light { min-width: 0; }
    .hero-2026 { --art-w: min(800px, 100vw - 32px); }
    /* scaled around its centre, which sits 40% down the art box + half the scaled badge */
    .badge-ia { transform: translateX(-50%) scale(.55); bottom: calc(var(--art-w) * .31875 - 169px); }
    .specialty-2026 { padding: 30px 16px 50px; }
    .specialty-2026__title { font-size: 24px; }
    .specialty-2026__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .specialty-btn { height: 100%; padding: 8px 6px; font-size: 14px; white-space: normal; }
    .specialty-btn img { width: 24px; height: 24px; }
    .specialty-2026__more { font-size: 16px; }
}

/* ======================================================================
   « Pourquoi vos collègues… » : H2, SEO blocks with live illustrations, services
   ====================================================================== */

/* Open Sans = app UI font, used inside the illustrations (latin subset, self-hosted) */
@font-face {
    font-family: 'DM Open Sans';
    src: url('../fonts/opensans/OpenSans-latin-wght.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}

.h2-2026 {
    padding: 50px 25px 30px;
    background: #fff;
}
.h2-2026 h2 {
    max-width: 1116px;
    margin: 0 auto;
    font: 700 28px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-align: center;
    text-box: trim-both cap alphabetic;
}

/* ---------------------------------- SEO BLOCKS ---------------------------------- */
.seo-2026 {
    padding: 70px 25px;
    background: #fff;
    overflow-x: clip; /* floating illustration cards may poke past the content edge */
}
.seo-2026__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    max-width: 1116px;
    margin: 0 auto;
}
.seo-2026__copy {
    flex: 1 0 0;
    min-width: min(380px, 100%);
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.seo-2026 .seo-2026__title {
    margin: 0;
    font: 700 22px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-align: left;
    text-box: trim-both cap alphabetic;
}
.seo-2026 .seo-2026__title--sm { font-size: 20px; }
.seo-2026__title span { color: var(--dm26-celestial-blue); }
.seo-2026__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.seo-2026__body p {
    margin: 0;
    font: 400 18px/1.5 'Nunito Sans', sans-serif;
    color: #000;
    text-box: trim-both cap alphabetic;
}

/* User review (Figma « Avis utilisateur ») */
.review-2026 {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}
.review-2026__quote {
    position: relative;
    margin: 0;
    text-indent: 30px;
    font: italic 400 16px/1.5 'Nunito Sans', sans-serif;
    color: #000;
    text-box: trim-both cap alphabetic;
}
.review-2026__quote::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 22px;
    height: 16px;
    background: url('/images/index-2026/seo/quote.svg') no-repeat;
}
.review-2026--muted .review-2026__quote { color: #7d7d93; }
.review-2026__author {
    display: flex;
    align-items: center;
    gap: 14px;
}
.review-2026__author img {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.review-2026__author > span {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 600 14px/1.3 'DM Sharp Sans', sans-serif;
    color: #7d7d93;
}
.review-2026__author strong { font-size: 16px; font-weight: 700; }
.review-2026__author strong,
.review-2026__author > span > span { text-box: trim-both cap alphabetic; }

/* ---------- Live illustrations ----------
   The frame (photo or brand texture) is fluid; the floating UI is drawn at the Figma size
   on a « stage » and scaled with --s = frame width / data-w (set by the script after the services section).
   --ob = how far the floating UI hangs below the frame, reserved as margin so it never covers what follows. */
.illu-2026 {
    --s: 1;
    --ob: 0px;
    position: relative;
    flex: none;
    width: min(451px, 100%);
    aspect-ratio: 451 / 339;
    margin-bottom: calc(var(--ob) * var(--s));
    border-radius: 20px;
}
.illu-2026__photo,
.illu-2026__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
.illu-2026__photo { object-fit: cover; }
.illu-2026__bg {
    overflow: hidden;
    background: var(--dm26-celestial-blue);
}
.illu-2026__stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 451px;
    height: 339px;
    transform: scale(var(--s));
    transform-origin: 0 0;
    font-family: 'DM Open Sans', 'Open Sans', sans-serif;
}
.illu-2026 .illu-2026__stage p { margin: 0; font-family: inherit; } /* style.css forces Nunito on every p */

/* SEO 1 — consultation photo + chat bubbles */
.illu-2026--convo { --ob: 82px; }
.illu-convo {
    position: absolute;
    top: 203px;
    left: -12px;
    width: 470px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    filter: drop-shadow(0 2px 11px rgba(52, 93, 158, .16)) drop-shadow(0 2px 2px rgba(52, 93, 158, .12));
}
.illu-convo__level--doctor { padding-left: 30px; }
.illu-convo__level--patient { padding-right: 30px; }
.illu-convo__bubble {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: #fff;
    color: #1a1a23;
    border-radius: 20px 20px 4px 20px;
}
.illu-convo__level--patient .illu-convo__bubble {
    background: #6c22e5;
    color: #fff;
    border-radius: 20px 20px 20px 4px;
}
.illu-convo__who {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    opacity: .6;
    text-box: trim-both cap alphabetic;
}
.illu-convo__msg {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    font-feature-settings: 'zero' 1;
    text-box: trim-both cap alphabetic;
}
.illu-convo__level--patient .illu-convo__msg { font-weight: 400; font-feature-settings: normal; }

/* SEO 2 — brand texture + form builder card + field chips */
.illu-2026--form { --ob: 40px; aspect-ratio: 451 / 342; }
.illu-2026--form .illu-2026__stage { height: 342px; }
.illu-2026__bg img {
    position: absolute;
    top: -19.75%;
    left: -41.76%;
    width: 385.53%;
    height: 212.25%;
    max-width: none;
}
.illu-form {
    position: absolute;
    top: -15px;
    left: 132px;
    width: 378px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: #fff;
    border-radius: 28px;
    filter: drop-shadow(0 2px 11px rgba(52, 93, 158, .16)) drop-shadow(0 2px 2px rgba(52, 93, 158, .12));
}
.illu-2026 .illu-form__title {
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #2c2c3a;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-box: trim-both cap alphabetic;
}
.illu-form__builder {
    display: flex;
    flex-direction: column;
    min-height: 144px;
    padding: 8px;
    background: #fff;
    border: 2px dashed #d7dee8;
    border-radius: 12px;
}
.illu-row {
    padding: 0 4px 4px 0;
    background: #fff;
    border-radius: 12px;
}
.illu-row--grey { background: #e8edf3; }
.illu-row__head {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 0;
}
.illu-row__head img { flex: none; display: block; }
.illu-row__sig { margin: 4px; }
.illu-row__name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: #1a1a23;
    white-space: nowrap;
}
.illu-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 20px;
    padding: 2px 6px;
    background: rgba(108, 34, 229, .2);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: #6c22e5;
}
.illu-kebab {
    --dot: #bac4d4;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 4px;
}
.illu-kebab--light { --dot: #d8dfe9; }
.illu-kebab::before {
    content: '';
    width: 3px;
    height: 12px;
    background: radial-gradient(circle, var(--dot) 1.5px, transparent 1.6px) 0 0 / 3px 4.5px repeat-y;
}
.illu-row__details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
    padding-left: 44px;
}
.illu-field {
    display: flex;
    align-items: center;
    gap: 4px;
}
.illu-field--top { align-items: flex-start; }
.illu-bars {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 103px;
    height: 32px;
}
.illu-bars i {
    display: block;
    height: 8px;
    background: #55557b;
    border-radius: 39px;
}
.illu-input {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    padding: 0 11px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #d7dee8;
    border-radius: 53px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: #8f90be;
    white-space: nowrap;
}
.illu-input--filled {
    padding: 0 6px;
    background: #e8edf3;
    border: 0;
}
.illu-input--filled i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    font-size: 16px;
    color: #bac4d4;
}
.illu-input--area {
    display: -webkit-box;
    height: 66px;
    padding: 6px 11px;
    border-radius: 16px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.illu-toggle {
    flex: 1;
    display: flex;
    padding: 4px;
    background: #e8edf3;
    border-radius: 56px;
}
.illu-toggle span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 24px;
    font-size: 10px;
    font-weight: 600;
    color: #ababbd;
}
.illu-toggle .is-on { background: var(--dm26-celestial-blue); color: #fff; }
.illu-chips {
    position: absolute;
    top: -9px;
    left: -20px;
    width: 166px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    filter: drop-shadow(0 2px 11px rgba(52, 93, 158, .16)) drop-shadow(0 2px 2px rgba(52, 93, 158, .12));
}
.illu-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border-radius: 12px;
}
.illu-chip__sig {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 4px;
    background: rgba(110, 130, 159, .2);
    border-radius: 6px;
    font-size: 16px;
    color: #6e829f;
}
.illu-chip__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    height: 36px;
}
.illu-chip__name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: #1a1a23;
    text-box: trim-both cap alphabetic;
}
.illu-chip__bars { display: flex; gap: 2px; }
.illu-chip__bars i {
    display: block;
    height: 4px;
    background: #bac4d4;
    border-radius: 39px;
}
.illu-chip__add {
    flex: none;
    width: 20px;
    margin-right: 8px;
    font-size: 16px;
    color: var(--dm26-celestial-blue);
    text-align: center;
}

/* ---------------------------------- SERVICES ---------------------------------- */
.services-2026 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 50px 25px;
    background: #fff;
}
.services-2026__union {
    position: absolute;
    top: 100px;
    left: -47px;
    width: 273.125px;
    max-width: none;
    height: 784.25px;
    pointer-events: none;
}
.services-2026 .services-2026__title {
    position: relative;
    max-width: 1116px;
    margin: 0;
    font: 700 28px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-align: center;
    text-box: trim-both cap alphabetic;
}
.services-2026__grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    max-width: 1116px;
}
.service-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1 0 0;
    min-width: min(380px, 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
    padding: 66px 46px 46px;
    background: #e8edf3;
    border: 1.5px solid rgba(162, 214, 249, .4);
    border-radius: 16px;
}
.service-card__bg {
    position: absolute;
    z-index: -1;
    top: -58.5px;
    left: -711.5px;
    right: -349.5px;
    height: 987px;
    background: #fff url('/images/index-2026/services/bg-bright-white.jpg') center / cover no-repeat;
}
.service-card--blue .service-card__bg { background-color: var(--dm26-celestial-blue); background-image: url('/images/index-2026/hero-bg.jpg'); }
.service-card--dark .service-card__bg { background-color: #000; background-image: url('/images/index-2026/services/bg-dark-denim.jpg'); }
.services-2026 .service-card__title {
    width: 100%;
    margin: 0;
    font: 700 28px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-align: left;
    text-box: trim-both cap alphabetic;
}
.services-2026 .service-card__text {
    width: 100%;
    margin: 0;
    font: 500 18px/1.5 'Nunito Sans', sans-serif;
    color: #000;
    text-box: trim-both cap alphabetic;
}
.services-2026 .service-card--blue .service-card__title,
.services-2026 .service-card--blue .service-card__text,
.services-2026 .service-card--dark .service-card__title,
.services-2026 .service-card--dark .service-card__text { color: #fff; }
.service-card__more {
    flex: none;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.service-card__more svg { display: block; }
.service-card__circle { fill: rgba(65, 65, 79, .2); transition: fill .15s ease; }
.service-card--dark .service-card__circle { fill: rgba(156, 168, 192, .2); }
.service-card__arrow { fill: #fff; transition: fill .15s ease; }
/* hover (Figma) : 10% white veil on the background, arrow black in a white circle */
.service-card__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .1);
    opacity: 0;
    transition: opacity .15s ease;
}
.service-card:hover .service-card__bg::after,
.service-card:focus-within .service-card__bg::after { opacity: 1; }
.service-card:hover .service-card__circle,
.service-card:focus-within .service-card__circle { fill: #fff; }
.service-card:hover .service-card__arrow,
.service-card:focus-within .service-card__arrow { fill: #000; }
/* the whole card is clickable */
.service-card__more::after {
    content: '';
    position: absolute;
    inset: 0;
}
.service-card__more:focus-visible { outline: 2px solid var(--dm26-text-link); outline-offset: 3px; }

/* ---------------------------------- RESPONSIVE (H2 / SEO / services) ---------------------------------- */
/* the form card hangs 59px right of its frame: below this width no page margin is left to absorb it */
@media (max-width: 1239.98px) {
    .illu-2026--form {
        width: min(451px, 88.4%);
        margin-right: calc(59px * var(--s));
    }
}
@media (max-width: 767.98px) {
    .h2-2026 { padding: 40px 16px 20px; }
    .h2-2026 h2,
    .services-2026 .services-2026__title { font-size: 24px; }
    .seo-2026 { padding: 40px 16px; }
    .seo-2026__copy { gap: 28px; }
    .seo-2026__body { gap: 20px; }
    .seo-2026__body p { font-size: 16px; }
    .services-2026 { padding: 40px 16px; }
    .services-2026__union { display: none; }
    .service-card { gap: 24px; padding: 32px 24px 24px; }
    .services-2026 .service-card__title { font-size: 22px; }
    .services-2026 .service-card__text { font-size: 16px; }
}

@media (max-width: 767.98px) {
    /* chips hang 20px left of the frame: keep them inside the 16px phone gutter */
    .illu-2026--form { margin-left: calc(20px * var(--s)); }
}

/* ======================================================================
   Rest of the page : SEO 3/4, Rapidfire carousel, CTAs, features, press & reviews, EU, blog
   ====================================================================== */

/* dashed background patterns fade out at both ends (same treatment as the specialty section) */
.rapidfire-2026__union,
.features-2026__union,
.press-2026__line,
.blog-2026__union {
    position: absolute;
    left: 50%;
    max-width: none;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent);
}

/* ---------------------------------- RAPIDFIRE CAROUSEL ---------------------------------- */
.rapidfire-2026 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 50px 25px;
    background: #fff;
}
.rapidfire-2026__union {
    top: calc(50% + 50.97px);
    width: 1922px;
    height: 233.946px;
    transform: translate(-50%, -50%);
}
.rapidfire-2026__head {
    position: relative;
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 1116px;
    margin: 0 auto;
}
.rapidfire-2026__lead {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
}
.rapidfire-2026 .rapidfire-2026__title {
    width: auto;
    margin: 0;
    font: 700 22px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-align: left;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}
.rapidfire-2026__nav { display: flex; gap: 16px; }
.rapidfire-2026__btn {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity .15s ease;
}
.rapidfire-2026__btn img { display: block; }
.rapidfire-2026__btn:disabled { opacity: .35; cursor: default; }
.rapidfire-2026__btn:focus-visible { outline: 2px solid var(--dm26-text-link); outline-offset: 2px; }
.rapidfire-2026 .rapidfire-2026__text {
    flex: 1;
    margin: 0;
    font: 500 18px/1.5 'Nunito Sans', sans-serif;
    color: #000;
    text-box: trim-both cap alphabetic;
}
/* the track starts at the content edge and runs to the right edge of the window */
.rapidfire-2026__track {
    --edge: calc(25px + max(0px, (100% - 1116px) / 2));
    position: relative;
    display: flex;
    gap: 24px;
    margin: 0 -25px;
    padding: 0 var(--edge) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    scrollbar-width: none;
}
.rapidfire-2026__track::-webkit-scrollbar { display: none; }
.rapidfire-2026__track:focus-visible { outline: 2px solid var(--dm26-text-link); outline-offset: -2px; }
.rf-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 546px;
    display: flex;
    flex-direction: column;
    height: 420px;
    border: 1.5px solid rgba(162, 214, 249, .4);
    border-radius: 16px;
    scroll-snap-align: start;
}
.rf-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -339.5px;
    left: -222.5px;
    right: -838.5px;
    height: 987px;
    background: #fff url('/images/index-2026/services/bg-bright-white.jpg') center / cover no-repeat;
}
.rf-card--dark::before { background-color: #003a61; background-image: url('/images/index-2026/services/bg-indigo-dye.jpg'); }
/* screenshot cut by the Figma « .Waves-Mask » at its bottom edge */
.rf-card__thumb {
    position: relative;
    flex: 1;
    min-height: 0;
    -webkit-mask: url('/images/index-2026/rapidfire/wave-mask.svg') bottom / 100% 22px no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - 21px) no-repeat;
            mask: url('/images/index-2026/rapidfire/wave-mask.svg') bottom / 100% 22px no-repeat, linear-gradient(#000, #000) top / 100% calc(100% - 21px) no-repeat;
}
.rf-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rf-card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(48, 163, 241, .2), rgba(48, 163, 241, 0) 49.9%);
}
.rf-card__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 12px 26px 32px;
    color: #000;
}
.rf-card--dark .rf-card__text { color: #fff; }
.rf-card__nick {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 10px;
    font: 600 14px/1.3 'DM Sharp Sans', sans-serif;
}
.rf-card__nick i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    font-size: 16px;
}
.rapidfire-2026 .rf-card__title {
    width: 100%;
    margin: 0;
    font: 700 22px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: inherit;
    text-box: trim-both cap alphabetic;
}
.rapidfire-2026 .rf-card__desc {
    margin: 0;
    font: 400 16px/1.5 'Nunito Sans', sans-serif;
    color: inherit;
    text-box: trim-both cap alphabetic;
}

/* ---------------------------------- INTERVAL CTAs ---------------------------------- */
.cta-2026 {
    display: flex;
    justify-content: center;
    padding: 50px 25px;
    background: #fff;
}
.cta-2026__frame {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px 48px;
    width: 100%;
    max-width: 1116px;
    padding: 46px;
    border: 1.5px solid rgba(162, 214, 249, .4);
    border-radius: 16px;
}
.cta-2026__frame::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -44.5px -814.5px -485.5px -246.5px;
    background: var(--dm26-celestial-blue) url('/images/index-2026/hero-bg.jpg') center / cover no-repeat;
}
.cta-2026__frame--dark::before { background-color: #000; background-image: url('/images/index-2026/services/bg-dark-denim.jpg'); }
.cta-2026 .cta-2026__title {
    flex: 1 0 0;
    min-width: min(320px, 100%);
    margin: 0;
    font: 700 22px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #fff;
    text-box: trim-both cap alphabetic;
}
.cta-2026__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color .15s ease;
}
.cta-2026__btn:hover { text-decoration: none; }
.cta-2026__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cta-2026__btn--light {
    min-width: 240px;
    min-height: 45px;
    padding: 8px 12px;
    background: #fff;
    border: 1.5px solid #47b5ff;
    font: 600 16px/1.5 'Nunito Sans', sans-serif;
    color: var(--dm26-celestial-blue);
}
.cta-2026__btn--light i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 16px;
}
.cta-2026__btn--light:hover { background: #f4f8fc; color: var(--dm26-celestial-blue); }
.cta-2026__btn--brand {
    flex: 1 0 0;
    min-width: 220px;
    max-width: 280px;
    height: 42px;
    padding: 10px 16px;
    background: var(--dm26-celestial-blue);
    font: 700 16px/1.5 'Nunito Sans', sans-serif;
    color: #fff;
}
.cta-2026__btn--brand:hover { background: #2a93db; color: #fff; }

/* ---------------------------------- WAVE TRANSITIONS ---------------------------------- */
.transition-2026 { line-height: 0; }
.transition-2026 img {
    display: block;
    width: 100%;
    height: clamp(40px, 4.63vw, 80px);
}

/* ---------------------------------- FEATURE CARDS ---------------------------------- */
.features-2026 {
    position: relative;
    overflow: hidden;
    padding: 50px 25px;
    background: #eef7fe;
}
.features-2026__union {
    top: 1532px;
    width: 1922px;
    height: 233.946px;
    transform: translateX(-50%) rotate(180deg);
}
.features-2026 .features-2026__title {
    position: relative;
    max-width: 1116px;
    margin: 0 auto;
    font: 700 28px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-align: center;
    text-box: trim-both cap alphabetic;
}
.features-2026__cols {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 1116px;
    margin: 30px auto 0;
}
.features-2026__col {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.features-2026 .features-2026__intro {
    margin: 0;
    font: 400 18px/1.5 'Nunito Sans', sans-serif;
    color: #000;
    text-box: trim-both cap alphabetic;
}
.feature-card {
    display: flex;
    flex-direction: column;
    min-height: 603px;
    padding: 10px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 4px 0 rgba(52, 93, 158, .12), 0 2px 22px 0 rgba(52, 93, 158, .16);
}
/* screenshot exported from Figma + live label, scaled together (see .illu-2026) */
.illu-2026--feature {
    width: 100%;
    aspect-ratio: 526 / 320;
    border-radius: 8px;
}
.illu-2026--feature .illu-2026__photo { border-radius: 8px; }
.illu-2026--feature .illu-2026__stage { width: 526px; height: 320px; }
.feature-chip {
    position: absolute;
    top: 255px;
    left: 25px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 6px;
    filter: drop-shadow(0 2px 8px rgba(52, 93, 158, .14)) drop-shadow(0 1px 1.5px rgba(52, 93, 158, .1));
    font: 700 16px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    white-space: nowrap;
}
.feature-chip img { display: block; }
.feature-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 25px;
}
.features-2026 .feature-card__title {
    margin: 0;
    font: 700 22px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-box: trim-both cap alphabetic;
}
.features-2026 .feature-card__desc {
    margin: 0;
    font: 400 16px/1.5 'Nunito Sans', sans-serif;
    color: #2c2c3a;
    text-box: trim-both cap alphabetic;
}
.feature-card__link {
    margin-top: auto;
    font: 500 16px/1.5 'Nunito Sans', sans-serif;
    color: var(--dm26-text-link);
    text-box: trim-both cap alphabetic;
}
.feature-card__link:hover { color: #2a75bb; text-decoration: underline; }

/* ---------------------------------- PRESS & REVIEWS ---------------------------------- */
.press-2026 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 50px 25px;
    background: #fff;
}
.press-2026__line {
    top: 564px;
    width: 1922px;
    height: 67px;
    transform: translateX(-50%);
}
.press-2026 .press-2026__title,
.eu-2026 .eu-2026__title,
.blog-2026 .blog-2026__title {
    position: relative;
    max-width: 1116px;
    margin: 0;
    font: 700 22px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-align: center;
    text-box: trim-both cap alphabetic;
}
.press-2026__logos {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 1116px;
}
/* grey logos tinted blue by blending the Figma gradient over them */
.press-logo {
    position: relative;
    isolation: isolate;
    flex: 1 0 0;
    min-width: 162px;
    height: 85px;
    background: #fff;
}
.press-logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.press-logo .press-logo__tint { object-fit: cover; mix-blend-mode: screen; }
.press-logo--lighten .press-logo__tint { mix-blend-mode: lighten; }
.press-2026__reviews {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    max-width: 1116px;
}
.press-2026__col {
    flex: 1 0 0;
    min-width: min(380px, 100%);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.review-card-2026 {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 24px 32px 32px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 22px 0 rgba(52, 93, 158, .16), 0 2px 4px 0 rgba(52, 93, 158, .12);
}
.review-card-2026__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
}
.review-card-2026__head > img:first-child {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
}
.review-card-2026__who {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 9px;
}
.review-card-2026__name {
    font: 700 22px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    text-box: trim-both cap alphabetic; /* no overflow:hidden here: it would clip descenders */
}
.review-card-2026__spec {
    font: 600 14px/1.3 'DM Sharp Sans', sans-serif;
    color: #7d7d93;
    text-box: trim-both cap alphabetic;
}
.review-card-2026__stars { flex: none; margin-top: 9px; }
.review-card-2026__quote {
    position: relative;
    margin: 0;
    text-indent: 30px;
    font: italic 400 16px/1.5 'Nunito Sans', sans-serif;
    color: #000;
    text-box: trim-both cap alphabetic;
}
.review-card-2026__quote::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 22px;
    height: 16px;
    background: url('/images/index-2026/press/quote.svg') no-repeat;
}

/* ---------------------------------- EU / BRUSSELS ---------------------------------- */
.eu-2026 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 35px 25px;
    background: #fff;
}
.eu-2026__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 1116px;
    padding: 7px 0;
}
.eu-2026__slogans,
.eu-2026__cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
}
.eu-2026__slogans { padding: 0 12px; }
.eu-2026 .eu-2026__slogans p {
    flex: 1 0 0;
    min-width: 220px;
    max-width: 356px;
    margin: 0;
    font: 700 14px/1.5 'Nunito Sans', sans-serif;
    color: #1c4b79;
    text-align: center;
    text-box: trim-both cap alphabetic;
}
.eu-2026__cards { text-decoration: none; }
.eu-2026__cards:hover { text-decoration: none; }
.eu-2026__cards:focus-visible { outline: 2px solid var(--dm26-text-link); outline-offset: 4px; border-radius: 16px; }
.eu-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1 0 0;
    min-width: 220px;
    max-width: 356px;
    display: flex;
    align-items: center;
    padding: 22px;
    border: 1.5px solid rgba(162, 214, 249, .4);
    border-radius: 16px;
    color: #fff;
}
.eu-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -44.5px -814.5px -485.5px -246.5px;
    background: #96a2ff url('/images/index-2026/services/bg-royal-blue.jpg') center / cover no-repeat;
}
.eu-card--eu::before { background-color: #003a61; background-image: url('/images/index-2026/services/bg-indigo-dye.jpg'); }
.eu-card img { flex: none; display: block; }
.eu-card--brussels { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
.eu-card--eu { gap: 16px; align-items: flex-start; }
.eu-card__names,
.eu-card__fund,
.eu-card__fund > span {
    display: flex;
    flex-direction: column;
}
.eu-card__names {
    gap: 6px;
    font: 700 16px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    text-transform: uppercase;
}
.eu-card__fund { flex: 1; gap: 12px; }
.eu-card__fund > span { gap: 10px; }
.eu-card__fund strong { font: 700 16px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif; }
.eu-card__fund small { font: 500 10px/1.5 'Nunito Sans', sans-serif; }
.eu-card__names span,
.eu-card__fund strong,
.eu-card__fund small { text-box: trim-both cap alphabetic; }

/* ---------------------------------- BLOG ---------------------------------- */
.blog-2026 {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 50px 25px;
    background: #fff;
}
.blog-2026__union {
    top: 216px;
    width: 1922px;
    height: 233.946px;
    transform: translateX(-50%);
}
.blog-2026 .blog-2026__sub {
    position: relative;
    margin: 0;
    font: 400 18px/1.5 'Nunito Sans', sans-serif;
    color: #000;
    text-align: center;
    text-box: trim-both cap alphabetic;
}
.blog-2026__row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 1116px;
}
.blog-card {
    flex: 1 0 0;
    min-width: 244px;
    max-width: 430px;
    height: 410px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1.5px solid #f0f1f4;
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
}
.blog-card:hover { color: inherit; text-decoration: none; }
.blog-card:focus-visible { outline: 2px solid var(--dm26-text-link); outline-offset: 2px; }
.blog-card__thumb {
    position: relative;
    flex: none;
    display: block;
    width: 100%;
    aspect-ratio: 356 / 190;
    max-height: 230px;
    overflow: hidden;
}
.blog-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-card__thumb .blog-card__wave {
    inset: auto 0 -1px;
    height: 22px;
    object-fit: fill;
}
.blog-card__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 20px 22px;
    overflow: hidden;
}
.blog-card__meta {
    font: 400 14px/1.5 'Nunito Sans', sans-serif;
    color: #ababbd;
    text-box: trim-both cap alphabetic;
}
.blog-card__title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 54px;
    font: 700 16px/1.3 'DM Sharp Sans', 'Sharp Sans Bold', sans-serif;
    color: #000;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.blog-card__blurb {
    display: -webkit-box;
    overflow: hidden;
    font: 400 14px/1.5 'Nunito Sans', sans-serif;
    color: #2c2c3a;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.blog-2026__more {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 100%;
    max-width: 1116px;
    font: 600 14px/1.3 'Nunito Sans', sans-serif;
    color: var(--dm26-text-link);
    text-transform: uppercase;
}
.blog-2026__more:hover { color: #2a75bb; text-decoration: none; }
.blog-2026__more img { display: block; }

/* ---------------------------------- RESPONSIVE (rest of the page) ---------------------------------- */
@media (max-width: 1099.98px) {
    .rapidfire-2026 .rapidfire-2026__title { white-space: normal; }
}
@media (max-width: 899.98px) {
    .features-2026__cols { flex-direction: column; align-items: stretch; }
    .feature-card { min-height: 0; }
    .features-2026__union { display: none; }
    .rapidfire-2026__head { flex-direction: column; }
}
@media (max-width: 767.98px) {
    .rapidfire-2026,
    .blog-2026,
    .press-2026 { padding: 40px 16px; }
    .rapidfire-2026__track { --edge: 16px; margin: 0 -16px; }
    .rf-card { flex-basis: min(546px, 84vw); height: auto; }
    .rf-card__thumb { flex: none; height: 200px; }
    .rapidfire-2026 .rf-card__title { font-size: 20px; }
    .rapidfire-2026 .rapidfire-2026__text { font-size: 16px; }
    .cta-2026 { padding: 32px 16px; }
    .cta-2026__frame { padding: 28px 24px; gap: 24px; }
    .cta-2026__btn--light,
    .cta-2026__btn--brand { flex: 1 1 100%; max-width: none; min-width: 0; }
    .features-2026 { padding: 40px 16px; }
    .features-2026 .features-2026__title { font-size: 24px; }
    .features-2026 .features-2026__intro { font-size: 16px; }
    .feature-card__text { padding: 20px 14px 14px; }
    .features-2026 .feature-card__title { font-size: 20px; }
    .press-logo { flex-basis: 40%; min-width: 130px; height: 64px; }
    .press-2026__line { display: none; }
    .review-card-2026 { padding: 20px; }
    .review-card-2026__name { font-size: 18px; }
    /* stars drop under the name so it keeps the full width */
    .review-card-2026__who { flex-basis: calc(100% - 64px); }
    .review-card-2026__stars { margin: 0 0 0 64px; }
    .eu-2026 { padding: 32px 16px; }
    .blog-card { max-width: none; }
}

/* ---------- SEO 3 — library of diagrams + annotation tablet + pen (on the brand texture) ---------- */
.illu-2026--library { --ob: 103px; aspect-ratio: 451 / 342; }
.illu-2026--library .illu-2026__stage { height: 342px; }
.illu-lib {
    position: absolute;
    top: 48px;
    left: -58px;
    width: 280px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 22px 0 rgba(52, 93, 158, .16), 0 2px 4px 0 rgba(52, 93, 158, .12);
}
.illu-2026 .illu-lib__title {
    flex: 1 0 0;
    min-width: 200px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #000;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.illu-lib__item {
    position: relative;
    flex: none;
    width: 115px;
    height: 97px;
    overflow: hidden;
    border-radius: 10px;
}
.illu-lib__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.illu-lib__item::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .05); }
.illu-lib__item--plain::after { content: none; }
.illu-annot {
    position: absolute;
    top: -29px;
    left: 108px;
    width: 354px;
    height: 474px;
    display: flex;
    overflow: hidden;
    background: #fff;
    border: 2px solid #d7dee8;
    border-radius: 36px;
    box-shadow: 0 2px 22px 0 rgba(52, 93, 158, .16), 0 2px 4px 0 rgba(52, 93, 158, .12);
}
.illu-annot__body {
    flex: 1;
    min-width: 0;
    display: flex;
    padding: 20px 0 20px 20px;
    border-bottom: 1.5px solid #e8edf3;
}
.illu-annot__photo {
    position: relative;
    flex: 1;
    overflow: hidden;
    border-radius: 20px;
}
.illu-annot__photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* pink annotation stroke, rotated like in Figma */
.illu-annot__stroke {
    position: absolute;
    top: 196px;
    left: 86px;
    width: 167.85px;
    height: 163.182px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.illu-annot__stroke i {
    position: relative;
    flex: none;
    width: 128.475px;
    height: 109.055px;
    transform: rotate(35.22deg);
}
.illu-annot__stroke img {
    position: absolute;
    top: -50.03px;
    left: -41.69px;
    width: 217.094px;
    height: 198.089px;
    max-width: none;
}
.illu-annot__tools {
    flex: none;
    width: 80px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 4px;
}
.illu-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 3px 0;
}
.illu-tool__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 8px;
}
.illu-tool__btn img { display: block; }
.illu-tool__btn--bare { background: none; }
.illu-tool.is-on .illu-tool__btn { background: #47b5ff; }
.illu-tool__dot { display: block; width: 6px; height: 6px; background: #41414f; border-radius: 4px; }
.illu-tool__bar { display: block; height: 6px; margin: 3px 0; background: #55557b; border-radius: 39px; }
.illu-tool.is-on .illu-tool__bar { background: var(--dm26-celestial-blue); }
.illu-settings {
    position: absolute;
    top: 9px;
    left: 146px;
    width: 41px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 7px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 22px 0 rgba(52, 93, 158, .16), 0 2px 4px 0 rgba(52, 93, 158, .12);
}
.illu-settings__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 8px;
}
.illu-settings__swatch { display: block; width: 20px; height: 20px; background: #d4137b; border-radius: 6px; }
.illu-settings__size { display: block; width: 6px; height: 6px; background: #003a61; border-radius: 4px; }
.illu-settings__size--lg { width: 20px; height: 20px; border-radius: 16px; }
.illu-settings__hr { display: block; margin: 2px 0; }
/* vertical size slider (horizontal component rotated -90° in Figma: filled half at the bottom) */
.illu-slider { display: flex; align-items: center; justify-content: center; width: 16px; height: 96px; }
.illu-slider__bar {
    position: relative;
    width: 16px;
    height: 96px;
    background: #fff;
    border: 1.5px solid #e2e6ec;
    border-radius: 12px;
}
.illu-slider__fill {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -1.5px;
    bottom: -1.5px;
    left: -1.5px;
    background: var(--dm26-celestial-blue);
    border-radius: 0 0 12px 12px;
}
.illu-slider__marks {
    position: absolute;
    z-index: 1;
    top: -1.5px;
    bottom: -1.5px;
    left: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px 0;
    transform: translateX(-50%);
}
.illu-slider__marks img,
.illu-slider__dot img { display: block; max-width: none; }
.illu-slider__dot {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
}
.illu-slider__dot img { position: absolute; top: -8px; left: -12px; width: 40px; height: 40px; }
.illu-pen {
    position: absolute;
    top: -44.26px;
    left: 312.57px;
    width: 155.201px;
    height: 367.871px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.illu-pen img {
    display: block;
    flex: none;
    width: 37.184px;
    height: 375.666px;
    max-width: none;
    transform: rotate(18.62deg);
    filter: drop-shadow(0 8.07px 22px rgba(52, 93, 158, .42)) drop-shadow(0 8.07px 15px rgba(52, 93, 158, .25));
}

/* ---------- SEO 4 — call-centre photo + support chat + 24/7 badge ---------- */
.illu-2026--support { --ob: 70px; }
.illu-chat {
    position: absolute;
    top: 203px;
    left: 110px;
    width: 356px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    filter: drop-shadow(0 2px 11px rgba(52, 93, 158, .16)) drop-shadow(0 2px 2px rgba(52, 93, 158, .12));
}
.illu-chat__level--doctor { padding-left: 30px; }
.illu-chat__level--staff { padding-right: 30px; }
.illu-chat__bubble {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    background: #fff;
    color: #1a1a23;
    border-radius: 20px 20px 20px 4px;
}
.illu-chat__level--doctor .illu-chat__bubble {
    background: var(--dm26-celestial-blue);
    color: #fff;
    border-radius: 20px 20px 4px 20px;
}
.illu-chat__bubble > img { flex: none; display: block; border-radius: 50%; }
.illu-chat__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.illu-chat__msg {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    font-feature-settings: 'zero' 1;
    text-box: trim-both cap alphabetic;
}
.illu-chat__level--doctor .illu-chat__msg { font-weight: 400; font-feature-settings: normal; }
.illu-247 {
    position: absolute;
    top: -31px;
    left: -37px;
    width: 251px;
    height: 114px;
    max-width: none;
}

/* the library composite hangs 58px left and 17px right of its frame */
@media (max-width: 1239.98px) {
    .illu-2026--library {
        width: min(451px, 85.7%);
        margin-left: calc(58px * var(--s));
        margin-right: calc(17px * var(--s));
    }
}