/* ═══════════════════════════════════════════════════
   SECTION: service-overview — source strategy.html #sc-overview

   The catalogue of services inside one category, as a 2×2 card grid.
   Class names stay as in the source (.sc-*); only the file name is semantic.

   Accent TEXT on the cards uses --c-accent-bright rather than --c-accent: the
   cards sit on --c-bg-3, where --c-accent measures 4.38:1 and misses the 4.5:1
   threshold, while --c-accent-bright measures 5.74:1 on the same surface. That
   is three rules — the hovered card name, .sc-tile-tag and .sc-cat-cta.

   The accent rule across the card top and the glyph in .sc-cat-icon are not
   text. They answer to the 3:1 non-text threshold, which --c-accent clears, so
   they use it.
═══════════════════════════════════════════════════ */

#sc-overview {
  background: var(--c-bg-2);
  padding: var(--sp-section) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.sc-section-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* The heading column is sized to the heading, not to a round number. At
   --fs-700, which tops out at 52px, the longest line of the h1 measures 620px;
   the previous split left it 604 and pushed the headline onto a third line.
   Narrowing the description to 360 and closing the gap to --sp-16 gives the
   heading 680 — enough to hold its two intended lines with slack for a font
   that renders a little wider.

   The description keeps a comfortable measure at 360px: about 50 characters a
   line at --fs-300, well inside the range that stays readable.

   Re-measure this if the heading text changes. It is tuned to specific words,
   which is the price of a headline that breaks exactly where it should. */
.sc-section-hdr {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--sp-16);
  align-items: end;
  margin-bottom: var(--sp-16);
}

.sc-section-desc { font-size: var(--fs-300); color: var(--c-text-3); line-height: 1.75 }

/* ── Catalogue: 2×2, hairline gap so the cards read as one block ── */
/* ── Catalogue: 2×2, hairline gap so the cards read as one block ──

   The outer corners are rounded on the cards themselves rather than by
   clipping the grid. The card border is not decoration here — hover paints it
   with the accent — and a container that clips would cut the corner off that
   border, which is exactly what went wrong on the deliverables grid before its
   frame moved.

   Which card owns which corner changes with the columns, so the corners are
   assigned by position: first and second at the top, the last two at the
   bottom. That holds for any even number of cards; the catalogue is four by
   design, and an odd fifth would leave a card alone on a row and need this
   revisited. */
.sc-catalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px }

.sc-cat-card:first-child        { border-top-left-radius: var(--r-lg) }
.sc-cat-card:nth-child(2)       { border-top-right-radius: var(--r-lg) }
.sc-cat-card:nth-last-child(2)  { border-bottom-left-radius: var(--r-lg) }
.sc-cat-card:last-child         { border-bottom-right-radius: var(--r-lg) }

.sc-cat-card {
  background: var(--c-bg-3);
  border: 1px solid var(--c-border);
  padding: var(--sp-10) 36px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: background var(--dur-base), border-color var(--dur-base);
}
/* Accent line that wipes in across the top edge on hover. */
.sc-cat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-accent), rgba(var(--c-accent-rgb), .3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.sc-cat-card:hover { background: var(--c-bg-4); border-color: rgba(var(--c-accent-rgb), .3) }
.sc-cat-card:hover::after { transform: scaleX(1) }
.sc-cat-card:hover .sc-cat-arr { transform: translateX(4px) }
.sc-cat-card:hover .sc-cat-name { color: var(--c-accent-bright) }

.sc-cat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.sc-cat-num {
  font-family: var(--f-display);
  font-size: var(--fs-100);
  font-weight: var(--fw-black);
  letter-spacing: .1em;
  color: rgba(var(--c-accent-rgb), .4);
}
.sc-cat-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: rgba(var(--c-accent-rgb), .08);
  border: 1px solid rgba(var(--c-accent-rgb), .18);
  color: var(--c-accent);
  flex-shrink: 0;
}

.sc-cat-body { flex: 1; display: flex; flex-direction: column; gap: 0 }
.sc-cat-name {
  font-family: var(--f-display);
  font-size: var(--fs-600);
  font-weight: var(--fw-black);
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--c-text-1);
  margin-bottom: var(--sp-3);
  transition: color var(--dur-base);
}
.sc-cat-desc {
  font-size: var(--fs-300);
  color: var(--c-text-3);
  line-height: 1.75;
  margin-bottom: var(--sp-5);
}
.sc-cat-tags { display: flex; flex-wrap: wrap; gap: 6px }
.sc-tile-tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(var(--c-accent-rgb), .07);
  border: 1px solid rgba(var(--c-accent-rgb), .18);
  font-size: var(--fs-100);
  color: var(--c-accent-bright);
  font-weight: var(--fw-medium);
}

.sc-cat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-border);
}
.sc-cat-cta {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-200);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-accent-bright);
}
.sc-cat-arr {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — the source breaks at 960; the theme scale is 1024 / 768 / 640.
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sc-section-hdr { grid-template-columns: 1fr; gap: var(--sp-6) }
  .sc-catalog { grid-template-columns: 1fr }

  /* One column: the first card owns both top corners and the last both bottom
     ones. The two-column assignment has to be undone with selectors of equal
     weight — a plain `.sc-cat-card { border-radius: 0 }` reset loses to
     `:nth-child(2)` on specificity no matter where it sits, which left cards
     two and three with a rounded corner in the middle of the stack. */
  .sc-cat-card:nth-child(2)      { border-top-right-radius: 0 }
  .sc-cat-card:nth-last-child(2) { border-bottom-left-radius: 0 }

  .sc-cat-card:first-child {
    border-top-left-radius: var(--r-lg);
    border-top-right-radius: var(--r-lg);
  }
  .sc-cat-card:last-child {
    border-bottom-left-radius: var(--r-lg);
    border-bottom-right-radius: var(--r-lg);
  }
}

@media (max-width: 640px) {
  .sc-section-inner { padding: 0 var(--sp-6) }
  .sc-cat-card { padding: var(--sp-8) var(--sp-6) }
}