/* ==========================================================================
   Section 7 — Ready To Win
   Source of truth: design_handoff_sections/README.md ("Section 7").
   ========================================================================== */

.ready {
  --rd: 1.1s;

  position: relative;
  background: var(--black-bar);
  padding: var(--space-132) var(--gutter) 124px;
  overflow: hidden;
}

/* --- Photo band ----------------------------------------------------------- */

.ready__band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 620px;
  overflow: hidden;
  pointer-events: none;
}

.ready__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(.72) brightness(.82) contrast(1.1);
}

.ready__band::before,
.ready__band::after {
  content: '';
  position: absolute;
  inset: 0;
}

.ready__band::before {
  background: linear-gradient(90deg,
    rgba(5, 4, 3, .94) 0%,
    rgba(5, 4, 3, .8) 24%,
    rgba(5, 4, 3, .46) 48%,
    rgba(5, 4, 3, .26) 72%,
    rgba(5, 4, 3, .22) 100%);
}

.ready__band::after {
  background: linear-gradient(to bottom,
    rgba(5, 4, 3, .5) 0%,
    rgba(5, 4, 3, .06) 24%,
    rgba(5, 4, 3, .34) 62%,
    rgba(5, 4, 3, .9) 88%,
    rgba(5, 4, 3, 1) 100%);
}

/* --- Layout --------------------------------------------------------------- */

.ready__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 520px;
  column-gap: var(--space-88);
  align-items: start;
}

.ready__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-26);
}

/* The band's left-to-right scrim is down to .46 by the middle of this column,
   and the skyline is at its most lit exactly there, so the lede was reading as
   grey on grey. This is a second scrim that travels with the copy rather than
   with the band: it darkens only the ground the words sit on and fades out
   before the form, so the photograph keeps its lit right-hand side. */
.ready__copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* Up to the top of the photograph, not just to the top of the copy. The
     section's padding-top is what separates the two, and stopping short of it
     left a lit strip of skyline above the eyebrow with a visible edge under
     it — the scrim has to start where the image does. */
  inset: calc(var(--space-132) * -1) -12% -40px calc(var(--gutter) * -1);
  pointer-events: none;
  background: radial-gradient(102% 78% at 6% 44%,
    rgba(5, 4, 3, .95) 0%,
    rgba(5, 4, 3, .9) 42%,
    rgba(5, 4, 3, .6) 70%,
    rgba(5, 4, 3, 0) 100%);
}

.ready__lede { max-width: 56ch; }

/* --- Divider blocks ------------------------------------------------------- */

.ready__block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--space-30);
  border-top: 1px solid rgba(217, 169, 58, .22);
}

.ready__block--consult {
  margin-top: var(--space-16);
  gap: var(--space-24);
}

.ready__block--contact {
  margin-top: var(--space-14);
  gap: var(--space-22);
}

.ready__consult-copy {
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(246, 241, 230, .66);
  text-wrap: pretty;
}

.ready__label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(240, 233, 220, .5);
}

.ready__email {
  display: inline-block;
  margin-top: var(--space-10);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  color: var(--gold-figure);
}

.ready__email:hover { color: var(--gold-cta-hover); }

.ready__socials {
  display: flex;
  gap: var(--space-26);
  margin-top: var(--space-10);
}

.ready__socials a {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(240, 233, 220, .72);
  transition: color .3s ease;
}

.ready__socials a:hover,
.ready__socials a:focus-visible { color: var(--gold-figure); }

/* --- Form card ------------------------------------------------------------ */

.ready__form {
  border: 1px solid rgba(217, 169, 58, .28);
  background: var(--black-card);
  padding: 44px 42px 46px;
  box-shadow: var(--shadow-form);
}

.ready__form-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.014em;
  color: var(--bone);
}

.ready__form-sub {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(246, 241, 230, .55);
}

.ready__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-26);
  margin-top: var(--space-34);
}

.ready__field {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ready__field label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(240, 233, 220, .5);
}

/* The handoff specifies `outline: none` here. Deliberately not applied — the
   focus ring is a requirement, and these are the only real form controls on
   the site. The underline brightening is additional, not a replacement. */
.ready__field input,
.ready__field select,
.ready__field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(217, 169, 58, .3);
  border-radius: var(--radius);
  padding: 12px 2px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  color: var(--bone);
  transition: border-color .3s ease;
}

.ready__field input:focus,
.ready__field select:focus,
.ready__field textarea:focus {
  border-bottom-color: rgba(217, 169, 58, .7);
}

.ready__field input::placeholder,
.ready__field textarea::placeholder { color: rgba(246, 241, 230, .3); }

.ready__field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Only reached when scripting is unavailable — js/select.js replaces the
   native control otherwise. Keeps the system dropdown dark in that case. */
.ready__field select option { background: var(--black-card); }

/* The native control steps aside once the styled listbox exists. It stays in
   the DOM: it holds the value and it is what the form submits. */
.js .ready__field--select > select { display: none; }

.sel {
  position: relative;
  width: 100%;
}

.sel__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-14);
  width: 100%;
  padding: 12px 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(217, 169, 58, .3);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 15px;
  text-align: left;
  color: var(--bone);
  cursor: pointer;
  transition: border-color .3s ease;
}

.sel.is-open .sel__button,
.sel__button:hover { border-bottom-color: rgba(217, 169, 58, .7); }

/* Chevron drawn from borders — no icon font, nothing rounded. */
.sel__caret {
  flex: none;
  width: 7px;
  height: 7px;
  margin-bottom: 3px;
  border-right: 1.5px solid var(--gold-cta-text);
  border-bottom: 1.5px solid var(--gold-cta-text);
  transform: rotate(45deg);
  transition: transform .3s var(--ease-out);
}

.sel.is-open .sel__caret { transform: rotate(225deg) translate(-3px, -3px); }

.sel__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  max-height: 268px;
  overflow-y: auto;
  background: #0D0A07;
  border: 1px solid rgba(217, 169, 58, .34);
  box-shadow: 0 26px 52px rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s var(--ease-out), visibility .22s;
}

.sel.is-open .sel__list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sel__option {
  position: relative;
  padding: 11px 16px 11px 30px;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(246, 241, 230, .8);
  cursor: pointer;
}

.sel__option.is-active {
  background: rgba(168, 112, 28, .18);
  color: var(--bone);
}

/* The chosen one keeps a gold diamond, the same marker the bullets use. */
.sel__option[aria-selected="true"]::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2px;
  background: var(--gold-diamond);
  transform: rotate(45deg);
}

.sel__option[aria-selected="true"] { color: var(--gold-figure); }

@media (prefers-reduced-motion: reduce) {
  .sel__list, .sel__caret { transition: none; }
}

.ready__field textarea {
  resize: vertical;
  line-height: 1.6;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.ready__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Validation ----------------------------------------------------------
   Not in the handoff — the prototype's form is presentational. Errors are
   announced as text, not colour alone. */

.ready__field.is-invalid input,
.ready__field.is-invalid select,
.ready__field.is-invalid textarea {
  border-bottom-color: #C2542F;
}

.ready__error {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: #E0906A;
}

.ready__field:not(.is-invalid) .ready__error { display: none; }

/* --- Submit --------------------------------------------------------------- */

/* Centred rather than ranged left: everything above it is full width and the
   footnote below it is centred, so a left-aligned plate read as misaligned. */
.ready__submit {
  align-self: center;
  margin-top: var(--space-16);
  border: none;
  font: inherit;
  cursor: pointer;
}

.ready__submit[disabled] {
  cursor: default;
  opacity: .72;
}

.ready__note {
  margin: var(--space-16) 0 0;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(246, 241, 230, .66);
}

/* Submit lifecycle messaging. */
.ready__status {
  margin: var(--space-16) 0 0;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 13px;
  line-height: 1.6;
  text-wrap: pretty;
}

.ready__status:empty { display: none; }
.ready__status[data-state="sent"]  { color: var(--gold-figure); }
.ready__status[data-state="error"] { color: #E0906A; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  .ready__inner {
    grid-template-columns: 1fr;
    row-gap: var(--space-56);
  }
  .ready__band { height: 520px; }
}

@media (max-width: 768px) {
  /* See the note in mentorship.css: the heading keeps the skyline behind it,
     the body copy clears it. */
  .ready { padding: 196px var(--gutter) var(--space-72); }

  /* Single column means the copy runs the full width, so the handoff's
     left-to-right scrim protects none of it — the headline and lede were
     sitting on lit buildings. The band shortens and its vertical scrim carries
     the load instead, reaching near-solid before the body copy starts. */
  .ready__band { height: 340px; }

  .ready__band::before {
    background: linear-gradient(90deg,
      rgba(5, 4, 3, .82) 0%, rgba(5, 4, 3, .74) 100%);
  }

  .ready__band::after {
    background: linear-gradient(to bottom,
      rgba(5, 4, 3, .55) 0%,
      rgba(5, 4, 3, .34) 30%,
      rgba(5, 4, 3, .72) 62%,
      rgba(5, 4, 3, .97) 86%,
      rgba(5, 4, 3, 1) 100%);
  }
  /* The mobile band already carries a near-solid vertical scrim over the copy,
     so stacking the copy scrim on top of it would only flatten the photograph
     to black. */
  .ready__copy::before { display: none; }

  .ready__form { padding: 30px 20px 32px; }
  .ready__socials { gap: var(--space-18); flex-wrap: wrap; }

  /* 16px is the threshold below which iOS zooms the page on focus. */
  .ready__field input,
  .ready__field select,
  .ready__field textarea,
  .sel__button {
    font-size: 16px;
    padding: 14px 2px;
  }

  .ready__fields { gap: var(--space-22); }
  .ready__submit { width: 100%; }
  .sel__option { padding: 14px 16px 14px 30px; font-size: 15px; }

  /* Footer links are set at 12-14px, so as drawn they are ~14px of tappable
     height. Padding buys the 44px and the negative margin returns it to the
     layout, so the footer keeps its spacing. */
  .ready__email,
  .ready__socials a {
    display: inline-block;
    padding: 15px 0;
    margin: -15px 0;
  }
  .ready__socials { row-gap: var(--space-10); }
  .sel__list { max-height: 60vh; }
}