/* The three services as buttons, not a card grid with a heading above it. */
.services{padding-block:clamp(72px,8vw,120px)}
.services-head{max-width:62ch}
.services-head h2{font-family:'EB Garamond',Garamond,serif;font-weight:500;
  font-size:clamp(2rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.02em;margin:.6rem 0 0}
.services-head p{color:#4A4256;font-size:1.02rem;margin:.9rem 0 0}

.service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}

/* Each card carries one of the brand's three colours. Everything that reacts to
   the pointer reads from --accent, so a card is recoloured in one line rather
   than in six rules. */
/* Two tokens per card, and the difference matters. --accent is picked to look
   right as a SHAPE on white: a band, a border, a wash. --accent-ink is the same
   hue pulled down until it is legible as TEXT on white, because raw cyan and
   pink are not. Anything with letters in it uses --accent-ink. */
.service-card:nth-child(1){--accent:#7C3AED;--accent-ink:#5B21B6;--accent-soft:rgba(124,58,237,.10)}
.service-card:nth-child(2){--accent:#22D3EE;--accent-ink:#0E7490;--accent-soft:rgba(34,211,238,.12)}
.service-card:nth-child(3){--accent:#F472B6;--accent-ink:#BE185D;--accent-soft:rgba(244,114,182,.11)}

.service-card{
  position:relative;display:flex;flex-direction:column;
  padding:34px 30px 30px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid rgba(11,7,19,.08);border-radius:24px;
  box-shadow:0 12px 34px rgba(11,7,19,.05);
  transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s cubic-bezier(.22,1,.36,1),border-color .42s ease;
  overflow:hidden;isolation:isolate;
}

/* A band of the card's colour across the top. It is there at rest, so the card
   is never a plain white box, and it deepens on hover. */
.service-card::after{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--accent),rgba(255,255,255,.45));
  transition:height .42s cubic-bezier(.22,1,.36,1);
}
.service-card:hover::after{height:6px}

/* The wash rises from the bottom on hover rather than the whole card changing
   colour, so the type never loses contrast against it. */
.service-card::before{
  content:'';position:absolute;inset:auto 0 0 0;height:0;z-index:0;
  background:linear-gradient(180deg,transparent,var(--accent-soft));
  transition:height .5s cubic-bezier(.22,1,.36,1);
}
.service-card > *{position:relative;z-index:1}
.service-card:hover{transform:translateY(-8px);border-color:var(--accent);
  box-shadow:0 30px 68px rgba(11,7,19,.14)}
.service-card:hover::before{height:100%}
.service-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* The number sits behind the card as a watermark, big enough to give the card
   some architecture and faint enough that it never competes with the name.
   aria-hidden is not needed: it is a real "01" and reads correctly in order. */
.service-num{
  position:absolute;top:12px;right:22px;z-index:0;
  font-family:'EB Garamond',Garamond,serif;font-weight:500;
  /* Scales with the viewport. Fixed at 6.5rem its box was 104px tall, and once
     the cards narrowed around 1024px the body copy's first line started inside
     the bottom of it. */
  font-size:clamp(3.6rem,5.6vw,6.5rem);line-height:1;letter-spacing:-.04em;
  color:var(--accent-ink);opacity:.12;pointer-events:none;
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,1,.36,1);
}
.service-card:hover .service-num{opacity:.2;transform:translateY(-3px)}

.service-name{font-family:'EB Garamond',Garamond,serif;font-weight:500;
  font-size:clamp(2rem,3vw,2.7rem);line-height:1.02;letter-spacing:-.02em;margin-top:4px}

/* The label takes the card's colour, but darkened per card: the raw accents are
   picked to look right as SHAPES on white, and cyan especially is far too light
   to be legible as small uppercase text. */
.service-what{margin-top:9px;font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink)}

.service-body{margin-top:16px;color:#3B3448;font-size:.94rem;line-height:1.58;flex:1}

/* "Learn more" is hidden until hover, then slides up into place. */
.service-go{
  margin-top:20px;padding-top:16px;border-top:1px solid rgba(11,7,19,.09);
  display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:800;letter-spacing:.06em;color:#5B21B6;
  opacity:0;transform:translateY(8px);
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,1,.36,1);
}
.service-card:hover .service-go,
.service-card:focus-visible .service-go{opacity:1;transform:none}
.service-card:hover .service-go span{transform:translateX(4px)}
.service-go span{transition:transform .34s cubic-bezier(.22,1,.36,1)}

/* Touch devices have no hover, so the cue is simply always there. */
@media (hover:none){ .service-go{opacity:1;transform:none} }

@media (max-width:900px){
  .service-cards{grid-template-columns:1fr;gap:14px}
  .service-card{padding:26px 22px}
  .service-num{font-size:4.6rem;top:10px;right:16px}
}