/* Contact page */

.page-contact { --header-ink: var(--rust); }

/* Cream plaques keep the logo and menu legible over the striped wall */
.page-contact .site-header .logo,
.page-contact .nav-toggle {
  background: rgb(245 237 227 / 0.94);
  border-radius: 3px;
  box-shadow: 0 2px 10px rgb(40 30 10 / 0.12);
}
.page-contact .site-header .logo { padding: 0.9rem 1.4rem 0.8rem; }
.page-contact .nav-toggle { padding: 14px 12px; width: 75px; }
body.nav-open.page-contact .site-header .logo,
body.nav-open.page-contact .nav-toggle { background: transparent; box-shadow: none; }

@media (max-width: 600px) {
  .page-contact .nav-toggle { width: 60px; padding: 12px 11px; }
}

/* --- Hero: pinned card --------------------------------------------------- */

.contact-hero {
  display: grid;
  place-items: center;
  padding: clamp(10rem, 17vw, 14rem) var(--gutter) clamp(5rem, 10vw, 9rem);
  background: var(--cream) url('../../assets/img/texture-stripes-green.jpg') center top / 1440px auto repeat;
}

.contact-card {
  position: relative;
  width: min(100%, 640px);
  padding: clamp(4rem, 8vw, 6.5rem) clamp(1.75rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 5.5rem);
  background: var(--olive) url('../../assets/img/texture-paper-olive.jpg') center / cover;
  color: var(--cream);
  text-align: center;
  transform: rotate(-2.2deg);
  box-shadow:
    0 2px 3px rgb(0 0 0 / 0.18),
    0 22px 40px -12px rgb(40 30 10 / 0.45);
}

/* WebP textures; the JPGs above are the fallback for browsers without image-set() type(). */
@supports (background-image: image-set(url('../../assets/img/texture-paper-olive.webp') type('image/webp'))) {
  .contact-hero { background-image: url('../../assets/img/texture-stripes-green.webp'); }
  .contact-card { background-image: url('../../assets/img/texture-paper-olive.webp'); }
}

.contact-card__pin {
  position: absolute;
  top: -18px;
  left: 50%;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F2C98A 0 12%, #C48A44 38%, #8A5424 78%, #6B3E19 100%);
  box-shadow: 0 4px 6px rgb(0 0 0 / 0.35), inset 0 -2px 3px rgb(0 0 0 / 0.25);
}

.contact-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  line-height: 1.25;
  text-transform: uppercase;
}

.contact-card__body {
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.75;
}
.contact-card__body + .contact-card__body { margin-top: 1.75rem; }
.contact-card__body em { font-weight: 400; }

@media (max-width: 760px) {
  .contact-hero { background-size: 960px auto; }
}

/* --- Press for a better brand ------------------------------------------- */

.press {
  position: relative;
  overflow: hidden;
  min-height: clamp(18rem, 39vw, 35rem);
}

.press__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.5rem);
  max-width: 1100px;
  height: 100%;
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.5rem) var(--gutter) 0;
}

.press__bell {
  display: block;
  flex: none;
  width: clamp(200px, 31vw, 450px);
  margin-bottom: -6%;
  transition: transform 0.4s ease;
}
.press__bell:hover { transform: translateY(-6px); }

.press__text {
  align-self: center;
  padding-bottom: clamp(2rem, 6vw, 6rem);
  color: var(--cream);
  transform: rotate(-8deg);
  white-space: nowrap;
}
.press__script {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(3rem, 6.9vw, 6.2rem);
  line-height: 1;
}
.press__line {
  display: block;
  margin: -0.15em 0 0 0.3em;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.5vw, 3.15rem);
  line-height: 1.2;
}

.press__edge {
  position: absolute;
  top: -6%;
  width: clamp(160px, 17vw, 240px);
  filter: brightness(0);
  opacity: 0.22;
  pointer-events: none;
}
.press__edge--left { left: clamp(-170px, -11vw, -100px); }
.press__edge--right { right: clamp(-170px, -11vw, -100px); transform: scaleX(-1); }

@media (max-width: 600px) {
  .press__inner { flex-direction: column-reverse; align-items: center; padding-top: 3rem; }
  .press__text { padding-bottom: 0; }
  .press__bell { width: min(70vw, 300px); margin-bottom: -10%; }
  .press__edge { display: none; }
}

/* --- Who we're looking for ---------------------------------------------- */

.looking { padding-block: clamp(5rem, 11vw, 10rem); }

.looking__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  max-width: calc(1000px + var(--gutter) * 2);
}

.looking__title,
.looking__welcome {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.2;
}
.looking__title { text-transform: capitalize; }
.looking__welcome { margin-top: 1.2em; text-transform: uppercase; }

.looking__intro { font-size: 0.8125rem; }

.looking__list {
  margin-top: 2rem;
  list-style: none;
  padding: 0;
  max-width: 28rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.3;
}
.looking__list li + li { margin-top: 0.75rem; }
.looking__list em { font-weight: 400; }

.looking__note {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.7;
}
.looking__note p + p { margin-top: 1.4rem; }

@media (max-width: 760px) {
  .looking__grid { grid-template-columns: 1fr; }
}

/* --- Enquiry form -------------------------------------------------------- */

.enquiry { padding-block: clamp(5rem, 11vw, 10rem); scroll-margin-top: 0; }

.enquiry__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.9vw, 2.5rem);
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.form-status {
  max-width: 930px;
  margin: 2.5rem auto 0;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--coral);
  border-radius: var(--radius);
  color: var(--cream);
  background: rgb(0 0 0 / 0.15);
}

.enquiry__form {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  max-width: 930px;
  margin: clamp(3rem, 7vw, 5.5rem) auto 0;
}

.field {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 63px;
  padding: 0 1.4rem;
  background: var(--cream);
  color: var(--rust);
  border-radius: var(--radius);
  transition: box-shadow 0.2s ease;
}
.field:focus-within { box-shadow: 0 0 0 3px var(--coral); }

.field label {
  flex: none;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.15;
  cursor: pointer;
}
.field__req { color: var(--terracotta); }

.field input,
.field textarea {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 0;
  border: 0;
  background: transparent;
  color: var(--rust-deep);
  font-family: var(--font-sans);
  font-size: 1rem;
}
.field input:focus,
.field textarea:focus { outline: none; }
.field input::placeholder { color: rgb(103 44 28 / 0.4); }

.field--area {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding-top: 1.15rem;
}
.field--area textarea {
  min-height: 5.5rem;
  padding-top: 0.25rem;
  resize: vertical;
  line-height: 1.5;
}

.field input:user-invalid,
.field textarea:user-invalid { color: #8E1E0B; }
.field:has(:user-invalid) { box-shadow: 0 0 0 3px var(--coral); }

.field--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry__note {
  font-size: 0.8125rem;
  opacity: 0.85;
  margin-top: -0.5rem;
}

.enquiry__submit {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
}
.enquiry__submit .btn { min-width: min(361px, 100%); }

@media (max-width: 600px) {
  .field:not(.field--area) {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0.85rem;
  }
  .field:not(.field--area) input { padding-top: 0.3rem; }
}