/* Extra rules for the pages that are not the homepage.

   Kept in its own file rather than appended to style.css because style.css is
   the countdown design itself, shared with the template library. These rules
   only exist for /capabilities/ and /careers/, which are not part of that
   design, and mixing them in would mean every future template swap inherited
   layout for pages it does not have.

   Everything below reads the same custom properties as style.css, so these
   pages take the palette automatically and would follow a recolour. */

/* Lede line under a section heading, for the one sentence that carries the
   point before the paragraphs qualify it. */
.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 32em;
}

/* Partners strip.

   A continuous marquee rather than a slideshow, so the row reads as one moving
   band instead of a thing that jumps every few seconds.

   How the loop is seamless: .pstrip holds the same list twice, and the
   animation translates it by exactly -50%, which is the width of one copy. At
   the instant it wraps, copy two is sitting precisely where copy one began, so
   there is no visible seam and no gap to fill.

   The width is driven by the content (width:max-content), because a percentage
   translate needs a real width to be a percentage of. animation-play-state
   pauses on hover so a logo can actually be looked at.

   The logos arrive as dark ink on white, which would be invisible against this
   page, so each sits on its own light chip. That is deliberate: knocking the
   backgrounds out would misrepresent marks their owners supply as-is. */
.partners { overflow: hidden; }
.pmask {
  overflow: hidden;
  /* Fade both ends so logos enter and leave rather than being sliced off at
     the viewport edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pstrip {
  display: flex;
  align-items: center;
  gap: 18px;
  width: max-content;
}
.pstrip img {
  display: block;
  height: 62px;
  width: auto;
  padding: 12px 20px;
  background: #ffffff;
  border-radius: 3px;
  /* The marks are supplied on white and are not ours to restyle, so they are
     shown as given and only dimmed slightly so the strip does not glare
     against a black page. Full opacity on hover. */
  opacity: 0.82;
  transition: opacity 0.2s linear;
}
.pstrip img:hover { opacity: 1; }

/* Marks drawn in light ink for a dark ground, Puura's among them. Putting one
   on a white chip would mean recolouring it, which is not ours to do, so it
   keeps the ground it was designed for and takes a hairline border instead, or
   a black chip on a black page has no edge at all. */
.pstrip img.pdark {
  background: #000000;
  box-shadow: inset 0 0 0 1px var(--rule-2);
}

@media (prefers-reduced-motion: no-preference) {
  .pstrip { animation: fp-marquee 42s linear infinite; }
  .partners:hover .pstrip { animation-play-state: paused; }
}
@keyframes fp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* With motion suppressed the strip does not move, so the second copy is dead
   weight and the row simply wraps instead. */
@media (prefers-reduced-motion: reduce) {
  .pstrip { flex-wrap: wrap; width: auto; justify-content: center; }
  .pstrip .pdup { display: none; }
}

/* Footer with offices and social links.

   style.css declares footer as a flex row with space-between, a max-width and
   its own border-top, which was written for the two-line footer the countdown
   design shipped with. That is wrong for this one: it made .foot-wide and
   .foot-legal flex siblings sitting side by side, and its border stacked with
   the one .foot-wide carried, so two rules appeared above the addresses.

   So footer is reset to a plain block here and keeps the single rule. The
   width and padding move down to the children, which need different values
   anyway. This file loads after style.css, so the reset wins. */
footer {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.foot-wide {
  display: block;
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 5vw 30px;
}
/* Two columns, not four across.

   auto-fit put all four side by side on a wide screen, which left the two
   addresses looking like list items rather than offices. Two columns pairs
   them as intended: the offices on one row, follow-us and talk-to-us on the
   next. One column below the breakpoint, where two would leave each address
   wrapping mid-line. */
.foot-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 44px;
}
@media (max-width: 640px) {
  .foot-cols { grid-template-columns: 1fr; gap: 26px; }
}

/* Link with an icon in front of it. The gap belongs to flex rather than to a
   margin on the icon, so the two stay together if the label wraps, and
   align-items keeps a one-line label optically centred against the glyph. */
.ilink {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  font-size: 13.5px;
  line-height: 1.4;
}
/* currentColor on the SVG means the glyph follows the link, including on
   hover, without a second rule to keep in step. */
.ilink .ico { flex: 0 0 auto; }
.foot-cols h3 {
  margin: 0 0 12px;
  font: 700 11px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
}
.foot-cols p, .foot-cols address {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.6;
  font-style: normal;
  color: var(--ink-soft);
}
.foot-cols a { color: var(--ink-body); text-decoration: none; }
.foot-cols a:hover, .foot-cols a:focus-visible {
  color: var(--brand);
  text-decoration: underline;
}
/* The last line of the page: company hard left, copyright hard right.
   No rule above it, because the footer already has one and a second would
   box the addresses in for no reason. */
.foot-legal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5vw 40px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.foot-legal p { margin: 0; }

@media (max-width: 700px) {
  .pstrip img { height: 46px; padding: 9px 14px; }
  .foot-wide { padding: 26px 20px 30px; }
  .foot-legal { padding: 14px 20px 30px; }
}

/* Mission and vision, side by side.

   They are a matched pair and belong on one row: stacked, the second reads as a
   footnote to the first. Two columns rather than auto-fit, because there are
   always exactly two and a third would break the pairing anyway.

   The single-column fallback is a max-width query rather than a minmax floor,
   since these boxes carry three or four paragraphs each and need considerably
   more width than a capability card before side by side stops being readable. */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 8px 0 0;
}

.mv {
  padding: 34px 32px 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--rule);
}
.mv .rung { margin: 0 0 10px; }
.mv h2 { margin: 0 0 18px; }
/* .prose is not used inside these boxes, so the paragraph rules it would have
   supplied are restated here. */
.mv p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-body);
}
.mv p:last-child { margin-bottom: 0; }
.mv .lede {
  margin-bottom: 18px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  max-width: none;
}

@media (max-width: 900px) {
  .mv-grid { grid-template-columns: 1fr; }
}

/* Capability and careers cards.

   auto-fit with a minimum lets the row reflow without media queries: three
   across on a wide screen, two on a tablet, one on a phone. minmax(0, 1fr)
   rather than minmax(320px, 1fr) as the second value, because a bare 1fr
   refuses to shrink below its content and forces a horizontal scrollbar on
   narrow screens. */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin: 28px 0 0;
}

.cap {
  padding: 24px 22px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--rule);
}
.cap .num {
  margin: 0 0 14px;
  font: 700 26px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.04em;
  color: var(--brand);
}
.cap h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
}
.cap p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-body);
}
.cap p:last-child { margin-bottom: 0; }

/* The qualifying detail under a card: requirements, caveats, what to bring.
   Set quieter than the body so the card can be skimmed without it. */
.cap-meta {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13.5px !important;
  color: var(--ink-soft) !important;
}

.capnote {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* Two buttons side by side, wrapping rather than overflowing on a phone. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 26px;
}

/* The secondary action. Outlined rather than filled, so the pair reads as one
   primary choice and one alternative instead of two competing buttons.
   Declared after .cta in the cascade, and matching its specificity, so it
   overrides the filled background from contact.css. */
.cta.cta-quiet {
  background: transparent;
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
a.cta.cta-quiet, a.cta.cta-quiet:link, a.cta.cta-quiet:visited { color: var(--brand); }
a.cta.cta-quiet:hover, a.cta.cta-quiet:focus-visible {
  background: var(--brand);
  color: var(--on-brand);
}

/* The hero on these pages carries no countdown clock under it, so it needs a
   rule of its own to sit against the first section. */
.hero { padding-bottom: 2vh; }

@media (max-width: 700px) {
  .cap-grid { gap: 14px; }
  .cap { padding: 20px 18px 22px; }
  .cta-row > .cta { width: 100%; text-align: center; }
}