/* ---------- Request a project page (dark) ---------- */
/* Shares fonts, cursors, the top bar and the letter hover with styles.css. */

:root {
  --rq-bg: #111619;
  --rq-field: #1e2529;
  --rq-placeholder: #4b5154;
}

html, body.rq-page { background: var(--rq-bg); color: #fff; }

/* the form column sits in the 1920×1080 artboard like the landing hero */
.rq-col {
  position: absolute;
  left: calc(50% - 271px);
  top: var(--extra, 0px);
  width: 542px;
  height: 1080px;
  z-index: 2;
}

.rq-step {
  position: absolute;
  inset: 0;
  transition:
    transform 0.6s cubic-bezier(.22, .8, .25, 1),
    opacity 0.45s ease,
    filter 0.45s ease;
}
/* the column covers the whole artboard, so only its actual content takes the mouse
   (lets the cursor reach the big OLY underneath for its blur trail) */
.rq-col, .rq-step { pointer-events: none; }
.rq-step > * { pointer-events: auto; }
.rq-step-2 > *, .rq-col.on-step-2 .rq-step-1 > * { pointer-events: none; }
.rq-col.on-step-2 .rq-step-2 > * { pointer-events: auto; }

/* steps slide like pages: the next one waits on the right, the previous one leaves to the left */
.rq-step-2 { transform: translateX(80px); opacity: 0; filter: blur(5px); pointer-events: none; }
.rq-col.on-step-2 .rq-step-1 { transform: translateX(-80px); opacity: 0; filter: blur(5px); pointer-events: none; }
.rq-col.on-step-2 .rq-step-2 { transform: none; opacity: 1; filter: none; }

/* headings: real text so they get the blue per-letter hover from the landing page */
.rq-title.headline {
  position: absolute;
  left: -4px;
  top: 312px;
  margin: 0;
  font-size: 76px;
  line-height: 92px;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: #fff;
  z-index: 3;
}

/* subtitle under the title — only while you're on the first question */
.rq-sub {
  position: absolute;
  left: 0;
  top: 418px;
  margin: 0;
  font-size: 22px;           /* same visual size as the landing page subtitle */
  line-height: 28px;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.45);
  z-index: 2;
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.6s cubic-bezier(.22, .8, .25, 1);
  animation: blur-in 1.1s cubic-bezier(.22, .8, .25, 1) 0.6s backwards;
}
.rq-col.past-first .rq-sub { opacity: 0; filter: blur(6px); transform: translateY(-8px); }

/* ---------- step 1: fields stack, one active at a time ---------- */
.rq-fields {
  position: absolute;
  left: 0;
  right: 0;
  top: 500px;
  /* soft blur-in after the title's words; 'backwards' so no filter stays on it afterwards
     (a leftover filter would stop the budget dropdown's glass blur) */
  animation: blur-in 1.1s cubic-bezier(.22, .8, .25, 1) 0.7s backwards;
}

.rq-field {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* position / blur / opacity are set from request.js */
  transition:
    transform 0.6s cubic-bezier(.22, .8, .25, 1),
    opacity 0.45s ease,
    filter 0.45s ease;
  will-change: transform, filter, opacity;
}
.rq-field.is-hidden { visibility: hidden; transition-property: transform, opacity, filter, visibility; transition-delay: 0s, 0s, 0s, 0.45s; }

.rq-field label,
.rq-details label {
  display: block;
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}

.rq-field input,
.rq-select select,
.rq-details textarea {
  display: block;
  width: 100%;
  height: 58px;
  padding: 0 25px;
  border: 0;
  border-radius: 19px;
  background: var(--rq-field);
  color: #fff;
  font-family: var(--font);
  font-size: 19px;
  letter-spacing: -0.01em;
  outline: none;
  transition: --k 0.35s ease;
  color-scheme: dark;
}
.rq-field input::placeholder,
.rq-details textarea::placeholder { color: var(--rq-placeholder); opacity: 1; }
/* focus glow: soft light that hugs the inside of the field, uneven like light on glass —
   a cool streak along the top-left, a dimmer one bottom-right. --k: 0 off · 1 focused ·
   a bit more for a split second on every key press (set from request.js) */
@property --k { syntax: '<number>'; inherits: false; initial-value: 0; }
.rq-field input,
.rq-details textarea,
.rq-dd-trigger {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, calc(0.06 * var(--k))),
    inset 16px 9px 22px -18px rgba(130, 175, 255, calc(0.55 * var(--k))),
    inset 0 1px 0 rgba(255, 255, 255, calc(0.12 * var(--k))),
    inset -26px -10px 28px -24px rgba(255, 255, 255, calc(0.32 * var(--k))),
    inset 0 -1px 0 rgba(255, 255, 255, calc(0.05 * var(--k)));
}
.rq-field input:focus,
.rq-details textarea:focus,
.rq-dd-trigger:focus-visible,
.rq-dd.is-open .rq-dd-trigger { --k: 1; }
.rq-field input.rq-key,
.rq-details textarea.rq-key { --k: 1.45; transition-duration: 0.06s; }

/* label: the app that doesn't match what's typed fades back */
.rq-msg-label span { transition: opacity 0.3s ease; }
.rq-field:has(.rq-messenger.is-wa) .lbl-tg,
.rq-field:has(.rq-messenger.is-tg) .lbl-wa { opacity: 0.35; }

/* WhatsApp / Telegram: small app icon at the end of the field */
.rq-messenger { position: relative; }
.rq-messenger input { padding-right: 68px; }
.rq-app {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  pointer-events: none;
  opacity: 0;
  filter: blur(6px) drop-shadow(0 1px 2px rgba(0, 0, 0, 0));
  transform: scale(0.4) rotate(-20deg);
  transition:
    transform 0.5s cubic-bezier(.34, 1.7, .5, 1),
    opacity 0.25s ease,
    filter 0.25s ease;
}
.rq-messenger.is-tg .rq-app-tg,
.rq-messenger.is-wa .rq-app-wa { opacity: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); transform: none; }

/* budget: custom dropdown in the same style as the fields */
.rq-dd { position: relative; }
.rq-dd-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: 58px;
  padding: 0 25px;
  border: 0;
  border-radius: 19px;
  background: var(--rq-field);
  color: var(--rq-placeholder);
  font-family: var(--font);
  font-size: 19px;
  letter-spacing: -0.01em;
  text-align: left;
  outline: none;
  transition: --k 0.35s ease, color 0.2s ease;
}
.rq-dd-trigger.has-value { color: #fff; }

.rq-chevron {
  position: absolute;
  right: 25px;
  top: 29px;
  width: 20px;
  height: 10px;
  margin-top: -4px;
  color: #fff;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1);
}
.rq-dd.is-open .rq-chevron { transform: rotate(180deg); }

.rq-dd-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 19px;
  overflow: hidden;
  /* liquid glass like macOS Control Center: light, see-through grey with a soft blur */
  background: linear-gradient(to bottom, rgba(78, 84, 89, 0.5), rgba(64, 70, 75, 0.4));
  -webkit-backdrop-filter: blur(22px) saturate(1.8);                  /* Safari */
          backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 0;
  visibility: hidden;          /* size, bounce and fade are driven by a spring in request.js */
  pointer-events: none;
}
.rq-dd.is-open .rq-dd-list { pointer-events: auto; }
/* glass edge: brightest along the bottom */
.rq-dd-list::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.05) 45%,
    rgba(255, 255, 255, 0.32) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.rq-dd-list::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(110% 70% at 50% 120%, rgba(255, 255, 255, 0.12), transparent 60%);
  pointer-events: none;
}
.rq-dd-list li { position: relative; z-index: 1; }
.rq-dd-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 19px;
  border-radius: 13px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  letter-spacing: -0.01em;
  transition: background 0.15s ease, color 0.15s ease;
}
.rq-dd-list li.is-active { background: rgba(255, 255, 255, 0.07); color: #fff; }
.rq-dd-list li[aria-selected="true"] { color: #fff; }
.rq-dd-list li[aria-selected="true"]::after {
  content: "";
  width: 14px;
  height: 8px;
  border: solid var(--blue);
  border-width: 0 0 2.5px 2.5px;
  transform: rotate(-45deg) translate(1px, -2px);
}
.rq-field.dd-open {
  z-index: 10;
  /* will-change: filter/opacity would make this field a "backdrop root", so the menu's glass
     could only blur what's inside the field (nothing) — switch it off while the menu is open */
  will-change: auto;
}

/* "nope" shake when Enter / Continue is pressed on an empty or invalid field */
.rq-shake { animation: rq-shake 0.42s cubic-bezier(.36, .07, .19, .97); }
.rq-shake input, .rq-shake select, .rq-shake .rq-dd-trigger { box-shadow: inset 0 0 0 1px rgba(255, 69, 58, 0.55) !important; }
@keyframes rq-shake {
  15%, 85% { translate: -3px 0; }
  30%, 70% { translate: 5px 0; }
  45%, 55% { translate: -6px 0; }
}

/* ---------- buttons ---------- */
.rq-btn {
  position: absolute;
  right: 0;
  height: 46px;
  padding: 0 31px;
  border: 0;
  border-radius: 23px;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.45s cubic-bezier(.34, 1.56, .64, 1),
    opacity 0.4s ease,
    filter 0.4s ease,
    background 0.2s ease;
}
.rq-btn { outline: none; }    /* no default (orange) focus ring; keyboard users get a soft one */
.rq-btn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); }
.rq-btn:hover  { transform: translateY(-2px) scale(1.04); }
.rq-btn:active { transform: scale(0.97); transition-duration: 0.12s; }

.rq-continue {
  top: 158px;                  /* under the budget field (set by request.js when it moves) */
  background: rgba(255, 255, 255, 0.95);
  color: #363636;
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
}
.rq-continue { left: 0; height: 54px; border-radius: 27px; }      /* full width under the budget field, a bit taller */
.rq-continue.is-shown { opacity: 0.7; filter: none; pointer-events: auto; }
.rq-continue.is-shown:hover,
.rq-continue.is-shown:focus-visible { opacity: 1; transform: translateY(-2px) scale(1.02); }

/* ---------- step 2 ---------- */
.rq-step-2 .rq-title { top: 296px; }
.rq-details {
  position: absolute;
  left: 0;
  right: 0;
  top: 414px;
}
.rq-details textarea {
  /* starts as a one-line field and grows as you type (height set by request.js) */
  height: 84px;
  min-height: 84px;
  max-height: 266px;
  padding: 17px 25px 43px;     /* extra room at the bottom only */
  resize: none;
  line-height: 24px;
  overflow-y: hidden;
  transition: height 0.45s cubic-bezier(.22, .8, .25, 1), --k 0.35s ease;
}
.rq-details textarea.is-full { overflow-y: auto; }
.rq-send {
  position: relative;
  right: auto;
  flex: 1;                     /* stretches all the way to the Back button */
  background: var(--blue);
  color: #fff;
  box-shadow: none;
}
.rq-send:hover { background: #3a7bff; }
/* Back + Send in one row: Back keeps its size, Send fills the rest */
.rq-actions { display: flex; gap: 12px; margin-top: 30px; }
.rq-send:hover, .rq-back:hover { transform: translateY(-2px) scale(1.02); }

/* Back: same pill as Continue, sits on the left of Send */
.rq-back {
  position: relative;
  right: auto;
  flex: none;
  background: rgba(255, 255, 255, 0.95);
  color: #363636;
}
.rq-send[disabled] { opacity: 0.7; transform: none; }
.rq-send.is-sent { background: #2fbf71; }
.rq-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- big OLY at the bottom ---------- */
.rq-oly {
  /* the faint OLY at the bottom: the whole word is drawn (433px tall), only its top 208px show
     above the end section; scrolling down it slides into the footer (request.js) */
  position: absolute;
  left: calc(50% - 455px);
  top: calc(100% - 208px);
  width: 926px;
  height: 433px;
  z-index: 0;
  animation: rise-up 2.6s cubic-bezier(.16, .84, .3, 1) 0.4s both;
}

.rq-oly svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .rq-col {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 507px;            /* the end section starts at the same line as on the other pages */
    margin-top: 12vh;
  }
  .rq-title.headline {
    left: 0;
    top: 0;
    font-size: min(76px, calc((100vw - 32px) / 7.4));
    line-height: 1.2;
  }
  .rq-sub { top: calc(min(60px, (100vw - 32px) / 7.6) * 1.05 + 10px); font-size: 16px; line-height: 21px; text-wrap: balance; }
  .rq-fields { top: calc(min(60px, (100vw - 32px) / 7.6) * 1.05 + 92px); }
  .rq-step-2 .rq-title { top: 0; }
  .rq-details { top: calc(min(60px, (100vw - 32px) / 7.6) * 1.05 + 24px); }
  .rq-details textarea { max-height: 220px; }
  .rq-field label, .rq-details label { font-size: 20px; line-height: 24px; }
  .rq-field input, .rq-select select, .rq-details textarea { font-size: 17px; }
  .rq-oly { display: none; }
  /* a bit smaller, same 16px side padding as the other pages */
  .rq-col { width: calc(100vw - 32px); max-width: calc(100vw - 32px); margin-left: auto; margin-right: auto; }
  .rq-title.headline { font-size: min(60px, calc((100vw - 32px) / 7.6)); line-height: 1.05; }   /* same as the home headline */
  .rq-field label, .rq-details label { font-size: 17px; line-height: 21px; }
  .rq-field input, .rq-select select { height: 48px; padding: 0 18px; font-size: 16px; }
  .rq-details textarea { font-size: 16px; }
  .rq-sub { font-size: min(17px, 4.1vw); line-height: 1.35; text-wrap: wrap; left: 0; right: 0; width: auto; max-width: none; }   /* a bit smaller, fills the width */
}

/* the cursor's blur trail over the big OLY: tinted with the page colour, so it reads as frosted
   background instead of a light smudge on this dark page */
.rq-page .blob { background: rgba(17, 22, 25, 0.55); }

/* Continue moves with the budget field (translate set by request.js), same motion as the fields */
.rq-continue { transition: transform 0.45s cubic-bezier(.34, 1.56, .64, 1), opacity 0.45s ease, filter 0.45s ease, translate 0.6s cubic-bezier(.22, .8, .25, 1), background 0.2s ease; }

/* phones: the top bar sits 10px from the top like on the other pages */
@media (max-width: 767px) { .rq-page .top { margin-top: 0; } }