/* Careers (apply.php). Self-contained: carries its own copy of the shared form
   rules so the page can style inputs without dragging quote.css along. */

/* ---- Hero ---- */

.car-hero {
  background: var(--black);
  color: var(--paper);
  padding: 76px 0 64px;
  position: relative;
  overflow: hidden;
}
/* Soft light off the top-left corner so the slab of black is not dead flat. */
.car-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 160%;
  background: radial-gradient(closest-side, rgba(243, 240, 232, 0.09), transparent);
  pointer-events: none;
}
.car-hero > .wrap { position: relative; }
.car-hero .eyebrow { color: rgba(243, 240, 232, 0.6); }
.car-hero h1 {
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 0.92;
  margin-bottom: 20px;
}
.car-hero-lede {
  max-width: 34em;
  color: rgba(243, 240, 232, 0.76);
  font-size: 1.1rem;
}

.car-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 30px;
}
.car-facts span {
  padding: 7px 16px;
  border: 1px solid rgba(243, 240, 232, 0.28);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Value strip ---- */

.car-values {
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
}
.car-values .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.car-value {
  background: var(--paper-deep);
  padding: 30px 28px;
}
.car-value h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.car-value p { font-size: 0.98rem; }

/* ---- Body layout ---- */

.car-body { padding: 64px 0 92px; }
.car-body .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: start;
}

/* Not sticky by default. A sticky block taller than the window pins its top and
   leaves the rest unreachable, so it only sticks where the whole column fits.
   The offset has to clear the site header, which is itself sticky at
   var(--nav) tall — park it any higher and the first card hides behind it. */
.car-aside { display: grid; gap: 18px; align-self: start; }
@media (min-width: 1021px) and (min-height: 820px) {
  .car-aside {
    position: sticky;
    top: calc(var(--nav) + 20px);
  }
}
.car-card {
  border: 1px solid var(--line);
  background: #fff;
  padding: 24px 26px;
}
.car-card h2 {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.car-card p { font-size: 0.95rem; color: var(--muted); }
.car-card p + p { margin-top: 12px; }
.car-card .k {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.car-card .v { font-size: 0.98rem; color: var(--ink); }
.car-card a { border-bottom: 1px solid currentColor; }
.car-steps-list { display: grid; gap: 14px; counter-reset: carstep; }
.car-steps-list li {
  display: flex;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--muted);
}
.car-steps-list li::before {
  counter-increment: carstep;
  content: counter(carstep);
  flex: 0 0 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 500;
}

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

.car-intro { margin-bottom: 34px; }
.car-intro h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  margin-bottom: 10px;
}
.car-intro p { color: var(--muted); max-width: 40em; }

.notice {
  max-width: 40em;
  border: 1px solid var(--ink);
  padding: 16px 18px;
  margin-bottom: 28px;
}
.notice-err { border-color: #8a3b2f; background: #fdf3f2; }

.quote-form { display: grid; gap: 0; counter-reset: carstep; }

.car-step {
  /* Reset the UA fieldset defaults that otherwise fight the grid. */
  margin: 0;
  min-width: 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: #fff;
  padding: 26px 28px 30px;
}
/* The display rules below beat the hidden attribute on their own, so both the
   role blocks and the questions they replace need it spelled out. */
.car-step[hidden],
.quote-form label[hidden] { display: none; }
.car-step-note {
  margin-bottom: 18px;
  font-size: 0.95rem;
  color: var(--muted);
}
.car-step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
/* Numbered by counter rather than by hand: a display:none step is skipped, so
   the role-specific block can appear mid-form without leaving a gap. */
.car-step-head .n {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
}
.car-step-head .n::before {
  counter-increment: carstep;
  content: counter(carstep, decimal-leading-zero);
}
.car-step-head h2 {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.car-fields { display: grid; gap: 18px; }

.quote-form label {
  display: grid;
  gap: 8px;
  /* Without this a label stretched by a taller neighbour spreads its own rows
     to fill, which quietly makes one input taller than the one beside it. */
  align-content: start;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.quote-form .help {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
}
.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  padding: 12px 14px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.quote-form select {
  appearance: none;
  padding-right: 38px;
  /* Chevron drawn inline so there is no extra asset to ship. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235e584f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.quote-form textarea { min-height: 118px; resize: vertical; }
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(28, 26, 23, 0.08);
}
.quote-form input[type="file"] {
  padding: 11px 14px;
  background: var(--paper);
  font-size: 0.92rem;
}
/* Paired fields share one track for the question, one for the control, and one
   for the help line, so a question that wraps to two lines no longer shoves its
   input below the one next to it. */
.quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  row-gap: 8px;
}
.quote-row > label {
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-items: start;
}

.car-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 24px 28px;
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--ink);
  color: var(--paper);
}
.car-submit .btn {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.car-submit .btn:hover { background: #fff; border-color: #fff; }
.car-submit p {
  font-size: 0.86rem;
  color: rgba(243, 240, 232, 0.66);
}

/* Scoped to beat the width:100% that applies to every other field in the form,
   otherwise the honeypot is a full-width box parked off-screen. */
.quote-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

/* ---- Sent state ---- */

.car-sent { padding: 90px 0 110px; }
.car-sent h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); margin-bottom: 16px; }
.car-sent p { color: var(--muted); max-width: 38em; margin-bottom: 30px; }
.car-sent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }

@media (max-width: 1020px) {
  .car-body .wrap { grid-template-columns: 1fr; gap: 38px; }
}
@media (max-width: 860px) {
  .car-values .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .car-hero { padding: 48px 0 42px; }
  /* The hard break is a desktop line-length choice. On a phone it pins
     "Come build countertops" to one line, which is wider than the screen. */
  .car-hero h1 br { display: none; }
  .car-hero h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .car-hero-lede { font-size: 1.02rem; }
  .car-facts { margin-top: 24px; gap: 8px; }
  .car-facts span { padding: 6px 12px; font-size: 0.68rem; }

  .car-value { padding: 24px 22px; }

  .car-body { padding: 42px 0 64px; }
  .car-body .wrap { gap: 32px; }
  .car-intro { margin-bottom: 26px; }
  .car-card { padding: 22px 20px; }

  .car-step { padding: 22px 20px 26px; }
  .car-step-head { padding-bottom: 14px; margin-bottom: 18px; }
  .car-fields { gap: 20px; }
  /* 11.5px of wide-tracked uppercase is a squint at arm's length. */
  .quote-form label { font-size: 0.76rem; }
  .quote-form textarea { min-height: 104px; }
  /* Below 16px, tapping a field makes iOS Safari zoom the whole page in and
     it does not zoom back out. Every other control is already 1rem. */
  .quote-form input[type="file"] { font-size: 1rem; }

  /* Stacked, there is nothing left to line up, so the shared tracks come off
     and the labels space themselves normally again. */
  .quote-row {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 18px;
  }
  .quote-row > label { grid-row: auto; grid-template-rows: none; }
  /* Short pairs stay side by side. Stacking every one of them turns an
     already long form into a lot of thumb work for no gain. */
  .quote-row.is-tight {
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
  }

  .car-submit { padding: 20px; gap: 14px; }
  /* Full width so the primary action is an easy thumb target. */
  .car-submit .btn { width: 100%; }

  .car-sent { padding: 56px 0 72px; }
}

/* 360 and 390 are the common phone widths and still hold two short fields.
   Below that the gutters eat too much and they go one per row. */
@media (max-width: 359px) {
  .quote-row.is-tight { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .car-step { padding: 20px 16px 24px; }
  .car-value { padding: 22px 18px; }
  .car-card { padding: 20px 18px; }
  .car-submit { padding: 18px 16px; }
}