/* =========================================================================
   Troutwood employers page
   Same field, same tokens, same rhythm as the homepage. Everything here is
   additive: tokens, primitives, nav, footer, hero, the trust panel and the
   close all come from tw-system.css. Organised by section, in page order.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. The cost
   A single large figure carrying the one number on the page, with the
   qualitative costs beside it. Two columns rather than a row of three cards:
   the number is the argument and the list is its consequences, so they are
   not peers and should not be drawn as peers.
   ------------------------------------------------------------------------- */

.cost__body {
  margin-top: 1.75rem;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* 20rem for the figure column, not a fraction: the number is set in vw-scaled
   type and a fractional column lets it collide with the list a long way
   before the layout is narrow enough to want stacking. */
.cost__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.cost__figure {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Sage rather than sage-bright, which is the one place on the page that
   inversion is safe: this is display type well past the 24px large-text
   threshold, where sage clears contrast at 3.8:1 on the glow's brightest. */
.cost__number {
  display: block;
  font-size: clamp(4rem, 2rem + 9vw, 7.5rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--sage);
}

.cost__unit {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--step-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.cost__caption {
  margin-top: 1.125rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--rule);
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--text-secondary);
}

.cost__items {
  display: grid;
  gap: 1.75rem;
}

.cost__item {
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.cost__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.cost__item p {
  margin-top: 0.5rem;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   02. Reach
   The page's showpiece, and the only place the argument is shown rather than
   stated: two identical dot fields standing for the same workforce, lit by
   what actually reaches it.

   Drawn as background-images rather than as markup. A population reads at
   roughly a thousand dots, and a thousand spans is a thousand layout boxes
   for pure decoration. One tiled radial-gradient costs a single paint, scales
   to whatever width the panel ends up at, and needs no script to build it.

   The whole stage is aria-hidden. Both panel captions state the claim in
   words directly underneath, so nothing here is the only carrier of meaning.
   ------------------------------------------------------------------------- */

.reach__body {
  margin-top: 1.75rem;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

.reach__stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.reach__panel {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* The dot field. Every layer inside shares this element's background-size and
   origin, which is what keeps the lit dots sitting exactly on top of the dim
   ones instead of a pixel off them. */
.reach__field {
  --dot-gap: clamp(9px, 1.9vw, 13px);
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: calc(var(--radius) - 6px);
  overflow: hidden;
}

.reach__field > span {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at center,
    currentColor 1.5px,
    transparent 1.9px
  );
  background-size: var(--dot-gap) var(--dot-gap);
}

/* The workforce, unlit. Everyone is present in both panels; only the lighting
   differs, because the population was never the variable. */
.reach__dots {
  color: rgba(255, 255, 255, 0.17);
}

/* A slightly fatter dot than the dim layer, on the same centres. The radius
   changes and the geometry does not, so the lit dots sit exactly on top of the
   ones they replace rather than beside them. Without this the two panels are
   separated by colour alone, which is not enough of a difference at the size
   the left panel's clusters end up. */
.reach__lit {
  color: var(--sage-bright);
  background-image: radial-gradient(
    circle at center,
    currentColor 2.1px,
    transparent 2.6px
  );
  filter: drop-shadow(0 0 5px rgba(103, 188, 124, 0.55));
}

/* Scattered, not a block. Reach is not a contiguous region of the org chart:
   it is whoever could make the room that day, and drawing it as a rectangle
   would quietly imply a whole department got served. Seven mask layers
   composite additively by default, so this is a union of seven soft blobs.

   Sized in percentages, which is why these are ellipses rather than circles:
   `circle` takes only a length, and a length here is a proportion that drifts.
   A radius tuned to read as a handful on a 430px desktop panel covers a third
   of the same field once the panel is 330px wide and the dot pitch has
   clamped down with it, and the left panel quietly starts claiming a turnout
   it is meant to be arguing against.

   The pair on each layer is horizontal and vertical radius against the box's
   own width and height. The field is aspect-ratio 3/2, so a vertical radius
   of 1.5x the horizontal renders as a true circle at every width. */
.reach__panel--few .reach__lit {
  -webkit-mask-image: radial-gradient(ellipse 7.5% 11.25% at 17% 24%, #000 45%, transparent 100%),
    radial-gradient(ellipse 5.4% 8.1% at 58% 13%, #000 45%, transparent 100%),
    radial-gradient(ellipse 6.5% 9.75% at 82% 37%, #000 45%, transparent 100%),
    radial-gradient(ellipse 5% 7.5% at 31% 61%, #000 45%, transparent 100%),
    radial-gradient(ellipse 7% 10.5% at 69% 74%, #000 45%, transparent 100%),
    radial-gradient(ellipse 4.6% 6.9% at 12% 84%, #000 45%, transparent 100%),
    radial-gradient(ellipse 5.8% 8.7% at 45% 42%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 7.5% 11.25% at 17% 24%, #000 45%, transparent 100%),
    radial-gradient(ellipse 5.4% 8.1% at 58% 13%, #000 45%, transparent 100%),
    radial-gradient(ellipse 6.5% 9.75% at 82% 37%, #000 45%, transparent 100%),
    radial-gradient(ellipse 5% 7.5% at 31% 61%, #000 45%, transparent 100%),
    radial-gradient(ellipse 7% 10.5% at 69% 74%, #000 45%, transparent 100%),
    radial-gradient(ellipse 4.6% 6.9% at 12% 84%, #000 45%, transparent 100%),
    radial-gradient(ellipse 5.8% 8.7% at 45% 42%, #000 45%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* A band of brighter dots travelling across the full field. It exists to say
   the second panel is live rather than merely more filled in: the difference
   between the two is the whole section, and a static contrast reads as a
   colour choice. Switched off under reduced motion at the foot of this file. */
.reach__pulse {
  color: #d8f6e2;
  -webkit-mask-image: linear-gradient(
    100deg,
    transparent 38%,
    #000 50%,
    transparent 62%
  );
  mask-image: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: reach-sweep 6.5s linear infinite;
}

@keyframes reach-sweep {
  from {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

.reach__caption {
  margin-top: 1.125rem;
}

.reach__caption h3 {
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.reach__caption p {
  margin-top: 0.375rem;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   03. Rollout
   Four steps. The rule and its lit node are drawn per step rather than as one
   rail element behind the row: side by side they line up into a single rail,
   and when the grid wraps each step keeps its own marker instead of trailing
   a line to nowhere.

   The node runs sage to sky across the four, which is the same direction the
   platform page gives the round trip: expertise out, signal back.
   ------------------------------------------------------------------------- */

.rollout__body {
  margin-top: 1.5rem;
  font-size: var(--step-lead);
  color: var(--text-secondary);
}

/* The closing sentence is the one the reader needs off the section, so it
   takes white and the weight while the two disclaimers before it stay at
   secondary. */
.rollout__body strong {
  font-weight: 700;
  color: var(--text-primary);
}

.rollout__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.rollout__step {
  position: relative;
  padding-top: 2rem;
}

.rollout__step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}

.rollout__step::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--node, var(--sage));
  box-shadow: 0 0 12px var(--node, var(--sage));
}

.rollout__step:nth-child(2) {
  --node: #6ab894;
}

.rollout__step:nth-child(3) {
  --node: #63b0c6;
}

.rollout__step:nth-child(4) {
  --node: var(--sky);
}

.rollout__num {
  display: block;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-tertiary);
}

.rollout__step h3 {
  margin-top: 0.625rem;
}

.rollout__step p {
  margin-top: 0.5rem;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Same device as the section's own lede above: the part of the step the
   reader needs off the page takes white and the weight. */
.rollout__step strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   04. One team
   Two handsets, and no console. Everything the section claims is something the
   employee sees — your mark beside your providers' on the home screen, and a
   sponsored challenge with a count against it — so the proof has to be the
   screen the employee holds rather than the one your team opens.

   The mount is `.shot`, in tw-system.css. Everything here is the arrangement.
   ------------------------------------------------------------------------- */

.together__body {
  margin-top: 1.5rem;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Two handsets, held to 36rem so each track lands on the phone's own width.
   That is what puts the left edge of a caption under the left edge of the
   device it belongs to; run across the full measure the tracks would be
   twice the handset and every caption would start out in space beside it.

   The 3rem gutter is the same one the platform page's phone row uses, and it
   is doing the same job: two mounted devices a rule's width apart read as
   one object split down the middle. Here the arithmetic happens to close
   without moving anything — two 16.5rem handsets plus 3rem is exactly the
   36rem this was already held to. */
.together__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  gap: clamp(2.25rem, 4.5vw, 3.5rem) 3rem;
  max-width: 36rem;
  margin: clamp(2.75rem, 5vw, 4rem) auto 0;
}

.together__phone {
  width: 100%;
  max-width: 16.5rem;
}

/* Below this the pair is two 200px handsets, which is under what the app's own
   type survives. One column, a little smaller, and the captions come back under
   the middle. */
@media (max-width: 640px) {
  .together__pair {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 3rem);
  }

  .together__phone {
    max-width: 15rem;
  }

  .together__pair .shot__caption {
    text-align: center;
    justify-self: center;
  }
}

/* -------------------------------------------------------------------------
   05. Access
   Two panels of equal weight. Not a comparison table: the same console, seen
   through the two roles that open it. Each panel puts a crop of the real
   screen above the words, because the claim in this section is about what
   is actually on a screen.
   ------------------------------------------------------------------------- */

.access__body {
  margin-top: 1.5rem;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.split__panel {
  /* A token rather than a literal because the cover below has to cancel it
     exactly on three sides, and two clamps that have to agree are one clamp
     waiting to disagree. */
  --panel-pad: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  padding: var(--panel-pad);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}

/* One lit edge per panel. The eyebrow above it names which role this is, so
   the colour reinforces a label rather than carrying one on its own. */
.split__panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.split__panel--hr::before {
  background: linear-gradient(to right, var(--sage), rgba(103, 188, 124, 0));
}

/* --sky is a 3.5:1 colour at the glow's brightest: it can hold a 2px rule and
   it cannot hold type, so the eyebrow above it stays sage. */
.split__panel--partner::before {
  background: linear-gradient(to right, var(--sky), rgba(90, 167, 248, 0));
}

/* A crop of the real thing across the head of each panel, cut tight enough to
   read at panel width: the groups as HR opens them, and the roster as the role
   you granted it to opens it. Small enough to take in while reading the list
   beside it, which is the only size that works here — a console at panel width
   is a picture of a console, and these are crops for exactly that reason.

   No radius and no negative bottom margin: the panel is already clipped and
   already rounded, so the cover inherits both by being inside it, and the two
   sides only have to agree about one number.

   No mount either, and that is the reason these are the one place on the two
   pages a capture is not framed as a device. A cover bleeds to three edges
   of the panel it is in, which is what makes it read as the head of the
   panel rather than as a picture inside it; a bezel drawn around it would be
   a second frame inside a frame that is already there. What it does get is
   more air under it than the panel's own padding, because the eyebrow
   directly below is the first line of a different thought. */
.split__cover {
  margin: calc(var(--panel-pad) * -1) calc(var(--panel-pad) * -1) calc(var(--panel-pad) + 0.75rem);
  border-bottom: 1px solid var(--rule);
}

.split__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.split__title {
  margin-top: 1rem;
  font-size: var(--step-h2);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.split__list {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
}

.split__list h4 {
  margin: 0;
  font-size: var(--step-body);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.split__list p {
  margin-top: 0.375rem;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Same device as the rollout steps above: the half of the sentence the reader
   needs off the page takes white and the weight, and the setup before it
   stays at secondary. */
.split__list strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   06. What it is worth
   Six places a financially settled workforce shows up in numbers somebody in
   the organization is already accountable for. The section answers 01, so
   the two are deliberately the same shape read in opposite directions.

   20rem for the track, which resolves to three across the measure and never
   to four: six items in four columns leaves two on a second row, and two of
   six reads as the ones that did not fit rather than as the last of a set.
   That is why this grid does not simply reuse the 14rem track above it.
   ------------------------------------------------------------------------- */

.value__body {
  margin-top: 1.75rem;
  font-size: var(--step-lead);
  line-height: 1.55;
  color: var(--text-secondary);
}

.value__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.value__rule {
  width: 2rem;
  height: 2px;
  margin-bottom: 1.125rem;
  background: var(--sage);
  box-shadow: 0 0 14px var(--accent-glow);
}

.value__item p {
  margin-top: 0.625rem;
  font-size: var(--step-small);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   07. Trust
   The panel itself is the homepage's, unchanged. The homepage runs it with a
   visually-hidden heading and nothing above it, so it needs no top margin
   there; here it sits under a visible eyebrow and title, which is what this
   modifier is for.
   ------------------------------------------------------------------------- */

.trust__panel--titled {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* The four commitments used to open on a 2px accent line; they now open on
   the homepage's icon tile instead. The tile carries --sage-bright by
   default, which is the token every small accent uses on the field. This
   panel is inside the paper band, where --sage is 5.7:1 and passes as a
   foreground on its own, so the glyph keeps the exact green the rule it
   replaced was drawn in rather than shifting a shade off it. */
.trust__icon {
  color: var(--sage);
}

/* -------------------------------------------------------------------------
   08. Partners
   Education and research partners, not customers, and the heading says so.
   A row of logos under an employer page's fold is read as a client list by
   default, and these are not one.

   The artwork is white on transparent, so it needs no filter to sit on the
   field; the opacity step is there to keep four wordmarks from outranking the
   copy around them.
   ------------------------------------------------------------------------- */

.partners__body {
  margin-top: 1.5rem;
  font-size: var(--step-lead);
  color: var(--text-secondary);
}

.partners__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.75rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}

/* Height-normalised, width auto. The four files run from 1.7:1 to 5.2:1, so
   a shared width would set the squarest one three times the optical size of
   the widest. */
.partners__row img {
  height: clamp(28px, 4.5vw, 38px);
  width: auto;
  opacity: 0.72;
  transition: opacity 220ms var(--ease);
}

.partners__row img:hover {
  opacity: 1;
}

/* -------------------------------------------------------------------------
   09. Reduced motion
   The sweep is the only thing on this page that moves of its own accord. The
   lit field underneath it stays exactly as it is, so the section still makes
   its point with the animation gone.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reach__pulse {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0.35;
  }
}

/* -------------------------------------------------------------------------
   10. Print
   ------------------------------------------------------------------------- */

@media print {
  .reach__field {
    display: none;
  }

  .cost__figure,
  .reach__panel,
  .split__panel {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}