/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   SHARED SERVICE COMING SOON

   Used by:
   - IT Consulting
   - IT Audit
   - Maintenance

   Direction:
   Editorial
   Minimal
   Technical
   Deliberate
   ========================================================= */


/* =========================================================
   01. PAGE
   ========================================================= */

.page-service-soon {
  background:
    var(--bg-main);
}


/* =========================================================
   02. HERO
   ========================================================= */

.service-soon-hero {
  position:
    relative;

  min-height:
    calc(100svh - var(--navbar-height));

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    clamp(90px, 8vw, 140px)
    var(--page-inline)
    clamp(70px, 7vw, 110px);

  overflow:
    hidden;
}


/* =========================================================
   03. HERO BACKGROUND
   ========================================================= */

.service-soon-hero::before {
  content:
    "";

  position:
    absolute;

  width:
    min(70vw, 1100px);

  aspect-ratio:
    1;

  right:
    -24%;

  top:
    -40%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.14),
      rgba(7, 92, 255, 0.065) 42%,
      transparent 72%
    );

  pointer-events:
    none;
}

.service-soon-hero::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background-image:
    linear-gradient(
      rgba(7, 92, 255, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(7, 92, 255, 0.035) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.6),
      transparent 80%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.6),
      transparent 80%
    );

  pointer-events:
    none;
}


/* =========================================================
   04. HERO TOP
   ========================================================= */

.service-soon-hero__top {
  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;
}

.service-soon-hero__index {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}

.service-soon-hero__index strong {
  color:
    var(--abpe-blue);

  font-size:
    0.72rem;

  font-weight:
    600;
}

.service-soon-hero__index span {
  color:
    var(--text-muted);

  font-size:
    0.68rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


/* =========================================================
   05. COMING SOON STATUS
   ========================================================= */

.service-soon-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    9px 14px;

  border:
    1px solid var(--line);

  border-radius:
    100px;

  background:
    rgba(255, 255, 255, 0.58);

  color:
    var(--text-muted);

  font-size:
    0.58rem;

  font-weight:
    600;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.service-soon-status::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--abpe-cyan);

  box-shadow:
    0 0 14px
    rgba(0, 200, 255, 0.65);
}


/* =========================================================
   06. HERO MAIN
   ========================================================= */

.service-soon-hero__main {
  position:
    relative;

  z-index:
    3;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.3fr);

  align-items:
    end;

  gap:
    clamp(70px, 11vw, 180px);

  margin:
    clamp(110px, 13vw, 210px)
    0
    clamp(100px, 11vw, 170px);
}


/* =========================================================
   07. HERO TITLE
   ========================================================= */

.service-soon-hero__title {
  max-width:
    1420px;

  color:
    var(--text-heading);

  font-size:
    clamp(4.3rem, 9vw, 10.5rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}

.service-soon-hero__title span {
  display:
    block;
}

.service-soon-hero__title .indent {
  padding-left:
    clamp(90px, 15vw, 280px);
}

.service-soon-hero__title .accent {
  color:
    var(--abpe-blue);
}


/* =========================================================
   08. HERO SIDE
   ========================================================= */

.service-soon-hero__side {
  padding-top:
    22px;

  border-top:
    1px solid var(--line);
}

.service-soon-hero__side-label {
  display:
    block;

  margin-bottom:
    34px;

  color:
    var(--abpe-blue);

  font-size:
    0.6rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.service-soon-hero__side-copy {
  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.72;
}


/* =========================================================
   09. HERO FOOT
   ========================================================= */

.service-soon-hero__foot {
  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  padding-top:
    22px;

  border-top:
    1px solid var(--line);

  color:
    var(--text-muted);

  font-size:
    0.63rem;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.service-soon-hero__foot span:last-child {
  text-align:
    right;
}


/* =========================================================
   10. PREPARING SECTION
   ========================================================= */

.service-soon-preparing {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}

.service-soon-preparing__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 0.38fr);

  align-items:
    end;

  gap:
    clamp(60px, 10vw, 160px);

  margin-bottom:
    clamp(80px, 10vw, 150px);
}

.service-soon-preparing__title {
  max-width:
    980px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}

.service-soon-preparing__copy {
  max-width:
    410px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.7;
}


/* =========================================================
   11. PREPARING GRID
   ========================================================= */

.service-soon-preparing__grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}

.service-soon-card {
  position:
    relative;

  min-height:
    360px;

  padding:
    30px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);

  overflow:
    hidden;

  transition:
    background var(--transition);
}

.service-soon-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    0;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      var(--abpe-blue),
      var(--abpe-cyan)
    );

  transition:
    width 500ms var(--ease-out);
}

.service-soon-card:hover {
  background:
    var(--bg-main);
}

.service-soon-card:hover::before {
  width:
    100%;
}

.service-soon-card__number {
  color:
    var(--text-soft);

  font-size:
    0.62rem;
}

.service-soon-card__body {
  position:
    absolute;

  left:
    30px;

  right:
    30px;

  bottom:
    30px;
}

.service-soon-card__title {
  color:
    var(--text-heading);

  font-size:
    clamp(2rem, 3.7vw, 4.4rem);

  font-weight:
    400;

  line-height:
    0.93;

  letter-spacing:
    -0.055em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.service-soon-card__copy {
  max-width:
    420px;

  margin-top:
    22px;

  color:
    var(--text-muted);

  font-size:
    0.8rem;

  line-height:
    1.7;
}

.service-soon-card:hover
.service-soon-card__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(8px);
}


/* =========================================================
   12. STATUS SECTION
   ========================================================= */

.service-soon-progress {
  position:
    relative;

  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.service-soon-progress::before {
  content:
    "";

  position:
    absolute;

  width:
    min(70vw, 1000px);

  aspect-ratio:
    1;

  right:
    -25%;

  top:
    -42%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.18),
      rgba(7, 92, 255, 0.08) 40%,
      transparent 72%
    );

  pointer-events:
    none;
}

.service-soon-progress__grid {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.34fr);

  align-items:
    end;

  gap:
    clamp(70px, 10vw, 170px);
}

.service-soon-progress__title {
  max-width:
    1100px;

  margin-top:
    30px;

  color:
    #ffffff;

  font-size:
    clamp(3.3rem, 6.7vw, 7.8rem);

  font-weight:
    400;

  line-height:
    0.87;

  letter-spacing:
    -0.068em;

  text-transform:
    uppercase;
}


/* =========================================================
   13. PROGRESS META
   ========================================================= */

.service-soon-progress__meta {
  border-top:
    1px solid
    rgba(255, 255, 255, 0.17);
}

.service-soon-progress__row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  min-height:
    58px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.17);
}

.service-soon-progress__label {
  color:
    rgba(255, 255, 255, 0.42);

  font-size:
    0.58rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}

.service-soon-progress__value {
  color:
    rgba(255, 255, 255, 0.84);

  font-size:
    0.68rem;

  text-align:
    right;
}

.service-soon-progress__value--soon {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--abpe-cyan);
}

.service-soon-progress__value--soon::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    currentColor;

  box-shadow:
    0 0 14px
    currentColor;
}


/* =========================================================
   14. CONTACT BRIDGE
   ========================================================= */

.service-soon-bridge {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-main);
}

.service-soon-bridge__top {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(70px, 9vw, 130px);
}

.service-soon-bridge__copy {
  max-width:
    470px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.72;
}


/* =========================================================
   15. CONTACT LINK
   ========================================================= */

.service-soon-bridge__link {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    40px;

  padding:
    clamp(36px, 5vw, 70px)
    0;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}

.service-soon-bridge__title {
  max-width:
    1200px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 6vw, 7rem);

  font-weight:
    400;

  line-height:
    0.88;

  letter-spacing:
    -0.06em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.service-soon-bridge__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(70px, 7vw, 105px);

  height:
    clamp(70px, 7vw, 105px);

  flex:
    0 0 auto;

  border:
    1px solid var(--line);

  border-radius:
    50%;

  color:
    var(--text-heading);

  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.service-soon-bridge__link:hover
.service-soon-bridge__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(12px);
}

.service-soon-bridge__link:hover
.service-soon-bridge__arrow {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  border-color:
    var(--abpe-blue);

  transform:
    rotate(45deg);
}


/* =========================================================
   16. NEXT SERVICE
   ========================================================= */

.service-soon-next {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-soft);
}

.service-soon-next__header {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  padding-bottom:
    24px;

  border-bottom:
    1px solid var(--line);
}

.service-soon-next__link {
  display:
    grid;

  grid-template-columns:
    80px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    30px;

  min-height:
    clamp(180px, 16vw, 260px);

  border-bottom:
    1px solid var(--line);
}

.service-soon-next__index {
  color:
    var(--text-soft);

  font-size:
    0.66rem;
}

.service-soon-next__title {
  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 6vw, 7rem);

  font-weight:
    400;

  line-height:
    0.88;

  letter-spacing:
    -0.06em;

  transition:
    color var(--transition),
    transform var(--transition);
}

.service-soon-next__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    72px;

  height:
    72px;

  border:
    1px solid var(--line);

  border-radius:
    50%;

  color:
    var(--text-heading);

  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.service-soon-next__link:hover
.service-soon-next__title {
  color:
    var(--abpe-blue);

  transform:
    translateX(14px);
}

.service-soon-next__link:hover
.service-soon-next__arrow {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  border-color:
    var(--abpe-blue);

  transform:
    rotate(45deg);
}


/* =========================================================
   17. FINAL CTA
   ========================================================= */

.service-soon-cta {
  position:
    relative;

  padding:
    clamp(110px, 13vw, 210px)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}

.service-soon-cta::before {
  content:
    "";

  position:
    absolute;

  width:
    75vw;

  height:
    75vw;

  right:
    -26%;

  top:
    -45%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.19),
      rgba(7, 92, 255, 0.08) 40%,
      transparent 72%
    );

  pointer-events:
    none;
}

.service-soon-cta__top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(90px, 11vw, 170px);
}

.service-soon-cta__copy {
  max-width:
    430px;

  color:
    rgba(255, 255, 255, 0.6);

  font-size:
    0.82rem;

  line-height:
    1.72;
}

.service-soon-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;
}

.service-soon-cta__title {
  max-width:
    1380px;

  color:
    #ffffff;

  font-size:
    clamp(4rem, 9vw, 10rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}

.service-soon-cta__action {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(95px, 10vw, 155px);

  height:
    clamp(95px, 10vw, 155px);

  flex:
    0 0 auto;

  border-radius:
    50%;

  color:
    var(--abpe-navy);

  background:
    var(--abpe-cyan);

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}

.service-soon-cta__action:hover {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  transform:
    rotate(45deg)
    scale(1.04);
}

.service-soon-cta__action svg {
  width:
    34%;

  height:
    34%;
}


/* =========================================================
   18. SERVICE-SPECIFIC ACCENT SUPPORT

   Optional class:
   .service-soon--consulting
   .service-soon--audit
   .service-soon--maintenance

   For now all still inherit ABPE branding.
   These hooks are useful later without
   creating three different CSS files.
   ========================================================= */

.service-soon--consulting {
  --service-accent:
    var(--abpe-blue);
}

.service-soon--audit {
  --service-accent:
    var(--abpe-cyan);
}

.service-soon--maintenance {
  --service-accent:
    var(--abpe-blue);
}


/* =========================================================
   19. ACCESSIBILITY
   ========================================================= */

.service-soon-bridge__link:focus-visible,
.service-soon-next__link:focus-visible,
.service-soon-cta__action:focus-visible {
  outline:
    2px solid var(--abpe-cyan);

  outline-offset:
    5px;
}