/*
 * TIC Ltd reusable service page styles.
 *
 * Apply tic-service-page to a page wrapper. If a wrapper is not available,
 * apply it to each outer service-page section or load this file only on
 * service pages.
 */

.tic-service-page,
.tic-service-page.tic-page {
  --tic-bg: #050608;
  --tic-bg-alt: #090b10;
  --tic-panel: #0d1118;
  --tic-card: #101620;
  --tic-card-hover: #151d2a;
  --tic-text: #ffffff;
  --tic-text-soft: #d9e1ec;
  --tic-text-muted: #a7b3c4;
  --tic-purple: #8b2cff;
  --tic-magenta: #f92dff;
  --tic-cyan: #20c9ff;
  --tic-border: rgba(32, 201, 255, 0.28);
  --tic-border-purple: rgba(139, 44, 255, 0.34);
  --tic-shadow-cyan: 0 0 28px rgba(32, 201, 255, 0.26);
  --tic-shadow-purple: 0 0 28px rgba(139, 44, 255, 0.28);
  --tic-shadow-card: 0 20px 45px rgba(0, 0, 0, 0.32);
  --tic-radius: 18px;
  --tic-radius-small: 12px;
  --tic-container: 1320px;
  --tic-container-wide: 1420px;
  --tic-container-narrow: 820px;
  --tic-container-faq: 1050px;
  --tic-container-cta: 900px;
  --tic-space-x: 24px;
  --tic-space-large: 56px;
  --tic-space-standard: 44px;
  --tic-space-compact: 32px;
  --tic-layout-gap: 36px;
  --tic-layout-gap-large: 48px;
  --tic-layout-gap-compact: 20px;
  --tic-section-header-space: 32px;

  /*
   * Elementor should now control most page-level vertical spacing.
   * These variables are light defaults and mobile safeguards, not fixed
   * art direction for every service page.
   */
  --tic-section-y: var(--tic-space-standard);
  --tic-hero-y: var(--tic-space-large);
  --tic-final-cta-y: var(--tic-space-large);

  overflow-x: hidden;
  color: var(--tic-text);
  background: var(--tic-bg);
}

.tic-service-page,
.tic-service-page * {
  box-sizing: border-box;
}

.tic-service-page .tic-section,
.tic-service-page.tic-section {
  position: relative;
  width: 100%;
  padding: var(--tic-section-y) var(--tic-space-x);
  color: var(--tic-text);
  background: var(--tic-bg);
}

.tic-service-page .tic-section-dark,
.tic-service-page.tic-section-dark {
  background: var(--tic-bg);
}

.tic-service-page .tic-section-soft,
.tic-service-page.tic-section-soft,
.tic-service-page .tic-faq-section,
.tic-service-page.tic-faq-section,
.tic-service-page .tic-process-section,
.tic-service-page.tic-process-section {
  background: var(--tic-bg-alt);
}

.tic-service-page .tic-problems-section,
.tic-service-page.tic-problems-section,
.tic-service-page .tic-help-section,
.tic-service-page.tic-help-section,
.tic-service-page .tic-modern-section,
.tic-service-page.tic-modern-section,
.tic-service-page .tic-related-section,
.tic-service-page.tic-related-section,
.tic-service-page .tic-intro-section,
.tic-service-page.tic-intro-section {
  background: var(--tic-bg);
}

.tic-service-page .tic-section-padding-large,
.tic-service-page.tic-section-padding-large {
  --tic-section-y: var(--tic-space-large);
}

.tic-service-page .tic-section-padding-standard,
.tic-service-page.tic-section-padding-standard {
  --tic-section-y: var(--tic-space-standard);
}

.tic-service-page .tic-section-padding-compact,
.tic-service-page.tic-section-padding-compact {
  --tic-section-y: var(--tic-space-compact);
}

.tic-service-page .tic-container,
.tic-service-page .tic-container-wide,
.tic-service-page .tic-container-narrow,
.tic-service-page .tic-container-faq,
.tic-service-page .tic-container-cta {
  width: 100%;
  max-width: var(--tic-container);
  margin-right: auto;
  margin-left: auto;
}

.tic-service-page .tic-container-wide {
  max-width: var(--tic-container-wide);
}

.tic-service-page .tic-container-narrow,
.tic-service-page .tic-narrow {
  max-width: var(--tic-container-narrow);
}

.tic-service-page .tic-container-faq,
.tic-service-page .tic-faq-inner {
  max-width: var(--tic-container-faq);
}

.tic-service-page .tic-container-cta {
  max-width: var(--tic-container-cta);
}

.tic-service-page .tic-centred,
.tic-service-page .tic-text-centre {
  text-align: center;
}

.tic-service-page .tic-centred {
  align-items: center;
}

.tic-service-page .tic-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--tic-layout-gap-compact);
  width: 100%;
  max-width: 860px;
  align-self: center;
  margin-bottom: var(--tic-section-header-space);
}

.tic-service-page .tic-section-header.tic-centred {
  margin-right: auto;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.tic-service-page .tic-section-header .elementor-widget,
.tic-service-page .tic-section-header .elementor-widget-container,
.tic-service-page .tic-section-header .tic-heading-section,
.tic-service-page .tic-section-header .tic-body {
  width: 100%;
}

.tic-service-page .tic-eyebrow,
.tic-service-page .tic-eyebrow .elementor-heading-title {
  margin: 0;
  color: var(--tic-magenta);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tic-service-page .tic-heading-main,
.tic-service-page .tic-heading-main .elementor-heading-title {
  margin: 0;
  color: var(--tic-text);
  font-size: 52px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}

.tic-service-page .tic-heading-section,
.tic-service-page .tic-heading-section .elementor-heading-title {
  margin: 0;
  color: var(--tic-text);
  font-size: 38px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: 0;
}

.tic-service-page .tic-heading-underlined .elementor-heading-title::after {
  content: "";
  display: block;
  width: 120px;
  height: 5px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tic-purple), var(--tic-magenta), var(--tic-cyan));
}

.tic-service-page .tic-body,
.tic-service-page .tic-body p,
.tic-service-page .tic-body .elementor-widget-container {
  color: var(--tic-text-soft);
  font-size: 17px;
  line-height: 1.68;
}

.tic-service-page .tic-body p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.tic-service-page .tic-body p:last-child {
  margin-bottom: 0;
}

.tic-service-page .tic-muted,
.tic-service-page .tic-muted p,
.tic-service-page .tic-muted .elementor-widget-container {
  color: var(--tic-text-muted);
  font-size: 16px;
  line-height: 1.65;
}

.tic-service-page .tic-text-narrow {
  max-width: var(--tic-container-narrow);
}

.tic-service-page .tic-hero-section,
.tic-service-page.tic-hero-section {
  padding-top: var(--tic-hero-y);
  padding-bottom: var(--tic-hero-y);
  background:
    radial-gradient(circle at 12% 20%, rgba(139, 44, 255, 0.18), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(32, 201, 255, 0.12), transparent 32%),
    var(--tic-bg);
}

.tic-service-page .tic-hero-inner,
.tic-service-page .tic-split-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--tic-layout-gap);
}

.tic-service-page .tic-hero-inner {
  gap: var(--tic-layout-gap-large);
}

.tic-service-page .tic-hero-media,
.tic-service-page .tic-hero-content,
.tic-service-page .tic-split-content,
.tic-service-page .tic-split-panel {
  flex: 1 1 0;
  min-width: 0;
}

.tic-service-page .tic-hero-content,
.tic-service-page .tic-split-content {
  display: flex;
  flex-direction: column;
  gap: var(--tic-layout-gap-compact);
}

.tic-service-page .tic-split-content {
  gap: var(--tic-layout-gap-compact);
}

.tic-service-page .tic-hero-media img,
.tic-service-page .tic-image-glow img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--tic-border);
  border-radius: var(--tic-radius);
  box-shadow: var(--tic-shadow-cyan), var(--tic-shadow-card);
}

.tic-service-page .tic-card-grid,
.tic-service-page .tic-service-grid {
  display: grid;
  gap: var(--tic-layout-gap);
  align-items: stretch;
}

.tic-service-page .tic-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tic-service-page .tic-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tic-service-page .tic-card,
.tic-service-page .tic-service-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  border: 1px solid var(--tic-border-purple);
  border-radius: var(--tic-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    var(--tic-card);
  box-shadow: var(--tic-shadow-card);
}

.tic-service-page .tic-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: flex-start;
  padding: 30px;
}

.tic-service-page .tic-card h3,
.tic-service-page .tic-service-card h3,
.tic-service-page .tic-process-step h3,
.tic-service-page .tic-benefit-item h3,
.tic-service-page .tic-card .elementor-heading-title,
.tic-service-page .tic-service-card .elementor-heading-title {
  margin: 0;
  color: var(--tic-text);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0;
}

.tic-service-page .tic-card p,
.tic-service-page .tic-service-card p,
.tic-service-page .tic-process-step p,
.tic-service-page .tic-benefit-item p {
  margin: 0;
  color: var(--tic-text-soft);
  font-size: 16px;
  line-height: 1.6;
}

.tic-service-page .tic-card-glow,
.tic-service-page .tic-service-card {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.tic-service-page .tic-card-glow:hover,
.tic-service-page .tic-service-card:hover {
  transform: translateY(-4px);
  border-color: var(--tic-cyan);
  background-color: var(--tic-card-hover);
  box-shadow: var(--tic-shadow-cyan), var(--tic-shadow-card);
}

.tic-service-page .tic-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  min-width: 58px;
  border: 1px solid var(--tic-border);
  border-radius: 50%;
  color: var(--tic-cyan);
  background: rgba(32, 201, 255, 0.06);
  box-shadow: inset 0 0 18px rgba(32, 201, 255, 0.08);
}

.tic-service-page .tic-icon-circle svg,
.tic-service-page .tic-icon-circle i {
  width: 26px;
  height: 26px;
  color: currentColor;
  fill: none;
}

.tic-service-page .tic-button-primary .elementor-button,
.tic-service-page .tic-button-primary.elementor-button,
.tic-service-page .tic-button-secondary .elementor-button,
.tic-service-page .tic-button-secondary.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.tic-service-page .tic-button-primary .elementor-button,
.tic-service-page .tic-button-primary.elementor-button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--tic-text);
  background: linear-gradient(135deg, var(--tic-purple), var(--tic-magenta));
  box-shadow: 0 0 24px rgba(32, 201, 255, 0.34);
}

.tic-service-page .tic-button-secondary .elementor-button,
.tic-service-page .tic-button-secondary.elementor-button {
  border: 1px solid var(--tic-border);
  color: var(--tic-text);
  background: rgba(255, 255, 255, 0.03);
}

.tic-service-page .tic-button-primary .elementor-button:hover,
.tic-service-page .tic-button-primary.elementor-button:hover,
.tic-service-page .tic-button-secondary .elementor-button:hover,
.tic-service-page .tic-button-secondary.elementor-button:hover {
  transform: translateY(-2px);
  border-color: var(--tic-cyan);
  box-shadow: var(--tic-shadow-cyan);
}

.tic-service-page .tic-process-section,
.tic-service-page.tic-process-section {
  background:
    linear-gradient(180deg, rgba(139, 44, 255, 0.1), transparent 48%),
    var(--tic-bg-alt);
}

.tic-service-page .tic-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tic-layout-gap-large);
}

.tic-service-page .tic-process-step,
.tic-service-page .tic-benefit-item {
  display: flex;
  flex-direction: column;
  gap: var(--tic-layout-gap-compact);
}

.tic-service-page .tic-process-number,
.tic-service-page .tic-process-number .elementor-heading-title {
  margin: 0;
  color: var(--tic-magenta);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.tic-service-page .tic-process-step h3,
.tic-service-page .tic-process-step .elementor-heading-title,
.tic-service-page .tic-benefit-item h3,
.tic-service-page .tic-benefit-item .elementor-heading-title {
  font-size: 30px;
}

.tic-service-page .tic-why-section,
.tic-service-page.tic-why-section {
  background:
    radial-gradient(circle at 88% 30%, rgba(32, 201, 255, 0.12), transparent 32%),
    var(--tic-bg);
}

.tic-service-page .tic-why-inner {
  display: flex;
  flex-direction: column;
  gap: var(--tic-layout-gap);
}

.tic-service-page .tic-why-intro {
  width: 100%;
  max-width: 860px;
}

.tic-service-page .tic-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tic-layout-gap-large);
  align-items: start;
}

.tic-service-page .tic-gradient-bar,
.tic-service-page .tic-gradient-accent {
  display: block;
  width: 100%,;
  height: 9px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tic-purple), var(--tic-magenta), var(--tic-cyan));
  box-shadow: 0 0 18px rgba(32, 201, 255, 0.24);
}

.tic-service-page .tic-benefit-item,
.tic-service-page .tic-benefit-item .elementor-widget,
.tic-service-page .tic-benefit-item .elementor-widget-container {
  width: 100%;
}

.tic-service-page .tic-split-panel {
  padding: 32px;
}

.tic-service-page .tic-split-panel ul,
.tic-service-page .tic-card ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tic-service-page .tic-split-panel li,
.tic-service-page .tic-card li {
  position: relative;
  padding-left: 26px;
  color: var(--tic-text-soft);
  font-size: 16px;
  line-height: 1.55;
}

.tic-service-page .tic-split-panel li::before,
.tic-service-page .tic-card li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tic-cyan);
  box-shadow: 0 0 12px rgba(32, 201, 255, 0.54);
  transform: translateY(-50%);
}

.tic-service-page .tic-service-card {
  display: flex;
  flex-direction: column;
}

.tic-service-page .tic-service-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--tic-border);
}

.tic-service-page .tic-service-card .elementor-widget-image,
.tic-service-page .tic-service-card .elementor-widget-image .elementor-widget-container {
  line-height: 0;
}

.tic-service-page .tic-service-card-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  padding: 28px;
  text-align: center;
}

.tic-service-page .tic-service-card-content .elementor-widget {
  width: 100%;
}

.tic-service-page .tic-service-card-content .tic-button-primary,
.tic-service-page .tic-service-card-content .tic-button-secondary {
  margin-top: auto;
  align-self: center;
}

.tic-service-page .tic-related-section .tic-section-header {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.tic-service-page .tic-related-section .tic-section-header .tic-body {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}

.tic-service-page .tic-faq,
.tic-service-page .tic-faq .elementor-accordion {
  width: 100%;
}

.tic-service-page .tic-faq .elementor-accordion-item,
.tic-service-page .tic-faq .elementor-toggle-item {
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--tic-border);
  border-radius: var(--tic-radius-small);
  background: var(--tic-panel);
}

.tic-service-page .tic-faq .elementor-tab-title,
.tic-service-page .tic-faq .elementor-toggle-title {
  padding: 20px 22px;
  color: var(--tic-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.tic-service-page .tic-faq .elementor-tab-title:hover,
.tic-service-page .tic-faq .elementor-tab-title.elementor-active {
  color: var(--tic-text);
  background: linear-gradient(90deg, rgba(139, 44, 255, 0.26), rgba(32, 201, 255, 0.14));
}

.tic-service-page .tic-faq .elementor-tab-content,
.tic-service-page .tic-faq .elementor-toggle-content {
  padding: 0 22px 22px;
  color: var(--tic-text-soft);
  font-size: 16px;
  line-height: 1.65;
}

.tic-service-page .tic-final-cta,
.tic-service-page.tic-final-cta {
  padding-top: var(--tic-final-cta-y);
  padding-bottom: var(--tic-final-cta-y);
  background:
    radial-gradient(circle at 50% 20%, rgba(139, 44, 255, 0.18), transparent 36%),
    var(--tic-bg);
}

.tic-service-page .tic-final-cta .tic-container,
.tic-service-page.tic-final-cta .tic-container,
.tic-service-page .tic-final-cta.tic-centred {
  display: flex;
  flex-direction: column;
  gap: var(--tic-layout-gap-compact);
  align-items: center;
  max-width: var(--tic-container-cta);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.tic-service-page .tic-gap-large {
  gap: var(--tic-layout-gap-large);
}

.tic-service-page .tic-gap-standard {
  gap: var(--tic-layout-gap);
}

.tic-service-page .tic-gap-compact {
  gap: var(--tic-layout-gap-compact);
}

.tic-service-page .tic-border-cyan {
  border-color: var(--tic-border);
}

.tic-service-page .tic-border-purple {
  border-color: var(--tic-border-purple);
}

.tic-service-page .tic-glow-cyan {
  box-shadow: var(--tic-shadow-cyan);
}

.tic-service-page .tic-glow-purple {
  box-shadow: var(--tic-shadow-purple);
}

@media (max-width: 1024px) {
  .tic-service-page {
    --tic-space-large: 48px;
    --tic-space-standard: 38px;
    --tic-space-compact: 28px;
    --tic-layout-gap: 30px;
    --tic-layout-gap-large: 40px;
    --tic-layout-gap-compact: 18px;
    --tic-section-header-space: 28px;
  }

  .tic-service-page .tic-hero-section,
  .tic-service-page.tic-hero-section {
    padding-top: var(--tic-hero-y);
    padding-bottom: var(--tic-hero-y);
  }

  .tic-service-page .tic-hero-inner,
  .tic-service-page .tic-split-inner {
    gap: var(--tic-layout-gap);
  }

  .tic-service-page .tic-heading-main,
  .tic-service-page .tic-heading-main .elementor-heading-title {
    font-size: 46px;
  }

  .tic-service-page .tic-heading-section,
  .tic-service-page .tic-heading-section .elementor-heading-title {
    font-size: 34px;
  }

  .tic-service-page .tic-grid-3,
  .tic-service-page .tic-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tic-service-page .tic-process-grid {
    gap: var(--tic-layout-gap);
  }

  .tic-service-page .tic-why-grid {
    gap: var(--tic-layout-gap);
  }
}

@media (max-width: 900px) {
  .tic-service-page .tic-hero-inner,
  .tic-service-page .tic-split-inner {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 767px) {
  .tic-service-page {
    --tic-space-large: 40px;
    --tic-space-standard: 32px;
    --tic-space-compact: 24px;
    --tic-space-x: 20px;
    --tic-layout-gap: 24px;
    --tic-layout-gap-large: 28px;
    --tic-layout-gap-compact: 16px;
    --tic-section-header-space: 24px;
  }

  .tic-service-page .tic-hero-section,
  .tic-service-page.tic-hero-section {
    padding-top: var(--tic-hero-y);
    padding-bottom: var(--tic-hero-y);
  }

  .tic-service-page .tic-mobile-stack {
    flex-direction: column;
  }

  .tic-service-page .tic-hero-inner {
    gap: var(--tic-layout-gap-large);
  }

  .tic-service-page .tic-split-inner {
    gap: var(--tic-layout-gap);
  }

  .tic-service-page .tic-hero-content,
  .tic-service-page .tic-split-content {
    gap: var(--tic-layout-gap-compact);
  }

  .tic-service-page .tic-heading-main,
  .tic-service-page .tic-heading-main .elementor-heading-title {
    font-size: 38px;
    line-height: 1.14;
  }

  .tic-service-page .tic-heading-section,
  .tic-service-page .tic-heading-section .elementor-heading-title {
    font-size: 30px;
  }

  .tic-service-page .tic-body,
  .tic-service-page .tic-body p,
  .tic-service-page .tic-body .elementor-widget-container {
    font-size: 16px;
  }

  .tic-service-page .tic-section-header {
    gap: var(--tic-layout-gap-compact);
    margin-bottom: var(--tic-section-header-space);
  }

  .tic-service-page .tic-grid-3,
  .tic-service-page .tic-grid-4,
  .tic-service-page .tic-process-grid,
  .tic-service-page .tic-why-grid {
    grid-template-columns: 1fr;
    gap: var(--tic-layout-gap);
  }

  .tic-service-page .tic-process-grid {
    margin-top: 8px;
  }

  .tic-service-page .tic-card,
  .tic-service-page .tic-split-panel,
  .tic-service-page .tic-service-card-content {
    padding: 24px;
  }

  .tic-service-page .tic-card h3,
  .tic-service-page .tic-service-card h3,
  .tic-service-page .tic-process-step h3,
  .tic-service-page .tic-benefit-item h3,
  .tic-service-page .tic-card .elementor-heading-title,
  .tic-service-page .tic-service-card .elementor-heading-title {
    font-size: 24px;
  }

  .tic-service-page .tic-icon-circle {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }

  .tic-service-page .tic-button-primary .elementor-button,
  .tic-service-page .tic-button-primary.elementor-button,
  .tic-service-page .tic-button-secondary .elementor-button,
  .tic-service-page .tic-button-secondary.elementor-button {
    width: 100%;
    max-width: 360px;
  }

  .tic-service-page .tic-gradient-bar,
  .tic-service-page .tic-gradient-accent {
    width: min(100%, 260px);
    height: 8px;
  }
}