/* Kaybee - Contact Form 7 styling.
   Tokens: ivory #F7F3EC, card #FBF9F4, charcoal #2B2A26, body #57534A,
   warm grey #8B8272, hairline #E3DBCC, bronze #9C7A52 / hover #7E6140.
   Radius 0, no shadows.
   Selectors are deliberately specific: Astra styles bare input/select/textarea
   and will win otherwise. */

.wpcf7 { max-width: 760px; }

/* kill theme paragraph rhythm inside the form */
.wpcf7 form p { margin: 0; }

.wpcf7 form .kb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 28px;
  align-items: end;
}
.wpcf7 form .kb-grid .kb-full { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .wpcf7 form .kb-grid { grid-template-columns: 1fr; gap: 22px; }
}

.wpcf7 form .kb-field {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 0;
  padding: 0;
}

.wpcf7 form .kb-field .kb-label {
  display: block;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8B8272;
  margin: 0 0 10px;
  line-height: 1.2;
}

/* CF7 wraps every control in a span - make it behave like a block */
.wpcf7 form .wpcf7-form-control-wrap { display: block; width: 100%; }

.wpcf7 form .kb-field input[type="text"],
.wpcf7 form .kb-field input[type="email"],
.wpcf7 form .kb-field input[type="tel"],
.wpcf7 form .kb-field select,
.wpcf7 form .kb-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: "Source Serif 4", serif;
  font-size: 17px;
  line-height: 1.4;
  color: #2B2A26;
  background-color: #FFFFFF;
  border: 1px solid #E3DBCC;
  border-radius: 0;
  padding: 15px 16px;
  margin: 0;
  height: auto;
  transition: border-color .2s ease, background-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7 form .kb-field textarea { min-height: 170px; resize: vertical; display: block; }

.wpcf7 form .kb-field input:focus,
.wpcf7 form .kb-field select:focus,
.wpcf7 form .kb-field textarea:focus {
  outline: none;
  border-color: #9C7A52;
  background-color: #FFFFFF;
  box-shadow: none;
}
.wpcf7 form .kb-field ::placeholder { color: #A79E8C; opacity: 1; }

/* select chevron, drawn on the wrap so it sits over the control */
.wpcf7 form .kb-select .wpcf7-form-control-wrap { position: relative; }
.wpcf7 form .kb-select .wpcf7-form-control-wrap::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px; height: 7px;
  margin-top: -6px;
  border-right: 1px solid #8B8272;
  border-bottom: 1px solid #8B8272;
  transform: rotate(45deg);
  pointer-events: none;
}
.wpcf7 form .kb-field select { padding-right: 44px; }

/* submit */
.wpcf7 form .kb-submit { margin-top: 8px; }
.wpcf7 form input[type="submit"] {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #F7F3EC;
  background-color: #2B2A26;
  border: 1px solid #2B2A26;
  border-radius: 0;
  padding: 19px 38px;
  width: auto;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.wpcf7 form input[type="submit"]:hover {
  background-color: #7E6140;
  border-color: #7E6140;
}

.wpcf7 form .wpcf7-spinner { margin-left: 14px; }

/* validation + response */
.wpcf7 form .wpcf7-not-valid-tip {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  letter-spacing: .03em;
  color: #8A4B32;
  margin-top: 8px;
}
.wpcf7 form .kb-field .wpcf7-not-valid { border-color: #8A4B32; }

.wpcf7 form .wpcf7-response-output {
  font-family: "Source Serif 4", serif;
  font-size: 16px;
  line-height: 1.5;
  color: #2B2A26;
  border: 1px solid #E3DBCC;
  border-left: 3px solid #9C7A52;
  background: #FBF9F4;
  margin: 28px 0 0;
  padding: 16px 18px;
  border-radius: 0;
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #4E5243; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: #8A4B32; }

.wpcf7 form .kb-consent {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  color: #8B8272;
  line-height: 1.6;
  margin: 0;
}
.wpcf7 form .kb-consent a { color: #57534A; text-decoration: underline; }

/* stop the flex column stretching the button to full width */
.wpcf7 form .kb-submit { align-items: flex-start; }
.wpcf7 form .kb-consent { align-items: flex-start; }

/* something upstream paints .kb-field white behind the label - kill it */
.wpcf7 form .kb-field { background: transparent; }
.wpcf7 form .kb-field > .kb-label { background: transparent; }

/* consent is prose, not a field - flex column was splitting the text,
   the link and the full stop onto three lines */
.wpcf7 form .kb-consent { display: block; max-width: 52ch; }

/* v1.1.4 — Drywell interior gallery: equalise paired-row image heights */
.s-d39gal-r1 img,.s-d39gal-r2 img,.s-d39gal-r3 img,.s-d39gal-r4 img,.s-d39gal-r5 img{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}

/* v1.1.5 - homepage development cards: uniform 3/2 image crop */
img.s-cardimg-op,img.s-cardimg-dh,img.s-cardimg-ge,img.s-cardimg-cv,img.s-cardimg-tv,img.s-cardimg-lg{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;display:block}

/* v1.1.7 - Langham gallery: equalise paired-row image heights */
img.s-lhgal-i1,img.s-lhgal-i2,img.s-lhgal-i3,img.s-lhgal-i4,img.s-lhgal-i5,img.s-lhgal-i6{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;display:block}

/* v1.1.8 - Drywell on-site video + paired stills */
video.s-d39svid{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;background:#EFEBE4;border-radius:0}
img.s-d39s-img{flex:1 1 0;min-width:0;width:auto;aspect-ratio:16/9;object-fit:cover;height:auto;display:block}

/* v1.2.0 - homepage development cards: keep the two titles on one baseline.
   Only the Plough Yard card carries a 'Computer-generated image' line, which
   pushed its title 36px below Drywell's. Reserve the same slot on Drywell. */
@media (min-width:768px){
  img.e-image-base[data-id="cardimg-dh"]{margin-bottom:36px!important}
}

/* v1.2.2 - phone fixes.
   1. Header CTA does not fit beside logo + burger at 390px (it either
      overflowed the edge or wrapped letter by letter). The burger menu
      carries Contact, so drop the CTA on phones and tighten the row.
   2. Drywell 'On site' stills: the pair stacks on phones, so the row-axis
      flex sizing must give way to full width. */
@media (max-width:767px){
  .kb-page .s-header-cta{display:none}
  .kb-page .s-header-inner{gap:16px}
  .kb-page .s-site-header{padding-block-start:12px;padding-block-end:12px}
  img.s-d39s-img{flex:0 0 auto;width:100%;height:auto}
}