/* ============================================================
   ZUCE Group - design tokens (light default, dark via [data-theme="dark"])
   ============================================================ */
:root {
  --zuce-navy: #10789f;
  --zuce-accent: #5fcbed;

  --bg: #ffffff;
  --bg-alt: #f5f7f9;
  --surface: #ffffff;
  --text: #14212b;
  --text-muted: #5b6b76;
  --border: #e3e8eb;
  --shadow: 0 8px 24px rgba(20, 33, 43, 0.06);
  --header-bg: #ffffff;
  --footer-bg: #0d2733;
  --footer-text: #cfe3ea;
}

[data-theme="dark"] {
  --bg: #0e1a22;
  --bg-alt: #122430;
  --surface: #142a36;
  --text: #eef4f7;
  --text-muted: #9db2bd;
  --border: #223947;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --header-bg: #0e1a22;
  --footer-bg: #081620;
  --footer-text: #b8ccd4;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.2s ease, color 0.2s ease;
  line-height: 1.55;
}

a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}
.site-header .header-inner {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-header .brand { display: flex; align-items: center; text-decoration: none; }
.site-header .brand img.logo { height: 53px; display: none; }
.site-header .brand img.logo-for-light { display: block; }
[data-theme="dark"] .site-header .brand img.logo-for-light { display: none; }
[data-theme="dark"] .site-header .brand img.logo-for-dark { display: block; }
.footer-grid img.logo { height: 64px; margin-bottom: 1rem; display: block; }
.site-header nav { display: flex; align-items: center; gap: 1.75rem; }
.site-header nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.site-header nav a:hover { color: var(--zuce-navy); }
.theme-toggle {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--zuce-navy); }

/* ---------- Mobile nav toggle (hamburger) ---------- */
.nav-toggle {
  display: none;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-open { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }

/* "Where We Work" (countries): desktop reaches these via the top country-bar
   strip, so this nested mobile-drawer copy stays fully hidden there and only
   appears inside the @media (max-width: 860px) block further down.
   Note: selector is doubled up (.nav-item.nav-item-mobile-only) rather than
   just .nav-item-mobile-only, because the generic .nav-item { display: flex }
   rule further down the file has equal specificity and would otherwise win
   on source order alone, showing this item on desktop too. */
.nav-item.nav-item-mobile-only { display: none; }
.submenu-toggle-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

/* Floating theme toggle: hovers over the bottom-right corner on desktop so
   it's always reachable without living in the nav. Hidden on mobile, where
   the site simply defaults to (and stays on) the light theme. */
.theme-toggle-floating {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  box-shadow: var(--shadow);
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.theme-toggle-floating:hover { opacity: 1; transform: scale(1.08); }

@media (max-width: 768px) {
  .theme-toggle-floating { display: none; }
}

/* ---------- Header nav dropdown (What We Do -> divisions) ---------- */
.nav-item { position: relative; display: flex; align-items: center; }
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 0.4rem;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 50;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a { padding: 0.6rem 0.75rem !important; border-radius: 6px; white-space: normal; }
.submenu a:hover { background: var(--bg-alt); }

main { display: block; }

/* ---------- Hero ---------- */
.hero {
  padding: 5rem 1.5rem 4rem;
  max-width: 1120px;
  margin: 0 auto;
}
.hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--zuce-navy);
  margin: 0 0 1rem;
}
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  margin: 0 0 1.25rem;
  max-width: 18ch;
}
.hero .lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 60ch;
  margin: 0 0 2rem;
}
.hero .cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.button-primary { background: var(--zuce-navy); color: #fff; }
.button-primary:hover { background: #0c6483; }
.button-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.button-secondary:hover { border-color: var(--zuce-navy); }

button, form button { font-family: inherit; }

/* ---------- Stats bar ---------- */
.stats-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.stats-bar .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 2.5rem 1.5rem;
}
.stats-bar .stat { text-align: left; }
.stats-bar .stat .num {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--zuce-navy);
}
.stats-bar .stat .label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---------- Sections ---------- */
section.block { padding: 4.5rem 1.5rem; max-width: 1120px; margin: 0 auto; }
section.block.alt { background: var(--bg-alt); max-width: none; padding: 4.5rem 0; }
section.block.alt .inner { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

.section-head { max-width: 60ch; margin-bottom: 2.5rem; }
.section-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--zuce-navy);
  margin: 0 0 0.6rem;
}
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.75rem; }
.section-head p { color: var(--text-muted); margin: 0; }

/* ---------- Numbered divisions list ---------- */
.divisions-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.divisions-list li {
  border-bottom: 1px solid var(--border);
  padding: 2rem 0;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  align-items: start;
}
.divisions-list .idx {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--zuce-navy);
}
.divisions-list h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.divisions-list .tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--zuce-navy);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-bottom: 0.6rem;
}
.divisions-list p { margin: 0; color: var(--text-muted); }
.divisions-list ul.capabilities {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.divisions-list ul.capabilities li {
  border: 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.divisions-list ul.capabilities li::before { content: "- "; color: var(--zuce-accent); }

/* ---------- Case study / latest-work cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.case-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.case-card .thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bg-alt);
  display: block;
}
.case-card .thumb-fallback {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--zuce-navy), var(--zuce-accent));
}
.case-card .body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.case-card h3 { font-size: 1.05rem; margin: 0; flex: 1; }
.case-card .read-more { margin-top: 1rem; font-size: 0.85rem; font-weight: 600; color: var(--zuce-navy); }

/* ---------- Sectors / pills ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--surface);
  text-decoration: none;
  display: inline-block;
}
a.pill:hover { border-color: var(--zuce-navy); color: var(--zuce-navy); }
a.pill-active:hover { color: #fff; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--zuce-navy);
  color: #fff;
  border-radius: 14px;
  padding: 3rem 2rem;
  text-align: center;
  margin: 0 1.5rem 4.5rem;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.cta-band h2 { margin: 0 0 0.75rem; font-size: 1.8rem; }
.cta-band p { color: rgba(255,255,255,0.85); margin: 0 0 1.5rem; }
.cta-band .button-primary { background: #fff; color: var(--zuce-navy); }
.cta-band .button-primary:hover { background: var(--zuce-accent); color: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 3.5rem 1.5rem 2rem;
}
.footer-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-grid p { color: rgba(255,255,255,0.65); font-size: 0.9rem; max-width: 32ch; }
.footer-grid h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 1rem; color: rgba(255,255,255,0.9); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.6rem; }
.footer-grid a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.9rem; }
.footer-grid a:hover { color: #fff; }
.footer-tagline { font-weight: 700; color: var(--zuce-accent); }

.footer-bottom {
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 860px) {
  .stats-bar .wrap { grid-template-columns: repeat(2, 1fr); }
  .divisions-list li { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Primary nav becomes a hamburger-toggled drawer. It used to just
     display:none every link below this width with nothing to replace it,
     so the whole site was unnavigable on a phone -- this is the fix. */
  .nav-toggle { display: inline-flex; }

  /* The top country-bar strip is a desktop-only affordance -- on mobile its
     links move into the drawer instead, nested under About as "Where We
     Work" (see .nav-item-mobile-only below), so the standalone strip goes
     away rather than duplicating the same 7 links twice. */
  .country-bar { display: none; }

  .site-header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .site-header nav.is-open { max-height: 80vh; overflow-y: auto; }
  .site-header nav a:not(.button) {
    display: block;
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--border);
  }
  .site-header .nav-item {
    flex-direction: column;
    align-items: stretch;
  }

  /* "What We Do" can't rely on :hover on a touch screen, so it becomes a
     tap-to-expand accordion here instead (see mobile-nav.js). */
  .site-header .submenu {
    position: static;
    margin-top: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0;
    background: var(--bg-alt);
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .site-header .nav-item.submenu-open .submenu { max-height: 240px; }
  .site-header .submenu a {
    padding: 0.8rem 2.25rem !important;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  /* "Where We Work" nested under About: same tap-to-expand pattern as What
     We Do, just with a <button> trigger instead of an <a> (there's no
     standalone page for it) and a taller allowance since it holds 7 links
     instead of 3. */
  .nav-item.nav-item-mobile-only { display: flex; }
  .submenu-toggle-btn {
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-item-mobile-only.submenu-open .submenu { max-height: 400px; }

  /* "Our Work" category dropdown is desktop-only (hover-triggered) -- force
     it hidden here rather than letting it fall into the tap-accordion above,
     so on mobile "Our Work" is just a plain link straight to /work. */
  .nav-item[data-no-mobile-submenu] .submenu { display: none !important; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .stats-bar .wrap { grid-template-columns: 1fr; }
}

/* ---------- Flash / forms / admin (unchanged from scaffold) ---------- */
.flash { padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 4px; }
.flash-error { background: #fdecea; color: #b3261e; }
.flash-success { background: #e6f4ea; color: #1e7e34; }

form label { display: block; margin-bottom: 1rem; font-weight: 600; }
/* Same look as "form label" above, but for fields that wrap something more
   than a plain input, a rich text editor, a hidden textarea, etc. A real
   <label> forwards clicks on any non-native-control descendant (like the
   items in Quill's heading dropdown, or an inserted image) to its associated
   hidden field, which steals focus mid-click and breaks that interaction. */
form .field-block { display: block; margin-bottom: 1rem; }
form .field-block-label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
form input, form textarea, form select {
  display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem;
  font-weight: 400; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
}
/* The generic rule above sets display:block on every input/textarea, which
   quietly overrides the browser's built-in "hidden means display:none"
   default. A handful of fields (Quill's raw-HTML data-carriers, the gallery
   URL list) are intentionally marked [hidden] because a nicer widget sits
   in front of them — this restores that so they actually stay invisible. */
[hidden] { display: none !important; }

.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--surface);
  color: var(--text);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}
.admin-sidebar .brand { color: var(--text); font-weight: 700; text-decoration: none; display: block; margin-bottom: 1.25rem; padding: 0 0.5rem; }

.admin-account-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.6rem;
  margin-bottom: 1.25rem;
  background: var(--bg-alt);
  border-radius: 12px;
}
.admin-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--zuce-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}
.admin-account-info { display: flex; flex-direction: column; min-width: 0; }
.admin-account-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-account-email { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-sidebar nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.admin-nav-divider {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  margin: 1rem 0.5rem 0.35rem;
}
.admin-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
}
.admin-sidebar nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.admin-sidebar nav a:hover { background: var(--bg-alt); color: var(--text); }
.admin-sidebar nav a.active { background: rgba(16, 120, 159, 0.1); color: var(--zuce-navy); font-weight: 700; }
.admin-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.admin-sidebar-viewsite,
.admin-sidebar-signout {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
}
.admin-sidebar-viewsite svg, .admin-sidebar-signout svg { width: 16px; height: 16px; }
.admin-sidebar-viewsite:hover, .admin-sidebar-signout:hover { background: var(--bg-alt); color: var(--text); }
/* Grid (rather than flex/block) so the content column can be centered with
   a max-width while still stacking any number of top-level children
   (admin views commonly output a flash div, a <section>, and trailing
   <script> tags as siblings) top-to-bottom exactly like normal block flow. */
.admin-content {
  flex: 1;
  padding: 2rem 3rem;
  background: var(--bg-alt);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1180px);
  justify-content: center;
  align-content: start;
}

@media (max-width: 1400px) {
  .admin-content { padding: 2rem; }
}

/* Admin sidebar collapses into a horizontally-scrollable top tab bar below
   this width, rather than squeezing a fixed 250px column plus content into
   a phone-width viewport. */
@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .admin-sidebar .brand { margin-bottom: 0; flex-shrink: 0; }
  .admin-account-card { display: none; }
  .admin-sidebar nav { flex-direction: row; flex-wrap: nowrap; flex: none; gap: 0.25rem; }
  .admin-nav-divider { display: none; }
  .admin-sidebar nav a { white-space: nowrap; padding: 0.5rem 0.6rem; font-size: 0.85rem; }
  .admin-sidebar-footer {
    flex-direction: row;
    flex-shrink: 0;
    border-top: none;
    border-left: 1px solid var(--border);
    margin-top: 0;
    margin-left: 0.25rem;
    padding-top: 0;
    padding-left: 0.5rem;
  }
  .admin-content { padding: 1.25rem; }
}

.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.admin-header h1 { margin: 0; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
/* A wide table (several columns) would otherwise force the whole page to
   scroll sideways on a phone -- making the table itself the scrolling
   element keeps the rest of the page usable. No template changes needed:
   the table keeps its normal row/cell layout, it's just the outer <table>
   box that becomes a horizontally-scrollable block. */
@media (max-width: 700px) {
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; border-radius: 8px; }
}
.admin-table th, .admin-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.admin-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--bg-alt); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td a { color: var(--zuce-navy); text-decoration: none; font-weight: 600; font-size: 0.88rem; }
.admin-table td a:hover { text-decoration: underline; }
.admin-table td form { display: inline; margin-left: 0.75rem; }
.admin-table td form button {
  background: none; border: none; color: #c0392b; cursor: pointer;
  font-weight: 600; font-size: 0.88rem; font-family: inherit; padding: 0;
}
.admin-table td form button:hover { text-decoration: underline; }

/* ---------- CMS body typography (blog posts & pages) ---------- */
.cms-body .featured-image {
  width: 100%; max-height: 420px; object-fit: cover; border-radius: 10px; margin-bottom: 2rem;
}
.cms-body { max-width: 72ch; }
.cms-body h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }
.cms-body h3 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
.cms-body p { margin: 0 0 1.25rem; color: var(--text); }
.cms-body ul, .cms-body ol { margin: 0 0 1.25rem; padding-left: 1.4rem; color: var(--text); }
.cms-body li { margin-bottom: 0.4rem; }
.cms-body a { color: var(--zuce-navy); text-decoration: underline; }
.cms-body blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 1.25rem;
  border-left: 3px solid var(--zuce-accent);
  color: var(--text-muted);
  font-style: italic;
}
.cms-body img { max-width: 100%; border-radius: 8px; }
.cms-body pre { background: var(--bg-alt); padding: 1rem; border-radius: 8px; overflow-x: auto; }
.article-shell .cms-body { max-width: none; }

/* ---------- Top country bar ---------- */
/* Right-aligned to match the primary nav's last item ("Contact"). The
   padding lives on .country-bar itself (not .wrap) so this mirrors
   .site-header/.header-inner's structure exactly: an edge-to-edge bar with
   its own horizontal padding, containing a max-width-1120/margin-auto inner
   box with NO padding of its own. Putting padding on .wrap here too (as it
   was before) double-counts the inset at wide viewports and pulls the
   right-aligned content noticeably left of where "Contact" actually ends. */
.country-bar {
  background: var(--zuce-accent);
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.4rem 1.5rem;
}
.country-bar .wrap { max-width: 1120px; margin: 0 auto; width: 100%; display: flex; justify-content: flex-end; gap: 1.5rem; padding: 0; }
.country-bar a {
  color: #06313f;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  opacity: 0.85;
}
.country-bar a:hover { opacity: 1; text-decoration: underline; }

/* ---------- Full-bleed hero ---------- */
.hero-full {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-bg-fallback {
  background: linear-gradient(135deg, var(--zuce-navy), #0a4f66 55%, var(--zuce-accent));
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 22, 30, 0.35) 0%, rgba(8, 18, 25, 0.85) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
  width: 100%;
}
.hero-content .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--zuce-accent);
  margin: 0 0 1rem;
}
.hero-content h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  margin: 0 0 1.25rem;
  max-width: 18ch;
}
.hero-content .lede {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  max-width: 60ch;
  margin: 0 0 2rem;
}
.button-outline-light {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,0.55);
  color: #fff;
  background: transparent;
}
.button-outline-light:hover { background: rgba(255,255,255,0.12); }

/* ---------- Article header (posts & pages) ---------- */
.post-hero { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.post-hero .wrap { padding: 3rem 1.5rem 1.15rem; }
.post-hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--zuce-navy);
  margin: 0 0 0.6rem;
}
.post-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 0.6rem; max-width: 32ch; }
.post-hero .post-date { color: var(--text-muted); margin: 0; font-size: 0.9rem; }
.post-hero-pattern {
  height: 14px;
  background-image: repeating-linear-gradient(90deg, var(--zuce-navy) 0 10px, var(--zuce-accent) 10px 20px);
  opacity: 0.85;
}

/* ---------- Article layout ---------- */
.article-shell {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  padding: 3rem 1.5rem 4.5rem;
  align-items: start;
}
.article-shell-single {
  max-width: 760px;
  padding: 3rem 1.5rem 4.5rem;
}
.post-sidebar {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem;
}
.sidebar-card h4 {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.author-chip { display: flex; align-items: center; gap: 0.75rem; }
.author-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--zuce-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.author-chip div strong { display: block; font-size: 0.9rem; }
.author-chip div span { display: block; font-size: 0.8rem; color: var(--text-muted); }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin-bottom: 0.6rem; }
.toc-list li.toc-sub { padding-left: 0.9rem; font-size: 0.85rem; }
.toc-list a {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.toc-list a:hover { color: var(--zuce-navy); }

@media (max-width: 860px) {
  .article-shell { grid-template-columns: 1fr; }
  .post-sidebar { position: static; }
}

/* ---------- Generic status tag (admin tables) ---------- */
.admin-table .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ---------- Small pill variants (cards) ---------- */
.pill-row-tight { margin-bottom: 0.6rem; gap: 0.4rem; }
.pill-sm { padding: 0.2rem 0.6rem; font-size: 0.72rem; }
.pill-active { background: var(--zuce-navy); border-color: var(--zuce-navy); color: #fff; font-weight: 600; }
.card-summary { color: var(--text-muted); font-size: 0.88rem; margin: 0.4rem 0 0; }

/* ---------- Our Work filter tabs ---------- */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.filter-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.filter-tab:hover { border-color: var(--zuce-navy); }
.filter-tab.active { background: var(--zuce-navy); border-color: var(--zuce-navy); color: #fff; }

/* ---------- Admin form checkbox groups ---------- */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 0.5rem;
}
.checkbox-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400 !important;
  margin-bottom: 0 !important;
}
.checkbox-inline input { width: auto !important; margin: 0 !important; }
.hint { color: var(--text-muted); font-weight: 400; font-size: 0.85rem; }

/* ---------- Comments ---------- */
.comment-list { list-style: none; margin: 0 0 2.5rem; padding: 0; max-width: 72ch; }
.comment { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.comment-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.comment-body strong { display: inline-block; margin-right: 0.6rem; }
.comment-date { color: var(--text-muted); font-size: 0.8rem; }
.comment-body p { margin: 0.4rem 0 0; color: var(--text); }

.comment-form { max-width: 72ch; }
.comment-form textarea { resize: vertical; }
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Project client logo, gallery grid, video embed ---------- */
.client-logo {
  max-height: 48px;
  max-width: 200px;
  margin-top: 1rem;
  display: block;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.photo-grid-item {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  padding: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.photo-grid-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.photo-grid-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: 1.5rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Case study detail: hero + brief/deliverables + sidebar ---------- */
.case-study-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  padding: 3rem 1.5rem 4.5rem;
  align-items: start;
}
.case-hero-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 2rem;
  display: block;
}
.case-section { margin-bottom: 2.5rem; }
.case-section-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--zuce-navy);
  margin: 0 0 0.9rem;
}
.case-sidebar {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.case-sidebar-logo { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.case-sidebar-logo img { max-width: 100%; max-height: 90px; object-fit: contain; }
.case-sidebar-client-name { margin: 0; font-weight: 700; font-size: 1.05rem; }
.case-sidebar-website-link { display: inline-block; margin-top: 0.6rem; font-size: 0.88rem; font-weight: 600; color: var(--zuce-navy); text-decoration: none; }
.case-sidebar-website-link:hover { text-decoration: underline; }
.cms-body-compact p { margin: 0 0 0.9rem; font-size: 0.92rem; }
.cms-body-compact p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .case-study-shell { grid-template-columns: 1fr; }
  .case-sidebar { position: static; }
}

/* ---------- Gallery lightbox (same-page modal, blurred backdrop) ---------- */
#page-blur-wrap { transition: filter 0.25s ease; }
#page-blur-wrap.is-blurred { filter: blur(6px); pointer-events: none; user-select: none; }
body.lightbox-active { overflow: hidden; }

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 20, 0.72);
  padding: 3rem;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-image {
  max-width: min(90vw, 1100px);
  max-height: 86vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.lightbox-close, .lightbox-nav {
  position: fixed;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lightbox-close { top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; font-size: 1.6rem; }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.24); }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.3rem; }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

@media (max-width: 640px) {
  .lightbox-overlay { padding: 1rem; }
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-close { top: 0.75rem; right: 0.75rem; }
}

/* ---------- Admin: project/post/page form layout ---------- */
.project-form-shell { max-width: 1180px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.form-section-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.form-section .hint { display: block; margin: 0 0 1rem; }
.form-save-button { width: 100%; margin-top: 0.5rem; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Rich text editor (Quill) ---------- */
.rich-editor { background: var(--surface); border-radius: 6px; }
.rich-editor .ql-toolbar { border-radius: 6px 6px 0 0; border-color: var(--border); }
.rich-editor .ql-container { border-radius: 0 0 6px 6px; border-color: var(--border); min-height: 160px; font-size: 0.95rem; }
.rich-editor-compact .ql-container { min-height: 90px; }

/* Visual/HTML mode toggle (see post-form.ejs) -- a small tab pair sitting
   above the editor, switching between the Quill instance and a plain
   textarea of the same field's raw markup. */
.editor-mode-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.editor-mode-tab {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.editor-mode-tab:hover { border-color: var(--zuce-navy); }
.editor-mode-tab.is-active { background: var(--zuce-navy); border-color: var(--zuce-navy); color: #fff; }
.editor-insert-table-btn {
  margin-left: auto;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.editor-insert-table-btn:hover { border-color: var(--zuce-navy); color: var(--zuce-navy); }
.rich-editor-html-source {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
  font-size: 0.85rem !important;
  min-height: 260px;
  resize: vertical;
}

/* Table support for the rich text editor (see the TableEmbedBlot +
   clipboard matcher in post-form.ejs) -- unscoped so the exact same styling
   applies both to the table as it appears live inside the admin editor and
   to the identical markup once it's saved and rendered on the public post
   page (.cms-body), rather than maintaining two separate rulesets. */
.cms-table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.cms-table-wrap table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.cms-table-wrap th, .cms-table-wrap td {
  border: 1px solid var(--border);
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.cms-table-wrap th {
  background: var(--bg-alt);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.cms-table-wrap tr:nth-child(even) td { background: var(--bg-alt); }

/* ---------- Admin image upload fields ---------- */
.upload-field { display: flex; flex-direction: column; gap: 0.75rem; }
.upload-preview {
  width: 100%;
  min-height: 110px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  overflow: hidden;
}
.upload-preview img { max-width: 100%; max-height: 160px; object-fit: contain; }
.upload-empty { color: var(--text-muted); font-size: 0.85rem; }
.upload-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.button-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0.55rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
}
.button-ghost:hover { border-color: #c0392b; color: #c0392b; }

/* ---------- Admin gallery multi-upload ---------- */
.gallery-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.gallery-upload-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 1 / 1;
}
.gallery-upload-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(8, 14, 20, 0.72);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 1rem;
}
.gallery-remove:hover { background: #c0392b; }

/* ---------- Admin dashboard ---------- */
.dash-greeting { margin-bottom: 1.75rem; }
.dash-greeting h1 { margin: 0 0 0.3rem; font-size: 1.6rem; }
.dash-greeting p { color: var(--text-muted); margin: 0; }

.dash-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.dash-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.dash-stat-card:hover { border-color: var(--zuce-navy); transform: translateY(-2px); }
.dash-stat-icon { color: var(--zuce-navy); }
.dash-stat-icon svg { width: 20px; height: 20px; }
.dash-stat-count { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.dash-stat-label { color: var(--text-muted); font-size: 0.85rem; }

.dash-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.dash-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dash-panel-header h2 { margin: 0; font-size: 1.05rem; }
.dash-panel-header a { color: var(--zuce-navy); text-decoration: none; font-size: 0.88rem; font-weight: 600; }
.dash-panel-header a:hover { text-decoration: underline; }

.dash-recent-list { display: flex; flex-direction: column; gap: 0.15rem; }
.dash-recent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
}
.dash-recent-row:hover { background: var(--bg-alt); }
.dash-recent-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dash-recent-title { font-weight: 600; font-size: 0.94rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-recent-meta { color: var(--text-muted); font-size: 0.82rem; }
.dash-recent-status {
  flex-shrink: 0;
  text-transform: capitalize;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text-muted);
}
.dash-recent-status-published { background: #e6f4ea; color: #1e7e34; }

.dash-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 2rem 1rem;
  color: var(--text-muted);
}
.dash-empty-state svg { width: 32px; height: 32px; opacity: 0.5; }
.dash-empty-state p { margin: 0; }
.dash-empty-state a { color: var(--zuce-navy); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.dash-empty-state a:hover { text-decoration: underline; }

.dash-actions-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.dash-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.dash-action-card:hover { border-color: var(--zuce-navy); transform: translateY(-2px); }
.dash-action-title { display: block; font-weight: 700; font-size: 0.98rem; margin-bottom: 0.2rem; }
.dash-action-desc { display: block; color: var(--text-muted); font-size: 0.85rem; }
.dash-action-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }

/* ---------- Admin: drag-to-reorder lists (hero slides, page blocks) ---------- */
.reorder-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.reorder-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  cursor: grab;
}
.reorder-item.is-dragging { opacity: 0.4; }
.reorder-handle { color: var(--text-muted); flex-shrink: 0; display: flex; }
.reorder-handle svg { width: 16px; height: 16px; }
.reorder-thumb {
  width: 64px; height: 44px; flex-shrink: 0; border-radius: 6px; overflow: hidden;
  background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
}
.reorder-thumb img, .reorder-thumb video { width: 100%; height: 100%; object-fit: cover; }
.reorder-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.reorder-body strong { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-table-meta { color: var(--text-muted); font-size: 0.8rem; text-transform: capitalize; }
.reorder-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.reorder-actions a { color: var(--zuce-navy); text-decoration: none; font-weight: 600; font-size: 0.85rem; }
.reorder-actions a:hover { text-decoration: underline; }
.reorder-actions form { display: inline; }
.reorder-actions button {
  background: none; border: none; color: #c0392b; cursor: pointer;
  font-weight: 600; font-size: 0.85rem; font-family: inherit; padding: 0;
}

/* ---------- Admin: block type picker ---------- */
.block-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.block-picker-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--text);
}
.block-picker-item strong { font-size: 0.9rem; color: var(--zuce-navy); }
.block-picker-item span { font-size: 0.8rem; color: var(--text-muted); }
.block-picker-item:hover { border-color: var(--zuce-navy); border-style: solid; }

/* ---------- Homepage hero carousel ---------- */
.hero-carousel { position: relative; min-height: 620px; overflow: hidden; color: #fff; }
.hero-carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: flex-end;
}
.hero-carousel-slide.is-active { opacity: 1; visibility: visible; position: relative; }
.hero-carousel-slide .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-carousel-slide .hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 22, 30, 0.35) 0%, rgba(8, 18, 25, 0.85) 100%);
}
.hero-carousel-slide .hero-content { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 5rem 1.5rem 7rem; width: 100%; }
.hero-carousel-dots {
  position: absolute;
  z-index: 3;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}
.hero-carousel-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.25); padding: 0; cursor: pointer;
}
.hero-carousel-dots button.is-active { background: #fff; }

/* Overlapping 3-column band, pulled up over the bottom of the hero */
.hero-columns-band {
  position: relative;
  z-index: 4;
  max-width: 1120px;
  /* Pulled up so roughly the top third of the band sits over the hero
     image, creating the layered/overlapping look from the reference site. */
  margin: -7rem auto 0;
  padding: 0 1.5rem;
}
.hero-columns-band .inner {
  background: var(--zuce-navy);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: 0 20px 45px rgba(8, 18, 25, 0.25);
}
.hero-columns-band .col { padding: 2rem 2rem 2.25rem; border-right: 1px solid rgba(255,255,255,0.14); }
.hero-columns-band .col:last-child { border-right: none; }
.hero-columns-band .col h3 { color: #fff; font-size: 1.05rem; margin: 0 0 0.6rem; }
.hero-columns-band .col p { color: rgba(255,255,255,0.82); font-size: 0.9rem; margin: 0 0 1.1rem; }
.hero-columns-band .col a.button-outline-light { padding: 0.5rem 1rem; font-size: 0.82rem; }

@media (max-width: 860px) {
  .hero-columns-band .inner { grid-template-columns: 1fr; }
  .hero-columns-band .col { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.14); }
  .hero-columns-band .col:last-child { border-bottom: none; }
  .hero-columns-band { margin-top: -2.5rem; }

  /* The carousel's fixed 620px min-height and 5rem/7rem top/bottom padding
     were sized for a wide desktop hero -- on a phone they push the actual
     headline/button content down further than the image needs to be tall. */
  .hero-carousel { min-height: 460px; }
  .hero-carousel-slide .hero-content { padding: 3rem 1.5rem 5rem; }
}

/* ---------- Public page content blocks ---------- */
.page-block { padding: 3.5rem 1.5rem; max-width: 1120px; margin: 0 auto; }
.page-block-hero {
  max-width: none;
  padding: 4.5rem 1.5rem;
  background: var(--bg-alt);
  text-align: center;
}
.page-block-hero .inner { max-width: 760px; margin: 0 auto; }
.page-block-hero img { max-width: 100%; border-radius: 12px; margin-top: 2rem; }
.page-block-text-image { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.page-block-text-image.image-right .media { order: 2; }
.page-block-text-image .media img { width: 100%; border-radius: 12px; display: block; }
.page-block-columns-3 { }
.page-block-columns-3 .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
.page-block-columns-3 .cols h3 { font-size: 1.1rem; margin: 0 0 0.6rem; }
.page-block-columns-3 .cols p { color: var(--text-muted); margin: 0; }
.page-block-testimonial { max-width: 760px; text-align: center; }
.page-block-testimonial blockquote { font-size: 1.3rem; line-height: 1.5; margin: 0 0 1.25rem; font-style: italic; }
.page-block-testimonial .who { font-weight: 700; }
.page-block-testimonial .who span { display: block; font-weight: 400; color: var(--text-muted); font-size: 0.85rem; }
.page-block-faq { max-width: 800px; }
.page-block-faq details {
  border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 0.75rem; background: var(--surface);
}
.page-block-faq summary { font-weight: 600; cursor: pointer; }
.page-block-faq p { margin: 0.75rem 0 0; color: var(--text-muted); }
.page-block-gallery .photo-grid { margin-top: 1.5rem; }

@media (max-width: 860px) {
  .page-block-text-image { grid-template-columns: 1fr; }
  .page-block-text-image.image-right .media { order: 0; }
  .page-block-columns-3 .cols { grid-template-columns: 1fr; }
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.contact-form-col form button { margin-top: 0.5rem; }
/* Country code + phone number side by side, so a visitor picks their
   country's dialing code from a searchable list instead of typing it (or
   forgetting it) inline with the rest of the digits. */
.phone-input-group { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.phone-input-group input { flex: 1; margin-top: 0; min-width: 0; }
@media (max-width: 480px) {
  .phone-input-group { flex-direction: column; }
}

/* ---------- Searchable country-code combobox (see country-code-picker.js) ---------- */
.country-code-picker { position: relative; flex: 0 0 auto; width: 190px; }
@media (max-width: 480px) {
  .country-code-picker { width: 100%; }
}
.country-code-picker .country-code-search { margin-top: 0; }
.country-code-dropdown {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 0.3rem;
}
.country-code-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
}
.country-code-option:hover, .country-code-option.is-highlighted { background: var(--bg-alt); }
.country-code-empty { padding: 0.6rem 0.7rem; color: var(--text-muted); font-size: 0.85rem; }
.contact-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
}
.contact-info-card h4 { margin: 0 0 1.1rem; }
.contact-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.contact-info-list li { display: flex; flex-direction: column; gap: 0.15rem; }
.contact-info-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.contact-info-list a { color: var(--text); text-decoration: none; font-weight: 600; }
.contact-info-list a:hover { color: var(--zuce-navy); }
.contact-social-row, .footer-social-row {
  display: flex; gap: 0.6rem; margin-top: 1.25rem;
}
.contact-social-row a, .footer-social-row a {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); text-decoration: none;
  font-size: 0.78rem; font-weight: 700; color: var(--text);
}
.footer-social-row a { border-color: rgba(255,255,255,0.25); color: #fff; }
.contact-social-row a:hover, .footer-social-row a:hover { background: var(--zuce-navy); color: #fff; border-color: var(--zuce-navy); }

.office-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.75rem; }
.office-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.office-map { aspect-ratio: 16 / 10; }
.office-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.office-body { padding: 1.25rem 1.5rem; }
.office-body h4 { margin: 0 0 0.5rem; }
.office-address { color: var(--text-muted); margin: 0 0 0.5rem; }
.office-phone a { color: var(--zuce-navy); font-weight: 600; text-decoration: none; }

/* A single office reads better as one wide map+info card than as a
   full-width card stretched by an auto-fit grid with one item. */
.office-grid-single { grid-template-columns: 1fr; }
.office-card-single {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: stretch;
}
.office-card-single .office-map { aspect-ratio: auto; min-height: 320px; }
.office-card-single .office-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.25rem 2.5rem;
}

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .office-card-single { grid-template-columns: 1fr; }
  .office-card-single .office-map { aspect-ratio: 16 / 10; min-height: 0; }
  .office-card-single .office-body { padding: 1.5rem 1.5rem 1.75rem; }
}

/* ---------- Country / service pages ---------- */
.country-portrait-row, .service-portrait-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.country-portrait-row img, .service-portrait-row img {
  width: 100%; height: 260px; object-fit: cover; border-radius: 14px;
}
.capability-pill-row { margin: 1.75rem 0; }
.service-list { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1.5rem; }
.service-list li { padding-left: 1.4rem; position: relative; color: var(--text); }
.service-list li::before {
  content: ''; position: absolute; left: 0; top: 0.55rem; width: 7px; height: 7px; border-radius: 50%; background: var(--zuce-accent);
}
.where-we-work-block { margin-bottom: 3rem; }
.where-we-work-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.75rem 0 0;
}
.country-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.country-chip-arrow { color: var(--zuce-accent); font-weight: 700; transition: transform 0.15s ease; }
.country-chip:hover {
  border-color: var(--zuce-navy);
  background: var(--zuce-navy);
  color: #fff;
  transform: translateY(-2px);
}
.country-chip:hover .country-chip-arrow { color: #fff; transform: translateX(3px); }
.service-video { border-radius: 14px; overflow: hidden; margin: 2rem 0; }
.service-video video { width: 100%; display: block; }
.divisions-list a { display: inline-block; margin-top: 0.6rem; font-weight: 600; color: var(--zuce-navy); text-decoration: none; }
.divisions-list a:hover { text-decoration: underline; }

/* ---------- Large hero photo under a text banner (country/service pages) ---------- */
.feature-hero-image {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  box-shadow: var(--shadow);
}
.feature-hero-image-wrap { padding: 0 1.5rem; max-width: 1120px; margin: 0 auto 1rem; }

/* ---------- Editorial lede paragraph (first paragraph, set larger) ---------- */
.lede-paragraph { font-size: 1.15rem; color: var(--text); max-width: 68ch; margin: 0 0 1.5rem; }

/* ---------- Alternating text/image split sections ---------- */
.split-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin: 3rem 0;
}
.split-feature.reverse .split-media { order: 2; }
.split-feature .split-text p { margin: 0 0 1.1rem; color: var(--text); }
.split-feature .split-text p:last-child { margin-bottom: 0; }
.split-feature .split-media img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

/* ---------- Quick-fact cards (hub type / focus) ---------- */
.fact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 2rem 0; }
.fact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--zuce-navy);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}
.fact-card .fact-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--zuce-navy);
  margin-bottom: 0.4rem;
}
.fact-card .fact-value { margin: 0; color: var(--text); font-size: 0.95rem; }

/* ---------- Highlighted quote/callout card ---------- */
.quote-callout {
  background: var(--bg-alt);
  border-left: 4px solid var(--zuce-accent);
  border-radius: 0 12px 12px 0;
  padding: 1.75rem 2rem;
  margin: 2rem 0;
}
.quote-callout p { margin: 0 0 1rem; color: var(--text); font-size: 1.02rem; line-height: 1.6; }
.quote-callout p:last-child { margin-bottom: 0; }

/* ---------- Large media panel next to a divisions-list item's text ---------- */
.division-row {
  display: flex;
  gap: 2rem;
  align-items: stretch;
}
.division-text { flex: 1; min-width: 0; }
.division-media {
  flex-shrink: 0;
  width: 280px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-alt);
}
.division-media img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .division-row { flex-direction: column; }
  .division-media { width: 100%; }
  .division-media img { height: 200px; min-height: 0; }
}

/* ---------- Numbered process steps (service pages: How We Work) ---------- */
.process-steps { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: step; }
.process-steps li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1rem;
  padding: 0 0 1.5rem;
}
.process-steps li:last-child { padding-bottom: 0; }
.process-steps li::before {
  counter-increment: step;
  content: counter(step);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--zuce-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.process-steps p { margin: 0.4rem 0 0; color: var(--text-muted); }

/* ---------- Two-column hero: text + featured image (country pages) ---------- */
.hero-with-media {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.hero-with-media.no-media { grid-template-columns: 1fr; }
.hero-media-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.hero-media-box img { width: 100%; height: 320px; object-fit: cover; display: block; }

/* ---------- Small flag badge next to the hub-type pill ---------- */
.hero-badge-row { align-items: center; }
.flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: auto;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  line-height: 1;
}
.flag-badge img { height: 100%; width: auto; object-fit: contain; display: block; }

/* ---------- Two-column content: text/facts + tall media panel (country pages) ---------- */
.content-with-media {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  align-items: start;
}
.content-with-media.no-media { grid-template-columns: 1fr; }
.content-media-panel {
  position: sticky;
  top: 5.5rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.content-media-panel img { width: 100%; height: 420px; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .hero-with-media { grid-template-columns: 1fr; }
  .hero-media-box img { height: 220px; }
  .content-with-media { grid-template-columns: 1fr; }
  .content-media-panel { position: static; }
  .content-media-panel img { height: 260px; }
}

@media (max-width: 700px) {
  .country-portrait-row, .service-portrait-row { grid-template-columns: 1fr; }
  .service-list { grid-template-columns: 1fr; }
  .split-feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .split-feature.reverse .split-media { order: 0; }
}

/* ---------- Media library picker (admin "Choose from library" modal) ---------- */
body.media-picker-active { overflow: hidden; }
.media-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 20, 0.6);
  padding: 2rem;
}
.media-picker-overlay[hidden] { display: none; }
.media-picker-box {
  background: var(--surface);
  border-radius: 14px;
  width: min(720px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.media-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.media-picker-header h3 { margin: 0; font-size: 1.05rem; }
.media-picker-close {
  border: none;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.25rem;
}
.media-picker-close:hover { color: var(--text); }
.media-picker-upload {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 1.5rem 0.5rem;
  flex-shrink: 0;
}
.media-picker-status { color: var(--text-muted); font-size: 0.85rem; }
.media-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
  padding: 1.25rem 1.5rem 1.5rem;
  overflow-y: auto;
}
.media-picker-item {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-alt);
  aspect-ratio: 1 / 1;
}
.media-picker-item:hover { border-color: var(--zuce-navy); }
.media-picker-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 640px) {
  .media-picker-overlay { padding: 0.75rem; }
  .media-picker-upload { flex-wrap: wrap; }
}

/* ---------- Homepage: pitch-statement row ---------- */
.pitch-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: center;
}
.pitch-headline {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0.4rem 0 0.85rem;
}
.pitch-subheadline { font-size: 1.05rem; color: var(--text-muted); margin: 0; max-width: 48ch; }
.pitch-explainer {
  border-left: 3px solid var(--zuce-accent);
  padding-left: 1.5rem;
}
.pitch-explainer p { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.6; }

@media (max-width: 860px) {
  .pitch-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .pitch-explainer { border-left: none; border-top: 3px solid var(--zuce-accent); padding-left: 0; padding-top: 1.25rem; }
}

/* ---------- Homepage: client-logo strip (static, two columns) ---------- */
.client-logos-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: center;
}
.client-logos-col .eyebrow { margin: 0 0 1.5rem; }
.client-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 2.5rem;
}
.client-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.client-logo-item img {
  max-height: 100%;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.client-logo-item img:hover { filter: grayscale(0); opacity: 1; }
.client-logos-text-col { border-left: 3px solid var(--zuce-accent); padding-left: 1.75rem; }
.client-logos-text-col h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin: 0 0 1rem; }
.client-logos-text-col p { color: var(--text-muted); margin: 0 0 1.5rem; max-width: 46ch; }

@media (max-width: 860px) {
  .client-logos-layout { grid-template-columns: 1fr; gap: 2rem; }
  .client-logo-grid { grid-template-columns: repeat(3, 1fr); }
  .client-logos-text-col { border-left: none; border-top: 3px solid var(--zuce-accent); padding-left: 0; padding-top: 1.5rem; }
}

@media (max-width: 500px) {
  .client-logo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Homepage: "What We Offer" tabbed section ---------- */
.offer-tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.25rem;
}
.offer-tab-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.offer-tab-btn:hover { border-color: var(--zuce-navy); color: var(--text); }
.offer-tab-btn.is-active { background: var(--zuce-navy); border-color: var(--zuce-navy); color: #fff; }
.offer-tab-panel { display: none; }
.offer-tab-panel.is-active { display: block; animation: offer-panel-fade 0.2s ease; }
@keyframes offer-panel-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.offer-tab-panel h3 { margin: 0.6rem 0 0.75rem; font-size: 1.4rem; }
.offer-tab-panel p { color: var(--text-muted); max-width: 65ch; margin: 0 0 1.5rem; }
.offer-tab-panel .capabilities {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.offer-tab-panel .capabilities li { font-size: 0.88rem; color: var(--text-muted); }
.offer-tab-panel .capabilities li::before { content: "- "; color: var(--zuce-accent); }