/* ==========================================================================
   About  (/company/about/)

   The first Company child. Its sections come from two sheets, both linked
   before this one: company.css (the hub's .facts and .overview) and
   product-family.css (.pf-cap, .pf-res, .pf-related). Page-local:
     the six-tile facts grid (three across once the held tiles are on)
     the family links inside .overview__units
     the one-column inset at 1350, so the product-family blocks line up
       with the hub's sections

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100. No two adjacent bands share a tint:

     §1  banner        white          §5  corporate overview  white
     §2  key facts     neutral-2-100  §6  FAQ                 neutral-2-100
     §3  at a glance   white          §7  related             white
     §4  portfolio     neutral-2-100
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section anchors - 96px clears the sticky header
   -------------------------------------------------------------------------- */
#at-a-glance,#portfolio,#corporate-overview{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   §2 Key facts: four tiles four across from 1024, as on the hub. With the
   two held tiles switched on (CA1) there are six, three across.
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  .facts__grid:has(> .fact:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §3 At a glance: four blocks, 2 x 2 from 640 at every wider width; the
   shared sheet goes three across at 1024, which would orphan the fourth
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .about-glance .pf-cap__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.about-glance .pf-cap-block__link .ps-btn{align-self:flex-start}

/* --------------------------------------------------------------------------
   §4 Product portfolio: the hub's unit cards, with the unit name and each
   family as a link. Links inside an element that is not itself an <a> need
   their own colour or they render as body text.
   -------------------------------------------------------------------------- */
.about-portfolio .overview__unit-name a{color:inherit}
.about-portfolio .overview__unit-name a:hover{color:var(--ps-color-brand-500)}
.about-portfolio .overview__families a{
  color:inherit;
  text-decoration:underline;text-underline-offset:2px;
}
.about-portfolio .overview__families a:hover{color:var(--ps-color-brand-500)}

/* --------------------------------------------------------------------------
   §5 Corporate overview: two cards, two across from 640
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .about-res .pf-res__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   §7 Related: four tiles, two across from 640 and four from 1024; five
   (Why Silvaco switched on) three across
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .pf-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pf-related__list:has(> li:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --------------------------------------------------------------------------
   The hub's sections sit one column in from 1350 (company.css); inset the
   product-family blocks the same way so every band's left edge lines up
   -------------------------------------------------------------------------- */
@media (min-width:1350px){
  .about-glance .pf-cap__head,.about-glance .pf-cap__grid,
  .about-res .pf-res__head,.about-res .pf-res__grid,
  .pf-related__inner{grid-column-start:2;grid-column-end:span 10}
}

/* phones: the large button can be wider than a 320px column; let it wrap,
   as the sibling pages do */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.facts,.faq{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
/* stated explicitly rather than left transparent */
.pf-cap,.pf-res,.pf-related{background:var(--sv-white)}
/* on white, the Related tiles take the card tint */
.pf-related__link{background:var(--ps-color-neutral-2-000)}

/* About round, 2026-09-29. COMPANY-ABOUT-11 and -13 add a text link under
   each business unit's description; the unit card becomes a column so the
   two links sit on one line when the cards stand side by side (768+). */
.about-portfolio .overview__unit{display:flex;flex-direction:column}
.about-portfolio .overview__unit-link{margin-top:auto;padding-top:14px}