/* ==========================================================================
   3DOptix redesign — /about page-unique CSS.

   Depends on: dxr-tokens.css -> dxr-components.css -> dxr-shell.css
   Enqueued CONDITIONALLY from page-templates/dxr-about.php (handle
   'dxr-page-about', dependency 'dxr-shell'), so it ships on this page only and
   can never reorder the shared layer.

   RULES FOR THIS FILE:
   - EVERY selector is scoped to .dxr-page-about, the wrapper class the template
     emits. Legacy Elementor / blog / Academy / WooCommerce markup keeps its own
     bullets, paragraph spacing and link underlines. No bare element selectors,
     ever, and the reset's scope is never widened.
   - No new colour: everything resolves from the token layer. The only raw
     numbers are geometry transcribed verbatim from the approved prototype
     ('3DOptix Website.dc.html', lines 1520-1664), and each is named in §0
     rather than repeated inline.
   - Nothing here belongs in the shared stylesheets: it is either page-unique
     structure (the team card body) or a documented per-page override of a
     shared value (hero rhythm, band gap, on-dark ledger value colour).
   - No new keyframe, and the spectrum gradient appears ZERO times in this file.
     The hero's 44x3 eyebrow bar is the shared five-stop --dxr-spectrum-eyebrow,
     which is a different gradient from the two signature placements.
   ========================================================================== */

/* ==========================================================================
   §0 Page-local custom properties

   Prototype values with no entry in the token layer. Named once here instead
   of repeated as literals below — same convention as dxr-page-technology.css §0.
   ========================================================================== */
.dxr-page-about{
  --dxr-about-hero-top:clamp(45px,5.3vw,72px);   /* proto 1526 */
  --dxr-about-hero-bot:clamp(47px,5.6vw,76px);   /* proto 1526 */
  --dxr-about-measure-520:min(100%,520px);       /* proto 1653 — the shared
                                                    measure set is 560/620/640/
                                                    660/820, so 520 is local */
  --dxr-about-sticky-top:104px;                  /* == --dxr-nav-h (76) + 28,
                                                    the same offset the four
                                                    article templates use */
}

/* ==========================================================================
   §1 Hero — dark ground, single column

   .dxr-hero__inner runs section-y / section-y-tight. The About hero runs its
   own tighter rhythm on both edges (prototype line 1526), so it is overridden
   here rather than in the shared layer. The ground, the dark-2 blueprint and
   the 'about' glow all come from the shared layer verbatim: .dxr-glow--about
   is already the prototype's 620x620 radial at top:-240px/right:-120px.
   ========================================================================== */
.dxr-page-about .dxr-hero__inner{
  padding-top:var(--dxr-about-hero-top);
  padding-bottom:var(--dxr-about-hero-bot);
}

/* The H1 role is the shared .dxr-h1--page; only the measure is page-specific
   (prototype 900px — wider than any shared .dxr-measure-*). */
.dxr-page-about .dxr-about-hero__title{max-width:min(100%,900px)}

/* ==========================================================================
   §2 Why we exist — two columns

   .dxr-grid--band ships the 400px minimum this section needs, but pairs it
   with the 72px xwide gap and align-items:center. The prototype (line 1537)
   is 64px and align-items:start, because the two columns are a long narrative
   against a short fact panel and centring them would float the panel.
   ========================================================================== */
.dxr-page-about .dxr-about-why{
  /* Two-value gap. The prototype's 64px is a COLUMN gap; once the pair stacks
     (below ~880px, where the shared 400px minimum plus the gap no longer fit)
     the single-axis shorthand would put the same 64px between the narrative and
     the panel — at a 320px viewport that is a screenful of dead space. The
     column value the prototype specifies is preserved exactly. */
  gap:36px var(--dxr-gap-col-wide);
  align-items:start;
}

/* Paragraph rhythm: 20px between, last one flush (prototype 1540-1542).
   Class-based, so no element selector is introduced. */
.dxr-page-about .dxr-about-why__para{margin:0 0 20px}
.dxr-page-about .dxr-about-why__para:last-child{margin-bottom:0}

/* The narrative runs 696px against a 262px fact panel, so the align-items:start
   above leaves 434px of empty column beside the closing paragraphs. Sticky
   walks the panel down with the reader instead — the grid area is still the
   full row height, so there is room to travel. This is the same treatment the
   Academy, post, use-case and video sidebars already carry, at the same 104px
   offset, so About stops being the one two-column page whose panel strands.
   Above the stack width only: once the columns stack the panel is a normal
   block in the flow and has nothing to travel in. 880px is where the shared
   400px minimum plus the column gap stops fitting, per §2 above. */
@media (min-width:880px){
  .dxr-page-about .dxr-about-brief{
    position:sticky;
    top:var(--dxr-about-sticky-top);
    align-self:start;
  }
}

/* "In brief" panel cap. The shared .dxr-strip is 14px 18px (--dxr-pad-strip);
   the prototype's About cap is 15px 20px, aligning it with the 20px horizontal
   padding of the kv rows beneath it (--dxr-pad-row). Everything else about the
   strip — the raised surface, the inner hairline, the mono label — is shared.
   The amber patent note below the rows is dxr_ledger()'s own 'note' strip and
   needs no CSS here at all. */
.dxr-page-about .dxr-about-brief .dxr-strip{padding:15px 20px}

/* ==========================================================================
   §3 Principles — sunken, three hairline cells

   ZERO rules. dxr_hairline_grid( min 3up, hover false ) with blue / cyan /
   green accent rules is already this exact instance; see the docblock at
   inc/dxr-components.php:679. The 40px gap under the H2 is the shared
   .dxr-mb-40 utility.
   ========================================================================== */

/* ==========================================================================
   §4 Team — 4-up portrait grid

   The heading pair (.dxr-headpair) and the grid (.dxr-grid--4up, 240px minimum,
   20px gap) are shared and already match the prototype exactly. The card shell
   is .dxr-panel — white, 1px --dxr-border, 12px radius, overflow hidden — and
   the 180px media slot is .dxr-panel__media, so only the card BODY is new.
   ========================================================================== */
.dxr-page-about .dxr-about-team__body{padding:18px 20px}

.dxr-page-about .dxr-about-team__name{
  margin-bottom:5px;
  font:700 15px/1.3 var(--dxr-font-sans);
  color:var(--dxr-ink);
}
/* Mono, because a job title in this card is a label, not prose. */
.dxr-page-about .dxr-about-team__role{
  font:400 12px/1.4 var(--dxr-font-mono);
  color:var(--dxr-text-subtle);
}

/* Unresolved slots read as unresolved. --dxr-text-disabled is the token the
   system already uses for placeholder captions, so a missing name can never be
   mistaken for a real one at a glance. */
.dxr-page-about .dxr-about-team__name--todo{
  font-weight:400;
  color:var(--dxr-text-disabled);
}
.dxr-page-about .dxr-about-team__role--todo{color:var(--dxr-text-disabled)}

/* The head-pair's right column carries a named gap rather than the prototype's
   message to the client, so it takes the placeholder-caption role too. */
.dxr-page-about .dxr-about-team__note{
  font:400 12px/1.6 var(--dxr-font-mono);
  color:var(--dxr-text-disabled);
}

/* ==========================================================================
   §5 Contact — dark band

   .dxr-grid--2up already carries the prototype's 420px minimum; the gap and
   alignment are the band's own (prototype line 1648: 48px, align-items:start).
   ========================================================================== */
.dxr-page-about .dxr-about-contact{
  /* Two-value gap, same reasoning as §2: the prototype's 48px is a column
     value and is preserved as one; the stacked row gap is stated separately so
     the copy and the routes panel are not 48px apart on a phone. */
  gap:32px var(--dxr-gap-col);
  align-items:start;
}
/* The routes note is informational, not a caution. The shared on-dark ledger
   paints every note in amber -- right when it flagged that the rows above were
   placeholder mailboxes, wrong now that they are real addresses and the line
   merely offers the contact form as a second route. Caption ink instead, so
   amber keeps meaning "pay attention" everywhere else it is used. */
.dxr-page-about .dxr-about-contact__routes .dxr-ledger__note{color:var(--dxr-on-dark-caption)}

.dxr-page-about .dxr-about-contact__text{
  margin-bottom:26px;
  max-width:var(--dxr-about-measure-520);
}

/* The panel shell, its border, fill and radius are .dxr-panel--on-dark verbatim.
   Two documented deltas:

   (a) .dxr-ledger--on-dark .dxr-ledger__val resolves to --dxr-on-dark (white),
       which is right for the Enterprise plan and the OptiTwin findings. On this
       panel the values are contact routes and the prototype sets them cyan
       (#67E8F9 = --dxr-cyan-light), the same ink the on-dark eyebrow uses. A
       one-line page-local override, NOT a change to the shared component.
   (b) the prototype's last row carries no separator, because the panel edge
       already closes the list. :last-child is exactly right here: when the
       placeholder note strip is present it is the ledger's last child, the
       rule does not match, and the final row correctly keeps the hairline that
       divides it from the note. */
.dxr-page-about .dxr-about-routes .dxr-ledger__val{color:var(--dxr-cyan-light)}
.dxr-page-about .dxr-about-routes .dxr-ledger__row:last-child{border-bottom:0}

/* NARROW WIDTHS. A kv row is a non-wrapping flex pair, and .dxr-panel is
   overflow:hidden — so a value that cannot shrink to fit is silently CLIPPED,
   not scrolled. At a 320px viewport the row's content box is 238px, 222px once
   the 16px gap is taken. An email address offers no UAX#14 break opportunity
   ('@' is class AL, '.' between letters is class IS), so once escalation 6 is
   answered and 'partnerships@3doptix.com' replaces the placeholder the value's
   min-content is 187px against a 65px key min — 268px into 238px, and the tail
   of the address becomes unreachable. `anywhere` engages only when the word
   genuinely does not fit, so nothing changes at any width where it does.
   Applied to the 'In brief' ledger too, whose 'Billions of rays/sec' row is
   already cramped at the same measure. */
.dxr-page-about .dxr-about-routes .dxr-ledger__val,
.dxr-page-about .dxr-about-brief .dxr-ledger__val{overflow-wrap:anywhere}