/* icons.css - the icon system and the motion that goes with it.
   Every animation here uses transform and opacity only, so nothing
   triggers layout, and all of it is switched off under
   prefers-reduced-motion. */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Line art inherits the surrounding text colour and sits on the text baseline. */
.icon {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Brand marks are solid shapes, not line art, so they fill instead of stroke. */
.icon .icon-solid {
  fill: currentColor;
  stroke: none;
}

/* Circular badge, the pattern used above step and card titles. */
.iconbadge {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 0 20px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: var(--green-soft);
  color: var(--green-dark);
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
}

.iconbadge .icon {
  width: 34px;
  height: 34px;
  stroke-width: 1.6;
}

.iconbadge--blue {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

.iconbadge--sm {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
}

.iconbadge--sm .icon { width: 24px; height: 24px; }

/* Hover: the badge fills in and lifts a little. */
.step:hover .iconbadge,
.card:hover .iconbadge,
.feature:hover .iconbadge,
.contactcard:hover .iconbadge,
.tile:hover .iconbadge {
  transform: translateY(-4px) scale(1.06);
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}

.contactcard:hover .iconbadge--blue,
.card:hover .iconbadge--blue {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

/* Step cards pair the icon with its number on one row, so the badge lines up
   with the title and the copy underneath instead of floating mid card. */
.step__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.step__head .iconbadge {
  width: 64px;
  height: 64px;
  margin: 0;
}

.step__head .iconbadge .icon { width: 29px; height: 29px; }

.step__head .step__num {
  width: 36px;
  height: 36px;
  margin: 0;
  font-size: var(--fs-body);
  border-radius: 10px;
}

/* Inline icons in lists and links. */
.icon--inline {
  width: 1.05em;
  height: 1.05em;
  margin-right: 8px;
  vertical-align: -0.16em;
  color: var(--green-dark);
}

/* ------------------------------------------------------------------
   Heading accent
   A hand drawn underline under the first words of a section heading,
   drawn in CSS rather than loaded as an image.
------------------------------------------------------------------- */
.heading-block h2,
.heading-block h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.heading-block h2::after,
.heading-block h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 76px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
  transform-origin: center;
  transition: transform .5s var(--ease) .12s;

  /* Drawn by default. If JavaScript never runs, the accent is simply
     there, exactly like every other piece of content on the page. */
  transform: translateX(-50%) scaleX(1);
}

/* Only once JS has confirmed support does it start hidden and animate in. */
.heading-block.is-armed h2::after,
.heading-block.is-armed h3::after { transform: translateX(-50%) scaleX(0); }

.heading-block.is-in h2::after,
.heading-block.is-in h3::after { transform: translateX(-50%) scaleX(1); }

/* Headings outside a centred block keep the accent on the left. */
.split__text h2,
.split__text h3 {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

.split__text h2::after,
.split__text h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
  transform-origin: left;
  transform: scaleX(1);
  transition: transform .5s var(--ease) .12s;
}

.split__text.is-armed h2::after,
.split__text.is-armed h3::after { transform: scaleX(0); }

.split__text.is-in h2::after,
.split__text.is-in h3::after { transform: scaleX(1); }

/* ------------------------------------------------------------------
   Motion
------------------------------------------------------------------- */

/* Cards in a grid come in one after another rather than all at once. */
.steps .step:nth-child(2),
.cards .card:nth-child(2),
.featurerow .feature:nth-child(2),
.contactgrid .contactcard:nth-child(2) { transition-delay: .08s; }

.steps .step:nth-child(3),
.cards .card:nth-child(3),
.featurerow .feature:nth-child(3),
.contactgrid .contactcard:nth-child(3) { transition-delay: .16s; }

.steps .step:nth-child(4),
.cards .card:nth-child(4),
.contactgrid .contactcard:nth-child(4) { transition-delay: .24s; }

/* The hot deal badge breathes gently so the offer catches the eye. */
.dealcard__badge {
  animation: badge-pulse 3.4s var(--ease) 4;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* Arrow nudge on the primary call to action. */
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .iconbadge,
  .btn .icon,
  .heading-block h2::after,
  .heading-block h3::after,
  .split__text h2::after,
  .split__text h3::after { transition: none; }

  .heading-block h2::after,
  .heading-block h3::after { transform: translateX(-50%) scaleX(1); }

  .split__text h2::after,
  .split__text h3::after { transform: scaleX(1); }

  .dealcard__badge { animation: none; }

  .step:hover .iconbadge,
  .card:hover .iconbadge,
  .feature:hover .iconbadge,
  .contactcard:hover .iconbadge,
  .tile:hover .iconbadge { transform: none; }
}

@media (max-width: 780px) {
  .iconbadge { width: 66px; height: 66px; margin-bottom: 16px; }
  .iconbadge .icon { width: 29px; height: 29px; }
}


@media (max-width: 768px) {
  /* Re-center the heading underline to match the centered heading on mobile */
  .split__text h2::after,
  .split__text h3::after {
    left: 50%;
    transform-origin: center;
    transform: translateX(-50%) scaleX(1);
  }

  .split__text.is-armed h2::after,
  .split__text.is-armed h3::after {
    transform: translateX(-50%) scaleX(0);
  }

  .split__text.is-in h2::after,
  .split__text.is-in h3::after {
    transform: translateX(-50%) scaleX(1);
  }
}