/* ===== G Mining – Services page (standalone, no dependencies) ===== */

/* ---- Tokens ---- */
:root {
  --base-px: 18;
  --grid-gutter: 1.33rem;
  --grid-margin: 4.2rem;
  --color-text: #172624;
  --color-bg: #f7f6f1;
  --color-green: #566955;
  --color-gold: #d19a1d;
  --section-md: 8rem;
  --section-xl: 10.5rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width:1199px) {
  :root {
    --base-px: 16;
    --grid-margin: 3.25rem;
    --section-md: 6rem;
    --section-xl: 9.5rem
  }
}

@media (max-width:749px) {
  :root {
    --base-px: 14;
    --grid-gutter: 1rem;
    --grid-margin: 1rem;
    --section-md: 5rem;
    --section-xl: 8rem
  }
}

/* ---- Base (replaces the JS-driven root font-size) ---- */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  font-size: clamp(12px, .9375vw, 18px);
  -webkit-font-smoothing: antialiased
}

@media (max-width:1199px) {
  html {
    font-size: 16px
  }
}

@media (max-width:749px) {
  html {
    font-size: 14px
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Noto Sans", sans-serif;
  line-height: 1.4
}

h1,
h2,
p,
ul {
  margin: 0;
  padding: 0
}

ul {
  list-style: none
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer
}

img {
  max-width: 100%;
  height: auto;
  display: block
}

/* ---- Layout ---- */
.gm-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0 var(--grid-margin);
  margin: 0 auto
}

.gm-section {
  position: relative;
  overflow: hidden
}

/* ---- Typography ---- */
.gm-h1,
.gm-h4 {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  text-transform: uppercase
}

.gm-h1 {
  font-size: calc(var(--h1-size, 208) / var(--base-px) * 1rem);
  line-height: 1.05
}

.gm-h4 {
  font-size: calc(56 / var(--base-px) * 1rem);
  line-height: 1.2
}

@media (max-width:1199px) {
  .gm-h1 {
    --h1-size: 138
  }

  .gm-h4 {
    font-size: calc(38 / var(--base-px) * 1rem)
  }
}

@media (max-width:749px) {
  .gm-h1 {
    --h1-size: 78
  }

  .gm-h4 {
    font-size: calc(30 / var(--base-px) * 1rem)
  }
}

.gm-lead {
  font-size: calc(32 / var(--base-px) * 1rem);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 1.7rem
}

.gm-body {
  font-size: calc(24 / var(--base-px) * 1rem)
}

@media (max-width:1199px) {
  .gm-lead {
    font-size: calc(24 / var(--base-px) * 1rem)
  }

  .gm-body {
    font-size: calc(18 / var(--base-px) * 1rem)
  }
}

/* ---- Intro ---- */
.gm-intro {
  padding: var(--section-xl) 0 var(--section-md)
}

.gm-intro__shape {
  display: block !important;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  opacity: .1;
  background: url(bg-shape.svg) no-repeat top right / 100% auto;
  -webkit-mask-image: linear-gradient(#000 65%, transparent);
  mask-image: linear-gradient(#000 65%, transparent)
}

@media (max-width:1199px) {
  .gm-intro__shape {
    width: 60%
  }
}

@media (max-width:749px) {
  .gm-intro__shape {
    width: 100%;
    right: auto;
    left: 0
  }
}

.gm-intro__text .gm-lead {
  max-width: 50%
}

@media (max-width:1199px) {
  .gm-intro__text .gm-lead {
    max-width: 100%
  }
}

/* ---- Services list ---- */
.gm-services {
  padding: 0 0 var(--section-md)
}

.gm-service {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3.3rem 0
}

.gm-service:first-child {
  padding-top: 0
}

.gm-service:last-child {
  padding-bottom: 0
}

.gm-service:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(23, 38, 36, .2);
  transform-origin: left
}

.gm-service__title {
  display: flex;
  align-items: center;
  width: calc(5 / 12 * 100%)
}

.gm-service__icon {
  flex: none;
  width: 4rem;
  height: 4rem;
  margin-right: 2rem
}

.gm-service__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* turns the black PNG icons gold (#d19a1d) */
  filter: brightness(0) saturate(100%) invert(77%) sepia(58%) saturate(2311%) hue-rotate(352deg) brightness(88%) contrast(83%)
}

.gm-service__name {
  text-align: left;
  transition: color .25s var(--ease)
}

.gm-service__name:hover {
  color: var(--color-gold)
}

.gm-service__features {
  width: calc(6 / 12 * 100%)
}

.gm-service__list li {
  position: relative;
  padding-left: 0;
  font-size: calc(24 / var(--base-px) * 1rem);
  line-height: 1.4
}

.gm-service__list li:not(:last-child) {
  margin-bottom: .35em
}

.gm-service__list {
  padding-left: 1.7rem
}

.gm-service__list li::before {
  content: "■";
  position: absolute;
  left: -1.7rem;
  font-size: .9em;
  line-height: 1.2em;
  color: var(--color-green)
}

/* ---- Arrow link ---- */
.gm-link {
  display: inline-block;
  position: relative;
  padding-left: 1.5em;
  margin-top: 3rem;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: calc(24 / var(--base-px) * 1rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  transition: color .25s var(--ease)
}

.gm-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: .9em;
  height: .9em;
  transform: translate(0, -50%);
  transition: transform .25s var(--ease);
  background: var(--color-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h14M12 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat
}

.gm-link:hover {
  color: var(--color-gold)
}

.gm-link:hover::before {
  transform: translate(.5em, -50%)
}

@media (max-width:1199px) {
  .gm-link {
    font-size: calc(18 / var(--base-px) * 1rem);
    margin-top: 2rem
  }
}

/* ---- Responsive ---- */
@media (max-width:1199px) {

  .gm-service__title,
  .gm-service__features {
    width: calc(4 / 8 * 100%)
  }

  .gm-service__title {
    align-items: flex-start
  }

  .gm-service__icon {
    width: 3rem;
    height: 3rem;
    margin-right: 1.5rem
  }
}

@media (max-width:749px) {
  .gm-service {
    display: block
  }

  .gm-service__title {
    display: block;
    width: 100%
  }

  .gm-service__features {
    width: 100%;
    margin-top: 2.4rem
  }

  .gm-service__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 1.7rem
  }

  .gm-service__name {
    font-size: calc(40 / var(--base-px) * 1rem)
  }
}

/* ===== Animations – ported from the original GSAP timeline =====
   (values read from the theme's JS: durations, offsets, staggers)  */
:root {
  --ease-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-expo: cubic-bezier(.16, .84, .3, 1)
}

/* Page load: body fades in (0.6s, power2.in) */
.js body {
  animation: gm-page .6s cubic-bezier(.55, .085, .68, .53) both
}

@keyframes gm-page {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* Intro: background shape drops in from -10rem, 1.1s, starts ~0.4s after the page */
.js .gm-intro__shape {
  animation: gm-shape 1.1s var(--ease-expo) 1s both
}

@keyframes gm-shape {
  from {
    opacity: 0;
    transform: translateY(-10rem)
  }

  to {
    opacity: .1;
    transform: none
  }
}

/* Services: list items + link slide in from -5rem, 0.8s, stagger 0.09s,
   triggered when the block reaches 90% of the viewport */
.js .gm-service__list li,
.js .gm-service .gm-link {
  opacity: 0;
  transform: translateX(-5rem);
  transition: opacity .8s var(--ease-quart), transform .8s var(--ease-quart), color .25s var(--ease);
  transition-delay: calc(var(--i) * .09s)
}

.js .gm-service.is-visible .gm-service__list li,
.js .gm-service.is-visible .gm-link {
  opacity: 1;
  transform: none
}

.js .gm-service .gm-link {
  transition-delay: calc(var(--i) * .09s), calc(var(--i) * .09s), 0s
}

/* after the reveal, hover should react instantly */
.js .gm-service.is-done .gm-service__list li,
.js .gm-service.is-done .gm-link {
  transition-delay: 0s
}

@media (prefers-reduced-motion:reduce) {

  .js body,
  .js .gm-intro__shape {
    animation: none
  }

  .js .gm-intro__shape {
    opacity: .1
  }

  .js .gm-service__list li,
  .js .gm-service .gm-link {
    opacity: 1;
    transform: none;
    transition: none
  }
}