/* Fryk Works — clients page (light marketing register) */

/* ── INTRO ── */
.refp-intro{
  padding:192px 0 96px;
}
.refp-intro .sec-label{
  display:block;
  margin-bottom:26px;
}
.refp-h{
  font-size:clamp(38px,5.5vw,72px);
  font-weight:300;
  line-height:1.05;
  letter-spacing:-.038em;
  color:var(--ink);
  margin-bottom:26px;
  text-wrap:balance;
}
.refp-sub{
  font-size:16px;
  line-height:1.7;
  color:var(--ink-60);
  font-weight:300;
  max-width:52ch;
  text-wrap:pretty;
}

/* ── CLIENT GRID ── */
.refp-clients{
  padding:0 0 128px;
}
.refp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.refp-cell{
  position:relative;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
  background:var(--bg);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:background var(--motion-dur-hover) var(--ease-out);
}
.refp-cell:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:-3px;
}

/* default layer — logo only */
.refp-logo{
  position:relative;
  z-index:1;
  max-width:58%;
  max-height:42%;
  object-fit:contain;
  filter:grayscale(1);
  opacity:var(--logo-opacity);
  transition:opacity 360ms var(--ease-out);
}
.refp-logo-ph{
  position:relative;
  z-index:1;
  width:44%;
  max-width:100px;
  aspect-ratio:5/3;
  background:linear-gradient(148deg,#e8e7e3 0%,#d5d4d0 100%);
  border-radius:2px;
  opacity:.85;
  transition:opacity 360ms var(--ease-out);
}
.refp-desc{
  position:relative;
  z-index:1;
  max-width:72%;
  padding:0 8px;
  font-size:clamp(12px,1.2vw,14px);
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.01em;
  text-align:center;
  color:var(--ink-60);
  text-wrap:balance;
  transition:opacity 360ms var(--ease-out);
}

/* hover/focus reveal */
.refp-reveal{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity 360ms var(--ease-out);
}
.refp-reveal.is-fallback{
  background:linear-gradient(155deg,#1a1a18 0%,#3d3d38 55%,#5a5a52 100%);
  transform:scale(1);
  transition:
    opacity 360ms var(--ease-out),
    transform 360ms var(--ease-out);
}
.refp-reveal img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1);
  transition:transform 360ms var(--ease-out);
}
.refp-reveal::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.06) 42%,rgba(0,0,0,.62) 100%);
}
.refp-meta{
  position:absolute;
  left:22px;
  right:22px;
  bottom:18px;
  z-index:1;
}
.refp-name{
  display:block;
  font-size:clamp(18px,1.8vw,24px);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--white);
}
.refp-sector{
  display:block;
  margin-top:7px;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--white-55);
}

/* all cells: hover/focus reveals image + name */
.refp-cell:focus-visible .refp-reveal{opacity:1}
.refp-cell:focus-visible .refp-logo,
.refp-cell:focus-visible .refp-logo-ph,
.refp-cell:focus-visible .refp-desc{opacity:0}
.refp-cell:focus-visible .refp-reveal.has-img img,
.refp-cell:focus-visible .refp-reveal.is-fallback{transform:scale(1.04)}

@media (hover:hover) and (pointer:fine){
  .refp-cell:hover .refp-reveal{opacity:1}
  .refp-cell:hover .refp-logo,
  .refp-cell:hover .refp-logo-ph,
  .refp-cell:hover .refp-desc{opacity:0}
  .refp-cell:hover .refp-reveal.has-img img{transform:scale(1.04)}
  .refp-cell:hover .refp-reveal.is-fallback{
    transform:scale(1.04);
    transition:opacity 360ms var(--ease-out),transform 360ms var(--ease-out);
  }
}

/* noscript fallback */
.refp-static{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
  border-left:1px solid var(--border);
}
.refp-static li{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:48px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.refp-static li::before{
  content:"";
  width:44%;
  max-width:100px;
  aspect-ratio:5/3;
  background:linear-gradient(148deg,#e8e7e3 0%,#d5d4d0 100%);
  border-radius:2px;
}

/* ── DARK BAND (closing CTA) ── */
.refp-dark{
  background:var(--bg-dark);
}
.refp-dark .final-cta{
  padding:120px 0 140px;
  border-top:none;
}
.refp-dark .fcta-h{color:var(--white)}
.refp-dark .btn-solid{
  background:var(--white);
  color:var(--ink);
  border-color:var(--white);
}
@media (hover:hover) and (pointer:fine){
  .refp-dark .btn-solid:hover{
    background:transparent;
    color:var(--white);
    border-color:var(--white-border);
  }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion:reduce){
  .refp-cell,
  .refp-logo,
  .refp-logo-ph,
  .refp-desc,
  .refp-reveal,
  .refp-reveal img,
  .refp-reveal.is-fallback{transition:none}
  .refp-cell:focus-visible .refp-reveal.has-img img,
  .refp-cell:focus-visible .refp-reveal.is-fallback,
  .refp-cell:hover .refp-reveal.has-img img,
  .refp-cell:hover .refp-reveal.is-fallback{transform:none}
}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .refp-grid,
  .refp-static{grid-template-columns:repeat(3,1fr)}
  .refp-intro{padding:160px 0 72px}
}
@media(max-width:640px){
  .refp-grid,
  .refp-static{grid-template-columns:repeat(2,1fr)}
  .refp-intro{padding:136px 0 56px}
  .refp-clients{padding-bottom:96px}
  .refp-dark .final-cta{padding:88px 0 108px}
}