/**
 * DocuPOW — Company / About page styles
 * (page-templates/company.php only).
 *
 * Scope: everything lives under .page-company (BEM). Global chrome,
 * container, buttons, links and scroll-reveal come from main.css — this file
 * adds the short light layout (hero + mission band + pillars + contact
 * block) and the hero entrance motion only. NO gradient borders on this
 * page (budget 0): the hero visual is a flat placeholder panel — hairline
 * border only.
 *
 * Light-canvas contrast contract (tokens only, plus ONE documented derived
 * value — zero new undocumented hexes):
 *  - Eyebrows on WHITE (S1/S3) are 13px mono semibold var(--techblue) per
 *    the export's text-primary — 4.54:1 on white (AA).
 *  - The S2 eyebrow and the S4 mailto sit on the --gray band, where raw
 *    --techblue is only 4.23:1 (fails AA). They use --techblue-on-gray:
 *    #276CC1 — the house darkened Tech Blue (#2B76D2 * 0.92), already
 *    codified in main.css (button hover) and developers.css (doclink) —
 *    4.89:1 on --gray (AA).
 *  - The hero POW IT UP link is 18px/400 var(--techblue) on white —
 *    4.54:1 (AA) — underline on hover.
 *  - The S3 "Explore the platform" link is 16px/600 var(--techblue) on the
 *    WHITE canvas — 4.54:1 (AA).
 *  - h2 headings are var(--indigo) — 11.52:1 on white, 10.73:1 on --gray (AA).
 *  - Lead/body copy and the mono captions/contact items are
 *    var(--text-muted) — 9.34:1 on white, 8.70:1 on --gray (AA).
 *  - h1 / h3 are var(--ink) — 16.68:1 on white (AA).
 *  - The pillar icons, hero team glyph and contact glyphs are decorative,
 *    non-text accents (aria-hidden) — the adjacent text carries the meaning,
 *    so the text contrast rule does not apply to them.
 *
 * Motion contract (transform/opacity only — STANDARD tier):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced motion
 *    (or if company.js never runs) everything is visible. NO floats, NO
 *    bobs, NO count-ups, NO loops on this page — the ONE bespoke moment is
 *    the hero .is-ready entrance.
 *  - company.js hooks: .is-ready on .page-company__hero (staged copy
 *    entrance: eyebrow/h1/lead/CTAs + visual). main.js owns [data-dp-reveal]
 *    and the stagger delays (the page JS clears the inline delays
 *    post-reveal so hover lifts are never postponed).
 *  - Card hover lifts use the standalone `translate` property (never
 *    `transform`) so they can never fight the reveal's transform.
 *  - A final prefers-reduced-motion: reduce block forces every animated
 *    element fully visible and static (belt-and-braces over main.css).
 */

/* =========================================================================
   Page scope — light canvas, section rhythm
   ========================================================================= */
.page-company {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */

  /* The ONLY non-token colour value on this page, DERIVED not invented:
     the house darkened Tech Blue (#2B76D2 * 0.92 -> #276CC1), the same
     value main.css uses for the primary-button hover and developers.css
     for its doclink. Used exclusively for techblue TEXT on the --gray
     bands, where raw --techblue is 4.23:1 (fails AA at body sizes);
     this is 4.89:1 on --gray (AA). */
  --techblue-on-gray: #276CC1;
}

/* 96px section padding on desktop, 64px under 768 (S1-S3). The S4 contact
   block is deliberately more compact (64/48) — a quiet closing band. */
.page-company__hero,
.page-company__mission,
.page-company__pillars {
  padding-block: var(--space-7);
}

.page-company__contact {
  padding-block: var(--space-6);
}

@media (max-width: 767.98px) {
  .page-company__hero,
  .page-company__mission,
  .page-company__pillars {
    padding-block: var(--space-6);
  }

  .page-company__contact {
    padding-block: var(--space-5);
  }
}

/* Shared eyebrow — mono technical label in Tech Blue per the export's
   text-primary (4.54:1 on white — AA at 13px semibold). The S2 gray-band
   instance is re-tinted below. */
.page-company__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--techblue);
  margin-bottom: var(--space-2);
}

/* Shared h2 — headline-lg (36/1.2/-0.01em/600) in Royal Indigo (11.52:1 on
   white, 10.73:1 on --gray — AA). */
.page-company__mission-title,
.page-company__pillars-title {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
}

/* =========================================================================
   S1 — Hero (copy left / placeholder visual right; copy-first <1024)
   ========================================================================= */
.page-company__hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: center;
}

.page-company__hero-grid > * {
  min-width: 0;
}

/* <1024 — single column; copy stacks first (source order). */
@media (max-width: 1023.98px) {
  .page-company__hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Ink per the export. */
.page-company__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* body-lg lead (18/1.6), muted per the export's on-surface-variant. */
/* Parent-company mark (user-directed drop-in). Third-party brand rule:
   the POW IT UP mark renders AS-IS — never recolour or CSS-filter it. */
.page-company__pu-mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--space-2);
}

.page-company__pu-mark img {
  display: block;
  height: 56px;
  width: auto;
}

.page-company__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 576px;
  margin-bottom: var(--space-4);
}

/* The sanctioned POW IT UP external link — var(--techblue), VERIFIED
   4.54:1 at 18px/400 on white (AA, >= 4.5:1); underline on hover/focus so
   the affordance never relies on colour alone against the muted lead. */
.page-company__parent-link {
  color: var(--techblue);
  font-weight: 500;
}

.page-company__parent-link:hover,
.page-company__parent-link:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hero CTA pair. */
.page-company__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* <640 — the button pair stacks full-width. */
@media (max-width: 639.98px) {
  .page-company__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Hero visual — SANCTIONED REPLACEMENT for the export's hotlinked stock
   team photo (never stock-fake people): a designed flat placeholder surface
   (gray panel, hairline border, 12px radius = rounded-xl, min-height
   400/500 per the export's h-[400px] lg:h-[500px]) holding a centered 56px
   team glyph over a mono caption. Decorative (aria-hidden), NO gradient
   border (budget 0), no shadow (flat policy — not a floating product
   screenshot). */
.page-company__visual {
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-height: 400px;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
}

@media (min-width: 1024px) {
  .page-company__visual {
    min-height: 500px;
  }
}

/* 56px muted team glyph (house 2px-stroke outline). */
.page-company__visual-icon {
  display: block;
  color: var(--text-muted);
}

.page-company__visual-icon svg {
  display: block;
  width: 56px;
  height: 56px;
}

/* Mono 13 caption — var(--text-muted) is 8.70:1 on --gray (AA). */
.page-company__visual-caption {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* =========================================================================
   S2 — Mission (gray band, hairline y-borders, centered 768 column)
   ========================================================================= */
.page-company__mission {
  background-color: var(--gray);
  border-block: 1px solid var(--border);
}

.page-company__mission-inner {
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
}

/* Gray band re-tint: raw --techblue is 4.23:1 on --gray (fails AA) — use
   the documented house darkened Tech Blue (4.89:1, AA). */
.page-company__mission .page-company__eyebrow {
  color: var(--techblue-on-gray);
}

.page-company__mission-title {
  margin-bottom: var(--space-3);
}

/* body-lg mission statement — var(--text-muted) is 8.70:1 on --gray (AA). */
.page-company__mission-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* =========================================================================
   S3 — What we're building (white canvas, three linked pillar cards)
   ========================================================================= */
.page-company__pillars-head {
  max-width: 768px;
  margin-bottom: var(--space-5);
}

/* 3 columns per the export (gap-8 = 32px); 1 column under 768. */
.page-company__pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.page-company__pillars-grid > * {
  min-width: 0;
}

@media (max-width: 767.98px) {
  .page-company__pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* Whole-card anchor (solutions.php pattern) — white card, 1px hairline,
   12px radius = rounded-xl, 32px padding per the export. Hover lifts via
   the standalone `translate` property so it never fights the reveal's
   `transform`; border->techblue + lift only, ~180ms, NO shadows (flat
   policy). The reveal stagger's inline transition-delay on the cell would
   postpone the first hover — company.js clears it post-reveal. */
.page-company__pillar-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: var(--space-4);
  transition:
    translate .18s ease,
    border-color .18s ease;
}

.page-company__pillar-card:hover,
.page-company__pillar-card:focus-visible {
  translate: 0 -6px;
  border-color: var(--techblue);
}

/* 48px icon tile — gray surface, hairline border, 8px radius, centered
   24px techblue glyph (decorative, aria-hidden — the h3 carries the
   meaning). */
.page-company__pillar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--gray);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--techblue);
  margin-bottom: var(--space-3);
}

.page-company__pillar-icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* headline-md (24/1.3/500) in Ink. */
.page-company__pillar-card h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.page-company__pillar-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* "Explore the platform ->" text link row — left on desktop, centered
   under 768 per the export's text-center md:text-left. */
.page-company__pillars-foot {
  margin-top: var(--space-4);
}

@media (max-width: 767.98px) {
  .page-company__pillars-foot {
    text-align: center;
  }
}

/* 16/600 var(--techblue) on the WHITE canvas — 4.54:1 (AA). */
.page-company__platform-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--techblue);
}

.page-company__platform-link:hover,
.page-company__platform-link:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-company__platform-link svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

/* =========================================================================
   S4 — Contact block (Master-Plan-mandated addition; quiet gray band)
   ========================================================================= */
.page-company__contact {
  background-color: var(--gray);
  border-top: 1px solid var(--border);
  text-align: center;
}

/* headline-md (24/1.3/500) in Royal Indigo (10.73:1 on --gray — AA). */
.page-company__contact-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--indigo);
  margin-bottom: var(--space-3);
}

.page-company__contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
}

/* Mono 14 contact items — var(--text-muted) is 8.70:1 on --gray (AA);
   glyphs are decorative (aria-hidden). */
.page-company__contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

.page-company__contact-item svg {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

/* The mailto — techblue text on the --gray band, so the documented house
   darkened Tech Blue (4.89:1 — AA; raw --techblue is 4.23:1 there). */
.page-company__contact-link {
  color: var(--techblue-on-gray);
}

.page-company__contact-link:hover,
.page-company__contact-link:focus-visible {
  color: var(--techblue-on-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   Mobile type scale (<768) — 64->44, 36->28
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-company__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-company__mission-title,
  .page-company__pillars-title {
    font-size: 28px;
    line-height: 1.2;
  }
}

/* =========================================================================
   Motion — entrance base states (no-preference only)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — company.js adds .is-ready to the hero on init (double
     rAF); copy rises in with 0/80/160/240ms delays and the visual panel
     fades alongside the lead. */
  .page-company__hero .page-company__eyebrow,
  .page-company__hero .page-company__title,
  .page-company__hero .page-company__lead,
  .page-company__hero .page-company__cta-row,
  .page-company__hero .page-company__visual {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-company__hero .page-company__title {
    transition-delay: 80ms;
  }

  .page-company__hero .page-company__lead,
  .page-company__hero .page-company__visual {
    transition-delay: 160ms;
  }

  .page-company__hero .page-company__cta-row {
    transition-delay: 240ms;
  }

  .page-company__hero.is-ready .page-company__eyebrow,
  .page-company__hero.is-ready .page-company__title,
  .page-company__hero.is-ready .page-company__lead,
  .page-company__hero.is-ready .page-company__cta-row,
  .page-company__hero.is-ready .page-company__visual {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-company__hero .page-company__eyebrow,
  .page-company__hero .page-company__title,
  .page-company__hero .page-company__lead,
  .page-company__hero .page-company__cta-row,
  .page-company__hero .page-company__visual {
    opacity: 1;
    transform: none;
  }

  /* No hover lifts — :hover/:focus-visible included so this outweighs the
     lift rule. */
  .page-company__pillar-card,
  .page-company__pillar-card:hover,
  .page-company__pillar-card:focus-visible {
    translate: none;
  }
}

/* -------------------------------------------------------------------------
   Named markup hooks that intentionally carry no styles of their own.
   Named here so every markup class resolves in this sheet (build rule).
   ------------------------------------------------------------------------- */
.page-company__hero-copy {
  /* no-op: block-flow copy column; layout comes from __hero-grid */
}

.page-company__cell {
  /* no-op: reveal-stagger grid cell; layout comes from __pillars-grid.
     Exists so the inline stagger delay lands on the wrapper, never the
     whole-card anchor (instant hover transitions). */
}