/* ==========================================================================
   Thurston King Architects, site styles
   Page-level art direction on top of the design system and theme.
   Everything here is layout and rhythm; all colour comes from tokens.
   ========================================================================== */

/* ---------- Wordmark ---------- */
.tk-wordmark {
  font-size: 0.875rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--pm-fg); text-decoration: none; white-space: nowrap;
}
.tk-wordmark--sm { display: inline-block; margin-bottom: var(--pm-space-8); }

/* ---------- Nav: logo far left, everything far right ---------- */
.navbar-17 { background: var(--pm-color-page); }
.navbar-17 .pm-nav__bar { flex: 1 1 auto; width: 100%; }
.tk-inline { display: none; margin-inline-start: auto; gap: var(--pm-space-6); }
.tk-inline a {
  font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pm-fg); text-decoration: none; white-space: nowrap;
  opacity: .65; transition: opacity var(--pm-duration) var(--pm-ease);
}
.tk-inline a:hover, .tk-inline a:focus-visible, .tk-inline a[aria-current="page"] { opacity: 1; }
.navbar-17__actions { margin-inline-start: var(--pm-space-8); }
@media (min-width: 992px) {
  .tk-inline { display: flex; }
  .navbar-17__actions { display: none; }
}

/* ---------- Home hero ---------- */
.header-30 { min-height: 92vh; display: flex; align-items: flex-end; padding-block: 0; }
.header-30 .pm-container { width: 100%; }
.header-30__copy { padding-block-end: var(--pm-space-12); max-width: 34rem; }
.header-30 h1 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 300; line-height: 1.2; }
.header-30 .pm-bg-overlay {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--pm-color-surface-inverse) 55%, transparent),
    color-mix(in srgb, var(--pm-color-surface-inverse) 5%, transparent) 55%);
}
.tk-caption { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; margin-top: var(--pm-space-5); opacity: .8; }

/* ---------- Interior page head: type, then a wide image ---------- */
.tk-pagehead { padding-block: clamp(4rem, 9vw, 7rem) 0; }
.tk-pagehead h1 {
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  font-weight: 300; line-height: 1.12; max-width: 20ch;
}
.tk-pagehead .pm-lede { margin-top: var(--pm-space-6); max-width: 54ch; }
.tk-pagehead__media {
  margin-top: clamp(2rem, 4vw, 3rem);
  aspect-ratio: 16 / 9;
  max-height: 60vh;
}
.tk-pagehead--plain { padding-block: clamp(4rem, 9vw, 7rem) 0; }

/* ---------- Prose: a 44rem measure, aligned with the page's left edge.
   Centring it left the body copy floating under a hard-left H1. ---------- */
/* container stays full width so its left edge lines up with every other
   section; the measure is limited on the children instead */
.tk-prose .pm-container > * { max-width: 40rem; }
.tk-prose h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 300; margin-block: var(--pm-space-12) var(--pm-space-5);
}
.tk-prose h2:first-child { margin-block-start: 0; }
.tk-prose p { margin-bottom: var(--pm-space-5); }
.tk-prose p:last-child { margin-bottom: 0; }
.tk-prose a { color: var(--pm-fg); text-underline-offset: 3px; }

/* ---------- Statement ---------- */
.header-64 { padding-block: clamp(6rem, 14vw, 12rem); }
.header-64 h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 300; line-height: 1.35; max-width: 30ch; margin-inline: auto; text-align: center;
}
.header-64 .pm-lede { text-align: center; max-width: 58ch; margin-inline: auto; margin-top: var(--pm-space-8); }

/* ---------- Projects: two interlocking columns, staggered, no cards.
   One column of 34rem items left half of every row empty; this fills the
   width and keeps the asymmetry by dropping the right column. ---------- */
.portfolio-07 .pm-section-head { margin-bottom: var(--pm-space-12); }
.portfolio-07__list { display: grid; grid-template-columns: 1fr; gap: clamp(3rem, 6vw, 4rem); align-items: start; }
@media (min-width: 768px) {
  .portfolio-07__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: clamp(3.5rem, 6vw, 5.5rem);
  }
  .portfolio-07__item:nth-child(even) { margin-block-start: clamp(3rem, 6vw, 5rem); }
}
.portfolio-07__title { font-size: 1.25rem; font-weight: 300; margin-top: var(--pm-space-6); }
.portfolio-07__title a { text-decoration: none; }
.tk-place { font-style: italic; color: var(--pm-fg-muted); margin-top: -0.35rem; margin-bottom: var(--pm-space-4); }

/* ---------- Ruled, numbered columns ---------- */
.layout-231 .pm-grid--3 { align-items: stretch; }
.layout-231__item {
  border-top: 1px solid var(--pm-border-color);
  padding-top: var(--pm-space-6);
  display: flex; flex-direction: column;
}
.layout-231__item > p { margin-bottom: var(--pm-space-8); }
.layout-231__item .pm-btn-group { margin-top: auto; }
.layout-231__title { font-size: 1.25rem; font-weight: 300; margin-block: var(--pm-space-4); }
.layout-231__title a { text-decoration: none; }

/* ---------- Link grid ---------- */
.layout-293__card { border-top: 1px solid var(--pm-border-color); padding-top: var(--pm-space-6); }
.layout-293__card h3 { font-size: 1.125rem; font-weight: 300; margin-bottom: var(--pm-space-3); }
.layout-293__card h3 a { text-decoration: none; }
.layout-293__card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Two images edge to edge ---------- */
.gallery-11 { padding-block: 0; padding-inline: 0; }
.gallery-11 .pm-container { max-width: none; padding-inline: 0; }
.gallery-11__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 768px) { .gallery-11__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Project gallery ---------- */
.tk-gallery__grid { display: grid; grid-template-columns: 1fr; gap: var(--pm-space-6); }
@media (min-width: 768px) { .tk-gallery__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Journal ---------- */
.tk-articles__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 768px) { .tk-articles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .tk-articles__grid { grid-template-columns: repeat(3, 1fr); } }
.tk-article { border-top: 1px solid var(--pm-border-color); padding-top: var(--pm-space-5); }
.tk-article h3 { font-size: 1.125rem; font-weight: 300; margin-block: var(--pm-space-3); }
.tk-article h3 a { text-decoration: none; }

/* ---------- Studio portrait ---------- */
@media (min-width: 992px) { .layout-06__media { aspect-ratio: 3 / 4; } }

/* ---------- Section rhythm: more air than the library default, but two
   stacked sections should not put 18rem of nothing between them ---------- */
.pm-section { padding-block: clamp(3.5rem, 6.5vw, 6rem); }

/* ---------- Footer ---------- */
.footer-03 a { text-decoration: none; }
.footer-03 a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* "Website by Pure Marketing" credit, light footer variant.
   The logo is the white lockup drawn with SVG masks, so it is recoloured
   with a filter rather than by editing fills, which would break the mask. */
.footer-bottom { border-top: 1px solid var(--pm-border-color-subtle, var(--pm-border-color)); }
.footer-bottom-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding: 22px 0; font-size: 0.8125rem;
}
.footer-copyright { color: var(--pm-fg-muted); max-width: 52ch; }
.back-to-top,
.footer-credit {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--pm-fg-muted);
  text-decoration: none !important; border: 0 !important; box-shadow: none !important;
}
.back-to-top:hover, .footer-credit:hover { color: var(--pm-fg); }
.footer-credit-logo {
  height: 20px; width: auto; display: block;
  filter: brightness(0); opacity: .75;
}
.footer-credit:hover .footer-credit-logo { opacity: 1; }
/* ---------- Burger visible on all sizes (the panel is the mobile nav) ---------- */
.pm-burger { display: flex; }
@media (min-width: 992px) { .pm-burger { display: none; } }

/* ---------- Footer: nothing here is bold; the whole site is weight 300 ---------- */
.footer-03__col a,
.footer-03__value,
.footer-03__contact a,
.pm-footer-legal a { font-weight: 300; }
.footer-03__col a { font-size: 0.9375rem; }
.footer-03__label {
  font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pm-fg-muted);
}
.footer-copyright { font-size: 0.75rem; max-width: none; }

/* ---------- Accordions: question in the page's own voice, not bold ---------- */
.pm-accordion__trigger,
.pm-accordion__title { font-weight: 300; }

/* ---------- Footer bottom: legal links on their own line, then the credit row.
   The library makes .pm-footer-bottom a row at 768+, which collides with the
   credit row's own space-between; stack them instead. ---------- */
.pm-footer-bottom.footer-bottom { border-top-width: 0; }
@media (min-width: 768px) {
  .pm-footer-bottom { flex-direction: column; align-items: stretch; gap: var(--pm-space-2); }
}
.pm-footer-legal { order: -1; font-size: 0.75rem; }
.pm-footer-legal a { text-decoration: none; color: var(--pm-fg-muted); }
.pm-footer-legal a:hover { color: var(--pm-fg); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom-row { padding: 0 0 var(--pm-space-2); }

/* ---------- Portrait page-head image: don't crop a tall photo to a letterbox ---------- */
.tk-pagehead__media--portrait {
  aspect-ratio: 4 / 5;
  max-width: 34rem;
  margin-inline: auto;
}
@media (min-width: 992px) { .tk-pagehead__media--portrait { max-width: 38rem; } }

/* ---------- Contact: the form is quiet, ruled, no boxes ---------- */
.contact-05 h2 { font-weight: 300; }
.contact-05__desc { max-width: 42ch; }
.contact-05__info-item p { margin: 0; }
.contact-05__info-item a { color: var(--pm-fg); text-decoration: none; }
.contact-05__info-item a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-05__info-item .pm-icon { flex: 0 0 auto; color: var(--pm-fg-muted); }
.tk-note { margin-top: var(--pm-space-8); color: var(--pm-fg-muted); font-size: 0.9375rem; }
.contact-05 .pm-label {
  font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pm-fg-muted);
}
.contact-05 .pm-input,
.contact-05 .pm-textarea {
  background: transparent;
  border: 0; border-bottom: 1px solid var(--pm-border-color);
  border-radius: 0; padding-inline: 0; font-weight: 300;
}
.contact-05 .pm-input:focus,
.contact-05 .pm-textarea:focus { outline: 0; border-bottom-color: var(--pm-fg); }
.contact-05 .pm-check { font-size: 0.875rem; color: var(--pm-fg-muted); }
.contact-05 .pm-check a { color: var(--pm-fg); }
.contact-05 .pm-field { display: grid; gap: var(--pm-space-2); }
.contact-05 .pm-input { padding-block: var(--pm-space-2); }
.contact-05 .pm-textarea { padding-block: var(--pm-space-2); min-height: 8rem; }
.contact-05__form { gap: var(--pm-space-5); }
.contact-05 .pm-input { min-height: 0; height: 2.5rem; line-height: 2.5rem; }

/* ---------- Split page head: a portrait photograph beside the opening copy.
   Used where the image is tall, so a full-width letterbox crop would ruin it
   and a centred narrow column would leave the page looking empty. ---------- */
.tk-split__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .tk-split__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
}
.tk-split__media { aspect-ratio: 4 / 5; max-width: 30rem; }
@media (min-width: 900px) { .tk-split__media { max-width: none; } }
.tk-split__copy h1 {
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  font-weight: 300; line-height: 1.12; max-width: 14ch;
}
.tk-split__copy .pm-lede { margin-top: var(--pm-space-5); max-width: 46ch; }
.tk-split__copy p + p { margin-top: var(--pm-space-5); }
.tk-split__copy > p:not(.pm-lede) { max-width: 52ch; }
.tk-split__copy > p:nth-of-type(2) { margin-top: var(--pm-space-8); }

/* ---------- Case study facts: the spec a prospective client actually reads,
   set as a quiet column beside the description ---------- */
.tk-prose__split { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .tk-prose__split { grid-template-columns: minmax(0, 15rem) minmax(0, 34rem); gap: clamp(3rem, 6vw, 5rem); }
}
.tk-prose--facts .pm-container > * { max-width: none; }
.tk-facts { margin: 0; display: grid; gap: var(--pm-space-5); align-content: start; }
.tk-facts__row { display: grid; gap: var(--pm-space-2); }
.tk-facts dt {
  font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pm-fg-muted);
}
.tk-facts dd { margin: 0; font-weight: 300; }
.tk-prose__body p { margin-bottom: var(--pm-space-5); }
.tk-prose__body p:last-child { margin-bottom: 0; }

/* ---------- Process: a numbered accordion.
   Seven stages at a paragraph each is a wall of text on the page and an
   endless scroll on a phone. The numeral and the stage name stay visible so
   the sequence reads at a glance; the detail opens on demand. ---------- */
.tk-process__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.tk-process__head h2 {
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 300; line-height: 1.25; max-width: 24ch;
}

.tk-stages.pm-accordion { border-top: 1px solid var(--pm-border-color); }
.tk-stages__item { border-bottom: 1px solid var(--pm-border-color); }

.tk-stages__trigger {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--pm-space-5);
  padding-block: var(--pm-space-6);
  font-weight: 300;
}
@media (min-width: 768px) {
  .tk-stages__trigger { grid-template-columns: 6rem minmax(0, 1fr) auto; padding-block: var(--pm-space-8); }
}
.tk-stages__trigger .pm-accordion__icon { align-self: center; color: var(--pm-fg-muted); }

/* The numeral carries the section. Very light, in the muted tone, never black. */
.tk-stages__num {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 200; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
  color: var(--pm-fg-muted); opacity: 0.6;
}
.tk-stages__title {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 300; line-height: 1.3;
}
.tk-stages .pm-accordion__content { padding-bottom: var(--pm-space-8); }
.tk-stages .pm-accordion__content p { max-width: 62ch; }
@media (min-width: 768px) {
  .tk-stages .pm-accordion__content { padding-left: 6rem; }
}

/* ---------- Client reviews: set as quiet pull quotes, no cards, no stars ---------- */
.tk-reviews .pm-eyebrow { margin-bottom: clamp(2rem, 4vw, 3rem); }
.tk-reviews__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 768px) { .tk-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); } }
@media (min-width: 1100px) { .tk-reviews__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tk-reviews__item {
  margin: 0;
  border-top: 1px solid var(--pm-border-color);
  padding-top: var(--pm-space-6);
}
.tk-reviews__item blockquote { margin: 0; }
.tk-reviews__item blockquote p {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 300; line-height: 1.6; margin-bottom: var(--pm-space-5);
}
.tk-reviews__item figcaption { display: grid; gap: var(--pm-space-1); }
.tk-reviews__author { font-size: 0.9375rem; font-weight: 300; }
.tk-reviews__project {
  font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pm-fg-muted);
}

/* ---------- Persistent enquiry button, bottom right.
   Sits above the page but below a focused field, and gets out of the way on
   small screens by shrinking to the arrow alone. ---------- */
.tk-sticky-cta {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 40;
  display: inline-flex; align-items: center; gap: var(--pm-space-3);
  padding: var(--pm-space-4) var(--pm-space-6);
  background: var(--pm-fg); color: var(--pm-color-page);
  border: 1px solid var(--pm-fg); border-radius: 0;
  font-size: 0.6875rem; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  transition: background var(--pm-duration) var(--pm-ease), color var(--pm-duration) var(--pm-ease);
}
.tk-sticky-cta:hover, .tk-sticky-cta:focus-visible {
  background: var(--pm-color-page); color: var(--pm-fg);
}
.tk-sticky-cta .pm-icon { width: 1rem; height: 1rem; }
@media (max-width: 599px) {
  .tk-sticky-cta { padding: var(--pm-space-4); }
  .tk-sticky-cta span { position: absolute; left: -9999px; }
}
@media (prefers-reduced-motion: reduce) { .tk-sticky-cta { transition: none; } }

/* ---------- Contact form: states the flat build had no need for ---------- */
.tk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tk-form-sent { border-top: 1px solid var(--pm-border-color); padding-top: var(--pm-space-6); }
.tk-form-sent h3 { font-weight: 300; margin-bottom: var(--pm-space-3); }

/* ---------- Skip link: visible only once it has focus ---------- */
.pm-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--pm-color-page); color: var(--pm-fg);
  padding: var(--pm-space-3) var(--pm-space-5);
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.pm-skip-link:focus { left: 0; }

/* ==========================================================================
   Ninja Forms skin
   --------------------------------------------------------------------------
   Ninja Forms renders its own markup at runtime and ships opinionated styles.
   This layer strips those back to the same quiet underline treatment as the
   rest of the site: no boxes, no radius, tiny tracked caps for labels, and a
   single hairline that darkens on focus.

   Scoped to .tk-form so it cannot leak into any other form on the site.
   ========================================================================== */

.tk-form .nf-form-cont { max-width: none; }
.tk-form .nf-form-title,
.tk-form .nf-form-fields-required { display: none; }

/* Layout: one column, the same rhythm as the copy beside it. */
.tk-form .nf-form-layout form > div { display: grid; gap: var(--pm-space-5); }
.tk-form .nf-field-container {
  margin: 0;
  display: grid;
  gap: var(--pm-space-2);
}

/* Labels: the tiny tracked caps used for every other label on the site. */
.tk-form .nf-field-label { margin: 0; }
.tk-form .nf-field-label label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pm-fg-muted);
  margin: 0;
  line-height: 1.4;
}
.tk-form .ninja-forms-req-symbol { color: var(--pm-fg-muted); font-weight: 400; }

/* Inputs: a hairline, nothing else. */
.tk-form .nf-field-element input[type="text"],
.tk-form .nf-field-element input[type="email"],
.tk-form .nf-field-element input[type="tel"],
.tk-form .nf-field-element input[type="url"],
.tk-form .nf-field-element input[type="number"],
.tk-form .nf-field-element textarea,
.tk-form .nf-field-element select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pm-border-color);
  border-radius: 0;
  box-shadow: none;
  padding: var(--pm-space-2) 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  color: var(--pm-fg);
  transition: border-color var(--pm-duration) var(--pm-ease);
}
.tk-form .nf-field-element input[type="text"],
.tk-form .nf-field-element input[type="email"],
.tk-form .nf-field-element input[type="tel"] { height: 2.5rem; }
.tk-form .nf-field-element textarea { min-height: 8rem; resize: vertical; }

.tk-form .nf-field-element input:focus,
.tk-form .nf-field-element textarea:focus,
.tk-form .nf-field-element select:focus {
  outline: 0;
  border-bottom-color: var(--pm-fg);
  box-shadow: none;
}
.tk-form .nf-field-element ::placeholder { color: var(--pm-fg-muted); opacity: .7; }

/* Consent checkbox: the control beside its text, not stacked above it.
   Ninja Forms nests these two rows deeper than the other fields -
   .checkbox-container > .nf-field > .field-wrap.checkbox-wrap > label + input -
   so the grid has to sit on .checkbox-wrap or the control column collapses. */
.tk-form .checkbox-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--pm-space-3);
}
.tk-form .checkbox-wrap .nf-field-element { order: 1; grid-column: 1; }
.tk-form .checkbox-wrap .nf-field-label   { order: 2; grid-column: 2; }
.tk-form .checkbox-wrap .nf-field-label label {
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--pm-fg-muted);
  cursor: pointer;
}
.tk-form .checkbox-wrap .nf-field-element input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0.2rem 0 0;
  border: 1px solid var(--pm-border-color);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}
.tk-form .checkbox-wrap .nf-field-element input[type="checkbox"]:checked {
  background: var(--pm-fg);
  border-color: var(--pm-fg);
}
.tk-form .checkbox-wrap .nf-field-element input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--pm-fg);
  outline-offset: 2px;
}

/* Submit: the site's own button, not the plugin's. */
.tk-form .submit-container { margin-top: var(--pm-space-3); }
.tk-form .nf-field-element input[type="button"],
.tk-form .nf-field-element input[type="submit"] {
  display: inline-flex;
  width: auto;
  height: auto;
  background: var(--pm-fg);
  color: var(--pm-color-page);
  border: 1px solid var(--pm-fg);
  border-radius: 0;
  padding: var(--pm-space-4) var(--pm-space-8);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--pm-duration) var(--pm-ease), color var(--pm-duration) var(--pm-ease);
}
.tk-form .nf-field-element input[type="button"]:hover {
  background: transparent;
  color: var(--pm-fg);
}
.tk-form .nf-field-element input[type="button"]:disabled { opacity: .45; cursor: default; }

/* Errors: stated plainly under the field, never a red box. */
.tk-form .nf-error-wrap .nf-error-msg,
.tk-form .nf-error-msg {
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--pm-color-danger, #9B2C2C);
  margin-top: var(--pm-space-2);
}
.tk-form .nf-error .nf-field-element input,
.tk-form .nf-error .nf-field-element textarea {
  border-bottom-color: var(--pm-color-danger, #9B2C2C);
}
.tk-form .nf-error.field-wrap .nf-field-element::after { display: none; }

/* The thank-you state, matching the rest of the page. */
.tk-form .nf-response-msg { border-top: 1px solid var(--pm-border-color); padding-top: var(--pm-space-6); }
.tk-form .nf-response-msg p { margin-bottom: var(--pm-space-3); font-weight: 300; }
.tk-form .tk-form-sent__title {
  font-size: 1.25rem; font-weight: 300; margin-bottom: var(--pm-space-3);
}

/* The plugin's processing spinner sits oddly in a borderless form. */
.tk-form .nf-form-content .nf-loading-spinner { margin: var(--pm-space-6) 0; }

/* ==========================================================================
   Round two: the client's notes on the first draft
   ========================================================================== */

/* ---------- Hero: up to four photographs, crossfaded.
   The first slide is a normal image in the markup so it stays the LCP
   element. The rest stack on top of it and fade. ---------- */
.tk-hero { position: absolute; inset: 0; overflow: hidden; }
.tk-hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1600ms var(--pm-ease);
}
.tk-hero__slide.is-current { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tk-hero__slide { transition: none; }
}

/* ---------- The ink sections.
   The client asked for a warm dark band to break the page up, matching the
   reference site. Their value, R63 G60 B55, sits in the same warm family as
   the bone ground rather than fighting it. ---------- */
.tk-scheme-ink {
  --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-ink h1, .tk-scheme-ink h2, .tk-scheme-ink h3, .tk-scheme-ink p { color: inherit; }
.tk-scheme-ink .pm-lede { color: rgba(233, 229, 224, 0.72); }
.tk-scheme-ink .pm-eyebrow { color: rgba(233, 229, 224, 0.55); }
.tk-scheme-ink a { color: inherit; }

/* ---------- Why us: four short reasons, ruled, no icons ---------- */
.tk-why .pm-eyebrow { margin-bottom: clamp(2rem, 4vw, 3rem); }
.tk-why__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 2.5rem); }
@media (min-width: 640px)  { .tk-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tk-why__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tk-why__item { border-top: 1px solid var(--pm-border-color); padding-top: var(--pm-space-5); }
.tk-why__item p { font-size: 0.9375rem; }
.tk-why__title {
  font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: var(--pm-space-4); line-height: 1.4;
}

/* ==========================================================================
   Typography, drawn closer to the reference site
   --------------------------------------------------------------------------
   Blank Slate sets its section headings in light uppercase at roughly 0.1em
   tracking with the line-height pulled right in, and its body copy at about
   1.9. Applied here to the SHORT headings only: the page titles and the
   statement stay in sentence case, because "A clear, structured process from
   first conversation to completion" set in tracked capitals is three lines of
   shouting rather than a heading.
   ========================================================================== */

/* Section heads, sub-headings and card titles: the tracked-caps treatment. */
.pm-section-head h2,
.tk-prose h2,
.cta-03 h2,
.faq-03 h2 {
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
}
.pm-section-head h2,
.cta-03 h2,
.faq-03 h2 { font-size: clamp(1.125rem, 1.9vw, 1.5rem); }
.tk-prose h2 { font-size: clamp(0.9375rem, 1.4vw, 1.125rem); margin-block: var(--pm-space-12) var(--pm-space-5); }

/* Names of things: services, areas, projects, journal entries. */
.layout-231__title,
.layout-293__card h3,
.portfolio-07__title,
.tk-article h3,
.tk-stages__title {
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
}
.layout-231__title, .portfolio-07__title { font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); }
.layout-293__card h3, .tk-article h3, .tk-stages__title { font-size: 0.9375rem; }

/* The two that stay in sentence case, because they are sentences. */
.header-64 h2,
.tk-process__head h2,
.contact-05 h2,
.tk-split__copy h1,
.tk-pagehead h1,
.header-30 h1 { text-transform: none; letter-spacing: normal; }

/* Body copy: the airier measure of the reference site. */
body { line-height: 1.85; }
.tk-prose p, .tk-prose__body p, .tk-why__item p, .tk-reviews__item blockquote p,
.pm-accordion__content p { line-height: 1.85; }
.pm-lede { line-height: 1.7; }

/* The wordmark, brought closer to the reference site's own heading style:
   a little larger, and tracked at 0.12em rather than 0.3em. */
.tk-wordmark { font-size: 1rem; letter-spacing: 0.12em; }
@media (min-width: 768px) { .tk-wordmark { font-size: 1.125rem; } }
.tk-wordmark--sm { font-size: 0.9375rem; }

/* ---------- Mobile menu: three lines, and no bold in the panel ---------- */
.pm-burger { flex-direction: column; justify-content: center; gap: 5px; }
.pm-burger span { display: block; width: 22px; height: 1px; background: currentColor; }
.navbar-17__links a { font-weight: 300; letter-spacing: 0.12em; }
.navbar-17__links a strong,
.navbar-17__links a b { font-weight: 300; }

/* ==========================================================================
   Serif headings: the weights and sizes the new display face needs
   --------------------------------------------------------------------------
   Cormorant is a fine, small-on-the-body serif. At the sizes the sans was
   using, weight 300 disappears, so the small tracked headings take 500 and
   everything gains a little size. The large headings keep 300, where the
   fineness is the point.
   ========================================================================== */

.pm-section-head h2,
.cta-03 h2,
.faq-03 h2 { font-weight: 400; font-size: clamp(1.25rem, 2.1vw, 1.75rem); }

.tk-prose h2 { font-weight: 500; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }

.layout-231__title,
.layout-293__card h3,
.portfolio-07__title,
.tk-article h3,
.tk-stages__title { font-weight: 500; }
.layout-231__title, .portfolio-07__title { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); }
.layout-293__card h3, .tk-article h3, .tk-stages__title { font-size: 1.0625rem; }

/* The sentence-case headings: bigger, because a serif at the same measure
   reads smaller, and looser, because a serif needs the room. */
.tk-pagehead h1 { font-size: clamp(2.125rem, 4.4vw, 3.75rem); line-height: 1.08; }
.tk-split__copy h1 { font-size: clamp(2.125rem, 4.4vw, 3.75rem); line-height: 1.08; }
.header-30 h1 { font-size: clamp(2rem, 3.6vw, 3.125rem); line-height: 1.15; }
.header-64 h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.3; }
.tk-process__head h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.2; }
.contact-05 h2.pm-h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }

/* The reviews are set in the body face, not the serif. */
.tk-reviews__item blockquote p { font-family: var(--pm-font-sans); }

/* The wordmark, at the reference site's proportions. */
.tk-wordmark { font-size: 1.125rem; letter-spacing: 0.14em; font-weight: 400; }
@media (min-width: 768px) { .tk-wordmark { font-size: 1.3125rem; } }
.tk-wordmark--sm { font-size: 1.0625rem; }

/* Navigation in the display face reads small, so it gains a step. */
.tk-inline a { font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.18em; }
.navbar-17__links a { font-size: 1.125rem; letter-spacing: 0.14em; }

/* The tiny tracked labels stay in the sans: a serif at 11px in capitals with
   0.2em of tracking is unreadable. */
.pm-eyebrow, .pm-tagline, .pm-btn, .tk-caption, .footer-03__label,
.tk-reviews__project, .tk-why__title, .tk-form .nf-field-label label,
.contact-05 .pm-label { font-family: var(--pm-font-sans); }