/* ===========================================================================
   Island Map — design system (from Claude Design: design/source/IslandMap/Island Map.dc.html)
   Flat "poster" design: solid colour blocks, no shadows, bold Outfit type,
   6/8px radii, scale + colour-shift hovers.

   Bricks builds the markup; element classes (.section, .btn, .partner-card …)
   are styled here. Bricks' own defaults sit in @layer bricks, so these
   unlayered rules win without !important.
   Category colours (--cat, --cat-tint, --cat-ink) are printed inline per
   [data-cat="<slug>"] from the category term meta (inc/site.php).
   =========================================================================== */

:root {
  --navy: #023047;
  --navy-deep: #011a27;
  --teal: #126782;
  --sea: #219ebc;
  --link: #1a7f98;
  --sky: #8ecae6;
  --sky-tint: #d6eef7;
  --amber: #ffb703;
  --orange: #fb8500;
  --rust: #c96a00;
  --sand: #FDF6E3;
  --muted: #F3F4F6;
  --line: #E5E7EB;
  --ink: var(--navy);
  --ink-2: #374151;
  --ink-3: #4B5563;
  --ink-4: #9CA3AF;
  --on-dark: #D1D5DB;

  --font: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --container: 1280px;
  --gutter: 24px;
  --header-h: 72px;
  --admin-bar: var(--wp-admin--admin-bar--height, 0px);
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --ease: .2s ease;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
}

a { color: var(--link); text-decoration: none; transition: color var(--ease), background var(--ease), transform var(--ease); }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { margin: 0; color: inherit; font-family: var(--font); }
p { margin: 0; }
img { max-width: 100%; }
input, textarea, button, select { font-family: inherit; }

:focus-visible { outline: 3px solid var(--sea); outline-offset: 2px; }

/* ------------------------------------------------------------ layout */

.section { position: relative; display: block; width: 100%; overflow: hidden; }
.wrap { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.stack { display: flex; flex-direction: column; gap: 32px; }
.section-head { display: flex; flex-direction: column; gap: 8px; }
.section-head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.bg-white { background: #fff; }
.bg-muted { background: var(--muted); }
.bg-sand { background: var(--sand); }
.bg-navy { background: var(--navy); color: #fff; }
.bg-sky { background: var(--sky); color: var(--navy); }
.bg-amber { background: var(--amber); color: var(--navy); }
.bg-orange { background: var(--orange); color: var(--navy); }

/* Decorative flat shapes (poster look) */
.deco { position: absolute; pointer-events: none; display: block; }
.deco--circle { border-radius: 50%; }
.deco--white { background: #fff; opacity: .08; }

/* ------------------------------------------------------------ type */

.eyebrow { display: block; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.bg-sky .eyebrow, .bg-navy .eyebrow, .bg-amber .eyebrow, .bg-orange .eyebrow { color: inherit; }
.display { font-weight: 800; font-size: clamp(48px, 6.4vw, 96px); line-height: .92; letter-spacing: -.035em; text-wrap: balance; }
.display--page { font-size: clamp(44px, 6vw, 84px); }
.display--md { font-size: clamp(40px, 5vw, 64px); line-height: .95; letter-spacing: -.03em; }
.h2 { font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.h2--xl { font-size: clamp(40px, 5vw, 68px); line-height: .95; letter-spacing: -.03em; }
.h3 { font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 560px; text-wrap: pretty; }
.bg-sky .lede, .bg-navy .lede, .bg-amber .lede, .bg-orange .lede { color: inherit; }
.text-sea { color: var(--sea); }
.prose { font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.prose > * + * { margin-top: 1em; }
.prose a { text-decoration: underline; }

/* Labels / badges / tags */
.badge { display: inline-flex; align-self: flex-start; align-items: center; font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--r); line-height: 1.2; }
.badge--navy { background: var(--navy); color: #fff; }
.badge--white { background: #fff; color: var(--navy); }
.badge--pill { border-radius: 999px; font-size: 12px; padding: 6px 10px; }
.edition { display: inline-block; align-self: flex-start; background: var(--amber); color: var(--navy); font-weight: 700; font-size: clamp(18px, 2vw, 24px); letter-spacing: .08em; text-transform: uppercase; padding: 10px 18px; border-radius: var(--r); }
.tag { position: absolute; z-index: 2; pointer-events: none; display: block; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: var(--r-sm); line-height: 1.2; }
.tag--white { background: #fff; color: var(--navy); }
.tag--navy { background: var(--navy); color: #fff; }
.tag--amber { background: var(--amber); color: var(--navy); }
.tag--teal { background: var(--teal); color: #fff; }
.tag--tl { left: 10px; top: 10px; } .tag--tr { right: 10px; top: 10px; }
.tag--bl { left: 10px; bottom: 10px; } .tag--br { right: 10px; bottom: 10px; }
.cat-tag { display: inline-block; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--cat-tint, var(--sky-tint)); color: var(--navy); line-height: 1.3; }
.pin-num { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; font-size: 15px; line-height: 1; }
.result-label { display: block; font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ------------------------------------------------------------ buttons */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 22px; border: 0; border-radius: var(--r); font-weight: 600; font-size: 16px; line-height: 1; cursor: pointer; white-space: nowrap; background: var(--muted); color: var(--navy); transition: all var(--ease); }
.btn:hover { transform: scale(1.05); }
.btn--lg { height: 60px; padding: 0 28px; font-size: 17px; }
.btn--sm { height: 44px; padding: 0 18px; font-size: 15px; }
.btn--xs { height: 36px; padding: 0 12px; font-size: 14px; }
.btn--primary { background: var(--teal); color: #fff; }
.btn--primary:hover { background: var(--navy); color: #fff; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-deep); color: #fff; }
.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: var(--amber); color: var(--navy); }
.btn--muted:hover { background: var(--line); color: var(--navy); transform: none; }
.btn--outline { background: transparent; border: 4px solid var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; transform: none; }
.btn--outline-white { background: transparent; border: 4px solid #fff; color: #fff; }
.btn--outline-white:hover { background: #fff; color: var(--navy); transform: none; }
.btn--line { background: transparent; border: 2px solid var(--navy); color: var(--navy); }
.btn--line:hover { background: var(--navy); color: #fff; transform: none; }
.link-arrow { font-weight: 600; font-size: 16px; color: var(--navy); border-bottom: 4px solid var(--sky); padding-bottom: 2px; }
.link-arrow:hover { border-color: var(--navy); }

/* ------------------------------------------------------------ header */

#brx-header { position: sticky; top: var(--admin-bar); z-index: 1000; background: #fff; }
.site-header { display: block; background: #fff; }
.site-header__inner { min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.brand:hover { color: var(--navy); }
.brand__pin { position: relative; display: block; width: 44px; height: 54px; flex: none; }
.brand__pin { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 54'%3E%3Cpath d='M22 1C10.4 1 1 10.2 1 21.6 1 36.4 22 53 22 53s21-16.6 21-31.4C43 10.2 33.6 1 22 1z' fill='%23219ebc'/%3E%3C/svg%3E") center / contain no-repeat; }
.brand__im { position: absolute; left: 0; right: 0; top: 9px; text-align: center; font-weight: 800; font-size: 16px; line-height: 1; color: #fff; letter-spacing: -.02em; }
.brand__tci { position: absolute; left: 50%; top: 29px; transform: translateX(-50%); background: var(--amber); color: var(--navy); font-weight: 800; font-size: 10px; line-height: 1; letter-spacing: .06em; padding: 3px 5px; border-radius: 3px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.brand__sub { font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav__link { padding: 10px 14px; border-radius: var(--r); font-weight: 600; font-size: 15px; color: var(--ink-2); line-height: 1.2; }
.site-nav__link:hover { background: var(--muted); color: var(--navy); }
.site-nav__link.is-active { background: var(--navy); color: #fff; }
.site-nav__cta { margin-left: 8px; }

/* ------------------------------------------------------------ home: hero */

.hero { background: #fff; }
.hero__deco1 { width: 520px; height: 520px; background: var(--sky); opacity: .08; left: -180px; bottom: -260px; }
.hero__deco2 { width: 280px; height: 280px; background: var(--amber); opacity: .10; transform: rotate(18deg); right: -90px; top: -110px; }
.hero__inner { padding-top: 40px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.hero__copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero__copy .lede { max-width: 520px; }
/* Size the headline from its column so the long word "Providenciales" always fits beside the tiles. */
.hero__copy { container-type: inline-size; }
.hero__copy .display { font-size: clamp(32px, 14cqw, 96px); }
.hero__grid { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(80px, 9vw, 118px); gap: 8px; }
.tile { position: relative; display: block; border-radius: var(--r); overflow: hidden; background: var(--sky-tint); }
.tile img, .tile .tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile--a { grid-column: 1 / 3; grid-row: 1 / 4; }
.tile--b { grid-column: 3 / 7; grid-row: 1 / 3; background: #e3f3fa; }
.tile--c { grid-column: 3 / 5; grid-row: 3 / 6; }
.tile--d { grid-column: 5 / 7; grid-row: 3 / 6; }
.tile--e { grid-column: 1 / 3; grid-row: 4 / 6; background: #fff1cc; }

/* stats band */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; padding-top: 40px; padding-bottom: 40px; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat__value { font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: #fff; }
.stat__value--amber { color: var(--amber); }
.stat__value--sky { color: var(--sky); }
.stat__value--sm { font-size: 22px; line-height: 1.1; letter-spacing: -.01em; }
.stat__label { font-size: 16px; color: var(--on-dark); text-wrap: pretty; }

/* section padding */
.pad { padding-top: 80px; padding-bottom: 80px; }
.pad--sm { padding-top: 64px; padding-bottom: 64px; }

/* two maps */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; }
.block-card { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 40px; display: flex; flex-direction: column; gap: 20px; transition: transform var(--ease); }
.block-card:hover { transform: scale(1.02); }
.block-card > * { position: relative; }
.block-card > .deco { position: absolute; }
.block-card p { font-size: 18px; line-height: 1.55; max-width: 460px; }
.block-card .btn-row, .block-card > .btn { margin-top: auto; }
.block-card__deco1 { width: 300px; height: 300px; right: -90px; top: -90px; }
.block-card__deco2 { width: 220px; height: 220px; background: #fff; opacity: .15; transform: rotate(24deg); right: -60px; bottom: -80px; }
.logo-panel { background: #fff; border-radius: var(--r-lg); padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.logo-panel img { max-height: 120px; width: auto; object-fit: contain; }
.logo-panel--photo { padding: 0; overflow: hidden; align-self: stretch; }
.logo-panel--photo img { width: 100%; max-height: none; height: 250px; object-fit: cover; display: block; }
.logo-panel__text { font-weight: 800; font-size: 28px; letter-spacing: -.02em; color: var(--navy); }

/* areas grid */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.area-card { position: relative; display: block; height: 280px; border-radius: var(--r); overflow: hidden; background: var(--tint, var(--sky-tint)); color: var(--navy); transition: transform var(--ease); }
.area-card:hover { transform: scale(1.02); color: var(--navy); }
.area-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.area-card__label { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; pointer-events: none; }
.area-card__name { background: var(--navy); color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -.01em; padding: 8px 12px; border-radius: var(--r-sm); line-height: 1.2; }
.area-card__count { background: #fff; color: var(--navy); font-weight: 700; font-size: 14px; padding: 8px 10px; border-radius: var(--r-sm); line-height: 1.2; white-space: nowrap; }
.area-card::before, .area-card::after { content: ""; position: absolute; z-index: 1; border-radius: 50%; background: #fff; opacity: .14; pointer-events: none; }
.area-card::before { width: 220px; height: 220px; right: -70px; top: -70px; }
.area-card::after { width: 130px; height: 130px; left: -40px; bottom: 30px; opacity: .1; }
.area-card:nth-child(3n+2)::before { width: 180px; height: 180px; left: -50px; right: auto; top: -60px; }
.area-card:nth-child(3n+2)::after { width: 160px; height: 160px; right: -50px; left: auto; bottom: 40px; }
.area-card:nth-child(3n)::before { width: 260px; height: 260px; right: -110px; top: auto; bottom: -120px; }
.area-card:nth-child(3n)::after { width: 100px; height: 100px; left: 24px; top: 24px; bottom: auto; }
.area-card__label { z-index: 2; }
.area-card--promo::before, .area-card--promo::after { content: none; }
.area-card--promo { background: var(--orange); padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.area-card--promo .deco { width: 200px; height: 200px; background: #fff; opacity: .18; right: -60px; top: -60px; }
.icon-circle { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--navy); flex: none; transition: transform var(--ease); }
.area-card:hover .icon-circle { transform: scale(1.1); }
.icon-circle::before { content: ""; width: 32px; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1' fill='%23fff' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; }
.promo__text { position: relative; display: flex; flex-direction: column; gap: 8px; }
.promo__title { font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1; }
.promo__body { font-size: 16px; line-height: 1.4; }
.promo__handle { font-weight: 700; font-size: 16px; }

/* partners promo */
.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split__copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 20px; }
.split__media { position: relative; flex: 0 1 380px; width: 100%; height: 460px; border-radius: var(--r-lg); overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-deco { width: 640px; height: 640px; right: -200px; top: -220px; }

/* CTA band */
.advert-card { background: var(--orange); color: var(--navy); padding: 36px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; }
.advert-card > :not(.deco) { position: relative; z-index: 1; }
.advert-card__deco { width: 320px; height: 320px; right: -110px; top: -110px; opacity: .18; }
.advert-card__title { font-weight: 800; font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.02em; line-height: 1.05; }
.advert-card__body { font-size: 18px; line-height: 1.45; }
.cta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cta__copy { display: flex; flex-direction: column; gap: 8px; flex: 1 1 480px; }
.cta__title { font-weight: 800; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -.02em; line-height: 1; }
.cta__copy p { font-size: 18px; }

/* ------------------------------------------------------------ page hero */

.page-hero__deco { width: 420px; height: 420px; background: #fff; opacity: .08; transform: rotate(20deg); right: -120px; top: -160px; }
.page-hero__inner { padding-top: 64px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 16px; }
.page-hero__inner .lede { max-width: 600px; }

/* ------------------------------------------------------------ filters (partners + map) */

.filterbar { position: sticky; top: calc(var(--admin-bar) + var(--header-h)); z-index: 500; background: #fff; overflow: visible; }
.filterbar__inner { padding-top: 16px; padding-bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.im-search { display: block; flex: 1 1 240px; min-width: 0; }
.input, .im-search input { width: 100%; height: 48px; padding: 0 16px; border-radius: var(--r); border: 2px solid transparent; background: var(--muted); font-size: 16px; color: var(--navy); outline: none; transition: all var(--ease); }
.input:focus, .im-search input:focus { background: #fff; border-color: var(--sea); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 600; font-size: 14px; background: var(--muted); color: var(--navy); transition: all var(--ease); }
.chip:hover { transform: scale(1.05); }
.chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cat, var(--sea)); flex: none; }
.chip[aria-pressed="true"] { background: var(--cat); color: var(--cat-ink, #fff); }
.chip[aria-pressed="true"] .chip__dot { background: currentColor; }
.chip--sm { height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; }
.chip--sm .chip__dot { width: 8px; height: 8px; }
.chip--area { border-radius: var(--r); background: var(--navy); color: #fff; }

/* ------------------------------------------------------------ partner cards */

.partners-list { padding-top: 32px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 24px; }
.partner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.partner-card { background: #fff; border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--ease); }
.partner-card:hover { transform: scale(1.02); }
.partner-card[hidden], .partner-card.is-hidden { display: none; }
.partner-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--cat-tint, var(--line)); overflow: hidden; }
.partner-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.partner-card__img--logo { object-fit: contain; padding: 15%; }
.partner-card__initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 64px; letter-spacing: -.03em; color: var(--cat, var(--navy)); opacity: .9; }
.partner-card__media .pin-num { position: absolute; left: 12px; top: 12px; }
.partner-card__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.partner-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.partner-card__area { font-weight: 500; font-size: 13px; color: var(--ink-3); }
.partner-card__name { font-weight: 700; font-size: 22px; letter-spacing: -.02em; line-height: 1.15; }
.partner-card__name a { color: var(--navy); }
.partner-card__name a:hover { color: var(--link); }
.partner-card__bio { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.partner-card__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.partner-card__links:empty { display: none; }
.partner-card__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
.partner-card__links:not(:empty) + .partner-card__actions { margin-top: 0; }
.partner-card__actions .btn { height: 44px; padding: 0 8px; font-size: 14px; }
.partner-card__actions .btn:hover { transform: none; }
.show-more { align-self: center; }
.empty-state { padding: 40px; border-radius: var(--r-lg); background: #fff; text-align: center; font-weight: 600; color: var(--ink-3); }

/* ------------------------------------------------------------ interactive map */

.is-map-page #brx-footer { display: none; }
.mapapp { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; width: 100%; min-height: calc(100vh - var(--header-h) - var(--admin-bar)); background: var(--muted); }
.mapapp__side { flex: 1 1 340px; width: auto; max-width: 100%; display: flex; flex-direction: column; align-items: stretch; background: #fff; height: calc(100vh - var(--header-h) - var(--admin-bar)); min-height: 520px; }
.mapapp__head { padding: 20px 20px 12px; display: flex; flex-direction: column; gap: 12px; }
.mapapp__title { font-weight: 800; font-size: 28px; letter-spacing: -.02em; line-height: 1; }
.mapapp__head .result-label { font-size: 12px; }
.mapapp__head .im-search { flex: none; }
.mapapp__area:empty { display: none; }
.mapapp__list { flex: 1; overflow-y: auto; padding: 0 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.map-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px; border-radius: var(--r); border: 0; cursor: pointer; background: transparent; color: var(--navy); transition: background var(--ease); }
.map-item:hover, .map-item.is-selected { background: var(--muted); }
.map-item__num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--cat, var(--sea)); color: var(--cat-ink, #fff); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.map-item__logo { flex: none; width: 36px; height: 36px; object-fit: contain; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); padding: 3px; box-sizing: border-box; }
.map-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.map-item__name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.map-item__bio { font-size: 13px; color: var(--ink-3); line-height: 1.3; }
.mapapp__map { position: relative; flex: 3 1 480px; min-height: 520px; height: calc(100vh - var(--header-h) - var(--admin-bar)); }
.mapapp__canvas { position: absolute; inset: 0; background: var(--sky-tint); }
.mapapp__note { position: absolute; right: 16px; bottom: 24px; z-index: 500; background: var(--navy); color: #fff; border-radius: var(--r); padding: 10px 14px; font-weight: 600; font-size: 14px; pointer-events: none; }

/* Leaflet: flat skin */
.leaflet-container { font-family: var(--font); background: var(--sky-tint); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: none !important; border-radius: var(--r-lg); }
.leaflet-popup-content-wrapper { border: 2px solid var(--navy); }
.leaflet-bar { border: 0 !important; box-shadow: none !important; }
.leaflet-bar a { color: var(--navy); border-color: var(--line); }
.im-pin-icon { background: none; border: 0; }
.im-pin { width: 100%; height: 100%; border-radius: 50%; background: var(--cat, var(--sea)); border: 3px solid #fff; color: var(--cat-ink, #fff); font: 700 12px/1 var(--font); display: flex; align-items: center; justify-content: center; transition: transform var(--ease); }
.im-pin--icon { background: #fff; border: 3px solid var(--cat, var(--sea)); padding: 3px; box-sizing: border-box; overflow: hidden; }
.im-pin--icon img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50%; }
.im-pin:hover { transform: scale(1.15); }
.im-pin.is-selected { font-size: 15px; outline: 3px solid var(--navy); }
.im-pop { font-family: var(--font); min-width: 180px; }
.im-pop__meta { font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.im-pop__name { font-weight: 700; font-size: 17px; margin: 4px 0; color: var(--navy); line-height: 1.2; }
.im-pop__bio { font-size: 14px; color: var(--ink-2); }
.im-pop__link { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--link); }
.im-pop[data-cat] { border-left: 6px solid var(--cat, var(--sea)); padding-left: 12px; }
.im-pop--basic .im-pop__name { margin-bottom: 0; }
.im-pop__logo { display: block; max-width: 96px; max-height: 44px; object-fit: contain; margin-bottom: 8px; }
.im-pop__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.im-pop__chip { font-weight: 600; font-size: 13px; line-height: 1; padding: 7px 10px; border-radius: 999px; border: 2px solid var(--navy); color: var(--navy); }
.im-pop__chip:hover { background: var(--muted); color: var(--navy); }
.im-pop__chip--primary { background: var(--navy); color: #fff; }
.im-pop__chip--primary:hover { background: var(--link); border-color: var(--link); color: #fff; }
.leaflet-popup-content { margin: 14px 16px; }
.leaflet-popup-content p { margin: 0; }

.mini-map { position: relative; height: 320px; border-radius: var(--r-lg); overflow: hidden; background: var(--sky-tint); }
.mini-map--tall { height: 420px; }

/* ------------------------------------------------------------ single partner / area */

.crumb { display: inline-flex; align-self: flex-start; font-weight: 600; font-size: 15px; color: var(--navy); border-bottom: 3px solid rgba(2, 48, 71, .25); }
.crumb:hover { border-color: var(--navy); color: var(--navy); }
.detail-hero { background: var(--cat-tint, var(--sky)); }
.detail-hero--area { background: var(--tint, var(--sky)); position: relative; overflow: hidden; }
.detail-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.detail-hero--area:has(.detail-hero__bg)::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--tint, #d6eef7) 94%, transparent) 0%, color-mix(in srgb, var(--tint, #d6eef7) 78%, transparent) 38%, transparent 78%); }
.detail-hero--area .detail-hero__inner { position: relative; z-index: 1; }
.detail-hero__inner { padding-top: 48px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.detail-hero__copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.detail-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.detail-hero__meta a { font-weight: 600; font-size: 15px; color: var(--navy); }
.detail-hero__aside { flex: 0 1 360px; width: 100%; }
.logo-box { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--r-lg); background: #fff; overflow: hidden; }
.logo-box img { width: 70%; height: 70%; object-fit: contain; }
.logo-box__initials { font-weight: 800; font-size: 96px; letter-spacing: -.04em; color: var(--cat, var(--navy)); }
.cover { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, .4); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-body { padding-top: 56px; padding-bottom: 80px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.detail-side { display: flex; flex-direction: column; align-items: stretch; width: auto; gap: 16px; position: sticky; top: calc(var(--admin-bar) + var(--header-h) + 16px); }
.feature-img { display: block; width: 100%; border-radius: var(--r-lg); aspect-ratio: 16 / 9; object-fit: cover; }
.info-card { background: var(--muted); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.info-card__title { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.info-row { display: flex; flex-direction: column; gap: 2px; }
.info-row__k { font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.info-row__v { font-weight: 600; font-size: 17px; color: var(--navy); white-space: pre-line; overflow-wrap: anywhere; }
a.info-row__v:hover { color: var(--link); }
.social-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gallery-title { font-weight: 800; font-size: 28px; letter-spacing: -.02em; }
.brxe-image-gallery.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.gallery .bricks-layout-item { width: auto !important; padding: 0 !important; }
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); transition: transform var(--ease); }
.gallery a:hover img { transform: scale(1.02); }
.area-partners { padding-top: 64px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 24px; }
.detail-hero__aside--map { flex: 1 1 440px; }
.detail-hero__aside--map .mini-map { height: 380px; }
.detail-main--narrow { max-width: 920px; }
.feature-img--advert { aspect-ratio: auto; object-fit: contain; background: var(--muted); }

/* ------------------------------------------------------------ contact */

.contact__inner { padding-top: 56px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; }
.contact__panel { flex: 1 1 360px; position: relative; overflow: hidden; background: var(--sky); color: var(--navy); border-radius: var(--r-lg); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.contact__panel > * { position: relative; }
.contact__panel > .deco { position: absolute; width: 320px; height: 320px; left: -120px; bottom: -140px; }
.contact__panel p { font-size: 18px; line-height: 1.55; }
.contact__cards { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.contact-card { background: #fff; color: var(--navy); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 2px; }
.contact-card:hover { color: var(--navy); }
.contact-card__k { font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.contact-card__v { font-weight: 700; font-size: 18px; }
.contact__form { flex: 1.4 1 420px; min-width: 0; }

/* Fluent Forms in the design language */
.contact__form .fluentform .ff-el-group { margin-bottom: 20px; }
.contact__form .fluentform, .contact__form .fluentform input, .contact__form .fluentform textarea, .contact__form .fluentform button { font-family: var(--font); }
.contact__form .fluentform .ff-el-input--label label { font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.contact__form .fluentform .ff-el-form-control { height: 56px; padding: 0 16px; border-radius: var(--r); border: 2px solid transparent; background: var(--muted); font-size: 17px; color: var(--navy); box-shadow: none; transition: all var(--ease); }
.contact__form .fluentform textarea.ff-el-form-control { height: auto; min-height: 160px; padding: 16px; line-height: 1.5; resize: vertical; }
.contact__form .fluentform .ff-el-form-control:focus { background: #fff; border-color: var(--sea); box-shadow: none; outline: none; }
.contact__form .fluentform .ff-el-is-error .ff-el-form-control { border-color: #d14343; }
.contact__form .frm-fluent-form fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; margin: 0; padding: 0; border: 0; min-width: 0; }
.contact__form .frm-fluent-form fieldset > * { grid-column: 1 / -1; }
.contact__form .frm-fluent-form fieldset > .ff-half { grid-column: auto; }
/* Purpose: segmented buttons */
.contact__form .ff-purpose .ff-el-input--content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.contact__form .ff-purpose .ff-el-form-check { margin: 0 !important; display: block; }
.contact__form .ff-purpose .ff-el-form-check-label { position: relative; display: flex !important; align-items: center; justify-content: center; height: 56px; padding: 0 8px; border-radius: var(--r); background: var(--muted); color: var(--navy); font-weight: 600; font-size: 16px; cursor: pointer; text-align: center; line-height: 1.1; transition: all var(--ease); margin: 0; }
.contact__form .ff-purpose .ff-el-form-check-label:hover { transform: scale(1.03); }
.contact__form .ff-purpose .ff-el-form-check-input { position: absolute; opacity: 0; pointer-events: none; }
.contact__form .ff-purpose .ff-el-form-check-input:focus-visible + span { outline: 3px solid var(--sea); outline-offset: 4px; border-radius: var(--r); }
.contact__form .ff-purpose .ff-el-form-check.ff_item_selected .ff-el-form-check-label,
.contact__form .ff-purpose .ff-el-form-check-label:has(input:checked) { background: var(--navy); color: #fff; }
.contact__form .fluentform .ff-btn-submit { height: 60px; padding: 0 32px; border-radius: var(--r) !important; border: 0; background: var(--teal) !important; color: #fff !important; font-weight: 600; font-size: 17px; box-shadow: none; transition: all var(--ease); }
.contact__form .fluentform .ff-btn-submit:hover { background: var(--navy) !important; transform: scale(1.05); opacity: 1; }
.contact__form .ff-message-success { background: var(--sky); border: 0; border-radius: var(--r-lg); padding: 48px; box-shadow: none; color: var(--navy); display: flex; flex-direction: column; gap: 16px; }
.contact__form .ff-message-success .ok { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 30px; color: var(--sea); }
.contact__form .ff-message-success h3 { font-weight: 800; font-size: 44px; letter-spacing: -.02em; line-height: 1; margin: 0; }
.contact__form .ff-message-success p { font-size: 18px; margin: 0; }

/* ------------------------------------------------------------ footer */

.site-footer { display: block; background: var(--navy); color: #fff; }
.site-footer__top { padding-top: 56px; padding-bottom: 56px; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.site-footer__about { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.site-footer__title { font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.site-footer__about p { font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.site-footer__cols { display: flex; gap: 48px; flex-wrap: wrap; }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__head { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.site-footer__col a { color: #fff; font-size: 15px; }
.site-footer__col a:hover { color: var(--amber); }
.site-footer__bottom { padding-bottom: 32px; font-size: 13px; color: var(--ink-4); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1024px) {
  .detail-body { grid-template-columns: 1fr; }
  .detail-side { position: static; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --header-h: 64px; }
  body { font-size: 16px; }
  .site-header__inner { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .brand__pin { width: 36px; height: 44px; }
  .brand__im { top: 7px; font-size: 13px; }
  .brand__tci { top: 23px; font-size: 9px; }
  .site-nav { width: 100%; gap: 2px; justify-content: space-between; flex-wrap: nowrap; }
  .site-nav__link { padding: 8px 7px; font-size: 13px; white-space: nowrap; }
  .site-nav__cta { margin-left: 2px; height: 36px; padding: 0 10px; font-size: 13px; }
  #brx-header { position: relative; top: 0; }
  .filterbar { top: 0; }
  .pad { padding-top: 56px; padding-bottom: 56px; }
  .pad--sm { padding-top: 48px; padding-bottom: 48px; }
  .hero__inner { padding-top: 24px; padding-bottom: 48px; }
  .hero__copy .btn-row .btn { flex: 1 1 auto; }
  .block-card { padding: 28px; }
  .h3 { font-size: 32px; }
  .stat__value { font-size: 36px; }
  .split__media { height: 380px; flex-basis: 100%; }
  .chip { height: 36px; padding: 0 12px; font-size: 13px; }
  .lede { font-size: 17px; }
  .contact__panel { padding: 28px; }
  .contact__form .ff-purpose .ff-el-form-check-label { font-size: 14px; }
  .contact__form .frm-fluent-form fieldset > .ff-half { grid-column: 1 / -1; }
  .detail-hero__aside { flex-basis: 100%; max-width: 280px; }
  .brxe-image-gallery.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Map page: map first, then the list */
  .mapapp { flex-direction: column; }
  .mapapp__map { order: -1; flex: none; height: 56vh; min-height: 340px; }
  .mapapp__side { flex: none; height: auto; min-height: 0; }
  .mapapp__list { overflow: visible; }
  .mapapp__note { right: 8px; bottom: 8px; font-size: 12px; padding: 8px 10px; }
  .is-map-page #brx-footer { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

.partner-grid > .brx-query-trail, .area-grid > .brx-query-trail { display: none; }

/* <aside> elements are Bricks Sections: cancel the section defaults (padding, max width). */
.detail-side, .mapapp__side { padding: 0; margin: 0; max-width: 100%; }
.detail-side { width: 100%; }