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

/* ---------- 4 · Services showcase ---------- */
.services-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; }
.services-grid { display:grid; grid-template-columns:1fr; gap:15px; }
@media (min-width:550px)  { .services-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1279px) { .services-grid { grid-template-columns:repeat(4,1fr); } }
.svc-card { display:flex; flex-direction:column; gap:18px; }
.svc-card .img-hover { aspect-ratio:1/1; }
.svc-card h3 { font-size:clamp(20px,1.8vw,24px); font-weight:500; line-height:1.25; }
.svc-card p { color:rgba(0,0,0,.75); flex:1; }
.svc-foot { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:16px; border-top:1px solid var(--bt-border-soft); }
.svc-foot .cat { font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bt-accent-2-deep); }
.svc-link { position:absolute; inset:0; border-radius:10px; }
.cat-chip-row { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
.cat-chip-row .chip { padding:12px 20px; font-size:13px; }

/* ---------- 5 · How it works ---------- */
.how-rows { max-width:1080px; }
.how-row { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:20px 25px;
  align-items:center; padding:30px 0; border-top:1px solid var(--bt-rule); }
.how-row:last-child { border-bottom:1px solid var(--bt-rule); }
.how-row .img-hover { width:110px; height:82px; flex:none; }
@media (min-width:1024px) { .how-row .img-hover { width:160px; height:110px; } }
.how-copy .eyebrow { display:block; margin-bottom:12px; }
.how-copy h3 { margin-bottom:10px; transition:color .6s var(--bt-ease); }
.how-copy p { max-width:56ch; color:rgba(0,0,0,.75); }
@media (hover:hover) { .how-row:hover .how-copy h3 { color:var(--bt-accent); } }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .how-row:hover .img-hover img { transform:scale(1.08); }
  .how-row:hover .arrow-diag { opacity:1; transform:translateZ(0); }
}
@media (max-width:549px) {
  .how-row { grid-template-columns:1fr; }
  .how-row .img-hover { width:100%; height:160px; }
  .how-row .arrow-diag { display:none; }
}

/* ---------- 6 · About / Why Bayti ---------- */
.about-grid { display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
@media (min-width:1024px) { .about-grid { grid-template-columns:.74fr 1fr; gap:60px; } }
.about-media { position:relative; }
.about-media .blob { position:absolute; width:60%; aspect-ratio:1/1; border-radius:50%;
  background:var(--bt-accent-2); filter:blur(90px); opacity:.35; top:-8%; left:-10%; z-index:-1; }
.about-media .img-hover { aspect-ratio:4/5; max-height:640px; }
.about-copy .eyebrow { display:block; margin-bottom:18px; }
.about-copy h2 { margin-bottom:26px; }
.about-copy p { margin-bottom:18px; max-width:60ch; }
.about-bullets { margin:28px 0 34px; display:grid; gap:14px; }
.about-bullets li { display:flex; gap:14px; align-items:flex-start; font-weight:400; }
.about-bullets .dot { margin-top:5px; width:10px; height:10px; }
.accred-row { margin-top:40px; padding-top:30px; border-top:1px solid var(--bt-border-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:22px; }
.accred-row .img-hover { border-radius:6px; background:#fff; padding:8px 14px; }
.accred-row img { height:44px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.75;
  transition:filter .6s var(--bt-ease),opacity .6s var(--bt-ease); }
@media (hover:hover) { .accred-row .img-hover:hover img { filter:none; opacity:1; } }
.accred-note { width:100%; font-size:12px; color:var(--bt-placeholder); }