/* ==========================================================================
   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 {
  --svc-skew-main: -1.557deg;     /* see the swell keyframes below */
  --svc-skew-edge: -1.981deg;
  position: absolute;
  left: 0;
  bottom: calc(100% - 2rem);      /* 2rem overlap: no hairline between cap and body */
  width: 100%;
  height: 180rem;
  overflow: visible;
  transform-origin: 0 0;
}
.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); }

/* Idle swell. The crest used to morph its path (attr d, re-laid-out and
   re-painted every frame); the same heave is now a composited transform:
   the least-squares affine fit of the second key-shape onto the first
   (main: x' = 1.0725x − 56, y' = .996y − .02416x' + 26.73 in viewBox units;
   edge: x' = 1.12x − 100, y' = 1.1593y − .03074x' + 19.51, weighted to keep
   the rim right at the screen edge — within ~4 / 9 units of the old shapes). translate % = tx/2400, (k·tx + ty)/200;
   skewY = atan(k · 12 · height/width), so it is re-set per breakpoint.
   Runs only while the section is near the viewport (.is-inview). */
.services__wave--main { animation: svc-swell-main 4.6s cubic-bezier(.37, 0, .63, 1) infinite alternate paused; }
.services__wave--edge { animation: svc-swell-edge 3.7s cubic-bezier(.37, 0, .63, 1) -1.4s infinite alternate paused; }
.s-services.is-inview .services__wave { animation-play-state: running; }
html.reduced-motion .services__wave { animation: none; }
@keyframes svc-swell-main {
  from { transform: translate(0, 0) skewY(0deg) scale(1, 1); }
  to { transform: translate(-2.333%, 14.04%) skewY(var(--svc-skew-main)) scale(1.0725, .996); }
}
@keyframes svc-swell-edge {
  from { transform: translate(0, 0) skewY(0deg) scale(1, 1); }
  to { transform: translate(-4.167%, 11.292%) skewY(var(--svc-skew-edge)) scale(1.12, 1.1593); }
}

/* ---------- 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);
}
/* the idle spin is a Web Animation (services.js) — it turns on the compositor */
.services__rose-svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }

.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; --svc-skew-main: -2.454deg; --svc-skew-edge: -3.122deg; }
  .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; --svc-skew-main: -2.384deg; --svc-skew-edge: -3.032deg; }
  .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; }
}