/* ==========================================================================
   Steady Scale — Services
   Page-local styles. Scaffolding (.page-hero, .jump-row), the voice-of-customer
   device (.voc), and the ruled list (.ruled-list) all come from styles.css.

   Structural intent: the home page already summarises these four domains as
   pillar cards. This page is the *detail* behind that summary, so it must not
   look like the same component again — four more bordered cards would read as
   a duplicate of home and land squarely on DESIGN.md's identical-card-grid
   anti-reference. Instead each domain is a full-width ruled row: the name and
   the owner's own words on the left, the capability list on the right. Printed
   regions on a sheet, not floating panels.
   ========================================================================== */

/* ==========================================================================
   Hero — lead + wayfinding index
   ========================================================================== */
.page-hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
/* Two columns only once the lead has room for a full measure beside the index;
   below that the index drops under the lead and reads as a contents list. */
@media (min-width: 820px) {
  .page-hero__grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
}
.page-hero__lead .sub { margin: 0; }

.toc {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}
@media (min-width: 820px) {
  /* Optical alignment: lift the index so its label sits with the H1, not the
     baseline of the lead paragraph. */
  .toc { margin-top: .4rem; }
}
.toc__label {
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: .4rem;
}
.toc ul { display: flex; flex-direction: column; }
.toc a {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 44px;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  transition: color .2s var(--ease), gap .2s var(--ease);
}
.toc li:last-child a { border-bottom: 0; }
.toc a:hover { color: var(--forest); gap: 1rem; }
/* Lighter than the section wells on purpose: the index is a pointer, the wells
   are the anchors. Same icon, different weight of presence. */
.toc__ico { flex: none; color: var(--forest); display: grid; place-items: center; }
.toc__ico svg { width: 1.2rem; height: 1.2rem; }

/* ==========================================================================
   Domain rows
   ========================================================================== */
.domains { padding-bottom: var(--section-y); }

.domain {
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 3rem);
  align-items: start;
}
/* Two columns only once there's room for a real measure on both sides. Below
   that the list belongs under the prose it describes, not beside it. */
@media (min-width: 900px) {
  .domain { grid-template-columns: 1fr 1fr; }
}

/* Icon well + heading share a baseline row so the heading still tops the
   column and aligns with the first list item opposite it. The well reuses the
   established sage component from the home pillars, tying this detail page back
   to the summary it expands. */
.domain__head {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: .9rem;
}
.domain h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0;
}
.domain .voc {
  display: block;
  margin-bottom: .9rem;
  max-width: 34ch;
}
.domain__body {
  color: var(--ink);
  max-width: 52ch;
  text-wrap: pretty;
}

/* The capability list sits slightly inset on wide screens so the two columns
   read as related rather than as a split. */
@media (min-width: 900px) {
  .domain__list { padding-top: .35rem; }
}

/* ==========================================================================
   Bridge to pricing — the page's one Ground Band.
   Not a restatement of the home page's "two ways to work" section: just the
   two voice-of-customer lines as deep links into the relevant pricing section,
   plus the CTA. The full explanation already lives on the home page.
   ========================================================================== */
.bridge {
  position: relative;
  overflow: hidden;
  background: var(--forest);
  color: #F4F1EA;
  padding: var(--section-y) 0;
}
.bridge__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  opacity: .22;
  z-index: 0;
}
/* Scrim so the copy holds contrast over the photograph at every width. */
.bridge::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(33,56,45,.96) 0%, rgba(33,56,45,.88) 42%, rgba(33,56,45,.62) 100%);
}
.bridge > .container { position: relative; z-index: 2; }
.bridge h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  color: #FFFFFF;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  max-width: 22ch;
}

.ways {
  display: grid;
  gap: 1px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 52rem;
}
@media (min-width: 720px) { .ways { grid-template-columns: 1fr 1fr; } }

/* Whole-tile links: the target is the tile, not the few words inside it.
   Fill follows the documented Ground Band recipe — a translucent white veil
   over the opaque forest. Layered rather than substituted: a bare translucent
   fill would let the photograph through and wash the tiles out. */
.way-link {
  background: linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)), var(--forest);
  padding: 1.35rem 1.5rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 44px;
  transition: background .25s var(--ease);
}
.way-link:hover {
  background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)), var(--forest);
}
.way-link .k {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #E4B48F;
}
/* The voice-of-customer line keeps its house treatment; only the ink changes
   for the dark ground. */
.way-link .voc {
  color: #F4F1EA;
  font-size: 1.18rem;
  line-height: 1.35;
}
.way-link .go {
  margin-top: auto;
  padding-top: .35rem;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.way-link .go .arw { transition: transform .2s var(--ease); }
.way-link:hover .go .arw { transform: translateX(3px); }

/* The bridge and the closing banner are both Forest, so without a rule between
   them the page ends in one long dark run and the chapter break disappears —
   stripes rather than chapters. A hairline is enough to restore the seam. */
.bridge + .cta-banner { border-top: 1px solid rgba(255,255,255,.12); }

/* ==========================================================================
   Motion — staggered only within the domain list.
   Gated on html.has-reveal, so no-JS and reduced-motion visitors always get
   fully-visible content.
   ========================================================================== */
html.has-reveal .domain.reveal:nth-of-type(2) { transition-delay: .06s; }
html.has-reveal .domain.reveal:nth-of-type(3) { transition-delay: .12s; }
html.has-reveal .domain.reveal:nth-of-type(4) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html.has-reveal .domain.reveal { transition-delay: 0s; }
  .way-link, .way-link .go .arw, .toc a { transition: none; }
}