/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | Contact page sections

   Section rules only; type roles and buttons come from ml-site.css.
   Sections are addressed by Elementor element ID (#contact-*) because
   containers do not output custom CSS classes in this build.

   The hero is plain white with no photograph, per the page spec.
   ══════════════════════════════════════════════════════════════════ */

#contact-hero,
#contact-enquiry,
#contact-map,
#contact-close{
  --pg-mist-paper:#4a4a4a;
  --pg-line-paper:rgba(0,0,0,.12);
  /* --pg-stone is GONE (2026-08-12). It was a fourth surface, #f1f1f3, carrying
     the invitation / speaking / teaser / request bands. It had already been
     re-toned once with a deliberate -2 blue offset so it could not read warm
     under simultaneous contrast against the white either side - and it was
     still being read as cream. The hue was never the problem: a palette locked
     to ink, card and paper cannot hold a fourth near-white without it reading
     as a cast. Those bands are paper now and separate on space, which is the
     same answer the hairlines got. Do not reintroduce a tinted band; if a
     section needs to stand apart, give it ink or give it room. */
}

/* ── Hero (paper, no photograph) ─────────────────────────────────── */

#contact-hero.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(118px,13vh,168px) var(--ml-gut) clamp(48px,6vh,80px);
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}

#contact-hero-copy.e-con{
  max-width:1120px;
  padding:0;
  align-items:center;
  text-align:center;
  --width:100%;
}

#contact-hero .ml-hero-mark img{
  height:auto;
  display:block;
}

#contact-hero .ml-hero-mark{margin-bottom:clamp(18px,2.8vh,28px)}

#contact-hero .elementor-heading-title{color:var(--ml-ink)}
#contact-hero .ml-eyebrow .elementor-heading-title{color:var(--ml-grey)}

#contact-hero .ml-page-title .elementor-heading-title{
  max-width:24ch;
  margin-top:clamp(14px,2vh,22px);
}

#contact-hero .ml-lead{margin-top:clamp(20px,2.8vh,32px);max-width:820px}
#contact-hero .ml-lead p{color:var(--pg-mist-paper)}

/* ── Enquiry (paper, form beside the office panel) ───────────────── */

#contact-enquiry.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  /* The map is a full-bleed band, not a text section, so it does not need a
     text section's breathing room above it. Bottom padding brought down from
     clamp(110px,13vw,170px), which left a 170px void under the form at 1440. */
  padding:clamp(48px,6vw,74px) var(--ml-gut) clamp(64px,7vw,92px);
  --width:100%;
  max-width:none;
}

#contact-enquiry-wrap.e-con{
  max-width:1240px;
  margin:0 auto;
  padding:0;
  gap:80px;
  align-items:flex-start;
}

#contact-enquiry-a.e-con{padding:0;--width:58%;max-width:none}
#contact-enquiry-b.e-con{padding:0;--width:42%;max-width:none}

#contact-enquiry .ml-eyebrow .elementor-heading-title{color:var(--ml-grey)}
#contact-enquiry .ml-section-title .elementor-heading-title{margin:16px 0 18px}

#contact-enquiry .ml-body,
#contact-enquiry .ml-body p{color:var(--pg-mist-paper);max-width:52ch}

/* ── The enquiry form ────────────────────────────────────────────── */

.ml-enquiry-form{margin-top:40px}

.ml-enquiry-form form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px 24px;
}

.ml-enquiry-form .fld{display:flex;flex-direction:column;gap:9px;min-width:0}
.ml-enquiry-form .fld.full{grid-column:1/-1}

.ml-enquiry-form label{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ml-grey);
}

.ml-enquiry-form input,
.ml-enquiry-form textarea,
.ml-enquiry-form select{
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  color:var(--ml-ink);
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(0,0,0,.18);
  border-radius:0;
  padding:10px 2px;
  width:100%;
  max-width:100%;
  box-shadow:none;
  transition:border-color .25s ease;
}

.ml-enquiry-form input:focus,
.ml-enquiry-form textarea:focus,
.ml-enquiry-form select:focus{
  outline:none;
  border-bottom:2px solid var(--ml-ink);
  border-color:var(--ml-ink);
}

.ml-enquiry-form textarea{resize:vertical;min-height:90px}

.ml-enquiry-form .consent{
  grid-column:1/-1;
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:4px;
}

.ml-enquiry-form .consent input{
  width:18px;
  height:18px;
  flex:none;
  margin-top:2px;
  border:1px solid rgba(0,0,0,.4);
}

.ml-enquiry-form .consent label{
  text-transform:none;
  letter-spacing:0;
  font-family:"Literata",Georgia,serif;
  font-weight:400;
  font-size:.9062rem;
  line-height:1.55;
  color:var(--pg-mist-paper);
}

.ml-enquiry-form .form-status{
  grid-column:1/-1;
  font-family:"Literata",Georgia,serif;
  font-size:.9375rem;
  line-height:1.6;
  margin:2px 0 0;
}

.ml-enquiry-form .form-status.ok{color:var(--ml-ink)}
.ml-enquiry-form .form-status.err{color:var(--pg-mist-paper)}
.ml-enquiry-form .form-status[hidden]{display:none}

.ml-enquiry-form button[type="submit"]{
  grid-column:1/-1;
  justify-self:start;
  margin-top:10px;
  font-family:"Literata",Georgia,serif;
  font-weight:520;
  font-size:1rem;
  letter-spacing:.015em;
  border-radius:0;
  border:1px solid var(--ml-ink);
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  padding:18px 38px;
  cursor:pointer;
  transition:background-color .3s ease,color .3s ease;
}

.ml-enquiry-form button[type="submit"]:hover{
  background-color:transparent;
  color:var(--ml-ink);
}

/* ── Office panel ────────────────────────────────────────────────── */

.ml-office-panel .ml-office{
  background-color:var(--ml-paper);
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:44px 40px;
}

.ml-office-panel .ml-office-h{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ml-grey);
  margin:0 0 22px;
}

/* CORRECTED 2026-08-17: rows and the CONNECT section were separated by
   border-top rule lines. Cephas asked for those removed on the client
   card - the existing 18px vertical padding between rows is enough
   separation on its own without a drawn line, so the border is dropped
   rather than replaced with anything. */
.ml-office-panel .orow{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px 0;
}

.ml-office-panel .orow:first-of-type{padding-top:0}

.ml-office-panel .orow svg{
  width:19px;
  height:19px;
  flex:none;
  margin-top:3px;
  color:var(--ml-ink);
}

.ml-office-panel .obody{
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  line-height:1.6;
  color:var(--ml-ink);
  min-width:0;
  overflow-wrap:anywhere;
}

.ml-office-panel .obody .mut{color:var(--pg-mist-paper)}

.ml-office-panel .orow a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--pg-line-paper);
}

/* CORRECTED 2026-08-17: was a stacked column - the CONNECT label, then
   LinkedIn / Email / Location one per line - under a border-top divider.
   Divider dropped per the row fix above. The three links move inline on
   the same instruction, but the label is a direct sibling of the links
   in the markup, not a wrapper around them, so simply flipping .connect
   to a row would have pulled "CONNECT" into the same line as the links.
   A new .connect-links wrapper (added in the template, not here) holds
   just the three <a> tags, so .connect stays a column of exactly two
   rows - label, then the inline link row - collapsing to that height
   automatically now that there is no third stacked line to clear. */
.ml-office-panel .connect{
  margin-top:22px;
  padding-top:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.ml-office-panel .connect-links{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:28px;
  row-gap:10px;
}

.ml-office-panel .connect .lbl{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ml-grey);
}

.ml-office-panel .connect a{
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  color:var(--ml-ink);
  text-decoration:none;
  border-bottom:1px solid var(--ml-ink);
  width:max-content;
  max-width:100%;
  padding-bottom:3px;
  transition:opacity .3s ease;
}

.ml-office-panel .connect a:hover{opacity:.6}

/* ── Map ─────────────────────────────────────────────────────────── */

#contact-map.e-con{
  background-color:var(--ml-paper);
  padding:0;
  --width:100%;
  max-width:none;
}

.ml-map-embed{width:100%;line-height:0}

.ml-map-embed .ml-map{
  display:block;
  width:100%;
  height:440px;
  border:none;
  filter:grayscale(1) contrast(1.05);
}

/* ── Closing (ink) ───────────────────────────────────────────────── */

#contact-close.e-con{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  padding:clamp(120px,14vw,180px) var(--ml-gut);
  text-align:center;
  align-items:center;
  --width:100%;
  max-width:none;
}

#contact-close .ml-eyebrow .elementor-heading-title{color:var(--ml-grey-light)}

#contact-close .ml-statement .elementor-heading-title{
  color:var(--ml-paper);
  max-width:30ch;
  margin:26px auto 0;
}

#contact-close-actions.e-con{
  margin-top:60px;
  padding:0;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  --width:auto;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width:1180px){
  #contact-enquiry-wrap.e-con{flex-direction:column;gap:50px}
  #contact-enquiry-a.e-con,
  #contact-enquiry-b.e-con{--width:100%}
  #contact-hero .ml-page-title .elementor-heading-title{max-width:none}
}

@media (max-width:782px){
  .ml-enquiry-form form{grid-template-columns:minmax(0,1fr)}
  .ml-office-panel .ml-office{padding:36px 28px}
  .ml-map-embed .ml-map{height:340px}
}

@media (max-width:430px){
  #contact-hero.e-con,
  #contact-enquiry.e-con,
  #contact-close.e-con{padding-left:24px;padding-right:24px}
  .ml-office-panel .ml-office{padding:30px 24px}
  .ml-enquiry-form button[type="submit"]{width:100%;padding:16px 30px}
  .ml-map-embed .ml-map{height:280px}
  #contact-close-actions.e-con{flex-direction:column;align-items:stretch;--width:100%}
  #contact-close-actions .elementor-button{width:100%}
}

/* ── Form controls take the ink, never the theme accent ───────────
   The consent checkbox rendered in the browser/theme accent blue,
   the only colour on the site outside black, white and soft grey
   (clause 7). accent-color covers checkbox, radio and progress in
   one declaration, and applies to plugin-rendered controls too, so
   it holds when the enquiry form moves to SureForms. */

#contact-enquiry input[type="checkbox"],
#contact-enquiry input[type="radio"],
#contact-enquiry .srfm-input-checkbox,
#contact-enquiry .srfm-form-container input[type="checkbox"],
#contact-enquiry .srfm-form-container input[type="radio"]{
  accent-color:var(--ml-ink);
  width:17px;
  height:17px;
  flex:0 0 auto;
}

#contact-enquiry input[type="checkbox"]:focus-visible,
#contact-enquiry .srfm-form-container input[type="checkbox"]:focus-visible{
  outline:2px solid var(--ml-ink);
  outline-offset:2px;
}

/* ── SureForms enquiry form, dressed in the site's own language ───
   The form is now a real SureForms form so submissions are captured
   as entries. Its default styling is boxed inputs, red asterisks and
   a generic button; the site's form language is underline-only
   fields, quiet labels and the standard button. Restyled here
   because SureForms renders its own markup and Elementor cannot
   reach inside it. */

#contact-enquiry .srfm-form-container{padding:0;background:transparent}
/* Do NOT set display on .srfm-form: SureForms lays the fields out itself and
   fieldWidth:50 depends on it. Overriding it collapsed the grid to one column. */

#contact-enquiry .srfm-block-wrap,
#contact-enquiry .srfm-block{min-width:0}

#contact-enquiry .srfm-block-label,
#contact-enquiry label.srfm-block-label{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ml-grey);
  margin-bottom:9px;
}

#contact-enquiry .srfm-required{color:var(--ml-grey);font-weight:600}

#contact-enquiry .srfm-input-common,
#contact-enquiry input[type="text"],
#contact-enquiry input[type="email"],
#contact-enquiry input[type="tel"],
#contact-enquiry input[type="url"],
#contact-enquiry input[type="number"],
#contact-enquiry textarea,
#contact-enquiry select{
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  color:var(--ml-ink);
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(0,0,0,.18);
  border-radius:0;
  padding:10px 2px;
  width:100%;
  box-shadow:none;
  transition:border-color .25s ease;
}

#contact-enquiry .srfm-input-common:focus,
#contact-enquiry input:focus,
#contact-enquiry textarea:focus,
#contact-enquiry select:focus{
  outline:none;
  border-bottom:2px solid var(--ml-ink);
  box-shadow:none;
}

#contact-enquiry textarea{resize:vertical;min-height:90px}

/* the consent line is a sentence, not a field label */
#contact-enquiry .srfm-gdpr-block .srfm-block-label,
#contact-enquiry .srfm-gdpr .srfm-block-label{
  font-family:"Literata",Georgia,serif;
  font-weight:400;
  font-size:.9062rem;
  line-height:1.55;
  letter-spacing:0;
  text-transform:none;
  color:var(--ml-ink);
}

/* phone control keeps the underline language rather than its own box */
#contact-enquiry .srfm-phone-container,
#contact-enquiry .iti{width:100%}
#contact-enquiry .iti__flag-container{border:none;background:transparent}

/* one button style throughout the website (guide 13) */
#contact-enquiry .srfm-button,
#contact-enquiry button[type="submit"],
#contact-enquiry .srfm-submit-button{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-size:.82rem !important;
  letter-spacing:.04em !important;
  text-transform:none !important;
  font-weight:600 !important;
  background-color:var(--ml-ink) !important;
  color:var(--ml-paper) !important;
  border:1px solid var(--ml-ink) !important;
  border-radius:var(--ml-button-radius) !important;
  min-height:54px;
  padding:17px 30px !important;
  box-shadow:none !important;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}

#contact-enquiry .srfm-button:hover,
#contact-enquiry button[type="submit"]:hover,
#contact-enquiry .srfm-submit-button:hover{
  background-color:var(--ml-paper) !important;
  color:var(--ml-ink) !important;
  border-color:var(--ml-ink) !important;
}

#contact-enquiry .srfm-error,
#contact-enquiry .srfm-error-message{
  font-family:"Literata",Georgia,serif;
  font-size:.8438rem;
  color:#8a2b2b;
}

/* ── Consent line: the asterisk must not orphan ──────────────────────
   SureForms renders the required marker as a separate span, and the label
   text ends with markup whitespace that collapses to a breakable space.
   At the form's width that left a lone "*" on its own line beneath
   "...Privacy Policy."

   Reattaching the marker with a non-breaking space does NOT fix it: the
   break opportunity is the collapsed whitespace that sits BEFORE the
   marker, so the line still breaks there and the nbsp binds nothing.
   Verified by looking - the orphan survived that attempt.

   The marker therefore leads the sentence instead, where it is bound to
   "I" and no orphan is possible at any width. The input keeps
   aria-required, so nothing is lost to screen readers. */
.srfm-gdpr-block .srfm-block-label .srfm-required{
  display:none;
}

.srfm-gdpr-block .srfm-block-label::before{
  content:"*\00a0";
}

/* The consent sentence now carries a link to the Privacy Policy, because a
   data-protection consent should be able to reach the policy it refers to.
   SureForms renders HTML in the GDPR label and its own stylesheet loads AFTER
   the child theme, so the anchor arrived as Astra blue (rgb(4,107,210)) in
   Literata - the one blue on an otherwise black and white site. It reads as
   ink with a rule instead, the same treatment every other inline link on the
   site carries (see body.single-post .entry-content a in ml-site.css).
   The anchor sits inside the <label>. That is correct and not a defect:
   clicking interactive content inside a label does not activate the labelled
   control, and it was tested - the checkbox does not toggle. It opens in a new
   tab deliberately, so a visitor who has filled the form does not lose it. */
#contact-enquiry .srfm-gdpr-block .srfm-block-label a,
#contact-enquiry .srfm-gdpr .srfm-block-label a{
  color:var(--ml-ink) !important;
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(10,10,10,.32);
  transition:text-decoration-color .3s ease;
}

#contact-enquiry .srfm-gdpr-block .srfm-block-label a:hover,
#contact-enquiry .srfm-gdpr .srfm-block-label a:hover{
  text-decoration-color:rgba(10,10,10,.9);
}