/* ==========================================================================
   Thurston King Architects, client review of 30 September 2026.

   Fourth round. Its own file like the three before it, so each round stays
   readable and revertible on its own. All four fold into site.css at sign-off,
   which is the point to stop adding to this list.
   ========================================================================== */

/* ---------- The practice, on the dark, with the directors alongside.

     The client asked for the copy and the photograph side by side on a
     desktop, and the photograph underneath the copy on a phone. The copy comes
     first in the markup, so the phone case needs no reordering: the grid
     collapses to one column and the picture falls where it was asked to.

     The portrait keeps its own proportions rather than being cropped to fit
     the column, which is the same decision taken for it on the about page
     in the previous round. ---------- */
.tk-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .tk-team__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(3rem, 6vw, 5rem);
  }
}
.tk-team__copy h2 {
  font-family: var(--pm-font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  max-width: 20ch;
  margin: 0 0 var(--pm-space-6);
}
.tk-team__copy p {
  font-size: 1.0625rem;
  line-height: 1.8;
  max-width: 58ch;
  color: rgba(233, 229, 224, 0.82);
}
.tk-team__copy p + p { margin-top: var(--pm-space-5); }
.tk-team__media { margin: 0; }
.tk-team__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- The process page opens on the dark band.

     Reusing the home page's statement treatment verbatim, which is what the
     client asked for: same classes, so it cannot drift away from the home
     page later. The only addition is the supporting paragraph underneath,
     which the home page carries as a single lede and this page as prose. ---- */
.tk-process-intro__body p {
  font-size: 1.0625rem;
  line-height: 1.8;
  max-width: 68ch;
  margin-inline: auto;
  color: rgba(233, 229, 224, 0.78);
}
.tk-process-intro__body p + p { margin-top: var(--pm-space-5); }

/* ---------- The services hub lost its duplicated sections, so the reviews
     now close the page above the enquiry panel. Nothing to restyle, but the
     carousel needs the same breathing room the sections had. ---------- */
.tk-svclist-wrap + .tk-band { margin-top: 0; }

/* ---------- The Google reviews panel, under whichever review section a page
     shows.

     The client's sketch was a solid dark bar, drawn on a light background.
     Every review section on this site already sits on the dark, so a dark bar
     inside it would be invisible; what it wants is the same shape in reverse.
     So the panel is drawn entirely in currentColor: a hairline outline and
     type that inherit whatever the band around them is. That way the one set
     of rules works on the dark quote band, the dark carousel and the light
     reviews strip without three variants to keep in step.

     Stars are inline SVG, not a font and not a character. The star glyph is
     not reliably present across systems and renders at a different weight in
     each, which on a five-star row is immediately obvious.

     Zero radius, zero shadow, hairline rules: the same three rules the rest
     of the site is built on. The hover state deepens the rule rather than
     filling the block, so it stays a quiet line of text rather than becoming
     the loudest thing in the section. ---------- */
.tk-greviews-wrap {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.tk-greviews {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  max-width: 100%;
  padding: 1.125rem clamp(1.25rem, 4vw, 2.25rem);
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, opacity 200ms ease;
}
.tk-greviews:hover,
.tk-greviews:focus-visible {
  border-color: color-mix(in srgb, currentColor 72%, transparent);
  text-decoration: none;
}
.tk-greviews:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.tk-greviews__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
}
.tk-greviews__rating {
  font-family: var(--pm-font-display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
}
.tk-greviews__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
}
.tk-greviews__stars svg {
  display: block;
  width: 1rem;
  height: 1rem;
}
.tk-greviews__name {
  font-size: 0.9375rem;
  line-height: 1.4;
  opacity: 0.86;
}
/* The practice name and the rating read as one line on a desktop, with a
   hairline between them. On a phone the row wraps and the divider would hang
   at the end of a line, so it is only drawn where the row is still a row. */
@media (min-width: 560px) {
  .tk-greviews__name {
    padding-left: 0.75rem;
    border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  }
}
.tk-greviews__label {
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.68;
}

/* The strip on the light scheme is the one place the panel sits on bone, and
   there the hairline needs a touch more weight to read at all. */
.tk-reviews .tk-greviews {
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}
.tk-reviews .tk-greviews:hover,
.tk-reviews .tk-greviews:focus-visible {
  border-color: color-mix(in srgb, currentColor 55%, transparent);
}