/* ============================================================
   /services/: the hub

   The home's rows without their machinery: no rail, no travelling panda,
   no bespoke space art per service. The other half of each row is the
   mega menu's artwork, so the menu and this page show one picture of a
   service rather than two.

   ============================================================ */

/* ---------- hero ----------
   Copy left like every other hero on the site, and the right half given
   to the artwork: the planet's limb anchored to the bottom corner, the
   panda floating over it. */
.ap-svcs-hero{
  position:relative; overflow:clip;
  display:flex; align-items:center;
  min-height:min(88vh,880px);
  padding:clamp(112px,15vh,170px) 0 clamp(50px,8vh,90px);
}
.ap-svcs-hero .ap-shell{position:relative; z-index:2}
.ap-svcs-hero .ap-display{
  font-size:clamp(36px,6vw,86px); line-height:.97; margin-top:16px; max-width:13ch;
}
.ap-svcs-hero .ap-lead{
  /* .ap-lead centres itself with margin:auto, which is right inside a
     centred band and wrong under a left-aligned headline */
  margin:22px 0 0; max-width:50ch;
}
.ap-svcs-hero .ap-buttons{
  /* .ap-buttons centres its row for the centred CTA bands; under a
     left-aligned headline it has to start where the headline starts */
  margin-top:32px; justify-content:flex-start;
}

.ap-svcs-hero-art{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* The fade has to sit on the LAYER, not on the planet: the planet runs
     past the section and the section clips it, so a mask measured in the
     image's own height never reaches the edge the eye sees. */
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 84%,transparent 99%);
}
/* the planet runs off the bottom right corner, as a horizon does */
.ap-svcs-hero-planet{
  position:absolute; right:-6%; bottom:-32%;
  width:min(62vw,1100px); height:auto; opacity:.92;
  /* the source PNG has a hard edge on the left where the planet was
     cropped out of its render: it dissolves instead */
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 30%);
  mask-image:linear-gradient(90deg,transparent 2%,#000 30%);
}
/* and the panda flies over it, out of the corner the copy does not use */
.ap-svcs-hero-panda{
  position:absolute; right:clamp(-20px,2vw,90px); top:50%;
  width:clamp(300px,34vw,580px); height:auto;
  translate:0 -50%;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));
  animation:apSvcsFloat 7.5s ease-in-out infinite;
}
/* up and down, and nothing else: the drift keyframes the rest of the site
   uses move sideways too, which reads as a wobble at this size */
@keyframes apSvcsFloat{
  0%,100%{translate:0 calc(-50% - 10px)}
  50%{translate:0 calc(-50% + 14px)}
}
@media (max-width:1100px){
  .ap-svcs-hero{min-height:0; padding-bottom:clamp(280px,42vw,420px)}
  .ap-svcs-hero .ap-display,.ap-svcs-hero .ap-lead{max-width:none}
  .ap-svcs-hero-panda{
    top:auto; bottom:clamp(20px,6vw,70px); right:50%; translate:50% 0;
    width:clamp(230px,44vw,340px);
    animation-name:apSvcsFloatFoot;
  }
  @keyframes apSvcsFloatFoot{
    0%,100%{translate:50% -8px}
    50%{translate:50% 10px}
  }
  .ap-svcs-hero-planet{right:-20%; bottom:-14%; width:min(120vw,900px)}
}
@media (prefers-reduced-motion:reduce){ .ap-svcs-hero-panda{animation:none} }

/* ---------- the intro to the rows ----------
   The hero sells the studio; this one opens the list. Left aligned like
   the hero above it, so the page keeps one edge all the way down. */
.ap-svcs-intro{padding:clamp(50px,9vh,110px) 0 clamp(10px,2vh,24px)}
.ap-svcs-intro .ap-display{
  font-size:clamp(30px,4.4vw,64px); line-height:1; margin-top:14px; max-width:15ch;
}
.ap-svcs-intro .ap-lead{margin:20px 0 0; max-width:58ch}

/* ---------- the rows ---------- */
.ap-svcs-rows{padding:clamp(20px,4vh,48px) 0 clamp(40px,7vh,90px)}
.ap-svcs-row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px);
  align-items:center; padding:clamp(40px,7vh,90px) 0; position:relative;
}
/* the alternation, and nothing else: the home needs order overrides for a
   rail that does not exist here */
.ap-svcs-row[data-dir="ltr"] .ap-svcs-copy{order:2}
.ap-svcs-row[data-dir="ltr"] .ap-svcs-art{order:1}
/* a hairline between rows, not around them */
.ap-svcs-row + .ap-svcs-row{border-top:1px solid var(--line-soft, rgba(238,240,246,.07))}

.ap-svcs-copy .ap-h2{font-size:clamp(34px,3.9vw,66px)}
.ap-svcs-copy .ap-text{font-size:17.5px; margin-bottom:26px}
.ap-svcs-copy .ap-tags{margin-bottom:32px}

.ap-svcs-art{
  display:block; position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:18px; background:#07080c;
  aspect-ratio:6/7; max-height:min(74vh,620px); margin-inline:auto; width:100%;
  transition:border-color .35s ease, translate .35s ease;
}
.ap-svcs-art:hover{border-color:rgba(255,90,20,.55); translate:0 -6px}
.ap-svcs-art img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transition:scale .7s cubic-bezier(.2,.7,.3,1);
}
.ap-svcs-art:hover img{scale:1.04}
/* the artwork was drawn for a dark menu panel, so it keeps its own foot
   scrim here and does not fight the page it sits on */
.ap-svcs-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(3,3,5,0) 52%,rgba(3,3,5,.45) 100%);
}


/* ---------- row typography ----------
   The home owns these classes and this page does not load home.css, which
   carries a rail and a panda it has no use for. They are restated here,
   scoped to the rows, rather than pulling in a stylesheet for five rules. */
.ap-svcs-rows .ap-num{
  font-family:'Space Mono',monospace; font-size:14px; letter-spacing:.28em;
  color:var(--orange); margin-bottom:24px; display:flex; align-items:center; gap:16px;
}
/* the line runs orange into nothing, 2px tall */
.ap-svcs-rows .ap-num::after{content:''; flex:1; height:2px; max-width:220px;
  background:linear-gradient(90deg,var(--orange),rgba(255,90,20,0))}
.ap-svcs-rows .ap-h2{
  font-family:'Anton',sans-serif; font-weight:400; margin:0 0 24px;
  font-size:clamp(38px,4.4vw,80px); line-height:1.03; letter-spacing:.006em;
}
.ap-svcs-rows .ap-text{font-size:19px; line-height:1.66; color:var(--muted); text-wrap:pretty; margin:0 0 30px}
/* tag list: plain "+ label" rows under a hairline, no pills */
.ap-svcs-rows .ap-tags{
  display:flex; flex-wrap:wrap; column-gap:44px; row-gap:16px;
  margin-bottom:38px; padding-top:28px;
  border-top:1px solid var(--line);
}
.ap-svcs-rows .ap-tag{
  font-family:'Space Mono',monospace; font-size:13.5px; letter-spacing:.06em;
  color:rgba(238,240,246,.82);
  display:inline-flex; align-items:center; gap:12px;
  transition:color .25s;
}
.ap-svcs-rows .ap-tag::before{content:'+'; color:var(--orange); font-size:15px; font-weight:700}
.ap-svcs-rows .ap-tag:hover{border-color:rgba(255,90,20,.6); color:var(--paper); transform:translateY(-2px)}

@media (max-width:900px){
  .ap-svcs-row{grid-template-columns:minmax(0,1fr); gap:28px; padding-block:clamp(34px,6vh,60px)}
  .ap-svcs-row[data-dir="ltr"] .ap-svcs-copy,
  .ap-svcs-row[data-dir="ltr"] .ap-svcs-art{order:initial}
  .ap-svcs-art{aspect-ratio:4/3; max-height:none}
}