/* Created: 10:31 11-Aug-2026 */
/* BT2 sections B — services grid, how it works, about */

/* ---------- 4. Services showcase ---------- */
.services{padding:var(--sec-m) 0}
.svc-chips{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:48px}
.svc-chip{font-family:'IBM Plex Mono',monospace;font-size:11px;line-height:14px;
  text-transform:uppercase;letter-spacing:.75px;padding:8px 12px;border-radius:4px;
  border:1px solid var(--border-subtle);color:var(--text-medium)}
.svc-chip:nth-child(6n+1){background:var(--teal-16)}
.svc-chip:nth-child(6n+2){background:var(--purple-16)}
.svc-chip:nth-child(6n+3){background:#56a2ff36}
.svc-chip:nth-child(6n+4){background:#ffbe5540}
.svc-chip:nth-child(6n+5){background:#7df38154}
.svc-chip:nth-child(6n+6){background:#ff69d230}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc-card{position:relative;display:flex;flex-direction:column;border-radius:8px;
  background:var(--surface-card);min-height:320px;overflow:hidden}
.svc-card .img-wrap{border-radius:8px 8px 0 0;aspect-ratio:4/3}
.svc-card .img-wrap>img{aspect-ratio:4/3}
.svc-body{display:flex;flex-direction:column;gap:8px;padding:24px;flex:1}
.svc-body .h6{letter-spacing:-.3px}
.svc-body .b3{color:var(--text-medium)}
.svc-caption{transition:transform .4s cubic-bezier(.25,.46,.45,.94)}
@media (hover:hover){
  .svc-card .svc-caption{transform:translateY(8px)}
  .svc-card:hover .svc-caption{transform:translateY(0)}
}
@media (max-width:991px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:479px){.svc-grid{grid-template-columns:1fr}}

/* ---------- 5. How it works ---------- */
.how{padding:var(--sec-s) 0 var(--sec-m);background:var(--bg)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:0}
.how-card{display:flex;flex-direction:column;gap:16px}
.how-card .img-wrap{aspect-ratio:4/3}
.how-num{font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:17px;
  letter-spacing:.75px;color:var(--teal-deep)}
.how-card .h5{margin-top:4px}
.how-card .b2{color:var(--text-medium);max-width:var(--measure)}
.how-cta{margin-top:64px;display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:767px){
  .how-grid{grid-template-columns:1fr;gap:40px}
  .how-cta{margin-top:40px}
}

/* ---------- 6. About Bayti ---------- */
.about{padding:var(--sec-s) 0 var(--sec-m);background:var(--bg-two)}
.about-grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
.about-copy .h3{margin-bottom:24px}
.about-copy p{color:var(--text-medium);max-width:var(--measure-5);margin-bottom:16px}
.about-values{margin-top:40px;display:grid;gap:0}
.about-values li{display:flex;gap:16px;align-items:baseline;padding:16px 0;
  border-top:1px solid var(--ink-16)}
.about-values li::before{content:"→";color:var(--teal-deep);font-family:'IBM Plex Mono',monospace;
  font-size:13px}
.about-media{display:flex;flex-direction:column;gap:16px;position:sticky;top:120px}
.about-media .parallax{aspect-ratio:4/5}
.parallax{position:relative;overflow:hidden;border-radius:8px}
.parallax .parallax-inner{position:absolute;left:0;top:0;width:100%;height:115%;
  object-fit:cover;will-change:transform}
/* Recipe D — content-panel expansion card */
.reveal-card{position:relative;border-radius:8px;overflow:hidden;padding:12px;
  background:var(--surface-card)}
.reveal-card .img-wrap{aspect-ratio:16/10;border-radius:8px}
.reveal-panel{position:absolute;left:12px;right:12px;bottom:12px;height:64px;overflow:hidden;
  border-radius:8px;background:var(--paper-100);
  transition:height .8s cubic-bezier(.76,0,.24,1)}
.reveal-panel-inner{padding:16px;display:flex;flex-direction:column;gap:8px}
.reveal-panel .b3{color:var(--text-medium);opacity:0;transform:translateY(20px);
  transition:opacity .4s cubic-bezier(.25,.46,.45,.94),transform .4s cubic-bezier(.25,.46,.45,.94)}
.reveal-panel .b3:nth-of-type(2){transition-delay:.05s}
@media (hover:hover){
  .reveal-card:hover .reveal-panel{height:calc(100% - 24px)}
  .reveal-card:hover .reveal-panel .b3{opacity:1;transform:translateY(0);transition-delay:.45s}
  .reveal-card:hover .reveal-panel .b3:nth-of-type(2){transition-delay:.5s}
}
.about-accred{margin-top:64px;padding-top:32px;border-top:1px solid var(--ink-16)}
.about-accred .label-2{display:block;color:var(--text-medium);margin-bottom:24px}
.accred-row{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.accred-row img{height:44px;width:auto;mix-blend-mode:multiply;opacity:.8;
  transition:opacity .3s ease,transform .3s ease}
@media (hover:hover){.accred-row img:hover{opacity:1;transform:scale(1.06)}}
/* char-scrub statement */
.scrub-chars span{opacity:.2;transition:opacity .3s linear}
.scrub-chars span.is-lit{opacity:1}
@media (max-width:991px){
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-media{position:static}
  .accred-row{gap:24px}
  .accred-row img{height:34px}
}