/* ==========================================================================
   Starfish Group — contact.css

   One section, two columns: what we need from you and where we are on the
   left, the form on the right. The form is the homepage's own sentence turned
   into fields, so the page's whole job is to make those fields easy to fill
   and obvious to answer. Everything here serves that; nothing decorates it.
   ========================================================================== */

.contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ivory);
  /* THE PANEL IS SIZED TO THE SCREEN, NOT ONLY TO THE WIDTH. Everything on
     this page is one form, and a form the reader has to scroll to find the
     send button on is a form with a step hidden in it. So the rhythm here
     takes a vh term as well as a vw one: on a tall screen these resolve to
     exactly the values the page had, and on a short one they close up
     proportionally rather than the panel running off the bottom.
     They are read by .contact__panel and .cf below. */
  --cf-pad:  clamp(26px, 4vh, 44px);
  --cf-gap:  clamp(16px, 2vh, 26px);
  --cf-ta:   clamp(76px, 9.4vh, 104px);

  /* The header is fixed and this page has no hero to sit under it, so the
     top padding has to carry its height as well as its own. */
  padding-top: calc(var(--header-h) + clamp(38px, 5.2vh, 80px));
  padding-bottom: clamp(56px, 8vh, 104px);
}

.contact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}

/* --------------------------------------------------------------------------
   THE GROUND
   The plant entrance, faded almost to nothing. It is doing the job the
   reference's stock photograph did, with the difference that this is the
   building the address points at.

   A SEPARATE LAYER, NOT A BACKGROUND ON THE SECTION. Fading it with opacity
   means the ivory shows through evenly and the photograph never darkens the
   copy sitting on top.

   EDGE TO EDGE. It was masked out of the left column for a while, on the
   strength of a contrast reading that turned out to be measuring the wrong
   thing: it sampled the whole box of each text element rather than the pixels
   its glyphs actually cover, and those boxes run the full width of the column
   — so it was reporting the darkest pixel anywhere on that line, including a
   long way past the end of the words. Measured under the glyphs themselves
   there was nothing to fix, so there is no mask.
   -------------------------------------------------------------------------- */
.contact__ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* A PANEL DOWN THE LEFT, not a wash across the whole page. Sized to the
     section's height and anchored to its left edge, the photograph takes a bit
     over half the width and stops — the form plate covers the right anyway, so
     spanning the full width only ever put the building behind it.

     The crop is portrait for the same reason: a 16:9 frame that no longer
     spans the page can only be a band across the middle of it. And its right
     edge is faded rather than cut, so the picture ends in the gutter between
     the two columns instead of drawing a line down the page. */
  background: url("../img/contact-plant.webp") left center / auto 100% no-repeat;
  --ground-fade: linear-gradient(90deg, #000 0%, #000 64%, transparent 93%);
  -webkit-mask-image: var(--ground-fade);
          mask-image: var(--ground-fade);
  /* 0.22, not 0.26. The brand red on the eyebrow sat at 4.47:1 over the
     building's glass — three hundredths short, and the photograph had already
     been lifted as far as it can go without washing out. */
  opacity: 0.22;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   THE LEFT COLUMN
   -------------------------------------------------------------------------- */
.contact__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--red);
}
.contact__heading {
  margin-top: clamp(14px, 1.6vw, 20px);
  max-width: 14ch;
}
.contact__lede {
  margin-top: var(--s-24);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 40ch;
}

/* Rows, because that is what they are: a term and its answer, three times. */
.contact__details {
  margin-top: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--border);
}
.contact__details > div {
  display: grid;
  grid-template-columns: minmax(0, 11ch) minmax(0, 1fr);
  gap: var(--s-20);
  padding-block: var(--s-16);
  border-bottom: 1px solid var(--border);
}
.contact__details dt {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  /* --ink-meta is the lightest type on the page and these are the smallest
     glyphs on it. Over the photograph it measured 4.17:1 under the ink; one
     step darker clears 4.5 with room. */
  color: var(--ink-soft);
  padding-top: 3px;
}
.contact__details dd {
  margin: 0;
  font-size: var(--text-small);
  line-height: 1.6;
  color: var(--ink);
}
.contact__details dd span { color: var(--ink-meta); margin-inline: 3px; }

.contact__address { font-style: normal; }

.contact__email {
  color: var(--ink);
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 2px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  overflow-wrap: anywhere;
}
.contact__email:hover { color: var(--red); border-color: var(--red); }
.contact__email:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   THE FORM
   On its own plate so it reads as the thing to do, not as more of the page.
   -------------------------------------------------------------------------- */
.contact__panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: var(--cf-pad);
}

.cf__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.cf__row + .cf__row,
.cf > * + * { margin-top: var(--cf-gap); }

.cf__field { display: flex; flex-direction: column; }

.cf__label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--track-micro);
  color: var(--ink);
  margin-bottom: var(--s-8);
}
/* The one thing on the plate that is coral, and it is doing a job: it marks
   what cannot be left blank. */
.cf__req { color: var(--rm-coral-ink, #A94A2E); }
/* Beside the label, not under it. As its own line it cost the panel a row
   for nine words that only qualify the field above them. */
.cf__hint {
  font-weight: 400;
  font-size: var(--text-caption);
  letter-spacing: 0;
  color: var(--ink-meta);
}
.cf__label:has(.cf__hint) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.cf__input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.cf__input::placeholder { color: var(--ink-meta); }
.cf__input:hover { border-color: var(--ink-meta); }
.cf__input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--surface-card);
}
.cf__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cf__textarea { resize: vertical; min-height: var(--cf-ta); }

.cf__input[aria-invalid="true"] { border-color: var(--red); }
.cf__error {
  margin-top: 6px;
  font-size: var(--text-caption);
  line-height: 1.4;
  color: var(--red);
}

/* --- what you are looking for --------------------------------------------- */
/* Margin-inline only. A blanket `margin: 0` here also cancelled the top
   margin the stack gives every child, so the group sat hard against the field
   above it. */
.cf__fieldset { border: 0; padding: 0; margin-inline: 0; }
.cf__fieldset .cf__label { display: block; padding: 0; }

.wants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px clamp(12px, 1.6vw, 20px);
}

/* THE WHOLE ROW IS THE TARGET. A 16px box on a phone is a miss waiting to
   happen, so the label wraps the input and the box is drawn rather than
   styled — a native checkbox cannot take a border radius consistently across
   browsers, and this one has to sit in the same family as the inputs. */
.want {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
.want:hover { border-color: var(--ink-meta); }

.want__box {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.want__mark {
  position: relative;
  flex: none;
  width: 17px;
  height: 17px;
  border: 1px solid var(--border-dark);
  border-radius: 5px;
  background: var(--cream);
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
/* The tick is two strokes of a border, rotated — same weight as the hairlines
   everywhere else, and nothing to load. */
.want__mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid var(--cream);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0.4);
  opacity: 0;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.want__text {
  font-size: var(--text-small);
  line-height: 1.35;
  color: var(--ink-soft);
}

.want__box:checked ~ .want__mark {
  background: var(--ink);
  border-color: var(--ink);
}
.want__box:checked ~ .want__mark::after { transform: rotate(45deg) scale(1); opacity: 1; }
.want:has(.want__box:checked) { border-color: var(--ink); background: var(--cream); }
.want:has(.want__box:checked) .want__text { color: var(--ink); }
.want__box:focus-visible ~ .want__mark { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --- the honeypot ---------------------------------------------------------
   Off-screen rather than display:none — a bot reading the stylesheet skips a
   hidden field and fills a visible one. */
.cf__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- the foot -------------------------------------------------------------- */
.cf__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-16) var(--s-24);
  padding-top: var(--s-8);
}
.cf__submit .btn__arrow { transition: transform 260ms var(--ease-out); }
.cf__submit:hover .btn__arrow { transform: translateX(3px); }
.cf__submit[disabled] { opacity: 0.55; pointer-events: none; }

.cf__note {
  font-size: var(--text-caption);
  line-height: 1.5;
  /* --ink-meta measured 4.49:1 on this plate — a rounding miss rather than a
     real one, but it is a miss. One step darker. */
  color: var(--ink-soft);
  max-width: 32ch;
}

.cf__status {
  padding: var(--s-16) var(--s-20);
  border-radius: 12px;
  font-size: var(--text-small);
  line-height: 1.55;
}
.cf__status[data-tone="ok"]   { background: var(--seaglass); color: var(--ink); }
.cf__status[data-tone="bad"]  { background: #F6E7E7; color: #7A1F24; }

/* --------------------------------------------------------------------------
   NARROWER
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, there is no left column to sit beside, so it covers the page
     again — and the portrait crop means cover no longer has to blow a wide
     photograph up several times over to reach the height of a phone page. */
  .contact__ground {
    background-size: cover;
    background-position: center top;
    --ground-fade: linear-gradient(180deg, #000 0%, #000 68%, transparent 96%);
  }
  .contact__heading { max-width: 18ch; }
}

@media (max-width: 560px) {
  .cf__row { grid-template-columns: minmax(0, 1fr); }
  /* Room to spare when stacked, and the hint reads better on its own line. */
  .cf__label:has(.cf__hint) { display: block; }
  .cf__hint { display: block; margin-top: 2px; }
  .wants { grid-template-columns: minmax(0, 1fr); }
  .contact__details > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .contact__details dt { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cf__input, .want, .want__mark, .want__mark::after,
  .cf__submit .btn__arrow, .contact__email { transition: none; }
  .cf__submit:hover .btn__arrow { transform: none; }
}