/* ============================================================
   Wuthqa Consultancy — Homepage: Practice / Industries / Memberships / Clients
   ============================================================ */

/* ---- Areas of Practice: 8-card grid, colour-fill on hover ---- */
/* Flowing-line + concentric-ring vector backdrop (own take on the reference),
   masked to fade in low so the heading and cards stay clean. */
/* Full-bleed: break out of the section's max-width container to span the screen */
.wq-prac-bg { position: absolute; top: 0; height: 100%; left: 50%; transform: translateX(-50%); width: 100vw;
  z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%); }
.wq-prac-waves path { fill: none; stroke: rgba(200, 168, 75, .30); stroke-width: .5; }
.wq-prac-rings circle { fill: none; stroke: rgba(26, 26, 26, .07); stroke-width: 1; }
.wq-prac-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
#practice .wq-head { position: relative; z-index: 1; }
.wq-prac-card { display: flex; flex-direction: column; padding: 20px 20px 18px;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.wq-prac-card .wq-svc-top { margin-bottom: 12px; }
.wq-prac-card h3 { font-size: 17.5px; line-height: 1.28; margin-bottom: 6px; transition: color .3s var(--ease); }
.wq-prac-card p { font-size: 13.5px; margin: 0 0 12px; line-height: 1.55; transition: color .3s var(--ease); }
.wq-prac-copy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.wq-prac-learn { margin-top: 2px; font-size: 13.5px; }

/* Colour-fill on hover: card adopts the brand dark, text turns light, gold accents. */
.wq-prac-card:hover { background: var(--teal); border-color: var(--teal); transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.wq-prac-card:hover h3 { color: #fff; }
.wq-prac-card:hover .wq-prac-copy { color: rgba(255, 255, 255, .82); }
.wq-prac-card:hover .wq-prac-learn { color: var(--gold); }
.wq-prac-card:hover .wq-prac-learn .wq-learn-ic { transform: translateX(3px); }
/* Icon chip (inline-styled) → gold on the dark fill */
.wq-prac-card:hover .wq-svc-top > div { background: var(--gold-tint) !important; color: var(--gold) !important; }

/* ---- Industries: centered icon / title / description ---- */
.wq-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.wq-ind-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); padding: 30px 22px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.wq-ind-tile:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(255, 255, 255, .075); box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .85); }
.wq-ind-ic { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 56px; height: 56px; border-radius: var(--r-full); background: var(--gold-tint); color: var(--gold);
  transition: background .3s var(--ease), color .3s var(--ease); }
.wq-ind-tile:hover .wq-ind-ic { background: var(--gold); color: var(--teal-900); }
.wq-ind-name { font-weight: 700; font-size: 15.5px; color: #fff; line-height: 1.35; }
.wq-ind-desc { font-size: 13px; color: rgba(255, 255, 255, .66); line-height: 1.6; margin: 0; }

/* ---- Memberships & Certificates: auto-scrolling marquee, faded edges ---- */
.wq-logo-marquee { position: relative; overflow: hidden; margin: 4px -4px 0; padding: 10px 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.wq-logo-track { display: flex; width: max-content; will-change: transform; animation: wqLogoScroll 46s linear infinite; }
.wq-logo-marquee:hover .wq-logo-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .wq-logo-track { animation: none; } }
@keyframes wqLogoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wq-logo-tile { flex: 0 0 184px; margin-inline-end: 16px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; min-height: 140px; padding: 22px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--fg-3); filter: grayscale(1); opacity: .85; transition: all .3s var(--ease); }
.wq-logo-tile:hover { filter: grayscale(0); opacity: 1; border-color: var(--teal); color: var(--teal);
  background: #fff; box-shadow: var(--shadow-md); transform: translateY(-4px); }
.wq-logo-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: var(--r-md); border: 1px solid currentColor; color: inherit; }
.wq-logo-name { font-weight: 600; font-size: 13px; line-height: 1.4; color: inherit; letter-spacing: .01em; }
/* Logo image inside a marquee tile (memberships / certificates) — shared by the
   home Memberships strip and the company MembershipsBar. */
.wq-logo-imgwrap { display: inline-flex; align-items: center; justify-content: center; height: 72px; }
.wq-logo-img { max-height: 66px; max-width: 152px; object-fit: contain; }
.wq-logo-note { text-align: center; margin-top: 22px; font-size: 12.5px; color: var(--fg-3); font-style: italic; }
/* Our Clients now sits on a black section → lighten its note */
#clients .wq-logo-note { color: rgba(255, 255, 255, .5); }

/* ---- Our Clients: staggered diamond (diagonal) lattice ---- */
.wq-clients-diag { position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px 0; }
/* Diamond lattice sized to the client boxes (~194px diagonal). Drawn behind the
   boxes (::before, strong) AND faintly over them (::after, both perfectly
   aligned) so the lattice lines appear to run straight through the diamonds. */
.wq-clients-diag::before,
.wq-clients-diag::after {
  content: ''; position: absolute; pointer-events: none;
  top: -44px; bottom: -44px; left: 50%; transform: translateX(-50%); width: min(1200px, 98vw);
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 78% 88% at 50% 50%, #000 32%, transparent 85%);
          mask-image: radial-gradient(ellipse 78% 88% at 50% 50%, #000 32%, transparent 85%);
}
.wq-clients-diag::before { z-index: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 135px, rgba(200, 168, 75, .2) 135px 137px),
    repeating-linear-gradient(-45deg, transparent 0 135px, rgba(200, 168, 75, .2) 135px 137px); }
.wq-clients-diag::after { z-index: 2;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 135px, rgba(200, 168, 75, .085) 135px 137px),
    repeating-linear-gradient(-45deg, transparent 0 135px, rgba(200, 168, 75, .085) 135px 137px); }
.wq-cl-row { position: relative; z-index: 1; display: flex; }
.wq-cl-row:nth-child(odd) { transform: translateX(-61px); }
.wq-cl-row:nth-child(even) { transform: translateX(61px); }
.wq-cl-row + .wq-cl-row { margin-top: -62px; }
.wq-cl-cell { position: relative; width: 230px; height: 230px; margin: 6px;
  display: flex; align-items: center; justify-content: center; }
/* The rotated square IS the diamond; solid white box pops on the black section */
.wq-cl-cell::before { content: ''; position: absolute; inset: 40px; z-index: 0;
  background: #fff; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .7); transform: rotate(45deg); transition: all .3s var(--ease); }
.wq-cl-cell:hover { z-index: 2; }
.wq-cl-cell:hover::before { border-color: var(--teal); box-shadow: var(--shadow-lg); transform: rotate(45deg) scale(1.06); }
.wq-clients-diag .wq-client-name { position: relative; z-index: 1; max-width: 132px;
  font-weight: 700; font-size: 12px; line-height: 1.35; color: var(--teal);
  text-align: center; letter-spacing: .01em; }
.wq-cl-cell:hover .wq-client-name { color: var(--gold-600); }
/* Client logo sits upright in the diamond's central band */
.wq-clients-diag .wq-cl-logo { position: relative; z-index: 1; max-width: 60%; max-height: 44%;
  object-fit: contain; transition: transform .3s var(--ease); }
.wq-cl-cell:hover .wq-cl-logo { transform: scale(1.06); }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 980px) {
  .wq-prac-grid { grid-template-columns: repeat(2, 1fr); }
  .wq-ind-grid { grid-template-columns: repeat(2, 1fr); }
  .wq-cl-cell { width: 176px; height: 176px; margin: 5px; }
  .wq-cl-cell::before { inset: 30px; }
  .wq-cl-row:nth-child(odd) { transform: translateX(-46px); }
  .wq-cl-row:nth-child(even) { transform: translateX(46px); }
  .wq-cl-row + .wq-cl-row { margin-top: -48px; }
}
@media (max-width: 560px) {
  .wq-prac-grid { grid-template-columns: 1fr; }
  .wq-ind-grid { grid-template-columns: 1fr; }
  /* Diamonds: fit three per row, drop the stagger on small screens */
  .wq-cl-cell { width: 30vw; height: 30vw; max-width: 124px; max-height: 124px; margin: 2px; }
  .wq-cl-cell::before { inset: 15%; }
  .wq-cl-row:nth-child(odd), .wq-cl-row:nth-child(even) { transform: none; }
  .wq-cl-row + .wq-cl-row { margin-top: 8px; }
  .wq-clients-diag .wq-client-name { max-width: 72%; font-size: 9.5px; }
}