/* page-hub2.css: What we fit catalogue hub (study 07 design language) */

body{
  background:var(--cream);color:var(--teal);
  font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.11 0 0 0 0 0.28 0 0 0 0 0.35 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
section{padding:clamp(60px,9vh,100px) 0}

.hub-cards{
  margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:1000px){.hub-cards{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hub-cards{grid-template-columns:1fr}}
.hcard{
  display:flex;flex-direction:column;gap:0;text-decoration:none;
  background:#fff;border:1.5px solid var(--teal-faint);border-radius:14px;
  padding:26px 24px 22px;position:relative;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .35s;
}
.hcard:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 14px 32px rgba(28,72,90,.14);border-color:var(--marigold)}
.h-ic{
  width:52px;height:52px;padding:9px;box-sizing:border-box;
  background:rgba(28,72,90,.06);border:1.5px solid rgba(28,72,90,.14);border-radius:12px;
  margin-bottom:14px;transition:background .25s,border-color .25s;
}
.hcard:hover .h-ic{background:var(--marigold);border-color:var(--marigold)}
.hcard h4{
  font-family:'Teko',sans-serif;font-weight:600;font-size:26px;letter-spacing:.07em;text-transform:uppercase;color:var(--teal);
  margin-bottom:6px;
}
.hcard p{font-size:14.5px;color:var(--teal-soft);line-height:1.6;flex:1}
.h-go{
  margin-top:16px;font-family:'Teko',sans-serif;font-weight:600;font-size:16px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rust);
}
.hcard:hover .h-go{text-decoration:underline;text-underline-offset:4px}

@media(max-width:760px){
  section{padding:clamp(44px,6vh,70px) 0}
  .sec-sub{padding:0 6px}
}