/* ==========================================================================
   Draisap — CMS page-builder sections
   Every one of the twenty section types the builder can emit, in the Draisap
   language: light and dark, desktop and phone. cms-blocks.css keeps the banner,
   features and editor blocks; this file carries the rest and the carousel core.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Owl Carousel core. The builder emits Owl markup for lists, galleries, team
   and testimonials, and main.min.js runs the plugin, but no stylesheet gave the
   stage its layout - every carousel stacked its slides and the stage ran off the
   right of the page.
   -------------------------------------------------------------------------- */
.owl-carousel { position: relative; display: block; width: 100%; -webkit-tap-highlight-color: transparent; z-index: 1; }
.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; }
.owl-carousel .owl-stage { position: relative; display: flex; touch-action: pan-y; }
.owl-carousel .owl-stage::after { content: "."; display: block; clear: both; visibility: hidden; height: 0; line-height: 0; }
.owl-carousel .owl-item { position: relative; flex: 0 0 auto; min-height: 1px; display: flex; }
/* A card just outside the viewport keeps its shadow out of the clip box; hiding the card
   itself was tried and a full-page capture caught the carousel mid-refresh with nothing in it. */
.owl-carousel.owl-loaded .owl-item:not(.active) * { box-shadow: none !important; }
.owl-carousel .owl-item > * { width: 100%; }
.owl-carousel .owl-item img { display: block; width: 100%; }
.owl-carousel.owl-loaded { display: block; }
.owl-carousel.owl-hidden { opacity: 0; }
.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; }
.owl-carousel .owl-nav { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.owl-carousel .owl-nav button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--dr-line); border-radius: 999px; background: var(--dr-surface); color: var(--dr-ink); font-size: 18px; line-height: 1; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.owl-carousel .owl-nav button:hover { border-color: var(--dr-accent); color: var(--dr-accent); }
.owl-carousel .owl-nav button.disabled { opacity: .35; cursor: default; }
.owl-carousel .owl-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.owl-carousel .owl-dots .owl-dot { width: auto; height: auto; padding: 4px; border: 0; background: transparent; cursor: pointer; }
.owl-carousel .owl-dots .owl-dot span { display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--dr-line); transition: background .16s ease, width .16s ease; }
.owl-carousel .owl-dots .owl-dot.active span, .owl-carousel .owl-dots .owl-dot:hover span { background: var(--dr-accent); }
.owl-carousel .owl-dots .owl-dot.active span { width: 22px; }
.owl-carousel .slide-item { height: 100%; }
/* The nav and dots live below the stage on every section; the templates emit them
   inside .owl-nav / .owl-dots, so the container never needs extra bottom space. */

/* --------------------------------------------------------------------------
   Section chrome shared by the sections in this file
   -------------------------------------------------------------------------- */
.sec { padding: 72px 0; }
.sec.site-banner, .sec.mass-head, .sec.hero-bg-wrap, .sec.call-to-action { padding: 0; }
.sec.no-padding-top { padding-top: 0 !important; } .sec.no-padding-bottom { padding-bottom: 0 !important; }
.sec.bg-primary .sec-title, .sec.bg-primary .sec-caption span { color: var(--dr-on-accent); }
.sec.bg-primary .sec-caption span { background: rgba(255, 255, 255, .16); }
/* The subtitle follows the same ink as the title: white on the light theme's deep accent,
   dark on the dark theme's pale one. A fixed white read at 3:1 on the pale accent. */
.sec.bg-primary .sec-subtitle { color: var(--dr-on-accent); opacity: .82; }
/* Dark mode's accent is pale so it reads on a dark page, which makes it a poor band to put white
   text on - and everything placed on a Primary band (stats, buttons, form fields) is drawn for
   white text. On a Primary band the dark theme uses a deep shade of the accent instead, with
   white ink, so the band looks the same in both modes. */
html[data-theme="dark"] .sec.bg-primary,
html[data-theme="dark"] .mtd-pricing-table.bg-primary {
    --dr-band-accent: color-mix(in srgb, var(--dr-accent) 58%, #121118);
    --dr-on-accent: #ffffff;
    background-color: var(--dr-band-accent) !important;
    color: #fff;
}
html[data-theme="dark"] .mtd-pricing-table.bg-primary { border-color: var(--dr-band-accent) !important; }
html[data-theme="dark"] .sec.bg-primary .btn-light,
html[data-theme="dark"] .sec.cta-band.bg-primary .btn-light,
html[data-theme="dark"] .mtd-pricing-table.bg-primary .btn-primary,
html[data-theme="dark"] .sec.newsletter.bg-primary .newsletter__button.btn { color: var(--dr-band-accent) !important; }
.sec.dark { background: #16151d; color: #fff; }
.sec.dark .sec-title { color: #fff; }
.sec.grey, .sec.soft { background: var(--dr-soft); }
@media (max-width: 760px) { .sec { padding: 52px 0; } }

/* --------------------------------------------------------------------------
   Section header break (bkheader)
   -------------------------------------------------------------------------- */
.sec.hero-bg-wrap.small-header, .sec.sheaderbg { padding: 44px 0; background: var(--dr-soft); background-size: cover; background-position: center; border-bottom: 1px solid var(--dr-line-soft); }
.sec.hero-bg-wrap .page-title h1, .sec.hero-bg-wrap .page-title .h1, .sec.sheaderbg .page-title h1, .sec.sheaderbg .page-title .h1 { margin: 0; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--dr-ink); }
.sec.hero-bg-wrap.bg-primary, .sec.sheaderbg.bg-primary { border-bottom: 0; }
/* Page header with a background image: "Darken the image" lays a scrim and turns the
   heading white; "No overlay" keeps the image as it is with dark text. */
.sec.hero-bg-wrap.small-header[style*="background-image"] { position: relative; padding: 64px 0; border-bottom: 0; }
.sec.hero-bg-wrap.small-header.bg-opacity[style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 12, 22, .78), rgba(14, 12, 22, .45)); }
.sec.hero-bg-wrap.small-header.bg-opacity[style*="background-image"] .container { position: relative; z-index: 1; }
.sec.hero-bg-wrap.small-header.bg-opacity[style*="background-image"] .page-title h1,
.sec.hero-bg-wrap.small-header.bg-opacity[style*="background-image"] .page-title .h1 { color: #fff; }
.sec.hero-bg-wrap.small-header.bg-opacity[style*="background-image"] .page-title__subtitle { color: rgba(255, 255, 255, .86); }
.sec.hero-bg-wrap.bg-primary .page-title__subtitle, .sec.sheaderbg.bg-primary .page-title__subtitle { color: var(--dr-on-accent, #fff); opacity: .86; }
.sec.sheaderbg:not(.bg-primary) .page-title__subtitle { color: var(--dr-ink-2); }
.sec.hero-bg-wrap.bg-primary .page-title h1, .sec.hero-bg-wrap.bg-primary .page-title .h1, .sec.sheaderbg.bg-primary .page-title h1, .sec.sheaderbg.bg-primary .page-title .h1 { color: var(--dr-on-accent); }
.mtd-bg-shapes-left, .mtd-bg-shapes-right { display: none; }

/* --------------------------------------------------------------------------
   Pricing cards: product groups, products, pricing panel, compact list
   -------------------------------------------------------------------------- */
.mtd-pricing-container .row { row-gap: 22px; }
.mtd-pricing-container .products-slide { display: flex; }
.mtd-pricing-table.no-shadow { box-shadow: none; }
.mtd-pricing-table:hover { transform: translateY(-2px); border-color: rgba(var(--dr-accent-rgb), .45) !important; }
.mtd-pricing-table.active { border-color: var(--dr-accent) !important; box-shadow: 0 18px 44px rgba(var(--dr-accent-rgb), .18); }
.mtd-pricing-table.mb-4 { margin-bottom: 0 !important; }
.mtd-pricing-table > * { padding-left: 24px; padding-right: 24px; }
.mtd-pricing-table > .sticker-wrapper, .mtd-pricing-table > .feature-sticker { padding: 0; }
/* cycle dropdown inside a card */
.mtd-pricing-table .billing-cycle-pricing .btn-group { display: inline-flex; margin: 6px 0 12px !important; }
.mtd-pricing-table .billing-cycle-pricing .btn.dropdown-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--dr-line); border-radius: 999px; background: var(--dr-surface); color: var(--dr-ink); font-size: 13px; font-weight: 700; box-shadow: none; }
.mtd-pricing-table .billing-cycle-pricing .dropdown-menu { min-width: 220px; padding: 6px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); }
.mtd-pricing-table .billing-cycle-pricing .dropdown-menu li { padding: 8px 10px; border-radius: 8px; color: var(--dr-ink); font-size: 13px; cursor: pointer; }
.mtd-pricing-table .billing-cycle-pricing .dropdown-menu li:hover { background: var(--dr-accent-tint); color: var(--dr-accent); }
.mtd-pricing-table .pricing_wrapr { display: inline-flex; align-items: center; gap: 8px; }
.mtd-pricing-table .save_text .badge { padding: 3px 8px; border-radius: 999px; background: var(--dr-ok-tint); color: var(--dr-ok); font-size: 11px; font-weight: 800; }
.mtd-pricing-table .w-hidden { display: none; }
.mtd-pricing-table { padding-top: 26px; padding-bottom: 26px; position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; border: 1px solid var(--dr-line-card) !important; border-radius: var(--dr-radius-card) !important; background: var(--dr-surface) !important; box-shadow: var(--dr-shadow-card); color: var(--dr-ink); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mtd-pricing-table:has(.sticker-wrapper, .feature-sticker) > .h4 { padding-right: 150px; }
.mtd-pricing-table .PriceList-toggle + .collapse:not(.show) { display: none; }
.mtd-pricing-table .graphics { display: block; }
.mtd-pricing-table .graphics img, .mtd-pricing-table .graphics svg { display: block; width: 64px; height: 64px; margin: 0 0 16px; object-fit: contain; }
.mtd-pricing-table .graphics .d-flex { padding: 0 !important; }
.mtd-pricing-table .h4, .mtd-pricing-table .plan-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--dr-ink); }
.mtd-pricing-table .desc, .mtd-pricing-table .desc_small { margin-bottom: 14px; color: var(--dr-ink-2); font-size: 14px; line-height: 1.55; }
.mtd-pricing-table .desc p:last-child { margin-bottom: 0; }
.mtd-pricing-table .starting-from, .mtd-pricing-table .regular_pricing { margin-top: auto; color: var(--dr-ink-3); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mtd-pricing-table .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 0; }
.mtd-pricing-table .price .cost { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--dr-ink); }
.mtd-pricing-table .price .cost.cost-small { font-size: 28px; }
.mtd-pricing-table .price .suffix { color: var(--dr-ink-3); font-size: 13px; font-weight: 700; }
.mtd-pricing-table .price .badge.price-free { padding: 6px 12px; border-radius: 999px; background: var(--dr-ok-tint); color: var(--dr-ok); font-size: 12px; font-weight: 800; }
.mtd-pricing-table .cycle { display: block; margin-top: 2px; color: var(--dr-ink-3) !important; font-size: 13px !important; }
.mtd-pricing-table .setup-fee { margin-top: 4px; color: var(--dr-ink-3) !important; font-size: 12.5px !important; }
.mtd-pricing-table .product_pricing_single { margin-top: auto; }
.mtd-pricing-table .product-actions, .mtd-pricing-table .btn-order-link, .mtd-pricing-table .btn.btn-sm { margin-top: 18px; }
.mtd-pricing-table .btn.btn-sm { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: var(--dr-radius-control); font-size: 14px; font-weight: 700; }
.mtd-pricing-table .btn.btn-block, .mtd-pricing-table .product-actions .btn { width: 100%; }
.mtd-pricing-table .plan-features { margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--dr-line-soft); list-style: none; }
.mtd-pricing-table .plan-features li { position: relative; padding: 5px 0 5px 24px; color: var(--dr-ink-2); font-size: 14px; }
.mtd-pricing-table .plan-features li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 14px; border-radius: 999px; background: var(--dr-ok-tint); box-shadow: inset 0 0 0 1px var(--dr-ok); }
.mtd-pricing-table .plan-features li b { color: var(--dr-ink); }
.mtd-pricing-table .PriceList-toggle { margin: 16px 0 0; color: var(--dr-accent); font-size: 13px; font-weight: 700; cursor: pointer; }
/* featured sticker */
.mtd-pricing-table .sticker-wrapper { position: absolute; top: 14px; right: 14px; z-index: 2; }
.mtd-pricing-table .sticker, .mtd-pricing-table .feature-sticker { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mtd-pricing-table .feature-sticker { position: absolute; top: 14px; right: 14px; z-index: 2; }
/* dark / primary table variants the builder offers */
.mtd-pricing-table.bg-primary { background: var(--dr-accent) !important; border-color: var(--dr-accent) !important; color: var(--dr-on-accent); }
.mtd-pricing-table.bg-primary .h4, .mtd-pricing-table.bg-primary .price .cost, .mtd-pricing-table.bg-primary .plan-features li b { color: var(--dr-on-accent); }
.mtd-pricing-table.bg-primary .desc, .mtd-pricing-table.bg-primary .cycle, .mtd-pricing-table.bg-primary .price .suffix, .mtd-pricing-table.bg-primary .plan-features li, .mtd-pricing-table.bg-primary .starting-from { color: rgba(255, 255, 255, .8) !important; }
.mtd-pricing-table.bg-primary .btn-primary { background: #fff; border-color: #fff; color: var(--dr-accent); }
.mtd-pricing-table.dark { background: #16151d !important; border-color: #2a2936 !important; color: #fff; }
.mtd-pricing-table.dark .h4, .mtd-pricing-table.dark .price .cost { color: #fff; }
/* billing cycle switcher */
.mtd-pricing-container .cycle-switcher, .mtd-pricing-container .btn-group.billing-cycles { display: inline-flex; margin: 0 0 26px; padding: 4px; border: 1px solid var(--dr-line); border-radius: 999px; background: var(--dr-soft); }
.mtd-pricing-container .cycle-change { padding: 7px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--dr-ink-2); font-size: 13px; font-weight: 700; }
.mtd-pricing-container .cycle-change.active, .mtd-pricing-container .cycle-change:hover { background: var(--dr-surface); color: var(--dr-ink); box-shadow: var(--dr-shadow-card); }
.mtd-pricing-container .swiper-button-prev, .mtd-pricing-container .swiper-button-next { display: none; }
.mtd-pricing-container.mw-768 { max-width: 768px; }

/* --------------------------------------------------------------------------
   Plan comparison (ProductPriceListTwo)
   -------------------------------------------------------------------------- */
/* The comparison block nests container > box > table > card. Only the plan card is
   a card; everything above it is layout and must not draw chrome of its own. */
.mtd-modern-pricing-container, .mtd-modern-pricing-box { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.mtd-pricing-table.mtd-modern-plan-table { display: block; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
.mtd-pricing-table.mtd-modern-plan-table > * { padding-left: 0; padding-right: 0; }
.mtd-modern-plan-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.mtd-modern-plan-tabs .nav-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; border: 0; }
.mtd-modern-plan-tabs .nav-item { margin: 0; }
.mtd-modern-plan-tabs .nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--dr-line) !important; border-radius: 999px !important; background: var(--dr-surface) !important; color: var(--dr-ink-2) !important; font-size: 13.5px; font-weight: 700; }
.mtd-modern-plan-tabs .nav-link.active { border-color: var(--dr-accent) !important; background: var(--dr-accent-tint) !important; color: var(--dr-accent) !important; }
.mtd-modern-plan-content .tab-pane { width: 100%; }
.mtd-modern-plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 18px; }
.mtd-modern-plan-top .mtd-modern-plan-heading { margin: 0; }
.mtd-modern-spec-card .mtd-modern-spec-label { white-space: nowrap; }
.mtd-modern-plan-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mtd-modern-plan-tabs .btn, .mtd-modern-plan-tabs a, .mtd-modern-plan-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--dr-line) !important; border-radius: 999px !important; background: var(--dr-surface) !important; color: var(--dr-ink-2) !important; font-size: 13.5px; font-weight: 700; box-shadow: none !important; }
.mtd-modern-plan-tabs .active, .mtd-modern-plan-tabs .btn.active { border-color: var(--dr-accent) !important; background: var(--dr-accent-tint) !important; color: var(--dr-accent) !important; }
.mtd-modern-tab-icon, .mtd-modern-spec-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--dr-accent); }
.mtd-modern-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.mtd-modern-plan-grid .mtd-modern-price-panel, .mtd-modern-plan-grid .mtd-modern-pricing-box { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; margin-top: 8px; padding: 20px 24px; }
.mtd-modern-plan-grid .mtd-modern-price-panel .mtd-modern-price-label { flex: none; }
.mtd-modern-plan-grid .mtd-modern-price-panel .cost { line-height: 1; }
@media (max-width: 991px) { .mtd-modern-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mtd-modern-plan-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.mtd-modern-plan-kicker { color: var(--dr-ink-3); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mtd-modern-plan-heading { margin: 4px 0 14px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

.mtd-modern-spec-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--dr-soft); flex-wrap: wrap; }
.mtd-modern-spec-card .mtd-modern-spec-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--dr-surface); }
.mtd-modern-spec-label { color: var(--dr-ink-3); font-size: 12px; }
.mtd-modern-spec-card b, .mtd-modern-spec-card strong { display: block; color: var(--dr-ink); font-size: 14px; white-space: nowrap; }
.mtd-modern-price-panel, .mtd-modern-pricing-box { display: flex; flex-direction: column; justify-content: center; padding: 26px; border-radius: var(--dr-radius-card); background: var(--dr-accent-tint); }
.mtd-modern-price-label { color: var(--dr-ink-3); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mtd-modern-pricing-box .cost, .mtd-modern-price-panel .cost { font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: var(--dr-ink); }
.mtd-modern-pricing-box .cycle, .mtd-modern-price-panel .cycle { color: var(--dr-ink-3); font-size: 13px; }
.mtd-modern-order-btn, .mtd-modern-plan-footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; margin-top: 16px; padding: 10px 22px; border-radius: var(--dr-radius-control); background: var(--dr-accent) !important; color: var(--dr-on-accent) !important; font-weight: 700; text-decoration: none; }
.mtd-modern-plan-note { margin-top: 14px; color: var(--dr-ink-3); font-size: 13px; }
.mtd-modern-billing-switcher { margin-bottom: 18px; }
@media (max-width: 560px) { .mtd-modern-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mtd-modern-plan-grid .mtd-modern-price-panel { flex-wrap: wrap; } }
@media (max-width: 767px) { .mtd-modern-billing-switcher { display: flex; justify-content: flex-start; } }

/* --------------------------------------------------------------------------
   Featured list (image beside a list of items)
   -------------------------------------------------------------------------- */
/* A section with a background picture (Features, Featured List, Updates, Image Gallery, Text): the
   picture fills the section, a dark overlay keeps the words readable and the heading turns light -
   the same result the setting gives in Serepok. Cards inside keep their own surface. */
.sec.sec-img-bg { position: relative; padding: 72px 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.sec.sec-img-bg.bg-opacity::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(20, 18, 32, .68); pointer-events: none; }
.sec.sec-img-bg > * { position: relative; z-index: 1; }
.sec.sec-img-bg > .mtd-illustration-background { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sec.sec-img-bg > .mtd-illustration-background img, .sec.sec-img-bg > .mtd-illustration-background svg { width: 100%; height: 100%; object-fit: cover; }
.sec.sec-img-bg.inverse, .sec.sec-img-bg.inverse .sec-description, .sec.sec-img-bg.inverse .sec-description :is(h1, h2, h3, h4, .sec-title, .sec-subtitle, p) { color: #fff; }
.sec.sec-img-bg.inverse .sec-description .sec-subtitle, .sec.sec-img-bg.inverse .sec-description p { color: rgba(255, 255, 255, .84); }
.sec.sec-img-bg.inverse .sec-caption span { background: rgba(255, 255, 255, .16); color: #fff; }
.sec.sec-img-bg.inverse .owl-dot, .sec.sec-img-bg.inverse .swiper-pagination-bullet { background: rgba(255, 255, 255, .5); }
html[data-theme="dark"] .sec.sec-img-bg.bg-opacity::before { background: rgba(10, 9, 16, .74); }
.sec.features .owl-carousel .owl-stage-outer { padding: 4px 0; margin: -4px 0; }
.mtd-box { display: flex; flex-direction: column; height: 100%; padding: 22px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); color: var(--dr-ink); }
.mtd-box .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 14px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 18px; }
.mtd-box .h3, .mtd-box h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.mtd-box p { margin: 0; color: var(--dr-ink-2); font-size: 14px; line-height: 1.6; }
.sec.features .owl-carousel .owl-item { padding: 0 9px; }
.sec.features .owl-carousel .owl-stage { margin: 0 -9px; }
/* --------------------------------------------------------------------------
   Gallery (cards) and image gallery (thumbnails)
   -------------------------------------------------------------------------- */
.sec.gallery .gallery-items .row { row-gap: 22px; }
.sec.gallery .item-graphics, .sec.gallery .thumbnail { position: relative; display: block; overflow: hidden; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.sec.gallery .thumbnail { padding: 0; margin: 0; }
.sec.gallery .item-graphics img, .sec.gallery .thumbnail img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.sec.gallery .item-graphics:hover img, .sec.gallery .thumbnail:hover img { transform: scale(1.04); }
.sec.gallery .contents { margin-top: 12px; color: var(--dr-ink); font-size: 15px; font-weight: 700; }
.sec.gallery .tools { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; margin: 0; background: rgba(20, 18, 32, .35); opacity: 0; transition: opacity .2s ease; }
.sec.gallery .thumbnail:hover .tools, .sec.gallery .item-graphics:hover .tools { opacity: 1; }
.sec.gallery .tools p { margin: 0; }
.sec.gallery .tools a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--dr-ink); font-size: 16px; }
.sec.gallery .owl-carousel .owl-item { padding: 0 9px; }
.sec.gallery .owl-carousel .slide-item.px-3 { padding-left: 0 !important; padding-right: 0 !important; }
.sec.gallery .owl-carousel .owl-stage { margin: 0 -9px; }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.sec.teamlist .owl-carousel .owl-item { padding: 0 9px; }
.sec.teamlist .owl-carousel .owl-stage { margin: 0 -9px; }
.mtd-team-member .profile-card { position: relative; overflow: hidden; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.mtd-team-member .profile-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.mtd-team-member .profile-card-details { padding: 18px 20px 20px; }
.mtd-team-member .profile-card-header h4 { margin: 0 0 2px; font-size: 17px; font-weight: 800; }
.mtd-team-member .profile-card-header span { display: block; color: var(--dr-ink-3); font-size: 13px; font-weight: 600; }
.mtd-team-member .profile-card-detail { margin-top: 12px; }
.mtd-team-member ul.social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mtd-team-member ul.social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 14px; transition: background .16s ease, color .16s ease; }
.mtd-team-member ul.social a:hover { background: var(--dr-accent-tint); color: var(--dr-accent); }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
/* A quote-led card: the quote is the headline, a large faded quote mark anchors the
   corner, and the author with a ringed portrait and the rating closes the card. The
   carousel's centre card is lifted onto the accent; a soft accent glow sits behind the
   row so the cards read as a group rather than three boxes on a white page. */
.sec.testimonials .container { position: relative; }
.sec.testimonials .container::before { content: ""; position: absolute; left: 50%; top: 58%; width: min(72%, 760px); height: 78%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, var(--dr-accent-tint) 0%, transparent 68%); pointer-events: none; z-index: 0; }
.sec.testimonials.bg-primary .container::before, .sec.testimonials.dark .container::before { display: none; }
.sec.testimonials .sec-description, .sec.testimonials .owl-carousel { position: relative; z-index: 1; }
.sec.testimonials .owl-carousel { margin-top: 36px; }
.sec.testimonials .owl-carousel .owl-stage-outer { padding: 12px 0 10px; margin: -12px 0 -10px; }
.sec.testimonials .owl-carousel .owl-item { padding: 0 10px; }
.sec.testimonials .owl-carousel .owl-stage { margin: 0 -10px; }
.testimonial-item { position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px 28px 26px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.testimonial-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--dr-accent), var(--dr-violet)); }
.testimonial-item .quote { position: absolute; top: 18px; right: 24px; margin: 0; font-size: 58px; line-height: 1; color: var(--dr-accent); opacity: .12; pointer-events: none; }
.testimonial-item .testimonial-massage { flex: 1 1 auto; padding-right: 44px; color: var(--dr-ink); font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
.testimonial-item .testimonial-massage p { margin: 0 0 8px; }
.testimonial-item .testimonial-massage p:last-child { margin-bottom: 0; }
.testimonial-item .readmore { color: var(--dr-accent); font-weight: 700; white-space: nowrap; }
.testimonial-item .author-info { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--dr-line-soft); }
.testimonial-item .author-img img { display: block; width: 52px; height: 52px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 3px var(--dr-surface), 0 0 0 5px var(--dr-accent-tint); }
.testimonial-item .author-name-link { display: flex; flex-direction: column; min-width: 0; }
.testimonial-item .author-name-link .name { font-size: 15px; font-weight: 800; color: var(--dr-ink); line-height: 1.25; }
.testimonial-item .author-name-link .link { color: var(--dr-ink-3); font-size: 13px; }
.testimonial-item .rating { display: inline-flex; gap: 3px; direction: ltr; margin-top: 6px; color: var(--dr-line); font-size: 13px; }
.testimonial-item .rating i.active { color: var(--dr-amber); }
/* Centre card: lifted, on the accent, everything in the accent's own ink. */
.testimonials-carousel .owl-item.center .testimonial-item { transform: translateY(-6px); }
.testimonials-carousel .owl-item.center .testimonial-item::before { display: none; }
.testimonials-carousel .owl-item.center .testimonial-item,
.testimonials-carousel .owl-item.center .testimonial-item .testimonial-massage,
.testimonials-carousel .owl-item.center .testimonial-item .name,
.testimonials-carousel .owl-item.center .testimonial-item .readmore,
.testimonials-carousel .owl-item.center .testimonial-item .quote [class*="fa-"] { color: var(--dr-on-accent) !important; }
.testimonials-carousel .owl-item.center .testimonial-item .link { color: inherit !important; opacity: .78; }
.testimonials-carousel .owl-item.center .testimonial-item .quote { opacity: .22; }
.testimonials-carousel .owl-item.center .testimonial-item .readmore { text-decoration: underline; text-underline-offset: 3px; }
.testimonials-carousel .owl-item.center .testimonial-item .author-info { border-top-color: rgba(255, 255, 255, .3); }
.testimonials-carousel .owl-item.center .testimonial-item .author-img img { box-shadow: 0 0 0 3px var(--dr-accent), 0 0 0 5px rgba(255, 255, 255, .6); }
.testimonials-carousel .owl-item.center .testimonial-item .rating { color: rgba(255, 255, 255, .4); }
.testimonials-carousel .owl-item.center .testimonial-item .rating i.active { color: #ffd489; }
html[data-theme="dark"] .testimonials-carousel .owl-item.center .testimonial-item .author-info { border-top-color: rgba(28, 27, 34, .28); }
html[data-theme="dark"] .testimonials-carousel .owl-item.center .testimonial-item .author-img img { box-shadow: 0 0 0 3px var(--dr-accent), 0 0 0 5px rgba(28, 27, 34, .35); }
html[data-theme="dark"] .testimonials-carousel .owl-item.center .testimonial-item .rating { color: rgba(28, 27, 34, .35); }
html[data-theme="dark"] .testimonials-carousel .owl-item.center .testimonial-item .rating i.active { color: #b45309; }
.sec.testimonials .owl-dots { margin-top: 22px; }
@media (max-width: 767.98px) {
  .testimonial-item { padding: 26px 22px 22px; }
  .testimonial-item .testimonial-massage { font-size: 16px; padding-right: 36px; }
  .testimonials-carousel .owl-item.center .testimonial-item { transform: none; }
}
.sec.testimonials .modal-content { border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); }

/* --------------------------------------------------------------------------
   FAQs
   -------------------------------------------------------------------------- */
.sec.faqs .mw-928 { max-width: 928px; }
/* The accordion sits centred and narrower than the container, so its caption and heading centre with it. */
.sec.faqs .sec-description { max-width: 928px; margin-left: auto; margin-right: auto; text-align: center; }
.sec.faqs .sec-description .sec-caption { display: flex; justify-content: center; }
.card-faqs-group .card { margin: 0 0 12px; padding: 0; border: 1px solid var(--dr-line-card) !important; border-radius: var(--dr-radius-card) !important; background: var(--dr-surface); box-shadow: var(--dr-shadow-card); overflow: hidden; }
.card-faqs-group .card .card-header { margin: 0 !important; padding: 0 !important; border: 0; background: transparent !important; }
.card-faqs-group .card .card-header .btn { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.card-faqs-group .card .card-header .card-title { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--dr-ink); }
.card-faqs-group .card .card-header .card-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 14px; transition: transform .2s ease, background .16s ease, color .16s ease; }
.card-faqs-group .card .card-header .card-icon i { transition: transform .2s ease; }
.card-faqs-group .card .card-header .card-icon .fa-angle-right { transform: rotate(90deg); }
.card-faqs-group .card.accordion-active .card-header .card-icon { background: var(--dr-accent-tint); color: var(--dr-accent); }
.card-faqs-group .card.accordion-active .card-header .card-icon .fa-angle-down { transform: rotate(180deg); }
.card-faqs-group .card .collapse:not(.show) { display: none; }
.card-faqs-group .card .collapsing { height: 0; overflow: hidden; transition: height .25s ease; }
.card-faqs-group .card .card-body { padding: 0 22px 20px !important; margin: 0 !important; border: 0 !important; color: var(--dr-ink-2); font-size: 15px; line-height: 1.65; }
.card-faqs-group .card .card-body > p:first-child { margin-top: 0; }
.card-faqs-group .card .card-body p:last-child { margin-bottom: 0; }
.card-faqs-group .card .card-body ul { padding-left: 20px; }
/* style 2 and 3 (always open) */
.card-faqs-group .card .card-header.px-3 { padding: 18px 22px 0 !important; }
.card-faqs-group .card .card-body.border-top { padding-top: 10px !important; }

/* --------------------------------------------------------------------------
   Specification strip (SectionWithItems)
   -------------------------------------------------------------------------- */
.sec.feature-list { padding: 40px 0; background: var(--dr-soft); }
.sec.feature-list .h1 { margin: 0 0 18px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-ink-3); }
.sec.feature-list .padding-2x { padding: 0 !important; }
.sec.feature-list .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 0; }
.sec.feature-list .row:empty { display: none; }
.sec.feature-list .row > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.sec.feature-list .tech-specs, .sec.feature-list h3, .sec.feature-list .h3 { margin: 0 0 14px; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-ink-3); }
.sec.feature-list ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin: 0; padding: 0; list-style: none; }
.sec.feature-list ul li { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 16px; border: 1px solid var(--dr-line-card); border-radius: 999px; background: var(--dr-surface); color: var(--dr-ink-2); font-size: 14px; letter-spacing: 0; text-transform: none; }
.sec.feature-list ul li b, .sec.feature-list ul li strong { color: var(--dr-ink); }
.sec.feature-list ul li::before { display: none; }

/* --------------------------------------------------------------------------
   Background band with a call to action (bgsection)
   -------------------------------------------------------------------------- */
.sec.call-to-action { position: relative; overflow: hidden; color: #fff; background-size: cover; background-position: center; }
.sec.call-to-action::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(20, 18, 32, .82) 0%, rgba(20, 18, 32, .55) 55%, rgba(20, 18, 32, .2) 100%); }
.sec.call-to-action .container { position: relative; z-index: 2; }
.sec.call-to-action .sec-block { display: flex; flex-wrap: wrap; align-items: center; min-height: 420px; margin: 0 -10px; }
.sec.call-to-action .sec-col-first, .sec.call-to-action .sec-col-last { padding: 64px 10px; }
.sec.call-to-action .section-title, .sec.call-to-action h2 { margin: 0 0 14px; font-size: clamp(26px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #fff; }
.sec.call-to-action .sec-desc, .sec.call-to-action p { max-width: 560px; color: rgba(255, 255, 255, .85); font-size: 16.5px; line-height: 1.6; }
.sec.call-to-action .sec-actions { margin-top: 22px; }
.sec.call-to-action .sec-actions .btn { min-height: 48px; padding: 12px 26px; border-radius: 14px; }
.sec.call-to-action .sec-block > [class*="col-"]:has(> img, > .mtd-illustration-foreground) { display: flex; align-items: center; justify-content: center; padding: 48px 10px; }
.sec.call-to-action .sec-block img.img-fluid { display: block; max-width: 100%; height: auto; max-height: 420px; margin: 0 auto; border-radius: 18px; object-fit: contain; }
.sec.call-to-action.padding4x { padding: 0; }
/* Background band: the Background Type choice (Primary, Light, Dark, None) now changes the band.
   Only the default type is a photo with a dark scrim. */
.sec.call-to-action.light, .sec.call-to-action.noimg { color: var(--dr-ink); background-image: none !important; }
.sec.call-to-action.light { background-color: var(--dr-soft); }
.sec.call-to-action.noimg { background-color: transparent; }
.sec.call-to-action.dark { background-color: #1c1b22; }
.sec.call-to-action.bg-primary { background-color: var(--dr-accent); }
.sec.call-to-action.light::before, .sec.call-to-action.noimg::before, .sec.call-to-action.bg-primary::before { display: none; }
.sec.call-to-action.dark::before { background: rgba(8, 7, 14, .45); }
.sec.call-to-action.light .section-title, .sec.call-to-action.light .sec-title, .sec.call-to-action.light h2,
.sec.call-to-action.noimg .section-title, .sec.call-to-action.noimg .sec-title, .sec.call-to-action.noimg h2 { color: var(--dr-ink); }
.sec.call-to-action.light .sec-desc, .sec.call-to-action.light p, .sec.call-to-action.noimg .sec-desc, .sec.call-to-action.noimg p { color: var(--dr-ink-2); }
.sec.call-to-action blockquote { margin: 18px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--dr-accent); font-style: italic; }
.sec.call-to-action.light .sec-block img.img-fluid, .sec.call-to-action.noimg .sec-block img.img-fluid { box-shadow: var(--dr-shadow-card); }
@media (max-width: 767px) { .sec.call-to-action .sec-block { min-height: 0; } .sec.call-to-action .sec-col-first, .sec.call-to-action .sec-col-last { padding: 40px 10px 24px; } .sec.call-to-action .sec-block > [class*="col-"]:last-child { padding-bottom: 48px; } }

/* --------------------------------------------------------------------------
   Latest updates (announcements)
   -------------------------------------------------------------------------- */
.sec.social .news-blocks .card, .sec.social .card { height: 100%; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.sec.social .card .card-body h3, .sec.social .card .card-body .h5, .sec.social .card .card-body h5 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.sec.social .card .card-body h3 a { color: var(--dr-ink); }
.sec.social .card .card-body p { color: var(--dr-ink-2); font-size: 14px; line-height: 1.6; }
.sec.social .row { row-gap: 22px; }
.sec.social .mtd-illustration-background { display: none; }
/* The optional image is a backdrop: photos cover the band under a dark wash so the
   white title reads; a small illustration sits once in the corner rather than tiling. */
.sec.social.sec-img-bg-2 { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }
.sec.social.sec-img-bg-2::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(20, 18, 32, .72); }
.sec.social.sec-img-bg-2 .container { position: relative; z-index: 1; }
.sec.social.sec-img-bg-2[style*=".svg"] { background-size: auto 150px; background-position: right 32px top 28px; background-color: var(--dr-soft); }
.sec.social.sec-img-bg-2[style*=".svg"]::before { display: none; }
.sec.social.sec-img-bg-2[style*=".svg"] .h1.text-white { color: var(--dr-ink) !important; }
.sec.social .h1 { margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.sec.social .news-blocks.pt-4 { padding-top: 24px; }
.sec.social .card.mtd-box { position: relative; z-index: 1; flex-direction: column; padding: 0; overflow: hidden; }
.sec.social .card .card-body { flex: 1 1 auto; padding: 22px; }
.sec.social .card .card-footer { margin: 0; border-radius: 0; padding: 12px 22px; border-top: 1px solid var(--dr-line-soft); background: transparent; color: var(--dr-ink-3); font-size: 12.5px; }
.sec.social .row > .col { flex: 1 0 0%; max-width: 100%; }
.sec.social .row.row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 992px) { .sec.social .row.row-cols-lg-2 > * { flex: 0 0 50%; max-width: 50%; } .sec.social .row.row-cols-lg-3 > * { flex: 0 0 33.3333%; max-width: 33.3333%; } .sec.social .row.row-cols-lg-4 > * { flex: 0 0 25%; max-width: 25%; } }
.sec.social .row > .col.mb-4 { margin-bottom: 0 !important; }
@media (max-width: 991.98px) { .sec.social.sec-img-bg-2[style*=".svg"] { background-size: auto 96px; background-position: right 16px top 14px; } .sec.social.sec-img-bg-2[style*=".svg"] .h1 { padding-right: 96px; } }
@media (max-width: 575.98px) { .sec.social.sec-img-bg-2[style*=".svg"] { background-image: none !important; } .sec.social.sec-img-bg-2[style*=".svg"] .h1 { padding-right: 0; } }
.sec.social .card .card-body .h4 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--dr-ink); }
/* Updates as news cards: picture (or a placeholder), date, title, excerpt, read-more. */
.sec.social .news-card { overflow: hidden; padding: 0; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.sec.social .news-card:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); text-decoration: none; }
.sec.social .news-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dr-soft); }
.sec.social .news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sec.social .news-card:hover .news-card__media img { transform: scale(1.04); }
.sec.social .news-card__media--empty { background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-violet-tint)); color: var(--dr-accent); font-size: 34px; }
.sec.social .news-card .card-body { padding: 20px 22px 18px; }
.sec.social .news-card__date { display: inline-flex; align-items: center; margin-bottom: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dr-accent); }
.sec.social .news-card .card-body .h4.news-card__title { font-size: 17px; line-height: 1.3; }
.sec.social .news-card__summary { margin: 0; }
.sec.social .news-card .card-footer { display: flex; align-items: center; }
.sec.social .news-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--dr-ink); }
.sec.social .news-card:hover .news-card__more { color: var(--dr-accent); }
@media (min-width: 768px) and (max-width: 991.98px) { .sec.social .row.row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; } }
.sec.social a.card:hover { border-color: rgba(var(--dr-accent-rgb), .45); text-decoration: none; }
.sec.social .mtd-empty, .sec.social .alert { padding: 22px; border-radius: var(--dr-radius-card); background: var(--dr-soft); color: var(--dr-ink-2); text-align: center; }

/* --------------------------------------------------------------------------
   Slider (legacy hero)
   -------------------------------------------------------------------------- */
.sec.mass-head { position: relative; overflow: hidden; }
/* Default style: a text carousel over the section image. With no image the band
   would be white text on white, so it falls back to the accent. */
.sec.mass-head .hero-bg-wrap { position: relative; padding: 0; background-size: cover; background-position: center; color: #fff; }
.sec.mass-head .hero-bg-wrap::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 18, 32, .78), rgba(20, 18, 32, .3)); }
.sec.mass-head .hero-bg-wrap.no-image { background: linear-gradient(135deg, var(--dr-accent) 0%, color-mix(in srgb, var(--dr-accent) 70%, #16151d) 100%); }
.sec.mass-head .hero-bg-wrap.no-image::before { display: none; }
.sec.mass-head .hero-bg-wrap .container { position: relative; z-index: 2; }
.sec.mass-head .carousel { position: relative; }
.sec.mass-head .carousel-inner { position: relative; width: 100%; overflow: hidden; }
.sec.mass-head .carousel-item { display: none; flex-direction: column; justify-content: center; width: 100%; min-height: 460px; padding: 84px 0 104px !important; }
.sec.mass-head .carousel-item.active { display: flex; }
.sec.mass-head .carousel-item .h1 { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.sec.mass-head .carousel-item .h2 { margin: 0 0 14px; font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: #fff; }
.sec.mass-head .carousel-item p { max-width: 620px; color: rgba(255, 255, 255, .86); font-size: 17px; line-height: 1.6; }
.sec.mass-head .carousel-indicators { position: absolute; left: 0; bottom: 28px; z-index: 3; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sec.mass-head .carousel-indicators li { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .16s ease, background .16s ease; }
.sec.mass-head .carousel-indicators li.active { width: 22px; background: #fff; }
.sec.mass-head .bg-shape-poly { position: relative; }
@media (max-width: 760px) { .sec.mass-head .carousel-item { padding: 64px 0 72px !important; } }
.sec.mass-head .swiper-slide, .sec.mass-head .carousel-item, .sec.mass-head .slide { position: relative; min-height: 460px; background-size: cover; background-position: center; color: #fff; }
.sec.mass-head .slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sec.mass-head .slide-bg::after, .sec.mass-head .swiper-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 18, 32, .78), rgba(20, 18, 32, .3)); }
.sec.mass-head .container { position: relative; z-index: 2; }
.sec.mass-head .hgroup, .sec.mass-head .mw-768 { max-width: 640px; padding: 96px 0; }
.sec.mass-head h1, .sec.mass-head h2, .sec.mass-head .h1 { margin: 0 0 12px; font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: #fff; }
.sec.mass-head .smaller-50, .sec.mass-head .subtitle, .sec.mass-head p { color: rgba(255, 255, 255, .86); font-size: 17px; }
.sec.mass-head .buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sec.mass-head .buttons .btn { min-height: 48px; padding: 12px 26px; border-radius: 14px; }
.sec.mass-head .swiper-pagination { bottom: 22px; }
.sec.mass-head .pricing .price { font-size: 30px; font-weight: 800; }
@media (max-width: 760px) { .sec.mass-head .hgroup, .sec.mass-head .mw-768 { padding: 64px 0; } .sec.mass-head .swiper-slide { min-height: 380px; } }

/* --------------------------------------------------------------------------
   Rich text (editor) - keep it readable and in the type scale
   -------------------------------------------------------------------------- */
.sec.editor .mtd-cms-story, .sec.editor .container > .row > div { max-width: 860px; }
.sec.editor p, .sec.editor li { color: var(--dr-ink-2); font-size: 16px; line-height: 1.7; }
.sec.editor h1, .sec.editor h2, .sec.editor h3 { color: var(--dr-ink); font-weight: 800; letter-spacing: -.02em; }
.sec.editor h2 { font-size: clamp(22px, 3vw, 30px); }
.sec.editor ul, .sec.editor ol { padding-left: 22px; }

/* --------------------------------------------------------------------------
   Banner and feature refinements seen on the showcase
   -------------------------------------------------------------------------- */
.site-banner .action .btn, .site-banner .banner_content .btn { width: auto; }
.features .feature-graphic, .features .feature-icon img, .features .feature-icon svg { display: block; width: 46px; height: 46px; object-fit: contain; }
.features .feature-icon .mtd-theme-svg { width: 26px; height: 26px; }
/* interactions.css pads the flat feature card by 24/28 so it can grow on hover; keep the
   card inside its column and tighten the stack on phones. */
html.wbams_cms-frontend-effects .sec.features :where([class*="col-"], .swiper-slide, .owl-item) .feature-item { margin-bottom: 8px; }
.sec .swiper-wrapper.row.px-3 { padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 767px) { html.wbams_cms-frontend-effects .sec.features :where([class*="col-"], .swiper-slide, .owl-item) .feature-item { padding-top: 12px; padding-bottom: 12px; margin-bottom: 4px; } }
.features .feature-item .feature-icon.btn_icon_large, .features .feature-item.top .feature-icon { width: 56px; height: 56px; border-radius: 16px; }
.features .feature-item.top .feature-icon img, .features .feature-item.top .feature-icon svg { width: 30px; height: 30px; }
.features .counter .feature-value { color: inherit; }

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .sec.feature-list { background: var(--dr-surface-2, var(--dr-soft)); }
html[data-theme="dark"] .sec.hero-bg-wrap.small-header, html[data-theme="dark"] .sec.sheaderbg { background: var(--dr-surface-2, var(--dr-soft)); }
html[data-theme="dark"] .sec.call-to-action::before { background: linear-gradient(90deg, rgba(8, 7, 14, .88) 0%, rgba(8, 7, 14, .62) 55%, rgba(8, 7, 14, .3) 100%); }
html[data-theme="dark"] .mtd-pricing-table.active { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .sec.gallery .tools a { background: var(--dr-surface); color: var(--dr-ink); }

/* --------------------------------------------------------------------------
   Responsive utilities the builder markup relies on. draisap.css declares the
   base utilities (.flex-column and friends) with !important, so the breakpoint
   variants have to carry the same weight or they never win.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .flex-md-row { flex-direction: row !important; }
    .flex-md-column { flex-direction: column !important; }
    .justify-content-md-start { justify-content: flex-start !important; }
    .justify-content-md-end { justify-content: flex-end !important; }
    .justify-content-md-center { justify-content: center !important; }
    .text-md-left { text-align: left !important; }
    .text-md-right { text-align: right !important; }
    .order-md-1 { order: 1 !important; }
    .order-md-2 { order: 2 !important; }
    .mb-md-0 { margin-bottom: 0 !important; }
    .mt-md-0 { margin-top: 0 !important; }
}
@media (min-width: 992px) {
    .text-lg-right { text-align: right !important; }
    .mt-lg-0 { margin-top: 0 !important; }
    .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
    .order-lg-1 { order: 1 !important; }
    .order-lg-2 { order: 2 !important; }
    .text-lg-left { text-align: left !important; }
}

/* A section description is a left-aligned block unless the section is centred;
   centring the block while leaving its text left-aligned indented the heading
   past the cards beneath it. */
.sec-description { margin-left: 0; margin-right: 0; }
.sec.centered .sec-description, .sec .sec-description.text-center { margin-left: auto; margin-right: auto; }
/* Bundled themed icons: dark ink and paper follow the scheme instead of staying black-on-white. */
html[data-theme="dark"] .mtd-themed-inline-svg .solid-black { fill: var(--dr-ink); }
html[data-theme="dark"] .mtd-themed-inline-svg rect.theme-stroke[fill="#fff"], html[data-theme="dark"] .mtd-themed-inline-svg rect.theme-stroke[fill="#ffffff"] { fill: var(--dr-surface-2); }

/* --------------------------------------------------------------------------
   Call to action band (CtaBand)
   -------------------------------------------------------------------------- */
.sec.cta-band { padding: 72px 0; }
.sec.cta-band .cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.sec.cta-band .cta-band__copy { max-width: 720px; }
.sec.cta-band .cta-band__copy .sec-title { margin-bottom: 10px; font-size: clamp(26px, 3.6vw, 40px); }
.sec.cta-band .cta-band__copy .sec-subtitle { font-size: 16.5px; }
.sec.cta-band .cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sec.cta-band .cta-band__actions .btn { min-height: 48px; padding: 12px 26px; border-radius: 14px; font-weight: 700; }
.sec.cta-band .btn-outline { border: 1px solid var(--dr-line); background: var(--dr-surface); color: var(--dr-ink); }
.sec.cta-band .btn-outline:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); }
.sec.cta-band.bg-primary .btn-light { background: #fff; border-color: #fff; color: var(--dr-accent); }
.sec.cta-band.bg-primary .btn-outline, .sec.cta-band.dark .btn-outline { border-color: rgba(255, 255, 255, .45); background: transparent; color: #fff; }
.sec.cta-band.bg-primary .btn-outline:hover, .sec.cta-band.dark .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.sec.cta-band.dark .btn-light { background: var(--dr-accent); border-color: var(--dr-accent); color: #fff; }
.sec.cta-band.dark .sec-caption span { background: rgba(255, 255, 255, .14); color: #fff; }
.sec.cta-band.dark .sec-subtitle { color: rgba(255, 255, 255, .8); }
/* In dark mode the secondary button is a surface pill on a surface band; its hairline was the only
   thing marking its edge and it all but disappeared. */
html[data-theme="dark"] .sec.cta-band:not(.sec--tone-light):not(.dark):not(.bg-primary) .btn-outline { border-color: rgba(240, 238, 248, .3); background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .sec.cta-band:not(.sec--tone-light):not(.dark):not(.bg-primary) .btn-outline:hover { border-color: var(--dr-accent); color: var(--dr-accent); }
@media (min-width: 768px) {
    .sec.cta-band.cta-band--split .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
    .sec.cta-band.cta-band--split .cta-band__actions { flex: none; justify-content: flex-end; }
}

/* --------------------------------------------------------------------------
   Logo wall (LogoWall)
   -------------------------------------------------------------------------- */
.sec.logo-wall .logo-wall__grid { --logo-cols: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sec.logo-wall .logo-wall__item { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 18px 22px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); transition: border-color .16s ease, transform .16s ease; flex: 0 0 calc((100% - (var(--logo-cols) - 1) * 14px) / var(--logo-cols)); }
.sec.logo-wall .logo-wall__item a { display: flex; align-items: center; justify-content: center; width: 100%; }
.sec.logo-wall .logo-wall__item img { max-width: 100%; max-height: 44px; width: auto; height: auto; opacity: .62; filter: grayscale(1); transition: opacity .18s ease, filter .18s ease; }
.sec.logo-wall .logo-wall__item:hover { border-color: rgba(var(--dr-accent-rgb), .45); transform: translateY(-2px); }
.sec.logo-wall .logo-wall__item:hover img, .sec.logo-wall.logo-wall--color .logo-wall__item img { opacity: 1; filter: none; }
.sec.logo-wall.dark .logo-wall__item { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .sec.logo-wall .logo-wall__item img { filter: grayscale(1) invert(1) brightness(1.15); }
html[data-theme="dark"] .sec.logo-wall .logo-wall__item:hover img, html[data-theme="dark"] .sec.logo-wall.logo-wall--color .logo-wall__item img { filter: none; }
@media (min-width: 576px) { .sec.logo-wall .logo-wall__grid { --logo-cols: 3; } }
@media (min-width: 992px) {
    .sec.logo-wall .logo-wall__grid--4 { --logo-cols: 4; }
    .sec.logo-wall .logo-wall__grid--5 { --logo-cols: 5; }
    .sec.logo-wall .logo-wall__grid--6 { --logo-cols: 6; }
}

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */
.sec.timeline .timeline__list { position: relative; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
.sec.timeline .timeline__list::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 19px; width: 2px; background: var(--dr-line); }
.sec.timeline .timeline__item { position: relative; display: flex; gap: 22px; padding: 0 0 28px; }
.sec.timeline .timeline__item:last-child { padding-bottom: 0; }
.sec.timeline .timeline__marker { flex: none; width: 40px; display: flex; justify-content: center; padding-top: 22px; }
.sec.timeline .timeline__marker span { display: block; width: 14px; height: 14px; border-radius: 999px; background: var(--dr-accent); box-shadow: 0 0 0 5px rgba(var(--dr-accent-rgb), .18); }
.sec.timeline .timeline__card { flex: 1 1 auto; min-width: 0; padding: 20px 24px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.sec.timeline .timeline__label { margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-accent); }
.sec.timeline .timeline__title { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--dr-ink); }
.sec.timeline .timeline__text { color: var(--dr-ink-2); font-size: 14.5px; line-height: 1.6; }
.sec.timeline.dark .timeline__card { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); }
.sec.timeline.dark .timeline__title { color: #fff; }
.sec.timeline.dark .timeline__text { color: rgba(255, 255, 255, .8); }
.sec.timeline.dark .timeline__list::before { background: rgba(255, 255, 255, .18); }
.sec.timeline.timeline--marker-numbers .timeline__marker span, .sec.timeline.timeline--marker-check .timeline__marker span { box-shadow: 0 0 0 4px var(--dr-surface), 0 0 0 6px rgba(var(--dr-accent-rgb), .25); }
.sec.timeline.timeline--horizontal .timeline__marker { padding-top: 0; }
@media (min-width: 768px) {
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__list::before { left: 50%; margin-left: -1px; }
        .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item .timeline__marker { position: absolute; top: 0; right: -20px; }
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item--alt { margin-left: 50%; padding-right: 0; padding-left: 40px; flex-direction: row; }
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item--alt .timeline__marker { right: auto; left: -20px; }
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item { margin-top: -18px; width: 50%; padding-right: 40px; flex-direction: row-reverse; }
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item:first-child { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Comparison table (ComparisonTable)
   -------------------------------------------------------------------------- */
.sec.compare-table .compare-table__scroll { overflow-x: auto; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); }
.sec.compare-table .compare-table__table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; margin: 0; }
.sec.compare-table th, .sec.compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--dr-line-soft); text-align: center; vertical-align: middle; font-size: 14px; }
.sec.compare-table thead th { padding-top: 20px; padding-bottom: 20px; font-size: 15px; font-weight: 800; color: var(--dr-ink); background: var(--dr-soft); }
.sec.compare-table thead th.compare-table__feature { background: var(--dr-soft); }
.sec.compare-table .compare-table__feature { width: 30%; }
.sec.compare-table tbody th.compare-table__feature { text-align: left; font-weight: 600; color: var(--dr-ink); }
.sec.compare-table tbody tr:last-child th, .sec.compare-table tbody tr:last-child td { border-bottom: 0; }
.sec.compare-table tfoot td { padding: 18px; border-top: 1px solid var(--dr-line-soft); border-bottom: 0; background: var(--dr-soft); }
.sec.compare-table .compare-table__yes { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--dr-ok-tint); color: var(--dr-ok); font-size: 12px; }
.sec.compare-table .compare-table__no { color: var(--dr-ink-3); font-size: 12px; }
.sec.compare-table .compare-table__value { color: var(--dr-ink-2); font-weight: 600; }
.sec.compare-table .is-highlight { background: rgba(var(--dr-accent-rgb), .07); }
.sec.compare-table thead th.is-highlight { background: rgba(var(--dr-accent-rgb), .14); color: var(--dr-accent); }
.sec.compare-table .btn-outline { border: 1px solid var(--dr-line); background: var(--dr-surface); color: var(--dr-ink); }
.sec.compare-table .btn-outline:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); }
.sec.compare-table .btn { border-radius: 10px; font-weight: 700; }
@media (max-width: 767px) { .sec.compare-table th, .sec.compare-table td { padding: 12px 12px; font-size: 13px; } .sec.compare-table .compare-table__feature { position: sticky; left: 0; z-index: 1; min-width: 140px; width: auto; background: var(--dr-surface); box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .25); } }

/* --------------------------------------------------------------------------
   Video (VideoEmbed)
   -------------------------------------------------------------------------- */
.sec.video-embed .video-embed__frame { position: relative; width: 100%; max-width: 960px; margin: 0 auto; overflow: hidden; border-radius: var(--dr-radius-card); background: #0b0a10; box-shadow: var(--dr-shadow-card); aspect-ratio: 16 / 9; }
.sec.video-embed .video-embed__frame--narrow { max-width: 640px; }
.sec.video-embed .video-embed__frame--wide { max-width: none; }
.sec.video-embed .ratio-4x3 { aspect-ratio: 4 / 3; }
.sec.video-embed .ratio-1x1 { aspect-ratio: 1 / 1; }
.sec.video-embed .ratio-9x16 { aspect-ratio: 9 / 16; max-width: 420px; }
.sec.video-embed .video-embed__frame iframe, .sec.video-embed .video-embed__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.sec.video-embed .video-embed__poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #0b0a10; cursor: pointer; }
.sec.video-embed .video-embed__poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; transition: opacity .2s ease, transform .3s ease; }
.sec.video-embed .video-embed__poster:hover img { opacity: 1; transform: scale(1.02); }
.sec.video-embed .video-embed__play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 999px; background: var(--dr-accent); color: #fff; font-size: 24px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.sec.video-embed .video-embed__play i { margin-left: 4px; }
.sec.video-embed .video-embed__poster:hover .video-embed__play { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   Newsletter signup (Newsletter)
   -------------------------------------------------------------------------- */
.sec.newsletter .newsletter__inner { display: flex; flex-direction: column; gap: 22px; }
.sec.newsletter.newsletter--card .newsletter__inner { align-items: center; max-width: 720px; margin: 0 auto; padding: 40px 32px; border: 1px solid var(--dr-line-card); border-radius: 22px; background: var(--dr-surface); box-shadow: var(--dr-shadow-card); text-align: center; }
.sec.newsletter.newsletter--band .newsletter__inner { align-items: center; text-align: center; }
.sec.newsletter .newsletter__copy { max-width: 620px; }
.sec.newsletter .newsletter__copy .sec-title { margin-bottom: 8px; font-size: clamp(22px, 3vw, 30px); }
.sec.newsletter .newsletter__form { width: 100%; max-width: 520px; }
.sec.newsletter .newsletter__row { display: flex; gap: 10px; }
.sec.newsletter .newsletter__input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 10px 16px; border: 1px solid var(--dr-control-line, var(--dr-line)); border-radius: 14px; background: var(--dr-surface); color: var(--dr-ink); font-size: 15px; }
.sec.newsletter .newsletter__input:focus { outline: 0; border-color: var(--dr-accent); box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), .18); }
.sec.newsletter .newsletter__input.is-invalid { border-color: var(--dr-bad); box-shadow: 0 0 0 3px rgba(229, 72, 77, .15); }
.sec.newsletter .newsletter__button { flex: none; min-height: 48px; padding: 10px 22px; border-radius: 14px; font-weight: 700; white-space: nowrap; }
.sec.newsletter .newsletter__note { margin-top: 10px; color: var(--dr-ink-3); font-size: 12.5px; }
.sec.newsletter .newsletter__trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sec.newsletter .newsletter__status { margin-top: 10px; padding: 10px 14px; border-radius: 12px; color: var(--dr-ok); background: var(--dr-ok-tint, rgba(22, 163, 74, .1)); font-size: 13.5px; font-weight: 700; }
.sec.newsletter .newsletter__status.is-error { color: var(--dr-bad); background: var(--dr-bad-tint, rgba(229, 72, 77, .1)); }
.sec.newsletter.bg-primary .newsletter__status, .sec.newsletter.dark .newsletter__status { color: #fff; background: rgba(255, 255, 255, .14); }
.sec.newsletter .newsletter__form.is-sent:not([data-newsletter-list]) .newsletter__note::before { content: "Thanks - check your mail app to finish. "; color: var(--dr-ok); font-weight: 700; }
.sec.newsletter.newsletter--card.bg-primary .newsletter__inner, .sec.newsletter.newsletter--card.dark .newsletter__inner { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); box-shadow: none; }
.sec.newsletter.bg-primary .newsletter__input, .sec.newsletter.dark .newsletter__input { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; }
.sec.newsletter.bg-primary .newsletter__input::placeholder, .sec.newsletter.dark .newsletter__input::placeholder { color: rgba(255, 255, 255, .6); }
.sec.newsletter.bg-primary .newsletter__button.btn { background: #fff !important; border-color: #fff !important; color: var(--dr-accent) !important; }
.sec.newsletter.bg-primary .newsletter__note, .sec.newsletter.dark .newsletter__note { color: rgba(255, 255, 255, .7); }
.sec.newsletter.dark .sec-caption span { background: rgba(255, 255, 255, .14); color: #fff; }
.sec.newsletter.dark .sec-subtitle { color: rgba(255, 255, 255, .8); }
@media (min-width: 992px) {
    .sec.newsletter.newsletter--band .newsletter__inner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
    .sec.newsletter.newsletter--band .newsletter__form { flex: none; width: 460px; }
}
@media (max-width: 480px) {
    .sec.newsletter .newsletter__row { flex-direction: column; }
    .sec.newsletter.newsletter--card .newsletter__inner { padding: 28px 20px; }
}

/* Administrator preview of a draft or scheduled page. */
.wbams-cms-preview-notice { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; background: var(--dr-warn-tint, #fff5df); color: var(--dr-warn, #b45309); font-size: 13px; font-weight: 700; text-align: center; }
.wbams-cms-preview-notice__dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }

/* Events section (UpcomingEvents): the next events with a date tile each. */
.sec.events-sec .events-sec__head { max-width: 760px; margin: 0 auto 28px; }
.sec.events-sec .events-sec__caption { display: inline-block; margin-bottom: 8px; color: var(--dr-accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sec.events-sec .events-sec__title { margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.sec.events-sec .events-sec__subtitle { margin: 0; color: var(--dr-ink-2); font-size: 16px; line-height: 1.6; }
.sec.events-sec .events-sec__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.sec.events-sec .events-sec__grid--1 { max-width: 420px; margin: 0 auto; }
.sec.events-sec .events-sec__item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); color: var(--dr-ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.sec.events-sec .events-sec__item:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); text-decoration: none; }
.sec.events-sec .events-sec__item.is-past { opacity: .85; }
.sec.events-sec .events-sec__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dr-soft); }
.sec.events-sec .events-sec__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sec.events-sec .events-sec__item:hover .events-sec__media img { transform: scale(1.04); }
.sec.events-sec .events-sec__media.is-cover { background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-teal-tint)); }
.sec.events-sec .events-sec__media.is-cover > i { color: var(--dr-accent); font-size: 80px; opacity: .18; }
.sec.events-sec .events-sec__date { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 7px 9px; border-radius: 13px; background: var(--dr-surface); line-height: 1; box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.sec.events-sec .events-sec__month { color: var(--dr-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sec.events-sec .events-sec__day { margin-top: 3px; color: var(--dr-ink); font-size: 24px; font-weight: 800; }
.sec.events-sec .events-sec__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.sec.events-sec .events-sec__when { color: var(--dr-accent); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.sec.events-sec .events-sec__name { margin: 0; color: var(--dr-ink); font-size: 18px; font-weight: 800; line-height: 1.3; }
.sec.events-sec .events-sec__where, .sec.events-sec .events-sec__summary { color: var(--dr-ink-2); font-size: 14px; line-height: 1.55; }
.sec.events-sec .events-sec__where i { width: 14px; color: var(--dr-accent); }
.sec.events-sec .events-sec__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sec.events-sec .events-sec__past { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.sec.events-sec .events-sec__more { margin-top: auto; padding-top: 6px; color: var(--dr-accent); font-size: 13px; font-weight: 800; }
.sec.events-sec .events-sec__empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px; border: 1px dashed var(--dr-line); border-radius: var(--dr-radius-card); color: var(--dr-ink-2); }
.sec.events-sec .events-sec__footer { margin-top: 28px; }
.sec.events-sec--list .events-sec__grid { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin: 0 auto; gap: 14px; }
.sec.events-sec--list .events-sec__item { flex-direction: row; }
.sec.events-sec--list .events-sec__media { flex: 0 0 240px; aspect-ratio: auto; min-height: 150px; }
@media (max-width: 767.98px) {
  .sec.events-sec--list .events-sec__item { flex-direction: column; }
  .sec.events-sec--list .events-sec__media { flex-basis: auto; aspect-ratio: 16 / 9; }
}