/* ==========================================================================
   Contact
   Loaded only by src/pages/contact.njk (front matter: pageCss: contact).

   Shared furniture (.mf-h2, .mf-lead, .mf-btn*, .mf-eyebrow*, .mf-reveal,
   .mf-horizon, .mf-chip-icon) comes from framework/components.css. Colour,
   type, radius and shadow all come from tokens — see theme-mediflare.css and
   framework/tokens.css. No raw hex below except inside gradient ramps, where
   the stops are the design itself.

   The page runs paper → coal → paper, the same rhythm as the service pages:
   the hero and the direct contact details on the warm wash, "what happens
   next" on coal, then the FAQ back on paper closing on a dark panel floating
   on the wash. The two .mf-horizon bands in the template do the ramps.
   ========================================================================== */

/* ==========================================================================
   Shared section furniture
   ========================================================================== */

.mf-ct-sechead {
  text-align: center;
  max-inline-size: 760px;
  margin: 0 auto 56px;
}

.mf-ct-sechead .mf-eyebrow { margin-block-end: 20px; }

/* .mf-lead is written for paper; on coal it needs the on-dark body colour. */
.mf-ct-sechead-dark .mf-lead { color: var(--ink-on-dark-body); }


/* ==========================================================================
   Hero — copy on the left, the form on the right

   The form is the hero rather than a section below it. On a contact page the
   form is the content, so it opens above the fold on a laptop and the copy
   sits beside it instead of pushing it down.
   ========================================================================== */

.mf-ct-hero {
  position: relative;
  overflow: clip;
  padding: 116px 48px 40px;
}

.mf-ct-hero__glow {
  position: absolute;
  inset-block-start: -180px;
  inset-inline-end: -160px;
  inline-size: 720px;
  block-size: 720px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, var(--flare-a12), transparent 62%);
}

.mf-ct-hero__wrap {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

/* Same reason as .mf-ct-field below: the form column carries a <select> and
   would otherwise hold the whole grid open at its widest option. */
.mf-ct-hero__wrap > * { min-inline-size: 0; }

.mf-ct-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(34px, 3.5vw, 54px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 20px 0 0;
  text-wrap: balance;
}

.mf-ct-hero__lead {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  max-inline-size: 480px;
  margin: 24px 0 0;
}

.mf-ct-hero__trust {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-medium);
  color: var(--ink-soft);
}

.mf-ct-hero__trust li {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* --- The direct line -----------------------------------------------------
   Repeated here so someone who never intended to fill in a form does not
   have to scroll past one to find a phone number. */

.mf-ct-hero__direct {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 34px;
  padding-block-start: 30px;
  border-block-start: 1px solid var(--border-light);
}

.mf-ct-direct {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px 12px 13px;
  border-radius: var(--radius-tile);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-tile);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              border-color 0.2s var(--ease);
}

a.mf-ct-direct:hover {
  transform: translateY(-2px);
  border-color: var(--flare-a30);
  box-shadow: var(--shadow-card-sm);
  text-decoration: none;
}

.mf-ct-direct__label,
.mf-ct-direct__value { display: block; }

.mf-ct-direct__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mf-ct-direct__value {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin-block-start: 2px;
}

/* The address is written in by site.js, so the anchor it builds has to
   inherit rather than pick up the base link colour. */
.mf-ct-direct__value a { color: inherit; text-decoration: none; }


/* ==========================================================================
   The form card
   ========================================================================== */

.mf-ct-card {
  position: relative;
  padding: 36px 34px 32px;
  border-radius: var(--radius-stage);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  /* The card is the page's anchor target; without this the sticky nav sits
     over its heading when someone follows #contact-form. */
  scroll-margin-block-start: 110px;
}

.mf-ct-card__glow {
  position: absolute;
  inset-block-start: -70px;
  inset-inline-start: -70px;
  inline-size: 300px;
  block-size: 300px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle, var(--flare-a20), transparent 65%);
}

.mf-ct-form__head { margin-block-end: 26px; }

.mf-ct-form__title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 25px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.mf-ct-form__note {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 8px 0 0;
}

.mf-ct-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* min-inline-size:0 is load-bearing. A <select> contributes its widest
   option as its min-content width — "Engagement — Patients reach out" is
   wider than a phone — and a grid item will not shrink past that on its
   own, so the card, the hero grid and the page all end up wider than the
   viewport. */
.mf-ct-field { margin: 0; min-inline-size: 0; }
.mf-ct-field-wide { grid-column: 1 / -1; }

.mf-ct-field label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--ink-body);
  margin-block-end: 7px;
}

.mf-ct-field__opt {
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* One rule for all three controls — a select that sits a pixel off the
   inputs beside it is the first thing the eye finds on a form. */
.mf-ct-field input,
.mf-ct-field select,
.mf-ct-field textarea {
  inline-size: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border-light-strong);
  background: var(--paper-500);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background 0.2s var(--ease);
}

.mf-ct-field textarea { resize: vertical; min-block-size: 120px; }

.mf-ct-field input::placeholder,
.mf-ct-field textarea::placeholder { color: var(--ink-dim); }

.mf-ct-field input:focus,
.mf-ct-field select:focus,
.mf-ct-field textarea:focus {
  outline: none;
  background: var(--paper-100);
  border-color: var(--flare-a50);
  box-shadow: 0 0 0 3px var(--flare-a15);
}

/* Only after a submit attempt — .is-checked is set by contact.js. Marking
   fields red while someone is still working down the form is noise, not
   help. */
.mf-ct-form.is-checked .mf-ct-field input:invalid,
.mf-ct-form.is-checked .mf-ct-field textarea:invalid {
  border-color: var(--status-cross);
  background: var(--paper-100);
}

/* --- Select --------------------------------------------------------------
   The native arrow is stripped and redrawn so the control matches the
   inputs; the wrapper carries the mark and keeps it clear of the text. */

.mf-ct-select { position: relative; display: block; }

.mf-ct-select select {
  appearance: none;
  padding-inline-end: 42px;
  cursor: pointer;
  min-inline-size: 0;
  text-overflow: ellipsis;
}

.mf-ct-select__mark {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 14px;
  translate: 0 -50%;
  display: inline-flex;
  pointer-events: none;
  color: var(--flare-600);
}

/* Options are drawn by the OS, which will not take the page's warm paper —
   so give them a surface that at least agrees with the ink. */
.mf-ct-select optgroup { font-family: var(--font-ui); color: var(--ink); }
.mf-ct-select option { color: var(--ink); }

/* --- Honeypot ------------------------------------------------------------
   Off-screen rather than display:none — some bots skip anything hidden. */

.mf-ct-form__trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

.mf-ct-form__submit {
  inline-size: 100%;
  justify-content: center;
  margin-block-start: 24px;
  padding: 15px 28px;
}

.mf-ct-form__submit[disabled] { opacity: 0.7; pointer-events: none; }

.mf-ct-form__consent {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: center;
  margin: 14px 0 0;
}

.mf-ct-form__consent a { color: var(--flare-700); }

/* --- Outcomes ------------------------------------------------------------
   Both ship in the markup and stay hidden until the script has something to
   say, so neither is a block of unstyled text assembled at runtime. */

.mf-ct-form__done {
  text-align: center;
  padding: 18px 6px 10px;
  animation: ctDone 0.4s var(--ease-out) both;
}

.mf-ct-form__done[hidden] { display: none; }

.mf-ct-form__done .mf-chip-icon { margin-block-end: 18px; }

.mf-ct-form__done-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}

.mf-ct-form__done-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 10px auto 0;
  max-inline-size: 40ch;
}

.mf-ct-form__done-body a { color: var(--flare-700); font-weight: var(--weight-semibold); }

.mf-ct-form__done-error .mf-ct-form__done-title { color: var(--status-cross); }

@keyframes ctDone {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}


/* ==========================================================================
   Ways to reach us
   ========================================================================== */

.mf-ct-channels {
  position: relative;
  padding: 40px 40px 72px;
}

/* Opens on the colour the arch's dome is filled with, then hands the page
   wash back over the first stretch — so the arch reads as a glow across the
   join rather than a band of its own. Weighted late: the eye reads the
   start of an even paper fade as a band. */
.mf-ct-channels::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 560px;
  z-index: 0;
  pointer-events: none;
  background: var(--paper-500);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgb(0 0 0 / 0.7) 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgb(0 0 0 / 0.7) 68%, transparent 100%);
}

.mf-ct-channels__inner { position: relative; z-index: 1; }

.mf-ct-channels__inner {
  max-inline-size: var(--section-max);
  margin-inline: auto;
}

.mf-ct-ways {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.mf-ct-way {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-radius: var(--radius-stage);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-tile);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

.mf-ct-way:hover {
  transform: translateY(-3px);
  border-color: var(--flare-a30);
  box-shadow: var(--shadow-card-sm);
}

.mf-ct-way .mf-chip-icon { margin-block-end: 20px; }

.mf-ct-way__label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.mf-ct-way__value {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
  margin: 8px 0 0;
  overflow-wrap: anywhere;
}

.mf-ct-way__value a { color: inherit; text-decoration: none; }
.mf-ct-way__value a:hover { color: var(--flare-700); }

.mf-ct-way__note {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 12px 0 0;
}

/* Pushed to the foot so the three actions line up across cards whose notes
   wrap to different depths. */
.mf-ct-way__action {
  margin-block-start: auto;
  padding-block-start: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: var(--weight-bold);
  color: var(--flare-700);
}

.mf-ct-way__action:hover { text-decoration: none; gap: 11px; }
.mf-ct-way__action svg { transition: translate 0.2s var(--ease); }
.mf-ct-way__action:hover svg { translate: 2px 0; }


/* Where we are — a strip the full width of the cards, the pin in its own
   well on the left, so it reads as a fourth row of the same furniture
   rather than a caption floating under it. */
.mf-ct-remote {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 18px 24px;
  border-radius: var(--radius-tile);
  background: var(--paper-100);
  border: 1px solid var(--border-light);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  /* base.css caps every <p> at 65ch, which would stop this spanning. */
  max-inline-size: none;
}

.mf-ct-remote svg {
  flex: none;
  box-sizing: content-box;
  padding: 10px;
  border-radius: 50%;
  background: var(--flare-a10);
  border: 1px solid var(--flare-a20);
}
.mf-ct-remote b { color: var(--ink); font-weight: var(--weight-semibold); }

@media (max-width: 700px) {
  .mf-ct-remote { align-items: flex-start; padding: 16px 18px; }
}


/* ==========================================================================
   FAQ
   ========================================================================== */

.mf-ct-faq { padding: 48px 40px 24px; }

/* The marquee sits under the hero, before the arch, as on the home page. */
.mf-ct-hero + .mf-marquee { margin-block-start: 8px; padding-block-end: 0; }
.mf-ct-faq { padding-block-start: 24px; }

.mf-ct-faq__inner {
  max-inline-size: var(--section-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}

/* Sticky rather than centred: the heading is the section's label and the
   answers are the section, so the label stays put while they are read. */
.mf-ct-faq__head {
  position: sticky;
  inset-block-start: 118px;
}

.mf-ct-faq__head .mf-eyebrow { margin-block-end: 20px; }

.mf-ct-faq__lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-muted);
  margin: 18px 0 28px;
  max-inline-size: 40ch;
}

.mf-ct-acc { display: grid; gap: 10px; }

/* Every row is the same light card; the open one is told apart by its
   edge — the brand gradient drawn as the border — and by its question,
   set in the gradient too. No surface change, so a row opening reads as
   the same card unfolding rather than a different one arriving. The
   height is animated by contact.js (details has no transition of its
   own); without the script it still opens, just at once. */
.mf-ct-acc__item {
  /* base.css pads every <details>; the row's padding is on the summary. */
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--paper-100) padding-box;
  border: 1.5px solid var(--border-light);
  box-shadow: var(--shadow-tile);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.mf-ct-acc__item:hover { border-color: var(--border-light-strong); }

.mf-ct-acc__item[open] {
  /* The paper as a gradient of one colour: a plain colour may only sit in
     the last layer of a background, and the border layer has to be last. */
  background:
    linear-gradient(var(--paper-100), var(--paper-100)) padding-box,
    var(--grad-border) border-box;
  border-color: transparent;
  box-shadow: var(--shadow-card-sm), 0 0 0 4px var(--flare-a08);
}

.mf-ct-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  list-style: none;
  transition: color 0.3s var(--ease);
}

.mf-ct-acc__item:hover .mf-ct-acc__q { color: var(--flare-600); }

.mf-ct-acc__item[open] .mf-ct-acc__q > span:first-child {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Safari still draws the disclosure triangle without this. */
.mf-ct-acc__q::-webkit-details-marker { display: none; }

.mf-ct-acc__q:focus-visible { outline: 2px solid var(--flare-600); outline-offset: 3px; }

.mf-ct-acc__mark {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--flare-600);
  background: var(--flare-a08);
  transition: rotate 0.35s var(--ease-out), background 0.3s var(--ease), color 0.3s var(--ease);
}

.mf-ct-acc__item[open] .mf-ct-acc__mark {
  rotate: 180deg;
  color: var(--ink-on-dark);
  background: var(--grad-cta);
}

.mf-ct-acc__a { padding: 0 18px 18px; }

.mf-ct-acc__a p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0;
  max-inline-size: 62ch;
}

/* The answer arrives a beat after the card has made room for it. */
.mf-ct-acc__item[open] .mf-ct-acc__a { animation: ctAccOpen 0.4s var(--ease-out) 0.12s both; }

@keyframes ctAccOpen {
  from { opacity: 0; translate: 0 -4px; }
  to   { opacity: 1; translate: 0 0; }
}
  to   { opacity: 1; translate: 0 0; }
}


/* ==========================================================================
   Closing CTA — a dark panel floating on the page wash, the same shape the
   homepage and the service pages close on.
   ========================================================================== */

.mf-ct-cta { padding: 60px 40px 120px; }

.mf-ct-cta__panel {
  position: relative;
  overflow: hidden;
  max-inline-size: var(--section-max);
  margin-inline: auto;
  padding: 68px 48px;
  border-radius: var(--radius-stage);
  background: var(--panel-dark-deep);
  border: 1px solid var(--coal-400);
  box-shadow: var(--shadow-panel);
  text-align: center;
}

.mf-ct-cta__glow {
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 720px;
  block-size: 720px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgb(232 84 10 / 0.22), transparent 60%);
}

.mf-ct-cta__body { position: relative; z-index: 1; }
.mf-ct-cta__body .mf-eyebrow { margin-block-end: 24px; }
.mf-ct-cta__body .mf-h2 { max-inline-size: 680px; margin-inline: auto; }

.mf-ct-cta__lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-on-dark-body);
  margin: 20px auto 0;
  max-inline-size: 560px;
}

.mf-ct-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-block-start: 34px;
}

.mf-ct-cta__actions .mf-btn { padding: 16px 32px; }


/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .mf-ct-hero { padding-inline: 32px; }
  .mf-ct-hero__wrap { grid-template-columns: 1fr; gap: 44px; }
  .mf-ct-hero__lead { max-inline-size: 62ch; }
  .mf-ct-card { max-inline-size: 640px; }

  .mf-ct-channels, .mf-ct-faq, .mf-ct-cta { padding-inline: 32px; }

  .mf-ct-faq__inner { grid-template-columns: 1fr; gap: 36px; }
  .mf-ct-faq__head { position: static; text-align: center; }
  .mf-ct-faq__lead { margin-inline: auto; }
}

@media (max-width: 900px) {
  .mf-ct-ways { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .mf-ct-hero { padding: 96px 20px 56px; }
  .mf-ct-card { padding: 28px 22px 26px; }
  .mf-ct-form__grid { grid-template-columns: 1fr; }
  .mf-ct-hero__direct { flex-direction: column; align-items: stretch; }

  .mf-ct-channels { padding: 24px 20px 80px; }
  .mf-ct-faq { padding: 24px 20px 24px; }
  .mf-ct-cta { padding: 48px 20px 96px; }
  .mf-ct-cta__panel { padding: 46px 24px; }

  .mf-ct-sechead { margin-block-end: 40px; }
  .mf-ct-way { padding: 26px 22px; }
}

@media (max-width: 480px) {
  .mf-ct-way__value { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-ct-form__done,
  .mf-ct-acc__item[open] .mf-ct-acc__a { animation: none; }
  .mf-ct-way:hover,
  a.mf-ct-direct:hover { transform: none; }
}