/* ===========================================================
   home-sections.css: the homepage's four "what we do" sections
   (SEO go-live copy v1.2, H8; file 2, section A), replacing the
   six-pillar bento. Built from the services block's own parts
   (.services-title, .tile, .tile-title, .tile-sub, .tile-foot,
   .tile-arrow) in the site container: --container-max inside
   --section-pad-x, with the 40 px inset.
   =========================================================== */
/* Brief 40, A2: each section is its own band, alternating --bone and --paper with the 1px rule between them
   (the staff augmentation pattern, .sa section.s1): hero bone, then paper, bone, paper, bone, then the case study on paper. */
.hs { padding: 96px var(--section-pad-x); background: var(--bone); border-top: 1px solid var(--rule); }
main > section.hs:nth-of-type(even) { background: var(--paper); }
.hs-inner { max-width: var(--container-max); margin: 0 auto; padding-left: 40px; }
.hs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 60px; align-items: start; margin-bottom: 40px; }
.hs-head .services-title { margin: 0; }
.hs-lede { font-size: 17px; line-height: 1.65; color: var(--gray); margin: 0; max-width: 62ch; }
.hs-lede a, .hs-note a { color: var(--gray-deep); font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.hs-lede a:hover, .hs-note a:hover { color: var(--orange-text); }
.hs-last .hs-head { margin-bottom: 0; }

.hs-cards { display: grid; gap: 16px; }
.hs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hs-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hs-card { min-height: 220px; cursor: default; }
.hs-card .tile-title { font-size: clamp(20px, 1.7vw, 24px); }
.hs-link { color: inherit; }
.hs-link::after { content: ''; position: absolute; inset: 0; }   /* the whole card follows its title's link */
.hs-card:hover { cursor: pointer; }
.hs-card:has(.hs-link:focus-visible) { outline: 2px solid var(--orange-deep); outline-offset: 3px; }
.hs-link:focus-visible { outline: none; }
.hs-foot-t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-text); }

.hs-roles { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.hs-roles a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--rule-strong);
  font-weight: 600; font-size: 15px; color: var(--gray-deep); transition: border-color .2s, color .2s; }
.hs-roles a:hover { border-color: var(--orange); color: var(--orange-text); }
.hs-note { margin: 18px 0 0; font-size: 15px; color: var(--gray); }
.hs .services-selfroute-wrap { max-width: none; margin: 4px 0 0; padding-left: 0; }

@media (max-width: 1100px) {
  .hs-3, .hs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .hs { padding-top: 64px; padding-bottom: 64px; }
  .hs-inner { padding-left: 0; }
  .hs-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 30px; }
  .hs-3, .hs-4 { grid-template-columns: 1fr; }
  .hs-card { min-height: 0; }
}

/* The section headings: the services title, a size down, so a two-line keyword heading reads as one block */
.hs .services-title { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.05; }