:root {
  --hre-blue: #57c9f3;
  --hre-blue-dark: #2aaedc;
  --hre-lime: #9ddb00;
  --hre-petrol: #123e52;
  --hre-accent-teal: #12968a;
  --hre-accent-green: #2a9c7e;
  --hre-accent-lime: #d2de48;
  --hre-white: #ffffff;
  --hre-soft-white: #f7fcfd;
  --hre-cloud: #eaf6fb;
  --hre-gray: #eef2f3;

  --hre-radius-pill: 999px;
  --hre-radius-card: 22px;
  --hre-shadow: 0 8px 24px rgba(18, 62, 82, 0.08);

  --hre-font-heading: 'Poppins', sans-serif;
  --hre-font-body: 'Inter', sans-serif;
}

{
  font-family: var(--hre-font-body);
  color: var(--hre-petrol);
  background-color: var(--hre-soft-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--hre-font-heading);
  color: var(--hre-petrol);
  letter-spacing: -0.01em;
}

p,
li,
a {
  font-family: var(--hre-font-body);
}

.hre-hero {
  background: linear-gradient(165deg, var(--hre-blue) 0%, #7ad9f8 55%, var(--hre-cloud) 100%);
  border-radius: 32px;
  box-shadow: var(--hre-shadow);
  color: var(--hre-petrol);
  overflow: hidden;
  padding: clamp(28px, 5vw, 56px);
  position: relative;
}

.hre-hero::after {
  background: radial-gradient(circle at center, rgba(157, 219, 0, 0.4) 0%, rgba(157, 219, 0, 0) 72%);
  border-radius: 999px;
  content: '';
  height: 220px;
  position: absolute;
  right: -56px;
  top: -56px;
  width: 220px;
}

.hre-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(18, 62, 82, 0.16);
  border-radius: var(--hre-radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  padding: 10px 14px;
  text-transform: uppercase;
}

.hre-cta-link {
  color: var(--hre-petrol);
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.hre-cta-link::after {
  content: "->";
  font-weight: 700;
}

.hre-cta-link:hover {
  color: var(--hre-blue-dark);
  text-decoration-color: var(--hre-lime);
}

.hre-cta-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hre-cta-list li + li {
  margin-top: 8px;
}

.hre-cta-list a {
  color: var(--hre-petrol);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hre-cta-list a:hover {
  color: var(--hre-blue-dark);
  text-decoration-color: var(--hre-lime);
}

.hre-card {
  background: var(--hre-white);
  border: 1px solid rgba(18, 62, 82, 0.08);
  border-radius: var(--hre-radius-card);
  box-shadow: var(--hre-shadow);
  padding: clamp(20px, 2.8vw, 30px);
}

.hre-card-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hre-section-alt {
  background: var(--hre-cloud);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 40px);
}

.hre-badge {
  background: var(--hre-lime);
  border-radius: var(--hre-radius-pill);
  color: var(--hre-petrol);
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  padding: 10px 14px;
  text-transform: uppercase;
}

.hre-confetti-dots {
  position: relative;
}

.hre-confetti-dots::before {
  background-image:
    radial-gradient(circle at 12px 8px, var(--hre-lime) 0 4px, transparent 4px),
    radial-gradient(circle at 40px 22px, var(--hre-blue) 0 4px, transparent 4px),
    radial-gradient(circle at 70px 10px, var(--hre-white) 0 4px, transparent 4px);
  content: '';
  height: 34px;
  position: absolute;
  right: 0;
  top: -18px;
  width: 86px;
}

.hre-date-block {
  background: var(--hre-white);
  border-left: 6px solid var(--hre-lime);
  border-radius: 16px;
  max-width: 480px;
  padding: 14px 18px;
}

.hre-date-block strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .hre-hero {
    border-radius: 24px;
  }

  .hre-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Global defaults for TT25 blocks/navigation */
body {
  background-color: var(--hre-soft-white);
  color: var(--hre-petrol);
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
  color: var(--hre-petrol) !important;
}

h2,
.wp-block-heading:is(h2) {
  color: var(--hre-accent-teal) !important;
}

h3,
.wp-block-heading:is(h3) {
  color: var(--hre-accent-green) !important;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.wp-block-heading a {
  color: var(--hre-petrol) !important;
}

a {
  color: var(--hre-blue-dark);
}

a:hover,
a:focus {
  color: var(--hre-petrol);
  text-decoration-color: var(--hre-accent-lime);
}

.wp-block-navigation a,
.wp-block-page-list a,
.wp-block-site-title a,
.wp-block-navigation-item__content {
  color: var(--hre-petrol);
  font-weight: 600;
}

.wp-block-navigation a:hover,
.wp-block-page-list a:hover,
.wp-block-navigation-item__content:hover {
  color: var(--hre-blue-dark);
  text-decoration-color: var(--hre-accent-lime);
}

.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current_page_item > a,
.wp-block-navigation .current-menu-ancestor > a {
  color: var(--hre-blue-dark);
  text-decoration: underline;
  text-decoration-color: var(--hre-accent-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

ul li::marker,
ol li::marker {
  color: var(--hre-accent-lime);
}

hr,
.wp-block-separator {
  border-color: var(--hre-accent-lime) !important;
}

footer.wp-block-template-part,
.wp-block-template-part footer {
  background: var(--hre-cloud);
}

.hre-shell {
  padding-bottom: 48px;
  padding-top: 22px;
}

.hre-highlights {
  gap: 20px;
}

.hre-highlights .wp-block-column {
  min-width: 0;
}

.hre-photo-grid {
  margin-top: 16px;
}

.hre-photo-grid .wp-block-image img {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(18, 62, 82, 0.12);
  object-fit: cover;
}

.hre-hero .wp-block-heading {
  max-width: 16ch;
}

.hre-hero p {
  max-width: 70ch;
}

.hre-site-logo img {
  max-width: 126px;
}

.hre-hero-logo {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(18, 62, 82, 0.12);
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(18, 62, 82, 0.16);
  display: inline-flex;
  margin-bottom: 14px;
  padding: 10px 14px;
}

.hre-hero-logo img {
  max-width: 220px;
  width: 100%;
}