/* ============================================================
   ESPA 2025 — Design System
   Fonts: Open Sans (headings), Plus Jakarta Sans (body/UI)
   ============================================================ */


/* ── Variables ─────────────────────────────────────────────── */
:root {
  --navy:          #1A3F72;
  --navy-dark:     #03264F;
  --navy-mid:      #053668;
  --blue:          #1A5CB8;
  --blue-light:    #EBF3FF;
  --blue-link:     #0069FF;
  --blue-link-dark:#0060E6;
  --orange:        #C05621;
  --orange-light:  #FEF3EB;
  --white:         #FFFFFF;
  --gray-50:       #F8FAFC;
  --gray-100:      #EBF3FF;
  --gray-200:      #E5E5E5;
  --gray-300:      #D9D9D9;
  --gray-400:      #C4C4C4;
  --navy-ink:      #0A1F3F; /* footer */
  --surface:       #F4F7FB; /* light band at the top of inner pages */
  --line:          #E2E8F1; /* hairlines: header, page bands */
  --text-dark:     #1A1A1A;
  --text-body:     #3A4D6A;
  --text-mid:      #585858;
  --text-muted:    #81939F;
  --text-slate:    #45688C;
  --green-status:  #1A9C55;
  --red-status:    #C0392B;
  --yellow-status: #E6A817;

  --font-heading:  'Manrope', sans-serif;
  --font-body:     'Inter', sans-serif;

  --max-w:         1280px;
  --pad-x:         80px;
  --radius-sm:     4px;
  --radius:        8px;
  --radius-lg:     12px;
  --radius-xl:     20px;
  --radius-pill:   999px;

  --shadow-card:   0 2px 12px rgba(26,63,114,.08);
  --shadow-card-hover: 0 8px 32px rgba(26,63,114,.16);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --transition:    .2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ── Container ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}
h1 { font-size: clamp(32px, 4vw, 48px); }
h2 { font-size: clamp(28px, 3vw, 40px); }
h3 { font-size: clamp(20px, 2vw, 32px); }
h4 { font-size: 24px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
p  { color: var(--text-body); line-height: 1.7; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--transition), color var(--transition),
              box-shadow var(--transition), transform var(--transition);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(26,92,184,.3);
}
.btn-primary:hover {
  background: var(--blue-link-dark);
  box-shadow: 0 6px 20px rgba(26,92,184,.45);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(10,27,60,.2);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-body);
  border: 1.5px solid var(--gray-300);
}
.btn-ghost:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(10,27,60,.04);
  transform: translateY(-2px);
}

.btn-white {
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.btn-white:hover {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  transform: translateY(-2px);
}

.btn-light {
  background: var(--blue-light);
  color: var(--blue);
}
.btn-light:hover {
  background: #d4e7ff;
  box-shadow: 0 4px 14px rgba(26,92,184,.2);
  transform: translateY(-2px);
}

.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 0 18px; font-size: 13px; height: 42px; }

/* ── Stretched link (makes whole card clickable) ───────────── */
.stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
/* Elements that must remain clickable above the overlay */
.card-action {
  position: relative;
  z-index: 1;
}

/* ── Status Badge ──────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
}
.status-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-badge.active   { background: #e6f9f0; color: var(--green-status); }
.status-badge.active::before { background: var(--green-status); }
.status-badge.closed   { background: #fdecea; color: var(--red-status); }
.status-badge.closed::before { background: var(--red-status); }
.status-badge.expected { background: #fff8e6; color: var(--yellow-status); }
.status-badge.expected::before { background: var(--yellow-status); }

/* ── Section spacing ───────────────────────────────────────── */
.section { padding-block: 80px; }
.section-sm { padding-block: 60px; }
.section-lg { padding-block: 100px; }
.section-title {
  font-size: clamp(28px, 3vw, 40px);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 48px;
}
.section-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-link);
  margin-bottom: 12px;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  height: 72px;
  display: flex;
  align-items: center;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.site-logo { flex-shrink: 0; height: 32px; }
.site-logo img, .site-logo svg { height: 32px; width: auto; }

.site-nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-list > li { position: relative; }
.nav-list > li > a,
.nav-list > li > button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition);
  font-family: var(--font-body);
  white-space: nowrap;
}
.nav-list > li > a:hover,
.nav-list > li > button:hover,
.nav-list > li > button[aria-expanded="true"] { background: var(--surface); color: var(--navy); }
.nav-list > li.current > a { background: var(--blue-light); color: var(--navy); }

.nav-dropdown-toggle svg { transition: transform var(--transition); }
.nav-dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 8px;
  z-index: 10;
}
.nav-dropdown.is-open { display: block; }
.nav-dropdown a {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text-dark);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.nav-dropdown a:hover { background: var(--blue-light); color: var(--navy); }

/* ── Mega menu ───────────────────────────────────────────────── */
.has-mega-menu { position: static !important; }
.mega-menu {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(26,63,114,.12);
  padding: 24px 32px;
  z-index: 200;
  grid-template-columns: repeat(7, 1fr);
  gap: 0 24px;
  align-items: start;
}
.mega-menu.is-open { display: grid; }
.mega-menu-group {
  border-right: 1px solid var(--gray-200);
  padding-right: 20px;
}
.mega-menu-group:last-child { border-right: none; padding-right: 0; }
.mega-menu-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--navy);
}
.mega-menu-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega-menu-group li { margin: 0; }
.mega-menu-group a {
  display: block;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition);
}
.mega-menu-group a:hover { color: var(--navy); font-weight: 600; }

/* Mobile nav category groups */
.mobile-nav-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 0 4px;
  padding: 0 24px;
}
.mobile-nav-sub { padding-left: 36px !important; font-size: 14px; }

/* ── Taxonomy archive page ───────────────────────────────────── */
.tax-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 32px 0 44px;
}
.tax-hero .breadcrumb { background: transparent; border-bottom: none; padding-block: 0; margin-bottom: 20px; }
.tax-hero-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.tax-hero-text { flex: 1; }
.tax-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.tax-hero-title {
  color: var(--navy);
  margin: 0 0 0;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
}
.tax-hero-desc {
  color: var(--text-body);
  margin-top: 12px;
  max-width: 640px;
  font-size: 15px;
  line-height: 1.65;
}
.tax-hero-stat {
  flex-shrink: 0;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 28px;
}
.tax-hero-stat-num {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  font-family: var(--font-heading);
  color: var(--navy);
  line-height: 1;
}
.tax-hero-stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-top: 4px;
}
.tax-desc-strip {
  background: #fff;
  border-bottom: 1px solid var(--gray-100);
  padding: 32px 0;
}
.tax-desc-body {
  max-width: 820px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-mid);
}
.tax-desc-body p { margin: 0 0 12px; }
.tax-desc-body p:last-child { margin-bottom: 0; }
.tax-desc-body strong, .tax-desc-body b { color: var(--text-dark); }
.tax-desc-body ul { list-style: disc; padding-left: 24px; margin: 8px 0 16px; }
.tax-desc-body ol { list-style: decimal; padding-left: 24px; margin: 8px 0 16px; }
.tax-desc-body li { margin-bottom: 6px; }
.tax-desc-body ul ul { list-style: circle; margin: 4px 0 4px; }
.tax-desc-body a { color: var(--blue-link); text-decoration: underline; }
.tax-programs-section { padding-block: 52px 64px; }
.tax-no-results {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
  font-size: 15px;
}
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.section-header-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-link);
  text-decoration: none;
  white-space: nowrap;
}
.section-header-link:hover { text-decoration: underline; }
.section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
}
.section-alt { background: var(--gray-50); padding-block: 52px 64px; }
.section-footer { text-align: center; margin-top: 32px; }
.news-grid-tax {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
/* Legacy small news grid (inside taxonomy section) */
.news-grid:not(.news-grid-tax) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.news-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); position: relative; }
.news-card-image { display: block; aspect-ratio: 16/9; overflow: hidden; }
.news-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card:hover .news-card-image img { transform: scale(1.04); }
.news-card-body { padding: 16px 20px 20px; }
.news-card-date { font-size: 12px; color: var(--text-muted); display: block; margin-bottom: 6px; }
.news-card h3 { font-size: 16px; margin: 0 0 8px; line-height: 1.4; }
.news-card h3 a { color: var(--text-dark); }
.news-card p { font-size: 14px; color: var(--text-muted); margin: 0; }

/* ── archive-hero (kept for other uses) ─────────────────────── */
.archive-hero {
  background: var(--navy);
  color: #fff;
  padding: 40px 0 36px;
}
.archive-hero .breadcrumb { background: transparent; border-bottom: none; padding-block: 0; margin-bottom: 12px; }
.archive-hero .breadcrumb-list { color: rgba(255,255,255,.6); }
.archive-hero .breadcrumb-list a { color: rgba(255,255,255,.7); }
.archive-hero .breadcrumb-list a:hover { color: #fff; }
.archive-hero .breadcrumb-list li:not(:last-child)::after { color: rgba(255,255,255,.4); }
.archive-hero .breadcrumb-list li[aria-current="page"] { color: rgba(255,255,255,.95); font-weight: 500; }
.archive-hero h1 { color: #fff; margin: 4px 0 0; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.archive-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
}
.archive-hero-desc { color: rgba(255,255,255,.75); margin-top: 10px; max-width: 100%; }

/* Search bar */
.header-search {
  position: relative;
  flex-shrink: 0;
}
.header-search input {
  width: 200px;
  height: 40px;
  padding: 0 36px 0 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-dark);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.header-search input::placeholder { color: var(--text-muted); }
.header-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,92,184,.1); }
.header-search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.header-search-btn:hover { color: var(--navy); }

.header-cta { flex-shrink: 0; }

/* Language switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.lang-item {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 11px;
  border-radius: 999px;
  transition: background var(--transition), color var(--transition);
  color: var(--text-muted);
  line-height: 1;
}
a.lang-item:hover {
  background: var(--surface);
  color: var(--navy);
}
.lang-active {
  background: var(--navy);
  color: var(--white);
  pointer-events: none;
}
.lang-sep { display: none; }

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 8px;
}
.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; }

/* ── Header over the home hero ───────────────────────────────── *
 * Home only (views/home.php sets $header_on_hero). While the hero is
 * under it the header keeps the old navy look; main.js removes
 * .is-on-hero once the hero has scrolled past, or while the burger
 * menu is open, and the light header above takes over with a fade.
 */
.site-header--hero {
  transition: background-color .3s cubic-bezier(0.25, 1, 0.5, 1),
              border-color .3s cubic-bezier(0.25, 1, 0.5, 1);
}
.site-header--hero .site-logo { position: relative; }
.site-header--hero .site-logo img { transition: opacity .3s cubic-bezier(0.25, 1, 0.5, 1); }
.site-header--hero .logo-light { position: absolute; left: 0; top: 0; opacity: 0; }
.site-header--hero .header-search input,
.site-header--hero .lang-switcher {
  transition: background-color .3s cubic-bezier(0.25, 1, 0.5, 1),
              border-color .3s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow var(--transition);
}
.site-header--hero .mobile-menu-toggle span {
  transition: transform var(--transition), opacity var(--transition), background-color .3s cubic-bezier(0.25, 1, 0.5, 1);
}

.site-header.is-on-hero { background: var(--navy); border-bottom-color: transparent; }
.site-header.is-on-hero .logo-light { opacity: 1; }
.site-header.is-on-hero .logo-dark  { opacity: 0; }
.is-on-hero .nav-list > li > a,
.is-on-hero .nav-list > li > button { color: var(--white); }
.is-on-hero .nav-list > li > a:hover,
.is-on-hero .nav-list > li > button:hover,
.is-on-hero .nav-list > li > button[aria-expanded="true"] { background: rgba(255,255,255,.12); color: var(--white); }
.is-on-hero .header-search input {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
  color: var(--white);
}
.is-on-hero .header-search input::placeholder { color: rgba(255,255,255,.6); }
.is-on-hero .header-search input:focus { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); box-shadow: none; }
.is-on-hero .header-search-btn { color: rgba(255,255,255,.7); }
.is-on-hero .header-search-btn:hover { color: var(--white); }
.is-on-hero .lang-switcher { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
.is-on-hero .lang-item { color: rgba(255,255,255,.75); }
.is-on-hero a.lang-item:hover { background: rgba(255,255,255,.15); color: var(--white); }
.is-on-hero .lang-active { background: var(--white); color: var(--navy); }
.is-on-hero .mobile-menu-toggle span { background: var(--white); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--navy);
  position: relative;
  overflow: hidden;
  min-height: 700px;
  display: flex;
  align-items: center;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, rgba(26,92,184,.8) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-top: 100px;
  padding-bottom: 130px;
}
.hero-content {}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.15);
  color: var(--white);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(32px, 3.5vw, 48px);
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero p {
  font-size: 16px;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 560px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-image-wrap {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(26,63,114,.55) 0%, rgba(26,92,184,.35) 100%);
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-blob {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  pointer-events: none;
  position: relative;
  z-index: 0;
}

/* ── Hero wave divider ──────────────────────────────────────── */
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 3;
}
.hero-wave svg { width: 100%; height: 56px; display: block; }

/* ============================================================
   MOTION SYSTEM
   ============================================================ */

/* ── Hero entrance — single confident fade-up ── */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .hero-content {
  animation: heroReveal 0.75s var(--ease-out-expo) both;
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease-out-expo), transform 0.65s var(--ease-out-expo);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered grid containers — JS sets transition-delay on each child */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-content,
  .reveal,
  [data-reveal-stagger] > * {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 14px;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 32px;
}
.breadcrumb a { color: var(--text-muted); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb-sep { color: var(--gray-300); }
.breadcrumb-current { color: var(--text-dark); font-weight: 500; }

/* ============================================================
   SECTION: WHAT WE OFFER (Τι Προσφέρουμε)
   ============================================================ */
.offers-section {
  background: var(--white);
  padding-block: 80px;
}
.offers-lead {
  margin-top: -32px; /* sits close under the title, which carries the section's 48px gap */
  max-width: 560px;
  font-size: 17px;
  color: var(--text-mid);
}
/* Three tinted cards; the icon tile and a step number in the corner carry the design. */
.offers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 32px;
  border-radius: var(--radius-xl);
  background: var(--blue-light);
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.offer-card:hover {
  background: var(--white);
  border-color: var(--blue-light);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.offer-num {
  position: absolute;
  top: 28px;
  right: 28px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-slate);
  opacity: .55;
}
.offer-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(26,63,114,.08), 0 0 0 1px rgba(26,63,114,.06);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.offer-icon svg { width: 26px; height: 26px; }
.offer-card:hover .offer-icon { background: var(--navy); color: var(--white); }
.offer-card h3 {
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy-mid);
  font-family: var(--font-heading);
}
.offer-card p { font-size: 15px; color: var(--text-mid); line-height: 1.65; margin: 0; }

/* ============================================================
   SECTION: ABOUT (Ακούμε, συμβουλεύουμε)
   ============================================================ */
.about-section {
  background: var(--blue-light);
  padding-block: 80px;
}
/* One centred column of text; the section has no second column. */
.about-inner {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.about-content .section-label { color: var(--navy); opacity: .6; }
.about-content h2 { color: var(--navy-mid); margin-bottom: 20px; }
.about-content p { color: var(--text-mid); font-size: 16px; }

/* ============================================================
   SECTION: PROGRAMS (Προγράμματα που σας ενδιαφέρουν)
   ============================================================ */
.programs-section {
  background: var(--gray-50);
  padding-block: 80px;
}
.programs-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}

/* Program card — home/grid view */
.program-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.program-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.program-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.program-card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-dark) 0%, #1A5CB8 100%);
}
.program-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.program-card:hover .program-card-image img { transform: scale(1.04); }
.program-card-body {
  padding: 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.program-card-category {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.program-card h3 {
  font-size: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy-mid);
  line-height: 1.4;
}
.program-card p {
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.55;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.program-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.program-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-slate);
}
.program-card-meta svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Program card — list view */
.program-list-card {
  position: relative;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  transition: box-shadow var(--transition), border-color var(--transition);
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 16px;
}
.program-list-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(26,63,114,.15);
}
.program-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.program-list-card-launch {
  font-size: 14px;
  color: var(--text-muted);
}
.program-list-card-launch span { color: var(--text-mid); }
.program-list-card-category {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
.program-list-card h2 {
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy-mid);
  line-height: 1.4;
  margin-bottom: 8px;
}
.program-list-card p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.program-list-card-details {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.program-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  border-right: 1px solid var(--gray-200);
  flex-shrink: 0;
}
.program-detail-item:first-child { padding-left: 0; }
.program-detail-item:last-child  { border-right: none; }
.program-detail-item svg { width: 16px; height: 16px; color: var(--navy); flex-shrink: 0; }
.program-detail-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.program-detail-value { font-size: 13px; font-weight: 600; color: var(--text-dark); white-space: nowrap; }

/* ============================================================
   SECTION: FUNDING (Αναζητώ ενίσχυση / Έχω εγκριθεί)
   ============================================================ */
.funding-section {
  background: var(--navy);
  padding-block: 60px;
}
.funding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.funding-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background var(--transition);
}
.funding-card:hover { background: rgba(255,255,255,.12); }
.funding-card h3 {
  font-size: clamp(22px, 2vw, 32px);
  font-family: var(--font-heading);
  color: var(--white);
  font-weight: 700;
}
.funding-card p {
  font-size: 16px;
  color: rgba(255,255,255,.75);
  line-height: 1.65;
}
.funding-card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.funding-card-icon svg { width: 32px; height: 32px; color: var(--white); }
.funding-card .btn { align-self: flex-start; }

/* ============================================================
   SECTION: PROGRAMS NUMBERED LIST
   ============================================================ */
.pn-section { background: var(--gray-50); }

/* ── Header ── */
.pn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px; /* same heading-to-content gap as the other sections */
}
.pn-header h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); }

.pn-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 10px 20px;
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  transition: background .25s, color .25s;
}
.pn-view-all:hover { background: var(--navy); color: var(--white); }
.pn-view-all svg { transition: transform .25s; }
.pn-view-all:hover svg { transform: translateX(4px); }

/* ── List shell ── */
.pn-list {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

/* ── Each row ── */
.pn-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0;
  padding: 22px 32px 22px 24px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  text-decoration: none;
  overflow: hidden;
  transition: background .4s ease;
}
.pn-item:last-child { border-bottom: none; }

/* Fill background on hover */
.pn-item:hover { background: var(--navy); }

/* ── Sliding accent bar (left edge) ── */
.pn-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s ease;
}
.pn-item:hover .pn-accent { transform: scaleY(1); }

/* ── Background image strip (right side, always visible) ── */
.pn-img {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 260px;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.85) 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.7) 55%, rgba(0,0,0,.85) 100%);
  opacity: .18;
  transition: opacity .4s ease, width .4s ease;
  pointer-events: none;
}
.pn-item:hover .pn-img {
  opacity: .55;
  width: 340px;
}

/* ── Watermark number ── */
.pn-watermark {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 64px;
  font-weight: 900;
  color: var(--gray-100);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: color .4s ease, opacity .4s ease;
  z-index: 0;
}
.pn-item:hover .pn-watermark { color: rgba(255,255,255,.07); }

/* ── Left index (legacy — unused) ── */
.pn-index { display: none; }
.pn-num   { display: none; }
.pn-tag   { display: none; }

/* ── Body (title + subtitle) ── */
.pn-body {
  padding: 0 0 0 80px;
  position: relative;
  z-index: 1;
}
.pn-title {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 5px;
  transition: color .4s;
}
.pn-item:hover .pn-title { color: var(--white); }
.pn-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  transition: color .4s;
}
.pn-item:hover .pn-sub { color: rgba(255,255,255,.6); }

/* ── Right (count + arrow) ── */
.pn-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .4s;
}
.pn-count strong {
  font-size: 20px;
  font-weight: 800;
  color: var(--navy);
  display: block;
  line-height: 1;
  margin-bottom: 2px;
  transition: color .4s;
}
.pn-item:hover .pn-count       { color: rgba(255,255,255,.55); }
.pn-item:hover .pn-count strong { color: var(--white); }

/* ── Right (status + arrow) ── */
.pn-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  padding-right: 8px;
}
.pn-status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  transition: background .4s, color .4s;
}
/* Override status-badge colors on hover */
.pn-item:hover .pn-status {
  background: rgba(255,255,255,.15) !important;
  color: var(--white) !important;
}
.pn-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  flex-shrink: 0;
  transition: background .4s, border-color .4s, color .4s, transform .4s;
}
.pn-item:hover .pn-arrow {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transform: translateX(6px);
}

/* ── Cursor-follower image ── */
.pn-cursor-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  transition: opacity .3s ease, scale .3s ease;
  scale: 0.85;
}
.pn-cursor-img.is-visible {
  opacity: 1;
  scale: 1;
}
.pn-cursor-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .25s ease;
}
.pn-cursor-img img.is-loading { opacity: 0; }
/* Label bar at the bottom of the floating image */
.pn-cursor-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(3,18,40,.85) 0%, transparent 100%);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  padding: 28px 16px 12px;
}

/* ============================================================
   SECTION: LATEST NEWS (Τελευταία Νέα)
   ============================================================ */
.news-section {
  background: var(--gray-50);
  padding-block: 80px;
}
.news-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
/* On the home page the sector list before it is already grey; white keeps the two apart. */
.home-news-section { background: var(--white); }
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Featured first card on homepage — spans 2 cols, horizontal layout */
.home-news-section .news-grid .news-card:first-child {
  grid-column: span 2;
  flex-direction: row;
}
.home-news-section .news-grid .news-card:first-child .news-card-image {
  width: 52%;
  flex-shrink: 0;
  aspect-ratio: unset;
  min-height: 220px;
}
.home-news-section .news-grid .news-card:first-child .news-card-body {
  padding: 32px 28px;
  justify-content: center;
}
.home-news-section .news-grid .news-card:first-child h3 {
  font-size: 20px;
  line-height: 1.3;
}
.home-news-section .news-grid .news-card:first-child p {
  font-size: 14px;
  -webkit-line-clamp: 4;
}
.news-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.news-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.news-card-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--gray-100);
}
.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.news-card:hover .news-card-image img { transform: scale(1.05); }
.news-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.news-card-date { font-size: 12px; color: var(--text-muted); }
.news-card h3 {
  font-size: 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--navy-mid);
  line-height: 1.4;
}
.news-card p { font-size: 13px; color: var(--text-mid); flex: 1; }
.news-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-link);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--transition);
}
.news-card-link:hover { gap: 8px; }

/* ============================================================
   SECTION: APPOINTMENT (Κλείστε ένα τηλεφωνικό ραντεβού)
   ============================================================ */
.appointment-section {
  background: linear-gradient(135deg, #020e1f 0%, #0a2240 45%, #1a3f72 100%);
  padding-block: 110px;
  position: relative;
  overflow: hidden;
}

/* Decorative atmospheric blobs */
.appt-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.appt-blob--1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(26,92,184,.22) 0%, transparent 65%);
  top: -250px; right: -150px;
}
.appt-blob--2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(26,92,184,.15) 0%, transparent 65%);
  bottom: -200px; left: -100px;
}
.appt-blob--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(96,165,250,.1) 0%, transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Eyebrow badge */
.appt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  letter-spacing: .03em;
  backdrop-filter: blur(4px);
}
.appt-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  flex-shrink: 0;
  animation: apptPulse 2s ease-in-out infinite;
}
@keyframes apptPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}

.appointment-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  max-width: 620px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.appointment-cta-wrap h2 {
  margin-bottom: 0;
  color: var(--white);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
}
.appointment-cta-wrap > p {
  font-size: 17px;
  color: rgba(255,255,255,.7);
  max-width: 460px;
  line-height: 1.7;
  margin-bottom: 4px;
}

/* CTA button — white on dark */
.appt-btn {
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: 16px;
  padding: 16px 36px;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.appt-btn:hover {
  background: var(--blue-light);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.appt-btn svg { color: var(--navy); }

.appointment-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.appointment-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  padding: 7px 16px;
  backdrop-filter: blur(4px);
}
.appointment-pill svg { color: rgba(255,255,255,.6); flex-shrink: 0; }

/* Prevent scroll behind any modal */
body.modal-open { overflow: hidden; }

/* ── Calendly modal ─────────────────────────────────────────── */
.calendly-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.calendly-modal[hidden] { display: none; }
.calendly-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,18,40,.65);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.calendly-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 900px;
  height: min(700px, 90vh);
  box-shadow: 0 32px 80px rgba(3,18,40,.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: calendlySlideIn .3s ease;
}
@keyframes calendlySlideIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.calendly-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(3,18,40,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background var(--transition);
}
.calendly-modal-close:hover { background: rgba(3,18,40,.15); }
.calendly-modal-panel .calendly-inline-widget { flex: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy-ink);
  color: rgba(255,255,255,.75);
}
.footer-main {
  padding-block: 56px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}
.footer-brand {}
.footer-logo { height: 30px; margin-bottom: 18px; }
.footer-logo img { height: 30px; width: auto; }
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.85);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.footer-social a:hover { background: var(--white); border-color: var(--white); color: var(--navy-ink); }
.footer-social svg { width: 17px; height: 17px; }

.footer-links {
  display: block;
}
.footer-links-col h4,
.nl-footer-heading {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.footer-links-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-links-col a {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  transition: color var(--transition);
}
.footer-links-col a:hover { color: var(--white); }

/* Footer newsletter: heading, one line of text, email + button on one row */
.footer-newsletter { max-width: 420px; }
.nl-footer-body { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.75); margin-bottom: 16px; }
.nl-footer-row { display: flex; gap: 8px; }

.newsletter-form { display: flex; flex-direction: column; gap: 0; }

.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--white);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  box-sizing: border-box;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,.45); }
.newsletter-form input[type="email"]:focus {
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.1);
}
.newsletter-form input.nl-input-error { border-color: #fc8181 !important; }

.nl-footer-channel-label {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-bottom: 10px;
  line-height: 1.5;
}

.nl-footer-channels { display: flex; gap: 8px; margin-bottom: 16px; }

.nl-footer-channel-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  background: var(--blue-link);
  color: var(--white);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  cursor: default;
  user-select: none;
}

.nl-footer-gdpr {
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  margin-top: 12px;
}

/* Same blue as the header's "Book a free consultation" button (.btn-primary) */
.newsletter-form button {
  flex-shrink: 0;
  height: 44px;
  padding: 0 20px;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--transition), transform 0.1s;
}
.newsletter-form button:hover { background: var(--blue-link-dark); transform: translateY(-1px); }
.newsletter-form button:active { transform: translateY(0); }

/* ── Newsletter modal ────────────────────────────────────────── */
body.nl-modal-open { overflow: hidden; }

.nl-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; }
.nl-modal[hidden] { display: none; }

.nl-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 18, 40, 0.6);
  backdrop-filter: blur(4px);
}

.nl-modal-box {
  position: relative;
  background: #f4f7fc;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(8, 18, 40, 0.32);
  animation: nl-slide-up 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes nl-slide-up {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Gradient header ── */
.nl-modal-header {
  position: relative;
  background: linear-gradient(135deg, #1A4F9E 0%, #1A5CB8 55%, #2271d1 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 28px 32px 24px;
  text-align: center;
  overflow: hidden;
}
/* decorative blobs */
.nl-modal-header::before {
  content: '';
  position: absolute; top: -50px; right: -50px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}
.nl-modal-header::after {
  content: '';
  position: absolute; bottom: -40px; left: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}

.nl-modal-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  margin-bottom: 12px;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.25);
}

.nl-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  transition: background var(--transition), border-color var(--transition);
  z-index: 1;
}
.nl-modal-close:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); color: #fff; }

.nl-modal-box h3 { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 6px; position: relative; }
.nl-modal-sub    { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.5; margin-bottom: 0; position: relative; }

/* ── Form body ── */
#newsletter-modal-form { padding: 24px 28px 28px; }

.nl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.nl-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.nl-field label { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.nl-field input[type="email"],
.nl-field input[type="text"],
.nl-field input[type="tel"] {
  padding: 9px 12px;
  border: 1.5px solid #d6dfe8;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--text-dark);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.nl-field input[type="email"]:focus,
.nl-field input[type="text"]:focus,
.nl-field input[type="tel"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,92,184,0.12); }

.nl-hint { font-size: 11px; color: var(--text-muted); margin: -2px 0 6px; }
.nl-required { color: #dc2626; margin-left: 2px; }
.nl-submit-btn:disabled,
.nl-submit-btn[disabled] { opacity: .4 !important; cursor: not-allowed !important; pointer-events: none; }
.nl-privacy-field { margin-top: 4px; }
.nl-privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dark);
  cursor: pointer;
  font-weight: 400;
}
.nl-privacy-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--navy);
  cursor: pointer;
}
.nl-privacy-label a { color: var(--navy); text-decoration: underline; }
.nl-privacy-label a:hover { opacity: .75; }
.nl-privacy-error {
  display: block;
  font-size: 12px;
  color: #dc2626;
  margin-top: 4px;
  margin-left: 26px;
}

/* Phone group */
.nl-phone-group {
  display: flex;
  align-items: center;
  border: 1.5px solid #d6dfe8;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.nl-phone-group:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,92,184,0.12); }

.nl-phone-code {
  flex-shrink: 0;
  width: 100px;
  padding: 9px 8px 9px 12px;
  border: none;
  border-right: 1px solid #e2e8f0;
  background: #f4f7fc;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2381939F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}
.nl-phone-code:focus { background-color: #eef2f8; }

.nl-phone-divider {
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  flex-shrink: 0;
  display: none; /* handled by border-right on select */
}

.nl-phone-group input[type="tel"] {
  flex: 1;
  padding: 9px 12px;
  border: none;
  font-size: 13px;
  color: var(--text-dark);
  background: var(--white);
  outline: none;
  min-width: 0;
}
.nl-phone-group input[type="tel"]::placeholder { color: var(--text-muted); }

/* Language toggle */
.nl-lang-toggle {
  display: flex;
  border: 1.5px solid #d6dfe8;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.nl-lang-opt { flex: 1; cursor: pointer; }
.nl-lang-opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.nl-lang-opt span {
  display: block;
  padding: 8px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  background: var(--white);
  transition: background var(--transition), color var(--transition);
  user-select: none;
}
.nl-lang-opt:first-child span { border-right: 1.5px solid var(--gray-200); }
.nl-lang-opt input:checked + span {
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
}
.nl-lang-opt:hover input:not(:checked) + span { background: var(--blue-light); }

.nl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nl-pill {
  padding: 6px 13px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  line-height: 1.4;
  text-align: left;
}
.nl-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}
.nl-pill.is-selected {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  font-weight: 600;
}

.nl-message {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}
.nl-msg--success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.nl-msg--error   { background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; }

/* ── Modal success state ── */
.nl-success-wrap { border-radius: var(--radius-lg); overflow: hidden; }

.nl-success {
  padding: 40px 28px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: nl-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nl-success[hidden] { display: none; }

.nl-success-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, #e8f0fe 0%, #dbeafe 100%);
  border-radius: 50%;
  color: var(--blue);
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(26,92,184,0.15);
}
.nl-success-check {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 22px; height: 22px;
  background: #22c55e;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(34,197,94,.4);
}

.nl-success-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-light);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}

.nl-success-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 12px;
  max-width: 380px;
}

.nl-success-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 400px;
}

.nl-submit-btn {
  width: 100%;
  justify-content: center;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-top: 8px;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(26, 92, 184, 0.35);
  transition: background var(--transition), box-shadow var(--transition), transform 0.1s;
}
.nl-submit-btn:hover {
  background: var(--blue-link-dark);
  box-shadow: 0 6px 20px rgba(26, 92, 184, 0.45);
  transform: translateY(-1px);
}
.nl-submit-btn:active { transform: translateY(0); box-shadow: none; }

@media (max-width: 520px) {
  .nl-modal-header  { padding: 22px 20px 20px; }
  #newsletter-modal-form { padding: 20px 18px 22px; }
  .nl-row           { grid-template-columns: 1fr; gap: 0; }
  .nl-modal-box h3  { font-size: 17px; padding-right: 40px; }
  .nl-modal-icon    { width: 44px; height: 44px; margin-bottom: 10px; }
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-copy { font-size: 13px; color: rgba(255,255,255,.55); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; width: 100%; }
.footer-legal-links { display: flex; gap: 16px; }
.footer-legal-links a { font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none; }
.footer-legal-links a:hover { color: var(--white); }

/* ============================================================
   PROGRAMS ARCHIVE PAGE
   ============================================================ */
.archive-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: 48px;
}
.archive-header h1 { color: var(--navy); font-size: 40px; margin-bottom: 8px; }
.archive-header p  { color: var(--text-body); font-size: 16px; }

/* Filter options, inside the filter bar's dropdowns and drawer (partials/filter-bar.php) */
.filter-checkbox,
.filter-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
}
.filter-checkbox input,
.filter-radio input {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  accent-color: var(--navy);
  cursor: pointer;
  flex-shrink: 0;
}
.filter-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--gray-100);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.filter-parent-term {
  font-weight: 500;
}
.filter-child-term {
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-muted);
}
.filter-clear-btn {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  letter-spacing: .02em;
  transition: color var(--transition);
  line-height: 1;
}
.filter-clear-btn:hover { color: var(--blue); }

/* Filter backdrop overlay */
.filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 999;
  transition: background var(--transition);
}
.filter-overlay.is-active {
  display: block;
  background: rgba(0,0,0,0.45);
}

/* Prevent body scroll when filter is open */
body.filter-open { overflow: hidden; }

/* Programs list */
.programs-list { display: flex; flex-direction: column; gap: 16px; }
.programs-count { font-size: 14px; color: var(--text-muted); }

.archive-search {
  position: relative;
  display: flex;
  align-items: center;
}
.archive-search input {
  width: 220px;
  height: 40px;
  padding: 0 36px 0 14px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-dark);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.archive-search input::placeholder { color: var(--text-muted); }
.archive-search input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,92,184,.1);
}
.archive-search svg {
  position: absolute;
  right: 12px;
  color: var(--text-muted);
  pointer-events: none;
}
.programs-count strong { color: var(--text-dark); }

/* ── Programme filters: toolbar, dropdowns, drawer, chips ──────
   #pf-groups holds the filter groups once. Closed, it is "display: contents"
   so the groups sit in the toolbar as dropdown buttons (the ones marked
   .pf-group--more stay hidden); with .is-open it becomes a slide-in drawer
   that lists every group as an accordion. Phones only use the drawer. */
.list-layout { padding-block: 32px 56px; }
.pf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pf-bar .archive-search { margin-left: auto; }
.pf-btn,
.pf-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  max-width: 280px;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-dark);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}
.pf-btn:hover,
.pf-group-btn:hover { border-color: var(--navy); }
.pf-btn[aria-expanded="true"],
.pf-group.is-open > .pf-group-btn { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,92,184,.12); }
.pf-group.is-active > .pf-group-btn { background: var(--blue-light); border-color: var(--navy); color: var(--navy); }
.pf-group-btn svg { flex-shrink: 0; transition: transform var(--transition); }
.pf-group.is-open > .pf-group-btn svg { transform: rotate(180deg); }
.pf-group-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-group-val { font-weight: 500; }
.pf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}
.pf-badge[hidden],
.pf-clear-all[hidden] { display: none; }
.pf-lbl-full { display: none; }
.pf-btn-all .pf-lbl-full  { display: inline; }
.pf-btn-all .pf-lbl-short { display: none; }

.pf-groups { display: contents; }
.pf-group { position: relative; }
.pf-group--more,
.pf-drawer-head,
.pf-drawer-foot { display: none; }
.pf-pop {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 260px;
  max-width: 360px;
  max-height: 380px;
  overflow-y: auto;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(26,63,114,.16);
  flex-direction: column;
  gap: 6px;
}
.pf-group.is-open > .pf-pop { display: flex; }
.pf-pop .filter-checkbox,
.pf-pop .filter-radio { padding-block: 3px; } /* padding-block only: keeps .filter-child-term's indent */

/* Drawer */
.pf-groups.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: min(88vw, 380px);
  height: 100dvh;
  overflow-y: auto;
  padding-bottom: 20px;
  background: var(--white);
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
  animation: pf-slide .3s var(--ease-out-quart);
}
@keyframes pf-slide { from { transform: translateX(-100%); } }
.pf-groups.is-open .pf-drawer-head {
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 20px 20px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.pf-drawer-head h3 {
  margin: 0 auto 0 0;
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--text-dark);
}
.pf-drawer-head .pf-close {
  display: inline-flex;
  padding: 4px;
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}
.pf-drawer-head .pf-close:hover { color: var(--text-dark); }
.pf-groups.is-open .pf-drawer-foot { display: block; margin-top: auto; padding: 16px 20px 0; }
.pf-groups.is-open .pf-drawer-foot .btn { width: 100%; justify-content: center; }
.pf-groups.is-open .pf-group,
.pf-groups.is-open .pf-group--more {
  display: block;
  position: static;
  padding: 0 20px;
  border-bottom: 1px solid var(--gray-200);
}
.pf-groups.is-open .pf-group-btn {
  width: 100%;
  max-width: none;
  height: auto;
  padding: 14px 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dark);
  white-space: normal;
  text-align: left;
}
.pf-groups.is-open .pf-group.is-active > .pf-group-btn { color: var(--navy); }
.pf-groups.is-open .pf-group-btn svg { margin-left: auto; }
.pf-groups.is-open .pf-lbl-short { display: none; }
.pf-groups.is-open .pf-lbl-full  { display: inline; }
.pf-groups.is-open .pf-group-lbl { white-space: normal; }
.pf-groups.is-open .pf-group-val { text-transform: none; letter-spacing: 0; }
.pf-groups.is-open .pf-pop {
  position: static;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  padding: 0 0 14px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Result count + chips */
.pf-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 18px 0 16px;
}
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}
.pf-chip:hover { background: var(--navy-dark); }
.pf-chip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: 14px;
}
.pf-clear-all {
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pf-clear-all:hover { color: var(--blue); }
.list-layout .program-list-card p { max-width: 90ch; }

/* ── Side column beside the programme lists (partials/list-aside.php) ──
   Programmes page and category pages: the cards get a narrower column and the
   call box and newsletter sit beside them, following the reader down the list. */
.list-with-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}
.list-aside { display: grid; gap: 18px; }
.side-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}
.side-newsletter h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 8px;
}
.side-newsletter p { font-size: 14px; line-height: 1.55; color: var(--text-body); margin-bottom: 16px; }
.side-newsletter .newsletter-form { display: grid; gap: 8px; }
.side-newsletter .newsletter-form input[type="email"] {
  width: 100%;
  background: var(--white);
  border-color: var(--line);
  color: var(--text-dark);
}
.side-newsletter .newsletter-form input[type="email"]::placeholder { color: var(--text-muted); }
.side-newsletter .newsletter-form input[type="email"]:focus {
  background: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,92,184,.1);
}
.side-newsletter .newsletter-form button { width: 100%; }
/* Follows the list only where it fits on screen next to it */
@media (min-width: 1001px) and (min-height: 640px) {
  .list-aside { position: sticky; top: 96px; }
}
@media (max-width: 1100px) {
  .list-with-aside { grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; }
}
/* One column: the two boxes go under the list, side by side while there is room */
@media (max-width: 1000px) {
  .list-with-aside { grid-template-columns: 1fr; gap: 32px; }
  .list-aside { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.sort-select {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--white);
  cursor: pointer;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding-top: 40px;
}
.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid var(--gray-200);
  color: var(--text-dark);
  transition: all var(--transition);
}
.pagination a:hover { background: var(--blue-light); border-color: var(--navy); color: var(--navy); }
.pagination .current { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pagination .prev, .pagination .next { width: auto; padding-inline: 14px; gap: 4px; }

/* ============================================================
   PROGRAM DETAIL PAGE
   ============================================================ */
/* Breadcrumb: a plain line, no rule under it */
.breadcrumb.program-crumbs {
  padding-block: 18px 28px;
  margin-bottom: 0;
  border-bottom: 0;
  background: none;
  font-size: 13px;
}
/* The title is right below in full, so the crumb keeps to one line */
.program-crumbs .breadcrumb-current {
  flex: 1 1 160px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-weight: 400;
}

/* Title: status and category above it */
.program-head { margin-bottom: 28px; }
.program-head-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
}
.program-head-cat { font-size: 13px; color: var(--text-slate); }
.program-head h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--navy);
  max-width: 26ch;
  text-wrap: balance;
}
/* Titles over ~110 characters (some run to 300) */
.program-head--long h1 {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  max-width: 52ch;
}

/* Status: coloured dot + label (title line, key facts, similar programmes) */
.program-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
  white-space: nowrap;
}
.program-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow-status);
  flex-shrink: 0;
}
.program-status.active::before { background: var(--green-status); }
.program-status.closed::before { background: var(--red-status); }

/* Key facts strip. The hairlines between cells are the strip's background showing through the
   1px gaps, so they stay right however the cells wrap; a short last row stretches to the edge. */
.program-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 48px;
}
.program-fact {
  flex: 1 1 170px;
  min-width: 0;
  padding: 18px 22px;
  background: var(--surface);
}
.program-fact dt {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-slate);
  margin-bottom: 6px;
}
.program-fact dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.program-fact dd.is-pending { font-size: 16px; font-weight: 600; color: var(--text-body); }
.program-fact .program-status { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--navy); }

.program-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  padding-bottom: 72px;
  align-items: start;
}

.program-content { font-size: 17px; line-height: 1.7; color: var(--text-body); }
.program-content :is(p, ul, ol, h2, h3) { max-width: 70ch; }
.program-content h2 { font-size: 22px; line-height: 1.3; color: var(--navy); margin-top: 36px; margin-bottom: 12px; font-family: var(--font-heading); }
.program-content h3 { font-size: 19px; line-height: 1.35; color: var(--navy); margin-top: 28px; margin-bottom: 10px; font-family: var(--font-heading); }
.program-content p  { margin-bottom: 14px; }
.program-content ul { list-style: disc; padding-left: 22px; margin-bottom: 14px; }
.program-content ol { list-style: decimal; padding-left: 22px; margin-bottom: 14px; }
.program-content li { margin-bottom: 6px; }
/* Collapse empty paragraphs left by the editor (common in Greek copy-pasted content) */
.program-content p:empty { display: none; }
.program-content p > br:only-child { display: none; }

/* Program sections — blog-post style (replaces tab panels) */
.program-section {
  margin-bottom: 40px;
}
/* The heading that already opens each section's content (an h1 in some older programmes) */
.program-section .program-content > :is(h1, h2):first-child {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 14px;
}

/* Share line, call box, contents list and similar programmes: this page's look only
   (the same boxes on news posts keep theirs) */
.program-detail-main .share-strip {
  margin-top: 8px;
  padding: 24px 0 0;
  background: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.program-detail-main .share-btn { border: 1px solid var(--line); }
.program-detail-main .share-btn:hover { box-shadow: none; border-color: var(--navy); color: var(--navy); }

.program-sidebar .sidebar-widget {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 18px;
}
.program-sidebar .sidebar-widget-header { padding: 0; background: none; border: 0; margin-bottom: 12px; }
.program-sidebar .sidebar-widget-header h3,
.program-call h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.3;
  color: var(--navy);
}
.program-sidebar .sidebar-widget-body { padding: 0; }
.program-call h3 { margin-bottom: 8px; }
.program-call p  { font-size: 14px; line-height: 1.55; color: var(--text-body); margin-bottom: 16px; }
.program-call .btn { width: 100%; justify-content: center; }

.program-sidebar .toc-list { gap: 0; }
.program-sidebar .toc-list a {
  font-size: 14px;
  padding: 8px 0 8px 14px;
  color: var(--text-body);
  border-left: 2px solid var(--line);
}
.program-sidebar .toc-list a:hover { color: var(--navy); border-left-color: var(--line); }
.program-sidebar .toc-list a.active { color: var(--navy); font-weight: 600; border-left-color: var(--blue); }

.program-sidebar .related-program-item { border-bottom-color: var(--line); }
.program-sidebar .related-meta time { font-size: 12px; color: var(--text-muted); }
.program-sidebar .related-program-item .program-status { font-size: 12px; }
.program-sidebar .related-program-item h4 a:hover { color: var(--blue); }
.related-fact { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }

/* Tablet with the side column: a narrower column so the text keeps its room */
@media (min-width: 769px) and (max-width: 1100px) {
  .program-detail-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
}

/* Social share strip */
.share-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  background: var(--blue-light);
  border-radius: var(--radius);
  margin-top: 40px;
}
.share-strip span { font-size: 14px; font-weight: 600; color: var(--navy); margin-right: 4px; }
.share-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--white);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  transition: box-shadow var(--transition);
}
.share-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.share-btn svg { width: 14px; height: 14px; }

/* Sidebar: the call box and the contents list follow the reader down the text. The column is as tall
   as the text; the rail takes all of it except the similar programmes, which close the column, and
   the sticky block travels inside the rail (a sticky grid item is held by the whole grid, not by its
   row, so the rail has to be a box of its own). Only while the page has two columns. */
@media (min-width: 769px) {
  .program-sidebar {
    align-self: stretch;
    display: grid;
    grid-template-rows: 1fr auto;
  }
  .program-sidebar-sticky,
  .program-sidebar-sticky.is-tall > .sidebar-widget:last-child {
    position: sticky;
    top: 96px;                        /* header 72px + 24px */
    max-height: calc(100vh - 120px);  /* last resort on a very short screen: it scrolls inside */
    overflow-y: auto;
    scrollbar-width: thin;
  }
  /* Too tall for the screen (set in main.js): the block steps aside, so the call box scrolls away
     and only the last box, the contents list, is held. */
  .program-sidebar-sticky.is-tall { display: contents; }
  .program-sidebar-sticky > .sidebar-widget:last-child { margin-bottom: 0; }
  .program-sidebar-rail + .sidebar-widget { margin-top: 24px; margin-bottom: 0; }
}

/* A phone has no side column: there the call button and the contents list ride in a bar at the
   bottom of the screen, and the two sidebar boxes they stand for are left out. */
.program-bar { display: none; }
@media (max-width: 768px) {
  .program-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 900;                     /* under the header (1000) and the open menu (999) */
    display: flex;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -4px 16px rgba(10,27,60,.08);
  }
  .program-bar .btn { justify-content: center; padding-inline: 14px; }
  .program-bar .btn-primary { flex: 1; min-width: 0; }
  .program-bar-toggle[aria-expanded="true"] { border-color: var(--navy); color: var(--navy); }
  .program-bar-toc {
    position: absolute;
    inset: auto 0 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: 0 -8px 24px rgba(10,27,60,.12);
  }
  .program-bar-toc .toc-list { gap: 2px; }
  .program-bar-toc .toc-list a { font-size: 15px; padding: 11px 12px; }
  .program-sidebar-rail,
  .program-sidebar--bare { display: none; }
  /* room for the bar under the footer */
  body.single-programs { padding-bottom: calc(63px + env(safe-area-inset-bottom)); }
}

/* Sidebar widget */
.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
}
.sidebar-widget-header {
  padding: 16px 20px;
  background: var(--blue-light);
  border-bottom: 1px solid var(--gray-200);
}
.sidebar-widget-header h3 {
  font-size: 15px;
  font-family: var(--font-heading);
  color: var(--navy);
}
.sidebar-widget-body { padding: 20px; }

/* TOC — Table of Contents */
.toc-list { display: flex; flex-direction: column; gap: 8px; }
.toc-list a {
  font-size: 13px;
  color: var(--text-body);
  padding: 6px 10px;
  border-left: 2px solid var(--gray-200);
  transition: border-color var(--transition), color var(--transition);
  line-height: 1.4;
  display: block;
}
.toc-list a:hover { border-color: var(--navy); color: var(--navy); }
.toc-list a.active { border-color: var(--navy); color: var(--navy); font-weight: 600; }

/* Related programs in sidebar */
.related-program-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 16px;
}
.related-program-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.related-program-item h4 {
  font-size: 14px;
  font-family: var(--font-heading);
  color: var(--navy-mid);
  line-height: 1.35;
}
.related-program-item .related-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ============================================================
   BLOG / NEWS PAGE
   ============================================================ */
.blog-detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  padding-block: 40px;
  align-items: start;
}
.blog-header h1 {
  font-size: clamp(24px, 2.5vw, 38px);
  color: var(--navy-mid);
  font-family: var(--font-heading);
  margin-bottom: 20px;
  line-height: 1.25;
}
.blog-hero-image {
  width: 100%;
  aspect-ratio: 16/7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  background: var(--gray-100);
}
.blog-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-content { font-size: 15px; line-height: 1.85; color: var(--text-dark); }
.blog-content h2 { font-size: 22px; margin-top: 40px; margin-bottom: 16px; font-family: var(--font-heading); }
.blog-content h3 { font-size: 18px; margin-top: 28px; margin-bottom: 12px; font-family: var(--font-heading); }
.blog-content p  { margin-bottom: 20px; color: var(--text-mid); }
.blog-content a  { color: var(--blue-link); text-decoration: underline; }
.blog-content ul { list-style: disc; padding-left: 24px; margin-bottom: 16px; }
.blog-content ol { list-style: decimal; padding-left: 24px; margin-bottom: 16px; }
.blog-content li { margin-bottom: 8px; color: var(--text-mid); }
.blog-content blockquote {
  border-left: 4px solid var(--navy);
  padding: 16px 20px;
  background: var(--blue-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-block: 24px;
  font-style: italic;
  color: var(--navy);
}

/* ── Content overflow safety (user-entered HTML) ──────────────
   Programs/blog content can contain wide tables, long program
   codes/URLs, oversized images, or embedded iframes. Keep them
   inside the viewport so the page never scrolls sideways. */
.program-content,
.blog-content,
.article-body {
  overflow-wrap: break-word;
  word-break: break-word;
}
.program-content img,
.blog-content img,
.article-body img { height: auto; }
.program-content iframe,
.blog-content iframe,
.article-body iframe { max-width: 100%; }
/* Raw HTML tables can't be wrapped — make the table itself scroll */
.program-content table,
.blog-content table,
.article-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* A grid column is never narrower than its widest content unless told so: a table with a fixed
   width from the editor (style="width:500px") stretched the whole text column past the screen. */
.program-detail-layout > *,
.blog-detail-layout > * { min-width: 0; }

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: 48px;
}
.search-header h1 { color: var(--navy); margin-bottom: 20px; }
.search-form-large {
  display: flex;
  gap: 0;
  max-width: 600px;
}
.search-form-large input {
  flex: 1;
  padding: 14px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 15px;
  outline: none;
}
.search-form-large input:focus { border-color: var(--blue); }
.search-form-large button {
  padding: 14px 24px;
  background: var(--blue-link);
  color: var(--white);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
  font-weight: 600;
}
.search-results-count { font-size: 15px; color: var(--text-muted); margin-bottom: 24px; }
.search-results-count strong { color: var(--text-dark); }

/* ============================================================
   404 PAGE
   ============================================================ */
.not-found {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 80px;
}
.not-found-inner { max-width: 480px; }
.not-found-code {
  font-size: clamp(80px, 12vw, 140px);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gray-200);
  line-height: 1;
  margin-bottom: 24px;
}
.not-found h1 { font-size: 28px; margin-bottom: 12px; }
.not-found p { color: var(--text-muted); margin-bottom: 32px; }

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-inline: auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE — SMALL LAPTOP (≤1240px)
   ============================================================ *
 * Between 1001px and ~1240px the full header (logo, nav, language
 * switcher, search, CTA) is wider than the viewport and pushes the
 * CTA off the right edge. Tighten the spacing rather than drop an item.
 */
@media (max-width: 1240px) { /* was 1100px: the Greek header still overflowed up to ~1190px */
  .header-inner { gap: 16px; }
  .header-search input { width: 150px; }
  .nav-list > li > a,
  .nav-list > li > button { padding: 6px 8px; font-size: 13px; }
}

/* ============================================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --pad-x: 40px; }

  .offers-grid           { gap: 16px; }
  .offer-card            { padding: 28px 24px; }
  .program-cards-grid    { grid-template-columns: repeat(2, 1fr); }
  .pn-item               { grid-template-columns: 1fr auto; padding: 20px; }
  .pn-body               { padding-left: 70px; }
  .pn-watermark          { font-size: 60px; left: 16px; }
  .pn-img                { width: 180px; opacity: .12; }
  .pn-item:hover .pn-img { width: 220px; }
  .pn-cursor-img         { display: none; }
  .pn-status             { display: none; }
  .news-grid             { grid-template-columns: repeat(2, 1fr); }
  /* Featured news card: stack vertically at tablet */
  .home-news-section .news-grid .news-card:first-child { flex-direction: column; }
  .home-news-section .news-grid .news-card:first-child .news-card-image { width: 100%; aspect-ratio: 16/10; min-height: unset; }
  .home-news-section .news-grid .news-card:first-child .news-card-body { padding: 20px; justify-content: flex-start; }
  .home-news-section .news-grid .news-card:first-child h3 { font-size: 17px; }
  .footer-main           { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-newsletter     { grid-column: 1 / -1; }
}

/* ── Header: hand over to the burger below 1000px ──────────── *
 * Narrower than this the logo, nav, language switcher, search and
 * CTA cannot fit on one line in either language even fully tightened,
 * and the CTA ends up pushed off the right edge. The overlay below
 * carries all of them, so switch to it here rather than at 768px.
 */
@media (max-width: 1000px) {
  .site-nav, .header-search, .header-cta { display: none; }
  .mobile-menu-toggle { display: flex; }

  /* Menu panel under the header. It used to be styled only at ≤768px,
     so between 769px and 1000px the burger opened nothing. */
  .mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    top: 72px;
    background: var(--white);
    border-top: 1px solid var(--line);
    padding: 24px 20px;
    overflow-y: auto;
    z-index: 999;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-nav.is-open { display: flex; }
  .mobile-nav a {
    display: block;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
  }
  .mobile-nav a:not(.btn):hover { background: var(--surface); color: var(--navy); }
  .mobile-nav .mobile-nav-sub { font-weight: 500; color: var(--text-body); }
  .mobile-nav .btn-primary { color: var(--white); }
  .mobile-nav-search {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 15px;
    color: var(--text-dark);
    width: 100%;
    outline: none;
  }
  .mobile-nav-search:focus { border-color: var(--blue); }
  .mobile-nav-cta { margin-top: 20px; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --pad-x: 20px; }

  /* Nav */
  .site-nav, .header-search, .header-cta { display: none; }
  .mobile-menu-toggle { display: flex; }
  .site-header { height: 60px; }

  /* Mobile nav overlay: styled in the ≤1000px block; only the header height differs */
  .mobile-nav { top: 60px; }

  /* Hero */
  .hero { min-height: 0; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; padding-block: 60px 96px; }
  .hero-visual { display: flex; justify-content: center; order: -1; }
  .hero-image-wrap { width: min(280px, 72vw); aspect-ratio: 1/1; margin-inline: auto; }
  .hero-blob { max-width: min(320px, 85vw); }
  .hero h1 { font-size: clamp(26px, 7vw, 36px); }
  .hero p   { font-size: 15px; max-width: 100%; }

  /* Sections */
  .section { padding-block: 56px; }
  .offers-grid           { grid-template-columns: 1fr; margin-top: 36px; }
  .program-cards-grid    { grid-template-columns: 1fr; }
  .funding-grid          { grid-template-columns: 1fr; }
  .pn-item               { grid-template-columns: 1fr 36px; padding: 18px 16px; }
  .pn-body               { padding-left: 52px; }
  .pn-title              { font-size: 17px; }
  .pn-sub                { display: none; }
  .pn-watermark          { font-size: 44px; left: 10px; }
  .pn-img                { width: 120px; opacity: .1; }
  .pn-count              { display: none; }
  .pn-arrow              { width: 36px; height: 36px; }
  .pn-status             { display: none; }
  .news-grid, .news-grid-tax { grid-template-columns: 1fr; }
  .tax-hero-inner        { flex-direction: column; align-items: flex-start; gap: 20px; }
  .tax-hero-stat         { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
  .tax-hero-stat-num     { font-size: 2rem; }
  .tax-hero-stat-label   { margin-top: 0; }
  /* Featured news card: full reset to standard card on mobile */
  .home-news-section .news-grid .news-card:first-child { grid-column: span 1; }
  .home-news-section .news-grid .news-card:first-child h3 { font-size: 16px; }
  .program-detail-layout { grid-template-columns: 1fr; }
  .blog-detail-layout    { grid-template-columns: 1fr; }

  /* List filters: no dropdowns, only the "Filters" button and the drawer */
  .pf-groups:not(.is-open) { display: none; }
  .pf-btn-all .pf-lbl-full  { display: none; }
  .pf-btn-all .pf-lbl-short { display: inline; }
  .pf-bar .archive-search { flex: 1; }
  .pf-bar .archive-search input { width: 100%; }
  .list-layout { padding-block: 24px 48px; }

  /* Footer */
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .footer-newsletter { grid-column: auto; max-width: 100%; margin-left: 0; }

  /* Programme page: title, key facts (two per row) and text */
  .program-detail-layout { gap: 32px; padding-bottom: 48px; }
  .breadcrumb.program-crumbs { padding-block: 14px 20px; }
  .program-head { margin-bottom: 22px; }
  .program-facts { margin-bottom: 32px; border-radius: 12px; }
  .program-fact { flex-basis: 140px; padding: 14px 16px; }
  .program-fact dd { font-size: 16px; }
  .program-fact dd.is-pending,
  .program-fact .program-status { font-size: 15px; }
  .program-content { font-size: 16px; }
  .program-section .program-content > :is(h1, h2):first-child { font-size: 21px; }

  /* Section headers with space-between title + CTA — stack on mobile */
  .programs-section .section-header,
  .news-section .section-header { flex-direction: column; align-items: flex-start; gap: 16px; }

  .program-list-card-details { flex-direction: column; align-items: flex-start; gap: 12px; }
  .program-detail-item { padding-inline: 0; border-right: none; }

  .sector-selector-label { font-size: 13px; }

  /* Archive header */
  .archive-header h1 { font-size: 28px; }
  .archive-header p  { font-size: 15px; }

  .archive-search { flex: 1; }
  .archive-search input { width: 100%; }

  /* Header — hide search at tablet to prevent overflow */
  .header-search { display: none; }
}

@media (max-width: 480px) {
  :root { --pad-x: 16px; }
  h2 { font-size: 26px; }
  .section-title { font-size: 26px; }

  /* Hero CTA buttons go full-width on very small screens */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; text-align: center; }
  .program-cards-grid { gap: 16px; }
  .news-grid { gap: 16px; }

  /* Meta strip stays 2×2 even at small screens — just tighter */

  /* Appointment CTA button — full width on small screens */
  .appt-btn { width: 100%; justify-content: center; }

  /* Calendly modal — panel full-screen on mobile, widget min-height override */
  .calendly-modal { padding: 0; }
  .calendly-modal-panel { max-width: 100%; border-radius: 0; height: 100dvh; }
  .calendly-inline-widget { min-height: 0 !important; }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  padding-block: 12px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--gray-100);
  background: var(--white);
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.breadcrumb-list li { display: flex; align-items: center; gap: 8px; }
.breadcrumb-list li:not(:last-child)::after {
  content: '/';
  color: var(--gray-300);
}
.breadcrumb-list a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.breadcrumb-list a:hover { color: var(--blue); }
.breadcrumb-list li[aria-current="page"] { color: var(--navy); font-weight: 500; }

/* ── Privacy Policy page ─────────────────────────────────────────────── */
.privacy-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  padding: 24px 0 28px;
}
.privacy-header h1 {
  margin: 8px 0 6px;
  font-size: clamp(24px, 3vw, 34px);
}
.privacy-effective {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.privacy-page { padding-block: 48px 80px; }

.privacy-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
}

/* TOC */
.privacy-toc-inner {
  position: sticky;
  top: 100px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 20px 20px 24px;
}
.privacy-toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.privacy-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: toc;
}
.privacy-toc-list li { counter-increment: toc; }
.privacy-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dark);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  line-height: 1.4;
}
.privacy-toc-list a::before {
  content: counter(toc) ".";
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}
.privacy-toc-list a:hover {
  background: var(--gray-100);
  color: var(--navy);
}

/* Intro box */
.privacy-intro-box {
  background: oklch(97% 0.01 250);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 40px;
  line-height: 1.6;
}

/* Sections */
.privacy-section {
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--gray-100);
}
.privacy-section:last-of-type { border-bottom: none; }
.privacy-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px;
  font-family: var(--font-heading);
}
.privacy-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-dark);
}
.privacy-body p { margin: 0 0 14px; }
.privacy-body p:last-child { margin-bottom: 0; }
.privacy-body ul {
  margin: 0 0 14px 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.privacy-body ul li {
  position: relative;
  padding-left: 16px;
  line-height: 1.75;
}
.privacy-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
  flex-shrink: 0;
}
.privacy-body a { color: var(--navy); text-decoration: underline; }
.privacy-body strong { font-weight: 600; color: var(--text-dark); }

/* Footer note */
.privacy-footer-note {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.privacy-footer-note a { color: var(--text-muted); }
.privacy-footer-note a:hover { color: var(--navy); }

/* Responsive */
@media (max-width: 768px) {
  .privacy-layout { grid-template-columns: 1fr; gap: 32px; }
  .privacy-toc-inner { position: static; }
}

/* ── Contact page header (H1 + breadcrumb) ── */
.contact-page-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  padding-bottom: 20px;
  padding-top: 24px;
}
.contact-page-header h1 {
  font-size: clamp(24px, 3vw, 36px);
  color: var(--navy);
  margin-top: 12px;
  margin-bottom: 0;
}
.contact-page-header .breadcrumb {
  border: none;
  padding-block: 0 4px;
  background: transparent;
}

/* ============================================================
   ARTICLE PAGES (ΕΣΠΑ, Dev Law, TAA)
   ============================================================ */
.article-hero-divider {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 0 0 40px;
  clear: both;
}

/* Float image — sits right of the body text */
.article-float-img {
  float: right;
  width: 420px;
  max-width: 40%;
  margin: 6px 0 36px 52px;
  border-radius: var(--radius-lg);
  object-fit: contain;
  display: block;
}

.article-body {
  padding-block: 48px 64px;
  padding-inline: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.article-title {
  font-size: clamp(30px, 3.8vw, 44px);
  color: var(--navy);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 20px;
  text-align: left;
}
.article-body p  {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.85;
  margin-bottom: 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  text-align: justify;
}
.article-body h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--navy);
  margin-top: 44px;
  margin-bottom: 12px;
  line-height: 1.3;
  font-weight: 700;
}
.article-body h3 {
  font-size: 18px;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--navy-mid);
  margin-top: 28px;
  margin-bottom: 10px;
  font-weight: 600;
}
/* First heading sits flush with the top of the content area */
.article-body > h2:first-child,
.article-body > p:first-child + h2 { margin-top: 0; }
.article-body ul { list-style: disc; padding-left: 22px; margin-bottom: 20px; }
.article-body ol { list-style: decimal; padding-left: 22px; margin-bottom: 20px; }
.article-body ul li,
.article-body ol li {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.8;
  margin-bottom: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.article-body strong { color: var(--navy); font-weight: 600; }
.article-body img { height: auto; max-width: 100%; }
.article-body table { width: 100%; border-collapse: collapse; margin-block: 32px; font-size: 14px; }
.article-body table th { background: var(--navy); color: var(--white); padding: 10px 14px; text-align: left; }
.article-body table td { padding: 10px 14px; border-bottom: 1px solid var(--gray-200); color: var(--text-body); }
.article-body table tr:nth-child(even) td { background: var(--gray-50, #f8fafc); }
/* Clearfix so CTA section never overlaps the float image */
.article-body::after { content: ''; display: table; clear: both; }

.article-cta-section {
  padding-block: 56px;
  background: var(--blue-light);
  clear: both;
}

/* ============================================================
   KAD SEARCH PAGE
   ============================================================ */
.kad-page { padding-block: 48px 80px; }
.kad-header { margin-bottom: 32px; }
.kad-header h1 { font-size: clamp(26px, 3.2vw, 38px); color: var(--navy); font-weight: 700; margin: 0 0 10px; }
.kad-subtitle { font-size: 15px; color: var(--text-muted); margin: 0; }

.kad-search-form { margin-bottom: 40px; }
.kad-search-wrap { display: flex; gap: 0; max-width: 640px; }
.kad-search-input {
  flex: 1; padding: 13px 18px; border: 2px solid var(--gray-200);
  border-right: none; border-radius: var(--radius) 0 0 var(--radius);
  font-size: 15px; color: var(--text-body); background: var(--white);
  outline: none;
}
.kad-search-input:focus { border-color: var(--blue); }
.kad-search-btn {
  display: flex; align-items: center; gap: 8px; padding: 13px 22px;
  background: var(--navy); color: var(--white); border: none; cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0; font-size: 15px; font-weight: 600;
  white-space: nowrap;
}
.kad-search-btn:hover { background: var(--navy-mid, #1e3a6e); }

.kad-results-meta { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; }

.kad-table-wrap { overflow-x: auto; }
.kad-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kad-table th {
  background: var(--navy); color: var(--white);
  padding: 10px 14px; text-align: left; font-weight: 600; white-space: nowrap;
}
.kad-table td { padding: 10px 14px; border-bottom: 1px solid var(--gray-200); color: var(--text-body); }
.kad-table tr:nth-child(even) td { background: var(--gray-50, #f8fafc); }
.kad-table .kad-num { color: var(--text-muted); width: 50px; }
.kad-table .kad-code { font-family: monospace; font-size: 13px; white-space: nowrap; }
.kad-table .kad-programs { min-width: 220px; }
.kad-program-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.kad-program-list a { color: var(--blue); text-decoration: none; }
.kad-program-list a:hover { text-decoration: underline; }
.kad-programs-none { color: var(--text-muted); }

.kad-no-results { padding: 48px; text-align: center; color: var(--text-muted); font-size: 15px; }

/* ── Browse by sector (shown before anything is searched for) ── */
.kad-browse { border-top: 1px solid var(--gray-200); padding-top: 32px; }
.kad-browse-title { font-size: 20px; color: var(--navy); font-weight: 700; margin: 0 0 6px; }
.kad-browse-intro { font-size: 14px; color: var(--text-muted); margin: 0 0 32px; }

.kad-sector + .kad-sector { margin-top: 28px; }
.kad-sector-name {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--navy);
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gray-200);
}
.kad-sector-letter {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 6px;
  background: var(--navy); color: var(--white);
  border-radius: var(--radius-sm); font-size: 12px; font-weight: 700;
}

.kad-division-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2px 20px;
}
.kad-division-list a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--text-body); text-decoration: none; font-size: 14px;
}
.kad-division-list a:hover { background: var(--gray-50, #f8fafc); color: var(--blue); }
.kad-division-code {
  flex: none; width: 24px;
  font-family: monospace; font-size: 13px; color: var(--text-muted);
}
.kad-division-list a:hover .kad-division-code { color: var(--blue); }

.kad-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 32px; }
.kad-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-body); text-decoration: none;
}
.kad-page-btn:hover { background: var(--gray-50, #f8fafc); border-color: var(--blue); color: var(--blue); }
.kad-page-current { background: var(--navy); color: var(--white); border-color: var(--navy); }
.kad-page-ellipsis { display: inline-flex; align-items: center; height: 36px; color: var(--text-muted); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* ── Hero ── */
.about-page-hero {
  padding-block: 32px 0;
}
.about-page-hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  color: var(--navy);
  margin-bottom: 32px;
  line-height: 1.15;
  font-weight: 700;
}
.about-hero-img {
  width: 100%;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
}
.about-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Intro / Body ── */
.about-intro,
.about-body {
  padding-block: 48px 64px;
  padding-inline: 20px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-body);
}

/* ── Section title ── */
.about-section-title {
  font-size: clamp(22px, 3vw, 32px);
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 1.25;
}

/* ── Advantages ── */
.about-advantages-section { background: var(--white); }
.about-adv-wrap {
  display: grid;
  grid-template-columns: 1fr 548px;
  gap: 64px;
  align-items: center;
}
.about-adv-list {
  list-style: disc;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-adv-list li {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.7;
}
.about-adv-photos {
  position: relative;
  width: 548px;
  height: 333px;
  flex-shrink: 0;
}
.about-adv-photo {
  position: absolute;
  width: 348px;
  height: 232px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 8px 32px rgba(26,63,114,.18);
}
.about-adv-photo--1 {
  top: 0;
  left: 0;
}
.about-adv-photo--2 {
  top: 101px;
  left: 196px;
}

/* ── Services ── */
.about-services-section { background: var(--white); }
.about-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.about-service-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 512px;
  display: flex;
  align-items: flex-start;
}
.about-svc-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.about-svc-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-svc-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #034ea1, rgba(3,78,161,0.6));
}
.about-service-card-inner {
  position: relative;
  padding: 36px 32px;
  z-index: 1;
}
.about-service-card-inner h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.35;
}
.about-service-card-inner ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-service-card-inner ul li {
  font-size: 15px;
  color: rgba(255,255,255,.92);
  line-height: 1.6;
}

/* ── Sectors ── */
.about-sectors-section { background: var(--gray-50, #f4f6fb); }
.about-sectors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.about-sector-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.45;
}
.about-sector-icon {
  width: 64px; height: 64px; flex-shrink: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(86,204,242,.37);
  display: flex; align-items: center; justify-content: center;
}

/* ── Clients ── */
.about-clients-section { background: var(--white); }
.about-clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 32px;
  align-items: center;
}
.about-client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  background: var(--white);
  min-height: 93px;
}
.about-client-logo img {
  max-height: 56px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(20%);
  opacity: 0.85;
  transition: filter .2s, opacity .2s;
}
.about-client-logo:hover img { filter: none; opacity: 1; }

/* ============================================================
   PORTFOLIO PAGE
   ============================================================ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.portfolio-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 2px 16px rgba(26,63,114,.08);
  transition: box-shadow .2s, transform .2s;
}
.portfolio-card:hover { box-shadow: 0 6px 32px rgba(26,63,114,.15); transform: translateY(-2px); }
.portfolio-card-img-wrap {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.portfolio-card-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s;
}
.portfolio-card:hover .portfolio-card-img-wrap img { transform: scale(1.04); }
.portfolio-card-placeholder {
  width: 100%; height: 100%;
  background: var(--gray-100, #e8ecf5);
}
.portfolio-card-body {
  padding: 20px 24px 24px;
}
.portfolio-card-body h3 {
  font-size: 16px; font-weight: 700; color: var(--navy);
  margin-bottom: 8px; line-height: 1.4;
}
.portfolio-card-body h3 a { color: inherit; text-decoration: none; }
.portfolio-card-body h3 a:hover { color: var(--blue); }
.portfolio-card-body p { font-size: 14px; color: var(--text-mid); line-height: 1.6; }

@media (max-width: 900px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page { background: var(--gray-50, #f4f6fb); padding-top: 32px; padding-bottom: 64px; }
.contact-card {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 0;
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(26,63,114,.1);
  max-width: 960px;
  margin-inline: auto;
}
.contact-info {
  background: var(--navy);
  padding: 48px 40px;
  color: var(--white);
}
.contact-info h2 { color: var(--white); font-size: 28px; margin-bottom: 12px; line-height: 1.3; }
.contact-info-items { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.contact-info-item { display: flex; align-items: flex-start; gap: 16px; }
.contact-info-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(255,255,255,.15);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
}
.contact-intro-text { color: rgba(255,255,255,.85); font-size: 15px; line-height: 1.6; margin-bottom: 32px; }
.contact-info-label { font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.contact-info-value { font-size: 15px; font-weight: 600; color: var(--white); }
.contact-info-value:hover { color: var(--blue-light); }
.contact-schedule { border-top: 1px solid rgba(255,255,255,.15); padding-top: 28px; }
.contact-schedule h3 { color: var(--white); font-size: 18px; margin-bottom: 10px; line-height: 1.4; }
.contact-schedule p  { font-size: 14px; color: rgba(255,255,255,.7); margin-bottom: 20px; line-height: 1.6; }
.contact-schedule .btn-outline { border-color: rgba(255,255,255,.5); color: var(--white); }
.contact-schedule .btn-outline:hover { background: rgba(255,255,255,.15); border-color: var(--white); }

.contact-form-wrap { padding: 48px 40px; }
.contact-form-wrap h2 { font-size: 24px; color: var(--navy); margin-bottom: 28px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form-group { display: flex; flex-direction: column; gap: 6px; }
.contact-form-group label { font-size: 13px; font-weight: 600; color: var(--text-body); }
.contact-form-group input,
.contact-form-group textarea {
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-body);
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--transition);
}
.contact-form-group input:focus,
.contact-form-group textarea:focus { border-color: var(--blue); }
.cf-required-star { color: #e53e3e; margin-left: 2px; }
.cf-field-error { font-size: 12px; color: #e53e3e; margin-top: -2px; display: block; }
/* Server-side error after a failed send (same look as .nl-msg--error) */
.cf-form-alert { padding: 12px 16px; margin-bottom: 20px; border-radius: var(--radius); font-size: 14px; font-weight: 500; background: #fff5f5; color: #c53030; border: 1px solid #fed7d7; }
.cf-form-alert p { margin: 0; }
.cf-form-alert p + p { margin-top: 4px; }
/* Honeypot field: off-screen rather than display:none, which some bots skip */
.cf-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-form-group input.cf-input-error { border-color: #e53e3e; }
.contact-form-group input.cf-input-error:focus { border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229,62,62,0.12); }
.contact-phone-wrap.cf-phone-error { border-color: #e53e3e; }
.contact-phone-wrap.cf-phone-error:focus-within { border-color: #e53e3e; box-shadow: 0 0 0 3px rgba(229,62,62,0.12); }
.contact-phone-wrap { display: flex; align-items: center; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.contact-phone-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,92,184,0.12); }
.contact-phone-code {
  flex-shrink: 0;
  width: 100px;
  padding: 12px 8px 12px 12px;
  border: none;
  border-right: 1px solid var(--gray-200);
  box-shadow: none;
  background: var(--gray-50,#f4f7fc);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2381939F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}
.contact-phone-code:focus { outline: none; box-shadow: none; background-color: #eef2f8; }
.contact-phone-wrap input[type="tel"] { border: none; border-radius: 0; flex: 1; outline: none; }
.contact-form-group textarea { resize: vertical; min-height: 120px; }
/* ── Contact success state ──────────────────────────────────── */
.contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px 40px;
  gap: 0;
}

/* Icon */
.cs-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #edf7f1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  animation: csIconPop 0.5s var(--ease-out-expo) both;
}
.cs-svg { width: 48px; height: 48px; }

/* Animated circle */
.cs-circle {
  stroke: var(--green-status);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: csCircle 0.55s var(--ease-out-expo) 0.15s forwards;
}

/* Animated check */
.cs-check {
  stroke: var(--green-status);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  opacity: 0;
  animation: csCheck 0.35s var(--ease-out-expo) 0.6s forwards;
}

@keyframes csIconPop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes csCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes csCheck {
  to { stroke-dashoffset: 0; opacity: 1; }
}

/* Heading + body */
.cs-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark, #1a2b45);
  margin: 0 0 10px;
  animation: csSlideUp 0.45s var(--ease-out-expo) 0.5s both;
}
.cs-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 340px;
  margin: 0 0 28px;
  animation: csSlideUp 0.45s var(--ease-out-expo) 0.6s both;
}

/* Contact chips */
.cs-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
  animation: csSlideUp 0.45s var(--ease-out-expo) 0.7s both;
}
.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--gray-50, #f8fafc);
  border: 1px solid var(--gray-200, #e2e8f0);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.cs-chip:hover { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }

/* CTA */
.cs-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  animation: csSlideUp 0.45s var(--ease-out-expo) 0.8s both;
}

@keyframes csSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cs-icon-wrap, .cs-heading, .cs-body, .cs-contacts, .cs-cta { animation: none; opacity: 1; transform: none; }
  .cs-circle { animation: none; stroke-dashoffset: 0; }
  .cs-check  { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* Responsive */
@media (max-width: 1024px) {
  .article-float-img { width: 300px; max-width: 38%; margin-left: 32px; }
  .about-adv-wrap { grid-template-columns: 1fr; }
  .about-adv-photos { width: 100%; height: 300px; }
  .about-services-grid { grid-template-columns: 1fr; }
  .about-sectors-grid { grid-template-columns: 1fr; }
  .about-clients-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-card { grid-template-columns: 1fr; }
  .contact-info { padding: 32px 24px; }
  .contact-form-wrap { padding: 32px 24px; }
}
@media (max-width: 768px) {
  .article-title { font-size: 26px; }
  .article-float-img { float: none; width: 100%; max-width: 100%; margin: 0 0 32px; border-radius: var(--radius-lg); }
  .contact-form-row { grid-template-columns: 1fr; }
  .about-sectors-grid { grid-template-columns: 1fr; }
  .about-clients-grid { grid-template-columns: repeat(2, 1fr); }
  .about-hero-img { height: 280px; }
  .about-service-card { min-height: 340px; }

  /* About advantage photos — switch from absolute-stacked to a simple flex column */
  .about-adv-photos {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .about-adv-photo {
    position: static;
    width: 100%;
    height: 200px;
  }
}