/* =========================================================
   HOME 05: SERVICES OVERVIEW
   File: /assets/css/services-home.css
   ========================================================= */

:root {
  --services-blue: #083E7F;
  --services-blue-dark: #052F61;
  --services-green: #00A86B;
  --services-green-dark: #008959;
  --services-ink: #172238;
  --services-text: #606B79;
  --services-muted: #8A94A2;
  --services-line: #E6ECF3;
  --services-soft: #F7F9FC;
  --services-white: #FFFFFF;
  --services-max: 1220px;
}

.emark-services-home {
  position: relative;
  overflow: hidden;
  padding: 102px 0 108px;
  background: var(--services-white);
  border-bottom: 1px solid var(--services-line);
}

.emark-services-home__accent {
  position: absolute;
  width: 310px;
  height: 310px;
  top: -175px;
  right: -105px;
  border: 1px solid rgba(8, 62, 127, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.emark-services-home__accent::before,
.emark-services-home__accent::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.emark-services-home__accent::before {
  inset: 46px;
  border: 1px solid rgba(0, 168, 107, 0.07);
}

.emark-services-home__accent::after {
  inset: 92px;
  background: rgba(8, 62, 127, 0.025);
}

.emark-services-home__container {
  width: min(calc(100% - 40px), var(--services-max));
  margin-inline: auto;
}

.emark-services-home__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.72fr);
  gap: 72px;
  align-items: end;
  margin-bottom: 44px;
}

.emark-services-home__eyebrow {
  margin: 0 0 12px;
  color: var(--services-green-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

.emark-services-home h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--services-ink);
  font-size: clamp(2.3rem, 4vw, 3.65rem);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.03;
  text-wrap: balance;
}

.emark-services-home__intro-copy {
  max-width: 530px;
  margin-left: auto;
}

.emark-services-home__intro-copy p {
  margin: 0;
  color: var(--services-text);
  font-size: 1rem;
  line-height: 1.75;
}

.emark-services-home__all {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 21px;
  color: var(--services-blue);
  font-size: 0.87rem;
  font-weight: 800;
  text-decoration: none;
}

.emark-services-home__all span {
  color: var(--services-green);
  transition: transform 150ms ease;
}

.emark-services-home__all:hover span,
.emark-services-home__all:focus-visible span {
  transform: translateX(4px);
}

.emark-services-home__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.emark-service-group {
  min-height: 300px;
  position: relative;
  overflow: hidden;
  padding: 28px;
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
  border: 1px solid var(--services-line);
  border-radius: 20px;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}

.emark-service-group:hover {
  border-color: rgba(8, 62, 127, 0.16);
  box-shadow: 0 18px 42px rgba(18, 43, 73, 0.07);
  transform: translateY(-3px);
}

.emark-service-group__head {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 17px;
  align-items: start;
  margin-bottom: 24px;
}

.emark-service-group__number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--services-blue);
  background: var(--services-soft);
  border: 1px solid rgba(8, 62, 127, 0.08);
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 850;
}

.emark-service-group__label {
  margin: 1px 0 5px;
  color: var(--services-green-dark);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.emark-service-group h3 {
  max-width: 19ch;
  margin: 0;
  color: var(--services-ink);
  font-size: 1.28rem;
  font-weight: 760;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.emark-service-group__links {
  border-top: 1px solid var(--services-line);
}

.emark-service-group__links a {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 3px;
  color: #344054;
  border-bottom: 1px solid var(--services-line);
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  transition:
    color 150ms ease,
    padding-left 150ms ease;
}

.emark-service-group__links a:last-child {
  border-bottom: 0;
}

.emark-service-group__links a > span:last-child {
  flex: 0 0 auto;
  color: var(--services-green);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.emark-service-group__links a:hover,
.emark-service-group__links a:focus-visible {
  color: var(--services-blue);
  padding-left: 7px;
}

.emark-service-group__links a:hover > span:last-child,
.emark-service-group__links a:focus-visible > span:last-child {
  opacity: 1;
  transform: translateX(0);
}

/* Featured technology panel */
.emark-service-group--feature {
  color: var(--services-white);
  background:
    radial-gradient(circle at 88% 16%, rgba(0,168,107,0.18), transparent 28%),
    linear-gradient(145deg, var(--services-blue-dark), var(--services-blue));
  border-color: transparent;
}

.emark-service-group--feature .emark-service-group__number {
  color: var(--services-white);
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.12);
}

.emark-service-group--feature .emark-service-group__label {
  color: #93E8C8;
}

.emark-service-group--feature h3 {
  color: var(--services-white);
}

.emark-service-group--feature .emark-service-group__links {
  border-top-color: rgba(255,255,255,0.13);
}

.emark-service-group--feature .emark-service-group__links a {
  color: rgba(255,255,255,0.88);
  border-bottom-color: rgba(255,255,255,0.12);
}

.emark-service-group--feature .emark-service-group__links a:hover,
.emark-service-group--feature .emark-service-group__links a:focus-visible {
  color: var(--services-white);
}

.emark-service-group--feature .emark-service-group__links a > span:last-child {
  color: #93E8C8;
}

.emark-service-group__links small {
  margin-left: 8px;
  padding: 3px 6px;
  color: #053F2D;
  background: #9AEACB;
  border-radius: 999px;
  font-size: 0.57rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

.emark-service-group__signal {
  position: absolute;
  right: 26px;
  bottom: 24px;
  height: 43px;
  display: flex;
  align-items: end;
  gap: 5px;
  opacity: 0.22;
}

.emark-service-group__signal span {
  width: 5px;
  background: #9AEACB;
  border-radius: 3px 3px 0 0;
}

.emark-service-group__signal span:nth-child(1) { height: 14px; }
.emark-service-group__signal span:nth-child(2) { height: 24px; }
.emark-service-group__signal span:nth-child(3) { height: 18px; }
.emark-service-group__signal span:nth-child(4) { height: 33px; }
.emark-service-group__signal span:nth-child(5) { height: 41px; }

.emark-services-home a:focus-visible {
  outline: 3px solid rgba(0, 168, 107, 0.28);
  outline-offset: 4px;
  border-radius: 5px;
}

@media (max-width: 980px) {
  .emark-services-home__intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .emark-services-home__intro-copy {
    max-width: 650px;
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .emark-services-home__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .emark-services-home {
    padding: 76px 0 82px;
  }

  .emark-services-home__container {
    width: min(calc(100% - 28px), var(--services-max));
  }

  .emark-services-home h2 {
    max-width: 100%;
    font-size: clamp(2.3rem, 3.4vw, 3.3rem);
  }

  .emark-services-home__intro {
    margin-bottom: 32px;
  }

  .emark-service-group {
    min-height: 0;
    padding: 23px;
    border-radius: 17px;
  }

  .emark-service-group__head {
    grid-template-columns: 42px 1fr;
    gap: 13px;
  }

  .emark-service-group__links a {
    min-height: 46px;
  }

  .emark-service-group__signal {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emark-service-group,
  .emark-service-group__links a,
  .emark-service-group__links a > span:last-child,
  .emark-services-home__all span {
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   HOME 05 - FINAL ALTERNATING CARD COLOURS
   01 White | 02 Blue | 03 White | 04 Blue
   ========================================================= */

.emark-service-group {
  min-height: 0;
}

/* 02 and 04 blue */
.emark-services-home__grid > .emark-service-group:nth-child(2),
.emark-services-home__grid > .emark-service-group:nth-child(4) {
  background:
    radial-gradient(
      circle at 88% 16%,
      rgba(0, 168, 107, 0.16),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #052F61 0%,
      #083E7F 100%
    ) !important;

  border-color: transparent !important;
  color: #ffffff !important;
}

.emark-services-home__grid > .emark-service-group:nth-child(2)
.emark-service-group__number,
.emark-services-home__grid > .emark-service-group:nth-child(4)
.emark-service-group__number {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.emark-services-home__grid > .emark-service-group:nth-child(2)
.emark-service-group__label,
.emark-services-home__grid > .emark-service-group:nth-child(4)
.emark-service-group__label {
  color: #8FE8C6 !important;
}

.emark-services-home__grid > .emark-service-group:nth-child(2) h3,
.emark-services-home__grid > .emark-service-group:nth-child(4) h3 {
  color: #ffffff !important;
}

.emark-services-home__grid > .emark-service-group:nth-child(2)
.emark-service-group__links,
.emark-services-home__grid > .emark-service-group:nth-child(4)
.emark-service-group__links {
  border-top-color: rgba(255, 255, 255, 0.14) !important;
}

.emark-services-home__grid > .emark-service-group:nth-child(2)
.emark-service-group__links a,
.emark-services-home__grid > .emark-service-group:nth-child(4)
.emark-service-group__links a {
  color: rgba(255, 255, 255, 0.86) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.emark-services-home__grid > .emark-service-group:nth-child(2)
.emark-service-group__links a:hover,
.emark-services-home__grid > .emark-service-group:nth-child(4)
.emark-service-group__links a:hover {
  color: #ffffff !important;
}

.emark-services-home__grid > .emark-service-group:nth-child(2)
.emark-service-group__links a > span:last-child,
.emark-services-home__grid > .emark-service-group:nth-child(4)
.emark-service-group__links a > span:last-child {
  color: #8FE8C6 !important;
}


/* =========================================================
   HOME 05 - CARD ART
   ========================================================= */

.emark-service-group {
  position: relative;
  overflow: hidden;
}

.emark-service-group__head,
.emark-service-group__links {
  position: relative;
  z-index: 2;
}

.emark-card-art {
  position: absolute;
  right: 30px;
  bottom: 28px;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}


/* --------------------------
   CARD 02 - TAX DOCUMENT
   -------------------------- */

.emark-card-art--tax {
  width: 145px;
  height: 115px;
  opacity: 0.22;
}

.emark-card-art__paper {
  width: 82px;
  height: 104px;
  position: absolute;
  right: 17px;
  bottom: 0;

  padding: 25px 15px;

  border: 1.5px solid rgba(255,255,255,0.85);
  border-radius: 13px;

  transform: rotate(-4deg);
}

.emark-card-art__paper span {
  display: block;
  height: 4px;
  margin-bottom: 12px;

  background: rgba(255,255,255,0.72);
  border-radius: 20px;
}

.emark-card-art__paper span:nth-child(2) {
  width: 72%;
}

.emark-card-art__paper span:nth-child(3) {
  width: 86%;
}

.emark-card-art__check {
  width: 35px;
  height: 35px;

  position: absolute;
  right: 0;
  bottom: 9px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: #00A86B;

  border: 4px solid #083E7F;
  border-radius: 50%;

  font-size: 14px;
  font-weight: 800;
}


/* --------------------------
   CARD 03 - FINANCE CHART
   -------------------------- */

.emark-card-art--chart {
  width: 155px;
  height: 95px;

  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;

  padding-left: 14px;
  padding-bottom: 1px;

  border-left: 1px solid rgba(8,62,127,0.12);
  border-bottom: 1px solid rgba(8,62,127,0.12);

  opacity: 0.20;
}

.emark-card-art--chart span {
  width: 11px;
  border-radius: 5px 5px 0 0;
  background: #083E7F;
}

.emark-card-art--chart span:nth-child(1) {
  height: 28px;
}

.emark-card-art--chart span:nth-child(2) {
  height: 45px;
  background: #00A86B;
}

.emark-card-art--chart span:nth-child(3) {
  height: 37px;
}

.emark-card-art--chart span:nth-child(4) {
  height: 64px;
  background: #00A86B;
}

.emark-card-art--chart span:nth-child(5) {
  height: 82px;
}


/* Do not crowd small screens */
@media (max-width: 700px) {
  .emark-card-art {
    display: none;
  }
}

.emark-card-art__check {
  color: transparent;
}

/* =========================================================
   HOME 05 V3
   7 SERVICE AREA LAYOUT
   ========================================================= */


/* ---------- GRID: 4 + 3 ---------- */

.emark-services-home__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}


/* First row */

.emark-services-home__grid
> .emark-service-group:nth-child(-n+4) {
  grid-column: span 3;
}


/* Second row */

.emark-services-home__grid
> .emark-service-group:nth-child(n+5) {
  grid-column: span 4;
}


/* ---------- CARDS ---------- */

.emark-services-home__grid
> .emark-service-group {
  min-height: 285px;

  display: flex;
  flex-direction: column;

  padding: 26px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcfe 100%
    ) !important;

  border: 1px solid #e6ecf3 !important;

  color: #172238 !important;
}


/* ---------- CARD HEAD ---------- */

.emark-service-group__head {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: start;

  margin-bottom: 22px;
}


.emark-service-group__head h3 {
  max-width: none;

  margin: 3px 0 0;

  color: #172238 !important;

  font-size: 1.16rem;
  font-weight: 760;
  line-height: 1.18;
  letter-spacing: -0.025em;
}


/* ---------- NUMBER ---------- */

.emark-services-home__grid
.emark-service-group__number {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  color: #083E7F !important;

  background: #F7F9FC !important;

  border: 1px solid rgba(8, 62, 127, 0.08) !important;
  border-radius: 10px;

  font-size: 0.68rem;
  font-weight: 850;
}


/* ---------- DESCRIPTION ---------- */

.emark-service-group__summary {
  margin: 0 0 23px;

  color: #606B79;

  font-size: 0.88rem;
  line-height: 1.65;
}


/* ---------- BOTTOM LINK ---------- */

.emark-service-group__links {
  margin-top: auto;

  border-top: 1px solid #E6ECF3 !important;
}


.emark-services-home__grid
.emark-service-group__links a {
  min-height: 49px;

  color: #344054 !important;

  border-bottom: 0 !important;
}


.emark-services-home__grid
.emark-service-group__links a:hover,
.emark-services-home__grid
.emark-service-group__links a:focus-visible {
  color: #083E7F !important;
}


/* =========================================================
   BLUE CARDS
   02 / 04 / 06
   ========================================================= */

.emark-services-home__grid
> .emark-service-group--blue {
  color: #ffffff !important;

  background:
    radial-gradient(
      circle at 88% 16%,
      rgba(0, 168, 107, 0.16),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #052F61 0%,
      #083E7F 100%
    ) !important;

  border-color: transparent !important;
}


.emark-services-home__grid
.emark-service-group--blue
.emark-service-group__number {
  color: #ffffff !important;

  background:
    rgba(255, 255, 255, 0.10) !important;

  border-color:
    rgba(255, 255, 255, 0.14) !important;
}


.emark-services-home__grid
.emark-service-group--blue h3 {
  color: #ffffff !important;
}


.emark-services-home__grid
.emark-service-group--blue
.emark-service-group__summary {
  color: rgba(255, 255, 255, 0.72);
}


.emark-services-home__grid
.emark-service-group--blue
.emark-service-group__links {
  border-top-color:
    rgba(255, 255, 255, 0.14) !important;
}


.emark-services-home__grid
.emark-service-group--blue
.emark-service-group__links a {
  color: rgba(255, 255, 255, 0.88) !important;
}


.emark-services-home__grid
.emark-service-group--blue
.emark-service-group__links a:hover,
.emark-services-home__grid
.emark-service-group--blue
.emark-service-group__links a:focus-visible {
  color: #ffffff !important;
}


/* =========================================================
   CARD 07 - DIGITAL FINANCE
   ========================================================= */

.emark-services-home__grid
> .emark-service-group--digital {
  background:
    radial-gradient(
      circle at 91% 14%,
      rgba(0, 168, 107, 0.10),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7fcfa 100%
    ) !important;

  border-color:
    rgba(0, 168, 107, 0.18) !important;
}


/* E-Invoicing pill */

.emark-service-group__einvoice {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 13px;

  padding: 7px 11px;

  color: #007A50;

  background:
    rgba(0, 168, 107, 0.07);

  border:
    1px solid rgba(0, 168, 107, 0.13);

  border-radius: 999px;

  font-size: 0.68rem;
  font-weight: 800;

  text-decoration: none;
}


.emark-service-group__einvoice span {
  transition: transform 160ms ease;
}


.emark-service-group__einvoice:hover span,
.emark-service-group__einvoice:focus-visible span {
  transform: translateX(3px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .emark-services-home__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .emark-services-home__grid
  > .emark-service-group:nth-child(n) {
    grid-column: auto;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .emark-services-home__grid {
    grid-template-columns: 1fr;
  }


  .emark-services-home__grid
  > .emark-service-group {
    min-height: 0;

    padding: 23px;
  }


  .emark-service-group__summary {
    margin-bottom: 18px;
  }

}