/* HOUP shared custom styles — used by index.html and our-team.html.
   Design tokens (--paper/--ink/--accent etc.) live in styles.css :root. */
/* O / X brand marks in the hero (recreates the live hereonup.com / Wix hero).
       The brand SVGs are inlined below; coloured via currentColor. Tweak here. */
    .hou-mark { display: block; flex: 0 0 auto; width: 232px; height: 232px; color: #fff; will-change: transform; }
    .hou-mark svg { width: 100%; height: 100%; display: block; fill: currentColor; }

    /* Exact Wix motion: an eased full rotation over the first 25% of the cycle,
       then hold still for the remaining 75%, looping. O and X use slightly
       different cycle lengths (5.3s / 4.7s) so they fall out of sync, as on Wix. */
    .hou-mark--o { transform-origin: 50% 50%; animation: hou-spin 5300ms linear infinite; margin-right: -2.5rem; }
    .hou-mark--x { transform-origin: 50% 50%; animation: hou-spin 4700ms linear infinite; }
    @keyframes hou-spin {
      0%   { animation-timing-function: cubic-bezier(.86, 0, .07, 1); transform: rotate(-360deg); }
      25%  { transform: rotate(0deg); }   /* spin done (~1.2s) */
      100% { transform: rotate(0deg); }   /* hold / pause */
    }

    /* Greyed-out client logo grid (replaces the text brand names).
       5 equal columns × 2 rows on desktop, like the live homepage. Each brand
       PNG is used as a mask so it renders in one uniform ink tone regardless of
       the source colour (some logos are white/black/grey); each sits in an equal
       box and is scaled to fit (mask-size:contain), so square/stacked logos read
       at the same visual size as wordmarks. Hover darkens to full. */
    .hou-brands-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      place-items: center;
      gap: 32px 16px;
      max-width: 560px;
      margin: 0 auto;
    }
    @media (min-width: 640px)  { .hou-brands-grid { grid-template-columns: repeat(3, 1fr); max-width: 840px; } }
    @media (min-width: 1024px) { .hou-brands-grid { grid-template-columns: repeat(5, 1fr); gap: 40px 24px; max-width: 1120px; } }
    .hou-brand {
      display: block; width: 120px; height: 56px;
      background-color: var(--ink-2);
      opacity: .55;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-position: center; mask-position: center;
      -webkit-mask-size: contain; mask-size: contain;
      transition: opacity .2s ease, background-color .2s ease;
    }
    .hou-brand:hover { opacity: 1; background-color: var(--ink); }
    @media (min-width: 1024px) { .hou-brand { width: 130px; height: 64px; } }

    /* Team cards: a fixed grid (all 4 visible, no horizontal/vertical scroll),
       2 columns on mobile, 4 from md up. Photos use a consistent box and
       object-fit:contain so the full headshot shows without cropping. */
    .hou-team-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    @media (min-width: 768px) { .hou-team-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
    .hou-team-grid > li { min-width: 0; container-type: inline-size; }   /* equal columns + size container for the fluid name below */
    .hou-team-photo { aspect-ratio: 2 / 3; }
    .hou-team-img { object-fit: contain; }
    /* Name scales with the card width so long names (e.g. Duncan) never spill
       out when the window is compressed; caps at the original text-3xl size. */
    .hou-team-name { font-size: clamp(1rem, 15cqi, 1.875rem); line-height: 1.1; }

    /* Respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .hou-mark--o, .hou-mark--x, .hou-hshape { animation: none; }
    }

/* ---- Team page (our-team.html) helpers ---- */
section[id] { scroll-margin-top: 5.5rem; }            /* clear the fixed header on anchor jumps */
.hou-bio-name { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; }

/* Team-page hero: a row of the four HOUP symbols (+, O, U, X), white, each
   doing the same eased spin-then-pause as the homepage marks, slightly out of
   sync (durations vary). Mask images are set inline in the markup (so the url
   resolves relative to the HTML page, like the brand logos). */
.hou-hero-shapes { align-items: center; gap: 1rem; }   /* display handled by hidden/lg:flex in markup */
.hou-hshape {
  display: block; flex: 0 0 auto; width: 64px; height: 64px;
  background-color: #fff;                       /* shape colour — try var(--ink) to make them bolder */
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transform-origin: 50% 50%; will-change: transform;
}
@media (min-width: 768px) { .hou-hshape { width: 84px; height: 84px; } .hou-hero-shapes { gap: 1.5rem; } }
.hou-hshape--1 { animation: hou-spin 4500ms linear infinite; }
.hou-hshape--2 { animation: hou-spin 5300ms linear infinite; }
.hou-hshape--3 { animation: hou-spin 4700ms linear infinite; }
.hou-hshape--4 { animation: hou-spin 4900ms linear infinite; }
/* Subtle variant for the dark homepage CTA: a slate just lighter than the
   ink block they sit on, so the shapes read as a quiet background detail. */
.hou-hshape--cta { background-color: var(--ink-3); }

/* Per-member "brands worked with" logo strips on the team page reuse the
   homepage client-logo grid (.hou-brands-grid + .hou-brand) for matching size
   and spacing — see the homepage section above. */