:root {
  --primary-color: #00C19D;
  --green: #00C19D;
  --primary-color-lighter: #00DBB3;
  --green-lighter: #00DBB3;
  --primary-color-darker: #00846B;
  --green-darker: #00846B;
  --secondary-color: #8DD311;
  --grass: #8DD311;
  --secondary-color-lighter: #9DEA13;
  --grass-lighter: #9DEA13;
  --secondary-color-darker: #5FAD0C;
  --grass-darker: #5FAD0C;
  --tertiary-color: #FFFFFF;
  --light: #FFFFFF;
  --tertiary-color-lighter: #F8F8F8;
  --light-lighter: #F8F8F8;
  --tertiary-color-darker: #CBCBCB;
  --light-darker: #CBCBCB;
  --quaternary-color: #134F5C;
  --blue: #134F5C;
  --quaternary-color-lighter: #1B7184;
  --blue-lighter: #1B7184;
  --quaternary-color-darker: #10434E;
  --blue-darker: #10434E;
}/* ==========================================================================
   SOFTSOURCE VBRIDGE - CUSTOM STYLE OVERRIDES
   Paste into Settings > Theme settings > Custom Style
   Load order: bundle.css > app.css > assets-theme-styles.css > this file
   This file loads last, so it wins on equal specificity. !important is used only where the theme itself uses !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   The theme compiles Theme settings colours into literals on utility classes,
   it does not emit custom properties. These aliases mirror those values so
   custom blocks can reference them. Update the CMS, then update here.
   Names are CASE SENSITIVE, always lower case.
   -------------------------------------------------------------------------- */
:root { --primary-color: #00C19D; --primary-color-lighter: #00DBB3; --primary-color-darker: #00846B; --secondary-color: #8DD311; --secondary-color-lighter: #9DEA13; --secondary-color-darker: #5FAD0C; --tertiary-color: #FFFFFF; --tertiary-color-lighter: #F8F8F8; --tertiary-color-darker: #CBCBCB; --quaternary-color: #134F5C; --quaternary-color-lighter: #1B7184; --quaternary-color-darker: #10434E; }
:root { --link-color: #004B42; --link-hover: #00DBB3; --link-active: #00C19D; --font-color: #080808; }
:root { --ink: var(--font-color); --ink-muted: rgba(8,8,8,.68); --ink-soft: rgba(8,8,8,.52); --rule: rgba(8,8,8,.10);}
:root { --radius: 4px; --radius-pill: 62rem; --shadow-sm: 0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03); --shadow-md: 0 8px 32px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04); --ease: cubic-bezier(.4,0,.2,1); --container-max: 86vw; --hero-h: 85vh; }

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html { font-size: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; }
@media (max-width: 1200px) { html { font-size: 96.875%; } }
@media (max-width: 992px) { html { font-size: 93.75%; } }
@media (max-width: 768px) { html { font-size: 90.625%; } }
@media (max-width: 576px) { html { font-size: 87.5%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --------------------------------------------------------------------------
   3. LAYOUT AND CONTAINERS
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: var(--container-max); } }
@media (min-width: 1000px) { .container .block-content .main-content { display: block; position: relative; width: var(--container-max); max-width: 90vw; margin-left: calc(50% - 40vw); margin-right: calc(50% - 40vw); padding: 0; overflow: hidden; } }
.block-content > :last-child { margin-bottom: 0; padding-bottom: 1.2rem; }
@media (min-width: 1000px) { .block-content > :last-child { padding-bottom: 4rem; } }
.row { --bs-gutter-x: 2.5rem; }
.table { --bs-table-bg: transparent; }
.svb-fullwidth { display: block; position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   4. HEADER AND MEGA NAV
   Class names match the custom JS: body.svb-mega-is-open and
   .svb-mega__grid--cols-N. Do not rename without updating the JS.
   -------------------------------------------------------------------------- */
#mainHeader { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; }
#mainHeader, #mainHeader .container, #mainHeader .c-header__main { transition: background-color .25s ease; }
.c-header__logo-image { filter: drop-shadow(0 .5rem .45rem rgba(0,0,0,.1)); }
.c-menu__link-icon__wrapper { display: none; }
.c-menu__ul__ul { display: none !important; }
.headroom--not-top .c-menu__link, .headroom--not-top .js-menu__link, .headroom--not-top .c-menu span, .headroom--not-top .c-menu a { color: #000; }
.headroom--not-top .c-menu__link:hover, .headroom--not-top .js-menu__link:hover { color: var(--primary-color-lighter); }
.c-menu__list:hover .c-menu__selected--background-box, .c-menu__list:hover .c-menu__selected--underline, .c-menu__list:hover .c-menu__selected { color: var(--primary-color); }
.c-childmenu__link:focus, .c-childmenu__link:hover { color: var(--primary-color); }
@media (min-width: 992px) { .c-menu__list:hover .c-menu__link, .c-menu__list:hover .c-menu__selected--background-box, .c-menu__list:hover .c-menu__selected--underline, .c-menu__list:hover .c-menu__link .c-menu__link-icon { color: var(--primary-color); } }
@media (max-width: 992px) { .c-menu__list .c-childmenu { border-left: 4px solid var(--secondary-color); } }

/* Suppress theme dropdowns on mega nav triggers only */
.svb-mega-trigger ul, .svb-mega-trigger .submenu, .svb-mega-trigger .dropdown, .svb-mega-trigger [class*="sub"], .svb-mega-trigger [class*="drop"] { display: none !important; }

/* Panel */
.svb-mega { position: fixed; left: 0; right: 0; top: var(--svb-header-h, 80px); z-index: 9998; padding: 4rem 0 5rem; background-color: var(--tertiary-color); box-shadow: 0 .45rem .45rem rgba(0,0,0,.04); transform: translateY(-10px); opacity: 0; visibility: hidden; transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s; }
.svb-mega--open { transform: translateY(0); opacity: 1; visibility: visible; transition: transform .25s ease, opacity .2s ease, visibility 0s linear 0s; }
.svb-mega__inner { max-width: 80vw; margin: 0 auto; padding: 2rem 1.5rem 2.5rem; }
.svb-mega__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(4, 1fr); }
.svb-mega__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.svb-mega__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.svb-mega__grid--cols-4, .svb-mega__grid--cols-5, .svb-mega__grid--cols-6, .svb-mega__grid--cols-7, .svb-mega__grid--cols-8 { grid-template-columns: repeat(4, 1fr); }
.svb-mega__col { display: flex; flex-direction: column; }
.svb-mega__coe { font-size: .8rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4rem; }
.svb-mega__brand { font-size: 1.2rem; font-weight: 600; color: var(--primary-color); text-decoration: none; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1.5px solid var(--rule); transition: color .15s ease; }
.svb-mega__brand:hover { color: var(--primary-color-darker); text-decoration: none; }
.svb-mega__links { list-style: none; padding: 0; margin: 0; }
.svb-mega__links li { margin-bottom: .5rem; }
.svb-mega__links a { font-size: .85rem; color: var(--ink); text-decoration: none; line-height: 1.4; transition: color .15s ease; }
.svb-mega__links a:hover { color: var(--primary-color); text-decoration: none; }
.svb-mega__col--active .svb-mega__brand { color: var(--primary-color); }

/* Header state while a panel is open */
body.svb-mega-is-open .c-header.headroom { background-color: var(--tertiary-color); }
body.svb-mega-is-open .c-header .c-menu__link, body.svb-mega-is-open .c-header .c-menu__list > a, body.svb-mega-is-open .c-header .c-menu__list span { color: #000; }
body.svb-mega-is-open .c-header .svb-mega-trigger:hover .c-menu__link, body.svb-mega-is-open .c-header .svb-mega-trigger--open .c-menu__link { color: var(--primary-color); }
body.svb-mega-is-open .d-none .c-header__scrolling-logo { display: inline-block; }

@media (max-width: 900px) {
.svb-mega { position: static; transform: none; opacity: 1; visibility: hidden; height: 0; overflow: hidden; padding: 0; box-shadow: none; transition: height .3s ease, visibility 0s linear .3s; }
.svb-mega--open { visibility: visible; height: auto; min-height: 80vh; transition: height .3s ease, visibility 0s linear 0s; }
.svb-mega__inner { max-width: 100%; padding: 1.25rem 1rem; }
.svb-mega__grid, .svb-mega__grid--cols-2, .svb-mega__grid--cols-3, .svb-mega__grid--cols-4, .svb-mega__grid--cols-5, .svb-mega__grid--cols-6, .svb-mega__grid--cols-7, .svb-mega__grid--cols-8 { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .svb-mega { transition: opacity .01ms, visibility 0s; } }

/* --------------------------------------------------------------------------
   5. EMBED BLOCK SIZING
   The .b-iframe block is used two ways on this site:
     A) True media iframe, YouTube. Needs a locked aspect ratio.
     B) Injected HTML: timeline, svb-tco, msr-guide, phc widgets, svbTool.
        Must size to its own content, never to a ratio.
   A is the default. B applies automatically when the block holds no media.
   -------------------------------------------------------------------------- */
.embed-responsive { display: block; position: relative; width: 100%; padding: 0; overflow: hidden; }
.embed-responsive::before { content: ""; display: block; padding-top: 56.25%; }
.embed-responsive-21by9::before { padding-top: 42.857143%; }
.embed-responsive-16by9::before { padding-top: 56.25%; }
.embed-responsive-4by3::before { padding-top: 75%; }
.embed-responsive-1by1::before { padding-top: 100%; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Content sizing when the block holds HTML rather than media */
.embed-responsive:not(:has(iframe)):not(:has(video)):not(:has(embed)):not(:has(object)) { height: auto; min-height: 0; aspect-ratio: auto; overflow: visible; }
.embed-responsive:not(:has(iframe)):not(:has(video)):not(:has(embed)):not(:has(object))::before { content: none; }

/* Fallback for Ratio: None, and for browsers without :has support */
.iframe-block--no-ratio, .b-iframe__item { overflow: visible; }
.iframe-block--no-ratio::before, .iframe-block--no-ratio .embed-responsive::before { content: none; }
.iframe-block--no-ratio .embed-responsive { height: auto; overflow: visible; }

/* svb-fullwidth is a layout breakout only, it must never impose a ratio */
.svb-fullwidth::before { content: none; }
.svb-fullwidth { height: auto; padding-top: 0; }

/* Contained video, fills the content column */
.b-iframe .embed-responsive { position: relative; width: 100%; }
.b-iframe .embed-responsive > iframe { display: block; width: 100%; border: 0; }

/* FULL WIDTH VIDEO
   Wrap the iframe in <div class="svb-fullwidth svb-video"> and set the block Ratio dropdown to Choose Ratio (None).
   The ratio is supplied here, so a block level ratio would double up. */
.svb-video { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0; overflow: hidden; }
.svb-video::before { content: ""; display: block; padding-top: 56.25%; }
.svb-video > iframe, .svb-video .embed-responsive, .svb-video .embed-responsive > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.svb-video .embed-responsive::before { content: none; }
@media (min-width: 1600px) { .svb-video { width: min(100vw, 1600px); max-width: 1600px; margin-left: auto; margin-right: auto; } }

/* --------------------------------------------------------------------------
   6. HERO IMAGES
   -------------------------------------------------------------------------- */
.c-basic-hero__main { min-height: var(--hero-h); }
.c-basic-hero__main.u-background-cover > div.h-100 { z-index: 9; }
.c-basic-hero__content-holder { max-width: 100vw; }
.c-basic-hero__content { padding: 2rem 20vw .6rem 0; color: #fff; font-size: 1.1rem; font-weight: 400; }
.c-basic-hero__t-cell { height: calc(var(--hero-h) - 90px); }
.c-basic-hero__t-cell .row.align-items-center.justify-content-between { height: var(--hero-h); padding-top: 10%; }
.c-hero { height: var(--hero-h); }
.c-header__spacer + div .c-hero__t-cell { height: var(--hero-h); }
.c-hero__t-cell { height: 60vh; padding-top: 6rem; }
.c-hero:before { background: rgba(0,0,0,.3); }
.c-hero__title { max-width: 100%; margin-right: 15rem; }
.c-hero__date { display: none; }
.with-overlay .container, .with-overlay .container-fluid, .with-overlay .container-sm, .with-overlay .container-md, .with-overlay .container-lg, .with-overlay .container-xl, .with-overlay .container-xxl { margin-top: 2rem; }
@media (min-width: 992px) { .c-basic-hero__content-holder .col-lg-5 { flex: 0 0 auto; width: 100%; max-width: 100%; } }
@media (max-width: 992px) { .c-basic-hero__content { padding-right: 6vw; } .c-basic-hero__t-cell { padding-top: 10%; } .b-wysiwyg .col-lg-6:first-child { margin-bottom: 2rem; } }

/* --------------------------------------------------------------------------
   7. BLOCKS
   -------------------------------------------------------------------------- */

/* Column */
.b-column .col-md { margin-right: 1.3rem; }
.b-column__icon, .small-icon .b-column__icon { min-width: 2.6rem; max-width: 12rem; }
.b-column__title, .b-column__content, .b-column__button { padding-left: 0 !important; }
.b-column__content .block-content .main-content .js-long-toggle { display: block; }
@media (min-width: 992px) { .col-lg-8 { flex: 0 0 auto; width: 100%; } }
@media (max-width: 768px) { .b-column .col-md { padding-bottom: 3rem; padding-right: .8rem; } .offset-lg-1 { margin-left: 0; } .col-md-8 { width: 80%; } }

/* Tabset */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--primary-color); }
.b-tabset .nav-item { flex: 1; min-width: 0; max-width: none; margin: 0 !important; min-height: 2rem; padding: 10px 0 5px !important; align-content: start; }
.b-tabset .nav-item:first-child { margin-left: 0 !important; }
.b-tabset .nav-tabs h3 { font-size: 1rem; font-weight: 500; padding: 1rem; margin: 0; line-height: 1.2; }
.b-tabset .nav-link, .b-tabset .nav-tabs { border-radius: 0; color: #000; text-align: center; overflow: hidden; }
.b-tabset .nav-tabs .nav-link { min-height: 2rem; height: auto; display: flex; align-items: stretch; justify-content: center; transition: transform .15s ease, background-color .15s ease; }
.b-tabset .nav-tabs .nav-link:hover { background-color: rgba(0,193,157,.32); transform: scale(1.1); }
.b-tabset .nav-tabs .nav-link.active { background: var(--tertiary-color); transform: scale(1.06); }
.b-tabset .nav-tabs .nav-link .pt-4 { min-height: 140px; height: auto; display: flex; align-items: stretch; justify-content: center; }
.b-tabset .tab-pane { background: var(--tertiary-color); border-top: .1rem solid var(--primary-color); }
@media (max-width: 992px) { .b-tabset .nav-tabs h3 { line-height: 1; } .b-tabset .nav-tabs .nav-link { min-height: 120px; } }

/* FAQ */
.b-faq .col-md.order-md-1 { min-width: 100%; }
@media (min-width: 992px) { .b-faq .col-md.order-md-1 { min-width: 90%; } }
.b-faq__item { padding-top: 0 !important; padding-bottom: 0 !important; }
.b-faq__item-main { border-radius: 0px; border-top: 1px solid #000; box-shadow: none; }
.b-faq__item:last-child .b-faq__item-main { border-bottom: 1px solid #000; }
.b-faq__title_holder { background-color: transparent !important; position: relative; padding: 15px 5px !important; }
.b-faq__content { background: transparent; padding: 0 !important; }
.b-faq__content .block-content { padding: 10px 4rem 20px !important; }
.b-faq__icon { display: inline-block; width: 32px; height: 32px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23005052'><path d='M5.975 17.504l14.287.001-6.367 6.366L16.021 26l10.004-10.003L16.029 6l-2.128 2.129 6.367 6.366H5.977z'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform .25s ease; }
.b-faq__icon > svg { display: none; }
.b-faq__title_holder.showing-item .b-faq__icon { transform: rotate(45deg) !important; }
.showing-item { color: var(--primary-color-darker) !important; }
@media (max-width: 768px) { .b-faq__content .block-content { padding: 10px 1rem 20px !important; } }

/* CTA */
.b-cta__content { max-width: 100vw; }
.b-cta__content .b-cta__content--padding .main-content { max-width: 100vw; margin-bottom: 2rem; text-align: left; }
.b-cta__buttons { justify-content: flex-start; }
@media (max-width: 1700px) { .b-cta .main-content { margin-bottom: 2rem; text-align: left; } }

/* Tile */
.b-tile { padding-bottom: 60px; }
.b-tile__title { text-align: left; }
.b-tile .slick-track { padding-top: 1rem; }
.b-tile .slick-slide { padding: 1rem; }
.b-tile .slick-slide .b-tile__item-wrapper { padding-top: 0 !important; }
.b-tile .slick-slide .pb-3.px-2.d-flex.flex-fill { padding-left: 0 !important; padding-right: 0 !important; }
.b-tile__item-wrapper { transition: transform 150ms ease-in-out; }
.b-tile a:hover .b-tile__item-wrapper { transform: scale(1.05); }
.b-tile__img { border-radius: 0; box-shadow: none; object-fit: contain; width: 100%; height: auto; max-width: 100%; }
.b-tile__item-wrapper img { object-fit: contain; width: auto; height: auto; max-width: 100%; max-height: 160px; }
.b-tile__item-wrapper.col, .b-tile .d-flex.flex-fill { display: flex; align-items: center; justify-content: center; overflow: visible; }

/* Partners */
.b-partners .slick-slide .mx-3.pb-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.b-partners .slick-slide .b-partners__item-wrapper { padding-top: 2rem !important; padding-bottom: 2rem !important; }

/* Gallery */
.b-gallery__slider { overflow-x: hidden; }
.b-gallery__slider-image { overflow: hidden; border-radius: var(--radius); margin-top: 10px; margin-bottom: 15px; }
.b-gallery__slider-lightbox:before { overflow: hidden; border-radius: var(--radius); }

/* Spotify embed */
.svb-spotify-embed { background: var(--tertiary-color-lighter); padding: 24px; border-radius: .5rem; width: 100%; box-sizing: border-box; }
.svb-spotify-embed iframe { display: block; width: 100%; border: 0; }

/* Testimonials */
.b-testimonials__message { letter-spacing: inherit; font-size: 1rem; line-height: 1.4; }
.b-testimonials__name { font-size: 2rem; font-weight: 600; }
.b-testimonials__position { font-size: 1.2rem; font-weight: 600; text-transform: none; padding-top: 1rem; }
.b-testimonials-simple__author-name { font-size: 2.4rem; font-weight: 600; color: #000; }
.b-testimonials-simple__author-company { color: #000; }
.b-testimonials-simple__content { padding: 1.3rem; background-color: var(--tertiary-color); border-radius: 0; position: relative; margin-bottom: 3rem; }
.b-testimonials-simple__content:after { border-color: var(--tertiary-color) transparent transparent; border-width: 20px 20px 0 0; left: 0; transform: none !important; }

/* Icon, rule, buttons, shadows */
.b-icon__icon-wrapper { padding: 1.9rem 1.9rem 1.9rem 0; }
.b-horizontal-rule { margin-top: 0 !important; margin-bottom: 0 !important; color: #000; }
.block-button { padding-top: 1.3rem; }
.c-button.u-box-shadow { box-shadow: none; }
.b-wysiwyg .block-content { padding-right: 10vw; }
.b-wysiwyg img, .img-shadow .b-column img { border-radius: 0; box-shadow: none; }
.u-box-shadow, .u-box-shadow--size-small { box-shadow: none; }

/* --------------------------------------------------------------------------
   8. BLOG AND ARTICLES
   -------------------------------------------------------------------------- */
.c-blog-article { padding-top: 0 !important; }
.c-blog-article__frame.container { padding: 0 !important; }
.c-blog-article__recent .block-title { text-align: left; }
.c-breadcrumbs__ul { display: none; }
.c-blogs__article { overflow: hidden; padding-top: 10px !important; }
.c-blogs__article-image { border-radius: 0; border: 1px solid var(--tertiary-color); }
.c-blogs__article-info { padding: 20px 1.3rem; text-align: left; background-color: var(--tertiary-color-lighter); border-bottom-left-radius: .2rem; border-bottom-right-radius: .2rem; }
.c-blogs__article-title { padding-top: 4px; color: #000; text-align: left; }
.c-blogs__article-content p { overflow: hidden; font-size: .9rem; }
.b-article__thumbnail { height: 17rem; border-radius: 0; }

/* Blog index width ladder */
.c-blogs .row > .col-12.col-md-8.offset-lg-1 { flex: 0 0 100%; width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px) { .c-blogs .row > .col-12.col-md-8.offset-lg-1 { max-width: 720px; margin-left: auto; margin-right: auto; } }
@media (min-width: 992px) { .c-blogs .row > .col-12.col-md-8.offset-lg-1 { max-width: 960px; } }
@media (min-width: 1200px) { .c-blogs .row > .col-12.col-md-8.offset-lg-1 { max-width: 1140px; } }
@media (min-width: 1400px) { .c-blogs .row > .col-12.col-md-8.offset-lg-1 { max-width: 1320px; } }
@media (min-width: 1920px) { .c-blogs .row > .col-12.col-md-8.offset-lg-1 { max-width: 1600px; } }

/* Article preview cards, reveal on hover */
.b-article__carousel-item, .c-blogs__article { position: relative; aspect-ratio: 18 / 14; overflow: hidden; border-radius: .2rem; background-color: #000; cursor: pointer; isolation: isolate; padding-top: 0 !important; transition: box-shadow 400ms ease, transform 400ms ease; }
.b-article__carousel-item .c-blogs__article-image { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; background-position: center; background-repeat: no-repeat; background-size: cover; transform: scale(1); transition: transform 400ms ease, filter 400ms ease; }
.b-article__carousel-item::after { content: ""; position: absolute; inset: 0; z-index: 2; background-color: rgba(0,0,0,.6); }
.b-article__carousel-item .c-blogs__article-info { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; text-align: left; border-radius: inherit; background-color: transparent; }
.b-article__carousel-item .c-blogs__article-heading { position: relative; z-index: 4; margin: 0; padding: 0; }
.b-article__carousel-item .c-blogs__article-title { display: block; color: var(--tertiary-color) !important; font-size: clamp(1.2rem, 2vw, 1.75rem) !important; font-weight: 600; line-height: 1.2; text-decoration: none; }
.b-article__carousel-item .c-blogs__article-title:hover { color: var(--primary-color-lighter) !important; text-decoration: none; }
.b-article__carousel-item .c-blogs__article-date { display: none; }
.b-article__carousel-item .c-blogs__article-button { display: none !important; }
.b-article__carousel-item .c-blogs__article-content { max-height: 0; margin: 0; padding: 0 !important; overflow: hidden; color: var(--tertiary-color) !important; font-size: .9rem !important; line-height: 1.4; opacity: 0; transform: translateY(16px); transition: max-height 400ms ease, margin 400ms ease, opacity 300ms ease, transform 400ms ease; }
.b-article__carousel-item .c-blogs__article-content p { margin: 0; padding: 0; color: var(--tertiary-color) !important; }
.b-article__carousel-item:hover .c-blogs__article-image, .b-article__carousel-item:focus-within .c-blogs__article-image, .b-article__carousel-item.svb-card-active .c-blogs__article-image { transform: scale(1.08); filter: saturate(.75); }
.b-article__carousel-item:hover .c-blogs__article-content, .b-article__carousel-item:focus-within .c-blogs__article-content, .b-article__carousel-item.svb-card-active .c-blogs__article-content { max-height: 12rem; margin-top: 12px; opacity: 1; transform: translateY(0); }
.b-article__carousel-item .c-blogs__article-image:focus-visible { outline: 3px solid var(--tertiary-color); outline-offset: -3px; }
.b-article__carousel-item .c-blogs__article-title:focus-visible { outline: 2px solid var(--tertiary-color); outline-offset: 4px; }
@media (max-width: 767px) { .b-article__carousel-item { aspect-ratio: 4 / 4; } .b-article__carousel-item .c-blogs__article-info { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .b-article__carousel-item .c-blogs__article-image, .b-article__carousel-item .c-blogs__article-content { transition: none; } }

/* --------------------------------------------------------------------------
   9. FULL WIDTH IMAGE SLIDER
   -------------------------------------------------------------------------- */
section.b-image-carousel { position: relative; left: 50%; right: 50%; width: 100vw; max-width: 100vw; margin-left: -50vw; margin-right: -50vw; padding: 0; overflow: hidden; }
section.b-image-carousel.default-padding { padding-top: 0 !important; padding-bottom: 0 !important; }
section.b-image-carousel .container { width: 100vw !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
section.b-image-carousel .row, section.b-image-carousel .js-carousel, section.b-image-carousel .js-carousel__holder { margin: 0 !important; padding: 0 !important; }
section.b-image-carousel .row > * { padding: 0 !important; }
section.b-image-carousel .js-carousel__holder { width: 100vw !important; max-width: none !important; }
section.b-image-carousel .c-carousel__buttons, section.b-image-carousel .c-carousel__slider-button, section.b-image-carousel .js-carousel__buttons { display: none !important; }
section.b-image-carousel .slick-list, section.b-image-carousel .b-image-carousel__holder, section.b-image-carousel .row:last-child, section.b-image-carousel > :last-child { margin-bottom: 0 !important; }
section.b-image-carousel > :last-child { padding-bottom: 0 !important; }
.b-image-carousel .js-carousel { position: relative; }
.b-image-carousel .slick-list { position: relative; height: var(--hero-h); padding: 0 !important; overflow: hidden; }
.b-image-carousel .slick-track { display: block !important; width: 100% !important; height: 100% !important; transform: none !important; }
.b-image-carousel .slick-slide { position: absolute !important; top: 0 !important; left: 0 !important; float: none !important; width: 100vw !important; height: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 1; }
.b-image-carousel .slick-slide.slick-active { z-index: 2; }
.b-image-carousel .slick-slide > div { display: block; width: 100%; height: 100%; }
.b-image-carousel__holder { display: block !important; position: relative; width: 100% !important; height: 100%; }
.b-image-carousel__holder-image { display: block !important; position: relative; width: 100%; height: 100% !important; overflow: hidden; opacity: 1 !important; }
.b-image-carousel__holder-image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.1) 100%); }
.b-image-carousel__image { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover; object-position: center; opacity: 1 !important; transform: none !important; animation: none !important; }
.b-image-carousel__content { position: absolute; left: 8%; top: 50%; transform: translateY(-50%); z-index: 3; max-width: 50vw; font-size: clamp(1.6rem, 2vw, 2.8rem); color: #fff; text-align: left; opacity: 0; }
.b-image-carousel .slick-slide.slick-active .b-image-carousel__content { animation: svbCaptionIn .8s cubic-bezier(.22,.61,.36,1) .15s forwards; }
@keyframes svbCaptionIn { from { opacity: 0; transform: translateY(calc(-50% + 16px)); } to { opacity: 1; transform: translateY(-50%); } }
.b-image-carousel .slick-prev { left: 4vw; z-index: 20; }
.b-image-carousel .slick-next { right: 4vw; z-index: 20; }
.b-image-carousel .slick-dots { display: flex !important; position: absolute !important; justify-content: center; gap: .75rem; bottom: 30px; margin: 0 !important; z-index: 20; }
.b-image-carousel .slick-dots li button:before { color: #fff; opacity: .4; font-size: 12px; }
.b-image-carousel .slick-dots li.slick-active button:before { opacity: 1; }
@media (max-width: 992px) { .b-image-carousel .slick-list { height: 70vh; } .b-image-carousel__content { left: 1.2rem; right: 1.2rem; max-width: none; } }
@media (max-width: 576px) { .b-image-carousel .slick-list { height: 45vh; } }
@media (prefers-reduced-motion: reduce) { .b-image-carousel .slick-slide.slick-active .b-image-carousel__content { animation: none; opacity: 1; } }

/* --------------------------------------------------------------------------
   10. TABLE OF CONTENTS, class svb-has-toc
   The left offset is set inline by the JS, so no right calculation here.
   -------------------------------------------------------------------------- */
.svb-generated-toc { position: fixed; top: calc((100vh - 500px) / 2); margin-top: 8rem; width: 320px; min-height: calc(100vh / 2.6); max-height: calc(100vh - 180px); background: #f8f8f8; border-radius: var(--radius); padding: 60px 20px; z-index: 999; overflow-y: auto; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.svb-generated-toc__title { color: #000; font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; padding-left: 4px; }
.svb-generated-toc__nav { display: flex; flex-direction: column; gap: 4px; }
.svb-generated-toc__nav a { display: block; padding: 4px; border-radius: var(--radius); color: #fff; text-decoration: none; font-size: 1rem; font-weight: 500; line-height: 1.6; }
.svb-generated-toc__nav a:hover { background: rgba(255,255,255,.08); }
.svb-generated-toc__nav a.is-active { background: rgba(255,255,255,.16); font-weight: 600; }
@media (max-width: 1600px) { .svb-generated-toc { display: none; } }

/* --------------------------------------------------------------------------
   11. LISTS, FOOTER AND SMALL UTILITIES
   -------------------------------------------------------------------------- */
ul { margin-bottom: 1.6rem; }
ul li { line-height: 1.2rem; }
ul.c-ul { margin-bottom: 1.6rem; }
ul.c-ul li { line-height: 1.4rem; }
ol.alpha li { list-style-type: lower-alpha; }
ol.roman li { list-style-type: lower-roman; }
.main-content ol li ~ li, .main-content ul li ~ li { margin-top: .5rem; }
.c-ul li:before { font-size: 1rem; top: 0; left: 2px; }

.c-footer__info-value { opacity: 1; }
.c-footer__info-value.mt-3 { width: 10rem; }
.c-footer__info-icon { text-align: left; }
.c-footer__text { font-size: .9rem; min-width: 18rem; text-align: left; }
.c-footer__text_social .c-footer__top_spacing { padding-top: 3rem; }
.c-footer-links__link { padding-left: 0 !important; }
.c-footer .c-copyrights a { text-decoration: none; }
.c-footer .c-copyrights a:hover { text-decoration: none; font-weight: 700; }
@media (max-width: 991px) { .c-footer__menu { text-align: left; } .c-footer__menu a:last-child { padding-right: .9rem; } }

.c-socials { justify-content: flex-start; }
.img-fluid.img-thumbnail { height: 13rem; }
.selectric { background: #fafafa; border-radius: .2rem; box-shadow: none !important; }
.slick-slide { padding-right: 2.5rem; text-align: left; }

/* Left align inside content blocks only, not site wide */
.block-content .justify-content-center, .b-column .justify-content-center, .b-cta .justify-content-center { justify-content: flex-start !important; }

/* --------------------------------------------------------------------------
   12. GENERIC CARDS AND BUTTONS
   -------------------------------------------------------------------------- */
.hero-minimal { background-color: var(--tertiary-color); border-bottom: 4px solid var(--primary-color-darker); }
.btn-primary { background-color: var(--primary-color); color: #fff; transition: background-color .2s; }
.btn-primary:hover { background-color: var(--primary-color-darker); }
.btn-lime { background-color: var(--primary-color-darker); color: #fff; font-weight: 600; }
.border-l-lime { border-left: 4px solid var(--primary-color-darker); }
.table th { font-size: 1.1rem; color: var(--primary-color-darker); border-bottom: 2px solid var(--primary-color-darker); }
.hr { border: 2px solid var(--primary-color-darker) !important; margin: .8rem 0; opacity: .9 !important; }
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin: 0 auto; }

.feature-card { background: var(--tertiary-color); border-radius: var(--radius); border: 1.5px solid var(--rule); box-shadow: 0 4px 8px -1px rgba(0,0,0,.05); display: flex; flex-direction: column; height: 100%; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.feature-card:hover { border-color: var(--primary-color); box-shadow: 0 2px 12px rgba(28,37,65,.08); transform: translateY(-1px); }
.feature-header { padding: 1.6rem 2rem 1rem; }
.feature-body { padding: .8rem 2rem 2rem; flex-grow: 1; }
.c-icon { display: block; color: var(--primary-color-darker); font-size: 1.2rem; }

/* Dark surface card, scoped so it does not clash with Bootstrap .card */
.svb-card-dark { background: rgba(255,255,255,.08); min-height: 22rem; border-radius: .5rem; transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
.svb-card-dark:hover { border-color: var(--primary-color); box-shadow: 0 10px 2rem rgba(0,255,255,.1); }
.svb-card-dark h5 { letter-spacing: .05em; font-weight: 700; color: #fff; margin: 0; }
.svb-card-dark p { font-size: .9rem; color: #fff; line-height: 1.6; }

/* --------------------------------------------------------------------------
   13. TIMELINE, used by the About Us Our Journey block
   -------------------------------------------------------------------------- */
.timeline-container { position: relative; max-width: 1000px; margin: 3rem auto; padding: 0 20px 1.3rem; }
.timeline-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--rule); transform: translateX(-50%); z-index: 1; }
.timeline-item { position: relative; width: 100%; margin-bottom: 80px; display: flex; align-items: center; justify-content: flex-start; opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.timeline-item.visible { opacity: 1; transform: translateY(0); }
.timeline-content { width: 42%; padding: 1.9rem; background: var(--tertiary-color); border: 1px solid var(--tertiary-color-lighter); border-radius: var(--radius); box-shadow: 0 10px 25px -5px rgba(0,0,0,.05); position: relative; transition: transform .3s ease, box-shadow .3s ease; }
.timeline-content:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }
.timeline-item:nth-child(even) .timeline-content { margin-left: auto; }
.timeline-item:nth-child(odd) .timeline-content { margin-right: auto; text-align: right; }
.timeline-icon { position: absolute; left: 50%; width: 44px; height: 44px; background: var(--primary-color); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); z-index: 2; box-shadow: 0 0 0 .45rem #fff; font-size: 1.1rem; }
.year-label { display: block; font-weight: 400; font-size: 1rem; color: var(--ink-muted); margin-bottom: .5rem; letter-spacing: -.025em; }
.milestone-title { font-weight: 600; font-size: 1.2rem; color: var(--primary-color-darker); margin-bottom: .8rem; line-height: 1.3; }
.milestone-text { font-size: .9rem; font-weight: 400; color: var(--ink-muted); }
.header-section { text-align: left; padding: 0 20px 1.3rem; }
@media (max-width: 760px) { .timeline-line { left: 20px; transform: none; } .timeline-icon { left: 20px; } .timeline-content { width: calc(100% - 60px); margin-left: 50px !important; margin-right: 0; text-align: left !important; padding: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .timeline-item { opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */
input[type=text], input[type=email], input[type=password] { background: var(--tertiary-color); border: 1px solid var(--tertiary-color-darker); border-radius: 2px; box-shadow: none !important; font-size: .9rem; height: 3rem !important; letter-spacing: 1px; width: 90%; }

/* ==========================================================================
   PAGE SCOPED MODULES
   Each section below serves one or two pages only. If Mint enables a page
   level CSS field, move these out and this file drops by roughly 40 percent
   for every other page on the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15. PHC COMPARISON, Devices on Demand
   -------------------------------------------------------------------------- */
.phc-widget { max-width: 1200px; color: var(--ink); }
.phc-series-selector { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1.75rem; }
.phc-series-btn { font-size: 1rem; font-weight: 600; padding: .6rem 1.3rem; border-radius: var(--radius); border: 1.5px solid var(--rule); background: var(--tertiary-color); color: var(--ink-soft); cursor: pointer; letter-spacing: .01em; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.phc-series-btn:hover { border-color: var(--quaternary-color); color: var(--quaternary-color); }
.phc-series-btn.phc-active { background: var(--quaternary-color); color: #fff; border-color: transparent; }
.phc-section-header { margin-bottom: 1.1rem; }
.phc-section-title { font-size: 1rem; font-weight: 600; margin-bottom: .2rem; }
.phc-section-hint { font-size: .8rem; color: var(--ink); }
.phc-model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1.3rem; }
.phc-model-card { background: var(--tertiary-color); border: 1.5px solid var(--tertiary-color-lighter); border-radius: var(--radius); padding: .9rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
.phc-model-card:hover { border-color: var(--quaternary-color); box-shadow: 0 2px 12px rgba(28,37,65,.08); transform: translateY(-1px); }
.phc-model-card:active { transform: scale(.98); }
.phc-model-card.phc-active { background: var(--quaternary-color); border-color: transparent; }
.phc-card-name { font-size: .8rem; font-weight: 600; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.phc-card-type { font-size: .7rem; color: var(--ink-muted); line-height: 1.1; }
.phc-model-card.phc-active .phc-card-name, .phc-model-card.phc-active .phc-card-type { color: #fff; }
.phc-detail-card { background: var(--tertiary-color); border-radius: var(--radius); overflow: hidden; max-width: 90vw; }
.phc-compare-table { width: 100%; border-collapse: collapse; }
.phc-compare-table th { background: var(--tertiary-color); color: var(--ink-muted); text-align: center; font-size: .8rem; font-weight: 700; vertical-align: middle; padding: .62rem 1rem; }
.phc-compare-table th:first-child { min-width: 10rem; }
.phc-compare-section td { background: var(--tertiary-color-lighter); font-weight: 600; font-size: .8rem; padding: .62rem 1rem; color: var(--ink); }
.phc-compare-label { font-weight: 500; font-size: .75rem; padding: .62rem 1rem; opacity: .85; }
.phc-compare-val { text-align: center; padding: .62rem 1rem; }
.phc-check { color: var(--quaternary-color); font-size: 1.1rem; font-weight: 700; line-height: 1; }
.phc-dash { color: var(--rule); font-size: .9rem; }
.phc-note { font-size: .8rem; color: var(--ink-muted); font-style: italic; }
@media (max-width: 480px) { .phc-widget { padding: 1.25rem .75rem 2.5rem; } .phc-model-grid { grid-template-columns: repeat(2, 1fr); } .phc-series-btn { font-size: .8rem; padding: .5rem .9rem; } .phc-compare-table th { padding: 10px .5rem; font-size: .8rem; min-width: 0; } .phc-compare-label, .phc-compare-val, .phc-compare-section td { padding: .5rem 10px; } }
@media (max-width: 340px) { .phc-model-grid { grid-template-columns: 1fr 1fr; gap: .5rem; } }

/* --------------------------------------------------------------------------
   16. AI TOKEN COST CALCULATOR AND AGENTIC EXPOSURE VALIDATION, svb-tco
   -------------------------------------------------------------------------- */
.svb-tco .svb-tcc-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.svb-tco .feature-card { padding: 1.5rem; margin-bottom: 1.5rem; }
.svb-tco .feature-card:last-child { margin-bottom: 0; }
.svb-tco .feature-header { padding: 0 0 .75rem; border-bottom: 1.5px solid var(--rule); margin-bottom: 1rem; }
.svb-tco .feature-body { padding: 0; }
.svb-tco .phc-section-title { color: var(--quaternary-color); font-size: 1.1rem; font-weight: 600; }
.svb-tco label { display: block; font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: .35rem; }
.svb-tco .svb-tcc-field { margin-bottom: 1rem; }
.svb-tco .svb-tcc-hint { font-weight: 400; color: var(--ink-soft); font-size: .78rem; margin-left: .4rem; }
.svb-tco input[type="number"], .svb-tco select { width: 100%; padding: .5rem .65rem; border: 1.5px solid var(--rule); border-radius: var(--radius); font-size: .95rem; background: var(--tertiary-color); color: var(--ink); font-family: inherit; }
.svb-tco input[type="number"]:focus, .svb-tco select:focus { outline: none; border-color: var(--quaternary-color); }
.svb-tco input[type="range"] { width: 100%; accent-color: var(--primary-color); margin: 0; }
.svb-tco .svb-tcc-range-row { display: flex; align-items: center; gap: .6rem; }
.svb-tco .svb-tcc-range-row output { font-weight: 600; min-width: 3.5rem; text-align: right; color: var(--quaternary-color); font-size: .95rem; }
.svb-tco .svb-tcc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.svb-tco .svb-tcc-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.svb-tco .svb-tcc-preset-btn { background: var(--tertiary-color); border: 1.5px solid var(--rule); border-radius: var(--radius-pill); padding: .4rem .9rem; font-size: .8rem; cursor: pointer; color: var(--ink); font-family: inherit; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.svb-tco .svb-tcc-preset-btn:hover { border-color: var(--quaternary-color); color: var(--quaternary-color); }
.svb-tco .svb-tcc-preset-btn.phc-active { background: var(--quaternary-color); color: #fff; border-color: transparent; }
.svb-tco .svb-tcc-fx { font-size: .75rem; color: var(--ink-soft); margin: .3rem 0 1rem; font-style: italic; }
.svb-tco .svb-tcc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
.svb-tco .svb-tcc-stat { background: var(--tertiary-color-lighter); border-radius: var(--radius); padding: .9rem; }
.svb-tco .svb-tcc-stat-label { font-size: .72rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }
.svb-tco .svb-tcc-stat-value { font-size: 1.2rem; font-weight: 600; color: var(--quaternary-color); line-height: 1.2; }
.svb-tco .svb-tcc-stat-value.svb-tcc-big { font-size: 1.6rem; }
.svb-tco .svb-tcc-mt { margin-top: .6rem; }
.svb-tco .svb-tcc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
.svb-tco .svb-tcc-compare-col { background: var(--tertiary-color-lighter); border-radius: var(--radius); padding: 1rem; border-top: 4px solid var(--quaternary-color); }
.svb-tco .svb-tcc-compare-col.svb-tcc-local { border-top-color: var(--primary-color); }
.svb-tco .svb-tcc-breakeven { background: #FFF8EA; border: 1.5px solid #F0D9A8; border-radius: var(--radius); padding: .9rem; margin-top: 1rem; font-size: .9rem; color: var(--ink); line-height: 1.4; }
.svb-tco .svb-tcc-breakeven strong { color: var(--quaternary-color); }
.svb-tco .svb-tcc-qual { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .85rem; }
.svb-tco .svb-tcc-qual th, .svb-tco .svb-tcc-qual td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--rule); }
.svb-tco .svb-tcc-qual th { background: var(--tertiary-color-lighter); font-weight: 600; color: var(--ink); font-size: .8rem; }
.svb-tco .svb-tcc-qual td:first-child { font-weight: 500; color: var(--ink); }
.svb-tco .svb-tcc-rating { display: inline-block; padding: .15rem .55rem; border-radius: 3px; font-size: .75rem; font-weight: 500; }
.svb-tco .svb-tcc-rating-high { background: #D4EDDA; color: #155724; }
.svb-tco .svb-tcc-rating-med { background: #FFF3CD; color: #856404; }
.svb-tco .svb-tcc-rating-low { background: #F8D7DA; color: #721C24; }
.svb-tco .svb-tcc-panel { display: none; }
.svb-tco .svb-tcc-panel.svb-tcc-active { display: block; }
.svb-tco .svb-tcc-modelnote { background: #eef6f7; padding: 0.6rem 0.8rem; font-size: 0.8rem; color: #134f5c; margin: 0.5rem 0 1rem; border-radius: 0 4px 4px 0; }
.svb-tco .svb-tcc-footnote { margin-top: 1.5rem; font-size: .78rem; color: var(--ink-soft); font-style: italic; }
.svb-tcc-model .svb-tco select { padding: 0.6rem 1.2rem; }

.svb-tco--aev { color: var(--ink); margin: 2rem auto; }
.svb-tco__panel-head { margin-bottom: 1.5rem; }
.svb-tco__panel-title { color: var(--primary-color); font-size: 1.5rem; line-height: 1.2; margin: 0 0 .25rem; }
.svb-tco__panel-sub { color: var(--ink-muted); font-size: .9375rem; margin: 0; }
.svb-tco__grid--compare { display: grid; grid-template-columns: 1fr 1.4fr; gap: .75rem; }
.svb-tco__col-head { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); padding: .25rem .25rem .5rem; border-bottom: 1px solid var(--tertiary-color-darker); }
.svb-tco__col-head--right { color: var(--primary-color); }
.svb-tco__tile { background: var(--tertiary-color); border-radius: var(--radius); padding: 1rem 1.125rem; font-size: .9rem; line-height: 1.2; }
.svb-tco__tile--label { color: #000; }
.svb-tco__tile--value { background: #E8ECEE; }
.svb-tco__panel-foot { margin-top: 1.5rem; padding: .7rem 1.125rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.svb-tco__foot-label { letter-spacing: .02em; }
.svb-tco__foot-value { font-size: .9rem; font-weight: 400; }
.svb-tco__panel--steps { padding: clamp(1.25rem, 3vw, 2.5rem); }
.svb-tco__grid--steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.svb-tco__card { background: #F4F6F7; border-radius: 12px; padding: 1.5rem 1.375rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.svb-tco__card:hover { transform: translateY(-2px); box-shadow: 0 8px 8px rgba(12,40,48,.08); }
.svb-tco__card--accent { background: rgba(19,79,92,.06); border-left: 3px solid var(--primary-color); }
.svb-tco__card-num, .svb-tco__qa-num { font-weight: 600; font-size: .75rem; letter-spacing: .16em; color: var(--primary-color); }
.svb-tco__card-title { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--ink); margin: 0; }
.svb-tco__card-body { font-size: .9375rem; line-height: 1.55; color: var(--ink); margin: 0; }
.svb-tco__grid--qa { display: grid; grid-template-columns: 1fr; gap: 1rem; width: 100%; }
.svb-tco__qa { background: var(--tertiary-color); border-radius: 2px; padding: 1rem; display: flex; flex-direction: column; gap: .625rem; min-width: 0; position: relative; transition: transform .2s ease, box-shadow .2s ease; }
.svb-tco__qa:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(12,40,48,.08); }
.svb-tco__qa-q { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); margin: 0; }
.svb-tco__qa-a { font-size: .9375rem; line-height: 1.6; color: var(--ink); margin: 0; }
@media (min-width: 900px) { .svb-tco .svb-tcc-grid { grid-template-columns: 360px 1fr; align-items: start; } }
@media (max-width: 960px) { .svb-tco__grid--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .svb-tco__grid--compare { grid-template-columns: 1fr; } .svb-tco__col-head--left { display: none; } .svb-tco__col-head--right { margin-top: .5rem; } .svb-tco__tile--label { background: transparent; padding: .5rem 0 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); } }
@media (max-width: 560px) { .svb-tco__grid--steps { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .svb-tco .svb-tcc-row-2, .svb-tco .svb-tcc-compare, .svb-tco .svb-tcc-stats { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   17. MSR GUIDE, Monthly Service Report and AI Blueprint
   The page JS that forces .b-iframe .embed-responsive to height 100% can now
   be removed, section 5 handles it without a layout reflow.
   -------------------------------------------------------------------------- */
.msr-guide .msr-section { margin: 4rem 0; padding-bottom: 2rem; scroll-margin-top: 2rem; }
.msr-guide .msr-nav { margin-bottom: 32px; padding-bottom: 1rem; border-bottom: 1px solid #E2E8F0; }
.msr-guide .msr-nav p { margin: 0; }
.msr-guide .msr-nav a { color: var(--primary-color-darker); text-decoration: none; }
.msr-guide .msr-nav a:hover { text-decoration: underline; }
.msr-guide h1 { color: #515761; margin-bottom: .5rem; text-align: left; }
.msr-guide h2 { color: #2D3748; margin-bottom: 1rem; padding-bottom: .5rem; text-align: left; }
.msr-guide h3 { color: #2D3748; margin-bottom: 10px; text-align: left; }
.msr-guide h4 { color: #2D3748; margin-bottom: .5rem; text-align: left; }
.msr-guide h5 { color: #2D3748; margin-bottom: .45rem; text-align: left; }
.msr-guide p { color: #4A5568; margin-bottom: .5rem; text-align: left; }
.msr-guide .msr-subtitle { color: #718096; margin-bottom: 2rem; }
.msr-guide .msr-info-box { background: transparent; border-left: 4px solid var(--primary-color-darker); padding: 1rem 20px; margin: 1rem 0 2rem; color: #4A5568; }
.msr-guide .msr-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 2rem; }
.msr-guide .msr-kpi-card { background: #fff; border-radius: var(--radius); padding: 1.6rem 2rem; text-align: left; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.msr-guide .msr-kpi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.msr-guide .msr-kpi-card:active { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.msr-guide .msr-kpi-value { line-height: 1.1; }
.msr-guide .msr-kpi-label { color: #718096; margin: .3rem 0; }
.msr-guide .msr-green { color: var(--primary-color-darker); }
.msr-guide .msr-orange { color: #E8943A; }
.msr-guide .msr-red { color: #D9534F; }
.msr-guide .msr-blue { color: #4A86C8; }
.msr-guide .msr-teal { color: #5BC0DE; }
.msr-guide .msr-yellow { color: #D69E2E; }
.msr-guide .msr-chart-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; margin-bottom: 3rem; }
.msr-guide .msr-chart-section.msr-reverse { grid-template-columns: 1.4fr 1fr; }
.msr-guide .msr-chart-box { background: transparent; padding: 0; box-shadow: none; position: relative; }
.msr-guide .msr-chart-box canvas { max-height: 340px; }
.msr-guide .msr-clickable { cursor: pointer; }
.msr-guide .msr-table, .msr-modal-body-global .msr-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.msr-guide .msr-table th, .msr-modal-body-global .msr-table th { background: transparent; color: #2D3748; padding: 10px 14px; text-align: left; border-bottom: 2px solid #E2E8F0; }
.msr-guide .msr-table td, .msr-modal-body-global .msr-table td { padding: 10px 14px; border-bottom: 1px solid #E8E8E8; text-align: left; color: #2D3748; }
.msr-guide .msr-table tr.odd { background-color: #F1F6FA; }
.msr-guide .msr-table tbody tr:hover, .msr-modal-body-global .msr-table tbody tr:hover { background: #F9FAFB; }
.msr-modal-body-global p { color: #4A5568; }
.msr-guide .msr-badge, .msr-modal-body-global .msr-badge { display: inline-block; padding: 2px 10px; border-radius: .5rem; }
.msr-guide .msr-badge-p1, .msr-modal-body-global .msr-badge-p1 { background: #FED7D7; color: #C53030; }
.msr-guide .msr-badge-p2, .msr-modal-body-global .msr-badge-p2 { background: #FEEBC8; color: #C05621; }
.msr-guide .msr-badge-p3, .msr-modal-body-global .msr-badge-p3 { background: #FEFCBF; color: #975A16; }
.msr-guide .msr-badge-p4, .msr-modal-body-global .msr-badge-p4 { background: #C6F6D5; color: #276749; }
.msr-guide .msr-badge-p5, .msr-modal-body-global .msr-badge-p5 { background: #E9D8FD; color: #553C9A; }
.msr-guide .msr-badge-new, .msr-modal-body-global .msr-badge-new { background: #BEE3F8; color: #2B6CB0; }
.msr-guide .msr-badge-progress, .msr-modal-body-global .msr-badge-progress { background: #FEFCBF; color: #975A16; }
.msr-guide .msr-priority-bar { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.msr-guide .msr-priority-item { flex: 1; min-width: 80px; text-align: left; padding: 14px 12px; border-radius: .5rem; background: #fff; box-shadow: var(--shadow-sm); }
.msr-guide .msr-p-label { color: #718096; }
.msr-guide .msr-p-value { line-height: 1.2; }
.msr-guide .msr-donut-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.msr-guide .msr-donut-wrap { text-align: left; background-color: #fff; border-radius: var(--radius); }
.msr-guide .msr-donut-wrap canvas { max-height: 220px; }
.msr-guide .msr-footer { text-align: left; padding: 32px 0 0; color: #A0AEC0; letter-spacing: 1px; }
#msrModalOverlayGlobal { display: none; position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,.55); z-index: 999999; align-items: center; justify-content: center; }
#msrModalOverlayGlobal.msr-show { display: flex; }
#msrModalOverlayGlobal .msr-modal-global { background: #fff; border-radius: var(--radius); max-width: 800px; width: 92%; max-height: 80vh; overflow-y: auto; padding: 2.5rem; position: relative; box-shadow: 0 2rem 80px rgba(0,0,0,.3); }
#msrModalOverlayGlobal .msr-modal-global h4 { margin-bottom: 1rem; }
#msrModalOverlayGlobal .msr-modal-close-global { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; color: #000; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; }
#msrModalOverlayGlobal .msr-modal-close-global:hover { color: #2D3748; background: #F1F5F9; border-radius: 50%; }
@media (max-width: 900px) { .msr-guide .msr-chart-section, .msr-guide .msr-chart-section.msr-reverse, .msr-guide .msr-kpi-row, .msr-guide .msr-donut-row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   18. EVENT LANDING, rbd
   -------------------------------------------------------------------------- */
.rbd-section { padding: 2.5rem 20px; }
.rbd-section-title { color: #FAFAFA; margin-bottom: 20px; }
.rbd-section-title-details { color: #000; }
.rbd-emphasis { border-left: 4px solid #AFAFAF; padding-left: .45rem; margin-top: 2rem; }
.rbd-theme-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 2rem; color: #FAFAFA; }
.rbd-theme-card { background: rgba(0,0,0,.3); border-left: 4px solid #AFAFAF; padding: 2rem; border-radius: 2px; }
.rbd-section:nth-child(odd) .rbd-theme-card { max-width: 80%; }
.rbd-theme-num { display: block; color: #BBDD11; margin-bottom: .5rem; letter-spacing: 1px; font-weight: 700; }
.rbd-theme-name { margin-bottom: .5rem; }
.rbd-audience, .rbd-audience-card, .rbd-audience-card h3 { color: #FAFAFA; }
.rbd-audience-grid, .rbd-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 2rem; }
.rbd-audience-card { background: rgba(12,35,34,.5); padding: 2rem; border-radius: 2px; transition: transform .2s ease, box-shadow .2s ease; }
.rbd-audience-card:hover, .rbd-host-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(9,93,90,.3), 0 0 0 1px rgba(9,93,90,.2); }
.rbd-limited { margin-top: 2rem; }
.rbd-detail-item { display: flex; flex-direction: column; padding: .45rem; background: var(--tertiary-color); border: 1px solid #EEE; border-radius: 2px; transition: transform .2s ease, box-shadow .2s ease; }
.rbd-detail-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rbd-detail-label { text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.rbd-detail-value { color: #16262F; }
.rbd-host-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 2rem; }
.rbd-host-card { color: #fff; padding: 2rem; background: rgba(0,0,0,.3); border-radius: 2px; transition: transform .2s ease, box-shadow .2s ease; }
.rbd-host-card h3 { color: #fff; margin-bottom: .5rem; }
@media (max-width: 640px) { .rbd-form-row, .rbd-audience-grid, .rbd-details-grid { grid-template-columns: 1fr; } .rbd-hero { padding: 2rem 2.5rem; } .rbd-section { padding: 2rem; } }

/* --------------------------------------------------------------------------
   19. VIRTUALISATION ASSESSMENT TOOL, svbTool
   -------------------------------------------------------------------------- */
#svbTool { max-width: 80rem; margin: 0 auto; padding: .5rem 0 1.5rem; color: var(--bs-body-color); }
#svbTool * { box-sizing: border-box; }
#svbTool .svb-eyebrow, #svbTool .svb-card__eyebrow { font-size: .75rem; letter-spacing: .125rem; text-transform: uppercase; color: var(--primary-color); font-weight: 600; margin: 0 0 .75rem; }
#svbTool .svb-intro { padding: 1.5rem .5rem .375rem; }
#svbTool .svb-intro h1 { font-size: 2rem; line-height: 1.15; font-weight: 600; margin: 0 0 .9rem; max-width: 47.5rem; }
#svbTool .svb-intro p { font-size: 1rem; line-height: 1.6; max-width: 45rem; margin: 0; }
#svbTool .svb-tags { display: flex; flex-wrap: wrap; gap: .625rem; margin: 1.125rem 0 0; }
#svbTool .svb-tag { font-size: .8rem; font-weight: 500; color: var(--primary-color); padding: .5rem .9rem; border-radius: .2rem; }
#svbTool .svb-meter { margin: 1.375rem .5rem 0; background: var(--tertiary-color); border-radius: .1rem; padding: 1.25rem 1.375rem; display: flex; align-items: center; gap: 1.375rem; position: sticky; top: .5rem; z-index: 5; }
#svbTool .svb-meter__num { font-size: 2.25rem; font-weight: 700; color: var(--primary-color); min-width: 6rem; line-height: 1; }
#svbTool .svb-meter__num span { font-size: .9375rem; color: var(--tertiary-color-darker); font-weight: 500; }
#svbTool .svb-meter__body { flex: 1; }
#svbTool .svb-meter__label { font-size: .9rem; margin: 0 0 .625rem; }
#svbTool .svb-meter__track { height: .625rem; border-radius: var(--radius-pill); background: var(--tertiary-color-lighter); overflow: hidden; }
#svbTool .svb-meter__fill { height: 100%; width: 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--quaternary-color), var(--primary-color)); transition: width .5s ease; }
#svbTool .svb-grid { display: grid; grid-template-columns: 1fr; gap: 1.625rem; margin: 1.625rem .5rem 0; }
#svbTool .svb-card { background: var(--tertiary-color); border-radius: .1rem; padding: 1.875rem 1.75rem; }
#svbTool .svb-card--wide { grid-column: 1 / -1; }
#svbTool .svb-card h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 1.25rem; }
#svbTool .svb-card__rule { height: 1px; background: var(--primary-color); margin: 0 0 1.375rem; }
#svbTool .svb-q { margin: 0 0 1.25rem; }
#svbTool .svb-q:last-child { margin-bottom: 0; }
#svbTool .svb-q__label { font-size: .9375rem; font-weight: 500; margin: 0 0 .625rem; }
#svbTool .svb-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
#svbTool .svb-opt { position: relative; }
#svbTool .svb-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
#svbTool .svb-opt label { display: inline-block; cursor: pointer; font-size: .9rem; padding: .6rem .9rem; border-radius: .06rem; border: 1px solid var(--primary-color); transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
#svbTool .svb-opt label:hover { color: var(--primary-color); }
#svbTool .svb-opt input:checked + label { background: var(--primary-color); color: var(--tertiary-color); font-weight: 500; }
#svbTool .svb-opt input:focus-visible + label { outline: 2px solid var(--quaternary-color); outline-offset: 2px; }
#svbTool .svb-check { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .9rem; border-radius: .6rem; border: 1px solid var(--tertiary-color-darker); cursor: pointer; margin: 0 0 .625rem; transition: border-color .2s ease, background-color .2s ease; }
#svbTool .svb-check:last-child { margin-bottom: 0; }
#svbTool .svb-check:hover, #svbTool .svb-check.is-on { border-color: var(--primary-color); }
#svbTool .svb-check.is-on span { color: var(--primary-color); }
#svbTool .svb-check input { margin: 1px 0 0; width: 1.125rem; height: 1.125rem; accent-color: var(--primary-color); flex: 0 0 auto; }
#svbTool .svb-check span { font-size: .9rem; line-height: 1.45; }
#svbTool .svb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
#svbTool .svb-field__label { display: block; font-size: .9rem; font-weight: 600; color: var(--primary-color); margin: 0 0 .5rem; }
#svbTool .svb-input { width: 100%; font-size: .9rem; background: var(--tertiary-color); padding: .6rem .94rem; border-radius: .6rem; border: 1px solid var(--tertiary-color-darker); transition: border-color .2s ease; }
#svbTool .svb-input:focus { outline: none; border-color: var(--quaternary-color); }
#svbTool .svb-input.is-invalid { border-color: #D70040; background: rgba(215,0,64,.06); }
#svbTool .svb-error { display: none; font-size: .75rem; color: #D70040; margin: .5rem 0 0; }
#svbTool .svb-error.is-shown { display: block; }
#svbTool .svb-consent { font-size: .75rem; line-height: 1.5; color: var(--tertiary-color-darker); margin: 1rem 0 0; }
#svbTool .svb-sendstate { font-size: .8rem; font-weight: 500; margin: .75rem 0 0; }
#svbTool .svb-sendstate.is-ok { color: var(--primary-color-darker); }
#svbTool .svb-sendstate.is-warn { color: #D70040; }
#svbTool .svb-actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
#svbTool .svb-btn, #svbTool .svb-cta { font-weight: 600; font-size: 1rem; border: none; cursor: pointer; padding: .6rem 1.6rem; border-radius: .6rem; background: var(--primary-color); color: var(--tertiary-color); text-decoration: none; display: inline-block; transition: transform .1s ease, box-shadow .2s ease; }
#svbTool .svb-btn:hover, #svbTool .svb-cta:hover { transform: translateY(-1px); box-shadow: 0 .5rem 1.375rem rgba(0,193,157,.22); }
#svbTool .svb-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
#svbTool .svb-btn--ghost { color: var(--bs-body-color); background: var(--tertiary-color); border: 1px solid var(--primary-color); }
#svbTool .svb-btn--ghost:hover { border-color: var(--primary-color-lighter); box-shadow: none; }
#svbTool .svb-result { background: var(--tertiary-color); margin: 1.625rem .5rem 0; border-radius: .09rem; padding: 2.125rem 1.9rem; display: none; }
#svbTool .svb-result.is-visible { display: block; animation: svbFade .4s ease; }
@keyframes svbFade { from { opacity: 0; transform: translateY(.625rem); } to { opacity: 1; transform: translateY(0); } }
#svbTool .svb-result__band { font-size: .75rem; letter-spacing: .125rem; text-transform: uppercase; font-weight: 600; margin: 0 0 .5rem; color: var(--primary-color); }
#svbTool .svb-result h3 { font-size: 1.625rem; font-weight: 600; margin: 0 0 .75rem; }
#svbTool .svb-result__score { font-size: 1rem; margin: 0 0 .5rem; }
#svbTool .svb-result__score b { color: var(--primary-color); font-size: 1.25rem; }
#svbTool .svb-result__rule { height: 1px; background: var(--rule); margin: 1.125rem 0; }
#svbTool .svb-result p.svb-lead { font-size: 1rem; line-height: 1.65; margin: 0 0 .375rem; }
#svbTool .svb-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 1.375rem 0 1.6rem; }
#svbTool .svb-next__item { background: var(--tertiary-color); border: 1px solid var(--primary-color); border-radius: .7rem; padding: 1.125rem; }
#svbTool .svb-next__label { font-size: .8rem; letter-spacing: .07rem; text-transform: uppercase; font-weight: 600; margin: 0 0 .375rem; }
#svbTool .svb-next__item h4 { font-size: 1.1rem; font-weight: 700; color: var(--primary-color); margin: 0 0 .5rem; }
#svbTool .svb-next__item p { font-size: .9rem; line-height: 1.5; margin: 0; }
#svbTool .svb-footer { margin: 1.625rem .5rem 0; padding: 1.375rem .5rem .25rem; font-size: .8rem; line-height: 1.55; }
@media (max-width: 900px) { #svbTool .svb-grid, #svbTool .svb-next, #svbTool .svb-fields { grid-template-columns: 1fr; } #svbTool .svb-meter { position: static; flex-direction: column; align-items: flex-start; gap: .75rem; } #svbTool .svb-intro h1 { font-size: 1.625rem; } }
@media (prefers-reduced-motion: reduce) { #svbTool .svb-result.is-visible { animation: none; } }