/* Infobox — classes/widgets/Infobox/infobox.php
   vw on the 1440 canvas like hero.css; px from 1024 down.
   The Columns control writes --ib-cols-set, never --ib-cols: Elementor's
   selector carries two classes and would outrank the breakpoints below. */

.ib {
    --ib-bg: #e8d9b817;
    --ib-ink: #111827;
    --ib-body: #4b5563;
    --ib-card: #1c3244;
    --ib-card-ink: #ffffff;
    --ib-card-body: rgba(255, 255, 255, .72);
    --ib-gold: #e8b64a;
    --ib-cols: var(--ib-cols-set, 4);
    --ib-shape-color: rgba(52, 96, 128, .5);
    --ib-shape-size: 70%;
    --ib-shape-x: 22%;
    --ib-shape-y: 72%;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 5.56vw 80px;
    overflow: hidden;
    background: var(--ib-bg);
}

.ib *,
.ib *::before,
.ib *::after {
    box-sizing: border-box;
}

/* decorative layer behind the content */
.ib__shape {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ib--shape-glow .ib__shape {
    background-image: radial-gradient(var(--ib-shape-size) var(--ib-shape-size) at var(--ib-shape-x) var(--ib-shape-y), var(--ib-shape-color) 0%, transparent 70%);
}

.ib--shape-lines .ib__shape {
    background-image: repeating-linear-gradient(115deg, var(--ib-shape-color) 0 1px, transparent 1px 22px);
}

.ib--shape-dots .ib__shape {
    background-image: radial-gradient(var(--ib-shape-color) 1.6px, transparent 1.7px);
    background-size: 22px 22px;
}

.ib--shape-ring .ib__shape::before {
    content: "";
    position: absolute;
    top: var(--ib-shape-y);
    left: var(--ib-shape-x);
    width: var(--ib-shape-size);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid var(--ib-shape-color);
    border-radius: 50%;
}

.ib--shape-blob .ib__shape::before {
    content: "";
    position: absolute;
    top: var(--ib-shape-y);
    left: var(--ib-shape-x);
    width: var(--ib-shape-size);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(18deg);
    background: var(--ib-shape-color);
    border-radius: 42% 58% 38% 62% / 52% 42% 58% 48%;
}

.ib__head,
.ib__grid,
.ib__actions {
    position: relative;
    z-index: 1;
}

.ib__head {
    margin: 0 auto 80px;
    text-align: center;
}

.ib__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8vw;
    margin: 0 0 1.4vw;
}

.ib__eyebrow-dash {
    flex: 0 0 auto;
    width: 1.75vw;
    height: max(2px, .14vw);
    background: var(--ib-ink);
}

.ib__eyebrow-text {
    font-size: max(12px, .94vw);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ib-ink);
}

.ib__title {
    max-width: 66vw;
    margin: 0 auto 1.2vw;
    font-size: max(32px, 3.75vw);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.01em;
    color: var(--ib-ink);
}

.ib__lead {
    max-width: 40vw;
    margin: 0 auto;
    font-size: max(15px, 1.3vw);
    line-height: 1.55;
    color: var(--ib-body);
}

.ib__lead p {
    margin: 0 0 1em;
}

.ib__lead p:last-child {
    margin-bottom: 0;
}

/* the pull quote closing the header; blockquote carries margins and, in some
   themes, an indent rule of its own, so all three are cleared here */
.ib__quote {
    max-width: 52vw;
    margin: 2.4vw auto 0;
    padding: 0;
    border: 0;
    font-size: max(20px, 2.2vw);
    font-weight: 500;
    line-height: 1.3;
    color: var(--ib-ink);
}

.ib__quote p {
    margin: 0;
}

.ib--head-left .ib__head {
    text-align: left;
}

.ib--head-left .ib__eyebrow {
    justify-content: flex-start;
}

.ib--head-left .ib__title,
.ib--head-left .ib__lead,
.ib--head-left .ib__quote {
    margin-inline: 0;
}

.ib__grid {
    display: grid;
    grid-template-columns: repeat(var(--ib-cols), minmax(0, 1fr));
    align-items: var(--ib-align, stretch);
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ib__item {
    display: flex;
}

/* Equal Height on: the card fills its row */
.ib--equal .ib__card {
    height: 100%;
    width: 100%;
}

.ib__card {
        position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 40px;
    border-radius: 1.2vw;
    background: var(--ib-card);
    color: var(--ib-card-ink);
    height: 100%;
}

.ib--texture .ib__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 1.8vw);
    pointer-events: none;
}

.ib__icon,
.ib__card-label,
.ib__card-title,
.ib__card-text {
    position: relative;
}

.ib__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: flex-start;
    width: max(42px, 3.9vw);
    height: max(42px, 3.9vw);
    margin-bottom: 24px;
    border-radius: 50%;
    background: var(--ib-gold);
    /* the glyph reads against the disc; light cards override it */
    color: var(--ib-icon-ink, var(--ib-card));
}

.ib__icon svg {
    width: 55%;
    height: 55%;
    fill: none;
    stroke: currentColor;
}

.ib__icon i {
    font-size: max(18px, 1.7vw);
    line-height: 1;
}

/* the short line above the title; only drawn when a box fills its Label in, so
   it costs the styles that do not use it nothing */
.ib__card-label {
    display: block;
    margin-bottom: .55vw;
    font-size: max(11px, .93vw);
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ib-card-label, var(--ib-gold));
}

.ib__card-title {
    margin-bottom:20px;
    font-size: max(19px, 1.3vw);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ib-card-ink);
    margin-top: 0;
}

.ib__card-text {
    margin: 0;
    font-size: max(14px, 1vw);
    line-height: 1.6;
    color: var(--ib-card-body);
}

.ib__card-link {
    position: relative;
    margin-top: 1.4vw;
    font-size: max(14px, 1.1vw);
    font-weight: 600;
    color: var(--ib-gold);
    text-decoration: none;
}

.ib__card-link:hover,
.ib__card-link:focus {
    text-decoration: underline;
}

.ib__actions {
    display: flex;
    justify-content: center;
    margin-top: 3vw;
}

.ib__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7vw;
    padding: 1.15vw 2.2vw;
    border: 0;
    border-radius: .56vw;
    background: var(--ib-btn-bg, var(--ib-gold));
    font-size: max(15px, 1.35vw);
    font-weight: 600;
    line-height: 1;
    color: var(--ib-btn-ink, #1c3244);
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.ib__btn:hover,
.ib__btn:focus {
    background: #fff;
    transform: translateY(-2px);
}

/* ============ Style 2 — dark field, glass cards, no icon ============ */
.ib--style-2 .ib {
    --ib-bg: #16293a;
    --ib-ink: #ffffff;
    --ib-body: rgba(255, 255, 255, .74);
    --ib-card: rgba(255, 255, 255, .05);
    --ib-card-ink: #f2e6cf;
    --ib-card-body: rgba(255, 255, 255, .7);
    --ib-card-border: rgba(255, 255, 255, .1);
    background-image: radial-gradient(75% 85% at 22% 72%, rgba(52, 96, 128, .5) 0%, rgba(22, 41, 58, 0) 70%);
}

.ib--style-2 .ib__eyebrow-text {
    color: var(--ib-gold);
}

.ib--style-2 .ib__eyebrow-dash {
    background: var(--ib-gold);
}

.ib--style-2 .ib__icon {
    display: none;
}

.ib--style-2 .ib__card {
    padding: 1.7vw;
    border: 1px solid var(--ib-card-border);
    border-radius: .9vw;
    /* a soft sheen across the corner instead of the ruled texture */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 55%);
}

.ib--style-2.ib--texture .ib__card::before {
    display: none;
}

.ib--style-2 .ib__card-title {
    margin-bottom: 12px;
    font-size: max(18px, 1.45vw);
    font-weight: 500;
}

.ib--style-2 .ib__card-text {
    font-size: max(13px, .97vw);
}

/* ============ Style 3 — cream field, outlined white cards ============ */
.ib--style-3 .ib {
    --ib-bg: #fdfaf2;
    --ib-ink: #1c3244;
    --ib-body: #5a6880;
    --ib-card: #ffffff;
    --ib-card-ink: #1c3244;
    --ib-card-body: #6b7280;
    --ib-card-border: #efe7d8;
    --ib-gold: #e3d5b7;
    --ib-icon-ink: #1c3244;
    --ib-btn-bg: #1c3244;
    --ib-btn-ink: #ffffff;
}

.ib--style-3 .ib__grid {
    gap: 1.7vw;
}

.ib--style-3 .ib__card {
    padding: 2.2vw;
    border: 1px solid var(--ib-card-border);
    border-radius: 1vw;
}

/* the ruled texture belongs to the dark cards of Style 1 */
.ib--style-3.ib--texture .ib__card::before {
    display: none;
}

.ib--style-3 .ib__icon {
    width: max(36px, 3.5vw);
    height: max(36px, 3.5vw);
    margin-bottom: 1.6vw;
}

.ib--style-3 .ib__card-title {
    margin-bottom: 1.25vw;
    font-size: max(15px, 1.45vw);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.ib--style-3 .ib__card-text {
    font-size: max(12px, 1.15vw);
    line-height: 1.55;
}

.ib--style-3 .ib__card-link {
    color: var(--ib-ink);
}

/* the skin's hover colour is handed to the shared sweep in
   assets/css/buttons.css; a background on :hover here would outrank it */
.ib--style-3 .ib__btn {
    --pbtn-sweep: #294863;
    --pbtn-sweep-ink: #fff;
}

/* ====== Style 4 — dark split: header column beside the card grid ======
   The section itself becomes the two-column grid; head and actions are
   placed in column one, the card grid spans both rows of column two. */
.ib--style-4 .ib {
    --ib-bg: #10202e;
    --ib-ink: #ffffff;
    --ib-body: rgba(255, 255, 255, .68);
    --ib-card: rgba(255, 255, 255, .045);
    --ib-card-ink: #e8d9b8;
    --ib-card-body: rgba(255, 255, 255, .62);
    --ib-card-border: rgba(255, 255, 255, .09);
    --ib-gold: #d9b356;
    --ib-icon-ink: #16293a;
    --ib-btn-ink: #16293a;
    display: grid;
    grid-template-columns: var(--ib-split, 1fr 1.2fr);
    /* row 1 hugs the header so the taller card column cannot stretch the gap
       between the lead and the button; row 2 absorbs whatever is left */
    grid-template-rows: max-content 1fr;
    align-items: start;
    column-gap: 4.4vw;
    background-image: radial-gradient(85% 115% at 74% 26%, rgba(64, 116, 152, .5) 0%, rgba(16, 32, 46, 0) 62%);
}

/* placement shared with Style 5, which uses the same split */
.ib--style-4 .ib__head,
.ib--style-5 .ib__head {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    text-align: left;
}

.ib--style-4 .ib__eyebrow,
.ib--style-5 .ib__eyebrow {
    justify-content: flex-start;
}

.ib--style-4 .ib__eyebrow-text,
.ib--style-5 .ib__eyebrow-text {
    color: var(--ib-gold);
}

.ib--style-4 .ib__eyebrow-dash,
.ib--style-5 .ib__eyebrow-dash {
    background: var(--ib-gold);
}

.ib--style-4 .ib__title,
.ib--style-4 .ib__lead,
.ib--style-5 .ib__title,
.ib--style-5 .ib__lead {
    max-width: none;
    margin-inline: 0;
}

.ib--style-4 .ib__actions,
.ib--style-5 .ib__actions {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
    margin-top: 2.4vw;
}

.ib--style-4 .ib__grid,
.ib--style-5 .ib__grid {
    grid-column: 2;
    grid-row: 1 / span 2;
    gap: 1.5vw;
}

.ib--style-4 .ib__card {
    padding: 2.1vw;
    border: 1px solid var(--ib-card-border);
    border-radius: 1.2vw;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 55%);
}

.ib--style-4.ib--texture .ib__card::before {
    display: none;
}

.ib--style-4 .ib__card-title {
    margin-bottom: .8vw;
    font-size: max(16px, 1.4vw);
    font-weight: 700;
}

.ib--style-4 .ib__card-text {
    font-size: max(13px, 1.1vw);
}

/* ====== Style 5 — same split, cards stacked and laid out sideways ======
   Style 4's card is a vertical stack with the icon on top. Here the card
   becomes a two-column grid: the disc holds column one, and the title, text
   and link all take column two, so they stack beside it rather than under it.
   Set Columns — Desktop to 1 to get the single file the design shows. */
.ib--style-5 .ib {
    --ib-bg: #152535;
    --ib-ink: #ffffff;
    --ib-body: rgba(255, 255, 255, .68);
    --ib-card: #22384d;
    --ib-card-ink: #e8d9b8;
    --ib-card-body: rgba(255, 255, 255, .66);
    --ib-card-border: rgba(255, 255, 255, .07);
    --ib-gold: #d9b356;
    --ib-icon-ink: #16293a;
    --ib-btn-ink: #16293a;
    display: grid;
    grid-template-columns: var(--ib-split, 1fr 1.05fr);
    grid-template-rows: max-content 1fr;
    align-items: start;
    column-gap: 4.4vw;
}

.ib--style-5 .ib__grid {
    gap: 1.15vw;
}

.ib--style-5 .ib__card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 1.15vw;
    row-gap: .35vw;
    /* the card is the lone flex child of .ib__item, so without this it sizes
       to its text and a short row would come up narrow */
    width: 100%;
    height: auto;
    padding: 1.5vw 1.7vw;
    border: 1px solid var(--ib-card-border);
    border-radius: .9vw;
}

.ib--style-5.ib--texture .ib__card::before {
    display: none;
}

/* the disc keeps column one; everything else is pushed into column two so
   auto-placement stacks it there instead of wrapping under the icon */
.ib--style-5 .ib__icon {
    grid-column: 1;
    grid-row: 1;
    width: max(34px, 2.5vw);
    height: max(34px, 2.5vw);
    margin-bottom: 0;
}

.ib--style-5 .ib__card-title,
.ib--style-5 .ib__card-text,
.ib--style-5 .ib__card-link {
    grid-column: 2;
}

.ib--style-5 .ib__card-title {
    margin-bottom: 0;
    font-size: max(15px, 1.25vw);
    font-weight: 700;
}

.ib--style-5 .ib__card-text {
    font-size: max(12px, 1.02vw);
    line-height: 1.5;
}

/* ====== Style 6 — white field, cream cards, navy icon tile ======
   The inverse of Style 3: the sand moves from the section to the cards, and
   the disc becomes a rounded square carrying the dark fill. */
.ib--style-6 .ib {
    --ib-bg: #ffffff;
    --ib-ink: #16293a;
    --ib-body: #5a6880;
    --ib-card: #f5efe2;
    --ib-card-ink: #16293a;
    --ib-card-body: #6b7280;
    --ib-card-border: transparent;
    /* the tile fill, not a gold accent, in this skin */
    --ib-gold: #16293a;
    --ib-icon-ink: #ffffff;
    --ib-btn-bg: #16293a;
    --ib-btn-ink: #ffffff;
}

.ib--style-6 .ib__grid {
    gap: 2vw;
}

.ib--style-6 .ib__card {
    padding: 2.1vw;
    border-radius: 1.2vw;
}

/* the ruled texture belongs to the dark cards of Style 1 */
.ib--style-6.ib--texture .ib__card::before {
    display: none;
}

/* a rounded square rather than the circle every other skin uses */
.ib--style-6 .ib__icon {
    width: max(38px, 2.8vw);
    height: max(38px, 2.8vw);
    margin-bottom: 1.7vw;
    border-radius: 1vw;
}

.ib--style-6 .ib__card-title {
    margin-bottom: .55vw;
    font-size: max(17px, 1.7vw);
    font-weight: 600;
}

.ib--style-6 .ib__card-text {
    font-size: max(12px, 1.2vw);
    line-height: 1.55;
}

.ib--style-6 .ib__card-link {
    color: var(--ib-ink);
}

/* hover colour for the shared sweep — see the note on Style 3 */
.ib--style-6 .ib__btn {
    --pbtn-sweep: #294863;
    --pbtn-sweep-ink: #fff;
}

/* ====== Style 7 — grey field, white cards, ruled titles ======
   The plainest card of the set: white on a soft grey field, held up by a
   shadow rather than an outline. What marks it out is the hairline under each
   title — no other skin draws one, so it lives here rather than on the base
   .ib__card-title with a colour of `transparent` everywhere else. */
.ib--style-7 .ib {
    --ib-bg: #f2f3f5;
    --ib-ink: #16293a;
    --ib-body: #5a6880;
    --ib-card: #ffffff;
    --ib-card-ink: #16293a;
    --ib-card-body: #6b7280;
    --ib-card-rule: rgba(22, 41, 58, .14);
    --ib-gold: #e8b64a;
    /* dark glyph on the gold disc — the default inherits --ib-card, which is
       white in this skin and would leave the disc looking empty */
    --ib-icon-ink: #16293a;
    --ib-btn-bg: #e8b64a;
    --ib-btn-ink: #16293a;
}

.ib--style-7 .ib__grid {
    gap: 1.6vw;
}

.ib--style-7 .ib__card {
    padding: 2vw;
    border-radius: .7vw;
    box-shadow: 0 .5vw 1.6vw rgba(22, 41, 58, .08);
}

/* the ruled texture belongs to the dark cards of Style 1 */
.ib--style-7.ib--texture .ib__card::before {
    display: none;
}

.ib--style-7 .ib__icon {
    width: max(38px, 3vw);
    height: max(38px, 3vw);
    margin-bottom: 1.5vw;
}

.ib--style-7 .ib__card-title {
    margin-bottom: 1vw;
    padding-bottom: .8vw;
    border-bottom: 1px solid #E8B64A;
    font-size: max(16px, 1.25vw);
    font-weight: 700;
}

.ib--style-7 .ib__card-text {
    font-size: max(13px, 1vw);
    line-height: 1.6;
}

.ib--style-7 .ib__card-link {
    color: var(--ib-ink);
}

/* hover colour for the shared sweep — see the note on Style 3 */
.ib--style-7 .ib__btn {
    --pbtn-sweep: #16293a;
    --pbtn-sweep-ink: #fff;
}

/* ====== Style 8 — cream field, no cards, inline glyph beside the title ======
   The only skin with nothing drawn behind the content: no fill, no outline, no
   padding, so the items read as a plain list on the section's own cream. The
   card becomes a two-column grid so the glyph and the title share row one and
   the text spans back under both, rather than indenting beneath the title.
   The disc is dropped here — the glyph is bare ink, so --ib-gold is left alone
   and the fill is cleared on .ib__icon itself, keeping the link colour intact. */
.ib--style-8 .ib {
    --ib-bg: #fdf9ef;
    --ib-ink: #16293a;
    --ib-body: #5a6880;
    --ib-card: transparent;
    --ib-card-ink: #16293a;
    --ib-card-body: #7c8aa0;
    --ib-gold: #16293a;
    /* the glyph is set through the variable, not on .ib__icon, so the Glyph
       Color control still outranks it */
    --ib-icon-ink: #16293a;
    --ib-btn-bg: #16293a;
    --ib-btn-ink: #ffffff;
}

.ib--style-8 .ib__grid {
    column-gap: 3.4vw;
    row-gap: 3.2vw;
}

.ib--style-8 .ib__card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .75vw;
    row-gap: .7vw;
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
}

/* the ruled texture belongs to the dark cards of Style 1 */
.ib--style-8.ib--texture .ib__card::before {
    display: none;
}

/* glyph only — the disc, its size and the spacing under it all go */
.ib--style-8 .ib__icon {
    grid-column: 1;
    grid-row: 1;
    width: max(20px, 1.6vw);
    height: max(20px, 1.6vw);
    margin-bottom: 0;
    border-radius: 0;
    background: none;
}

.ib--style-8 .ib__icon svg {
    width: 100%;
    height: 100%;
}

.ib--style-8 .ib__card-title {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    font-size: max(16px, 1.32vw);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* back out to the icon's edge rather than sitting under the title */
.ib--style-8 .ib__card-text,
.ib--style-8 .ib__card-link {
    grid-column: 1 / -1;
}

.ib--style-8 .ib__card-text {
    font-size: max(13px, 1vw);
    line-height: 1.55;
}

.ib--style-8 .ib__card-link {
    margin-top: .5vw;
    color: var(--ib-ink);
}

/* hover colour for the shared sweep — see the note on Style 3 */
.ib--style-8 .ib__btn {
    --pbtn-sweep: #294863;
    --pbtn-sweep-ink: #fff;
}

/* ====== Style 9 — white field, no cards, big gold disc beside the copy ======
   Style 8 without the field and with the disc back: white ground, a large gold
   circle holding a navy glyph, and the title and text stacked in column two so
   both range off the same left edge rather than the text running back under the
   disc. The disc is centred against the whole block, not just the title, so it
   spans the rows the copy fills — see the note on the span below.
   Set Columns to 2. */
.ib--style-9 .ib {
    --ib-bg: #ffffff;
    --ib-ink: #16293a;
    --ib-body: #5a6880;
    --ib-card: transparent;
    --ib-card-ink: #16293a;
    --ib-card-body: #5a6880;
    --ib-gold: #e8b64a;
    /* navy glyph on the gold disc — the default inherits --ib-card, which is
       transparent here and would leave the disc looking empty */
    --ib-icon-ink: #16293a;
    --ib-btn-bg: #e8b64a;
    --ib-btn-ink: #16293a;
}

.ib--style-9 .ib__head {
    margin-bottom: 5.8vw;
}

.ib--style-9 .ib__eyebrow-text,
.ib--style-9 .ib__eyebrow-dash {
    color: var(--ib-gold);
}

.ib--style-9 .ib__eyebrow-dash {
    background: var(--ib-gold);
}

.ib--style-9 .ib__grid {
    column-gap: 2.6vw;
    row-gap: 3.8vw;
}

.ib--style-9 .ib__card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 2.3vw;
    /* nothing between the rows: the title's own margin sets that spacing, and a
       gap here would be drawn under the empty row the disc's span can open */
    row-gap: 0;
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
}

/* the ruled texture belongs to the dark cards of Style 1 */
.ib--style-9.ib--texture .ib__card::before {
    display: none;
}

/* The disc holds column one across every row the copy can fill — title, text
   and link — so it centres against the block rather than against the title.
   Spanning three rows is safe when a card has fewer: the extra rows are
   implicit, carry no content and, with row-gap at zero, add no height. */
.ib--style-9 .ib__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    width: max(56px, 5.17vw);
    height: max(56px, 5.17vw);
    margin-bottom: 0;
}

.ib--style-9 .ib__icon svg {
    width: 43%;
    height: 43%;
}

.ib--style-9 .ib__card-title,
.ib--style-9 .ib__card-text,
.ib--style-9 .ib__card-link {
    grid-column: 2;
}

.ib--style-9 .ib__card-title {
    margin-bottom: .42vw;
    font-size: max(17px, 1.64vw);
    font-weight: 700;
}

.ib--style-9 .ib__card-text {
    font-size: max(13px, 1.2vw);
    line-height: 1.45;
}

.ib--style-9 .ib__card-link {
    margin-top: .6vw;
    color: var(--ib-ink);
}

.ib--style-9 .ib__actions {
    margin-top: 4.6vw;
}

/* geometry comes from assets/css/buttons.css now, so every skin's button is
   the same size; only the hover colour is a per-skin decision */
.ib--style-9 .ib__btn {
    --pbtn-sweep: #16293a;
    --pbtn-sweep-ink: #fff;
}

/* ====== Style 10 — white field, ruled label, quote, card-less tiles ======
   The header runs title, lead, eyebrow, quote, so the label reads as a divider
   under the intro rather than a kicker above it. Flex order does that without
   touching the markup, which keeps the eyebrow first in the source where a
   screen reader still meets it as the section's kicker. The eyebrow also gains a
   second rule after the label — a pseudo-element mirroring the real dash, fed by
   the same colour and length controls through --ib-dash and --ib-dash-w.
   Below it the items drop the card: a cream tile, an uppercase title and the
   copy, all on the plain white. Set Columns to 2 and switch the Quote on. */
.ib--style-10 .ib {
    --ib-bg: #ffffff;
    --ib-ink: #16293a;
    --ib-body: #5a6880;
    --ib-card: transparent;
    --ib-card-ink: #16293a;
    --ib-card-body: #6b7280;
    /* the tile fill, not a gold accent, in this skin — the eyebrow and button
       carry the gold instead, through --ib-accent */
    --ib-gold: #e8d9b8;
    --ib-icon-ink: #16293a;
    --ib-accent: #d0a03f;
    --ib-btn-bg: #e8b64a;
    --ib-btn-ink: #16293a;
}

.ib--style-10 .ib__head {
    display: flex;
    flex-direction: column;
    margin-bottom: 4.4vw;
}

.ib--style-10 .ib__title { order: 1; }
.ib--style-10 .ib__lead { order: 2; }
.ib--style-10 .ib__eyebrow { order: 3; }
.ib--style-10 .ib__quote { order: 4; }

.ib--style-10 .ib__title {
    max-width: 100%;
    margin-bottom: .9vw;
    font-size: max(30px, 3.9vw);
}

.ib--style-10 .ib__lead {
    max-width: 46vw;
    font-size: max(14px, 1.25vw);
}

.ib--style-10 .ib__eyebrow {
    margin: 2.6vw 0 2.2vw;
    gap: 1vw;
}

/* the mirrored rule, drawn only when the real dash is switched on */
.ib--style-10 .ib__eyebrow:has(.ib__eyebrow-dash)::after {
    content: "";
    flex: 0 0 auto;
    width: var(--ib-dash-w, 1.75vw);
    height: max(2px, .14vw);
    background: var(--ib-dash, var(--ib-accent));
}

.ib--style-10 .ib__eyebrow-dash {
    background: var(--ib-dash, var(--ib-accent));
}

.ib--style-10 .ib__eyebrow-text {
    font-size: max(11px, 1.1vw);
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--ib-accent);
}

.ib--style-10 .ib__quote {
    max-width: 62vw;
    margin-top: 0;
    font-size: max(20px, 2.8vw);
    line-height: 1.28;
    letter-spacing: -.01em;
}

.ib--style-10 .ib__grid {
    column-gap: 3.4vw;
    row-gap: 3.6vw;
}

.ib--style-10 .ib__card {
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
}

/* the ruled texture belongs to the dark cards of Style 1 */
.ib--style-10.ib--texture .ib__card::before {
    display: none;
}

/* a rounded square holding the cream, as in Style 6 */
.ib--style-10 .ib__icon {
    width: max(38px, 3.5vw);
    height: max(38px, 3.5vw);
    margin-bottom: 1.7vw;
    border-radius: .7vw;
}

.ib--style-10 .ib__icon svg {
    width: 48%;
    height: 48%;
}

.ib--style-10 .ib__card-title {
    margin-bottom: .6vw;
    font-size: max(16px, 1.75vw);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.ib--style-10 .ib__card-text {
    font-size: max(13px, 1.25vw);
    line-height: 1.55;
}

.ib--style-10 .ib__card-link {
    margin-top: .8vw;
    color: var(--ib-ink);
}

.ib--style-10 .ib__actions {
    margin-top: 4vw;
}

/* hover colour only — see the note on Style 9 */
.ib--style-10 .ib__btn {
    --pbtn-sweep: #16293a;
    --pbtn-sweep-ink: #fff;
}

/* ====== Style 11 — sand field, roomy white cards, labelled ======
   Style 6 turned inside out and given more air: the sand stays on the section,
   the cards go white and deep, and each one leads with its Label — the gold line
   above the title — so the icon tile, label, title and copy read as four steps
   down the card. The tile keeps the sand, which is why --ib-gold is the tile
   fill here and the label carries its own colour. Set Columns to 2. */
.ib--style-11 .ib {
    --ib-bg: #e9d9b9;
    --ib-ink: #16293a;
    --ib-body: #4b5563;
    --ib-card: #ffffff;
    --ib-card-ink: #16293a;
    --ib-card-body: #5a6880;
    /* the tile fill, not a gold accent, in this skin */
    --ib-gold: #e8d9b8;
    --ib-icon-ink: #16293a;
    --ib-card-label: #c9a464;
    --ib-btn-bg: #16293a;
    --ib-btn-ink: #ffffff;
}

.ib--style-11 .ib__head {
    margin-bottom: 3.6vw;
}

.ib--style-11 .ib__title {
    margin-bottom: 1vw;
    font-size: max(30px, 3.7vw);
}

.ib--style-11 .ib__lead {
    max-width: 33vw;
    font-size: max(14px, 1.2vw);
}

.ib--style-11 .ib__grid {
    gap: 2.1vw;
}

.ib--style-11 .ib__card {
    padding: 3.2vw;
    border-radius: 1.85vw;
    box-shadow: 0 1.1vw 2.4vw rgba(22, 41, 58, .07);
}

/* the ruled texture belongs to the dark cards of Style 1 */
.ib--style-11.ib--texture .ib__card::before {
    display: none;
}

/* a rounded square rather than the circle every other skin uses */
.ib--style-11 .ib__icon {
    width: max(44px, 4.5vw);
    height: max(44px, 4.5vw);
    margin-bottom: 1.75vw;
    border-radius: 1.1vw;
}

.ib--style-11 .ib__icon svg {
    width: 44%;
    height: 44%;
}

.ib--style-11 .ib__card-label {
    margin-bottom: 1.1vw;
    font-size: max(11px, .93vw);
    letter-spacing: .09em;
}

.ib--style-11 .ib__card-title {
    margin-bottom: 2.1vw;
    font-size: max(19px, 1.95vw);
    font-weight: 700;
    line-height: 1.2;
}

.ib--style-11 .ib__card-text {
    font-size: max(13px, 1.16vw);
    line-height: 1.6;
}

.ib--style-11 .ib__card-link {
    color: var(--ib-ink);
}

/* hover colour for the shared sweep — see the note on Style 3 */
.ib--style-11 .ib__btn {
    --pbtn-sweep: #294863;
    --pbtn-sweep-ink: #fff;
}

/* ====== Style 12 — white field, soft grey cards, small gold disc ======
   A centred header over quiet grey cards: a hairline outline, a small gold
   disc and a compact title and paragraph. What sets it apart is the row that
   does not fill — with five boxes in three columns the last two widen to take
   the whole width rather than leaving a hole on the right, so the grid is a
   wrapping flex row here instead of the fixed track list every other skin uses.
   Set Columns to 3.

   The basis is worked out from --ib-cols and the gap below, so the Column Gap
   and Row Gap controls still move the cards apart but the widths are figured
   from --ib-12-gap; change that here if the two need to stay in step. */
.ib--style-12 .ib {
    --ib-bg: #ffffff;
    --ib-ink: #16293a;
    --ib-body: #6b7280;
    --ib-card: #f7f6f3;
    --ib-card-ink: #16293a;
    --ib-card-body: #6b7280;
    --ib-card-border: #edece7;
    --ib-gold: #e8b64a;
    /* white glyph on the gold disc — the default inherits --ib-card, which is
       the near-white card fill here and would leave the disc looking empty */
    --ib-icon-ink: #ffffff;
    --ib-btn-bg: #e8b64a;
    --ib-btn-ink: #16293a;
}

.ib--style-12 .ib__head {
    margin-bottom: 4.6vw;
}

.ib--style-12 .ib__eyebrow {
    gap: .9vw;
    margin-bottom: 1.1vw;
}

.ib--style-12 .ib__eyebrow-text {
    font-size: max(11px, .95vw);
    font-weight: 600;
    letter-spacing: .16em;
}

.ib--style-12 .ib__title {
    max-width: 46vw;
    margin-bottom: 1vw;
    font-size: max(30px, 3.4vw);
    font-weight: 800;
    line-height: 1.04;
}

.ib--style-12 .ib__lead {
    max-width: 34vw;
    font-size: max(14px, 1.25vw);
    line-height: 1.5;
}

/* the wrapping row: every card takes a third, and a short last row shares out
   what is left between the cards it does have */
.ib--style-12 .ib__grid {
    --ib-12-gap: 2.1vw;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ib-12-gap);
}

/* the .02px comes off the basis so a row that fits exactly cannot be tipped
   over by sub-pixel rounding and drop its last card onto a line of its own */
.ib--style-12 .ib__item {
    flex: 1 1 calc((100% - (var(--ib-cols) - 1) * var(--ib-12-gap)) / var(--ib-cols) - .02px);
    min-width: 0;
}

.ib--style-12 .ib__card {
    padding: 2.1vw;
    border: 1px solid var(--ib-card-border);
    border-radius: .8vw;
}

/* the ruled texture belongs to the dark cards of Style 1 */
.ib--style-12.ib--texture .ib__card::before {
    display: none;
}

.ib--style-12 .ib__icon {
    width: max(34px, 3.1vw);
    height: max(34px, 3.1vw);
    margin-bottom: 1.85vw;
}

.ib--style-12 .ib__icon svg {
    width: 50%;
    height: 50%;
}

.ib--style-12 .ib__card-title {
    margin-bottom: .8vw;
    font-size: max(16px, 1.25vw);
    font-weight: 700;
    line-height: 1.25;
}

.ib--style-12 .ib__card-text {
    font-size: max(13px, 1.05vw);
    line-height: 1.5;
}

.ib--style-12 .ib__card-link {
    margin-top: .8vw;
    color: var(--ib-ink);
}

.ib--style-12 .ib__actions {
    margin-top: 4.4vw;
}

/* hover colour only — see the note on Style 9 */
.ib--style-12 .ib__btn {
    --pbtn-sweep: #16293a;
    --pbtn-sweep-ink: #fff;
}

/* Entrance — held at frame one by assets/css/reveal.css */
@media (prefers-reduced-motion: no-preference) {

    .ib--animated .ib__eyebrow,
    .ib--animated .ib__title,
    .ib--animated .ib__lead,
    .ib--animated .ib__quote,
    .ib--animated .ib__item {
        animation: ib-up .7s cubic-bezier(.22, 1, .36, 1) both;
    }

    .ib--animated .ib__eyebrow { animation-delay: .08s; }
    .ib--animated .ib__title { animation-delay: .16s; }
    .ib--animated .ib__lead { animation-delay: .24s; }
    .ib--animated .ib__quote { animation-delay: .28s; }
    .ib--animated .ib__item:nth-child(1) { animation-delay: .32s; }
    .ib--animated .ib__item:nth-child(2) { animation-delay: .40s; }
    .ib--animated .ib__item:nth-child(3) { animation-delay: .48s; }
    .ib--animated .ib__item:nth-child(4) { animation-delay: .56s; }
    .ib--animated .ib__item:nth-child(n+5) { animation-delay: .64s; }
}

@keyframes ib-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {

    .ib {
        --ib-cols: var(--ib-cols-tab, 2);
        padding: 56px 32px;
    }

    .ib__head {
        margin-bottom: 40px;
    }

    .ib__eyebrow {
        gap: 10px;
        margin-bottom: 14px;
    }

    .ib__eyebrow-dash {
        width: 24px;
    }

    .ib__eyebrow-text {
        font-size: 13px;
    }

    .ib__title {
        max-width: none;
        margin-bottom: 14px;
        font-size: 40px;
    }

    .ib__lead {
        max-width: 52ch;
        font-size: 17px;
    }

    .ib__quote {
        max-width: 56ch;
        margin-top: 26px;
        font-size: 26px;
    }

    .ib__grid {
        gap: 20px;
    }

    .ib__card {
        padding: 28px;
        border-radius: 16px;
    }

    .ib--texture .ib__card::before {
        background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 22px);
    }

    .ib__icon {
        width: 48px;
        height: 48px;
        margin-bottom: 22px;
    }

    .ib__icon i {
        font-size: 20px;
    }

    .ib__card-label {
        margin-bottom: 8px;
        font-size: 12px;
    }

    .ib__card-title {
        margin-bottom: 10px;
        font-size: 21px;
    }

    .ib__card-text {
        font-size: 16px;
    }

    .ib__card-link {
        margin-top: 14px;
        font-size: 15px;
    }

    .ib--style-2 .ib__card {
        padding: 22px;
        border-radius: 14px;
    }

    .ib--style-2 .ib__card-title {
        font-size: 20px;
    }

    .ib--style-2 .ib__card-text {
        font-size: 15px;
    }

    .ib--style-3 .ib__grid {
        gap: 20px;
    }

    .ib--style-3 .ib__card {
        padding: 26px;
        border-radius: 14px;
    }

    .ib--style-3 .ib__icon {
        width: 46px;
        height: 46px;
        margin-bottom: 20px;
    }

    .ib--style-3 .ib__card-title {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .ib--style-3 .ib__card-text {
        font-size: 15px;
    }

    /* the split stacks; order keeps the button under the header, not the cards */
    .ib--style-4 .ib,
    .ib--style-5 .ib {
        display: flex;
        flex-direction: column;
        /* the grid's start alignment would shrink these to content width */
        align-items: stretch;
    }

    .ib--style-4 .ib__head,
    .ib--style-5 .ib__head {
        order: 1;
    }

    .ib--style-4 .ib__actions,
    .ib--style-5 .ib__actions {
        order: 2;
        margin-top: 28px;
    }

    .ib--style-4 .ib__grid,
    .ib--style-5 .ib__grid {
        order: 3;
        gap: 20px;
        margin-top: 40px;
    }

    .ib--style-5 .ib__card {
        column-gap: 14px;
        row-gap: 4px;
        padding: 18px 20px;
        border-radius: 12px;
    }

    .ib--style-5 .ib__icon {
        width: 42px;
        height: 42px;
    }

    .ib--style-5 .ib__card-title {
        font-size: 18px;
    }

    .ib--style-5 .ib__card-text {
        font-size: 15px;
    }

    .ib--style-4 .ib__card {
        padding: 24px;
        border-radius: 14px;
    }

    .ib--style-4 .ib__card-title {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .ib--style-4 .ib__card-text {
        font-size: 15px;
    }

    .ib--style-6 .ib__grid {
        gap: 20px;
    }

    .ib--style-6 .ib__card {
        padding: 26px;
        border-radius: 16px;
    }

    .ib--style-6 .ib__icon {
        width: 46px;
        height: 46px;
        margin-bottom: 20px;
        border-radius: 14px;
    }

    .ib--style-6 .ib__card-title {
        margin-bottom: 8px;
        font-size: 21px;
    }

    .ib--style-6 .ib__card-text {
        font-size: 15px;
    }

    .ib--style-7 .ib__grid {
        gap: 18px;
    }

    .ib--style-7 .ib__card {
        padding: 24px;
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(22, 41, 58, .08);
    }

    .ib--style-7 .ib__icon {
        width: 44px;
        height: 44px;
        margin-bottom: 18px;
    }

    .ib--style-7 .ib__card-title {
        margin-bottom: 12px;
        padding-bottom: 10px;
        font-size: 19px;
    }

    .ib--style-7 .ib__card-text {
        font-size: 15px;
    }

    .ib--style-8 .ib__grid {
        column-gap: 32px;
        row-gap: 30px;
    }

    .ib--style-8 .ib__card {
        column-gap: 10px;
        row-gap: 8px;
        padding: 0;
    }

    .ib--style-8 .ib__icon {
        width: 24px;
        height: 24px;
        margin-bottom: 0;
    }

    .ib--style-8 .ib__card-title {
        margin-bottom: 0;
        font-size: 19px;
    }

    .ib--style-8 .ib__card-text {
        font-size: 15px;
    }

    .ib--style-8 .ib__card-link {
        margin-top: 6px;
    }

    .ib--style-9 .ib__head {
        margin-bottom: 44px;
    }

    .ib--style-9 .ib__grid {
        column-gap: 26px;
        row-gap: 32px;
    }

    .ib--style-9 .ib__card {
        column-gap: 18px;
        padding: 0;
    }

    .ib--style-9 .ib__icon {
        width: 56px;
        height: 56px;
        margin-bottom: 0;
    }

    .ib--style-9 .ib__card-title {
        margin-bottom: 5px;
        font-size: 20px;
    }

    .ib--style-9 .ib__card-text {
        font-size: 15px;
    }

    .ib--style-9 .ib__card-link {
        margin-top: 8px;
    }

    .ib--style-9 .ib__actions {
        margin-top: 36px;
    }

    .ib--style-10 .ib__head {
        margin-bottom: 44px;
    }

    .ib--style-10 .ib__title {
        margin-bottom: 12px;
        font-size: 38px;
    }

    .ib--style-10 .ib__lead {
        max-width: 52ch;
        font-size: 17px;
    }

    .ib--style-10 .ib__eyebrow {
        gap: 12px;
        margin: 28px 0 24px;
    }

    .ib--style-10 .ib__eyebrow:has(.ib__eyebrow-dash)::after {
        width: var(--ib-dash-w, 24px);
    }

    .ib--style-10 .ib__quote {
        max-width: 56ch;
        font-size: 28px;
    }

    .ib--style-10 .ib__grid {
        column-gap: 30px;
        row-gap: 34px;
    }

    .ib--style-10 .ib__card {
        padding: 0;
    }

    .ib--style-10 .ib__icon {
        width: 46px;
        height: 46px;
        margin-bottom: 20px;
        border-radius: 10px;
    }

    .ib--style-10 .ib__card-title {
        margin-bottom: 8px;
        font-size: 20px;
    }

    .ib--style-10 .ib__card-text {
        font-size: 15px;
    }

    .ib--style-10 .ib__card-link {
        margin-top: 10px;
    }

    .ib--style-10 .ib__actions {
        margin-top: 36px;
    }

    .ib--style-11 .ib__head {
        margin-bottom: 36px;
    }

    .ib--style-11 .ib__title {
        margin-bottom: 12px;
        font-size: 38px;
    }

    .ib--style-11 .ib__lead {
        max-width: 52ch;
        font-size: 17px;
    }

    .ib--style-11 .ib__grid {
        gap: 22px;
    }

    .ib--style-11 .ib__card {
        padding: 32px;
        border-radius: 22px;
        box-shadow: 0 14px 30px rgba(22, 41, 58, .07);
    }

    .ib--style-11 .ib__icon {
        width: 56px;
        height: 56px;
        margin-bottom: 22px;
        border-radius: 14px;
    }

    .ib--style-11 .ib__card-label {
        margin-bottom: 12px;
    }

    .ib--style-11 .ib__card-title {
        margin-bottom: 20px;
        font-size: 24px;
    }

    .ib--style-11 .ib__card-text {
        font-size: 16px;
    }

    .ib--style-12 .ib__head {
        margin-bottom: 40px;
    }

    .ib--style-12 .ib__eyebrow {
        gap: 10px;
        margin-bottom: 12px;
    }

    .ib--style-12 .ib__title {
        max-width: none;
        margin-bottom: 12px;
        font-size: 38px;
    }

    .ib--style-12 .ib__lead {
        max-width: 52ch;
        font-size: 17px;
    }

    .ib--style-12 .ib__grid {
        --ib-12-gap: 20px;
    }

    .ib--style-12 .ib__card {
        padding: 26px;
        border-radius: 12px;
    }

    .ib--style-12 .ib__icon {
        width: 46px;
        height: 46px;
        margin-bottom: 20px;
    }

    .ib--style-12 .ib__card-title {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .ib--style-12 .ib__card-text {
        font-size: 15px;
    }

    .ib--style-12 .ib__card-link {
        margin-top: 10px;
    }

    .ib--style-12 .ib__actions {
        margin-top: 36px;
    }

    .ib__actions {
        margin-top: 32px;
    }

    .ib__btn {
        gap: 8px;
        padding: 16px 26px;
        border-radius: 8px;
        font-size: 17px;
    }
}

@media (max-width: 600px) {

    .ib {
        --ib-cols: var(--ib-cols-mob, 1);
        padding: 40px 20px;
    }

    .ib__head {
        margin-bottom: 32px;
    }

    .ib__title {
        font-size: 30px;
    }

    .ib__lead {
        font-size: 16px;
    }

    .ib__quote {
        margin-top: 20px;
        font-size: 21px;
    }

    .ib__grid {
        gap: 16px;
    }

    .ib__card {
        padding: 22px;
    }

    .ib__icon {
        width: 44px;
        height: 44px;
        margin-bottom: 18px;
    }

    .ib__card-title {
        font-size: 19px;
    }

    .ib--style-2 .ib__card {
        padding: 18px;
    }

    .ib--style-3 .ib__card {
        padding: 22px;
    }

    .ib--style-3 .ib__icon {
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
    }

    .ib--style-3 .ib__card-title {
        font-size: 17px;
    }

    .ib--style-4 .ib__card {
        padding: 20px;
    }

    .ib--style-4 .ib__grid,
    .ib--style-5 .ib__grid {
        gap: 16px;
        margin-top: 32px;
    }

    .ib--style-4 .ib__card-title {
        font-size: 18px;
    }

    .ib--style-5 .ib__card {
        column-gap: 12px;
        padding: 16px;
    }

    .ib--style-5 .ib__icon {
        width: 38px;
        height: 38px;
    }

    .ib--style-5 .ib__card-title {
        font-size: 17px;
    }

    .ib--style-6 .ib__card {
        padding: 22px;
    }

    .ib--style-6 .ib__icon {
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
        border-radius: 12px;
    }

    .ib--style-6 .ib__card-title {
        font-size: 19px;
    }

    .ib--style-7 .ib__card {
        padding: 20px;
    }

    .ib--style-7 .ib__icon {
        width: 40px;
        height: 40px;
        margin-bottom: 16px;
    }

    .ib--style-7 .ib__card-title {
        margin-bottom: 10px;
        padding-bottom: 9px;
        font-size: 18px;
    }

    .ib--style-8 .ib__grid {
        row-gap: 26px;
    }

    .ib--style-8 .ib__card {
        padding: 0;
    }

    .ib--style-8 .ib__icon {
        width: 22px;
        height: 22px;
        margin-bottom: 0;
    }

    .ib--style-8 .ib__card-title {
        font-size: 18px;
    }

    .ib--style-9 .ib__grid {
        row-gap: 26px;
    }

    .ib--style-9 .ib__card {
        column-gap: 16px;
        padding: 0;
    }

    .ib--style-9 .ib__icon {
        width: 50px;
        height: 50px;
        margin-bottom: 0;
    }

    .ib--style-9 .ib__card-title {
        font-size: 19px;
    }

    .ib--style-10 .ib__title {
        font-size: 30px;
    }

    .ib--style-10 .ib__eyebrow {
        margin: 22px 0 20px;
    }

    .ib--style-10 .ib__quote {
        font-size: 22px;
    }

    .ib--style-10 .ib__grid {
        row-gap: 28px;
    }

    .ib--style-10 .ib__card {
        padding: 0;
    }

    .ib--style-10 .ib__icon {
        width: 42px;
        height: 42px;
        margin-bottom: 16px;
        border-radius: 9px;
    }

    .ib--style-10 .ib__card-title {
        font-size: 19px;
    }

    .ib--style-11 .ib__card {
        padding: 24px;
        border-radius: 18px;
    }

    .ib--style-11 .ib__icon {
        width: 50px;
        height: 50px;
        margin-bottom: 18px;
        border-radius: 12px;
    }

    .ib--style-11 .ib__card-label {
        margin-bottom: 10px;
    }

    .ib--style-11 .ib__card-title {
        margin-bottom: 16px;
        font-size: 21px;
    }

    .ib--style-12 .ib__grid {
        --ib-12-gap: 16px;
    }

    .ib--style-12 .ib__card {
        padding: 22px;
    }

    .ib--style-12 .ib__icon {
        width: 42px;
        height: 42px;
        margin-bottom: 16px;
    }

    .ib--style-12 .ib__card-title {
        font-size: 19px;
    }

    .ib__actions {
        display: block;
    }

    .ib__btn {
        width: 100%;
        padding: 15px 22px;
        font-size: 16px;
    }
}