/* SHAPE: Pillars and Sequence.
   A text-only wide hero, then three named systems as three ruled columns
   (the page's committed moment), then a four-step sequence on the field
   ground set as two-column rows: mark, then what happens. Terms are a
   definition list and pricing is deliberately absent. No other v2 page
   may use this shape.

   Deliberately NOT reused from cadence.css: the four-across sequence
   (.cd-sequence), the pricing ladder (.cd-ladder), the tree (.cd-tree),
   and the vertical numbered steps (.cd-steps). The Product Ladder shape
   is Cadence's, and the two service pages have to read as siblings
   rather than as one template run twice.

   The three columns are also NOT the .domains grid from work.css: those
   are equal-weight subject areas, these are named products, so each one
   carries a name, a one-line definition, and evidence.

   The FAQ disclosure duplicates cadence.css's .cd-q behaviour under
   .fg-q on purpose. It's the one interaction a visitor should recognise
   across both service pages, and promoting it to global.css would make
   it a shared component the shape rule exists to prevent. */

/* ---------- Hero ---------- */
.fg-hero { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0 clamp(var(--sp-6), 5vw, var(--sp-8)); }
/* 20ch rather than Cadence's 15: this headline is a full sentence and at
   15ch it broke across four ragged lines. */
.fg-hero h1 { font-size: var(--fs-hero); max-width: 20ch; }
.fg-hero .lead { margin-top: var(--sp-5); max-width: 62ch; }
.fg-hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

/* ---------- The three systems ---------- */
.fg-pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
}
/* A top rule per column rather than three boxes. Nothing on this page is
   a card, which is what keeps it off the four-up feature grid the v1 site
   used on three pages at once. */
.fg-pillar { border-top: 2px solid var(--line-strong); padding-top: var(--sp-5); }
.fg-pillar h3 { font-size: var(--fs-h3); }

/* Drawn per-system marks, not an icon set. The brand licenses none, and
   the v1 Cadence page's icon tiles were removed as a template tell, so
   these are line drawings of what each system does, on the page's own
   stroke vocabulary: field green rule work, clay for the one element that
   carries the point. No tile, no fill behind them. */
.fg-mark {
  display: block; width: 48px; height: 40px; margin-bottom: var(--sp-4);
  fill: none; stroke: var(--field); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.fg-mark .accent { stroke: var(--clay); }
.fg-mark .accent-fill { fill: var(--clay); stroke: none; }
.fg-mark .fill { fill: var(--field); }
.fg-pillar-line {
  margin-top: var(--sp-2); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--fs-body);
  line-height: 1.4; color: var(--clay-deep);
}
.fg-pillar-points { list-style: none; margin-top: var(--sp-4); }
.fg-pillar-points li {
  position: relative; padding-left: 1.1rem;
  font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft);
}
.fg-pillar-points li + li { margin-top: var(--sp-3); }
.fg-pillar-points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--field);
}
/* The closing note under each column was removed with the 2026-08-29 copy
   revision, along with the flex column that pushed the three notes to a
   shared baseline. Restoring a note means restoring both. */

/* ---------- How an engagement runs ---------- */
.fg-run { padding: clamp(var(--sp-8), 7vw, var(--sp-9)) 0; }
.fg-run .section-head h2 { font-size: var(--fs-h1); }

/* A vertical spine with a numbered node per step. Deliberately NOT the
   four-across .cd-sequence on cadence.css: that shape is Cadence's, and
   running it here would make the two service pages read as one template.
   The spine is drawn per item rather than as one absolute line down the
   list, so it stops at the last node instead of running past it into the
   section padding. */
.fg-steps { list-style: none; margin-top: var(--sp-6); --fg-node: 2.75rem; }
.fg-steps > li {
  position: relative;
  display: grid;
  grid-template-columns: var(--fg-node) minmax(0, 1fr);
  gap: 0 clamp(var(--sp-5), 3vw, var(--sp-6));
  padding-bottom: var(--sp-7);
  align-items: start;
}
.fg-steps > li:last-child { padding-bottom: 0; }
/* Runs from just under one node to the top of the next. */
.fg-steps > li:not(:last-child)::before {
  content: ""; position: absolute;
  left: calc(var(--fg-node) / 2 - 1px);
  top: calc(var(--fg-node) + var(--sp-2)); bottom: var(--sp-2);
  width: 2px; background: var(--on-field-line);
}
.fg-step-node {
  width: var(--fg-node); height: var(--fg-node); border-radius: 50%;
  border: 2px solid var(--on-field-soft); background: var(--field-deep);
  display: grid; place-items: center;
}
.fg-step-n { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--paper); }
/* Optically centres the heading against the node rather than the node's
   box, which sits a little high next to a slab cap-height. */
.fg-step-body { padding-top: calc(var(--fg-node) / 2 - 0.85em); }
.fg-step-body h3 { color: var(--paper); font-size: var(--fs-h3); }
.fg-step-body p { margin-top: var(--sp-3); color: var(--on-field-soft); font-size: var(--fs-small); line-height: 1.6; max-width: var(--measure); }

/* ---------- Values ---------- */
/* Two columns of three, with one rule across the top of the whole group
   rather than a rule per item. Section 2 above is already three ruled
   columns, so repeating that motif here would read as the same component
   run twice on one page. The clay tick is what marks an item instead. */
.fg-values {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) clamp(var(--sp-6), 5vw, var(--sp-8));
  border-top: 1px solid var(--line-strong); padding-top: var(--sp-6);
}
.fg-value dt {
  position: relative; padding-left: var(--sp-5);
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600;
  color: var(--ink); letter-spacing: var(--tr-display);
}
.fg-value dt::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 9px; height: 9px; background: var(--clay);
}
.fg-value dd {
  margin-top: var(--sp-3); padding-left: var(--sp-5);
  color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.6;
}

/* ---------- FAQ ---------- */
.fg-faq { border-top: 1px solid var(--line-strong); max-width: 62rem; }
.fg-q { border-bottom: 1px solid var(--line); }
.fg-q > summary {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600;
  color: var(--ink); letter-spacing: var(--tr-display);
}
.fg-q > summary::-webkit-details-marker { display: none; }
.fg-q > summary:hover { color: var(--field); }
.fg-q > summary:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.fg-q-mark { margin-left: auto; flex: none; width: 22px; height: 22px; position: relative; border: 1px solid var(--line-strong); border-radius: 50%; }
.fg-q-mark::before, .fg-q-mark::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--field); transform: translate(-50%, -50%); transition: transform .2s var(--ease); }
.fg-q-mark::before { width: 9px; height: 1.5px; }
.fg-q-mark::after { width: 1.5px; height: 9px; }
.fg-q[open] > summary .fg-q-mark { background: var(--field); border-color: var(--field); }
.fg-q[open] > summary .fg-q-mark::before, .fg-q[open] > summary .fg-q-mark::after { background: var(--paper); }
.fg-q[open] > summary .fg-q-mark::after { transform: translate(-50%, -50%) scaleY(0); }
.fg-a { padding-bottom: var(--sp-6); }
.fg-a p { color: var(--ink-soft); max-width: var(--measure); }

/* ---------- Close ---------- */
.fg-close { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0; }
.fg-close .close-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(var(--sp-5), 4vw, var(--sp-7)); align-items: center; }
.fg-close h2 { max-width: 16ch; }
.fg-close p { margin-top: var(--sp-4); max-width: 48ch; }

/* ---------- Responsive ---------- */
/* The timeline keeps its spine at every width. It's already a single
   column of nodes, so there is nothing to collapse; only the node itself
   shrinks so the body column keeps a usable measure on a phone. */
@media (max-width: 900px) {
  .fg-steps { --fg-node: 2.25rem; }
  .fg-values { grid-template-columns: 1fr; gap: var(--sp-5); }
  .fg-close .close-inner { grid-template-columns: 1fr; }
}
/* Three columns hold down to 760, then go straight to one. There is no
   two-up step on purpose: with three items, a two-column grid orphans the
   third into a half-empty row, and that empty quadrant reads worse than
   the narrower columns do. Measured at 900px, each column runs about 38
   characters a line, which these short bullets take without laddering. */
@media (max-width: 760px) {
  .fg-pillars { grid-template-columns: 1fr; gap: var(--sp-7); }
}