/* Services — "Our Services" hub + four click-through detail pages */

body.services-page,
body.service-detail-page {
  background: var(--parchment);
  color: var(--shadow-grey);
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

/* Same soft-corner-blob backdrop as About Diana/About GBD (about-diana.css
   .about-backdrop, approach.css .approach-backdrop): relies on the base
   .backdrop element/pseudo-elements in styles.css. Those two pages use the
   blobs at 0.14, but they also both run a wide two-column layout that
   covers most of the viewport, leaving little raw backdrop exposed. A
   detail page is a single centered 640px column, so on any normal desktop
   width the blobs are exposed across almost the entire left and right side
   of the page — at 0.14 that read as far too heavy/dark. Dropped to 0.06 so
   the same soft depth shows through without dominating a page this sparse.
   Tried on Brainstorm Session first, then applied to all four detail pages
   (services-brainstorm/dba/ddr/tsm.html) once approved. */
.service-detail-backdrop {
  background: var(--parchment);
}

.service-detail-backdrop::before,
.service-detail-backdrop::after {
  background: rgba(131, 119, 209, 0.06);
}

/* Hub hero */

/* Full-bleed wrapper around .services-hero AND .services-section (see the
   markup): a section on its own is centered and width-capped, which was
   cutting .services-hero-shape off well short of the true right edge, and
   its real height didn't reach the shape's own natural bottom curve either
   — both read as an accidental clip rather than an intentional crop. This
   wrapper spans the true screen width and the real combined height of both
   sections, so the shape below can anchor to both correctly. */
.services-visual-band {
  position: relative;
  overflow: hidden;
}

/* Widened from 780px: at the headline's new, larger size (matched to the
   homepage hero, see .services-headline) each of its two forced-split
   sentences still wrapped a second time inside the old, narrower width. The
   subhead/button below inherit this wider column too now — the subhead's
   own line length is being reassessed separately. */
.services-hero {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 3.5rem);
  text-align: center;
}

/* Fill was a leftover Periwinkle tint (#f1eff9) referencing a homepage
   shape variable (--hc-periwinkle-shape) that no longer exists — the
   homepage dropped Periwinkle from every shape and moved to one rule
   (Orchid at 8% opacity on light backgrounds, index.css
   --hc-shape-on-light), but this page's shape was never updated to match
   and was left at a color that measures 1.04:1 against this page's own
   Parchment background — effectively invisible. Matches that rule directly
   now (this page can't reference the homepage's CSS variable, so the same
   value is written out here) instead of reusing a value tied to a variable
   name that's since been deleted.

   The viewBox itself ("0 0 62 110") crops directly to the "G" side of the
   monogram (the left ~42% of the full artwork), rather than showing the
   whole monogram and cropping with CSS — an earlier version did that (full
   viewBox + a fractional `right` offset) and, combined with height:100%,
   independently set width AND height, which stretched/squashed the artwork
   out of its true proportions instead of just cropping it. Direct viewBox
   cropping avoids that: width:auto lets the browser derive width from
   height and the crop's own (correct) aspect ratio, so nothing distorts.

   height: 100% ties it to .services-visual-band's real combined height
   (confirmed to resolve correctly here since the band is a plain block, not
   a flex-grown one — see the connect.html/css comments for why that
   distinction matters), so it always ends at a real edge instead of an
   arbitrary clip. */
.services-hero-shape {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  /* On narrow phones the stacked headline/subhead make the band much taller
     relative to its width, and width:auto (derived from that height) scales
     up with it — without a cap it turns into a heavy, dominant block rather
     than a quiet accent. This still lets it run the full height; it just
     stops growing wider past a reasonable point. */
  max-width: 55vw;
  pointer-events: none;
  fill: rgba(87, 5, 100, 0.08);
}

.services-eyebrow-brand {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--velvet-orchid);
  margin-bottom: 1.5rem;
}

/* Matched to .approach-hero-headline (the homepage's top-of-scroll hero) —
   this page's headline was noticeably smaller and missing the brandbook's
   -2% tracking that the homepage's hero already uses. The two sentences are
   split onto their own line each (see the <br> in the markup) — widening
   .services-hero itself (above) is what actually gives them the room. */
.services-headline {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 auto 1.25rem;
  color: var(--velvet-orchid);
}

/* Widened and sized up to match the sitewide "hero copy" pattern
   (approach.css .approach-hero-copy on the homepage: 1.25rem/660px, and the
   same values reused for the concept homepage's other lead paragraphs) —
   this was noticeably smaller and narrower than that established pattern,
   which is why it read as small and wrapped to five lines against the
   now-larger headline. */
.services-subdescription {
  font-size: 1.25rem;
  line-height: 1.6;
  opacity: 0.85;
  max-width: 660px;
  margin: 0 auto 2rem;
}

/* "Our Services" section */

/* position/z-index: this section is now a sibling of the absolutely
   positioned .services-hero-shape inside .services-visual-band (see above)
   — without an explicit stacking context here, the shape could paint above
   this section's own non-card background instead of behind it. */
.services-section {
  position: relative;
  z-index: 1;
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
}

.services-section-inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* Matches the .masthead-title treatment used for the About GBD/About Diana
   page headers (approach.css) — same H2-tier size/weight/line-height/
   letter-spacing, sentence case instead of the old small all-caps eyebrow
   label, same border-bottom/spacing rhythm — so "Our Services" reads as
   part of the same masthead system instead of the smaller, wide-tracked
   label style used elsewhere on the page (e.g. .services-eyebrow-brand). */
.services-eyebrow {
  display: inline-block;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--velvet-orchid);
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--velvet-orchid);
  margin-bottom: 2.5rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem;
  /* Brand palette only has 5 colors — #ffffff isn't one of them. Bone gives
     the card a warmer, visibly distinct fill against the parchment page
     background (parchment-on-parchment read as too flat/white). Border is a
     soft velvet-orchid tint rather than --bone, since --bone-on-bone would
     disappear now that it's also the fill color. Same 0.18 opacity as the
     homepage's challenge boxes (index.css .hc-challenge) — this was
     independently tuned to 0.15, a small mismatch between two instances of
     the same "Bone card" pattern. */
  background: var(--bone);
  border: 1px solid rgba(87, 5, 100, 0.18);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(29, 28, 31, 0.08);
}

.service-card-icon {
  font-size: 30px;
  color: var(--velvet-orchid);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 30;
}

.service-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--velvet-orchid);
}

.service-card-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--body-text);
}

/* Sentence case now, matching the site's move away from all-caps/wide-
   tracked labels toward the plainer masthead type language — down-weighted
   from bold/uppercase to a quieter medium-weight caption so it still reads
   as a hint line under the cards, not a second heading. */
.services-hint {
  /* Was a fixed 1rem, pulled in from 2.5rem so this read as tied to the
     cards above it — but that fixed value stayed put while .services-section's
     own bottom padding (clamp 3.5rem-5.5rem) scaled up with viewport width,
     so the gap below this line grew a lot bigger than the gap above it,
     leaving the hint looking crowded against the cards. This scales with the
     same clamp logic (same fix applied on the homepage's version of this
     line, index.css .hc-services .services-hint) so it sits more evenly
     between the cards and the section's bottom edge at any width. */
  margin: clamp(2rem, 5vw, 3.75rem) 0 0;
  text-align: center;
  /* Was 1.14rem ("20% larger than the base 0.95rem caption size") — smaller
     than the homepage's version of this exact line (index.css
     .hc-services .services-hint, which uses --hc-cta-text-size: 1.35rem, the
     same size shared with "You can take action now."). Matched directly to
     that value so the line reads the same size on both pages, not just on
     the homepage's copy of it. Can't reference the homepage's CSS variable
     from this stylesheet, so the same value is written out here. */
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--velvet-orchid);
}

@media (max-width: 900px) {
  .service-card-title {
    white-space: normal;
  }
}

@media (max-width: 760px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 2-1-1 stack: Brainstorm + DDR paired, then DBA and TSM each full-width */
  .service-card:nth-child(3),
  .service-card:nth-child(4) {
    grid-column: 1 / -1;
  }
}

/* Detail pages */

.service-detail-main {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 5vw, 4rem) clamp(3.5rem, 8vw, 5.5rem);
  text-align: center;
}

.service-detail-icon {
  font-size: 44px;
  color: var(--velvet-orchid);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 44;
  margin-bottom: 1rem;
}

.service-detail-title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--velvet-orchid);
  margin-bottom: 0.75rem;
}

.service-detail-subhead {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--periwinkle-shade);
  max-width: 480px;
  margin: 0 auto 1.75rem;
  line-height: 1.5;
}

.service-detail-divider {
  width: 60px;
  height: 2px;
  background: var(--bone);
  border: none;
  margin: 0 auto 1.75rem;
}

.service-detail-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--body-text);
  margin-bottom: 1.25rem;
}

.service-detail-paths {
  display: flex;
  /* No gap: the boxes' own side padding creates the space, so the divider
     line between them (below) sits exactly centered in the gutter. */
  gap: 0;
  align-items: stretch;
  margin: 2rem 0;
}

.service-path-box {
  flex: 1 1 0;
  /* Was the same Bone fill + Orchid-tint border + rounded box as
     .service-card (the genuinely clickable card on the Services hub), which
     led visitors to expect these to be clickable too — they're just
     descriptive text, nothing happens on click. Switched to the site's
     existing pull-quote treatment (.approach-pullquote in approach.css: a
     3px Orchid vertical line, no fill, no box) so they still read as
     distinct, grouped content without looking like a card. Text stays
     centered to match the rest of the page (left-aligned text inside
     centered content looked wrong), and the line goes BETWEEN the two
     options rather than on the left of each — symmetric, so neither reads
     as first or second. */
  padding: 0.25rem 1.5rem;
  text-align: center;
}

.service-path-box + .service-path-box {
  border-left: 3px solid var(--velvet-orchid);
}

/* Underlined like the masthead headings on the About pages (.masthead in
   approach.css: inline-block, 3px Orchid border-bottom, sized to the word
   itself) — ties the two option labels to the site's existing heading
   language instead of being plain bold text. */
.service-path-label {
  display: inline-block;
  /* Matches .service-detail-subhead (the Periwinkle line under the page
     title), which it was slightly smaller than (0.95rem vs 1.05rem). */
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--velvet-orchid);
  padding-bottom: 0.35rem;
  border-bottom: 3px solid var(--velvet-orchid);
  margin-bottom: 0.9rem;
}

/* Font size matches .service-detail-body (the paragraphs above), which it was
   smaller than (0.85rem vs 1rem). Line spacing is deliberately a bit tighter
   than the body's 1.75: these sit in two narrow columns, where the body's
   open spacing made each column feel long and stretched. */
.service-path-desc {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--body-text);
}

/* Sub-path boxes stay side by side at every width by design — stacking them
   would visually imply a sequence/hierarchy between the two paths that
   doesn't exist. Shrink padding instead of stacking on narrow screens. (Type
   used to shrink here too, but now stays matched to the text above it.) */
@media (max-width: 480px) {
  .service-path-box {
    padding: 0.25rem 0.75rem;
  }
}

.service-detail-cta {
  margin-top: 1rem;
}