/* ===========================================================================
   SERVICES — ShiftCard (namespaced .shc* to avoid the legacy .svc rules in
   pages.css). A native reimplementation of the framer-motion "shift card".
   Rest (desktop): a clean white panel, mono eyebrow + title in flow at the
   top, the image filling everything below them. On hover / focus / tap the
   image shrinks and flies to the bottom-right corner (landing in a reserved
   slot beside the CTA), a hairline draws under the header, and the body
   rises in a staggered cascade: a short lead, four mono-labeled scope rows,
   a floor rule, the CTA. All text is in normal flow, so no width can ever
   make it overlap the image. Below 50em the card is fully static and
   stacked (header → image → copy → CTA) — nothing hidden behind a tap.
   Page language: paper, ink, hairlines, grotesque + mono.
   Reveal triggers (desktop): .shc:hover, .shc:focus-within, .shc.shc--open.
   =========================================================================== */

.pages.blocks .sec--services {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint */
}

.pages.blocks .sec--services .shc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: clamp(2rem, 5vw, 3.4rem);
}
@media (min-width: 50em) {
  .pages.blocks .sec--services .shc-grid { grid-template-columns: 1fr 1fr; }
}

/* the card */
.pages.blocks .sec--services .shc {
  --pad: clamp(1.4rem, 2.5vw, 2rem);
  --head-h: 4rem;                             /* two large uppercase title lines */
  --rule-top-h: 1.6rem;                       /* top hairline + its margin */
  --chip-w: clamp(116px, 11vw, 158px);   /* viewport-based so the flying image
                                            and its floor slot always match */
  --chip-h: clamp(78px, 6.8vw, 96px);
  --rest-top: calc(var(--pad) + var(--rule-top-h) + var(--head-h)); /* image top at rest */
  position: relative;
  display: flex;
  outline: none;
}

.pages.blocks .sec--services .shc__frame {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--pad);
  /* white panel that pops off the warm paper, carrying a whisper of the page
     grain (a white veil mutes the noise) so it still feels part of the surface
     without going as grey as the page */
  background-color: #ffffff;
  background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), url(../img/noise.png);
  background-size: auto, 150px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: 0 18px 40px -30px rgba(56, 57, 61, 0.45);
  color: var(--ink);
  transition: transform 0.65s var(--ease), box-shadow 0.65s var(--ease);
  will-change: transform;
}

/* Header — eyebrow + title, in flow, full width. Fixed min-height on
   desktop so both cards' image tops align and the rest-state image can
   never reach the text. */
.pages.blocks .sec--services .shc__eyebrow {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pages.blocks .sec--services .shc__title {
  margin: 0;
  /* sized so the longest line ("SOCIAL MEDIA MANAGEMENT") stays on one line */
  font-size: clamp(1.15rem, 0.75rem + 1.15vw, 1.55rem); /* larger, bolder */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--ink);
}
.pages.blocks .sec--services .shc__title span { display: block; } /* one phrase per line */

/* Hairlines */
.pages.blocks .sec--services .shc__rule {
  display: block; height: 1px; background: var(--hair);
  transform-origin: left center;
  flex: none;
}
.pages.blocks .sec--services .shc__rule--head { margin-bottom: clamp(0.9rem, 1.6vw, 1.3rem); }
/* a fainter hairline sitting above the title, separating it from the top */
.pages.blocks .sec--services .shc__rule--top {
  background: rgba(56, 57, 61, 0.08);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Body — lead + scope rows + floor (rule, CTA, chip slot) */
.pages.blocks .sec--services .shc__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pages.blocks .sec--services .shc__lead {
  margin: 0 0 clamp(1rem, 1.8vw, 1.4rem);
  font-size: var(--fs-body); line-height: var(--lead-read);
  color: var(--ink-body);
  max-width: 58ch;
}
.pages.blocks .sec--services .shc__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.pages.blocks .sec--services .shc__item {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
}
.pages.blocks .sec--services .shc__item + .shc__item { border-top: 1px solid var(--hair); }
.pages.blocks .sec--services .shc__item-k {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.2em;                          /* optically align with body text */
}
.pages.blocks .sec--services .shc__item-t {
  font-size: var(--fs-body); line-height: var(--lead-read);
  color: var(--ink-body);
}

.pages.blocks .sec--services .shc__rule--floor { margin-top: auto; }

.pages.blocks .sec--services .shc__floor {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pad);
  margin-top: clamp(0.9rem, 1.6vw, 1.2rem);
}
.pages.blocks .sec--services .shc__cta {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.85em 1.4em;
  border: 1px solid var(--ink); border-radius: 100px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.pages.blocks .sec--services .shc__cta:hover,
.pages.blocks .sec--services .shc__cta:focus-visible {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.pages.blocks .sec--services .shc__cta-arrow { transition: transform 0.3s var(--ease); }
.pages.blocks .sec--services .shc__cta:hover .shc__cta-arrow,
.pages.blocks .sec--services .shc__cta:focus-visible .shc__cta-arrow { transform: translateX(3px); }

/* the empty slot the image chip lands on (desktop only) */
.pages.blocks .sec--services .shc__slot {
  display: none;
  flex: none;
  width: var(--chip-w); height: var(--chip-h);
}

/* Image */
.pages.blocks .sec--services .shc__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.02);
}
/* Spinning disc: a transparent-cut CD that sits on the card's own background
   (no wash / no grade — natural colour) and turns very slowly, forever. contain
   keeps it perfectly round through the rest -> chip morph; the padding gives it
   breathing room so it never touches the frame edges. */
.pages.blocks .sec--services .shc__thumb--disc { display: grid; place-items: center; }
.pages.blocks .sec--services .shc__disc {
  width: 86%;
  height: 86%;
  object-fit: contain; /* keeps the disc round and fitted in both rest + chip */
  filter: drop-shadow(0 10px 22px rgba(56, 57, 61, 0.16));
  animation: shcSpin 26s linear infinite;
  transition: width 0.7s var(--ease), height 0.7s var(--ease), filter 0.7s var(--ease);
}
@keyframes shcSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pages.blocks .sec--services .shc__disc { animation: none; }
}

/* ---------------------------------------------------------------------------
   MOBILE / NARROW (<50em): static, stacked card — header, image, then the copy
   CONDENSED behind a drop-down: a mono "( what's included )" bar with a
   chevron (injected by js/skew-fx.js). Tapping glides the body open with a
   measured max-height (set inline by the JS) so the motion is exact, not
   clipped or floaty. Desktop (≥50em) never sees the bar or the collapse.
   --------------------------------------------------------------------------- */
.pages.blocks .sec--services .shc__thumb {
  overflow: hidden;
  border-radius: 10px;
  margin: 0.4rem 0 clamp(1rem, 2.5vw, 1.4rem);
  aspect-ratio: 4 / 3;
}
@media (max-width: 49.99em) {
  .pages.blocks .sec--services .shc__drop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 0.15rem;
    background: none;
    border: 0;
    border-top: 1px solid var(--hair);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pages.blocks .sec--services .shc__drop-chev {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--hair);
    border-radius: 50%;
    flex: none;
  }
  .pages.blocks .sec--services .shc__drop-chev svg {
    width: 46%;
    height: 46%;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* collapsed body: measured max-height animated by the JS */
  .pages.blocks .sec--services .shc__body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .pages.blocks .sec--services .shc.shc--drop-open .shc__body { opacity: 1; }
  .pages.blocks .sec--services .shc.shc--drop-open .shc__drop { color: var(--ink); }
  .pages.blocks .sec--services .shc.shc--drop-open .shc__drop-chev { border-color: var(--ink); color: var(--ink); }
  .pages.blocks .sec--services .shc.shc--drop-open .shc__drop-chev svg { transform: rotate(180deg); }
  @media (prefers-reduced-motion: reduce) {
    .pages.blocks .sec--services .shc__body { transition: none; }
  }
}

/* ---------------------------------------------------------------------------
   DESKTOP (≥50em): the shift-card mechanic. Image absolutely positioned,
   covering everything below the header at rest; body hidden. On reveal the
   image flies to the bottom-right slot and the body cascades in.
   --------------------------------------------------------------------------- */
@media (min-width: 50em) {
  .pages.blocks .sec--services .shc { min-height: clamp(600px, 48vw, 680px); }

  .pages.blocks .sec--services .shc:hover .shc__frame,
  .pages.blocks .sec--services .shc:focus-within .shc__frame,
  .pages.blocks .sec--services .shc.shc--open .shc__frame {
    transform: translateY(-5px);
    box-shadow: 0 34px 66px -32px rgba(56, 57, 61, 0.5);
  }
  .pages.blocks .sec--services .shc:focus-visible .shc__frame {
    outline: 2px solid var(--ink); outline-offset: 3px;
  }

  .pages.blocks .sec--services .shc__head { min-height: var(--head-h); }

  /* image: full-bleed below the header at rest → chip in the floor slot */
  .pages.blocks .sec--services .shc__thumb {
    position: absolute; z-index: 2;
    margin: 0; border-radius: 0; aspect-ratio: auto;
    top: var(--rest-top);
    left: 0; width: 100%;
    height: calc(100% - var(--rest-top));
    transition: top 0.7s var(--ease), left 0.7s var(--ease),
                width 0.7s var(--ease), height 0.7s var(--ease),
                border-radius 0.7s var(--ease), box-shadow 0.7s var(--ease);
    will-change: top, left, width, height;
  }
  .pages.blocks .sec--services .shc:hover .shc__thumb,
  .pages.blocks .sec--services .shc:focus-within .shc__thumb,
  .pages.blocks .sec--services .shc.shc--open .shc__thumb {
    top: calc(100% - var(--pad) - var(--chip-h));
    left: calc(100% - var(--pad) - var(--chip-w));
    width: var(--chip-w); height: var(--chip-h);
    border-radius: 10px;
    box-shadow: 0 14px 28px -16px rgba(56, 57, 61, 0.55);
  }

  .pages.blocks .sec--services .shc__slot { display: block; }

  /* hidden at rest */
  .pages.blocks .sec--services .shc__rule--head {
    opacity: 0; transform: scaleX(0);
    transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  }
  .pages.blocks .sec--services .shc__lead,
  .pages.blocks .sec--services .shc__item {
    opacity: 0; transform: translateY(22px);
    transition: opacity 0.55s var(--ease), transform 0.6s var(--ease);
  }
  .pages.blocks .sec--services .shc__rule--floor {
    opacity: 0; transform: scaleX(0);
    transition: opacity 0.5s var(--ease), transform 0.62s var(--ease);
  }
  .pages.blocks .sec--services .shc__floor {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.55s var(--ease), transform 0.6s var(--ease);
  }

  /* reveal cascade — staggered on the way in, snappy on the way out */
  .pages.blocks .sec--services .shc:hover .shc__rule--head,
  .pages.blocks .sec--services .shc:focus-within .shc__rule--head,
  .pages.blocks .sec--services .shc.shc--open .shc__rule--head { opacity: 1; transform: scaleX(1); transition-delay: 0.08s; }

  .pages.blocks .sec--services .shc:hover .shc__lead,
  .pages.blocks .sec--services .shc:focus-within .shc__lead,
  .pages.blocks .sec--services .shc.shc--open .shc__lead { opacity: 1; transform: none; transition-delay: 0.14s; }

  .pages.blocks .sec--services .shc:hover .shc__item,
  .pages.blocks .sec--services .shc:focus-within .shc__item,
  .pages.blocks .sec--services .shc.shc--open .shc__item { opacity: 1; transform: none; }
  .pages.blocks .sec--services .shc:hover .shc__item:nth-child(1),
  .pages.blocks .sec--services .shc:focus-within .shc__item:nth-child(1),
  .pages.blocks .sec--services .shc.shc--open .shc__item:nth-child(1) { transition-delay: 0.2s; }
  .pages.blocks .sec--services .shc:hover .shc__item:nth-child(2),
  .pages.blocks .sec--services .shc:focus-within .shc__item:nth-child(2),
  .pages.blocks .sec--services .shc.shc--open .shc__item:nth-child(2) { transition-delay: 0.26s; }
  .pages.blocks .sec--services .shc:hover .shc__item:nth-child(3),
  .pages.blocks .sec--services .shc:focus-within .shc__item:nth-child(3),
  .pages.blocks .sec--services .shc.shc--open .shc__item:nth-child(3) { transition-delay: 0.32s; }
  .pages.blocks .sec--services .shc:hover .shc__item:nth-child(4),
  .pages.blocks .sec--services .shc:focus-within .shc__item:nth-child(4),
  .pages.blocks .sec--services .shc.shc--open .shc__item:nth-child(4) { transition-delay: 0.38s; }

  .pages.blocks .sec--services .shc:hover .shc__rule--floor,
  .pages.blocks .sec--services .shc:focus-within .shc__rule--floor,
  .pages.blocks .sec--services .shc.shc--open .shc__rule--floor { opacity: 1; transform: scaleX(1); transition-delay: 0.42s; }

  .pages.blocks .sec--services .shc:hover .shc__floor,
  .pages.blocks .sec--services .shc:focus-within .shc__floor,
  .pages.blocks .sec--services .shc.shc--open .shc__floor { opacity: 1; transform: none; transition-delay: 0.46s; }

  /* Once it flies to the small horizontal chip, ease the disc a touch smaller so
     it — and its shadow — sit fully inside the chip, centred. */
  .pages.blocks .sec--services .shc:hover .shc__disc,
  .pages.blocks .sec--services .shc:focus-within .shc__disc,
  .pages.blocks .sec--services .shc.shc--open .shc__disc {
    width: 66%;
    height: 66%;
    filter: drop-shadow(0 3px 8px rgba(56, 57, 61, 0.18));
  }
}

/* ---- Sign-off line (moved here from the strategy section) ----------------
   Centred under the cards, same size / weight / spacing it had before. */
/* the sign-off closes the section, so it doesn't need a full-height gap below */
.pages.blocks .sec--services { padding-bottom: clamp(10vh, 13vh, 16vh); }

.pages.blocks .sec--services .services__outro {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  max-width: 54ch;
  text-align: center;
  text-transform: lowercase;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lead-read);
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  /* one line on desktop; wraps gracefully on narrow screens */
  text-wrap: balance;
}
/* Phones: each sentence takes its own line — a natural wrap used to break
   mid-sentence ("… good / taste tends to find us."). Stable at every width:
   the sentences are spans, not a guessed character measure. */
@media (max-width: 720px) {
  .pages.blocks .sec--services .services__outro .services__outro-line {
    display: block;
  }
}

/* ---- Reduced motion: reveal without the slide ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pages.blocks .sec--services .shc__frame,
  .pages.blocks .sec--services .shc__thumb,
  .pages.blocks .sec--services .shc__lead,
  .pages.blocks .sec--services .shc__item,
  .pages.blocks .sec--services .shc__floor,
  .pages.blocks .sec--services .shc__rule { transition: opacity 0.2s linear; transform: none; }
}