/* ==========================================================================
   MRTB v3.0 — Modern Cloudrexx 5.x theme
   Design tokens, layout, components.
   Adapted from the 2026 MRTB demos (homepage, inner-pages, our-team, profile).
   ========================================================================== */

:root {
  --bg:#f5f6f3;
  --surface:#ffffff;
  --surface-2:#f0f4f1;
  --line:#d7dfd8;
  --text:#173126;
  --muted:#5d7066;
  --primary:#0d6b46;       /* MRTB green — derived from logo */
  --primary-2:#0a4f37;
  --primary-deep:#123425;
  --accent:#dfeee5;
  --gold:#b1852d;
  --gold-soft:#f4ead2;
  --shadow:0 14px 40px rgba(10,38,24,.08);
  --shadow-sm:0 4px 14px rgba(10,38,24,.06);
  --radius:22px;
  --radius-sm:14px;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --font-display:'Source Serif 4','Source Serif Pro','Georgia',serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
a:hover { color:var(--primary); }
img { max-width:100%; display:block; }

/* Layout shell */
.shell { width:min(94%, 1180px); margin:0 auto; }

.skip-link {
  position:absolute; left:-9999px;
}
.skip-link:focus {
  left:1rem; top:1rem;
  background:#fff;
  padding:.75rem 1rem;
  border-radius:10px;
  z-index:1000;
  border:2px solid var(--primary);
}

/* ---- Top utility bar ---------------------------------------------------- */
.topbar {
  background:var(--primary-deep);
  color:#ecf4ef;
  font-size:.92rem;
}
.topbar .shell {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem 0;
  flex-wrap:wrap;
}
.topbar a { color:inherit; }
.topbar a:hover { color:#fff; text-decoration:underline; }

/* ---- Header / masthead ------------------------------------------------- */
.header {
  background:linear-gradient(180deg,#eaf3ed 0%, #e6f0ea 100%);
  border-bottom:none;
}
.masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.15rem;
  padding:1rem 0;
  flex-wrap:nowrap;
}
.brand {
  display:flex;
  align-items:center;
  gap:.8rem;
  min-width:0;
  flex:0 1 auto;
}
.seal {
  width:104px;
  height:104px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 104px;
}
.seal img { width:100%; height:auto; object-fit:contain; }
.brand-text { min-width:0; display:flex; flex-direction:column; justify-content:center; }
.brand-text small {
  display:block;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
  margin-bottom:.15rem;
}
.brand-text strong {
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.05rem, .9rem + .45vw, 1.35rem);
  line-height:1.12;
  font-weight:700;
  max-width:32ch;
}
.brand-text span {
  display:block;
  color:var(--muted);
  font-size:.86rem;
  margin-top:.18rem;
  max-width:42ch;
  line-height:1.32;
}

/* ---- Primary nav (v3.3.5 — back to masthead on desktop, three-state) ---- */
.primary-nav {
  margin-left:auto;
  margin-right:0;
  flex:0 1 auto;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  align-items:stretch;
  justify-content:flex-end;
}
.primary-nav .menus,
.primary-nav ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  align-items:stretch;
}
.primary-nav .level-1 > a {
  padding:.85rem 1.15rem;
  border-radius:0;
  color:var(--text);
  font-weight:600;
  font-size:.94rem;
  letter-spacing:.01em;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  position:relative;
  background:transparent;
  border-bottom:3px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
/* mouse-over */
.primary-nav .level-1 > a:hover,
.primary-nav .level-1:hover > a,
.primary-nav .level-1:focus-within > a {
  background:var(--surface);
  color:var(--primary);
  border-bottom-color:var(--gold, #c9a94a);
}
/* active page (Cloudrexx adds .active / .selected on the current item) */
.primary-nav .level-1.active > a,
.primary-nav .level-1.selected > a,
.primary-nav .level-1 > a.active,
.primary-nav .level-1 > a.selected {
  background:var(--primary);
  color:#fff;
  border-bottom-color:var(--gold, #c9a94a);
}
.primary-nav .level-1.active > a:hover,
.primary-nav .level-1.selected > a:hover {
  background:var(--primary);
  color:#fff;
  filter:brightness(1.08);
}

/* Sub-menu (dropdown for level-2+) — traditional flush-left panel */
.primary-nav .level-1 { position:relative; }
.primary-nav .level-1 > ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--gold, #c9a94a);
  border-radius:0 0 6px 6px;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  padding:.35rem 0;
  min-width:240px;
  flex-direction:column;
  gap:0;
  z-index:50;
}
.primary-nav .level-1:hover > ul,
.primary-nav .level-1:focus-within > ul { display:flex; }
.primary-nav .level-2,
.primary-nav .level-3 { width:100%; }
.primary-nav .level-2 > a,
.primary-nav .level-3 > a {
  display:block;
  border-radius:0;
  padding:.62rem 1.05rem;
  font-weight:500;
  font-size:.92rem;
  color:var(--text);
  width:100%;
  border-left:3px solid transparent;
  background:transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.primary-nav .level-2 > a:hover,
.primary-nav .level-3 > a:hover {
  background:var(--surface);
  color:var(--primary);
  border-left-color:var(--gold, #c9a94a);
}
.primary-nav .level-2.active > a,
.primary-nav .level-2.selected > a,
.primary-nav .level-3.active > a,
.primary-nav .level-3.selected > a,
.primary-nav .level-2 > a.active,
.primary-nav .level-2 > a.selected,
.primary-nav .level-3 > a.active,
.primary-nav .level-3 > a.selected {
  background:var(--primary);
  color:#fff;
  border-left-color:var(--gold, #c9a94a);
}

/* v3.3.5 — Below 1180px the masthead stacks; nav drops to its own row flush-left */
@media (max-width: 1179px) {
  .shell.masthead { flex-wrap:wrap; }
  .shell.masthead .brand { flex:1 1 auto; }
  .shell.masthead .primary-nav {
    width:100%;
    flex:1 1 100%;
    margin-left:0;
    margin-right:auto;
    justify-content:flex-start;
    border-top:1px solid var(--line);
    margin-top:.6rem;
    padding-top:.15rem;
  }
}

/* ---- Hero / homepage slider -------------------------------------------- */
.hero-wrap {
  padding:.9rem 0 1.1rem;
  background:transparent;
  position:relative;
  z-index:0;
  margin-top:-0.2rem;
}
.hero-wrap::before {
  content:"";
  position:absolute;
  inset:0;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#d2e2d8 0%, #cdded4 52%, #d7e6dc 100%);
  border-top:1px solid rgba(255,255,255,.45);
  border-bottom:1px solid #c9d7cd;
  z-index:-1;
}
.slider-shell {
  width:100%;
  margin:0 auto;
  border-radius:30px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:var(--surface);
}
.slider-stage {
  position:relative;
  min-height:535px;          /* v3.3.6 — +10px so action button clears bottom-corner arrows */
  overflow:hidden;
}
.slide {
  position:absolute;
  inset:0;
  display:block;                  /* v3.3.4 — visual is full-bleed bg, copy is overlay */
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
}
.slide.active { opacity:1; pointer-events:auto; }
/* v3.3.4 — translucent copy panel overlays left ~35%, photo shows through on right ~65% */
.slide-copy {
  position:absolute;
  left:0; top:0; bottom:0;
  width:42%;
  padding:1.8rem 1.9rem 4rem;  /* v3.3.6 — 4rem bottom keeps action btn clear of PREV pill */
  background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,.0) 100%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  z-index:2;
  overflow:hidden;            /* v3.3.5 — never let copy bleed past slide */
  max-height:100%;
  box-sizing:border-box;
}
@media (max-width: 900px) {
  .slide-copy { width:100%; background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 70%, rgba(255,255,255,.0) 100%); }
}
.slide-copy h1, .slide-copy h2 {
  margin:0 0 .9rem;
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 1.6vw + 1rem, 2.6rem);
  line-height:1.06;
  max-width:18ch;
  font-weight:700;
}
.slide-copy p {
  margin:0 0 1.15rem;
  color:var(--muted);
  max-width:42ch;
  /* v3.3.5 — clamp to ~5 lines so long copy never spills the slide */
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.slide-copy h1, .slide-copy h2 { color:var(--primary-deep); text-shadow:0 1px 2px rgba(255,255,255,.6); }
.slide-visual {
  position:absolute;
  inset:0;                       /* v3.3.6 — full-bleed photo, 535px tall */
  min-height:535px;
  background-size:cover;
  background-position:center;
  z-index:1;
}
/* v3.3.4 — tint overlay removed per user: keep slide photos crisp and bright */
/* v3.3.4 — dots in MRTB green for readable contrast */
.slider-dots {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:1rem;
  display:flex;
  gap:.55rem;
  z-index:5;
  padding:.35rem .6rem;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(3px);
  border:1px solid rgba(13,107,70,.25);
  border-radius:999px;
  box-shadow:0 2px 8px rgba(10,38,24,.18);
}
.slider-dots .dot {
  width:11px; height:11px; border-radius:999px;
  border:1px solid var(--primary-2);
  background:transparent; cursor:pointer;
  padding:0;
  transition:width .25s ease, background .25s ease;
}
.slider-dots .dot:hover { background:rgba(13,107,70,.3); }
.slider-dots .dot.active { width:28px; background:var(--primary); border-color:var(--primary); }

/* v3.3.6 — prev/next as distinctive gradient pill controls in bottom corners */
.slider-nav {
  position:absolute;
  bottom:1.1rem;
  z-index:6;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .9rem;
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(7,58,38,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.slider-nav:hover { background:var(--gold, #c9a94a); color:#1f2a24; transform:translateY(-1px); }
.slider-nav .chev { font-size:1.05rem; line-height:1; font-weight:900; }
.slider-nav.prev { left:1.1rem; }
.slider-nav.next { right:1.1rem; }
@media (max-width: 720px) {
  .slider-nav { padding:.45rem .7rem; font-size:.74rem; }
}

/* Eyebrow / pill labels */
.eyebrow {
  display:inline-flex;
  width:max-content;
  padding:.4rem .75rem;
  border-radius:999px;
  background:var(--accent);
  color:var(--primary-2);
  font-weight:700;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:1rem;
}

/* ---- Buttons ----------------------------------------------------------- */
.btn, .button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.7rem 1.05rem;
  border-radius:14px;
  font-weight:700;
  font-size:.95rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary, .button {
  background:var(--primary);
  color:#fff;
}
.btn-primary:hover, .button:hover {
  background:var(--primary-2);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.btn-secondary {
  background:#fff;
  color:var(--text);
  border-color:var(--line);
}
.btn-secondary:hover { background:var(--surface-2); }

.hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.4rem; }

/* ---- Hero meta boxes (under slider copy) ------------------------------- */
.hero-meta {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.8rem;
}
.meta-box {
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  padding:.85rem .95rem;
}
.meta-box strong {
  display:block;
  font-size:1rem;
  margin-bottom:.18rem;
  color:var(--primary-2);
}
.meta-box span {
  display:block;
  font-size:.86rem;
  color:var(--muted);
}

/* ---- Page band (inner page hero) --------------------------------------- */
.page-band {
  padding:1.4rem 0 1.6rem;
  position:relative;
  z-index:0;
}
.page-band::before {
  content:"";
  position:absolute;
  inset:0;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,#d2e2d8 0%, #cdded4 60%, #d7e6dc 100%);
  border-top:1px solid rgba(255,255,255,.45);
  border-bottom:1px solid #c9d7cd;
  z-index:-1;
}
.page-hero {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:1.5rem 1.7rem;
  box-shadow:var(--shadow);
}
.page-hero .breadcrumb {
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  margin-bottom:.4rem;
}
.page-hero h1 {
  margin:0 0 .35rem;
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 1.4vw + 1.1rem, 2.4rem);
  line-height:1.1;
  font-weight:700;
}
.page-hero p { margin:.4rem 0 0; color:var(--muted); max-width:72ch; }

/* ---- Content / cards --------------------------------------------------- */
/* v3.3.4 — halved bottom padding so footer sits closer to content */
.main {
  padding:1.4rem 0 1.2rem;
  background:var(--bg);
}

.card,
.content-card,
.intro-card,
.bio-card,
.sidebar-card,
.profile-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.4rem;
  box-shadow:var(--shadow);
}
.section-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
  margin-bottom:1rem;
  align-items:stretch;        /* v3.3.7 — force equal-height columns across browsers */
}
/* v3.3.7 — make Quick Tasks / Current Notices fill the grid row evenly
   regardless of how their headings wrap in different engines (Chrome/Firefox/Safari).
   Cloudrexx renders BLOCK_49 / BLOCK_50 directly into .section-grid, so the
   selector targets every direct child of the row. */
.section-grid > * {
  height:100%;
  display:flex;
  flex-direction:column;
  min-width:0;                /* prevent long headings from blowing up the column */
}
/* If the Cloudrexx Content Block markup wraps inside a .card, make the inner
   .task-list / .notice-list also flex-grow so the visible cards align in height. */
.section-grid > * > .card {
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.section-grid .task-list,
.section-grid .notice-list {
  margin-top:auto;            /* push tile/list block to the bottom so headings
                                 of different lengths still align across columns */
}
.card .tag,
.section-label {
  display:inline-block;
  color:var(--primary);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:.7rem;
}
.card h2, .intro-card h2, .content-card h2 {
  margin:.1rem 0 .55rem;
  font-family:var(--font-display);
  font-size:clamp(1.35rem, .8vw + 1.1rem, 1.85rem);
  line-height:1.12;
  font-weight:700;
}
.card p, .intro-card p, .content-card p { margin:0 0 .8rem; color:var(--muted); }
.card p:last-child, .intro-card p:last-child, .content-card p:last-child { margin-bottom:0; }

/* Quick task tiles */
.task-list {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.8rem;
  margin-top:1rem;
}
.task {
  border:1px solid var(--line);
  border-radius:18px;
  padding:1rem;
  background:var(--surface-2);
}
.task strong { display:block; margin-bottom:.32rem; color:var(--text); }
.task span { color:var(--muted); font-size:.92rem; }

/* Notice list */
.notice-list { display:grid; gap:.8rem; margin-top:1rem; }
.notice {
  padding:.95rem 1rem;
  border-left:4px solid var(--gold);
  background:#faf8f1;
  border-radius:0 16px 16px 0;
}
.notice strong { display:block; margin-bottom:.18rem; }
.notice span { color:var(--muted); font-size:.92rem; }

/* Procedure / numbered steps */
.procedure { display:grid; gap:.85rem; margin:1rem 0; }
.step {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:.9rem;
  align-items:start;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface-2);
}
.step-no {
  width:42px; height:42px;
  border-radius:14px;
  background:var(--primary);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-family:var(--font-display);
  font-size:1.15rem;
}
.step-body strong { display:block; margin-bottom:.2rem; }
.step-body span, .step-body p { color:var(--muted); margin:0; font-size:.95rem; }

/* Highlight blockquote */
.highlight {
  border-left:4px solid var(--primary);
  background:var(--accent);
  padding:1rem 1.1rem;
  border-radius:0 16px 16px 0;
  margin:1rem 0;
  color:var(--primary-2);
}
.inline { color:var(--primary-2); }

/* Download box */
.download-box {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  padding:1rem 1.1rem;
  border:1px dashed var(--line);
  border-radius:16px;
  background:#fbfdfb;
  margin-top:1rem;
}
.download-box strong { color:var(--primary-2); }

/* ---- Two-column layouts (left/right submenu) --------------------------- */
/* v3.3.4 — increased gap so sidebar and content don't hug */
.layout {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:2.2rem;
  align-items:start;
}
.layout.layout-right {
  grid-template-columns:1fr 260px;
}

.sidebar-card { padding:1rem; }
.sidebar-card h3 {
  margin:0 0 .55rem;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--primary-2);
}
.submenu, .side-nav {
  display:grid;
  gap:.42rem;
  margin:0 0 1rem; padding:0;
  list-style:none;
}
.submenu li, .side-nav li { list-style:none; }

/* v3.3.4 — traditional flush-left sidebar submenu (replaces pill cards) */
.submenu, .side-nav { gap:0; }
.submenu li, .side-nav li {
  border-bottom:1px solid var(--line);
}
.submenu li:last-child, .side-nav li:last-child { border-bottom:none; }

/* level-1 (parent) */
.submenu a, .side-nav a {
  display:block;
  padding:.55rem .8rem .55rem .85rem;
  border-radius:0;
  font-size:.94rem;
  color:var(--text);
  font-weight:600;
  background:transparent;
  border-left:3px solid transparent;
  text-align:left;
  transition: background .15s ease, color .15s ease, border-left-color .15s ease;
}
.submenu a small, .side-nav a small {
  display:block;
  font-size:.78rem;
  color:var(--muted);
  font-weight:500;
  margin-top:.12rem;
  letter-spacing:0;
  text-transform:none;
}

/* level-2 / level-3 (child / daughter) — indented, slightly smaller */
.submenu .level-2 > a, .side-nav .level-2 > a {
  padding-left:1.6rem;
  font-size:.9rem;
  font-weight:500;
  color:var(--muted);
}
.submenu .level-3 > a, .side-nav .level-3 > a {
  padding-left:2.4rem;
  font-size:.88rem;
  font-weight:500;
  color:var(--muted);
}
.submenu .level-4 > a, .side-nav .level-4 > a {
  padding-left:3rem;
  font-size:.85rem;
}

/* nested ul: no margins, traditional vertical flow */
.submenu ul, .side-nav ul {
  list-style:none;
  margin:0;
  padding:0;
  background:rgba(0,0,0,.02);
}

/* ---- Hover (mouse-on): light tint, gold left border ---- */
.submenu a:hover, .side-nav a:hover,
.submenu li:hover > a, .side-nav li:hover > a {
  background:var(--accent);
  color:var(--primary-2);
  border-left-color:var(--gold);
}
.submenu a:hover small, .side-nav a:hover small,
.submenu li:hover > a small, .side-nav li:hover > a small {
  color:var(--primary-2);
  opacity:.88;
}

/* ---- Active page: solid green, white text, gold left rule ---- */
.submenu a.active, .submenu a.selected,
.side-nav a.active, .side-nav a.selected,
.submenu li.active > a, .side-nav li.active > a,
.submenu li.selected > a, .side-nav li.selected > a {
  background:var(--primary);
  color:#fff;
  border-left-color:var(--gold);
}
.submenu a.active small, .submenu a.selected small,
.side-nav a.active small, .side-nav a.selected small,
.submenu li.active > a small, .side-nav li.active > a small,
.submenu li.selected > a small, .side-nav li.selected > a small {
  color:#fff;
  opacity:.9;
}
.submenu a.active:hover, .submenu a.selected:hover,
.side-nav a.active:hover, .side-nav a.selected:hover,
.submenu li.active > a:hover, .side-nav li.active > a:hover {
  background:var(--primary-2);
  color:#fff;
}

/* Focus visible state for keyboard navigation */
.submenu a:focus-visible, .side-nav a:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.side-note {
  margin-top:1rem;
  padding:.85rem 1rem;
  background:var(--gold-soft);
  border-left:3px solid var(--gold);
  border-radius:0 14px 14px 0;
  font-size:.88rem;
  color:#5d4a1d;
}

/* Address card in sidebar */
#address ul, .address-list {
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:.4rem;
  font-size:.92rem;
  color:var(--muted);
}
#address h3, .address-title {
  margin:0 0 .55rem;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--primary-2);
}

/* ---- Our Team grid ----------------------------------------------------- */
.team-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1rem;
  margin-top:1.2rem;
}
.member-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.member-card:hover {
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(10,38,24,.12);
}
.member-photo {
  aspect-ratio:1 / 1;
  background:linear-gradient(135deg, var(--surface-2), var(--accent));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary-2);
  font-family:var(--font-display);
  font-size:2.6rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  background-size:cover;
  background-position:center;
  opacity:.92;
}
.member-photo .member-photo-fallback { opacity:.55; }
.member-photo[data-photo] { background-color:transparent; }
.member-body {
  padding:1.05rem 1.15rem 1.25rem;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  flex:1;
}
.member-body h3 {
  margin:0;
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--text);
  font-weight:700;
}
.member-role {
  font-size:.82rem;
  color:var(--primary);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.member-body p {
  margin:.35rem 0 .6rem;
  color:var(--muted);
  font-size:.94rem;
  flex:1;
}
.member-link {
  font-size:.9rem;
  color:var(--primary);
  font-weight:700;
}
.member-link:hover { color:var(--primary-2); text-decoration:underline; }

/* Single member profile */
.profile-grid {
  display:grid;
  grid-template-columns:340px 1fr;
  gap:1.4rem;
  align-items:start;
}
.profile-card {
  padding:0;
  overflow:hidden;
}
.profile-photo {
  aspect-ratio:1 / 1;
  background:linear-gradient(135deg, var(--surface-2), var(--accent));
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary-2);
  font-family:var(--font-display);
  font-size:5rem;
  font-weight:700;
  letter-spacing:.04em;
  position:relative;
}
.profile-photo .profile-photo-fallback { opacity:.55; }
.profile-summary { padding:1.2rem 1.3rem 1.4rem; }
.profile-summary h2 {
  margin:0 0 .25rem;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
}
.profile-summary .role {
  font-size:.85rem;
  color:var(--primary);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:.7rem;
}
.profile-meta {
  list-style:none;
  margin:.7rem 0 0;
  padding:0;
  display:grid;
  gap:.45rem;
}
.profile-meta li {
  font-size:.9rem;
  color:var(--muted);
  display:flex;
  gap:.4rem;
}
.profile-meta strong { color:var(--text); min-width:7rem; }
.profile-socials { display:flex; gap:.45rem; margin-top:1rem; flex-wrap:wrap; }
.profile-socials a {
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary-2);
  font-size:.85rem;
  font-weight:700;
  background:#fff;
}
.profile-socials a:hover { background:var(--accent); }

.bio-card h2 {
  margin:0 0 .8rem;
  font-family:var(--font-display);
  font-size:1.3rem;
}
.bio-card h3 {
  margin:1.2rem 0 .5rem;
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--primary-2);
}
.bio-card p { color:var(--muted); margin:0 0 .9rem; }
.bio-card ul { padding-left:1.1rem; color:var(--muted); }
.bio-card li { margin-bottom:.35rem; }

/* ---- Cloudrexx-specific compatibility ---------------------------------- */
/* News headlines block */
.headline-news { display:grid; gap:.8rem; }
#home-headlines {
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}
.news-date time {
  display:block;
  background:var(--primary);
  color:#fff;
  padding:.35rem .55rem;
  border-radius:8px;
  font-size:.78rem;
  font-weight:700;
  white-space:nowrap;
}
.news-title {
  margin:0 0 .15rem;
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:700;
}
.news-text { margin:0; color:var(--muted); font-size:.92rem; }

/* Calendar/events block */
.calendar-event,
#calendar-events,
.events-list {
  display:grid;
  gap:.8rem;
}

/* Legacy module rescue: hide ancient layout classes that fight new layout */
#header > .wrapper > .header-container { display:contents; }
#sidebar-block { display:contents; }
#page { display:block; }

/* ---- Footer ----------------------------------------------------------- */
/* v3.3.4 — halved space between content and footer */
.footer-rich {
  margin-top:1.5rem;
  background:linear-gradient(180deg,#133121 0%, #0f2619 100%);
  color:#eef5f0;
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-rich .shell { padding:2.4rem 0 2.2rem; }
.footer-grid-rich {
  display:grid;
  grid-template-columns:1.35fr repeat(4,minmax(0,1fr));
  gap:1rem;
  align-items:start;
}
.footer-card-rich {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1rem 1.05rem;
}
.footer-card-rich h3 {
  margin:0 0 .7rem;
  font-size:.88rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#ebf3ed;
  font-weight:700;
}
.footer-card-rich ul { list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.footer-card-rich li, .footer-card-rich p, .footer-card-rich a {
  color:rgba(255,255,255,.82);
  font-size:.94rem;
  line-height:1.55;
}
.footer-card-rich a:hover { color:#fff; text-decoration:underline; }
.footer-brand-row {
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.footer-brand-row img {
  width:56px;
  height:auto;
  background:#fff;
  border-radius:10px;
  padding:4px;
}
.footer-note {
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.66);
  font-size:.86rem;
}
.footer-bottom {
  background:#0c1f15;
  color:rgba(255,255,255,.62);
  font-size:.85rem;
  padding:.85rem 0;
  text-align:center;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .masthead { flex-wrap:wrap; }
  .primary-nav {
    order:3;
    width:100%;
    justify-content:flex-start;
    margin-left:0;
    flex-wrap:wrap;
  }
  .footer-grid-rich { grid-template-columns:1fr 1fr; }
}
@media (max-width: 960px) {
  .layout, .layout.layout-right { grid-template-columns:1fr; }
  .profile-grid { grid-template-columns:1fr; }
  .section-grid { grid-template-columns:1fr; }
  .slide-visual { min-height:360px; }
  .slider-stage { min-height:360px; }
}
@media (max-width: 720px) {
  .seal { width:84px; height:84px; flex-basis:84px; }
  .header .brand .seal img { max-height:78px; }
  .brand-text strong { font-size:1rem; }
  .primary-nav {
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:.2rem;
  }
  .hero-meta, .task-list { grid-template-columns:1fr; }
  .footer-grid-rich { grid-template-columns:1fr; }
  .slide-copy { padding:1.4rem 1.3rem; }
}
@media (max-width: 480px) {
  .shell { width:min(96%, 1180px); }
  .step { grid-template-columns:36px 1fr; gap:.7rem; }
  .step-no { width:36px; height:36px; font-size:1rem; }
}

/* Cloudrexx compatibility — protect legacy markup just in case */
ul.menus, ul#subnavigation { list-style:none; padding:0; margin:0; }

/* Print niceties */
@media print {
  .topbar, .primary-nav, .footer-rich, .footer-bottom, .slider-shell { display:none; }
  body { background:#fff; color:#000; }
  .card, .content-card, .page-hero { box-shadow:none; border-color:#ccc; }
}

/* ============================================================
   Cloudrexx banner-module integration (legacy slide-link wrapper)
   v3.3.4 — layout updated to match new full-bleed visual
   ============================================================ */
.slide-link {
  position:absolute;
  inset:0;
  display:block;
  color:inherit;
  text-decoration:none;
}

/* Banner-module empty caption fallback */
.slide-title:empty, .slide-desc:empty { display:none; }

/* (Empty-slider fallback removed in v3.3 — banner is hardcoded with 9 slides.) */

/* Card-body wrapper applies inherited typography to Cloudrexx
   {CONTENT_TEXT} HTML output */
.card-body { line-height:1.7; }
.card-body h1, .card-body h2, .card-body h3, .card-body h4 {
  font-family:var(--font-display);
  color:var(--text);
  margin:1.1rem 0 .65rem;
  line-height:1.18;
}
.card-body h2 { font-size:1.65rem; }
.card-body h3 { font-size:1.3rem; color:var(--primary-2); }
.card-body p { margin:0 0 .9rem; }
.card-body a:not(.btn):not(.button):not(.member-link):not(.profile-socials a) { color:var(--primary); text-decoration:underline; }
.card-body a:not(.btn):not(.button):not(.member-link):hover { color:var(--primary-2); }
.btn, .btn-primary, .button { color:#fff !important; text-decoration:none !important; }
.btn-secondary { color:var(--text) !important; }
.card-body ul, .card-body ol { padding-left:1.25rem; margin:0 0 1rem; }
.card-body li { margin-bottom:.4rem; }
.card-body img { max-width:100%; height:auto; border-radius:14px; }
.card-body table { width:100%; border-collapse:collapse; margin:1rem 0; }
.card-body th, .card-body td { padding:.6rem .8rem; border:1px solid var(--line); text-align:left; }
.card-body th { background:var(--surface-2); font-weight:700; }
.card-body blockquote {
  margin:1rem 0;
  padding:.85rem 1rem;
  border-left:4px solid var(--gold);
  background:var(--gold-soft);
  border-radius:0 14px 14px 0;
}

/* Topbar utility (Cloudrexx login/profile block) */
.topbar-utility a { color:#dfeee5; margin-left:.85rem; }
.topbar-utility a:hover { color:#fff; text-decoration:underline; }
.topbar .shell { align-items:center; }

/* Home blocks generic wrapper */
.home-blocks { display:grid; gap:1rem; }
.home-blocks > * { background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:1.4rem; }
.home-blocks > *:empty { display:none; }

/* ============================================================
   v3.2 — Legacy 2014 markup compatibility layer
   The Cloudrexx page bodies and Content Blocks on c5.mrtb.gov.ng
   still emit the original 2014 class names. These rules style
   that markup as if it had been rewritten to the new theme
   conventions, so the live site looks correct without anyone
   editing page HTML. Whenever a page IS rewritten with new
   classes, both sets continue to work.
   ============================================================ */

/* --- Topbar: horizontal-list ------------------------------- */
.topbar .horizontal-list,
.topbar-utility .horizontal-list {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0 .85rem;
  justify-content:flex-end;
}
.topbar .horizontal-list li,
.topbar-utility .horizontal-list li { margin:0; padding:0; }
.topbar .horizontal-list a,
.topbar-utility .horizontal-list a {
  color:#dfeee5;
  font-size:.86rem;
  white-space:nowrap;
}
.topbar .horizontal-list a:hover,
.topbar-utility .horizontal-list a:hover { color:#fff; text-decoration:underline; }
@media (max-width: 720px) {
  .topbar .horizontal-list { justify-content:flex-start; }
}

/* --- Welcome card: legacy registrar photo / button --------- */
.content-primary .content1-pic,
.content-aside  .content2-pic,
.content-primary .content2-pic {
  margin:1.2rem 0 .6rem;
  text-align:center;
  font-family:var(--font-display);
  color:var(--text);
  font-size:.95rem;
}
.content-primary .content1-pic img,
.content-aside  .content2-pic img,
.content-primary .content2-pic img {
  max-width:240px;
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(10,38,24,.12);
  display:block;
  margin:0 auto .55rem;
}
.content-primary .content2,
.content-aside .content2 {
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}
.content-primary .content2 .content-title,
.content-aside .content2 .content-title {
  font-family:var(--font-display);
  font-size:1.45rem;
  margin:0 0 .8rem;
  color:var(--text);
  font-weight:700;
}
.content-primary .content1-text,
.content-aside .content1-text { color:var(--text); line-height:1.65; }

/* Legacy <a class="button"> -> primary pill button */
.card-body .button,
.content-primary .button,
.content-aside .button,
.home-blocks .button,
#search-box .button,
a.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.7rem 1.25rem;
  border-radius:999px;
  background:var(--primary);
  color:#fff !important;
  text-decoration:none !important;
  font-weight:600;
  font-size:.95rem;
  border:none;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.card-body .button:hover,
.content-primary .button:hover,
.content-aside .button:hover,
.home-blocks .button:hover,
#search-box .button:hover,
a.button:hover { background:var(--primary-2); }
a.button > span { display:inline; }

/* --- Home blocks: #services, #headlines, #search-box ------- */
.home-blocks {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
  margin-top:1.25rem;
}
.home-blocks > #services,
.home-blocks > #headlines,
.home-blocks > #search-box {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:1.4rem 1.5rem;
}
.home-blocks #services .services-title,
.home-blocks #headlines .headlines-title,
.home-blocks h3 {
  font-family:var(--font-display);
  font-size:1.2rem;
  color:var(--primary-2);
  margin:0 0 .8rem;
  font-weight:700;
}
.home-blocks #services .services-lists,
.home-blocks ul.services-lists {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.home-blocks #services .services-lists li {
  padding:.4rem 0;
  border-bottom:1px solid var(--line);
}
.home-blocks #services .services-lists li:last-child { border-bottom:none; }
.home-blocks #services .services-lists a {
  color:var(--text);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.home-blocks #services .services-lists a:hover { color:var(--primary); }
.home-blocks #services .services-lists a::before {
  content:"›";
  color:var(--primary);
  font-weight:700;
  font-size:1.05rem;
}
.home-blocks #headlines .news-more-links {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.6rem;
}
.home-blocks #headlines .news-more-links a {
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}
.home-blocks #headlines .news-more-links a:hover { text-decoration:underline; }
/* v3.3.4 — sidebar search: button BELOW the input (was overlapping content) */
.sidebar-card #search-box,
.sidebar-card #search-form,
#search-box #search-form {
  display:flex;
  flex-direction:column;
  gap:.55rem;
  align-items:stretch;
  margin-top:.5rem;
  width:100%;
  max-width:100%;
}
.sidebar-card #search-box #search-input,
#search-box #search-input {
  width:100%;
  flex:0 0 auto;
  padding:.7rem .9rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-family:inherit;
  font-size:.92rem;
  background:var(--surface-2);
  box-sizing:border-box;
}
.sidebar-card #search-box .button,
#search-box .button,
.sidebar-card #search-box input[type="submit"],
#search-box input[type="submit"] {
  width:100%;
  align-self:stretch;
  text-align:center;
  margin:0;
}
#search-box #search-input:focus { outline:2px solid var(--primary); outline-offset:1px; background:#fff; }
@media (max-width: 980px) {
  .home-blocks { grid-template-columns:1fr; }
}

/* --- Footer: legacy column wrappers ------------------------- */
.footer-rich .footer-grid-rich {
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:1.2rem;
  align-items:start;
}
.footer-rich .company-links,
.footer-rich .service-links,
.footer-rich .related-links,
.footer-rich .menu-link2,
.footer-rich .menu-link3 {
  background:transparent;
  padding:0;
  border:none;
}
.footer-rich .company-links h4,
.footer-rich .service-links h4,
.footer-rich .related-links h4,
.footer-rich .menu-link2 h4,
.footer-rich .menu-link3 h4 {
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 .9rem;
}
.footer-rich .list-2 {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.footer-rich .list-2 a {
  color:#dfeee5;
  text-decoration:none;
  font-size:.92rem;
}
.footer-rich .list-2 a:hover { color:#fff; text-decoration:underline; }
.footer-rich .list-2 li > a > span { display:inline; }

/* Footer brand row inside .footer-card-rich */
.footer-rich .footer-card-rich {
  background:transparent;
  padding:0;
  border:none;
  box-shadow:none;
}
.footer-rich .footer-brand-row {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:.85rem;
  align-items:flex-start;
}
.footer-rich .footer-brand-row img {
  width:56px;
  height:auto;
  border-radius:14px;
  background:#fff;
  padding:6px;
}
.footer-rich .footer-brand-row h3 {
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin:0 0 .5rem;
  line-height:1.3;
}
.footer-rich .footer-brand-row p {
  color:#cfdcd4;
  font-size:.86rem;
  line-height:1.55;
  margin:0 0 .55rem;
}
.footer-rich .footer-brand-row a { color:#dfeee5; text-decoration:underline; }

/* Related Links + Social row spans full width below */
.footer-rich .menu-link2 {
  grid-column: 1 / -1;
  margin-top:.5rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-rich .menu-link2 .list-2 {
  flex-direction:row;
  flex-wrap:wrap;
  gap:.4rem 1.1rem;
}

@media (max-width: 980px) {
  .footer-rich .footer-grid-rich { grid-template-columns:repeat(2, 1fr); }
  .footer-rich .menu-link2 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-rich .footer-grid-rich { grid-template-columns:1fr; }
}

/* --- Footer-bottom: copyright / social / powered-by -------- */
.footer-rich .footer-bottom {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  margin-top:1.6rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
  color:#cfdcd4;
  font-size:.85rem;
}
.footer-rich .footer-bottom .copyright,
.footer-rich .footer-bottom .powered-by {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.footer-rich .footer-bottom .powered-by { justify-self:end; }
.footer-rich .footer-bottom .powered-by a { color:#dfeee5; text-decoration:underline; }

.footer-rich .social-links {
  justify-self:center;
}
.footer-rich .list-services {
  list-style:none;
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  padding:0;
}
.footer-rich .list-services li { margin:0; padding:0; }
.footer-rich .list-services a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  transition:background .2s ease, transform .2s ease;
}
.footer-rich .list-services a:hover { background:rgba(255,255,255,.12); transform:translateY(-1px); }
.footer-rich .list-services img { width:18px; height:18px; object-fit:contain; }

@media (max-width: 760px) {
  .footer-rich .footer-bottom { grid-template-columns:1fr; text-align:center; }
  .footer-rich .footer-bottom .powered-by { justify-self:center; }
  .footer-rich .social-links { justify-self:center; }
}

/* --- Header brand: legacy <div class="seal"> wrapper ------- */
/* v3.3.4 — enlarged to match wordmark stack height (3 lines) */
.header .brand .seal { display:flex; align-items:center; }
.header .brand .seal img {
  width:100% !important;
  height:auto !important;
  max-height:96px;
  border-radius:12px;
  background:#fff;
  padding:2px;
  box-shadow:0 4px 14px rgba(10,38,24,.1);
}
.header .brand-link { line-height:0; display:inline-block; }
.header .brand .brand-link[href]:not(:has(img)) { display:none; }

/* v3.3.4 — wordmark text right of logo: clickable to /en/home, no hyperlink colour */
.header .brand .brand-text {
  cursor:pointer;
}
.header .brand .brand-text-link,
.header .brand .brand-text a {
  color:inherit;
  text-decoration:none;
  display:block;
}
.header .brand .brand-text-link:hover,
.header .brand .brand-text a:hover { color:inherit; text-decoration:none; }

/* --- Inner-page sidebar: subnavbar with bullets fix -------- */
.sidebar-card .submenu,
.sidebar-card #subnavigation,
.sidebar-card ul {
  list-style:none;
  padding:0;
  margin:0;
}

/* ============================================================
   v3.3.1 — FOOTER REDESIGN
   ------------------------------------------------------------
   (a) Brand column: logo on top centered, address spans column.
   (b) Even gutters between footer columns.
   (c) Footer-bottom row: padded, rounded, distinct/contrasted.
   ============================================================ */

/* Even out spacing across the footer columns */
.footer-rich .footer-grid-rich {
  display:grid;
  grid-template-columns:1.4fr repeat(4, minmax(0, 1fr));
  gap:1.6rem;
  align-items:start;
}

/* Brand column — logo on top, centered; address spreads the column */
.footer-rich .footer-brand-col,
.footer-rich .footer-card-rich.footer-brand-col {
  background:transparent;
  padding:0;
  border:none;
  box-shadow:none;
}
.footer-rich .footer-brand-col .footer-brand-row {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.95rem;
  width:100%;
}
.footer-rich .footer-brand-col .footer-brand-row img {
  width:88px;
  height:88px;
  object-fit:contain;
  background:#fff;
  border-radius:18px;
  padding:8px;
  margin:0 auto;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.footer-rich .footer-brand-col .footer-brand-text {
  width:100%;
}
.footer-rich .footer-brand-col .footer-brand-text h3 {
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-soft, #d9c690);
  margin:0 0 .55rem;
  line-height:1.3;
}
.footer-rich .footer-brand-col .footer-brand-text p {
  color:#cfdcd4;
  font-size:.88rem;
  line-height:1.6;
  margin:0 0 .65rem;
}
.footer-rich .footer-brand-col .footer-brand-text p:last-child { margin-bottom:0; }
.footer-rich .footer-brand-col .footer-brand-text a {
  color:#dfeee5;
  text-decoration:underline;
}

/* Footer-bottom — distinct, rounded, contrasted */
.footer-rich .shell { padding:2.6rem 0 2rem; }
.footer-rich .footer-bottom {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.2rem;
  margin-top:2.2rem;
  padding:1.05rem 1.6rem;
  border:1px solid rgba(255,255,255,.14);
  border-top:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.42) 100%);
  box-shadow:0 6px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  color:#e6efe9;
  font-size:.88rem;
}
.footer-rich .footer-bottom .copyright,
.footer-rich .footer-bottom .powered-by {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#e6efe9;
}
.footer-rich .footer-bottom .copyright a img { vertical-align:middle; }
.footer-rich .footer-bottom .powered-by { justify-self:end; }
.footer-rich .footer-bottom .powered-by a {
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  padding-bottom:1px;
}
.footer-rich .footer-bottom .powered-by a:hover { border-bottom-color:#fff; }

/* v3.3.4 — explicitly centre BLOCK_45 social icons in the bottom row */
.footer-rich .footer-bottom > .social-links,
.footer-rich .footer-bottom .social-links {
  justify-self:center;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer-rich .footer-bottom .list-services {
  list-style:none;
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0;
  padding:0;
}
.footer-rich .footer-bottom .list-services a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.footer-rich .footer-bottom .list-services a:hover {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
  transform:translateY(-1px);
}
.footer-rich .footer-bottom .list-services img {
  width:18px;
  height:18px;
  object-fit:contain;
}

/* Responsive collapse */
@media (max-width: 1180px) {
  .footer-rich .footer-grid-rich {
    grid-template-columns:1.3fr repeat(2, minmax(0, 1fr));
    gap:1.4rem;
  }
}
@media (max-width: 760px) {
  .footer-rich .footer-grid-rich { grid-template-columns:1fr; gap:1.4rem; }
  .footer-rich .footer-bottom {
    grid-template-columns:1fr;
    text-align:center;
    padding:1rem 1.1rem;
    gap:.7rem;
  }
  .footer-rich .footer-bottom .powered-by,
  .footer-rich .footer-bottom .social-links { justify-self:center; }
}

/* ============================================================
   v3.3.2 — Footer related-links row (Block 60)
   ============================================================ */
.footer-rich .footer-related-row {
  margin-top:1.6rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.08);
  color:#cfdcd4;
  font-size:.88rem;
}
.footer-rich .footer-related-row h3 {
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-soft, #d9c690);
  margin:0 0 .65rem;
}
.footer-rich .footer-related-row ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.4rem;
}
.footer-rich .footer-related-row li { margin:0; padding:0; }
.footer-rich .footer-related-row a {
  color:#dfeee5;
  text-decoration:none;
  font-size:.92rem;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.footer-rich .footer-related-row a:hover {
  color:#fff;
  border-bottom-color:rgba(255,255,255,.45);
}
@media (max-width: 760px) {
  .footer-rich .footer-related-row ul { gap:.4rem 1rem; }
}

/* ============================================================
   v3.3.6 — BLOCK 61 (Footer Zonal Office Cards)
   Lives between the rich grid (BLOCK_55..59) and the related-
   links row (BLOCK_60). Last partial row stays centered so
   future offices fill outward symmetrically from the middle.
   ============================================================ */
.footer-zonal-row { padding:18px 0 6px; }
.footer-zonal {
  padding:8px 0 22px;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-top:18px;
}
.footer-zonal .heading {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:18px;
  padding-top:18px;
}
.footer-zonal h3 {
  margin:0;
  font-family:var(--font-display, Georgia, serif);
  font-size:1.35rem;
  color:#fff;
  font-weight:700;
}
.footer-zonal .heading a {
  color:var(--gold, #c9a94a);
  font-size:.85rem;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.04em;
}
.footer-zonal .heading a:hover { color:#fff; }

/* Flex-wrap so partial last row centers and future offices fill outward */
.zonal-grid {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.zonal-card {
  flex:0 1 calc((100% - 14px*3) / 4);     /* 4-up at desktop */
  min-width:220px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-left:3px solid var(--gold, #c9a94a);
  border-radius:8px;
  padding:13px 14px;
  color:inherit;
  text-decoration:none;
  display:block;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.zonal-card:hover {
  background:rgba(201,169,74,.10);
  border-left-color:#fff;
  transform:translateY(-1px);
}
.zonal-card .zone-name {
  font-size:.86rem;
  font-weight:700;
  color:#fff;
  letter-spacing:.02em;
  margin-bottom:6px;
  display:flex; align-items:center; gap:6px;
}
.zonal-card .zone-name::before {
  content:"●";
  color:var(--gold, #c9a94a);
  font-size:.55rem;
  line-height:1;
}
.zonal-card .addr-block {
  font-size:.74rem;
  line-height:1.45;
  color:#b9cfc4;
  margin-bottom:6px;
}
.zonal-card .meta {
  display:flex; flex-direction:column; gap:2px;
  font-size:.72rem; line-height:1.3;
  color:#dfeae3;
}
.zonal-card .meta a { color:#dfeae3; text-decoration:none; }
.zonal-card .meta .label {
  color:#7c9485;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-right:4px;
  font-weight:700;
}
.zonal-card .coord {
  color:var(--gold, #c9a94a);
  font-size:.72rem;
  margin-top:5px;
  font-style:italic;
}

@media (max-width:1080px) { .zonal-card { flex-basis:calc((100% - 14px*2)/3); } }
@media (max-width:760px)  { .zonal-card { flex-basis:calc((100% - 14px)/2);   } }
@media (max-width:520px)  { .zonal-card { flex-basis:100%;                    } }

/* ============================================================
   v3.3.6 — Standalone /en/contact/zonal-offices page styles
   Larger card variant for the dedicated content page.
   ============================================================ */
.zonal-page { background:#fff; border-radius:18px; padding:24px 4px 12px; }
.zonal-page .crumb { font-size:.78rem; color:var(--muted,#52615a); margin-bottom:8px; }
.zonal-page .crumb a { color:var(--primary,#0d6b46); text-decoration:none; }
.zonal-page h1 {
  margin:0 0 4px;
  font-family:var(--font-display, Georgia, serif);
  font-size:2.1rem;
  color:var(--primary-deep,#073a26);
}
.zonal-page .lede {
  margin:0 0 24px;
  color:var(--muted,#52615a);
  font-size:.95rem;
  max-width:62ch;
  line-height:1.55;
}
.zonal-page-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.zonal-page-card {
  background:var(--surface,#f3f7f4);
  border:1px solid var(--line,#d6dfd8);
  border-top:4px solid var(--primary,#0d6b46);
  border-radius:10px;
  padding:16px 18px;
  transition:transform .15s ease, box-shadow .15s ease, border-top-color .2s ease;
}
.zonal-page-card:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(10,38,24,.12);
  border-top-color:var(--gold,#c9a94a);
}
.zonal-page-card .badge {
  display:inline-block;
  background:var(--primary,#0d6b46);
  color:#fff;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
  padding:3px 8px;
  border-radius:4px;
  margin-bottom:8px;
}
.zonal-page-card .badge.head  { background:var(--gold,#c9a94a); color:#1f2a24; }
.zonal-page-card .badge.liaison { background:var(--primary-2,#0a583a); }
.zonal-page-card h3 {
  margin:0 0 8px;
  font-family:var(--font-display, Georgia, serif);
  font-size:1.05rem;
  color:var(--primary-deep,#073a26);
  font-weight:700;
  line-height:1.2;
}
.zonal-page-card .addr-stack {
  font-size:.78rem;
  line-height:1.5;
  color:var(--muted,#52615a);
  margin-bottom:10px;
  display:flex; flex-direction:column; gap:1px;
}
.zonal-page-card .addr-stack .street { color:var(--text,#1f2a24); }
.zonal-page-card .contact-rows {
  font-size:.78rem;
  line-height:1.45;
  display:flex; flex-direction:column; gap:3px;
}
.zonal-page-card .contact-rows .row { display:flex; align-items:flex-start; gap:6px; }
.zonal-page-card .contact-rows .lbl {
  display:inline-block;
  min-width:48px;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7c9485;
  font-weight:700;
  padding-top:1px;
}
.zonal-page-card .contact-rows .val { color:var(--text,#1f2a24); }
.zonal-page-card .contact-rows .val a { color:var(--primary,#0d6b46); text-decoration:none; }
.zonal-page-card .contact-rows .coord { color:var(--primary-2,#0a583a); font-style:italic; font-weight:600; }
@media (max-width:1080px) { .zonal-page-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px)  { .zonal-page-grid { grid-template-columns:1fr; } }