/* ==========================================================================
   FULLSTACK — Work With Us
   ========================================================================== */

/* ==========================================================================
   01. HERO + ROUTING DIAGRAM
   ========================================================================== */

/* Measured on the rendered page: "trying to build." is the widest line at
   9.355em, so the cap is 100/9.355 ≈ 10.69cqw. 10.4cqw leaves margin. */
.fs-hero--contact .fs-hero__title { font-size: min(var(--fs-text-d1), 10.4cqw); }

.fs-hero--contact .fs-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--fs-space-10);
  align-items: center;
}

.fs-hero__meta {
  margin-top: var(--fs-space-8);
  letter-spacing: var(--fs-tracking-mono-wide);
  color: var(--fs-fg-faint);
}

.fs-routing {
  padding: var(--fs-space-8);
  background-color: var(--fs-dark-bg-raised);
  border: var(--fs-border-width) solid var(--fs-border-strong);
}

.fs-routing__start {
  display: block;
  width: fit-content;
  margin-inline: auto;
  padding: 0.75rem 1.625rem;
  border: var(--fs-border-width) solid var(--fs-warm-white);
  letter-spacing: var(--fs-tracking-mono-wide);
  text-transform: uppercase;
  color: var(--fs-warm-white);
}

.fs-routing__question {
  position: relative;
  margin-top: 1.5rem;
  padding: 0.75rem;
  background-color: var(--fs-dark-bg);
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  color: var(--fs-text-on-dark-2);
}

/* One connector rule, drawn above whichever block follows the previous one. */
.fs-routing__question::before,
.fs-routing__options::before {
  content: '↓';
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.875rem;
  line-height: 1;
  color: var(--fs-fg-faint);
}

.fs-routing__options {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-2);
  margin-top: 1.5rem;
}

.fs-routing__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  padding: 0.8125rem 1rem;
  border: var(--fs-border-width) solid var(--fs-border-strong);
  text-decoration: none;
  transition: border-color var(--fs-duration) var(--fs-ease);
}

.fs-routing__option:hover,
.fs-routing__option:focus-visible { border-color: var(--fs-warm-white); }

.fs-routing__option-label {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-text-on-dark-2);
}

.fs-routing__option-tag {
  flex: none;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-fg-faint);
}

.fs-routing__option:hover .fs-routing__option-label,
.fs-routing__option:focus-visible .fs-routing__option-label { color: var(--fs-warm-white); }

@media (max-width: 1023px) {
  .fs-hero--contact .fs-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   02. ROUTE CARDS
   ========================================================================== */

.fs-paths__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--fs-section-gap);
  background-color: var(--fs-border-strong);
  border: var(--fs-border-width) solid var(--fs-border-strong);
}

.fs-path {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 15.625rem;
  padding: var(--fs-space-8);
  background-color: var(--fs-dark-bg);
  transition: background-color var(--fs-duration) var(--fs-ease);
}

.fs-path:hover,
.fs-path:focus-within { background-color: var(--fs-dark-bg-raised); }

.fs-path.is-current {
  background-color: var(--fs-accent);
  /* On the accent ground every token that resolves to the accent has to step
     back to ink, or the card becomes one flat colour. */
  --fs-accent-text: var(--fs-graphite);
  --fs-fg-muted: color-mix(in srgb, var(--fs-graphite) 65%, transparent);
  --fs-fg-faint: color-mix(in srgb, var(--fs-graphite) 55%, transparent);
  color: var(--fs-graphite);
}

.fs-path__index {
  display: flex;
  justify-content: space-between;
  gap: var(--fs-space-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-path__title {
  margin-top: var(--fs-space-5);
  font-size: var(--fs-text-h2);
  font-weight: var(--fs-weight-black);
  letter-spacing: var(--fs-tracking-tight);
  line-height: 1;
  text-transform: uppercase;
}

.fs-path.is-current .fs-path__title a,
.fs-path.is-current .fs-path__cta { color: var(--fs-graphite); }

.fs-path__scope {
  margin-top: var(--fs-space-4);
  letter-spacing: 0.08em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-path__action {
  margin-top: auto;
  padding-top: var(--fs-space-6);
}

.fs-path__cta {
  font-size: 0.9375rem;
  font-weight: var(--fs-weight-bold);
}

@media (max-width: 767px) {
  .fs-paths__grid { grid-template-columns: minmax(0, 1fr); }
  .fs-path { min-height: 0; }
}

/* ==========================================================================
   03. ENQUIRY SECTION
   ========================================================================== */

.fs-enquiry-section__heading {
  letter-spacing: var(--fs-tracking-mono-wide);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-enquiry__body { margin-top: var(--fs-space-8); }

.fs-enquiry__split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  gap: var(--fs-space-10);
  align-items: start;
}

.fs-enquiry__context { position: sticky; top: calc(var(--fs-header-height) + var(--fs-space-6)); }

.fs-enquiry__context-card {
  padding: var(--fs-space-8);
  background-color: var(--fs-graphite);
  color: var(--fs-warm-white);
}

.fs-enquiry__context-label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fs-accent);
}

.fs-enquiry__context-title {
  margin-top: var(--fs-space-4);
  font-size: var(--fs-text-h2);
  font-weight: var(--fs-weight-black);
  letter-spacing: var(--fs-tracking-tight);
  line-height: 1;
  text-transform: uppercase;
}

.fs-enquiry__context-title .fs-accent { color: var(--fs-accent); }

.fs-enquiry__context-text {
  margin-top: var(--fs-space-5);
  font-size: 0.96875rem;
  line-height: var(--fs-leading-body);
  color: var(--fs-text-on-dark-2);
}

.fs-enquiry__context-scope {
  margin-top: var(--fs-space-6);
  padding-top: var(--fs-space-5);
  border-top: var(--fs-border-width) solid var(--fs-border-strong);
  letter-spacing: 0.08em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--fs-fg-faint);
}

.fs-enquiry-section[aria-busy='true'] .fs-enquiry__body { opacity: 0.55; }

@media (max-width: 1023px) {
  .fs-enquiry__split { grid-template-columns: minmax(0, 1fr); }
  .fs-enquiry__context { position: static; }
}

/* ==========================================================================
   04. EMPTY STATE
   ========================================================================== */

.fs-enquiry__empty {
  padding: var(--fs-space-10) var(--fs-space-8);
  border: var(--fs-border-width) dashed var(--fs-border);
  background-color: var(--fs-bg-raised);
  text-align: center;
}

.fs-enquiry__empty-title {
  font-size: var(--fs-text-h2);
  font-weight: var(--fs-weight-black);
  letter-spacing: var(--fs-tracking-tight);
  line-height: 1.05;
  text-transform: uppercase;
}

.fs-enquiry__empty-text {
  max-width: 32.5rem;
  margin: var(--fs-space-4) auto 0;
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

.fs-enquiry__empty-link { margin-top: var(--fs-space-6); }

.fs-enquiry__empty-link a,
.fs-support-other__link a,
.fs-receipt__again a {
  font-weight: var(--fs-weight-bold);
  text-decoration: none;
  border-bottom: var(--fs-border-emphasis) solid var(--fs-accent);
  padding-bottom: 0.1875rem;
}

/* ==========================================================================
   05. FORM
   ========================================================================== */

.fs-enquiry-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-10);
}

.fs-enquiry-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-space-5);
}

.fs-field__required {
  margin-left: 0.375rem;
  font-family: var(--fs-font-mono);
  font-size: 0.6875rem;
  font-weight: var(--fs-weight-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-field__hint {
  display: block;
  margin-top: 0.375rem;
  font-family: var(--fs-font-mono);
  font-size: 0.6875rem;
  font-weight: var(--fs-weight-regular);
  letter-spacing: 0.06em;
  line-height: 1.7;
  text-transform: none;
  color: var(--fs-fg-muted);
}

/* The error is a sentence, not a colour: it says what to do, and the control
   is marked aria-invalid so it is announced as well as seen. */
.fs-field__error {
  display: block;
  margin: 0.375rem 0 0.5rem;
  font-family: var(--fs-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-status-caution);
}

.fs-field--error .fs-input,
.fs-field--error .fs-textarea { border-color: var(--fs-status-caution); }

.fs-field--choice { border: 0; padding: 0; margin: 0; }

.fs-field--choice > .fs-field__label {
  display: block;
  width: 100%;
  padding-bottom: 0.625rem;
  border-bottom: var(--fs-border-emphasis) solid var(--fs-fg);
}

.fs-field--choice .fs-chips__options { margin-top: var(--fs-space-5); }

.fs-field--file {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  padding: var(--fs-space-6);
  border: var(--fs-border-width) dashed var(--fs-border);
  background-color: var(--fs-bg-raised);
}

.fs-file {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  color: var(--fs-fg-body);
}

.fs-file::file-selector-button {
  margin-right: var(--fs-space-4);
  padding: 0.625rem 1.125rem;
  border: var(--fs-border-width) solid var(--fs-fg);
  background-color: transparent;
  font-family: var(--fs-font-sans);
  font-size: 0.875rem;
  font-weight: var(--fs-weight-bold);
  color: var(--fs-fg);
  cursor: pointer;
}

.fs-file__name {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  color: var(--fs-fg-muted);
}

/* Reachable by neither pointer, keyboard nor screen reader. */
.fs-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fs-form-notice {
  padding: var(--fs-space-5) var(--fs-space-6);
  margin-bottom: var(--fs-space-8);
  border: var(--fs-border-width) solid var(--fs-status-caution);
  background-color: var(--fs-bg-raised);
}

.fs-form-notice:focus-visible { outline: var(--fs-border-emphasis) solid var(--fs-fg); }

.fs-form-notice__label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-status-caution);
}

.fs-form-notice__text {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--fs-fg-body);
}

.fs-role-context {
  padding: var(--fs-space-6);
  margin-bottom: var(--fs-space-8);
  border-left: var(--fs-border-emphasis) solid var(--fs-accent);
  background-color: var(--fs-bg-raised);
}

.fs-role-context__label {
  letter-spacing: var(--fs-tracking-mono);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-role-context__title {
  margin-top: 0.375rem;
  font-size: var(--fs-text-h4);
  font-weight: var(--fs-weight-extrabold);
  text-transform: uppercase;
}

.fs-role-context__text,
.fs-role-context__link {
  margin-top: var(--fs-space-3);
  font-size: 0.90625rem;
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

.fs-enquiry-form__submit { margin-top: var(--fs-space-8); }

.fs-enquiry-form__submit .fs-btn.is-sending { opacity: 0.6; cursor: progress; }

.fs-enquiry-form__note,
.fs-enquiry-form__privacy {
  margin-top: var(--fs-space-4);
  font-size: 0.875rem;
  line-height: var(--fs-leading-body);
  text-align: center;
  color: var(--fs-fg-body);
}

.fs-enquiry-form__privacy { font-size: 0.78125rem; color: var(--fs-fg-muted); }
.fs-enquiry-form__privacy-note { display: block; margin-top: 0.375rem; }

@media (max-width: 560px) {
  .fs-enquiry-form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   06. PRODUCT SUPPORT
   ========================================================================== */

.fs-support-list {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
}

.fs-support-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-6);
  padding: var(--fs-space-8);
  background-color: var(--fs-bg-raised);
  border: var(--fs-border-width) solid var(--fs-border);
  transition: border-color var(--fs-duration) var(--fs-ease);
}

.fs-support-card:hover,
.fs-support-card:focus-within { border-color: var(--fs-fg); }

.fs-support-card__title {
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-black);
  letter-spacing: var(--fs-tracking-tight);
  text-transform: uppercase;
}

.fs-support-card__meta {
  margin-top: 0.375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-support-card__status { margin-left: 0.5rem; }
.fs-support-card__status--live { color: var(--fs-accent-text); }

.fs-support-card__action { flex: none; }

.fs-support-note,
.fs-direct__note {
  margin-top: var(--fs-space-5);
  letter-spacing: 0.08em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-support-other {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-5);
  margin-top: var(--fs-space-6);
  padding: var(--fs-space-5) var(--fs-space-6);
  border: var(--fs-border-width) dashed var(--fs-border);
  background-color: var(--fs-bg-raised);
}

.fs-support-other__text {
  font-size: 0.90625rem;
  font-weight: var(--fs-weight-semibold);
  color: var(--fs-fg-body);
}

.fs-support-fallback {
  padding: var(--fs-space-6);
  margin-bottom: var(--fs-space-8);
  border-left: var(--fs-border-emphasis) solid var(--fs-accent);
  background-color: var(--fs-bg-raised);
}

.fs-support-fallback__label {
  letter-spacing: var(--fs-tracking-mono);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-support-fallback__text,
.fs-support-fallback__back {
  margin-top: var(--fs-space-3);
  font-size: 0.90625rem;
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

/* ==========================================================================
   07. RECEIPT
   ========================================================================== */

.fs-receipt {
  position: relative;
  overflow: hidden;
  padding: var(--fs-space-10) var(--fs-space-10);
  background-color: var(--fs-graphite);
  color: var(--fs-warm-white);
}

.fs-receipt:focus-visible { outline: var(--fs-border-emphasis) solid var(--fs-accent); outline-offset: -6px; }

.fs-receipt__watermark {
  position: absolute;
  top: -5rem;
  right: -6rem;
  opacity: 0.06;
  pointer-events: none;
}

.fs-receipt__inner { position: relative; }

.fs-receipt__label {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fs-accent);
}

.fs-receipt__title {
  margin-top: var(--fs-space-5);
  font-size: var(--fs-text-d3);
  font-weight: var(--fs-weight-black);
  letter-spacing: var(--fs-tracking-heading);
  line-height: 0.98;
  text-transform: uppercase;
}

.fs-receipt__title .fs-accent { color: var(--fs-accent); }

.fs-receipt__text {
  max-width: 35rem;
  margin-top: var(--fs-space-5);
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-text-on-dark-2);
}

.fs-receipt__notice {
  margin-top: var(--fs-space-5);
  padding: var(--fs-space-4) var(--fs-space-5);
  border-left: var(--fs-border-emphasis) solid var(--fs-status-caution);
  background-color: var(--fs-dark-bg-raised);
  font-size: 0.875rem;
  color: var(--fs-text-on-dark-2);
}

.fs-receipt__next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-3);
  margin-top: var(--fs-space-8);
}

.fs-receipt__again {
  margin-top: var(--fs-space-8);
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fs-receipt__again a { border-bottom-color: var(--fs-border-strong); color: var(--fs-text-on-dark-2); }

/* ==========================================================================
   08. WHAT HAPPENS NEXT
   ========================================================================== */

.fs-happens__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-space-3);
  margin-top: var(--fs-section-gap);
}

.fs-happens__step {
  position: relative;
  padding: var(--fs-space-8) var(--fs-space-6);
  border: var(--fs-border-width) solid var(--fs-border);
  background-color: var(--fs-bg);
}

.fs-happens__step + .fs-happens__step::before {
  content: '→';
  position: absolute;
  top: 50%;
  left: calc(var(--fs-space-3) * -1);
  transform: translate(-50%, -50%);
  line-height: 1;
  color: var(--fs-fg-muted);
}

.fs-happens__step--end {
  background-color: var(--fs-graphite);
  border-color: var(--fs-graphite);
  color: var(--fs-warm-white);
}

.fs-happens__step-label {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-happens__step--end .fs-happens__step-label { color: var(--fs-accent); }

.fs-happens__step-text {
  margin-top: var(--fs-space-3);
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--fs-fg-body);
}

.fs-happens__step--end .fs-happens__step-text { color: var(--fs-text-on-dark-2); }

.fs-happens .fs-pullquote { margin-top: var(--fs-section-gap); }

@media (max-width: 1023px) {
  .fs-happens__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-happens__step + .fs-happens__step::before { content: none; }
}

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

/* ==========================================================================
   09. NOT SURE + PLACE
   ========================================================================== */

.fs-unsure__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--fs-space-10);
  align-items: stretch;
}

.fs-unsure__card {
  display: flex;
  flex-direction: column;
  padding: var(--fs-space-10);
  background-color: var(--fs-graphite);
  color: var(--fs-warm-white);
}

.fs-unsure__title {
  font-size: var(--fs-text-h1);
  font-weight: var(--fs-weight-black);
  letter-spacing: var(--fs-tracking-tight);
  line-height: 1;
  text-transform: uppercase;
}

.fs-unsure__title .fs-accent { color: var(--fs-accent); }

.fs-unsure__text {
  max-width: 28.75rem;
  margin-top: var(--fs-space-5);
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-text-on-dark-2);
}

.fs-unsure__cta { margin-top: auto; padding-top: var(--fs-space-8); }

.fs-unsure__place-title {
  margin-top: var(--fs-space-5);
  font-size: var(--fs-text-d3);
  font-weight: var(--fs-weight-black);
  letter-spacing: var(--fs-tracking-heading);
  line-height: 1;
  text-transform: uppercase;
}

.fs-unsure__place-text {
  margin-top: var(--fs-space-5);
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

.fs-unsure__facts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--fs-space-6);
  background-color: var(--fs-divider);
  border: var(--fs-border-width) solid var(--fs-divider);
}

.fs-unsure__facts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-4);
  padding: var(--fs-space-4) var(--fs-space-6);
  background-color: var(--fs-bg);
  font-size: 0.9375rem;
  font-weight: var(--fs-weight-extrabold);
}

.fs-unsure__facts .fs-mono {
  font-weight: var(--fs-weight-regular);
  letter-spacing: 0.08em;
  color: var(--fs-fg-muted);
}

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

@media (max-width: 560px) {
  .fs-unsure__cta .fs-btn { width: 100%; }
}

/* ==========================================================================
   10. DIRECT CONTACT
   ========================================================================== */

.fs-direct__title {
  letter-spacing: var(--fs-tracking-mono-wide);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-direct__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));
  gap: 1px;
  margin-top: var(--fs-space-8);
  background-color: var(--fs-divider);
  border: var(--fs-border-width) solid var(--fs-divider);
}

.fs-direct__item {
  padding: var(--fs-space-8) var(--fs-space-6);
  background-color: var(--fs-bg);
}

.fs-direct__label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-direct__value {
  margin-top: var(--fs-space-4);
  font-size: 0.9375rem;
  font-weight: var(--fs-weight-bold);
}

.fs-direct__value a { text-decoration: none; border-bottom: var(--fs-border-emphasis) solid var(--fs-accent); padding-bottom: 0.125rem; }

/* ==========================================================================
   11. FAQ
   ========================================================================== */

.fs-contact-faq .fs-split__lead { position: sticky; top: calc(var(--fs-header-height) + var(--fs-space-6)); }

@media (max-width: 1023px) {
  .fs-contact-faq .fs-split__lead { position: static; }
}