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

   Third round. Kept in its own file like the others so each round stays
   legible and revertible on its own; all three fold into site.css at sign-off.
   ========================================================================== */

/* ---------- The bronze is retired.
     The client asked for these bands to take the same warm dark as the home
     page statement band, R63 G60 B55. That leaves the site on two schemes,
     bone and dark, which is simpler and more like the reference site. The
     class name stays .tk-scheme-bronze so nothing else has to be touched;
     renaming it across nine templates would be churn for no gain. ---------- */
.tk-scheme-bronze {
  --pm-fg: #E9E5E0;
  --pm-fg-muted: rgba(233, 229, 224, 0.62);
  --pm-border-color: rgba(233, 229, 224, 0.18);
  background: #3F3C37;
  color: #E9E5E0;
}
.tk-scheme-bronze .pm-lede { color: rgba(233, 229, 224, 0.72); }
.tk-scheme-bronze .pm-eyebrow { color: rgba(233, 229, 224, 0.55); }
.tk-scheme-bronze .pm-btn {
  background: #E9E5E0; color: #2A2825; border-color: #E9E5E0;
}
.tk-scheme-bronze .pm-btn:hover { background: transparent; color: #E9E5E0; }
.tk-carousel__btn:hover:not(:disabled) { background: #E9E5E0; color: #2A2825; }

/* ---------- The reviews carousel takes the same heading treatment as the
     rest of the site, not the small tracked label it had. ---------- */
.tk-carousel__heading {
  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;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 24ch;
}

/* ---------- The header stays put on a phone.
     Sticky rather than fixed, so it needs no compensating offset and cannot
     cover the top of a page when JavaScript is off. The drop panel is
     absolutely positioned against this, so it comes along. ---------- */
@media (max-width: 991px) {
  .navbar-17 {
    position: sticky;
    top: 0;
    z-index: 50;
  }
}

/* ---------- Projects line up rather than stagger.
     The offset on every second card was deliberate, but the client reads it
     as a mistake on desktop, and he is the one who has to look at it. ------ */
@media (min-width: 768px) {
  .portfolio-07__item:nth-child(even) { margin-block-start: 0; }
}

/* ---------- Photographs between sections, to break up the text.
     Three variants: one full-bleed, a pair side by side, and a contained
     single. All of them lose their top and bottom padding, because the
     sections either side already have their own. ---------- */
.tk-band { padding-block: 0; }
.tk-band figure { margin: 0; overflow: hidden; }
.tk-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tk-band--full .pm-container { max-width: none; padding-inline: 0; }
.tk-band--full figure { aspect-ratio: 21 / 9; max-height: 70vh; }
@media (max-width: 767px) { .tk-band--full figure { aspect-ratio: 3 / 2; } }

.tk-band--pair .tk-band__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 768px) {
  .tk-band--pair .tk-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tk-band--pair figure { aspect-ratio: 4 / 3; }

.tk-band--single figure { aspect-ratio: 16 / 9; }

/* ---------- The directors' portrait, shown whole.
     It was cropped to 3:2 and the client wants the full frame on every size,
     so the ratio comes off and the image sets its own height. ---------- */
.tk-portrait figure {
  aspect-ratio: auto;
  max-width: 56rem;
  margin-inline: auto;
}
.tk-portrait img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---------- "View projects" panel on a service page ---------- */
.tk-viewprojects { padding-block: 0; }
.tk-viewprojects a {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  text-decoration: none;
}
@media (max-width: 767px) { .tk-viewprojects a { aspect-ratio: 3 / 2; } }
.tk-viewprojects img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms var(--pm-ease);
}
.tk-viewprojects a:hover img { transform: scale(1.03); }
.tk-viewprojects__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 19, 17, 0.62), rgba(20, 19, 17, 0.18));
}
.tk-viewprojects__label {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) var(--pm-gutter);
  color: #EFEBE6;
  font-family: var(--pm-font-sans);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; align-items: center; gap: var(--pm-space-2);
}

/* ---------- The studio on a map, in black and white.
     A plain Google embed, desaturated in CSS rather than fetched as a static
     image, so there is no API key to keep alive and no usage to meter. ----- */
.tk-map { padding-block: 0; }
.tk-map iframe {
  display: block;
  width: 100%;
  height: clamp(18rem, 42vh, 28rem);
  border: 0;
  filter: grayscale(1) contrast(1.06);
}
.tk-map__note {
  padding-block: var(--pm-space-5);
  font-size: 0.8125rem;
  color: var(--pm-fg-muted);
}

/* ==========================================================================
   Location pages, rebuilt to the client's nine-section structure
   ========================================================================== */

.tk-loc { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.tk-loc 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: 26ch;
  margin: 0 0 var(--pm-space-6);
}
.tk-loc__body { max-width: 62ch; }
.tk-loc__body p { font-size: 1.0625rem; line-height: 1.8; }
.tk-loc__body p + p { margin-top: var(--pm-space-5); }
.tk-loc .pm-btn-group { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* A project grid nested inside a location section brings its own section and
   its own container with it. Inside .tk-loc both are already there, so they
   are reset rather than stacked, which was adding roughly 180px of dead space
   above and below the three cards and indenting them twice. */
.tk-loc .portfolio-07 {
  padding-block: 0;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
.tk-loc .portfolio-07 .pm-container {
  max-width: none;
  padding-inline: 0;
}
.tk-loc .portfolio-07 .pm-btn-group--center { margin-top: clamp(2rem, 3vw, 2.5rem); }

/* The six process stages, shown open rather than behind an accordion: on a
   location page they are a summary, not the whole subject of the page. */
.tk-miniprocess__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
}
@media (min-width: 700px)  { .tk-miniprocess__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tk-miniprocess__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tk-miniprocess__item { border-top: 1px solid var(--pm-border-color); padding-top: var(--pm-space-5); }
.tk-miniprocess__num {
  font-family: var(--pm-font-display);
  font-size: 1.5rem; font-weight: 300; line-height: 1;
  color: var(--pm-fg-muted); opacity: 0.7;
  display: block; margin-bottom: var(--pm-space-3);
}
.tk-miniprocess__title {
  font-family: var(--pm-font-sans);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 400; margin: 0 0 var(--pm-space-3);
}
.tk-miniprocess__item p { font-size: 0.9375rem; line-height: 1.7; margin: 0; }

/* Sections 4 and 6 carry a sub-heading under the section label. */
.tk-loc__kicker {
  font-family: var(--pm-font-sans);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pm-fg-muted);
  margin: 0 0 var(--pm-space-4);
}

/* The questions at the foot of a location page. */
.tk-locfaqs .pm-accordion { border-top: 1px solid var(--pm-border-color); }
.tk-locfaqs .pm-accordion__item { border-bottom: 1px solid var(--pm-border-color); }
.tk-locfaqs .pm-accordion__trigger {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--pm-space-4);
  width: 100%; text-align: left; padding-block: var(--pm-space-6);
  font-family: var(--pm-font-sans);
  font-size: 1rem; font-weight: 300; line-height: 1.4;
}
.tk-locfaqs .pm-accordion__content { padding-bottom: var(--pm-space-7); }
.tk-locfaqs .pm-accordion__content p { max-width: 62ch; font-size: 0.9375rem; line-height: 1.8; }

/* ---------- The "how we work" band on the process page, on the dark.
     The client asked for this one section to take the same warm dark as the
     home page statement band. The eyebrow and the body are the only things in
     it, so the scheme class does the whole job. ---------- */
.tk-prose--facts.tk-scheme-bronze .tk-prose__body p { color: rgba(233, 229, 224, 0.82); }

/* ---------- ARB and RIBA in the footer.
     Sized by HEIGHT, never width. RIBA is a wide wordmark at roughly 2.5:1
     and ARB is a stacked block at roughly 1:1, so matching their widths would
     leave the RIBA mark overbearing and the ARB one illegible. The two heights
     below are set so the marks read at about the same visual weight.

     Left-aligned with everything else in the footer, and sitting above the
     bottom bar, which brings its own rule, so there is no border here. ----- */
.tk-accred {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.tk-accred img {
  display: block;
  width: auto;
  max-width: 100%;
}
.tk-accred__riba { height: 26px; }
.tk-accred__arb  { height: 54px; }
@media (max-width: 480px) {
  .tk-accred { gap: 1.5rem; }
  .tk-accred__riba { height: 22px; }
  .tk-accred__arb  { height: 46px; }
}