/*.freelance_slideUnder:after {*/
/*  margin: 25px auto 0;*/
/*  -moz-margin: 11px auto 0;*/
/*}*/

.fl-block {
  /* Side gutter that keeps content at most 1110px wide and centered */
  --fl-gutter: max(15px, calc((100% - 1110px) / 2));
  position: relative;
  width: 100%;
  padding-bottom: 70px;
  /* Keeps titles clear of the fixed site header when jumping to an anchor.
     Remove if your js/index.js already offsets anchor scrolling. */
  scroll-margin-top: 170px;
}
 
.fl-block h2 {
  margin: 0 0 50px;
  color: #2B2B2B;
}
.fl-block h2 .graphic {
  display: block;
  margin-bottom: 0;
}
 
.fl-intro { margin: 0; }
.fl-lead {
  max-width: 780px;
  margin: 0 auto 60px;
  padding: 0 15px;
  font-size: 2rem;
  line-height: 34px;
  text-align: center;
}
 
/* Visually hidden, still read by screen readers */
.fl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
 
@media (max-width: 1199px) {
  .fl-block h2 { font-size: 3.5rem; line-height: 60px; }
}
@media (max-width: 897px) {
  .fl-block { scroll-margin-top: 110px; }
  .fl-block h2 { font-size: 3rem; line-height: 50px; }
  .fl-lead { font-size: 1.8rem; line-height: 30px; }
}
@media (max-width: 500px) {
  .fl-block h2 { font-size: 2.3rem; line-height: 30px; }
  .fl-lead { font-size: 1.8rem; line-height: 25px; }
}
 
/* ---------- Buttons (CTA link and form) ---------- */
.fl-block .fl-btn {
  display: inline-block;
  padding: 16px 36px;
  background: #ECAA1E;
  border: 3px solid #ECAA1E;
  border-radius: 0;
  color: #2B2B2B;
  cursor: pointer;
  font: inherit;
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}
.fl-block .fl-btn:hover { background: #2B2B2B; color: #ECAA1E; text-decoration: none; }
.fl-block .fl-btn:focus-visible { outline: 4px solid #3396CB; outline-offset: 3px; }
.fl-block .fl-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- Services (white, like #projects) ---------- */
.fl-services {
  background: #FFF;
  padding-top: 220px;
}
.fl-services .fl-lead { color: #2B2B2B; }

.fl-cards {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  margin: 0 var(--fl-gutter);
  padding: 0;
  list-style: none;
}
.fl-cards > li { display: flex; }

.fl-card {
  flex: 1;
  padding: 30px 28px 34px;
  background: #2B2B2B;
  border-top: 8px solid #3396CB;
}
.fl-cards > li:nth-child(even) .fl-card { border-top-color: #ECAA1E; }

.fl-card h3 {
  margin: 0;
  color: #FFF;
  font-size: 2rem;
  font-weight: bold;
  line-height: 28px;
  text-transform: uppercase;
}
.fl-card .fl-bar {
  display: block;
  width: 60px;
  height: 6px;
  margin: 12px 0 18px;
  background: #3396CB;
}
.fl-cards > li:nth-child(even) .fl-bar { background: #ECAA1E; }
.fl-card p {
  margin: 0;
  color: #FFF;
  font-size: 1.7rem;
  line-height: 30px;
}

/* ---------- How It Works (gray, like #wireframes) ---------- */
.fl-process {
  background: #D0D2D3;
  padding-top: 72px;
}
.fl-process .fl-lead { color: #2B2B2B; }

.fl-steps {
  display: grid;
  gap: 30px 20px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 0 var(--fl-gutter) 50px;
  padding: 0;
  list-style: none;
  counter-reset: fl-step;
}
@media (min-width: 992px) {
  .fl-steps { grid-template-columns: repeat(5, 1fr); }
}
.fl-steps > li {
  text-align: center;
  counter-increment: fl-step;
}
.fl-steps > li::before {
  content: counter(fl-step);
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  background: #ECAA1E;
  color: #2B2B2B;
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 56px;
  text-align: center;
}
.fl-steps h3 {
  margin: 0 0 10px;
  color: #2B2B2B;
  font-size: 1.9rem;
  font-weight: bold;
  line-height: 26px;
  text-transform: uppercase;
}
.fl-steps p {
  margin: 0;
  color: #2B2B2B;
  font-size: 1.7rem;
  line-height: 28px;
}
.fl-cta { margin: 0; text-align: center; }
 
/* ---------- Contact (dark, flows into the footer) ---------- */
.fl-contact {
  display: grid;
  grid-template-columns: 1fr;
  padding: 72px var(--fl-gutter) 70px;
  background: #2B2B2B;
  border-bottom: 1px solid #4a4a4a;
}
.fl-contact h2 { color: #FFF; text-align: center; }
.fl-contact h2 .graphic { margin: 0 auto; }
.fl-contact .fl-lead { margin: 0 0 30px; padding: 0; color: #FFF; text-align: left; }
@media (max-width: 897px) {
  .fl-contact .fl-lead { text-align: center; }
}
/* main.css pins the footer to the bottom of #main at 500px and below;
   leave room for it when these sections sit above the site footer. */
@media (max-width: 500px) {
  .fl-contact { padding-bottom: 130px; }
}
@media (min-width: 992px) {
  .fl-contact {
    column-gap: 50px;
    grid-template-columns: 5fr 7fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "title title"
      "intro form"
      "details form";
  }
  .fl-contact h2 { grid-area: title; }
  .fl-contact .fl-intro { grid-area: intro; }
  .fl-contact .fl-direct { grid-area: details; }
  .fl-contact .fl-form { grid-area: form; }
}

.fl-direct { margin: 0 0 40px; font-style: normal; }
.fl-direct dl { margin: 0; }
.fl-direct dt {
  color: #ECAA1E;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: .08em;
  line-height: 22px;
  text-transform: uppercase;
}
.fl-direct dd {
  margin: 0 0 18px;
  color: #FFF;
  font-size: 1.8rem;
  line-height: 28px;
}
.fl-direct dt[hidden],
.fl-direct dd[hidden] { display: none; }
.fl-contact a.fl-link { color: #ECAA1E; text-decoration: underline; }
.fl-contact a.fl-link:hover { color: #FFF; }
@media (max-width: 897px) { .fl-direct { text-align: center; } }

.fl-form { display: grid; gap: 22px; }
.fl-form fieldset {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (min-width: 600px) {
  .fl-form fieldset { grid-template-columns: 1fr 1fr; }
}
.fl-field { margin: 0; }
.fl-field--wide { grid-column: 1 / -1; }

.fl-field label { display: block; color: #FFF; }
.fl-label {
  display: block;
  margin-bottom: 8px;
  font-size: 1.8rem;
  font-weight: bold;
}
.fl-field .fl-optional { font-weight: normal; }
.fl-field input,
.fl-field select,
.fl-field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: #FFF;
  border: 3px solid #FFF;
  border-radius: 0;
  color: #2B2B2B;
  font: inherit;
  font-size: 1.8rem;
}
.fl-field textarea { min-height: 150px; resize: vertical; }
.fl-field input:focus,
.fl-field select:focus,
.fl-field textarea:focus { outline: 4px solid #ECAA1E; outline-offset: 2px; }
.fl-field [aria-invalid="true"] { border-color: #FF6B6B; }
.fl-field-error {
  display: block;
  margin-top: 8px;
  color: #FFB4A5;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 22px;
}

.fl-field input {
  margin-top: 8px;
}

.fl-field-error[hidden] { display: none; }

/* Honeypot: inert, so people and assistive tech never reach it; bots fill it */
.fl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; margin: 0; overflow: hidden; }

.fl-form .fl-btn { justify-self: start; }
@media (max-width: 897px) { .fl-form .fl-btn { justify-self: stretch; } }
.fl-status {
  display: block;
  min-height: 28px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 28px;
}
.fl-status.fl-ok { color: #8FE0A8; }
.fl-status.fl-err { color: #FFB4A5; }