/* ============================================================
   /contact page — minimal SEO-friendly full-page form.
   Light-theme hero matches the slide-out panel's light variant so
   the experience feels consistent whether you open the panel or
   land here via a direct link / search result.
   ============================================================ */

.contact-page { background: #F5F5F0; color: var(--ink); }
.contact-page .cursor svg circle:first-of-type { fill: var(--blue); }

.contact-main {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
}

/* Mark as a light hero so the shared nav inversion logic flips the
   nav to light as soon as the page loads (matches service pages). */
.contact-hero {
  padding: calc(var(--nav-h) + 64px) var(--pad-x) 48px;
  background: #F5F5F0;
  border-bottom: 1px solid #d9d3bc;
}
.contact-hero.svc-hero--light,
.contact-hero { /* inherit .svc-hero--light flip trigger */ }
.contact-hero__inner { max-width: 900px; }
.contact-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6a6250;
  margin: 0 0 18px;
}
.contact-hero__title {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(40px, 6.4vw, 108px);
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 18px;
}
.contact-hero__title em { font-style: italic; font-weight: 500; color: var(--blue); }
.contact-hero__sub {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(16px, .4vw + 1rem, 19px);
  line-height: 1.6;
  color: #4a4331;
  max-width: 62ch;
  margin: 0;
}

/* Form + sidebar layout */
.contact-layout {
  padding: 56px var(--pad-x) 96px;
  background: #F5F5F0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 64px;
  align-items: start;
}
.contact-layout__form {
  background: #fff;
  border: 1px solid #d9d3bc;
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .06);
}
/* Scope light-mode form styling (shared with panel) via an explicit
   modifier so the /contact page's fields render on white. */
.contact-layout__form .enquiry-form input,
.contact-layout__form .enquiry-form select,
.contact-layout__form .enquiry-form textarea {
  background: #F5F5F0;
  border-color: #d9d3bc;
  color: var(--ink);
}
.contact-layout__form .enquiry-form__label { color: #6a6250; }
.contact-layout__form .enquiry-form__success h3 { color: var(--ink); }
.contact-layout__form .enquiry-form__success p { color: #4a4331; }

.contact-layout__side {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px;
  border: 1px solid #d9d3bc;
  border-radius: 14px;
  background: rgba(255, 255, 255, .5);
}
.contact-side__row { display: flex; flex-direction: column; gap: 4px; }
.contact-side__eye {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6a6250;
}
.contact-side__value {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
a.contact-side__value { transition: color .2s; }
a.contact-side__value:hover { color: var(--blue); }

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px var(--pad-x) 72px;
  }
  .contact-layout__form { padding: 24px; }
}
@media (max-width: 540px) {
  .contact-layout__form { padding: 20px; border-radius: 10px; }
  .contact-layout__side { padding: 20px; border-radius: 10px; }
}