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

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

/* ---------- The header stays put at every width, not only on a phone.

     Round three made this sticky under 991px. The client has asked for the
     same behaviour on a desktop. Sticky rather than fixed, so it needs no
     compensating offset on the first section and cannot cover the top of a
     page with JavaScript off. The bar already has an opaque background from
     site.css, so nothing shows through it. ---------- */
.navbar-17 {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ---------- The last row of the home page services, centred.

     Five services in three columns leaves two cards hanging off the left of
     the second row. Six half-columns rather than three whole ones lets the
     odd row start on the half, which centres it without touching the card
     widths: every card still spans two of six, exactly a third.

     The offset is pinned to the case that actually needs it, five items, with
     :nth-child(4):nth-last-child(2). Show a sixth service and the rule stops
     matching on its own and the grid fills two clean rows, rather than
     leaving a hole where somebody has to remember to come back here. ------- */
@media (min-width: 1000px) {
  .tk-svc__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tk-svc__item { grid-column: span 2; }
  .tk-svc__item:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
}

/* ==========================================================================
   Headings: out of tracked capitals, into title case

   The site was built the way the reference site is, with section headings in
   light tracked capitals. The client asked for the display face in title case
   in three places, and then for every heading to follow.

   text-transform: capitalize is what does it, and it is worth knowing exactly
   what that means: the browser capitalises the first letter of EVERY word,
   including "and", "of", "the" and "in". On a two or three word heading that
   is title case. On a sentence it is not, it is a mistake with a rule behind
   it, which is why the sentence-length headings are listed out below and left
   in sentence case. Those are the dark statement bands, the closing enquiry
   panel, and the section headings on the location pages, all of which are
   written as full sentences with punctuation.

   The small tracked labels stay exactly as they are. The eyebrow above a
   heading is the only tracked type left on the site, which is what makes it
   read as a label rather than as a second heading.
   ========================================================================== */
.pm-section-head h2,
.tk-prose h2,
.tk-prose h3,
.faq-03 h2 {
  text-transform: capitalize;
  letter-spacing: 0;
}

/* Sized for capitals, so it needs a step up now it is not shouting. */
.tk-prose h2 {
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  font-weight: 400;
}

/* The home page services heading keeps its larger size and loses the caps. */
.tk-svc-head h2 { text-transform: capitalize; }

/* Every other heading on the page, including the ones the design system and
   the earlier rounds had left in capitals. */
main :is(h1, h2, h3, h4, h5, h6),
.footer-03 :is(h2, h3, h4) {
  text-transform: capitalize;
}

/* ---------- The sentences. See the note above: these are written as prose,
     so they keep sentence case. ---------- */
.cta-03 :is(h1, h2, h3),
.header-64 :is(h1, h2, h3),
.tk-scheme-ink :is(h1, h2, h3),
.tk-loc :is(h2, h3),
.tk-team :is(h2, h3),
.tk-bronze h2 {
  text-transform: none;
}

/* ==========================================================================
   The sub-headings inside the ruled bands

   The four items under "Working with us", the four reasons on a location page
   and the six process stages beside them are all the same component: a short
   title over two lines of copy, separated by a hairline. All three were set
   in the small tracked sans, which is the label treatment and made them read
   as captions rather than as the titles of the things underneath them.

   They now take the same face as the heading above them, set smaller and in
   title case. That gives the site one treatment for "the name of a thing"
   rather than four.
   ========================================================================== */
.tk-bronze__item h3,
.tk-why__title,
.tk-miniprocess__title {
  font-family: var(--pm-font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: capitalize;
  line-height: 1.3;
}

/* ---------- The two accordions the client named.

     Both were set in the small tracked sans, which is the label treatment.
     They are the titles of the things in the list, so they take the display
     face at the same size and weight as the other named things on the site.
     ---------- */
.tk-svclist__title,
.tk-stages__title {
  font-family: var(--pm-font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: capitalize;
  line-height: 1.3;
}

/* ---------- Image captions, across the site.

     Not .tk-quote figcaption or .tk-reviews__item figcaption: those are the
     attribution under a review, which is a label and stays in the sans. ---- */
.tk-pair figcaption,
.tk-band figcaption,
.tk-gallery figcaption {
  font-family: var(--pm-font-display);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}

/* ==========================================================================
   The photograph bands run edge to edge

   Every band on a location page now behaves like the pair at the foot of the
   home page: no page gutter, no gap between the two pictures, nothing but
   photograph from one side of the screen to the other.

   Two separate things were stopping the full-width band, and the second is
   the subtle one.

   First, .tk-band--full cleared the container's own max-width and padding but
   the SECTION around it kept the page gutter, so the picture stopped 58px
   short of each edge. The home page gallery clears the gutter on the section
   as well, which is why that one read edge to edge and these did not.

   Second, and this is what made it look broken on a wide screen: the figure
   had aspect-ratio: 21/9 AND max-height: 70vh. When the height cap bites, the
   browser does not crop, it SHRINKS THE BOX to keep the ratio. On a 1680 by
   950 window that left the picture 1552 wide inside a 1680 section, sitting
   short of the right-hand edge with no obvious cause. An explicit height
   instead of a ratio keeps the width at 100% and lets object-fit: cover do
   the cropping, which is what was wanted all along. 42.857vw is 9/21 of the
   width, so the band keeps its proportion until the height cap takes over.
   ========================================================================== */
.tk-band--full,
.tk-band--pair { padding-inline: 0; }

.tk-band--pair .pm-container {
  max-width: none;
  padding-inline: 0;
}
.tk-band--pair .tk-band__grid { gap: 0; }

.tk-band--full figure {
  aspect-ratio: auto;
  width: 100%;
  height: min(70vh, 42.857vw);
}
@media (max-width: 767px) {
  /* 3:2 on a phone, where 21:9 is a letterbox slot. */
  .tk-band--full figure { height: min(70vh, 66.667vw); }
}

/* ---------- The paired photographs still need air underneath.

     Every .tk-band has padding-block: 0, on the reasoning that the sections
     either side bring their own. That holds until the section underneath is
     on the dark, as it is on a location page: the two photographs then butt
     straight onto the dark band and the join reads as a mistake. Only the
     underside needs it; the section above already ends with its own padding.
     ---------- */
.tk-band--pair { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }

/* ---------- One rule under the process accordion, not two.

     The last stage carries a bottom border and the cross-links row that
     follows carries a top border, so the two land within a few pixels of each
     other and read as a doubled line. The cross-links give up theirs: the
     accordion should close with its own rule. ---------- */
.tk-stages + .tk-crosslinks {
  border-top: 0;
  padding-top: 0;
}

/* ==========================================================================
   The footer link columns

   Two separate faults, which together made the columns hard to read.

   The width. The library gives the whole right-hand block a third of the
   footer (1fr 0.5fr), which is fine for three columns of one-word links and
   not fine for "Renovations & Remodelling" and "Ashby-de-la-Zouch". Every
   other item was breaking onto a second line, so the columns read as a list
   of fragments rather than a list of pages. The split is closer to even now,
   which is the extra width the client asked for.

   The spacing. Each column is a grid inside a grid, so it was being stretched
   to the height of the TALLEST column and its rows stretched with it. That is
   why the short third column had gaps two or three times the size of the
   first column's. align-content: start makes each column set its own rhythm
   and stop, which is what makes the three of them line up.
   ========================================================================== */
@media (min-width: 992px) {
  .footer-03__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
}
.footer-03__cols {
  column-gap: clamp(1.5rem, 3.5vw, 3rem);
  row-gap: var(--pm-space-10);
}
.footer-03__col {
  align-content: start;
  gap: var(--pm-space-4);
}
.footer-03__col a {
  line-height: 1.45;
  display: inline-block;
}

/* ---------- The photographer's credit, in the legal row.

     It sits in the same list as the policy links, so it inherits their size,
     weight and hover from .pm-footer-legal and needs nothing of its own
     beyond the muted colour on the words that are not the link. ---------- */
.pm-footer-legal .tk-photocredit { color: var(--pm-fg-muted); }