.elementor-131 .elementor-element.elementor-element-8d76bf0{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-131 .elementor-element.elementor-element-ce099db{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-131 .elementor-element.elementor-element-87089ba{--display:flex;}.elementor-131 .elementor-element.elementor-element-003a096{--display:flex;}.elementor-131 .elementor-element.elementor-element-9e8cb71{--display:flex;}.elementor-131 .elementor-element.elementor-element-a85d0c7{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-131 .elementor-element.elementor-element-fff96a1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-131 .elementor-element.elementor-element-ce099db{--content-width:1600px;}.elementor-131 .elementor-element.elementor-element-a85d0c7{--content-width:1600px;}.elementor-131 .elementor-element.elementor-element-fff96a1{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-4bec115 *//* ============================================================
   CONTAINER 2 CSS: SERVICES HUB HERO
   Same shape/classes as the About page's hero (.about-hero-*),
   renamed to .services-hub-hero-* so both can coexist on one
   sitewide stylesheet without colliding.
   ============================================================ */

.services-hub-hero-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-navy, #081F3F) 0%, var(--color-primary, #0D3B73) 100%);
  padding: var(--space-3xl, 96px) var(--space-md, 24px) var(--space-2xl, 64px) var(--space-md, 24px);
}

.services-hub-hero-art {
  position: absolute;
  top: 50%; right: -60px;
  transform: translateY(-50%);
  width: 420px; height: 420px;
  pointer-events: none;
}

.services-hub-hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

/* .hero-eyebrow — identical to the About/service-page hero pill. */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 8px);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--color-gold, #D6A641);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-md, 24px);
}

.services-hub-hero-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white, #fff);
  margin: 0 0 var(--space-md, 24px) 0;
  overflow-wrap: break-word;
}
.highlight-word { color: var(--color-gold, #D6A641); }

.services-hub-hero-paragraph {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin: 0;
  max-width: 640px;
}

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  .services-hub-hero-container { padding-top: var(--space-2xl, 64px); }
  .services-hub-hero-heading { font-size: 38px; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .services-hub-hero-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .services-hub-hero-heading { font-size: 30px; }
  .services-hub-hero-paragraph { font-size: 16px; }
  .services-hub-hero-art { display: none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0ad5cdc *//* ============================================================
   CONTAINER 3 CSS: SERVICES GRID
   ============================================================ */

.services-hub-grid-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}

/* Section header pattern — identical to every other doc's. */
.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-steel, #3E6B9C);
  margin-bottom: var(--space-sm, 16px);
}
.section-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-navy, #081F3F);
  margin: 0 0 var(--space-sm, 16px) 0;
}
.section-paragraph {
  font-size: 18px;
  color: var(--color-gray, #5F6B7A);
  max-width: 600px;
  margin: 0;
}
.section-header { margin-bottom: var(--space-2xl, 64px); }

/* 3 columns so 5 cards wrap 3-then-2, with each row's cards matching
   height (align-items: start keeps a short card from stretching to
   match a tall neighbor — the same flexible-grid trick used by the
   Taxation Services and Audit & Business Advisory nested grids). */
.services-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg, 32px);
  align-items: start;
}

.services-hub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white, #fff);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md, 20px);
  padding: var(--space-lg, 32px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.services-hub-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong, 0 20px 60px rgba(0,0,0,0.08));
}

.services-hub-card-icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm, 12px);
  background: var(--color-soft-blue, #EAF2FB);
  color: var(--color-primary, #0D3B73);
  margin-bottom: var(--space-md, 24px);
}
.services-hub-card-icon svg { width: 26px; height: 26px; }

.services-hub-card-title { font-size: 20px; font-weight: 600; color: var(--color-navy, #081F3F); margin: 0 0 var(--space-sm, 16px) 0; }
.services-hub-card-description { font-size: 15px; line-height: 1.6; color: var(--color-gray, #5F6B7A); margin: 0 0 var(--space-md, 24px) 0; }

.services-hub-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-lg, 32px);
  /* pushes the link below to the bottom of the card even when a
     neighboring card's description is shorter */
  margin-top: auto;
}
.services-hub-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-steel, #3E6B9C);
  background: var(--color-soft-blue, #EAF2FB);
  border-radius: 999px;
  padding: 6px 12px;
}

.services-hub-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary, #0D3B73);
  text-decoration: none;
}
.services-hub-card-link svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.services-hub-card-link:hover svg { transform: translateX(3px); }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* 3 columns -> 2 columns (5 cards wrap 2+2+1) */
  .services-hub-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .services-hub-grid-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .section-heading { font-size: 28px; }
  .services-hub-grid { grid-template-columns: 1fr; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9b05963 *//* ============================================================
   CONTAINER 4 CSS: HOW WE WORK — identical to every service page's
   Service Process container. Skip if already pasted.
   ============================================================ */

.service-process-container {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}
.service-process-container .section-header { margin-bottom: var(--space-2xl, 64px); }

.service-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg, 32px);
}

.service-process-step { text-align: left; }
.service-process-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-gold, #D6A641);
  margin-bottom: var(--space-sm, 16px);
}
.service-process-title { font-size: 18px; font-weight: 600; color: var(--color-navy, #081F3F); margin: 0 0 var(--space-xs, 8px) 0; }
.service-process-description { font-size: 15px; color: var(--color-gray, #5F6B7A); margin: 0; }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  /* 4 columns -> 2 columns */
  .service-process-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .service-process-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .service-process-grid { grid-template-columns: 1fr; gap: var(--space-xl, 48px); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c0664a1 *//* ============================================================
   CONTAINER 9 CSS: FAQ
   ============================================================ */

.faq-container {
  max-width: 800px; /* narrower than most sections — FAQ reads better in a tighter column */
  margin: 0 auto;
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 16px);
}

.faq-item {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
}

.faq-question-button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  padding: var(--space-md, 24px);
  background: var(--color-white, #fff);
  border: none;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-navy, #081F3F);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

/* Open state AND hover — gold accent instead of the default white,
   so the active question (and whichever one you're about to open) is
   visually distinct from the rest. Combined into one rule so hover
   and open never fight each other or flash between two colors. */
.faq-item.is-open .faq-question-button,
.faq-question-button:hover {
  background: var(--color-gold, #D6A641);
  color: var(--color-navy, #081F3F);
}

/* The little "+" icon that rotates into an "x" when open */
.faq-icon {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-primary, #0D3B73);
  transition: transform 0.25s ease, background 0.25s ease;
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); } /* "+" becomes "-" */
.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after,
.faq-question-button:hover .faq-icon::before,
.faq-question-button:hover .faq-icon::after { background: var(--color-navy, #081F3F); } /* keep the icon readable against the gold */

.faq-answer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.is-open .faq-answer-panel { max-height: 400px; } /* tall enough for any realistic answer length */
.faq-answer-text {
  padding: 0 var(--space-md, 24px) var(--space-md, 24px) var(--space-md, 24px);
  margin: 0;
  color: var(--color-gray, #5F6B7A);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .faq-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .faq-question-button { font-size: 15px; padding: var(--space-sm, 16px); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-69e4170 *//* ============================================================
   CONTAINER 6 CSS: CTA — identical to every service page's CTA
   container. Skip if already pasted.
   ============================================================ */

.service-cta-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-navy, #081F3F) 0%, var(--color-primary, #0D3B73) 100%);
  padding: var(--space-3xl, 96px) var(--space-md, 24px);
  text-align: center;
}

.service-cta-art {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px;
  pointer-events: none;
  opacity: 0.6;
}

.service-cta-inner {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

/* "On dark" button variants — shared with every other service doc. */
.btn-primary-on-dark {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: var(--radius-sm, 12px);
  font-weight: 600; font-size: 15px; text-decoration: none;
  background: var(--color-gold, #D6A641); color: var(--color-navy, #081F3F);
  transition: transform 0.2s ease;
}
.btn-secondary-on-dark {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: var(--radius-sm, 12px);
  font-weight: 600; font-size: 15px; text-decoration: none;
  background: transparent; color: var(--color-white, #fff);
  border: 2px solid rgba(255,255,255,0.35);
  transition: transform 0.2s ease;
}
.btn-primary-on-dark:hover, .btn-secondary-on-dark:hover { transform: translateY(-2px); }

.service-cta-heading {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-white, #fff);
  margin: 0 0 var(--space-md, 24px) 0;
}
.service-cta-paragraph {
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  margin: 0 0 var(--space-lg, 32px) 0;
}
.service-cta-button-row {
  display: flex;
  justify-content: center;
  gap: var(--space-sm, 16px);
  flex-wrap: wrap;
  margin-bottom: var(--space-md, 24px);
}
.service-cta-fine-print { font-size: 14px; color: rgba(255,255,255,0.5); margin: 0; position: relative; }

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .service-cta-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px); }
  .service-cta-heading { font-size: 28px; }
  .service-cta-button-row { flex-direction: column; }
  .service-cta-button-row .btn { width: 100%; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-be32150 *//* ============================================================
   CONTAINER 7 CSS: FOOTER — identical to every other doc's.
   ============================================================ */

.footer-container {
  background: var(--color-navy, #081F3F);
  padding: var(--space-3xl, 96px) var(--space-md, 24px) var(--space-lg, 32px) var(--space-md, 24px);
}

.footer-grid {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-xl, 48px);
  padding-bottom: var(--space-xl, 48px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-logo { color: var(--color-white, #fff); display: inline-block; margin-bottom: var(--space-md, 24px); }
.footer-blurb { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0 0 var(--space-md, 24px) 0; }
.footer-social-row { display: flex; gap: var(--space-sm, 16px); }
.footer-social-link {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--color-white, #fff);
}
.footer-social-link svg { width: 16px; height: 16px; }

.footer-column-title { font-size: 15px; font-weight: 700; color: var(--color-white, #fff); margin: 0 0 var(--space-md, 24px) 0; }
.footer-link-list { display: flex; flex-direction: column; gap: var(--space-sm, 16px); }
.footer-link { font-size: 15px; color: rgba(255,255,255,0.6); text-decoration: none; }
.footer-link:hover { color: var(--color-white, #fff); }
.footer-contact-details { display: flex; flex-direction: column; gap: var(--space-sm, 16px); }
.footer-address { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.6; }

.footer-bottom-bar {
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg, 32px);
  flex-wrap: wrap;
  gap: var(--space-sm, 16px);
}
.footer-copyright { font-size: 14px; color: rgba(255,255,255,0.5); }
.footer-legal-links { display: flex; gap: var(--space-lg, 32px); }

/* ---------- TABLET: 1023px and narrower ---------- */
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand-column { grid-column: 1 / -1; }
}

/* ---------- MOBILE: 767px and narrower ---------- */
@media (max-width: 767px) {
  .footer-container { padding: var(--space-2xl, 64px) var(--space-sm, 16px) var(--space-md, 24px) var(--space-sm, 16px); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg, 32px); }
  .footer-bottom-bar { flex-direction: column; align-items: flex-start; }
}/* End custom CSS */