/* Credentials, redesigned: bigger type, a living backdrop and names that move.
   Same content and markup as before; loaded last so it only restyles this block. */

/* ------------------------------------------------------------- 1. The panel */
html body .credentials-block{
  padding:clamp(40px,5.6vw,92px) clamp(24px,4.4vw,76px) clamp(34px,4vw,64px);
  background:
    radial-gradient(120% 140% at 0% -20%,rgba(213,175,89,.16) 0%,rgba(213,175,89,0) 50%),
    linear-gradient(168deg,#0b3a2f 0%,var(--pine) 38%,var(--deep) 100%);
}
/* A slow gold glow drifts behind the names. */
html body .credentials-block::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-20%;right:-15%;
  width:min(70vw,900px);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(213,175,89,.17) 0%,rgba(213,175,89,.05) 42%,rgba(213,175,89,0) 68%);
  pointer-events:none;
}
html.has-motion body .credentials-block::before{animation:cred-drift 18s ease-in-out infinite alternate}
@keyframes cred-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-18%,22%,0) scale(1.12)}
  100%{transform:translate3d(-38%,4%,0) scale(.94)}
}

/* ------------------------------------------------------------ 2. The heading */
html body .credentials-head{gap:20px 64px;align-items:end}
html body .credentials-head .eyebrow{font-size:13px!important;letter-spacing:.2em!important;margin-bottom:10px}
html body .credentials-head h3{
  font-size:clamp(44px,6.4vw,104px);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.94;
}
/* The second line catches the light: a gold foil that sweeps across slowly. */
html body .credentials-accent{
  display:inline-block;
  padding-bottom:.06em;
  background:linear-gradient(100deg,#c79a3e 0%,#f3dc9c 28%,#d5af59 46%,#fff3cf 58%,#c79a3e 80%);
  background-size:220% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
html.has-motion body .credentials-accent{animation:cred-foil 7s ease-in-out infinite alternate}
@keyframes cred-foil{to{background-position:0 0}}

html body .credentials-intro-wrap{max-width:46ch}
html body .credentials-intro{font-size:clamp(18px,1.55vw,23px);line-height:1.55;color:rgba(214,226,218,.92)}
html body .credentials-team-link{
  margin-top:20px;
  padding:12px 20px;
  gap:12px;
  border:1px solid rgba(213,175,89,.45);
  border-radius:999px;
  color:var(--gold);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
html body .credentials-team-link svg{width:16px;height:16px;transition:transform .3s var(--ease)}
html body .credentials-team-link:hover{background:var(--gold);border-color:var(--gold);color:var(--deep)}
html body .credentials-team-link:hover svg{transform:translateX(4px)}

/* ---------------------------------------------------- 3. The credential wall */
html body .credentials-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,32px);
  margin-top:clamp(44px,5vw,80px);
}
html body .credentials-group,
html body .credentials-group+.credentials-group,
html body .credentials-group:nth-child(2n){
  position:relative;
  margin-top:0;
  padding:clamp(24px,2.6vw,40px) clamp(22px,2.6vw,40px) clamp(14px,1.6vw,24px);
  border:1px solid rgba(230,237,225,.12);
  border-radius:4px;
  background:linear-gradient(160deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 100%);
  overflow:hidden;
  transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
/* Gold bar along the top edge that runs out to full width on hover. */
html body .credentials-group::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:64px;height:3px;
  background:linear-gradient(90deg,var(--gold),#f3dc9c);
  transition:width .7s var(--ease);
}
html body .credentials-group:hover{
  border-color:rgba(213,175,89,.36);
  transform:translateY(-4px);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.65);
}
html body .credentials-group:hover::before{width:100%}

html body .credentials-group dt{
  color:var(--gold);
  font-size:clamp(12px,1vw,14px);
  letter-spacing:.2em;
}
html body .credentials-group dd{margin-top:clamp(14px,1.6vw,24px)}
html body .credentials-group dd span{
  position:relative;
  align-items:center;
  gap:clamp(14px,1.6vw,24px);
  padding:clamp(14px,1.5vw,22px) 0;
  border-top:1px solid rgba(230,237,225,.1);
  font-size:clamp(28px,3.3vw,52px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.05;
  transition:color .35s var(--ease),transform .45s var(--ease);
}
html body .credentials-group dd span:first-child{padding-top:clamp(6px,.8vw,12px)}
/* Index numeral before each name: the site's own stroked digits (as in the lanes
   and workflow steps), drawn large enough to stand beside the name. */
html body .credentials-group dd span::before{content:none}
html body .credentials-group dd .credentials-num{
  flex:0 0 auto;
  width:auto;
  height:1.15em;
  aspect-ratio:62/96;
  stroke-width:6;
  color:rgba(213,175,89,.62);
  transition:color .35s var(--ease);
}
html body .credentials-group dd span:hover .credentials-num{color:var(--gold)}
/* Arrow that slides in on hover. */
html body .credentials-group dd span::after{
  content:"";
  margin-left:auto;
  width:clamp(18px,1.8vw,26px);height:clamp(18px,1.8vw,26px);
  flex:0 0 auto;
  background:var(--gold);
  clip-path:polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%);
  opacity:0;
  transform:translateX(-14px);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
html body .credentials-group dd span:hover{color:var(--gold);transform:translateX(8px)}
html body .credentials-group dd span:hover::after{opacity:1;transform:none}

/* -------------------------------------------------------- 4. Entrance motion */
/* Only staged when the site's motion is on; otherwise everything is simply present. */
html.has-motion body .credentials-block .credentials-head>*,
html.has-motion body .credentials-block .credentials-group,
html.has-motion body .credentials-block .credentials-group dd span{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .9s var(--ease),color .35s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease);
}
html.has-motion body .credentials-block.is-inview .credentials-head>*,
html.has-motion body .credentials-block.is-inview .credentials-group,
html.has-motion body .credentials-block.is-inview .credentials-group dd span{opacity:1;transform:none}
html.has-motion body .credentials-block.is-inview .credentials-head>:nth-child(2){transition-delay:.08s}
html.has-motion body .credentials-block.is-inview .credentials-head>:nth-child(3){transition-delay:.18s}
html.has-motion body .credentials-block.is-inview .credentials-group:nth-child(2){transition-delay:.12s}
html.has-motion body .credentials-block.is-inview .credentials-group dd span:nth-child(1){transition-delay:.25s}
html.has-motion body .credentials-block.is-inview .credentials-group dd span:nth-child(2){transition-delay:.35s}
html.has-motion body .credentials-block.is-inview .credentials-group dd span:nth-child(3){transition-delay:.45s}
html.has-motion body .credentials-block.is-inview .credentials-group:nth-child(2) dd span:nth-child(1){transition-delay:.33s}
html.has-motion body .credentials-block.is-inview .credentials-group:nth-child(2) dd span:nth-child(2){transition-delay:.43s}
html.has-motion body .credentials-block.is-inview .credentials-group:nth-child(2) dd span:nth-child(3){transition-delay:.53s}
/* Hover states win over the entrance transforms once revealed. */
html.has-motion body .credentials-block.is-inview .credentials-group:hover{transform:translateY(-4px);transition-delay:0s}
html.has-motion body .credentials-block.is-inview .credentials-group dd span:hover{transform:translateX(8px);transition-delay:0s}

/* ----------------------------------------------------- 5. Team + footnote */
html body .credentials-block .team-compact{margin-top:clamp(44px,5vw,76px)}
html body .credentials-block .team-compact-summary .team-compact-label{font-size:clamp(28px,3vw,46px);letter-spacing:-.035em}
html body .credentials-block .team-compact-summary .disclosure-mark{width:30px;height:30px}
html body .credentials-note{max-width:80ch;font-size:13.5px;color:rgba(179,198,187,.85)}

/* ---------------------------------------------------------------- 6. Sizes */
@media(max-width:1079px){
  html body .credentials-head{grid-template-columns:1fr}
  html body .credentials-intro-wrap{max-width:58ch}
}
@media(max-width:699px){
  html body .credentials-block{padding:36px 20px 30px}
  html body .credentials-head h3{font-size:clamp(40px,12vw,56px)}
  html body .credentials-intro{font-size:17px}
  html body .credentials-team-link{font-size:14px;padding:11px 18px}
  html body .credentials-grid{grid-template-columns:1fr;gap:16px;margin-top:36px}
  html body .credentials-group,
  html body .credentials-group+.credentials-group,
  html body .credentials-group:nth-child(2n){padding:24px 20px 10px}
  html body .credentials-group dd span{font-size:clamp(26px,8vw,34px);padding:14px 0}
  html body .credentials-block::before{width:120vw;right:-50%}
  html body .credentials-block .team-compact-summary .team-compact-label{font-size:26px}
  html body .credentials-note{font-size:12.5px}
}
@media(hover:none){
  html body .credentials-group dd span::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  html body .credentials-block::before,
  html body .credentials-accent{animation:none!important}
}

/* ------------------------------------------------ 7. Quieter, tighter pass */
/* No decorative gold bars; less air between parts; sentence-case labels; a
   founder bio that reads clearly on pine. */
html body .credentials-group::before,
html body .credentials-group:hover::before,
html body .credentials-block .team-compact::before{content:none}
html body .credentials-block{padding:clamp(34px,4.2vw,68px) clamp(24px,4vw,64px) clamp(28px,3vw,48px)}
html body .credentials-head .eyebrow{letter-spacing:.12em!important}
html body .credentials-grid{margin-top:clamp(30px,3.4vw,52px)}
html body .credentials-group,
html body .credentials-group+.credentials-group,
html body .credentials-group:nth-child(2n){padding:clamp(20px,2.2vw,32px) clamp(20px,2.4vw,36px) clamp(10px,1.2vw,18px)}
html body .credentials-group dt{font-size:clamp(14px,1.1vw,16px);font-weight:600;letter-spacing:.01em;text-transform:none}
html body .credentials-block .team-compact{margin-top:clamp(30px,3.4vw,48px)}
html body .credentials-block .team-compact-grid{margin-top:14px}
html body .credentials-block .team-member-role{color:var(--gold);font-size:13px;letter-spacing:.01em;text-transform:none;line-height:1.45}
html body .credentials-block .team-member h4{font-size:clamp(20px,1.7vw,24px)}
html body .credentials-block .team-member-bio{max-width:52ch;color:rgba(236,242,236,.9);font-size:15px;line-height:1.6}
html body .credentials-note{margin-top:22px}
@media(max-width:699px){
  html body .credentials-block{padding:30px 20px 26px}
  html body .credentials-grid{margin-top:26px;gap:12px}
  html body .credentials-group,
  html body .credentials-group+.credentials-group,
  html body .credentials-group:nth-child(2n){padding:20px 18px 8px}
  html body .credentials-block .team-compact{margin-top:26px}
  html body .credentials-block .team-member-bio{font-size:14px}
}

/* Printed, the panel returns to ink on paper. */
@media print{
  html body .credentials-accent{background:none;color:#112f26;-webkit-text-fill-color:#112f26}
  html body .credentials-group{background:none!important;box-shadow:none!important}
  html body .credentials-group dd span{opacity:1!important;transform:none!important}
  html body .credentials-group dd .credentials-num{color:#112f26}
}