/* ============================================================
   MAM Contact page
   Everything is scoped under .mam-contact so it cannot touch
   the rest of the site. No page ID is hard-coded anywhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Public+Sans:wght@400;500;600&display=swap');

.mam-contact{
  --mam-paper:#F1F0EC;
  --mam-surface:#FBFAF8;
  --mam-surface-2:#E7E5DF;
  --mam-ink:#1B2024;
  --mam-ink-2:#3C444A;
  --mam-muted:#666E74;
  --mam-line:#D6D3CB;
  --mam-line-strong:#B9B5AB;
  --mam-accent:#9E2B25;
  --mam-on-accent:#FFF8F7;
  --mam-steel:#2E4A5A;
  --mam-steel-soft:#E1E8EC;
  --mam-brass:#8A6A24;
  --mam-sans:"Public Sans","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mam-display:"Archivo","Public Sans","Open Sans",Helvetica,Arial,sans-serif;

  font-family:var(--mam-sans);
  font-size:17px;
  line-height:1.6;
  color:var(--mam-ink);
}

.mam-contact *,
.mam-contact *::before,
.mam-contact *::after{box-sizing:border-box;}

/* Enfold forces uppercase + 1px tracking on page headings with a more
   specific selector than ours, so these two need !important to win. */
.mam-contact h1,
.mam-contact h2,
.mam-contact h3{
  font-family:var(--mam-display);
  margin:0;padding:0;
  color:var(--mam-ink);
  line-height:1.1;
  text-wrap:balance;
  text-transform:none !important;
  letter-spacing:-.018em !important;
}
.mam-contact p{margin:0;}
.mam-contact a{color:inherit;}
.mam-contact :focus-visible{outline:2px solid var(--mam-steel);outline-offset:2px;}

/* No max-width: the section inherits the width of the theme container
   it is dropped into, so it always lines up with the rest of the page. */
.mam-wrap{width:100%;}

.mam-admin-note{
  border-left:3px solid var(--mam-accent);
  background:var(--mam-surface-2);
  padding:14px 16px;font-size:1rem;
}

/* ---------------- hero ---------------- */
.mam-hero{padding-block:8px 44px;border-bottom:1px solid var(--mam-line);}
.mam-eyebrow{
  font-family:var(--mam-display);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mam-accent);
  margin-bottom:16px !important;display:flex;align-items:center;gap:10px;
}
.mam-eyebrow::after{content:"";height:1px;flex:1;background:var(--mam-line-strong);max-width:120px;}
.mam-contact h1{font-size:clamp(2rem,6vw,3.25rem);font-weight:800;max-width:17ch;}
.mam-lede{margin-top:18px !important;max-width:56ch;font-size:1.25rem;color:var(--mam-ink-2);line-height:1.5;}
.mam-promise{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
.mam-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--mam-line-strong);background:var(--mam-surface);
  padding:7px 13px;font-size:14px;color:var(--mam-ink-2);
}
.mam-chip b{font-weight:600;color:var(--mam-ink);}
.mam-dot{width:7px;height:7px;background:var(--mam-accent);flex:none;}

/* ---------------- sections ---------------- */
.mam-section{padding-block:52px;}
.mam-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.mam-section-head h2{font-size:2rem;font-weight:700;}
.mam-section-head p{color:var(--mam-muted);font-size:1rem;max-width:44ch;}

/* ---------------- routes ---------------- */
.mam-routes{margin-top:28px;border-top:1px solid var(--mam-line-strong);}
.mam-route{
  display:grid;grid-template-columns:minmax(150px,195px) 1fr auto;
  gap:22px;align-items:start;padding-block:26px;
  border-bottom:1px solid var(--mam-line);
}
.mam-route-tag{
  font-family:var(--mam-display);font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mam-steel);padding-top:5px;
}
.mam-route-tag span{
  display:block;color:var(--mam-muted);font-family:var(--mam-sans);font-size:14px;
  letter-spacing:0;text-transform:none;font-weight:400;margin-top:7px;
}
.mam-route-body h3{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;}
.mam-route-body p{margin-top:7px !important;color:var(--mam-ink-2);max-width:48ch;font-size:1rem;}
.mam-route-who{
  margin-top:12px !important;font-size:14px;color:var(--mam-muted);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.mam-route-who code{
  font-family:var(--mam-sans);background:var(--mam-steel-soft);color:var(--mam-steel);
  padding:2px 7px;font-size:14px;font-weight:600;
}
.mam-route-act{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:180px;}

/* ---------------- buttons ---------------- */
.mam-contact .mam-btn,
.mam-contact .wpcf7-form input[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mam-display);font-weight:600;font-size:1rem;
  padding:12px 22px;border:1px solid transparent;border-radius:0;
  background:var(--mam-accent);color:var(--mam-on-accent);
  text-decoration:none;text-align:center;line-height:1.3;cursor:pointer;
  text-transform:none;letter-spacing:0;width:auto;height:auto;
  transition:transform .12s ease;
}
.mam-contact .mam-btn:hover,
.mam-contact .wpcf7-form input[type="submit"]:hover{
  transform:translateY(-1px);
  background:var(--mam-accent);color:var(--mam-on-accent);
}
.mam-contact .mam-btn-quiet{
  background:var(--mam-surface);color:var(--mam-ink);border-color:var(--mam-line-strong);
}
.mam-contact .mam-btn-quiet:hover{background:var(--mam-surface-2);color:var(--mam-ink);}
.mam-contact .mam-btn-link{
  background:none;border:none;padding:0;font-family:var(--mam-sans);font-weight:500;
  font-size:14px;color:var(--mam-steel);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;text-align:center;
}

/* ---------------- the form ---------------- */
.mam-desk{padding-block:8px 8px;}
.mam-formhead{max-width:660px;}
.mam-formhead h2{font-size:2rem;font-weight:700;}
.mam-formhead p{margin-top:10px !important;color:var(--mam-ink-2);max-width:48ch;}

.mam-formwrap{
  max-width:660px;margin-top:24px;
  background:var(--mam-surface);
  border:1px solid var(--mam-line-strong);
  padding:28px;
}
.mam-formwrap .wpcf7{margin:0;}
.mam-formwrap .wpcf7-form{display:flex;flex-direction:column;gap:18px;margin:0;}
.mam-formwrap .wpcf7-form fieldset.hidden-fields-container{display:none;}
.mam-formwrap .wpcf7-form br{display:none;}
.mam-formwrap .wpcf7-form-control-wrap{display:block;width:100%;}

/* One field: label on top, control underneath. Works whether the form
   template supplies .mam-f wrappers or leaves bare <p> tags. */
.mam-formwrap .mam-f,
.mam-formwrap .mam-f > p,
.mam-formwrap .wpcf7-form > p{
  display:flex;flex-direction:column;gap:6px;margin:0;
}
.mam-formwrap .mam-f label,
.mam-formwrap .mam-label{
  font-size:14px;font-weight:600;color:var(--mam-ink);line-height:1.4;
}
.mam-formwrap .mam-hint{font-size:14px;font-weight:400;color:var(--mam-muted);}

/* Two fields sharing a row. */
.mam-formwrap .mam-f-row{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;
}

.mam-formwrap .wpcf7-form input[type="text"],
.mam-formwrap .wpcf7-form input[type="email"],
.mam-formwrap .wpcf7-form select,
.mam-formwrap .wpcf7-form textarea{
  font-family:var(--mam-sans);font-size:1rem;font-weight:400;color:var(--mam-ink);
  background:#FFFFFF;border:1px solid var(--mam-line-strong);border-radius:0;
  padding:11px 13px;width:100%;box-shadow:none;margin:0;height:auto;line-height:1.5;
}
.mam-formwrap .wpcf7-form textarea{min-height:140px;line-height:1.55;resize:vertical;}
.mam-formwrap .wpcf7-form input:focus,
.mam-formwrap .wpcf7-form select:focus,
.mam-formwrap .wpcf7-form textarea:focus{
  border-color:var(--mam-steel);outline:2px solid var(--mam-steel);outline-offset:1px;
}

/* Newsletter checkbox row. */
.mam-formwrap .mam-f-check > p{margin:0;}
.mam-formwrap .wpcf7-form .wpcf7-checkbox{display:block;}
.mam-formwrap .wpcf7-form .wpcf7-list-item{margin:0;display:block;}
.mam-formwrap .wpcf7-form .wpcf7-list-item label{
  display:flex;gap:11px;align-items:flex-start;
  font-size:1rem;font-weight:400;color:var(--mam-ink-2);cursor:pointer;line-height:1.5;
}
.mam-formwrap .wpcf7-form input[type="checkbox"]{
  width:18px;height:18px;flex:none;margin:4px 0 0;accent-color:var(--mam-accent);
}

/* Submit row, with the "Goes to ..." note the script adds. */
.mam-formwrap .mam-f-submit > p,
.mam-formwrap .wpcf7-form p.mam-submit-row{
  display:flex;flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap;margin:0;
}
.mam-formwrap .mam-routing{font-size:14px;font-weight:400;color:var(--mam-muted);}
.mam-formwrap .mam-routing b{color:var(--mam-steel);font-weight:600;}
.mam-formwrap .wpcf7-spinner{margin:0 0 0 6px;}

.mam-formwrap .wpcf7-not-valid-tip{
  color:var(--mam-accent);font-size:14px;font-weight:400;margin-top:5px;
}
.mam-formwrap .wpcf7-response-output{
  margin:18px 0 0 !important;padding:14px 16px;
  border:1px solid var(--mam-line-strong) !important;
  background:var(--mam-surface-2);font-size:1rem;color:var(--mam-ink);border-radius:0;
}

/* ---------------- after you hit send ---------------- */
.mam-after h2{font-size:1.5rem;font-weight:700;}
.mam-steps{
  list-style:none;margin:26px 0 0 !important;padding:0;counter-reset:mamstep;
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.mam-steps li{
  counter-increment:mamstep;padding:44px 0 0;position:relative;margin:0;
  border-top:1px solid var(--mam-line-strong);list-style:none;
}
.mam-steps li::before{
  content:counter(mamstep);position:absolute;left:0;top:16px;
  width:29px;height:29px;display:grid;place-items:center;
  font-family:var(--mam-display);font-weight:700;font-size:14px;
  color:var(--mam-steel);border:1px solid var(--mam-line-strong);background:var(--mam-paper);
}
.mam-steps strong{display:block;font-weight:600;font-size:1rem;color:var(--mam-ink);}
.mam-steps span{color:var(--mam-muted);font-size:1rem;}
/* A rule and extra air between the three steps and the two side notes,
   so the notes read as an aside rather than a fourth step. */
.mam-notes{
  display:grid;grid-template-columns:repeat(2,1fr);gap:24px 40px;
  margin-top:44px;padding-top:36px;border-top:1px solid var(--mam-line);
}
.mam-note{
  border-left:3px solid var(--mam-brass);padding:4px 0 4px 16px;
  color:var(--mam-ink-2);font-size:1rem;
}
.mam-note-steel{border-left-color:var(--mam-steel);}

/* ---------------- newsletter ---------------- */
.mam-news{background:var(--mam-surface-2);margin-top:8px;}
.mam-news .mam-wrap{
  display:flex;gap:28px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:38px 28px;
}
.mam-news h2{font-size:1.5rem;font-weight:700;}
.mam-news p{color:var(--mam-ink-2);max-width:46ch;margin-top:8px !important;}

/* ---------------- direct emails ---------------- */
.mam-direct{padding-block:52px;}
.mam-direct h2{font-size:1.25rem;font-weight:700;}
.mam-mails{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  margin:22px 0 0;background:var(--mam-line);border:1px solid var(--mam-line);
}
.mam-mail{background:var(--mam-surface);padding:20px;}
.mam-mail dt{
  font-family:var(--mam-display);font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--mam-muted);
}
.mam-mail dd{margin:9px 0 0;}
.mam-mail a{color:var(--mam-steel);text-decoration:none;font-weight:600;word-break:break-word;}
.mam-mail a:hover{text-decoration:underline;}
.mam-mail .mam-when{display:block;margin-top:7px;font-size:14px;color:var(--mam-muted);font-weight:400;}

/* ---------------- narrow screens ---------------- */
@media only screen and (max-width:820px){
  .mam-route{grid-template-columns:1fr;gap:14px;}
  .mam-route-tag{padding-top:0;}
  .mam-route-tag span{display:inline;margin-left:8px;}
  .mam-route-act{min-width:0;flex-direction:row;flex-wrap:wrap;align-items:center;}
  .mam-route-act .mam-btn{flex:1 1 auto;}
  .mam-steps{grid-template-columns:1fr;gap:22px;}
  .mam-notes{grid-template-columns:1fr;}
}
@media only screen and (max-width:560px){
  .mam-formwrap .mam-f-row{grid-template-columns:1fr;}
  .mam-formwrap{padding:20px;}
  .mam-section{padding-block:38px;}
  .mam-hero{padding-block:4px 34px;}
}
@media (prefers-reduced-motion:reduce){
  .mam-contact *{transition:none !important;}
}