/* Southside Racquet Club: real client work shown in the brand preview.
   Palette and type come from the club's own brand and style guide. */
.win, .pv {
  --sr-teal: #00aca1; --sr-black: #000; --sr-grey: #aaa9ad; --sr-white: #fff; --sr-tint: #e6f5f4;
  --sr-serif: "Times New Roman", Times, Georgia, serif;
}

/* ---------- Brand board (hero + services) ---------- */
.sb { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto auto; gap: 0.8rem; }
.sb > div { border-radius: 14px; }
.sb__logo { grid-column: 1 / 2; display: flex; align-items: center; justify-content: center; padding: 1.1rem; background: #fff; border: 1px solid var(--hair); }
.sb__logo img { display: block; width: 100%; height: auto; max-width: 210px; }
.sb__photo { grid-column: 2 / 3; grid-row: 1 / 3; min-height: 150px; background: url("work/southside/celebration.jpg") 60% 45% / cover no-repeat; }
.sb__sw { grid-column: 1 / 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; padding: 0; }
.sb__sw i { display: block; min-height: 44px; border-radius: 10px; }
.c-teal { background: var(--sr-teal); } .c-black { background: var(--sr-black); }
.c-grey { background: var(--sr-grey); } .c-white { background: #fff; border: 1px solid var(--hair); }
.sb__type { grid-column: 1 / 3; display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; background: #fff; border: 1px solid var(--hair); }
.sb__type > span:first-child { font-family: var(--sr-serif); font-size: 2.6rem; line-height: 1; color: var(--sr-teal); }
.sb__type p { margin: 0; font-family: var(--sr-serif); font-size: 0.95rem; line-height: 1.3; color: var(--ink); }

/* ---------- Shared cards ---------- */
.sr { display: grid; gap: 1rem; }
.sr-card {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px;
  padding: 1.6rem 1.2rem 2.2rem; border-radius: 18px; border: 1px solid var(--hair); background: #fff; overflow: hidden;
}
.sr-card img { display: block; width: 100%; height: auto; max-width: 300px; }
.sr-card--light { background: #fff; }
.sr-card--teal { background: var(--sr-teal); border-color: var(--sr-teal); }
.sr-card--black { background: #000; border-color: #000; }
.sr-card--plain { background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.sr-cap { position: absolute; left: 1rem; bottom: 0.75rem; margin: 0; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.sr-cap--top { top: 0.9rem; bottom: auto; }
.sr-card--teal .sr-cap, .sr-card--black .sr-cap { color: rgba(255, 255, 255, 0.75); }
.sr-note { margin-top: 1.1rem; font-size: 0.85rem; color: var(--graphite); }

/* Logo panel */
.sr--logo { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sr-c4 { grid-column: span 4; } .sr-c2 { grid-column: span 2; } .sr-c6 { grid-column: span 6; }
.sr--logo .sr-card--black img, .sr--logo .sr-card--teal img { max-width: 240px; }
.sr-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; width: 100%; padding-bottom: 1.4rem; }
.sr-sw { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.1rem; min-height: 96px; padding: 0.7rem; border-radius: 12px; font-size: 0.72rem; color: #fff; }
.sr-sw b { font-weight: 700; } .sr-sw i { font-style: normal; opacity: 0.8; font-size: 0.66rem; }
.sr-sw--teal { background: var(--sr-teal); } .sr-sw--black { background: #000; } .sr-sw--grey { background: var(--sr-grey); }
.sr-sw--white { background: #fff; color: var(--ink); border: 1px solid var(--hair); }
.sr-card--type { flex-direction: row; align-items: center; gap: 2rem; padding-bottom: 2.4rem; }
.sr-aa { margin: 0; font-family: var(--sr-serif); font-size: 5rem; line-height: 1; color: var(--sr-teal); }
.sr-typeline { font-size: 0.9rem; line-height: 1.7; color: var(--graphite); }
.sr-typeline b { color: var(--ink); }
.sr-sample { font-family: var(--sr-serif); font-size: 1.25rem; color: var(--ink); }

/* Website panel */
.sr-browser { overflow: hidden; background: #fff; border: 1px solid var(--hair); border-radius: 18px; box-shadow: var(--shadow-soft); }
.sr-browser__bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; background: #f4f6fb; border-bottom: 1px solid var(--hair); }
.sr-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfd5e6; }
.sr-browser__bar span { margin-left: 0.8rem; padding: 0.2rem 0.8rem; border-radius: 999px; background: #fff; font-size: 0.72rem; color: var(--graphite); }
.sr-site { background: #fff; }
.sr-site__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--hair); }
.sr-site__nav img { display: block; height: 22px; width: auto; }
.sr-site__links { display: flex; gap: 1.1rem; font-family: var(--sr-serif); font-size: 0.85rem; color: var(--ink); }
.sr-site__links em { font-style: normal; }
.sr-site__hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.5rem; align-items: center; padding: 2rem 1.3rem; background: var(--sr-tint); }
.sr-site__hero h4 { margin: 0; max-width: 16ch; font-family: var(--sr-serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; color: #0a0a0a; }
.sr-site__hero p { margin: 0.8rem 0 1.1rem; max-width: 36ch; font-size: 0.86rem; color: var(--graphite); }
.sr-site__btns { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.78rem; }
.sr-site__btns b { padding: 0.55rem 1rem; border-radius: 999px; background: var(--sr-teal); color: #fff; }
.sr-site__btns em { padding: 0.55rem 1rem; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 999px; font-style: normal; }
.sr-site__art { display: block; aspect-ratio: 4 / 3; border-radius: 22px; background: url("work/southside/handshake.jpg") center / cover no-repeat; }
.sr-site__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; padding: 1.3rem; }
.sr-site__cards div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem; background: #fff; border: 1px solid var(--hair); border-radius: 14px; }
.sr-site__cards img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 0.5rem; border-radius: 10px; }
.sr-site__cards b { font-size: 0.82rem; color: #0a0a0a; } .sr-site__cards em { font-style: normal; font-size: 0.74rem; color: var(--graphite); }

/* Messaging panel */
.sr--voice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr--voice .sr-card { align-items: flex-start; justify-content: flex-start; padding-top: 2.8rem; padding-bottom: 1.4rem; }
.sr-c2x { grid-column: span 2; }
.sr-card--tealbg { background: var(--sr-teal); border-color: var(--sr-teal); }
.sr-card--tealbg .sr-cap { color: rgba(255, 255, 255, 0.8); }
.sr-tagline { margin: 0; font-family: var(--sr-serif); font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.05; color: #fff; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sr-chips span { padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--sr-tint); color: #007a72; font-size: 0.82rem; font-weight: 600; }
.sr-list { display: grid; gap: 0.6rem; font-size: 0.9rem; color: var(--graphite); }
.sr-research { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--graphite); }

/* Print & signage panel */
.sr--print { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sr-fig { margin: 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--hair); background: #fff; }
.sr-fig img { display: block; width: 100%; height: auto; }
.sr-fig figcaption { padding: 0.7rem 1rem; font-size: 0.78rem; color: var(--graphite); }

/* Photo & video panel */
.sr-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.7rem; }
.sr-gallery figure { margin: 0; overflow: hidden; border-radius: 16px; grid-column: span 3; aspect-ratio: 3 / 2; }
.sr-gallery .g1 { grid-column: span 6; aspect-ratio: 2 / 1; }
.sr-gallery figure:nth-child(n+4) { grid-column: span 3; }
.sr-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.sr-gallery figure:hover img { transform: scale(1.04); }

@media (max-width: 760px) {
  .sr--logo .sr-c4, .sr--logo .sr-c2 { grid-column: span 6; }
  .sr-card--type { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .sr--voice, .sr--print { grid-template-columns: minmax(0, 1fr); }
  .sr-c2x { grid-column: auto; }
  .sr-site__hero { grid-template-columns: minmax(0, 1fr); }
  .sr-site__cards { grid-template-columns: minmax(0, 1fr); }
  .sr-site__links { display: none; }
  .sr-gallery figure, .sr-gallery figure:nth-child(n+4) { grid-column: span 6; }
  .sr-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Case-study switcher in the preview footer */
.pv__foot { flex-wrap: wrap; }
.pv__cs { position: relative; margin-left: auto; }
.pv__csmenu {
  position: absolute; right: 0; bottom: calc(100% + 0.6rem); z-index: 5; width: min(320px, 82vw);
  padding: 0.9rem; border: 1px solid var(--hair); border-radius: 18px; background: #fff; box-shadow: var(--shadow-soft);
}
.pv__csmenu[hidden] { display: none; }
.pv__cslabel { margin: 0 0 0.5rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.pv__csitem { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; width: 100%; padding: 0.7rem 0.8rem; border: 1px solid rgba(43, 66, 143, 0.3); border-radius: 12px; background: #edf0fb; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.pv__csitem strong { font-size: 0.92rem; }
.pv__csitem em { font-style: normal; font-size: 0.74rem; font-weight: 500; color: var(--graphite); }
.pv__csnote { margin: 0.8rem 0 0; font-size: 0.78rem; font-weight: 500; line-height: 1.5; color: var(--graphite); }
.pv__csnote a { color: var(--royal); font-weight: 700; }
@media (max-width: 560px) { .pv__foot > p { flex-basis: 100%; } .pv__cs { margin-left: 0; } }

/* "Click to explore" sits centred in the type card */
.sb__type { position: relative; }
.win .sb__type .win__hint { position: absolute; right: 1rem; top: 0; bottom: 0; margin-block: auto; height: fit-content; }

@media (max-width: 560px) {
  .win .sb__type .win__hint { position: static; margin: 0 0 0 auto; height: auto; flex: none; }
  .sb__type > span:first-child { font-size: 2rem; }
  .sb__type p { font-size: 0.85rem; }
}

/* Launches & events panel */
.sr--events { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sr-ev { align-items: flex-start; justify-content: flex-start; gap: 0.5rem; padding: 1.3rem 1.2rem; flex-direction: column; }
.sr-ev__n { font-family: var(--serif); font-size: 1.3rem; color: var(--royal); }
.sr-ev b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--ink); }
.sr-ev p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--graphite); }
.sr-ev--wide { grid-column: span 3; }
.sr-card--tealbg.sr-ev .sr-ev__n, .sr-card--tealbg.sr-ev b, .sr-card--tealbg.sr-ev p { color: #fff; }
.sr-card--tealbg.sr-ev .sr-ev__n { font-size: 0.68rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 760px) { .sr--events { grid-template-columns: minmax(0, 1fr); } .sr-ev--wide { grid-column: auto; } }