/* Aggregated block styles (public site). */

/* Side-by-side rows (block "width" in the page editor). Columns wrap and
   stack full-width on small screens; inline flex-basis does the sizing. */
.slot-flex { display: flex; flex-wrap: wrap; gap: 1rem; align-items: stretch; }
.slot-flex > .slot-col { min-width: 0; }
@media (max-width: 720px) {
  .slot-flex > .slot-col,
  .slot-flex > .slot-row > .slot-col { flex: 1 1 100% !important; }
}

.block-text, .block-article, .block-footer, .block-cta, .block-contact, .block-map, .block-html, .block-yt,
.block-image, .block-gallery, .block-button, .block-hover-card, .block-feature-card, .block-hero {
  margin: 0 0 1rem;
}
.block-menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.block-menu li { position: relative; }
.block-menu a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Submenu floats .45rem below its parent. The invisible ::after bridge on
   .has-sub items keeps the hover path unbroken across that offset — the
   panel can't vanish between link and submenu, and real borders/radius
   stay intact (no transparent-border seams). */
.block-menu .submenu {
  display: none; position: absolute; left: 0; top: calc(100% + .45rem); z-index: 20;
  flex-direction: column; gap: 0; min-width: 160px;
  background: #fff; padding: .5rem 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.block-menu:not(.is-mobile) li.has-sub::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .45rem;
}
/* hover AND keyboard focus both open the submenu (a11y). */
.block-menu li:hover > .submenu,
.block-menu li:focus-within > .submenu { display: flex; }
.block-menu.style-hamburger .menu-level { flex-direction: column; }
/* Caret marks expandable items (desktop dropdown + mobile tap-to-open). */
.block-menu li.has-sub > a::after { content: "▾"; margin-left: .35em; font-size: .8em; }

/* Menu bar options: alignment, sticky, mobile modes (JS toggles .is-mobile
   per menu's own data-bp breakpoint; the hamburger toggle only appears
   then — no-JS keeps the normal bar). */
.block-menu.align-center > .menu-level { justify-content: center; }
.block-menu.align-right > .menu-level { justify-content: flex-end; }
.block-menu.align-spread > .menu-level { justify-content: space-between; width: 100%; }
.block-menu.is-sticky { position: sticky; top: 0; z-index: 30; }

/* Hamburger toggle — only rendered under .is-mobile; the bars morph to ×
   while the menu is open (site.js toggles .open on the nav). */
.menu-toggle { display: none; background: none; border: 0; cursor: pointer;
  padding: .55rem .6rem; color: inherit; border-radius: 8px; font: inherit; }
.menu-toggle:hover { background: rgba(127, 127, 127, .16); }
.menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mt-bars { display: block; position: relative; width: 22px; height: 16px; }
.mt-bars i { position: absolute; left: 0; width: 22px; height: 2px; border-radius: 1px;
  background: currentColor; transition: transform .2s ease, opacity .15s ease; }
.mt-bars i:nth-child(1) { top: 0; }
.mt-bars i:nth-child(2) { top: 7px; }
.mt-bars i:nth-child(3) { top: 14px; }
.block-menu.open .mt-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.block-menu.open .mt-bars i:nth-child(2) { opacity: 0; }
.block-menu.open .mt-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .mt-bars i { transition: none; } }
.block-menu.is-mobile .menu-toggle { display: block; }

/* Hamburger panel — right-anchored under the toggle (the nav shrinks to the
   button once the bar hides, so left:0;right:0 would squash it). Click-open
   via .open, so the offset below needs no hover bridge. */
.block-menu.is-mobile.mobile-hamburger { position: relative; }
.block-menu.is-mobile.mobile-hamburger > .menu-level {
  display: none; flex-direction: column; gap: 0;
  position: absolute; top: calc(100% + .45rem); right: 0; left: auto;
  width: min(280px, 86vw); max-height: calc(100vh - 5rem); overflow-y: auto; z-index: 40;
  background: #fff; color: #1e2a34;
  padding: .5rem; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
.block-menu.is-mobile.mobile-hamburger.open > .menu-level { display: flex; }

/* Overlay mode — the bar swaps for the same toggle, but the panel is a
   full-viewport sheet (position:fixed;inset:0). NOTE: a transformed or
   backdrop-filtered ANCESTOR would re-anchor fixed elements — template
   header glass must live on a ::before/::after, not on the header itself.
   The toggle stays clickable above the sheet; Esc/outside-click/toggle
   close via site.js. */
.block-menu.is-mobile.mobile-overlay { position: static; }
.block-menu.is-mobile.mobile-overlay > .menu-level {
  display: none; flex-direction: column; gap: .25rem; align-items: stretch;
  position: fixed; inset: 0; z-index: 90;
  background: #fff; color: #1e2a34;
  padding: 4.5rem 1.5rem 2rem; overflow-y: auto;
}
.block-menu.is-mobile.mobile-overlay.open > .menu-level { display: flex; }
.block-menu.is-mobile.mobile-overlay.open > .menu-toggle { position: relative; z-index: 95; }
/* Scroll-lock the page while the sheet is open (progressive enhancement). */
body:has(.block-menu.mobile-overlay.open) { overflow: hidden; }
.block-menu.is-mobile.mobile-stacked > .menu-level { flex-direction: column; gap: .3rem; }
.block-menu.is-mobile .menu-level > li > a { display: block; padding: .55rem .25rem; }
/* Submenu links get matching tap targets — top-level padding alone left
   them cramped and inconsistent on touch screens. */
.block-menu.is-mobile .submenu > li > a { display: block; padding: .45rem .25rem; }

/* Mobile submenus open by tap (.sub-open via site.js), inline + indented. */
.block-menu.is-mobile .submenu {
  position: static; box-shadow: none; border-top: 0;
  display: none; min-width: 0; padding: 0 0 0 1.1rem;
  border-left: 2px solid rgba(0,0,0,.12);
}
.block-menu.is-mobile li.sub-open > .submenu { display: flex; }
/* Optional (submenu_expanded): submenus start expanded inline on mobile —
   the indent stays, only the tap-to-open reveal is skipped, and the caret
   is hidden since there is nothing to unfold. */
.block-menu.is-mobile.sub-expanded .submenu { display: flex; }
.block-menu.is-mobile.sub-expanded li.has-sub > a::after { content: none; }
/* `submenu_style: accordion` — children unfold inline (tap/click via
   .sub-open) instead of floating. On desktop the hover/focus reveal is
   suppressed so only the tap path opens them; sub-expanded keeps them
   permanently open on any screen size. */
.block-menu.sub-accordion .submenu {
  position: static; box-shadow: none; min-width: 0;
  padding: 0 0 0 1.1rem; border-left: 2px solid rgba(0,0,0,.12);
  background: transparent;
}
.block-menu.sub-accordion:not(.is-mobile) li:hover > .submenu,
.block-menu.sub-accordion:not(.is-mobile) li:focus-within > .submenu { display: none; }
.block-menu.sub-accordion li.sub-open > .submenu,
.block-menu.sub-accordion.sub-expanded li > .submenu { display: flex; }
.block-menu.sub-accordion.sub-expanded li.has-sub > a::after { content: none; }
/* Dropdown edge-flip: last top-level items open toward the left so
   the submenu never overflows the viewport on narrow screens. */
.block-menu:not(.is-mobile) .menu-level > li:nth-last-child(-n+2) > .submenu { left: auto; right: 0; }

/* --- Link highlight presets (`highlight` option) -------------------------
   Hover, keyboard focus and the current-item marker share one visual per
   preset. Everything draws from currentColor, so effects pick up whatever
   link colour the template sets; templates can re-skin freely. `hl-none`
   is emitted too — mark-current uses it for its plain-underline marker. */
.block-menu[class*="hl-"] .menu-level > li > a { position: relative; }

/* The line draws on ::before — ::after is already the has-sub caret. */
.block-menu.hl-underline .menu-level > li > a::before,
.block-menu.hl-overline .menu-level > li > a::before {
  content: ""; position: absolute; left: .55em; right: .55em; height: 2px;
  border-radius: 2px; background: currentColor;
  transform: scaleX(0); transition: transform .22s ease;
}
.block-menu.hl-underline .menu-level > li > a::before { bottom: .16em; }
.block-menu.hl-overline .menu-level > li > a::before { top: .16em; }
.block-menu.hl-underline .menu-level > li > a:hover::before,
.block-menu.hl-underline .menu-level > li > a:focus-visible::before,
.block-menu.hl-underline .menu-level > li.is-current > a::before,
.block-menu.hl-underline .menu-level > li.has-current > a::before,
.block-menu.hl-overline .menu-level > li > a:hover::before,
.block-menu.hl-overline .menu-level > li > a:focus-visible::before,
.block-menu.hl-overline .menu-level > li.is-current > a::before,
.block-menu.hl-overline .menu-level > li.has-current > a::before { transform: scaleX(1); }

/* Pill — soft wash behind the label. The rgba fallback stays neutral;
   color-mix tints it with the link colour where supported. */
.block-menu.hl-pill .menu-level > li > a {
  border-radius: 999px;
  transition: background-color .18s ease;
}
.block-menu.hl-pill .menu-level > li > a:hover,
.block-menu.hl-pill .menu-level > li > a:focus-visible,
.block-menu.hl-pill .menu-level > li.is-current > a,
.block-menu.hl-pill .menu-level > li.has-current > a { background: rgba(127, 127, 127, .15); }
@supports (background: color-mix(in srgb, #000 10%, transparent)) {
  .block-menu.hl-pill .menu-level > li > a:hover,
  .block-menu.hl-pill .menu-level > li > a:focus-visible,
  .block-menu.hl-pill .menu-level > li.is-current > a,
  .block-menu.hl-pill .menu-level > li.has-current > a {
    background: color-mix(in srgb, currentColor 14%, transparent);
  }
}

/* Glow — brighten + halo in the link colour. */
.block-menu.hl-glow .menu-level > li > a { transition: text-shadow .2s ease, filter .2s ease; }
.block-menu.hl-glow .menu-level > li > a:hover,
.block-menu.hl-glow .menu-level > li > a:focus-visible,
.block-menu.hl-glow .menu-level > li.is-current > a,
.block-menu.hl-glow .menu-level > li.has-current > a {
  filter: brightness(1.18); text-shadow: 0 0 12px currentColor;
}

/* `mark_current` — site.js tags the link matching the current URL with
   .is-current (+ aria-current="page") and its ancestors with
   .has-current. Client-side on purpose: public pages are cached, so the
   marker can't be baked into the shared HTML. With no hl preset the
   marker is a solid underline; ancestors get a dotted one. Submenu
   items always fall back to the underline — hl-* presets only draw on
   top-level links. */
.block-menu.mark-current.hl-none li.is-current > a,
.block-menu.mark-current .submenu li.is-current > a {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}
.block-menu.mark-current.hl-none .menu-level > li.has-current > a {
  text-decoration: underline dotted; text-underline-offset: .22em;
}

/* --- Submenu reveal (`submenu_fx`) ---------------------------------------
   Keyframe reveal fires whenever the panel flips to display:flex —
   hover/focus dropdowns, mobile tap-open and always-expanded menus. */
.block-menu.subfx-fade .submenu { animation: menu-sub-fade .18s ease; }
.block-menu.subfx-slide .submenu { animation: menu-sub-slide .2s ease; }
@keyframes menu-sub-fade { from { opacity: 0; } }
@keyframes menu-sub-slide { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .block-menu[class*="hl-"] .menu-level > li > a { transition: none; }
  .block-menu[class*="hl-"] .menu-level > li > a::before { transition: none; }
  .block-menu[class*="subfx-"] .submenu { animation: none; }
}

.block-footer { border-top: 1px solid #ddd; padding-top: 1rem; }
.footer-cols { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-col ul { list-style: none; padding: 0; }
.footer-social a { margin-right: .6rem; }
.copyright { color: #777; font-size: .85rem; }

.block-carousel { position: relative; overflow: hidden; }
.block-carousel .slides { position: relative; }
.block-carousel .slide { margin: 0; }
.block-carousel img { width: 100%; display: block; }
/* JS-enhanced: slides stack and cross-animate; the fixed aspect-ratio box
   keeps the layout stable while `visibility` hides inactive slides from
   both paint and keyboard focus. No-JS keeps the `hidden` fallback. */
.block-carousel.js .slides { aspect-ratio: var(--car-ar, 16/9); }
.block-carousel.js .slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.block-carousel.js .slide.is-active {
  opacity: 1; visibility: visible; z-index: 1;
  transition: opacity .6s ease, transform .6s ease;
}
.block-carousel.js[data-effect="slide"] .slide { transform: translateX(4%); }
.block-carousel.js[data-effect="slide"] .slide.is-active { transform: none; }
/* Push effects — the incoming slide physically shoves the outgoing one
   offscreen. JS marks it .is-leaving and sets .dir-next/.dir-prev on the
   root ('push' follows navigation; 'push-from-*' fix the entry side).
   Keyframes own the motion; `both` parks the outgoing slide offscreen
   until its class drops. Push slides stay opaque and hide via an instant
   visibility flip, so a dropped .is-leaving can never flash back in. */
@keyframes car-push-in-r { from { transform: translateX(100%); } }
@keyframes car-push-in-l { from { transform: translateX(-100%); } }
@keyframes car-push-out-r { to { transform: translateX(-100%); } }
@keyframes car-push-out-l { to { transform: translateX(100%); } }
.block-carousel.js[data-effect^="push"] .slide { opacity: 1; transition: visibility 0s; }
.block-carousel.js[data-effect^="push"] .slide.is-leaving { visibility: visible; }
.block-carousel.js[data-effect="push"].dir-next .slide.is-active,
.block-carousel.js[data-effect="push-from-right"] .slide.is-active {
  animation: car-push-in-r .6s ease both;
}
.block-carousel.js[data-effect="push"].dir-prev .slide.is-active,
.block-carousel.js[data-effect="push-from-left"] .slide.is-active {
  animation: car-push-in-l .6s ease both;
}
.block-carousel.js[data-effect="push"].dir-next .slide.is-leaving,
.block-carousel.js[data-effect="push-from-right"] .slide.is-leaving {
  animation: car-push-out-r .6s ease both;
}
.block-carousel.js[data-effect="push"].dir-prev .slide.is-leaving,
.block-carousel.js[data-effect="push-from-left"] .slide.is-leaving {
  animation: car-push-out-l .6s ease both;
}
.block-carousel.js .slide a { display: block; height: 100%; }
.block-carousel.js .slide img { height: 100%; object-fit: cover; }
.block-carousel.js .slide figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem .9rem .6rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
  color: #fff; font-size: .9rem;
}
.block-carousel .carousel-title, .block-carousel .carousel-caption { display: block; }
.block-carousel .carousel-title { font-weight: 700; }

/* Caption entrance — the keyframe runs on .carousel-caption-motion (a
   nested wrapper) so template positional transforms on figcaption are
   never overridden. Direction comes from the root's allowlisted
   data-caption-effect; duration/delay from numeric custom props.
   Activation is CSS-only: the animation (re)starts whenever a slide
   gains .is-active — first activation and every real slide change
   included — and simply doesn't run while the class is unchanged. */
@keyframes car-cap-in {
  from { opacity: 0; transform: translate(var(--car-cap-x, 0), var(--car-cap-y, 0)); }
}
.block-carousel.js[data-caption-effect="from-left"] { --car-cap-x: -150px; }
.block-carousel.js[data-caption-effect="from-right"] { --car-cap-x: 150px; }
.block-carousel.js[data-caption-effect="from-top"] { --car-cap-y: -150px; }
.block-carousel.js[data-caption-effect="from-bottom"] { --car-cap-y: 150px; }
@media (prefers-reduced-motion: no-preference) {
  .block-carousel.js:not([data-caption-effect="none"]) .slide.is-active .carousel-caption-motion {
    animation: car-cap-in var(--car-cap-d, 1200ms) cubic-bezier(.645, .045, .355, 1)
      var(--car-cap-t, 0ms) backwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .block-carousel.js .slide,
  .block-carousel.js[data-effect] .slide {
    transition: opacity .01s linear; transform: none; animation: none;
  }
  .block-carousel.js[data-effect] .slide.is-leaving { visibility: hidden; }
}
.block-carousel figcaption { padding: .4rem .6rem; font-size: .9rem; color: #555; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; background: rgba(0,0,0,.4); color: #fff; border: 0; padding: .5rem .8rem; cursor: pointer; font: inherit; line-height: 1; border-radius: 6px; }
.carousel-btn.prev { left: .5rem; } .carousel-btn.next { right: .5rem; }
.carousel-btn.pause { right: .5rem; top: .5rem; transform: none; font-size: .8rem; }
.carousel-btn:focus-visible { outline: 2px solid #fff; }
.carousel-dots { position: absolute; bottom: .5rem; width: 100%; text-align: center; z-index: 3; }
.carousel-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; margin: 0 3px; padding: 0; background: #fff8; cursor: pointer; }
.carousel-dots button.on { background: #fff; }
.carousel-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.block-carousel .slide:focus-visible { outline: 2px solid #175e9c; }

.block-cta .cta-item img { width: 100%; display: block; }
.cta-btn { display: inline-block; padding: .5rem 1rem; background: #175e9c; color: #fff; text-decoration: none; border-radius: 4px; }
.cta-btn:hover { filter: brightness(1.12); text-decoration: none; }
.cta-btn:focus-visible { outline: 2px solid #0e2f47; outline-offset: 2px; }
@media (max-width: 960px) { .block-cta { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .block-cta { grid-template-columns: 1fr !important; } }

.block-contact label { display: block; font-weight: 600; font-size: .92rem; margin: .4rem 0 .15rem; }
.block-contact input, .block-contact textarea, .block-contact select { width: 100%; max-width: 480px; padding: .45rem .55rem; border: 1px solid #b9c6d2; border-radius: 4px; font: inherit; }
.block-contact input:focus-visible, .block-contact textarea:focus-visible,
.block-contact select:focus-visible { outline: 2px solid #175e9c; outline-offset: 1px; }
.block-contact .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.block-contact button { margin-top: .6rem; padding: .5rem 1.15rem; background: #175e9c; color: #fff; border: 0; border-radius: 4px; cursor: pointer; font: inherit; }
.block-contact button:hover { filter: brightness(1.12); }
.block-contact button:focus-visible { outline: 2px solid #0e2f47; outline-offset: 2px; }

/* Required-field marker (.req inside the field label). */
.block-contact .req { color: #b3402f; font-weight: 700; }

/* Safe captcha row (`captcha` option): display:contents keeps the label,
   image and input as direct grid items of .contact-form so the question
   lines up with the regular fields. */
.contact-form .cap-row { display: contents; }
.contact-form .cap-img {
  display: block; margin: .2rem 0 .5rem; max-width: 100%; height: auto;
  border: 1px solid #cfd6dd; border-radius: 6px; background: #f6f7f9;
}
.contact-form input[name="_cap_a"] { max-width: 9rem; }
.contact-success { padding: 1rem; background: #e8f5e9; border-radius: 6px; }
.contact-error { padding: 1rem; background: #fdecea; border-radius: 6px; color: #7a2a20; }

/* Mailto mode: compact "new mail" window — titlebar, toolbar with the
   open-mail-app action, To/Subject header rows, body fields. site.js
   turns the submit into a prefilled mailto: URL — no backend needed.
   The .contact-form.mail-compose selector must outrank template card
   styling on plain .contact-form (grid, padding, border) so the window
   chrome survives any theme. */
.contact-form.mail-compose {
  display: block; gap: 0; height: auto;
  max-width: 560px; margin: 0; padding: 0; overflow: hidden;
  background: #fff; border: 1px solid #b9c4cf; border-radius: 8px;
  box-shadow: 0 3px 14px rgba(18, 30, 42, .12); font-size: .92rem;
}
.mail-compose .mc-head {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; background: #eef1f5; border-bottom: 1px solid #dde3ea;
}
.mail-compose .mc-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #b9c6d2; }
.mail-compose .mc-title { margin-left: .35rem; font-size: .78rem; font-weight: 600; color: #57687a; letter-spacing: .04em; }
.mail-compose .mc-foot {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .8rem .55rem; border-top: 1px solid #eef1f4;
}
.mail-compose .mc-send {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0; padding: .4rem .95rem; font-size: .88rem;
}
.mail-compose .mc-send .ic { width: .95rem; height: .95rem; }
.mail-compose .mc-to, .mail-compose .mc-subj {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .3rem .8rem; border-bottom: 1px solid #eef1f4;
}
.mail-compose .mc-h {
  flex: none; min-width: 3rem; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: #8090a0;
}
.mail-compose .mc-h label { display: inline; margin: 0; font: inherit; }
.mail-compose .mc-v { color: #24333f; word-break: break-word; }
.mail-compose .mc-subj input { flex: 1; width: auto; max-width: none; border: 0; padding: .1rem 0; font-size: .85rem; }
.mail-compose .mc-body { padding: .1rem .8rem .7rem; }
.mail-compose .mc-body label { display: block; font-weight: 600; font-size: .78rem; margin: .4rem 0 .1rem; color: #43566b; }
.mail-compose .mc-body input, .mail-compose .mc-body textarea, .mail-compose .mc-body select {
  width: 100%; max-width: none; margin: 0; padding: .3rem .5rem; font-size: .85rem;
}
.mail-compose .mc-body input[type="checkbox"] { width: auto; }

.block-map.map-consent { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #e9edf1; border: 1px dashed #9db0c0; }
.block-map .map-load { padding: .6rem 1.4rem; font: inherit; }
.map-note { font-size: .8rem; color: #666; }

.block-yt.yt-consent {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #14181d; color: #e8edf2; border: 1px dashed #5a6b7a; border-radius: 6px;
}
.block-yt .yt-load {
  padding: .6rem 1.4rem; background: #c00; color: #fff;
  border: 0; border-radius: 4px; cursor: pointer; font: inherit; font-weight: 600;
}
.block-yt .yt-load:hover { filter: brightness(1.12); }
.block-yt .yt-load:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.yt-note { font-size: .8rem; color: #9fb0be; margin: .6rem 0 0; }

/* Cookie banner (GDPR) — injected before </body> when enabled. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; gap: 1rem; align-items: center; justify-content: center;
  padding: .8rem 1rem; background: #17222c; color: #fff; font-size: .95rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; }
.cookie-banner-link { color: #9cc7f0; }
.cookie-banner-ok {
  flex: 0 0 auto; background: #fff; color: #17222c; border: 0;
  border-radius: 4px; padding: .45rem 1.1rem; cursor: pointer;
  font: inherit; font-weight: 600;
}
.cookie-banner-ok:focus-visible { outline: 2px solid #9cc7f0; outline-offset: 2px; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; gap: .5rem; text-align: center; }
}

.block-image img { height: auto; display: block; }
.block-image.align-full img { width: 100%; }
.block-image.align-center img { margin: 0 auto; }
.block-image.align-right img { margin-left: auto; }
.block-image figcaption { padding: .4rem .2rem; font-size: .9rem; color: #555; }
.block-image.align-center figcaption { text-align: center; }
.block-image.align-right figcaption { text-align: right; }

.block-gallery .gal-item { margin: 0; }
.block-gallery .gal-item img { width: 100%; display: block; aspect-ratio: var(--gal-ar, auto); object-fit: cover; }
.block-gallery .gal-item figcaption { padding: .35rem .2rem; font-size: .85rem; color: #555; text-align: center; }
.block-gallery .gal-image { position: relative; display: block; }
.block-gallery .gal-img-hover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.block-gallery .gal-item:hover .gal-img-hover,
.block-gallery .gal-item a:focus-visible .gal-img-hover,
.block-gallery .gal-item a:focus-visible .gal-img-hover,
.block-gallery .gal-item:focus-within .gal-img-hover { opacity: 1; }
.block-gallery .gal-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .block-gallery .gal-img-hover { transition: none; }
}
@media (max-width: 960px) { .block-gallery { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .block-gallery { grid-template-columns: 1fr !important; } }

hr.block-divider { border: 0; margin: 1rem auto; color: #999; }
hr.block-divider.s-line { border-top: 1px solid currentColor; }
hr.block-divider.s-thick { border-top: 4px solid currentColor; }
hr.block-divider.s-dotted { border-top: 2px dotted currentColor; }
.block-divider.shape { display: block; margin: 0 auto; }
.block-divider.shape svg { display: block; width: 100%; height: 100%; }
.block-divider.flip svg { transform: scaleY(-1); }

.block-button.align-center { text-align: center; }
.block-button.align-right { text-align: right; }
.block-button.align-stretch .btn { display: block; text-align: center; }
.block-button .btn { display: inline-block; text-decoration: none; font-weight: 600; cursor: pointer; border: 2px solid #175e9c; border-radius: 4px; }
.block-button .btn.b-primary { background: #175e9c; color: #fff; }
.block-button .btn.b-outline { background: transparent; color: #175e9c; }
.block-button .btn.b-ghost { background: transparent; color: #175e9c; border-color: transparent; }
.block-button .btn.s-s { padding: .3rem .8rem; font-size: .85rem; }
.block-button .btn.s-m { padding: .55rem 1.2rem; }
.block-button .btn.s-l { padding: .8rem 1.8rem; font-size: 1.1rem; }
.block-button .btn:hover { filter: brightness(1.12); text-decoration: none; }
.block-button .btn.b-ghost:hover { background: rgba(23, 94, 156, .08); }
.block-button .btn:focus-visible { outline: 2px solid #0e2f47; outline-offset: 2px; }

.block-hover-card { position: relative; overflow: hidden; }
.block-hover-card .hc-front, .block-hover-card .hc-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.block-hover-card .hc-front { background: #33424f; }
.block-hover-card .hc-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.block-hover-card .hc-title { position: relative; margin: 0; padding: 0 1rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.block-hover-card .hc-back { background: #175e9c; color: #fff; padding: 1rem; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.block-hover-card:hover .hc-back, .block-hover-card:focus-within .hc-back { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.block-hover-card .hc-back p { margin: 0; }
.block-hover-card .hc-link { margin-top: .8rem; color: #fff; text-decoration: underline; }
.block-hover-card:focus-visible { outline: 2px solid #175e9c; outline-offset: 2px; }
.block-hover-card.e-slide .hc-back { opacity: 1; transform: translateY(100%); transition: transform .35s ease, visibility 0s linear .35s; }
.block-hover-card.e-slide[data-slide-from="top"] .hc-back { transform: translateY(-100%); }
.block-hover-card.e-slide[data-slide-from="left"] .hc-back { transform: translateX(-100%); }
.block-hover-card.e-slide[data-slide-from="right"] .hc-back { transform: translateX(100%); }
.block-hover-card.e-slide:hover .hc-back, .block-hover-card.e-slide:focus-within .hc-back { transform: none; transition: transform .35s ease; }
.block-hover-card.e-flip { perspective: 800px; }
.block-hover-card.e-flip .hc-front { backface-visibility: hidden; transition: transform .5s ease; }
.block-hover-card.e-flip .hc-back { opacity: 1; visibility: visible; transform: rotateY(180deg); backface-visibility: hidden; transition: transform .5s ease; }
.block-hover-card.e-flip:hover .hc-front, .block-hover-card.e-flip:focus-within .hc-front { transform: rotateY(-180deg); }
.block-hover-card.e-flip:hover .hc-back, .block-hover-card.e-flip:focus-within .hc-back { transform: none; }
@media (prefers-reduced-motion: reduce) { .block-hover-card .hc-front, .block-hover-card .hc-back { transition: none; } }

.block-feature-card { border: 1px solid #dfe8ee; border-radius: 10px; padding: 1.35rem; background: #fff; }
.block-feature-card .fc-media { width: 100%; display: block; border-radius: 8px; margin: 0 0 .9rem; }
.block-feature-card h3 { margin: 0 0 .55rem; }
.block-feature-card .fc-eyebrow { margin: 0 0 .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #57707f; }
.block-feature-card .fc-body > :first-child { margin-top: 0; }
.block-feature-card .fc-body > :last-child { margin-bottom: 0; }
.block-feature-card .fc-link { display: inline-block; margin-top: .8rem; font-weight: 600; }
.block-feature-card.tone-dark { background: #16303f; border-color: #16303f; color: #fff; }
.block-feature-card.tone-dark h3, .block-feature-card.tone-dark .fc-body { color: #fff; }
.block-feature-card.tone-dark .fc-eyebrow { color: #9db8c7; }
.block-feature-card.tone-dark .fc-link, .block-feature-card.tone-dark a { color: #cfe3ee; }

.block-hero { padding: 3rem 0; }
.block-hero .ph-eyebrow {
  display: inline-block; margin: 0 0 1rem; padding: .3rem .7rem;
  border: 1px solid #cfe0ea; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #57707f;
}
.block-hero h1 { margin: 0; font-size: 2.6rem; line-height: 1.05; letter-spacing: -.03em; }
.block-hero.v-home h1 { font-size: 3.4rem; }
.block-hero .ph-lead { margin-top: 1.2rem; font-size: 1.15rem; color: #5d6e7b; max-width: 46ch; }
.block-hero .ph-lead > :first-child { margin-top: 0; }
.block-hero .ph-lead > :last-child { margin-bottom: 0; }
.block-hero .ph-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.block-hero .ph-btn {
  display: inline-block; padding: .7rem 1.4rem; border-radius: 999px;
  background: #175e9c; color: #fff; text-decoration: none; font-weight: 700;
}
.block-hero .ph-btn.secondary { background: transparent; border: 2px solid #175e9c; color: #175e9c; }
.block-hero .ph-btn:hover { filter: brightness(1.12); text-decoration: none; }
.block-hero .ph-btn:focus-visible { outline: 2px solid #0e2f47; outline-offset: 2px; }
.block-hero .ph-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  max-width: 720px; margin-top: 2.4rem;
  border: 1px solid #dfe8ee; border-radius: 14px; overflow: hidden; background: #dfe8ee;
}
.block-hero .ph-stats div { padding: 1rem 1.1rem; background: #fff; }
.block-hero .ph-stats strong { display: block; font-size: 1.4rem; line-height: 1.1; }
.block-hero .ph-stats span { font-size: .82rem; color: #5d6e7b; }
.block-hero.align-center { text-align: center; }
.block-hero.align-center .ph-actions { justify-content: center; }
.block-hero.align-center .ph-lead,
.block-hero.align-center .ph-stats { margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .block-hero h1 { font-size: 2.1rem; }
  .block-hero .ph-stats { grid-template-columns: 1fr; }
}

/* --- Per-block presentation wrapper (.block-wrap) --------------------
   Emitted by BlockStyle::wrap when a block carries fx, an anchor id or
   a background — blocks without any options keep their legacy markup. */

/* Anchors: offset scroll target so sticky headers don't cover it. */
.block-wrap { scroll-margin-top: 5.5rem; }

/* Scroll-reveal: the hidden initial state only exists once JS armed the
   element (.fx-ready); site.js adds .fx-in via IntersectionObserver.
   Duration/delay come from the element's --fx-d/--fx-t custom props. */
.block-wrap.fx-ready {
  opacity: 0;
  transition:
    opacity var(--fx-d, .6s) ease var(--fx-t, 0ms),
    transform var(--fx-d, .6s) ease var(--fx-t, 0ms),
    filter var(--fx-d, .6s) ease var(--fx-t, 0ms);
}
.block-wrap.fx-ready.fx-fade-up { transform: translateY(24px); }
.block-wrap.fx-ready.fx-fade-down { transform: translateY(-24px); }
.block-wrap.fx-ready.fx-fade-left { transform: translateX(28px); }
.block-wrap.fx-ready.fx-fade-right { transform: translateX(-28px); }
.block-wrap.fx-ready.fx-zoom { transform: scale(.86); }
.block-wrap.fx-ready.fx-blur { filter: blur(10px); }
/* Glide — long-distance entrance (150px) with the reference easing; same
   fx duration/delay custom props, still a transition so `once` replay
   semantics stay identical to the fade-* effects. */
.block-wrap.fx-ready.fx-glide-from-left { transform: translateX(-150px); }
.block-wrap.fx-ready.fx-glide-from-right { transform: translateX(150px); }
.block-wrap.fx-ready.fx-glide-from-top { transform: translateY(-150px); }
.block-wrap.fx-ready.fx-glide-from-bottom { transform: translateY(150px); }
.block-wrap.fx-ready.fx-glide-from-left,
.block-wrap.fx-ready.fx-glide-from-right,
.block-wrap.fx-ready.fx-glide-from-top,
.block-wrap.fx-ready.fx-glide-from-bottom {
  transition-timing-function: cubic-bezier(.645, .045, .355, 1);
}
.block-wrap.fx-ready.fx-in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  /* [class*="fx-"] matches the direction rules' specificity — without it
     e.g. fx-fade-up's own transform would outrank this neutralizer. */
  .block-wrap.fx-ready[class*="fx-"] {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}

/* Section background + full-bleed strips. */
.block-wrap.has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.block-wrap.pad-s { padding: .75rem 1rem; }
.block-wrap.pad-m { padding: 1.5rem; }
.block-wrap.pad-l { padding: 3rem 2rem; }
/* Full-bleed: exact only when the parent is viewport-centered (classic
   50vw trick, no-JS fallback). site.js measures the real offset and
   pins both margins to the viewport edges for arbitrary nesting. */
.block-wrap.bleed {
  width: auto; max-width: none;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
body:where(:has(.bleed)) { overflow-x: clip; }
/* Keep row-height equalisation working through the extra wrapper layer. */
.slot-col > .block-wrap { height: 100%; }
.block-wrap > .block:last-child { margin-bottom: 0; }

/* --- Small-screen extras -------------------------------------------- */
.block-text, .block-article { overflow-wrap: break-word; }
.block-text img, .block-article img { max-width: 100%; height: auto; }
@media (max-width: 720px) {
  .block-text table, .block-article table { display: block; overflow-x: auto; max-width: 100%; }
  .carousel-btn { padding: .7rem 1rem; }
}
.block-table-panel .tp-scroll { overflow-x: auto; }
.block-table-panel table { width: 100%; border-collapse: collapse; margin: 0; }
.block-table-panel caption { text-align: left; font-size: .85rem; color: #5d6e7b; padding: .5rem 0; caption-side: bottom; }
.block-table-panel th,
.block-table-panel td { padding: .6rem .8rem; text-align: left; vertical-align: top; }
.block-table-panel thead th { font-weight: 700; color: #16303f; }

/* border variants */
.block-table-panel.tp-horizontal table { border-top: 2px solid #dfe8ee; }
.block-table-panel.tp-horizontal th,
.block-table-panel.tp-horizontal td { border-bottom: 1px solid #dfe8ee; }
.block-table-panel.tp-grid table { border: 1px solid #dfe8ee; }
.block-table-panel.tp-grid th,
.block-table-panel.tp-grid td { border: 1px solid #dfe8ee; }
.block-table-panel.tp-none th,
.block-table-panel.tp-none td { border: 0; }

.block-table-panel.tp-striped tbody tr:nth-child(even) td { background: #f4f8fa; }

/* table_panel — own panel chrome so it renders identically on pages
   that lack the demo .panel rules. */
.block-table-panel { margin: 1.4rem 0; padding: 1.35rem; border: 1px solid #dfe8ee; border-radius: 10px; background: #fff; }
.block-table-panel > :first-child { margin-top: 0; }
.block-table-panel h3 { margin: 0 0 .55rem; }
.block-table-panel .section-label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #57707f; }
.block-table-panel td, .block-table-panel th { overflow-wrap: anywhere; }

/* rt-table — WYSIWYG-inserted tables survive save; same selectors as admin
   so saved output renders identically (keep in sync). */
table.rt-table { border-collapse: collapse; width: 100%; }
.rt-table td, .rt-table th { padding: .45rem .6rem; vertical-align: top; }
.rt-table-horizontal td, .rt-table-horizontal th { border-bottom: 1px solid #dfe8ee; }
.rt-table-horizontal thead th { border-bottom: 2px solid #cfe0ea; }
.rt-table-grid, .rt-table-grid td, .rt-table-grid th { border: 1px solid #dfe8ee; }
.rt-table-none td, .rt-table-none th { border: 0; }
.rt-table caption { caption-side: bottom; font-size: .85rem; color: #5d6e7b; padding: .4rem 0; text-align: left; }
.rt-table thead th { font-weight: 700; text-align: left; }
.rt-table td[align=center], .rt-table th[align=center] { text-align: center; }
.rt-table td[align=right], .rt-table th[align=right] { text-align: right; }
.rt-table td:not([align]), .rt-table th:not([align]) { text-align: left; }
.rt-table td, .rt-table th { overflow-wrap: anywhere; }