/* Company stats pages (company-<slug>.html), laid out like an NBA player page:
   a black top bar, the hero in the team colour, a stat strip with a bio grid,
   section tabs, then white cards on light grey. --team and --accent are set on
   <body> from the company's words file. */

body.cp{
  --ink:#111; --soft:#5f6368; --line:#dcdcdc; --zebra:#f7f7f7; --link:#1d5fbf;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  margin:0; background:#f2f2f2; color:var(--ink);
  font-family:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.cp a{ color:inherit; text-decoration:none; }

/* ---- top bar ---- */
.cp-top{
  display:flex; align-items:center; gap:28px; height:60px; padding:0 clamp(16px,4vw,72px);
  background:#000; color:#fff;
}
.cp-top__brand{ font:700 19px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.cp-top__links{ display:flex; gap:22px; font-weight:600; font-size:15.5px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; }
.cp-top__links a{ white-space:nowrap; opacity:.92; }
.cp-top__links a:hover,.cp-top__links a[aria-current]{ opacity:1; text-decoration:underline; text-underline-offset:6px; }
.cp-top__pill{
  background:#fdb927; color:#000 !important; font-weight:700; font-size:15px;
  padding:9px 14px; border-radius:4px; white-space:nowrap;
}

/* ---- hero ---- */
.cp-hero{ position:relative; overflow:hidden; background:var(--team); color:#fff; }
.cp-hero__wm{
  position:absolute; left:-6%; top:50%; width:78%; aspect-ratio:5/1; transform:translateY(-50%) rotate(-8deg);
  background:#fff; opacity:.05;
  -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat;
}
.cp-hero__in{
  position:relative; display:grid; grid-template-columns:minmax(220px,34%) 1fr auto; align-items:center;
  gap:clamp(24px,4vw,64px); max-width:1640px; margin:0 auto;
  padding:clamp(48px,7vw,96px) clamp(16px,4vw,72px);
  min-height:clamp(260px,26vw,400px); box-sizing:border-box;
}
.cp-logo{
  display:block; width:100%; max-width:380px; aspect-ratio:var(--ar); background:var(--accent);
  -webkit-mask:var(--logo) left center/contain no-repeat; mask:var(--logo) left center/contain no-repeat;
}
.cp-hero__line{ margin:0 0 10px; font-size:clamp(16px,1.3vw,21px); font-weight:500; opacity:.95; }
.cp-hero__name{
  margin:0; font:700 clamp(52px,6.6vw,104px)/.9 var(--cond); text-transform:uppercase; letter-spacing:.005em;
}
.cp-hero__name span{ display:block; }
.cp-ovr{
  display:grid; justify-items:center; gap:4px; min-width:150px; padding:18px 22px;
  border:2px solid rgba(255,255,255,.85); border-radius:14px; text-align:center;
}
.cp-ovr b{ font:700 72px/.9 var(--cond); color:var(--accent); }
.cp-ovr span{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.cp-ovr i{ font-style:normal; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.cp-ovr:hover{ background:rgba(255,255,255,.06); }

/* ---- stat strip: three big numbers, then the bio grid ---- */
.cp-strip{
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,4.4fr);
  background:color-mix(in srgb, var(--team) 78%, #000); color:#fff;
  border-top:1px solid rgba(255,255,255,.18); padding:0 clamp(0px,2vw,40px);
}
.cp-strip__big{ display:grid; grid-template-columns:repeat(3,1fr); }
.cp-big{
  display:grid; place-content:center; text-align:center; gap:2px; padding:22px 8px;
  border-left:1px solid rgba(255,255,255,.22);
}
.cp-big span{ font-size:18px; font-weight:500; text-transform:uppercase; letter-spacing:.02em; }
.cp-big b{ font:700 clamp(30px,2.6vw,40px)/1 var(--cond); }
.cp-strip__bio{ display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid rgba(255,255,255,.22); }
.cp-fact{
  display:grid; place-content:center; text-align:center; padding:12px 8px; gap:1px;
  border-right:1px solid rgba(255,255,255,.22); border-bottom:1px solid rgba(255,255,255,.22);
}
.cp-fact:nth-child(n+5){ border-bottom:0; }
.cp-fact span{ font-size:13.5px; font-weight:500; text-transform:uppercase; letter-spacing:.03em; opacity:.92; }
.cp-fact b{ font-size:clamp(16px,1.25vw,20px); font-weight:500; }
.cp-fact a{ text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:3px; }

/* ---- section tabs ---- */
.cp-tabs{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  background:#fff; border-bottom:1px solid var(--line); padding:0 clamp(16px,4vw,72px);
}
.cp-tabs__l{ display:flex; gap:clamp(18px,3vw,36px); }
.cp-tabs__l a{ padding:20px 10px 16px; font-size:17px; border-bottom:4px solid transparent; }
.cp-tabs__l a[aria-current]{ font-weight:700; border-bottom-color:var(--ink); }
.cp-tabs__r{ display:flex; gap:22px; flex-wrap:wrap; padding:10px 0; }
.cp-tabs__r a{ color:var(--link); font-size:16px; font-weight:500; }
.cp-tabs__r a span{ font-size:13px; opacity:.6; }

/* ---- cards ---- */
.cp-main{ max-width:1500px; margin:0 auto; padding:30px clamp(16px,4vw,72px) 72px; display:grid; gap:30px; }
.cp-main > *{ min-width:0; }   /* lets the table scroll inside its card on phones */
.cp-card{ background:#fff; padding:clamp(18px,2vw,26px); scroll-margin-top:16px; }
.cp-card[hidden]{ display:none; }
.cp-small{ font-size:14px; line-height:1.55; color:var(--soft); margin:18px 0 0; }
.cp-small a,.cp-bio a,.cp-attr a{ color:var(--link); }

.cp-profile summary{ cursor:pointer; font-weight:700; font-size:17px; list-style:none; display:flex; align-items:center; gap:8px; }
.cp-profile summary::-webkit-details-marker{ display:none; }
.cp-profile summary::after{
  content:""; width:8px; height:8px; border:solid var(--ink); border-width:0 1.6px 1.6px 0;
  transform:translateY(-3px) rotate(45deg); transition:transform .2s ease;
}
.cp-profile[open] summary::after{ transform:translateY(1px) rotate(-135deg); }
.cp-ovrline{ margin:20px 0 6px; font-size:16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cp-ovrline b{ font:700 22px/1 var(--cond); }
.cp-badge{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:3px; background:#efe7cf; }
.cp-why{ margin:0 0 18px; color:var(--soft); font-size:15.5px; line-height:1.55; max-width:80ch; }
.cp-attrs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px 34px; }
.cp-attr__top{ display:flex; justify-content:space-between; font-weight:600; text-transform:uppercase; font-size:13.5px; letter-spacing:.06em; }
.cp-attr__top b{ font:700 24px/1 var(--cond); }
.cp-bar{ height:7px; background:#ececec; margin:6px 0 8px; }
.cp-bar i{ display:block; height:100%; background:var(--team); }
.cp-attr p{ margin:0; font-size:14px; line-height:1.5; color:var(--soft); }

.cp-filters{ display:flex; flex-wrap:wrap; gap:20px; }
.cp-filters label{ display:grid; gap:8px; }
.cp-filters span{ font-size:15px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#777; }
.cp-filters select{
  appearance:none; -webkit-appearance:none; width:min(300px,80vw); padding:11px 40px 11px 15px; border:0; border-radius:3px;
  background:#ebebeb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center no-repeat;
  font:600 16px Barlow,sans-serif; color:var(--ink); cursor:pointer;
}

/* ---- the table ---- */
.cp-tbl[hidden]{ display:none; }
.cp-rows{ text-align:right; margin:0 0 14px; font-size:16px; }
.cp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cp-stats table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cp-stats caption{
  text-align:left; background:#e5e7eb; padding:14px 10px; font-weight:600; font-size:16px;
  letter-spacing:.12em; text-transform:uppercase;
}
.cp-stats caption span{ margin-left:10px; letter-spacing:.04em; text-transform:none; font-weight:500; color:var(--soft); font-size:14px; }
.cp-stats thead th{ font-weight:700; font-size:15px; padding:16px 10px; text-align:right; border-bottom:1px solid var(--line); }
.cp-stats thead th:first-child{ text-align:left; }
.cp-stats tbody th{ text-align:left; font-weight:500; padding:0 10px; }
.cp-stats td{ text-align:right; padding:15px 10px; font-size:15.5px; }
.cp-stats tbody tr:nth-child(even){ background:var(--zebra); }
.cp-stats tbody tr:hover{ background:#eef3fb; }
.cp-team a{ color:var(--link); }
.cp-part{ font-size:12px; color:var(--soft); margin-left:6px; }
.cp-d{ text-decoration:underline dotted #9aa0a6; text-underline-offset:4px; cursor:help; }

.cp-bio h2{ font:700 30px/1 var(--cond); text-transform:uppercase; margin:0 0 14px; }
.cp-bio p{ font-size:17px; line-height:1.6; max-width:75ch; margin:0 0 12px; }
.cp-bio .cp-small{ font-size:14px; }

/* ---- smaller screens ---- */
@media (max-width:1100px){
  .cp-strip{ grid-template-columns:1fr; padding:0; }
  .cp-strip__big .cp-big:first-child{ border-left:0; }
  .cp-strip__bio{ border-left:0; border-top:1px solid rgba(255,255,255,.22); }
}
@media (max-width:820px){
  .cp-hero__in{ grid-template-columns:1fr auto; }
  .cp-hero__art{ grid-column:1 / -1; }
  .cp-logo{ max-width:240px; }
  .cp-ovr{ min-width:0; padding:12px 14px; }
  .cp-ovr b{ font-size:52px; }
  .cp-strip__bio{ grid-template-columns:repeat(2,1fr); }
  .cp-fact:nth-child(n+5){ border-bottom:1px solid rgba(255,255,255,.22); }
  .cp-fact:nth-child(n+7){ border-bottom:0; }
  .cp-big span{ font-size:14px; }
  .cp-top__pill{ display:none; }
}
@media (max-width:520px){
  .cp-top{ gap:16px; }
  .cp-top__brand{ font-size:16px; }
  .cp-hero__in{ grid-template-columns:1fr; }
  .cp-ovr{ justify-self:start; grid-auto-flow:column; align-items:center; gap:12px; }
  .cp-tabs__r{ display:none; }
}