/* ==========================================================================
   Services — "What shall we build for you?"
   Starts on --ice (continuing Trust), then a dark --ink sea with a wavy,
   brand-edged crest rises behind three service cards. The middle card
   spins in edge-first (a 360° Y flip) while the side cards climb into line.
   Motion lives in assets/js/sections/services.js; this file is the resting
   (final, reduced-motion) state.
   ========================================================================== */

.s-services {
  position: relative;
  overflow: hidden;
  padding: 155rem 0 330rem;
  background: var(--ice);
  color: var(--ink);
}
.services__inner { position: relative; }

/* ---------- Title ---------- */
.services__title {
  position: relative;               /* no z-index: on phones the spinning card passes over it, like the reference */
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 100rem;
  line-height: .92;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}
.services__title .reveal-line { padding-top: .02em; }
/* keep the wide glyph from inflating its line box (it's scaled up from the baseline anyway) */
.services__title .wide { line-height: .7; }

/* ---------- Stage: the sea + the cards ---------- */
.services__stage { position: relative; margin-top: 500rem; }

/* The dark sea. It spans the full section width (the container gutter is
   cancelled out) and runs well past the bottom so it can rise without
   exposing the light background. */
.services__sea {
  position: absolute;
  z-index: 0;
  top: -96rem;
  bottom: -900rem;
  left: calc(-1 * var(--gutter));
  right: calc(-1 * var(--gutter));
  background: var(--ink);
  pointer-events: none;
}
.services__wave {
  position: absolute;
  left: 0;
  bottom: calc(100% - 2rem);      /* 2rem overlap: no hairline between cap and body */
  width: 100%;
  height: 180rem;
  overflow: visible;
}
.services__wave--main path { fill: var(--ink); }
/* a thin cyan→blue crest peeking over the wave — the logo's gradient edge */
.services__wave--edge { bottom: calc(100% + 3rem); }

/* ---------- Card list ---------- */
.services__list {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 45rem;
  perspective: 1600px;
}
.services__item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
}
/* the flipping card keeps its faces in 3D */
.services__item[data-svc-flip] { transform-style: preserve-3d; }

.services__card {
  position: relative;
  flex: 1;
  display: flex;
  border-radius: 37rem;
  transform-style: preserve-3d;
}

.services__face { border-radius: 37rem; }
.services__face--front {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 78rem 50rem;
  text-align: center;
  background: var(--svc-bg);
  color: var(--svc-fg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: box-shadow .6s var(--ease-out);
}
/* soft light that follows the pointer on hover */
.services__face--front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420rem circle at var(--svc-mx, 50%) var(--svc-my, 30%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transition: opacity .45s ease;
}
/* blank back of the flipping card (seen while it's edge-on / turned away) */
.services__face--back {
  position: absolute;
  inset: 0;
  background: var(--svc-bg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* per-card colours */
.services__item--cyan {
  --svc-bg: var(--cyan); --svc-fg: var(--ink); --svc-rose: var(--ink);
  --svc-btn-bg: var(--ink); --svc-btn-fg: var(--cyan);
  --svc-bubble: var(--red); --svc-bubble-fg: var(--white);
}
.services__item--red {
  --svc-bg: var(--red); --svc-fg: var(--white); --svc-rose: var(--white);
  --svc-btn-bg: var(--white); --svc-btn-fg: var(--red);
  --svc-bubble: var(--indigo); --svc-bubble-fg: var(--white);
}
.services__item--indigo {
  --svc-bg: var(--indigo); --svc-fg: var(--white); --svc-rose: var(--ice);
  --svc-btn-bg: var(--ice); --svc-btn-fg: var(--indigo);
  --svc-bubble: var(--cyan); --svc-bubble-fg: var(--ink);
}

/* ---------- Card content ---------- */
.services__card-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 62rem;
  line-height: .95;
  letter-spacing: -.02em;
}
.services__card-text {
  max-width: 440rem;
  margin-top: 32rem;
  font-size: 19rem;
  font-weight: 500;
  line-height: 1.25;
}
.services__rose {
  width: 256rem;
  height: 256rem;
  margin-top: 42rem;
  flex: none;
  color: var(--svc-rose);
}
.services__rose-svg { width: 100%; height: 100%; overflow: visible; }

.services__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 43rem;
  padding: 20rem 32rem;
  border-radius: 90rem;
  background: var(--svc-btn-bg);
  color: var(--svc-btn-fg);
  font-size: 17rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: lowercase;
  white-space: nowrap;
  --bubble: var(--svc-bubble);
  --bubble-fg: var(--svc-bubble-fg);
  transition: color .35s ease, transform .5s var(--ease-back);
}
.services__cta:hover { transform: scale(1.05); }
.services__cta:focus-visible { outline-color: var(--svc-fg); }

/* hover (fine pointers — class set by services.js) */
.services__card.is-hover .services__face--front { box-shadow: 0 50rem 110rem -40rem var(--svc-bg); }
.services__card.is-hover .services__face--front::after { opacity: 1; }

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .s-services { padding: 180rem 0 140rem; }
  .services__title { font-size: 72rem; }
  .services__stage { margin-top: 150rem; }
  .services__sea { top: 20rem; }
  .services__wave { height: 110rem; }
  .services__wave--edge { bottom: calc(100% + 4rem); }
  .services__list { flex-direction: column; align-items: center; gap: 20rem; perspective: none; }
  .services__item { flex: none; width: 458rem; }
  .services__item--red { order: -1; }
  .services__face--front { padding: 50rem 40rem 60rem; }
  .services__card-title { font-size: 44rem; }
  .services__card-text { max-width: 380rem; margin-top: 18rem; font-size: 16rem; }
  .services__rose { width: 220rem; height: 220rem; margin-top: 30rem; }
  .services__cta { margin-top: 36rem; padding: 18rem 30rem; font-size: 16rem; }
}

/* ---------- Phone ---------- */
@media (max-width: 743px) {
  .s-services { padding: 84rem 0 110rem; }
  .services__title { font-size: 46rem; }
  .services__stage { margin-top: 44rem; }
  .services__sea { top: 120rem; }
  .services__wave { height: 56rem; }
  .services__wave--edge { bottom: calc(100% + 3rem); }
  .services__list { gap: 16rem; }
  .services__item { width: 358rem; }
  .services__card, .services__face { border-radius: 30rem; }
  .services__face--front { padding: 46rem 28rem 38rem; }
  .services__card-title { font-size: 30rem; }
  .services__card-text { max-width: 300rem; margin-top: 14rem; font-size: 13rem; line-height: 1.4; }
  .services__rose { width: 170rem; height: 170rem; margin-top: 24rem; }
  .services__cta { margin-top: 28rem; padding: 13rem 24rem; font-size: 13rem; }
}