/* RebaseCyprus base components · all classes rb- prefixed, no bare element
   selectors inside components (Yootheme/UIkit paste-safe). Page-level
   resets live under .rb-page so they never leak into theme markup. */

.rb-page {
  margin: 0;
  font-family: var(--rb-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--rb-text);
  background: var(--rb-surface);
  -webkit-font-smoothing: antialiased;
}
.rb-page * { box-sizing: border-box; }
.rb-page ::selection { background: rgba(212, 168, 67, 0.30); color: var(--rb-navy-950); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Layout primitives ---------- */
.rb-container {
  max-width: var(--rb-container);
  margin: 0 auto;
  padding: 0 24px;
}
.rb-section { padding: 88px 0; }
.rb-section--alt { background: var(--rb-surface-alt); }
.rb-section--dark {
  position: relative;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(59, 130, 196, 0.12), transparent 60%),
    linear-gradient(160deg, var(--rb-navy-900), var(--rb-navy-950) 55%);
  color: var(--rb-text-on-dark);
}
/* Signature: thin gold hairline along the top of every dark section */
.rb-section--dark::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 8%, rgba(212, 168, 67, 0.65) 50%, transparent 92%);
}
.rb-section--cream { background: var(--rb-cream); }

/* ---------- Typography ---------- */
.rb-h1, .rb-h2, .rb-h3 {
  margin: 0 0 16px;
  font-family: var(--rb-font);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: inherit;
}
.rb-h1 { font-size: clamp(34px, 4.6vw, 54px); }
.rb-h2 { font-size: clamp(27px, 3.4vw, 38px); }
.rb-h3 { font-size: 20px; letter-spacing: -0.01em; }
.rb-lead {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--rb-text-muted);
  max-width: 46ch;
}
.rb-section--dark .rb-lead { color: var(--rb-text-muted-on-dark); }
.rb-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: var(--rb-radius-pill);
  background: var(--rb-blue-soft);
  color: var(--rb-blue-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rb-section--cream .rb-eyebrow { color: var(--rb-blue-text-strong); }
.rb-section--dark .rb-eyebrow {
  background: var(--rb-gold-soft);
  color: var(--rb-gold);
}
.rb-center { text-align: center; }
.rb-center .rb-lead { margin-left: auto; margin-right: auto; max-width: 720px; }
.rb-muted { color: var(--rb-text-muted); }

/* Editable prose regions (rb_region output). Edited TipTap prose arrives as plain
   block HTML with no utility classes, so style the child blocks here to keep it
   on-brand after an edit. Reusable across pages/projects. */
.rb-prose > :first-child { margin-top: 0; }
.rb-prose > :last-child { margin-bottom: 0; }
.rb-prose p { margin: 0 0 16px; line-height: 1.7; color: var(--rb-text-muted); }
.rb-prose ul, .rb-prose ol { margin: 0 0 16px; padding-left: 22px; line-height: 1.7; color: var(--rb-text-muted); }
.rb-prose li { margin: 0 0 6px; }
.rb-prose a { color: var(--rb-gold-text); font-weight: 600; }
.rb-prose strong { color: var(--rb-text); }
.rb-prose h3 { margin: 22px 0 8px; font-size: 20px; font-weight: 700; color: var(--rb-text); }
.rb-section--dark .rb-prose p, .rb-section--dark .rb-prose ul, .rb-section--dark .rb-prose ol { color: var(--rb-text-muted-on-dark); }
.rb-section--dark .rb-prose strong, .rb-section--dark .rb-prose h3 { color: var(--rb-text-on-dark); }
.rb-sp-overview p { font-size: 16.5px; }

/* Reusable reviews band (partials/reviews.php), site-wide via footer. Grid rows
   stretch, and flex:1 on the text pins the author to the bottom, so all cards in
   a row are exactly the same height regardless of review length. */
.rb-reviews-band { background: var(--rb-cream); padding: 64px 0; }
/* --rb-blue-text on --rb-blue-soft only reaches 4.33:1 against the cream
   band background (measured via Lighthouse, RBW-07), under the 4.5:1
   minimum. Scoped override, the token itself still passes on --rb-surface
   elsewhere on the site. */
.rb-reviews-band .rb-eyebrow { color: var(--rb-navy-800); }
.rb-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 28px; }
.rb-review-card { display: flex; flex-direction: column; gap: 12px; background: var(--rb-surface); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); padding: 24px; box-shadow: var(--rb-shadow-1); }
.rb-review-stars { display: flex; gap: 3px; color: var(--rb-gold); }
.rb-review-stars svg { width: 18px; height: 18px; display: block; }
.rb-review-text { flex: 1; margin: 0; color: var(--rb-text); line-height: 1.6; font-size: 15px; }
.rb-review-author { font-weight: 700; color: var(--rb-text); font-size: 14px; }
@media (max-width: 640px) { .rb-reviews-band { padding: 48px 0; } }
/* Lead-sized prose region: same look as .rb-lead so a single-sentence section
   intro stays on-brand whether it shows the coded default or edited prose. */
.rb-prose--lead { max-width: 46ch; }
.rb-prose--lead p { margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: var(--rb-text-muted); }
.rb-prose--lead > :last-child { margin-bottom: 0; }
.rb-intro .rb-prose--lead p { margin-bottom: 14px; }
.rb-intro .rb-prose--lead p:last-child { margin-bottom: 0; }
.rb-center .rb-prose--lead { margin-left: auto; margin-right: auto; max-width: 720px; }

/* Asymmetric section intro: left-aligned, gold accent stroke */
/* Width: section intros run the full container width, like the grids and
   lists below them. A max-width here left an empty right half next to
   full-width content (why-cyprus, 2026-09-24). Same fix as
   madevisible-framework #460: remove the narrow cap, don't widen it. */
.rb-intro {
  position: relative;
  padding-left: 26px;
}
.rb-intro .rb-lead,
.rb-intro .rb-prose--lead { max-width: none; }
.rb-intro::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--rb-gold), transparent);
}
.rb-intro .rb-lead { margin-bottom: 0; }

/* Reveal stagger for grid children */
.rb-stagger > .rb-reveal:nth-child(2) { transition-delay: 0.08s; }
.rb-stagger > .rb-reveal:nth-child(3) { transition-delay: 0.16s; }
.rb-stagger > .rb-reveal:nth-child(4) { transition-delay: 0.24s; }
.rb-stagger > .rb-reveal:nth-child(5) { transition-delay: 0.32s; }
.rb-stagger > .rb-reveal:nth-child(6) { transition-delay: 0.40s; }

/* ---------- Buttons (all solid, raised) ---------- */
.rb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--rb-radius-pill);
  font-family: var(--rb-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.rb-btn:active { transform: translateY(1px) scale(0.985); }
.rb-btn:focus-visible { outline: 2px solid var(--rb-gold-focus); outline-offset: 3px; }

.rb-btn--gold {
  background: linear-gradient(to bottom, #DDB558, var(--rb-gold) 45%, var(--rb-gold-deep));
  color: var(--rb-navy-950);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--rb-shadow-gold);
}
.rb-btn--gold:hover {
  background: linear-gradient(to bottom, #E3BC60, var(--rb-gold-deep));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 26px rgba(212, 168, 67, 0.45);
  transform: translateY(-1px);
}

/* Cream raised button (Olli's reference: cream surface, dark type) */
.rb-btn--cream {
  background: linear-gradient(to bottom, #FBF7EE, var(--rb-cream) 55%, var(--rb-cream-deep));
  color: var(--rb-navy-950);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 14px rgba(13, 24, 41, 0.14);
}
.rb-btn--cream:hover {
  background: linear-gradient(to bottom, #FFFDF8, var(--rb-cream-deep));
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 7px 20px rgba(13, 24, 41, 0.18);
}

/* Navy raised button: the secondary on light/cream surfaces where cream would vanish */
.rb-btn--navy {
  background: linear-gradient(to bottom, var(--rb-navy-800), var(--rb-navy-950));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 14px rgba(13, 24, 41, 0.22);
}
.rb-btn--navy:hover {
  background: linear-gradient(to bottom, var(--rb-navy-700), var(--rb-navy-800));
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 7px 20px rgba(13, 24, 41, 0.28);
}

.rb-btn--sm { padding: 11px 22px; font-size: 14px; }
.rb-cta-short { display: none; }   /* swapped in below 640px, see the header note there */
.rb-btn .rb-btn-arrow { transition: transform 0.18s ease; }
.rb-btn:hover .rb-btn-arrow { transform: translateX(3px); }

/* ---------- Skip link (a11y) ----------
   Off-screen by default via a fixed-position transform, so it never occupies
   layout space (position:fixed already takes it out of flow, the transform
   just keeps it above the viewport until it's the focused element). Kept
   deliberately quiet: same surface/border/shadow tokens as the rest of the
   site, no bold navy/gold treatment, so it doesn't read as a design element. */
.rb-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--rb-surface);
  color: var(--rb-text);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--rb-shadow-1);
  transform: translateY(-150%);
  transition: transform 0.15s ease;
}
.rb-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--rb-gold-focus);
  outline-offset: 2px;
}

/* ---------- Header (fixed + shrink, no layout jump) ---------- */
.rb-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.rb-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--rb-header-h);
  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-header-logo { display: flex; align-items: center; text-decoration: none; }
.rb-header-logo .rb-logo-img {
  height: 52px; width: auto; display: block;
  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-header.is-compact .rb-header-inner { height: var(--rb-header-h-compact); }
.rb-header.is-compact { border-bottom-color: var(--rb-border); box-shadow: var(--rb-shadow-1); }
.rb-header.is-compact .rb-logo-img { height: 40px; }
.rb-header-spacer { height: var(--rb-header-h); }

.rb-nav { display: flex; align-items: center; gap: 28px; }
.rb-nav-link {
  color: var(--rb-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.rb-nav-link:hover { color: var(--rb-navy-800); border-bottom-color: var(--rb-gold); }
.rb-nav-link:focus-visible { outline: 2px solid var(--rb-gold-focus); outline-offset: 3px; border-radius: 4px; }

/* ---------- Nav dropdown (Services) ---------- */
.rb-nav-group { position: relative; display: flex; align-items: center; }
.rb-nav-caret { margin-left: 5px; transition: transform 0.2s ease; }
.rb-nav-group:hover .rb-nav-caret, .rb-nav-group:focus-within .rb-nav-caret { transform: rotate(180deg); }
.rb-subnav {
  position: absolute; top: 100%; left: -12px; min-width: 244px;
  background: var(--rb-surface); border: 1px solid var(--rb-border); border-radius: var(--rb-radius);
  box-shadow: var(--rb-shadow-2); padding: 8px; z-index: 50;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.rb-nav-group:hover .rb-subnav, .rb-nav-group:focus-within .rb-subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.rb-subnav-link {
  display: block; padding: 9px 14px; border-radius: var(--rb-radius-sm);
  color: var(--rb-text); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.rb-subnav-link:hover { background: var(--rb-surface-alt); color: var(--rb-navy-800); }
.rb-subnav-link:focus-visible { outline: 2px solid var(--rb-gold-focus); outline-offset: -2px; }

.rb-nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--rb-navy-950);
  /* 26px icon plus 8px padding came to 42px, just under the 44px minimum for a
     touch target. Stated as a minimum rather than tuned via padding, so the
     size holds if the icon ever changes. */
  min-width: 44px; min-height: 44px;
}
.rb-nav-toggle:focus-visible { outline: 2px solid var(--rb-gold-focus); outline-offset: 2px; border-radius: 6px; }

/* ---------- Cards ---------- */
.rb-card {
  background: var(--rb-surface);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  box-shadow: var(--rb-shadow-1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-card--lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(13, 24, 41, 0.13), 0 4px 10px rgba(13, 24, 41, 0.07);
}
.rb-card--dark {
  background:
    radial-gradient(900px 420px at 90% -20%, rgba(59, 130, 196, 0.16), transparent 55%),
    linear-gradient(160deg, var(--rb-navy-800), var(--rb-navy-950) 70%);
  border: 1px solid var(--rb-border-on-dark);
  color: var(--rb-text-on-dark);
  box-shadow: var(--rb-shadow-2);
}
.rb-card--cream { background: var(--rb-cream); border-color: var(--rb-cream-deep); }

/* ---------- Badges ---------- */
.rb-badge {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--rb-radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rb-badge--gold { background: linear-gradient(to bottom, #DDB558, var(--rb-gold-deep)); color: var(--rb-navy-950); }
.rb-badge--navy { background: var(--rb-navy-950); color: #fff; }
.rb-badge--soft-gold { background: var(--rb-gold-soft); color: var(--rb-gold-text); }

/* ---------- Footer ---------- */
.rb-footer {
  background: linear-gradient(180deg, var(--rb-navy-950), #0A1220);
  color: var(--rb-text-muted-on-dark);
  padding: 64px 0 0;
}
.rb-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.rb-footer-brand .rb-logo-img { height: 46px; width: auto; margin-bottom: 18px; }
.rb-footer-addr { font-style: normal; font-size: 14px; line-height: 1.7; }
.rb-footer-h {
  margin: 0 0 16px;
  color: var(--rb-text-on-dark);
  font-size: 16px;
  font-weight: 700;
}
.rb-footer-list { list-style: none; margin: 0; padding: 0; }
.rb-footer-list > li { margin-bottom: 10px; }
.rb-footer-link {
  color: var(--rb-text-muted-on-dark);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease;
}
.rb-footer-link:hover { color: var(--rb-gold); }
.rb-footer-bottom {
  border-top: 1px solid var(--rb-border-on-dark);
  padding: 20px 0;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
}
.rb-footer-bottom a { color: inherit; }

/* ---------- Reveal on scroll ---------- */
.rb-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-reveal.is-in { opacity: 1; transform: none; }

/* ---------- FAQ accordion ---------- */
.rb-faq { max-width: 780px; margin: 0 auto; }
.rb-faq-item { border-bottom: 1px solid var(--rb-border); }
.rb-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--rb-font);
  font-size: 17px;
  font-weight: 600;
  color: var(--rb-text);
  text-align: left;
}
.rb-faq-q:focus-visible { outline: 2px solid var(--rb-gold-focus); outline-offset: 2px; border-radius: 6px; }
.rb-faq-icon {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  color: var(--rb-gold-deep);
  transition: transform 0.25s ease;
}
.rb-faq-item.is-open .rb-faq-icon { transform: rotate(45deg); }
.rb-faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.rb-faq-a-inner { padding: 0 4px 22px; color: var(--rb-text-muted); font-size: 15.5px; line-height: 1.65; }

/* ---------- Prototype switcher (review-only UI) ---------- */
.rb-proto-switch {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--rb-radius-pill);
  background: rgba(13, 24, 41, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: var(--rb-shadow-2);
  font-size: 13px;
}
.rb-proto-switch .rb-proto-label {
  color: var(--rb-text-muted-on-dark);
  padding: 0 8px 0 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.rb-proto-switch .rb-proto-link {
  padding: 8px 16px;
  border-radius: var(--rb-radius-pill);
  color: var(--rb-text-on-dark);
  text-decoration: none;
  font-weight: 600;
}
.rb-proto-switch .rb-proto-link.is-active { background: var(--rb-gold); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .rb-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    /* The header carries backdrop-filter, which by spec makes it the containing
       block for fixed children exactly as a transform would. So bottom:0 was
       resolving against the 89px header rather than the screen: the panel was
       118px tall, its white background stopped there, and the links below sat
       unreadable on the hero image. An explicit height does not depend on that
       containing block. */
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    width: min(320px, 85vw);
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 90px 28px 28px;
    background: var(--rb-surface);
    box-shadow: -12px 0 40px rgba(13, 24, 41, 0.18);
    transform: translateX(105%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .rb-nav.is-open { transform: none; }
  .rb-nav-link { font-size: 17px; padding: 10px 0; }
  /* off-canvas: the Services submenu shows inline (hover dropdowns do not work on touch) */
  .rb-nav-group { display: block; width: 100%; }
  .rb-nav-caret { display: none; }
  .rb-subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; background: transparent; border: 0; box-shadow: none;
    padding: 0 0 6px 14px;
  }
  /* Touch targets in the off-canvas menu. The submenu rows came to 39px and the
     header button to 36px, both under the 44px minimum, which matters here
     because this breakpoint is where the menu is operated by thumb. */
  .rb-subnav-link {
    display: flex; align-items: center; min-height: 44px;
    padding: 4px 0; font-size: 15px; color: var(--rb-text-muted);
  }
  .rb-header-inner .rb-btn--sm { min-height: 44px; }
  .rb-nav-toggle { display: grid; place-items: center; z-index: 50; }
  .rb-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .rb-section { padding: 60px 0; }
  .rb-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .rb-proto-switch .rb-proto-label { display: none; }
  /* The header row is logo, call-to-action and menu button. At 360px the row
     needed 383px, so the menu button sat entirely outside the viewport and the
     navigation could not be opened at all. Shortening the button label and
     tightening the gap brings the row back inside with room to spare. */
  .rb-header-inner { gap: 12px; }
  .rb-cta-full { display: none; }
  .rb-cta-short { display: inline; }
  .rb-btn--sm { padding: 11px 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rb-page *, .rb-page *::before, .rb-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rb-reveal { opacity: 1; transform: none; }
}

/* ---------- Shared checklist (gold ticks) ---------- */
.rb-check { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.rb-check > li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--rb-text-muted); }
.rb-check > li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--rb-gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23B8902F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.rb-section--dark .rb-check > li { color: var(--rb-text-muted-on-dark); }
.rb-section--dark .rb-check > li::before { background-color: rgba(212, 168, 67, 0.18); }

/* ---------- Image hero: ONE fixed height on every page ----------
   Height comes from min-height + vertical centering, never from content or
   per-page padding, so every image hero is exactly the same height site-wide.
   The !important neutralises the older per-page inline hero paddings. */
.rb-hero, .rb-sp-hero { min-height: 544px; display: flex; align-items: center; }
.rb-hero-inner, .rb-sp-hero-inner { padding-top: 46px !important; padding-bottom: 46px !important; }
@media (max-width: 1023px) {
  .rb-hero, .rb-sp-hero { min-height: 520px; }
}
@media (max-width: 640px) {
  .rb-hero, .rb-sp-hero { min-height: 496px; }
  .rb-hero-inner, .rb-sp-hero-inner { padding-top: 30px !important; padding-bottom: 30px !important; }
}

/* ---------- Service detail page (shared across all service pages) ---------- */
.rb-sp-hero { position: relative; overflow: hidden; color: var(--rb-text-on-dark); }
.rb-sp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.rb-sp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rb-sp-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(13,24,41,0.88) 10%, rgba(13,24,41,0.74) 48%, rgba(13,24,41,0.38) 78%, rgba(13,24,41,0.14)); }
.rb-sp-hero-inner { position: relative; z-index: 2; max-width: 760px; padding: 108px 24px 118px; }
.rb-sp-hero .rb-h1 { color: #fff; }
.rb-sp-hero .rb-h1 .rb-gold-word { color: var(--rb-gold); }
.rb-sp-hero-lead { color: var(--rb-text-muted-on-dark); font-size: 19px; max-width: 54ch; }
.rb-sp-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 44px; }
.rb-sp-feature { padding: 26px 28px; background: var(--rb-surface); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); box-shadow: var(--rb-shadow-1); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease; }
.rb-sp-feature:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(13,24,41,0.13), 0 4px 10px rgba(13,24,41,0.07); }
.rb-sp-feature-icon { width: 46px; height: 46px; border-radius: var(--rb-radius-sm); background: var(--rb-gold-soft); color: var(--rb-gold-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.rb-sp-feature:nth-child(2) .rb-sp-feature-icon, .rb-sp-feature:nth-child(3) .rb-sp-feature-icon { background: var(--rb-blue-soft); color: var(--rb-blue-text); }
.rb-sp-feature-title { margin: 0 0 7px; font-size: 17.5px; font-weight: 700; color: var(--rb-text); }
.rb-sp-feature-text { margin: 0; font-size: 14.8px; line-height: 1.6; color: var(--rb-text-muted); }
.rb-sp-note { display: inline-block; margin: 18px 0 0; font-size: 12.5px; font-weight: 600; color: var(--rb-gold-text); background: var(--rb-gold-soft); padding: 5px 12px; border-radius: var(--rb-radius-sm); }

/* Process steps: gold spine timeline, same visual language as /consultation/ */
.rb-sp-steps { max-width: 760px; margin: 44px auto 0; }
.rb-sp-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding-bottom: 44px; }
.rb-sp-step::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, var(--rb-gold), var(--rb-cream-deep)); }
.rb-sp-step:last-child { padding-bottom: 0; }
.rb-sp-step:last-child::before { display: none; }
.rb-sp-step-num { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, var(--rb-navy-800), var(--rb-navy-950)); color: var(--rb-gold); font-size: 20px; font-weight: 700; box-shadow: 0 0 0 1px rgba(212,168,67,0.45), 0 0 0 5px rgba(212,168,67,0.10), var(--rb-shadow-1); }
.rb-sp-step-title { margin: 14px 0 8px; font-size: 19px; font-weight: 700; color: var(--rb-text); }
.rb-sp-step-text { margin: 0; color: var(--rb-text-muted); font-size: 15.5px; line-height: 1.65; }

@media (max-width: 1023px) { .rb-sp-hero-inner { padding: 64px 24px 72px; } }
@media (max-width: 640px) {
  .rb-sp-hero .rb-h1 { font-size: clamp(28px, 8vw, 40px); }
  .rb-sp-features { grid-template-columns: 1fr; }
  .rb-sp-step { grid-template-columns: 44px 1fr; gap: 16px; }
  .rb-sp-step-num { width: 44px; height: 44px; font-size: 17px; }
  .rb-sp-step::before { left: 21px; }
}

/* ---------- Directory section nav (sticky + reading indicator) ---------- */
/* Used by the Paphos directory pages. It sticks below the fixed site header,
   which is already at its compact height by the time this bar reaches the top. */
.rb-dir-toc {
  position: sticky;
  top: var(--rb-header-h-compact);
  z-index: 30;
  margin: 0 0 32px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rb-border);
}
.rb-dir-toc[hidden] { display: none; }
/* Visual-only caption (the nav's aria-label carries the same text to
   assistive tech); see directory-toc.php. Sits in its own row, not inside
   the scroller, so it never scrolls out of view with the pills on a phone. */
.rb-dir-toc-label {
  display: block;
  padding-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rb-text-muted);
}
/* One row that scrolls sideways, so a long category list never eats the
   viewport on a phone. */
.rb-dir-toc-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 6px;
  padding-bottom: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Edge fade below 1024px, matching .rb-dir-search-chips (directory.css):
     without it this row was a hard, unfaded cutoff, worse than the search-chips
     row right above it (design-audit finding). Cleared at 1024px+ below, where
     the row wraps instead of scrolling. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.rb-dir-toc-scroll::-webkit-scrollbar { display: none; }
.rb-dir-toc-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-pill);
  background: var(--rb-surface);
  color: var(--rb-text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rb-dir-toc-link:hover { border-color: var(--rb-navy-800); }
.rb-dir-toc-link:focus-visible { outline: 2px solid var(--rb-gold-focus); outline-offset: 2px; }
/* The active pill is marked three ways, so it does not depend on colour alone:
   a filled background, a heavier weight, and a leading dot. aria-current carries
   the same state to assistive tech and is what the script toggles. */
.rb-dir-toc-link[aria-current] {
  background: var(--rb-navy-950);
  border-color: var(--rb-navy-950);
  color: #fff;
  font-weight: 700;
}
.rb-dir-toc-link[aria-current]::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--rb-gold);
}
/* From tablet up the row wraps and centres instead of scrolling sideways. With
   a dozen-plus categories a hidden sideways scroll would leave most of them
   undiscoverable on a wide screen, where there is room to simply show them. */
@media (min-width: 1024px) {
  .rb-dir-toc-scroll {
    flex-wrap: wrap; justify-content: center; overflow: visible; gap: 6px;
    -webkit-mask-image: none; mask-image: none; /* only needed for the scrolling edge-fade below 1024px */
  }
  /* Tightened a little because wrapping a long category list costs rows, and
     every row stays on screen for the whole page. The 44px target is kept. */
  .rb-dir-toc-link { padding: 7px 13px; font-size: 13px; }
}
/* Category heading: keep the icon off the name. Without this they render as one
   word ("<icon>Lawyers"), because they sit directly next to each other. */
.rb-dir-cat-h { display: flex; align-items: center; gap: 10px; }
/* Clear the fixed header plus the sticky nav when jumping to a section. The bar
   height is written to --rb-dir-toc-h by the nav script, because it depends on
   how many categories are published and whether the row wrapped. */
.rb-dir-cat[id] { scroll-margin-top: calc(var(--rb-header-h-compact) + var(--rb-dir-toc-h, 69px) + 12px); }

/* ---------- Directory search (client-side filter) ---------- */
/* Used by the Paphos directory pages, above the sticky section nav. The box is
   revealed by directory-search.php, so without JavaScript it never appears and
   the full list stays exactly as it is. */
.rb-dir-search { margin: 0 0 28px; }
.rb-dir-search[hidden] { display: none; }
.rb-dir-search-form { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.rb-dir-search-label { font-size: 13px; font-weight: 600; color: var(--rb-text-muted); }
.rb-dir-search-input {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  background: var(--rb-surface);
  color: var(--rb-text);
  font: inherit;
  font-size: 15px;
}
.rb-dir-search-input::placeholder { color: var(--rb-text-muted); }
.rb-dir-search-input:hover { border-color: var(--rb-navy-800); }
.rb-dir-search-input:focus-visible { outline: 2px solid var(--rb-gold-focus); outline-offset: 2px; border-color: var(--rb-navy-800); }
/* The count lives here whether or not it says anything, so the line does not
   appear and disappear and shift the list up and down as you type. */
.rb-dir-search-status { min-height: 20px; margin: 10px 0 0; font-size: 13px; color: var(--rb-text-muted); }

/* Empty state. Sits where the list would be, so the answer is where the eye
   already is rather than above the fold it just scrolled past. */
.rb-dir-search-empty {
  padding: 28px 24px;
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
  background: var(--rb-surface-alt);
}
.rb-dir-search-empty[hidden] { display: none; }
.rb-dir-search-empty-msg { margin: 0 0 18px; font-size: 16px; font-weight: 600; color: var(--rb-text); }
.rb-dir-search-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; }
/* .rb-btn--sm is 36px tall on its own, which is under the 44px touch target.
   Raised here rather than on the shared button, because every other place that
   uses it sits in a header row that already sets its own height. */
.rb-dir-search-empty .rb-btn { min-height: 44px; }
.rb-dir-search-empty-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--rb-blue-text);
  font-size: 14px;
  font-weight: 600;
}
.rb-dir-search-empty-link:focus-visible { outline: 2px solid var(--rb-gold-focus); outline-offset: 2px; border-radius: 4px; }

/* Filtered-out elements. These need saying: the entry and the pill both set an
   explicit display, which outranks the [hidden] rule browsers apply by default,
   so without this they would stay on screen while claiming to be hidden. */
.rb-dir-entry[hidden] { display: none; }
.rb-dir-cat[hidden] { display: none; }
.rb-dir-toc-link[hidden] { display: none; }

/* ---------- Shared form primitives ---------- */
/* Used by the "recommend a place" CTA on the directory pages. The contact page
   keeps its own inline copy of these; this is the shared version for pages that
   do not carry that inline block. */
.rb-field { margin-bottom: 18px; }
.rb-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--rb-text); }
.rb-field-opt { font-weight: 400; color: var(--rb-text-muted); }
.rb-field input:not([type="checkbox"]):not([type="radio"]), .rb-field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--rb-text); background: var(--rb-surface);
  border: 1px solid var(--rb-border); border-radius: var(--rb-radius-sm); min-height: 46px;
}
.rb-field textarea { min-height: 110px; resize: vertical; }
.rb-field input:focus-visible, .rb-field textarea:focus-visible { outline: 2px solid var(--rb-gold-focus); outline-offset: 0; border-color: var(--rb-navy-800); }
.rb-field input[aria-invalid="true"], .rb-field textarea[aria-invalid="true"] { border-color: var(--rb-error, #B83B3B); }
.rb-field-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--rb-text-muted); }
/* Off-screen honeypot: present for bots, invisible and skipped for humans. */
.rb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rb-form-status { margin-top: 14px; font-size: 14.5px; font-weight: 600; }
.rb-form-status.ok { color: var(--rb-blue-text); }
.rb-form-status.err { color: var(--rb-error, #B83B3B); }

/* ---------- Recommend a place (directory CTA) ---------- */
.rb-recommend { margin: 44px 0 8px; }
.rb-recommend-inner {
  padding: 32px;
  background: var(--rb-surface-alt);
  border: 1px solid var(--rb-border);
  border-radius: var(--rb-radius);
}
.rb-recommend-lead { margin: 0 0 22px; }
.rb-recommend-h { margin: 0 0 8px; font-size: 22px; color: var(--rb-text); }
.rb-recommend-sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--rb-text-muted); }
.rb-recommend-form { max-width: 640px; }
/* Reserve the status line so a success/error message does not shift the layout.
   Scoped here rather than on the shared .rb-form-status, so the contact page,
   which has its own inline copy without this, stays untouched. */
.rb-recommend .rb-form-status { min-height: 20px; }
/* Name and email share a row from tablet up; they stack on a phone. */
.rb-recommend-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.rb-recommend-form .rb-btn--gold { justify-content: center; }
@media (max-width: 640px) {
  .rb-recommend-inner { padding: 24px 18px; }
  .rb-recommend-row { grid-template-columns: 1fr; gap: 0; }
  .rb-recommend-form .rb-btn--gold { width: 100%; }
}

/* EU AI Act Art. 50(4) notice under blog articles. Set by partials/footer.php
   on pages whose images come from Blog-Maker's AI pipeline. */
.rb-ai-notice{margin:0 0 1.5rem;font-size:.875rem;line-height:1.5;color:#5A6F78}