/* ===========================================================================
   Digiton Logistics · the contact page

   Loaded after linehaul.css, so the tokens, the nav, the buttons and the
   footer all come for free and only this page's own furniture lives here.

   The register is taken from the reference the client pointed at: a dark
   ground, a panel with a hairline edge, small letterspaced labels, and fields
   that are a rule rather than a box. Fewer edges than a boxed form, and the
   eye runs straight down the labels. What is NOT taken from it is the
   colour: this is royal and gold, not aubergine and orange.
   =========================================================================== */

.page-contact { background: var(--dark); }

/* ------------------------------------------------------------- the open -- */

.chead {
  background: var(--royal);
  padding-block: calc(var(--nav-h) + clamp(3.5rem, 8vw, 7rem)) clamp(3rem, 6vw, 5rem);
  color: #fff;
  position: relative; overflow: hidden;
}
/* The same ghosted wordmark the home page uses on its royal block, so the two
   grounds read as the same surface. */
.chead::after {
  content: "MORE MASS NO FUSS";
  position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%);
  font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 13vw, 11rem);
  letter-spacing: 0.02em; white-space: nowrap;
  color: rgb(255 255 255 / 0.06); pointer-events: none;
}
.chead__in { position: relative; z-index: 1; }
.chead__lede {
  margin: 1.4rem 0 0; max-width: 52ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem); color: rgb(255 255 255 / 0.78);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ the panel -- */

.cbody { background: var(--dark); padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 8rem); }

.cpanel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  background: rgb(255 255 255 / 0.035);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 22px;
  box-shadow: var(--e3), inset 0 1px 0 rgb(255 255 255 / 0.10);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  /* .wrap sets the page gutter; inside a panel that would double up. */
  max-width: 74rem; margin-inline: auto;
}

/* ------------------------------------------------------- the left column - */

.cmeta { margin: 0; display: grid; }
.cmeta > div {
  display: grid; gap: 0.3rem;
  padding-block: clamp(0.9rem, 2vw, 1.3rem);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.cmeta > div:first-child { border-top: 0; padding-top: 0; }
.cmeta dt {
  font: 600 0.7rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
}
.cmeta dd {
  margin: 0; color: rgb(255 255 255 / 0.92); font-size: 0.98rem; text-wrap: pretty;
}
.cmeta dd a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.4); text-underline-offset: 3px; }
.cmeta dd a:hover { text-decoration-color: var(--gold); }
.cmeta__note {
  margin: 1.5rem 0 0; font-size: 0.86rem; color: rgb(255 255 255 / 0.6);
}
.cmeta__note a { color: var(--gold); text-underline-offset: 3px; }

/* ------------------------------------------------------------- the form -- */

.cform { margin: 0; }
.cform__hp { position: absolute; left: -9999px; }

.cform__label {
  display: block; margin: 0 0 0.5rem;
  font: 600 0.7rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.5);
}
.cform__label abbr { color: var(--gold); text-decoration: none; margin-left: 0.15rem; }

.cform__types { border: 0; padding: 0; margin: 0 0 clamp(1.5rem, 3vw, 2rem); }
.cform__types legend { padding: 0; }

.cpills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cpill {
  appearance: none; cursor: pointer;
  min-height: 40px; padding: 0 1.05rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.22);
  background: transparent; color: rgb(255 255 255 / 0.78);
  font: 600 0.74rem/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out),
              border-color 160ms var(--sc-ease-out);
}
.cpill:hover { border-color: rgb(255 255 255 / 0.45); color: #fff; }
.cpill.is-on {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}

.cform__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 clamp(1.25rem, 3vw, 2rem);
}

.cfield { margin: 0 0 clamp(1.4rem, 3vw, 1.9rem); }
.cfield input,
.cfield textarea {
  width: 100%; display: block;
  background: transparent; color: #fff;
  border: 0; border-bottom: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 0;
  padding: 0.55rem 0.1rem;
  font: 400 1rem/1.5 var(--text);
  transition: border-color 160ms var(--sc-ease-out);
}
.cfield textarea { resize: vertical; min-height: 6rem; }
.cfield input::placeholder,
.cfield textarea::placeholder { color: rgb(255 255 255 / 0.32); }
.cfield input:hover,
.cfield textarea:hover { border-bottom-color: rgb(255 255 255 / 0.5); }
.cfield input:focus,
.cfield textarea:focus {
  outline: 0; border-bottom-color: var(--gold); border-bottom-width: 2px;
  padding-bottom: calc(0.55rem - 1px);
}
/* Focus-visible still needs to be unmistakable for a keyboard user; the gold
   rule alone is a colour-only cue. */
.cfield input:focus-visible,
.cfield textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.cfield__hint {
  display: block; margin-top: 0.5rem;
  font-size: 0.79rem; color: rgb(255 255 255 / 0.48);
}
/* The browser's own "please fill this in" styling is invisible on a dark
   ground, so say it in the border as well. */
.cfield input:user-invalid,
.cfield textarea:user-invalid { border-bottom-color: var(--stop); }

.cform__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(0.5rem, 2vw, 1rem);
}
.cform__send { gap: 0.6rem; }
.cform__send svg { width: 16px; height: 16px; }
.cform__privacy {
  margin: 0; flex: 1 1 16rem;
  font-size: 0.8rem; line-height: 1.55; color: rgb(255 255 255 / 0.55);
}
.cform__privacy a { color: rgb(255 255 255 / 0.85); text-underline-offset: 3px; }
.cform__privacy a:hover { color: var(--gold); }

/* Only ever shown when the post actually failed, and it names the fallback
   rather than just apologising. */
.cform__error {
  flex: 1 1 100%; margin: 0;
  padding: 0.85rem 1rem; border-radius: 10px;
  background: rgb(200 65 47 / 0.16); border: 1px solid rgb(200 65 47 / 0.5);
  color: #FFD9D3; font-size: 0.86rem;
}

/* ---------------------------------------------------------------- thanks - */

.cthanks { text-align: left; max-width: 44rem; }
.cthanks__tick {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 1.5rem;
  background: var(--gold); color: var(--ink);
}
.cthanks__tick svg { width: 26px; height: 26px; }

/* ------------------------------------------------------------------ phone */

@media (max-width: 900px) {
  .cpanel { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cpill, .cfield input, .cfield textarea { transition: none; }
}