/* Section: four ways in. Amber is the action colour, so this is the amber ground. */
.connect {
  background: var(--amber);
  color: var(--forest-deep);
  padding-block: var(--section);
}
.connect__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.connect__title { font-size: clamp(2.4rem, 4.4vw + .8rem, 4.5rem); }
.connect__intro { max-inline-size: 30rem; font-size: 1.25rem; line-height: 1.45; }

.connect__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 6rem);
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}
/* Without a heading (e.g. the contact page) the routes start the section */
.connect__list:first-child { margin-block-start: 0; }
/* Open rows under a hairline, in the same two columns as the heading; no boxes */
.way {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2.25rem, 4.5vw, 3.5rem);
  border-block-start: 1px solid rgba(15, 31, 24, .3);
  transition: border-color .3s;
}
.way__title {
  font-size: clamp(1.6rem, 1.4vw + 1.2rem, 2.25rem);
  text-decoration: underline transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  transition: text-decoration-color .3s;
}
.way__text { max-inline-size: 30rem; margin-block: .875rem 1.75rem; }
.way__note { margin-block: -.75rem 1.75rem; font-size: 1rem; font-weight: 600; }
.way__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  align-self: flex-start;
  margin-block-start: auto;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
  overflow-wrap: anywhere;
}
/* The whole panel is the target; the link stays the only focusable element */
.way__link::after { content: ""; position: absolute; inset: 0; }
/* Hover stays on the amber ground: the rule firms up, the title underlines, the arrow moves */
.way:hover, .way:focus-within { border-block-start-color: var(--forest-deep); }
.way:hover .way__title, .way:focus-within .way__title { text-decoration-color: currentColor; }
.way__link:focus-visible { outline-color: var(--forest-deep); }

/* Get in touch: one composition in two columns. The heading on the left; on the right the
   intro, then the button beside the email address under a hairline, then the reassurance
   line. On the Contact page the form itself takes the place of the button. No boxes. */
.connect__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem clamp(2rem, 6vw, 6rem);
  align-items: start;
}
/* Without a heading (the Contact page) the main column takes the full width */
.connect__main:first-child { grid-column: 1 / -1; }
.connect__main .connect__intro { max-inline-size: 34rem; font-size: clamp(1.125rem, .5vw + 1rem, 1.375rem); }
.connect__reach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  max-inline-size: 46rem;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  padding-block-start: clamp(1.5rem, 3vw, 2.25rem);
  border-block-start: 1px solid rgba(15, 31, 24, .3);
}
.connect__reach:first-child { margin-block-start: 0; }
.connect__form { display: block; inline-size: 100%; max-inline-size: 46rem; border: 0; }
.connect__other, .connect__fallback { font-size: 1.125rem; }
.connect__other a, .connect__fallback a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .3em;
  overflow-wrap: anywhere;
}
.connect__note { max-inline-size: 34rem; margin-block-start: 1.5rem; font-size: 1rem; font-weight: 600; }
.connect__reach a:focus-visible { outline-color: var(--forest-deep); }

@media (max-width: 53.75em) {
  .connect__head, .connect__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 43.75em) {
  .connect__list { grid-template-columns: minmax(0, 1fr); }
}

/* With the form embedded (Contact page) the section sits on paper, so the form's own paper
   ground and the page read as one surface. Amber stays for the button-only version. */
.connect--embed { background: var(--paper); color: var(--ink); }
.connect--embed .connect__reach { flex-direction: column; align-items: flex-start; border-block-start: 0; padding-block-start: 0; }
.connect--embed .connect__form { background: var(--paper); }