/* ===================================================
   ORTHOFIX — Flexible Modules CSS  v25
   =================================================== */

:root {
    --flex-blue:        #0074c3;
    --flex-blue-dark:   #00274e;
    --flex-blue-light:  #deeef9;
    --flex-blue-border: #b3d4ee;
    --flex-dark:        #00274e;
    --flex-gray-light:  #f5f7fa;
    --flex-gray:        #e4e8ed;
    --flex-text:        #1a2532;
    --flex-text-muted:  #5a6a7e;
    --flex-white:       #ffffff;
    --flex-radius:      6px;
    --flex-radius-lg:   10px;
    --flex-container:   1200px;
    --flex-section-pad: 56px 0;
}

/* ── Utility ── */
.flex-container { max-width: var(--flex-container); margin: 0 auto; padding: 0 24px; }

/* ── Buttons ── */
.flex-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 25px; border-radius: 4px;
    font-size: 18px; font-weight: 600; text-decoration: none;
    cursor: pointer; transition: opacity .18s; letter-spacing: .03em;
    border: 2px solid transparent; line-height: 1.4; font-family: inherit;
}
.flex-btn--primary      { background: var(--flex-blue); color: #fff; border-color: var(--flex-blue); }
.flex-btn--outline      { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.flex-btn--outline-blue { background: var(--flex-blue); color: #fff; border-color: var(--flex-blue); font-size: 16px; border-radius: 24px; }
.flex-btn--white        { background: #fff; color: var(--flex-blue); }
.flex-btn:hover         { opacity: .82; }

/* ── Notice bar ── */
.flex-notice {
    background: transparent;
    border-top: 0;
    border-bottom: 0;
    padding: 10px 0;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--flex-text-muted);
    margin-top: 10px;
}
.flex-notice .flex-container {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #212529;
    text-align: right;
    margin: 0 auto;
}

/* ────────────────────────────────────────────────────
   HERO PILLAR
──────────────────────────────────────────────────── */
.flex-hero--pillar {
    position: relative;
    margin-bottom: -2px;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
    height: 550px;
    min-height: 300px;
    background: linear-gradient(0deg, gainsboro 0%, gainsboro 50%, #f4f4f4 100%);
    color: #304050;
    clip-path: none;
}
.flex-hero--pillar::before {
    content: "";
    display: block;
    width: 100%; height: 550px;
    position: absolute; left: 0; top: 0;
    background: url(https://orthofix.com/wp-content/themes/orthofix-corp/images/bg-masthead-abstract-hexagons.webp) no-repeat center !important;
    background-size: 1512px auto !important;
    mix-blend-mode: overlay !important;
}
.flex-hero--pillar .flex-container {
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url(/wp-content/uploads/2025/10/masthead-hex-1.webp);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 474px;
    height: 550px;
    position: relative;
    width: 100%;
}
.flex-hero__breadcrumb {
    color: #304050;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 18px;
    line-height: 80px;
    letter-spacing: 0;
    vertical-align: middle;
    padding-left: 22%;
}
.flex-hero__title {
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 80px;
    line-height: 80px;
    vertical-align: middle;
    padding-left: 22%;
}
.flex-hero__subtitle {
    margin: 0 auto;
    width: 100%;
    font-size: 35px;
    font-weight: 600;
    padding: 0 30px 0 0;
    padding-left: 22%;
    color: #304050;
    font-style: normal;
}

/* ────────────────────────────────────────────────────
   PILLAR LAYOUT
──────────────────────────────────────────────────── */
.pillar-layout {
    display: grid; grid-template-columns: 300px 1fr;
    gap: 40px; align-items: start; padding: 36px 0 64px;
    max-width: 1240px;
}
@media (max-width: 900px) {
    .pillar-layout { grid-template-columns: 1fr; }
    .pillar-sidebar { position: static !important; }
}

/* ── TOC Sidebar ── */
.pillar-sidebar { position: sticky; top: 90px; }
.pillar-toc {
    border: 1px solid var(--flex-gray); border-radius: 0px;
    overflow: hidden; background: #fff;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
}
.pillar-toc__list { list-style: none; margin: 0; padding: 0; }
.pillar-toc__item { border-bottom: 1px solid var(--flex-gray); }
.pillar-toc__item:last-child { border-bottom: none; }
.pillar-toc__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 25px; font-size: 18px; color: rgba(0,116,195,1);
    text-decoration: none; transition: background .12s, color .12s;
    line-height: 1.35; gap: 6px; font-weight: 600;
}
.pillar-toc__link::after { content: '›'; font-size: 1.1em; color: var(--flex-text-muted); flex-shrink: 0; }
.pillar-toc__link:hover  { background: var(--flex-blue-light); color: var(--flex-blue); }
.pillar-toc__link:hover::after { color: var(--flex-blue); }
.pillar-toc__link.is-active {
    background: var(--flex-blue-light); color: var(--flex-blue);
    font-weight: 600; border-left: 3px solid var(--flex-blue); padding-left: 11px;
}
.pillar-toc__link.is-active::after { color: var(--flex-blue); }
.pillar-toc__item--child { background: #fafbfc; }
.pillar-toc__item--child .pillar-toc__link {
    padding-left: 22px; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em; color: var(--flex-text-muted);
}
.pillar-toc__item--child .pillar-toc__link:hover,
.pillar-toc__item--child .pillar-toc__link.is-active { background: var(--flex-blue-light); color: var(--flex-blue); }
.pillar-toc__item--child .pillar-toc__link.is-active { padding-left: 19px; }

/* ────────────────────────────────────────────────────
   TEXT BLOCK
──────────────────────────────────────────────────── */
.flex-text-block {
    margin-bottom: 40px;
    scroll-margin-top: 120px;
    padding: 0;
}
.flex-text-block__grid { display: grid; align-items: stretch; }
@media (max-width: 768px) { .flex-text-block__grid { grid-template-columns: 1fr !important; } }

.flex-text-block__text-col {
    display: flex; flex-direction: column; justify-content: center;
    padding: 20px 24px;
}
.flex-text-block__img-col { overflow: hidden; min-height: 220px; }
.flex-text-block__img-col img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%; }

.flex-text-block h2 {
    font-size: 24px;
    color: rgba(0,116,195,1);
    margin: 0 0 14px;
    line-height: 1.25;
    text-transform: uppercase;
}
.flex-text-block .content p  { margin: 0 0 12px; font-size: 18px; }
.flex-text-block .content li { font-size: 18px; }
.flex-text-block .content ul { padding-left: 18px; }
.flex-text-block__cta { margin-top: 20px; }
.flex-text-block .flex-btn  { border-radius: 24px; }

/* ────────────────────────────────────────────────────
   CLINICAL INSIGHT CARD
──────────────────────────────────────────────────── */
.flex-insight-card {
    border-left: 5px solid var(--flex-blue);
    border-radius: 0 var(--flex-radius-lg) var(--flex-radius-lg) 0;
    background: var(--flex-blue);
    padding: 40px 24px;
    margin-bottom: 36px;
    scroll-margin-top: 120px;
}
.flex-insight-card__title {
    color: rgba(255,255,255,1);
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: 24px; line-height: 33px;
    text-transform: uppercase;
}
.flex-insight-card__title::before {
    content: ''; display: inline-block; width: 16px; height: 16px;
    background: rgba(255,255,255,.4); border-radius: 50%; flex-shrink: 0;
}
.flex-insight-card__list { list-style: none; margin: 0; padding: 0; }
.flex-insight-card__item {
    display: flex; align-items: center;
    gap: 15px;
    padding: 10px 0;
    border-bottom: none;
    color: white; line-height: 1.6;
}
.flex-insight-card__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; }
.flex-insight-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.flex-insight-card__icon--default {
    width: 18px; height: 18px; background: rgba(255,255,255,.5);
    border-radius: 50%; flex-shrink: 0; position: relative;
}
.flex-insight-card__icon--default::after {
    content: ''; position: absolute; left: 5px; top: 3px;
    width: 5px; height: 8px; border: 2px solid #fff;
    border-top: none; border-left: none; transform: rotate(40deg);
}
.flex-insight-card__text { flex: 1; font-size: 18px; }
.flex-insight-card__ref  { font-size: .68rem; color: rgba(255,255,255,.7); vertical-align: super; line-height: 0; }

/* ────────────────────────────────────────────────────
   HEX INFOGRAPHIC
──────────────────────────────────────────────────── */
.flex-hex-infographic {
    text-align: center; margin-bottom: 40px; scroll-margin-top: 120px;
    padding: 0; background: #f8fafc; border-radius: var(--flex-radius-lg);
}
.flex-hex-infographic img { max-width: 100%; height: auto; max-height: unset; }
.flex-hex-infographic figcaption { font-size: .78rem; color: var(--flex-text-muted); margin-top: 10px; }

/* ────────────────────────────────────────────────────
   ACCORDION
──────────────────────────────────────────────────── */
.flex-accordion { margin-bottom: 40px; scroll-margin-top: 120px; padding: 20px 0; }
.flex-accordion__title { font-size: 24px; color: var(--flex-dark); margin: 0 0 14px; font-weight: 700; }

.flex-accordion__item {
    border: 1px solid var(--flex-gray); border-radius: var(--flex-radius-lg);
    margin: 10px; margin-bottom: 15px; overflow: hidden;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25); background: #fff;
}
.flex-accordion__header {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 15px 20px; cursor: pointer;
    background: white; border: none; text-align: left;
    color: rgba(0,116,195,1); gap: 12px; user-select: none;
    font-family: inherit; transition: background .12s;
    font-weight: 600; font-size: 20px; line-height: 33px;
    text-transform: uppercase; letter-spacing: 0;
}
.flex-accordion__header:hover { background: #f0f6fc; }
.flex-accordion__header:focus-visible { outline: 2px solid var(--flex-blue); outline-offset: -2px; }
.flex-accordion__item.is-open .flex-accordion__header { border-bottom: 0px solid var(--flex-blue); }

.flex-accordion__chevron {
    flex-shrink: 0; display: flex; align-items: center;
    color: var(--flex-blue); transition: transform .22s ease;
}
.flex-accordion__item.is-open .flex-accordion__chevron { transform: rotate(180deg); }

.flex-accordion__body { display: none; background: #fff; }
.flex-accordion__item.is-open .flex-accordion__body { display: block; }

/* Grid 2 colonne */
.flex-accordion__inner { display: grid; min-height: 260px; }
.flex-accordion__inner--img_left  { grid-template-columns: 33% 67%; padding: 20px; }
.flex-accordion__inner--img_right { grid-template-columns: 67% 33%; background: rgba(0,116,195,1); margin: 30px; }
.flex-accordion__inner--img_right .flex-accordion__col--image { order: 2; padding-top: 30px; padding-right: 40px; }
.flex-accordion__inner--img_right .flex-accordion__col--text  { order: 1; }
@media (max-width: 700px) {
    .flex-accordion__inner--img_left,
    .flex-accordion__inner--img_right { grid-template-columns: 1fr; min-height: auto; }
    .flex-accordion__inner--img_right .flex-accordion__col--image { order: -1; }
    .flex-accordion__inner--img_right .flex-accordion__col--text  { order: 0; }
}
.flex-accordion__col { min-width: 0; }
.flex-accordion__col--image { overflow: hidden; }
.flex-accordion__col--image img { width: 100%; height: auto; object-fit: cover; display: block; max-width: 100%; }
.flex-accordion__col--image-empty { background: var(--flex-gray-light); min-height: 200px; }
.flex-accordion__col--text { display: flex; flex-direction: column; justify-content: flex-start; padding: 30px 35px; }

.flex-accordion__content { font-size: .875rem; line-height: 1.72; color: var(--flex-text); margin-bottom: 20px; flex: 1; }
.flex-accordion__content p  { margin: 0 0 10px; font-size: 18px; }
.flex-accordion__content li { font-size: 18px; }
.flex-accordion__content ul { margin: 10px 0; padding: 0; list-style: disc;padding-left: 15px; }
.flex-accordion__content ul li { padding: 0 0 0 16px; position: relative; }

/* CTA Modulo A (img_left) */
.flex-accordion__inner--img_left .flex-accordion__cta {
    margin-top: auto;
    border-radius: 24px;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

/* CTA Modulo B (img_right) — sfondo bianco, testo blu, icona download */
.flex-accordion__inner--img_right .flex-accordion__cta {
    margin-top: auto;
    border-radius: 24px;
    font-weight: 700;
    font-size: 18px;
    background: rgba(255,255,255,1);
    color: rgba(13,99,165,1);
    border-color: rgba(13,99,165,1);
    text-align: center;
}
/* L'icona SVG è inline nel PHP — assicura allineamento */
.flex-accordion__inner--img_right .flex-accordion__cta svg {
    width: 14px; height: 14px; flex-shrink: 0;
    color: rgba(13,99,165,1);
}
/* Testo bianco per la colonna testo quando sfondo è blu (img_right) */
.flex-accordion__inner--img_right .flex-accordion__col--text .flex-accordion__content p  { color: white; }
.flex-accordion__inner--img_right .flex-accordion__col--text .flex-accordion__content h2 { color: white; }
.flex-accordion__inner--img_right .flex-accordion__col--text .flex-accordion__content li { color: white; }

.flex-accordion__body .flex-accordion__inner + .flex-accordion__inner { border-top: 1px solid var(--flex-gray); }

/* ────────────────────────────────────────────────────
   CAROUSEL
──────────────────────────────────────────────────── */
.flex-carousel { margin-bottom: 40px; scroll-margin-top: 120px; padding: 20px 0; }
.flex-carousel__title {
    font-size: 24px; color: rgba(0,116,195,1);
    margin: 0 0 18px; font-weight: 700; text-transform: uppercase;
}
.flex-carousel__wrapper { overflow: hidden; }
.flex-carousel__track {
    display: flex; gap: 16px;
    will-change: transform; transition: transform 0.35s ease;
}
.flex-carousel__card {
    flex: 0 0 calc(50% - 8px);
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.15); border-radius: 0px;
    overflow: hidden; background: #fff; display: flex; flex-direction: column;
    margin-top: 8px; margin-bottom: 8px;
}
@media (max-width: 640px) { .flex-carousel__card { flex: 0 0 85%; } }
.flex-carousel__card-image img { width: 100%; height: 160px; object-fit: cover; display: block; }
.flex-carousel__card-body  { padding: 16px; flex: 1; display: flex; flex-direction: column; }
.flex-carousel__card-cat   { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--flex-blue); margin-bottom: 6px; }
.flex-carousel__card-title { font-size: 18px; font-weight: 700; color: rgba(0,116,195,1); margin: 0 0 21px; line-height: 1.3; text-transform: uppercase; }
.flex-carousel__card-desc  { font-size: 16px; color: var(--flex-text-muted); line-height: 1.5; margin: 0 0 14px; flex: 1; }
.flex-carousel__dots {
    display: flex; justify-content: flex-start; align-items: center; gap: 8px; margin-top: 20px;
}
.flex-carousel__dot {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid #000; background: #fff;
    cursor: pointer; padding: 0; flex-shrink: 0; transition: background .18s;
}
.flex-carousel__dot.is-active  { background: #000; }
.flex-carousel__dot:focus-visible { outline: 2px solid var(--flex-blue); outline-offset: 2px; }

/* ────────────────────────────────────────────────────
   RESOURCE HUB
──────────────────────────────────────────────────── */
.flex-resource-hub { padding: 48px 0; scroll-margin-top: 120px; }
.flex-resource-hub__inner { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
@media (max-width: 768px) { .flex-resource-hub__inner { grid-template-columns: 1fr; } }
.flex-resource-hub__title { font-size: 24px; margin: 0 0 8px; font-weight: 700; text-transform: uppercase; }
.flex-resource-hub__desc  { font-size: 18px; line-height: 1.65; opacity: .85; margin: 0 0 20px; max-width: 560px; }
.flex-resource-hub__links { list-style: none; margin: 0; padding: 0; }
.flex-resource-hub__link-item { border-bottom: 1px solid rgba(255,255,255,.1); }
.flex-resource-hub__link-item:last-child { border-bottom: none; }
.flex-resource-hub__link {
    display: flex; align-items: center; justify-content: flex-start;
    padding: 10px 0; text-decoration: none; font-size: .84rem; transition: opacity .12s;
}
.flex-resource-hub__link::after { content: '›'; font-size: 1.4em; opacity: 1; margin-left: 10px;}
.flex-resource-hub__link:hover  { opacity: 1; }
.flex-resource-hub__library {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--flex-radius-lg); padding: 24px;
}
.flex-resource-hub__library-title { font-size: .95rem; font-weight: 700; margin: 0 0 14px; }

/* ────────────────────────────────────────────────────
   REFERENCES
──────────────────────────────────────────────────── */
.flex-references { padding: 28px 0; border-top: 1px solid var(--flex-gray); scroll-margin-top: 120px; }
.flex-references__list { list-style: none; margin: 0; padding: 0; counter-reset: ref; }
.flex-references__item {
    counter-increment: ref; padding: 3px 0 3px 26px; position: relative;
    font-size: .72rem; color: var(--flex-text-muted); line-height: 1.55;
}
.flex-references__item::before { content: counter(ref) '.'; position: absolute; left: 0; color: var(--flex-blue); font-weight: 700; }

/* ────────────────────────────────────────────────────
   LANDING PAGE
──────────────────────────────────────────────────── */
.flex-hero--landing { padding: 0; background: #0074c3; color: #fff; position: relative; min-height: 600px; }
.flex-hero--landing .flex-container { display: flex; align-items: center; gap: 0; position: relative; min-height: 600px; }
.page-template-page-landing .flex-hero--landing .flex-container { display: flex; align-items: center; gap: 0; position: relative; min-height: 600px; max-width: 100% !important; }
.flex-hero__content { flex: none; width: 60%; min-width: 0; padding: 56px 16px; z-index: 1; position: relative; }
.flex-hero__image   { flex: 0 0 50%; width: 50%; background: #e3e3e3; position: absolute; top: 0; right: 0; height: 100%; overflow: hidden; z-index: 0; }
.flex-hero__image img { border-radius: 0; display: block; object-fit: cover; height: 600px; width: auto; margin: 0 auto; }
@media (max-width: 900px) { .flex-hero--landing .flex-container { flex-direction: column; } .flex-hero__image { flex: none; width: 100%; } }
.flex-hero__label     { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.flex-hero__title--lg { font-size: clamp(1.5rem,3vw,2.25rem); font-weight: 700; line-height: 1.2; margin: 0 0 14px; }
.flex-hero__body      { font-size: .9375rem; color: rgba(255,255,255,.85); line-height: 1.65; margin: 0 0 26px; }
.flex-hero__ctas      { display: flex; gap: 12px; flex-wrap: wrap; }

.flex-text-image { padding: var(--flex-section-pad); }
.flex-text-image__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.flex-text-image__inner.img-left { direction: rtl; }
.flex-text-image__inner.img-left > * { direction: ltr; }
@media (max-width: 768px) { .flex-text-image__inner { grid-template-columns: 1fr; } .flex-text-image__inner.img-left { direction: ltr; } }
.flex-text-image__text h2 { color: rgba(0,116,195,1); margin: 0 0 14px; font-weight: 500; font-size: 42px; line-height: 58px; letter-spacing: 0; }
.flex-text-image__text .content { line-height: 1.7; color: var(--flex-text); font-weight: 400; font-size: 18px; }
.flex-text-image__media img { width: 100%; height: auto; border-radius: var(--flex-radius-lg); }
.flex-label { display: inline-block; color: var(--flex-blue); margin-bottom: 8px; font-weight: 600; font-size: 20px; line-height: 33px; letter-spacing: 0; vertical-align: middle; text-transform: uppercase; }

.flex-resources-grid { padding: var(--flex-section-pad); }
.flex-grid-header { text-align: center; margin-bottom: 36px; }
.flex-grid-header h2 { color: rgba(0,116,195,1); margin: 0 0 14px; font-weight: 500; font-size: 42px; line-height: 58px; }
.flex-grid-header p  { font-size: .9rem; color: var(--flex-text-muted); margin: 0; }
.flex-resources-grid__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
@media (max-width: 900px) { .flex-resources-grid__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .flex-resources-grid__grid { grid-template-columns: 1fr; } }
.flex-resource-card { border: 1px solid var(--flex-gray); border-radius: var(--flex-radius-lg); overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.07); display: flex; flex-direction: column; padding: 25px; }
.flex-resource-card__image img { height: 300px; margin: 0 auto; display: block; }
.flex-resource-card__body  { flex: 1; display: flex; flex-direction: column; padding: 15px; }
.flex-resource-card__cat   { color: var(--flex-blue); margin: 10px auto 20px; font-weight: 600; font-size: 20px; line-height: 30px; letter-spacing: 0; text-align: center; text-transform: uppercase; }
.flex-resource-card__title { color: rgba(0,116,195,1); margin: 0 0 9px; font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: 0; text-align: center; }
.flex-resource-card__desc  { color: var(--flex-text-muted); flex: 1; margin: 0 0 9px; font-weight: 600; font-size: 14px; line-height: 18px; letter-spacing: 0; text-align: center; }

.flex-pillars-grid { padding: var(--flex-section-pad); background: var(--flex-gray-light); }
.flex-pillars-grid__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 28px; }
@media (max-width: 900px) { .flex-pillars-grid__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .flex-pillars-grid__grid { grid-template-columns: 1fr; } }
.flex-pillar-item__title { color: var(--flex-blue); margin: 0 0 9px; padding-bottom: 9px; border-bottom: 0; font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: 0; text-align: center; text-transform: uppercase; min-height: 80px; display: flex; justify-content: center; align-items: center; }
.flex-pillar-item__desc  { color: var(--flex-text); font-weight: 400; font-size: 18px; text-align: center; }

.flex-solutions-grid { padding: var(--flex-section-pad); background: rgba(206,207,205,1); }
.flex-solutions-grid__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; margin-top: 28px; }
@media (max-width: 900px) { .flex-solutions-grid__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .flex-solutions-grid__grid { grid-template-columns: 1fr; } }
.flex-solution-card { text-align: center; flex: 1; display: flex; flex-direction: column; }
.flex-solution-card__image { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 30px; margin-bottom: 30px; margin-top: 40px; background: white; overflow: visible; }
.flex-solution-card__image img { width: 100%; height: 348px; object-fit: contain; padding: 14px; }
.flex-solution-card__title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--flex-blue); margin: 0 0 8px; }
.flex-solution-card__body  { color: var(--flex-text); margin: 0 0 35px; font-weight: 400; font-size: 18px; line-height: 22px; letter-spacing: 0; text-align: center; flex: 1; display: flex; flex-direction: column; }

.flex-approach { padding: var(--flex-section-pad); background: var(--flex-gray-light); }
.flex-approach__inner { display: grid; grid-template-columns: 1fr 50%; gap: 48px; align-items: center; }
@media (max-width: 900px) { .flex-approach__inner { grid-template-columns: 1fr; } }
.flex-approach__label { display: inline-block; color: var(--flex-blue); margin-bottom: 8px; font-weight: 600; font-size: 20px; line-height: 33px; letter-spacing: 0; vertical-align: middle; text-transform: uppercase; }
.flex-approach__title { color: rgba(0,116,195,1); margin: 0 0 14px; font-weight: 500; font-size: 42px; line-height: 45px; }
.flex-approach__text  { color: var(--flex-text); font-weight: 500; font-size: 20px; line-height: 33px; letter-spacing: -.01em; }
.flex-approach__text + .flex-approach__text { margin-top: 14px; }
.flex-approach__image img { width: 100%; height: auto; }

.flex-cta-banner { background: rgba(0,116,195,1); color: #fff; padding: 52px 0; text-align: center; }
.flex-cta-banner h2 { text-transform: uppercase; margin: 0 0 14px; font-weight: 500; font-size: 42px; line-height: 45px; }
.flex-cta-banner__subtitle { color: rgba(255,255,255,.8); margin: 0 0 26px; font-weight: 400; font-size: 20px; line-height: 33px; text-align: center; }

/* ── Accordion: colonna immagine vuota → scompare, testo al 100% ── */
.flex-accordion__inner--img_left .flex-accordion__col--image-empty,
.flex-accordion__inner--img_right .flex-accordion__col--image-empty {
    display: none;
}
.flex-accordion__inner--img_left:has(.flex-accordion__col--image-empty),
.flex-accordion__inner--img_right:has(.flex-accordion__col--image-empty) {
    grid-template-columns: 1fr;
}

/* Fallback per browser senza :has() */
.flex-accordion__inner--no-image {
    grid-template-columns: 1fr !important;
}
.flex-accordion__inner--no-image .flex-accordion__col--image-empty {
    display: none !important;
}

.flex-resource-hub__link-item a { font-size: 18px; }

.flex-accordion__content h3 {
    font-size: 24px; color: white; margin: 0 0 18px;
    font-weight: 700; text-transform: uppercase;
}

/* ── Pillars grid: titolo e descrizione sezione ── */
.flex-pillars-grid__title { color: rgba(0,116,195,1); margin: 0 0 14px; font-weight: 500; font-size: 42px; line-height: 33px; text-align: center; }
.flex-pillars-grid__desc  { font-size: 18px; color: var(--flex-text-muted); text-align: center; margin: 0 0 28px; }
.flex-pillars-grid__desc p { margin: 0 0 8px; }

/* ── CTA Banner: descrizione sotto bottone ── */
.flex-cta-banner__description { margin-top: 0; }
.flex-cta-banner__description p { margin: 0 0 8px; }

/* ── Resources grid: label sopra titolo ── */
.flex-grid-header .flex-label { display: block; margin-bottom: 6px; }
.flex-grid-subtitle { margin: 0; line-height: 1.7; color: var(--flex-text); font-weight: 400; font-size: 18px; }
.flex-grid-subtitle p { margin: 0 0 6px; }

/* ── Landing page container max-width ── */
.page-template-page-landing .flex-container { max-width: 1450px; }
.page-template-page-pillar .flex-container { max-width: 1450px; }

/* ── Resource card image container ── */
.flex-resource-card__image { width: 300px; margin: 0 auto; overflow: hidden; background: rgba(0,0,0,.05); padding: 20px; border-radius: 30px; }

/* ── Resource card btn ── */
.flex-resource-card__desc .flex-btn--outline-blue,
.flex-resource-card__body .flex-btn--outline-blue {
    display: flex; background: var(--flex-blue); color: #fff; border-color: var(--flex-blue);
    font-size: 15px; border-radius: 24px; text-align: center;
    align-items: center; justify-content: center; margin: 20px 0;
}

/* ── Solution card btn ── */
.flex-solution-card .flex-btn--primary {
    font-weight: 600; font-size: 18px; letter-spacing: 0;
    text-align: center; border-radius: 24px; width: 90%; justify-content: center;
}

/* ── CTA banner container + btn ── */
.flex-cta-banner .flex-container { max-width: 50%; }
.flex-cta-banner .flex-btn--white { background: #fff; color: rgba(0,116,195,1); border-radius: 24px; margin: 10px auto 40px; font-weight: 700; letter-spacing: 0; padding: 10px 35px; }
.flex-cta-banner__description p { text-align: center; font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: 0; }

/* ── Solutions grid h2 ── */
.flex-solutions-grid h2 {
    text-align: center; color: rgba(0,116,195,1) !important;
    margin: 0 0 14px; font-weight: 500; font-size: 42px !important;
    line-height: 33px;
}

/* ── Solution card title ── */
.flex-solution-card__title {
    color: var(--flex-blue); margin: 0 0 9px; padding-bottom: 9px;
    border-bottom: 0; font-weight: 600; font-size: 20px; line-height: 28px;
    letter-spacing: 0; text-align: center; text-transform: uppercase;
    min-height: 80px; display: flex; justify-content: center; align-items: center;
}

/* ── SVG decorativo hero landing ── */
.masthead__media .masthead__media-svg-decorative {
    position: absolute;
    top: 0; left: 0;
    display: block;
    width: auto; height: 100%;
    z-index: 1;
}

@media (max-width: 900px) {
    .flex-hero--landing .flex-container { flex-direction: column; min-height: auto; }
    .flex-hero__content { width: 100%; padding: 40px 24px; }
    .flex-hero__image   { position: relative; width: 100%; height: 300px; }
    .flex-hero__image img { width: 100%; height: 300px; }
}

/* ── Hero wrapper ── */
.flex-hero__wrapper {
    max-width: 1450px;
    margin: 0 auto;
}

/* ── Hero label ── */
.flex-hero__label {
    color: rgba(255,255,255,1);
    font-weight: 600;
    font-size: 28px;
    line-height: 44px;
    letter-spacing: 0;
    vertical-align: middle;
    margin: 0 0 10px;
    text-transform: none;
}

/* ── Hero title ── */
.flex-hero__title--lg {
    margin: 0 0 14px;
    font-weight: 500;
    font-size: 36px;
    line-height: 44px;
    vertical-align: middle;
}

/* ── Hero body ── */
.flex-hero__body {
    color: rgba(255,255,255,1);
    margin: 0 0 26px;
    font-weight: 300;
    font-size: 28px;
    line-height: 38px;
    letter-spacing: 0;
    vertical-align: middle;
}

/* ── Hero CTAs ── */
.flex-hero__ctas .flex-btn--white,
.flex-hero__ctas .flex-btn--outline {
    background: #fff;
    color: var(--flex-blue);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0;
    text-align: center;
    border-radius: 24px;
}

/* ── Hero responsive ── */
@media (max-width: 900px) {
    .flex-hero__wrapper { flex-direction: column; min-height: auto; }
    .flex-hero__content { width: 100%; padding: 40px 24px; }
    .flex-hero__image   { position: relative; width: 100%; height: 300px; }
    .flex-hero__image img { width: 100%; height: 300px; }
}

/* ── Text block: campo Presentazione ── */
.flex-text-block__presentation {
    color: var(--flex-blue);
    text-transform: initial;
    font-weight: 500;
    font-size: 45px;
    line-height: 55px;
    letter-spacing: 0;
    vertical-align: middle;
    margin: 0 0 40px;
}