/* Red Giant — conversion layer styling.
 *
 * Built entirely on the custom properties the pages already define, so this
 * inherits the existing palette, type and radius rather than introducing a
 * second design language. Nothing here restyles an existing element; the only
 * rules that reach outside this layer are the two that lift the pre-existing
 * bottom bars clear of the new one.
 */

/* ------------------------------------------------------------ inline block */
#rg-quick {
  background: var(--paper-warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(30px, 4.4vw, 58px) var(--pad);
}
#rg-quick > * { max-width: var(--maxw); margin-inline: auto; }
.rgq-eyebrow {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ember);
}
.rgq-h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(25px, 3.3vw, 40px); line-height: 1.12;
  margin: 9px 0 0; max-width: 20ch; color: var(--ink);
}
.rgq-h2 em { font-style: italic; color: var(--ember); }
.rgq-sub {
  margin: 11px 0 0; font-size: 14px; line-height: 1.7;
  color: var(--ink-soft); max-width: 54ch;
}
#rg-quick .rgq { margin-top: 22px; }

/* ------------------------------------------------------------------ steps */
.rgq-q {
  font-family: var(--display); font-size: 19px; line-height: 1.25;
  margin: 0 0 13px; color: var(--ink);
}
.rgq-ask { color: var(--ink); }
.rgq-note {
  font-size: 14px; line-height: 1.7; color: var(--ink-soft);
  max-width: 56ch; margin: 0 0 12px;
}
.rgq-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.rgq-opt {
  font-family: var(--body); font-size: 13.5px; line-height: 1;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink); cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  min-height: 44px;
}
.rgq-opt:hover { border-color: var(--ember); color: var(--ember); }
.rgq-opt.on { background: var(--ember); border-color: var(--ember); color: var(--white); }
.rgq-opt:focus-visible, .rgq-send:focus-visible, .rgbar-b:focus-visible,
.rgd-x:focus-visible, .rgq input:focus-visible, .rgq textarea:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px;
}

/* ------------------------------------------------------------------- form */
.rgq-form { margin-top: 4px; max-width: 620px; }
.rgq-f { margin-bottom: 13px; }
.rgq-f label {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 5px;
}
.rgq input[type=text], .rgq input[type=tel], .rgq textarea {
  width: 100%; box-sizing: border-box; font-family: var(--body); font-size: 15px;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 12px; min-height: 44px;
}
.rgq textarea { min-height: 84px; resize: vertical; }
.rgq input::placeholder { color: var(--ink-faint); opacity: .8; font-size: 13px; }
.rgq [aria-invalid="true"] { border-color: var(--ember); }
.rgq-err { display: block; font-size: 12.5px; color: var(--ember); margin-top: 4px; }
.rgq-send {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; background: var(--ember); color: var(--white);
  border: 0; border-radius: var(--radius); padding: 14px 22px;
  cursor: pointer; min-height: 46px;
}
.rgq-send[disabled] { opacity: .6; cursor: default; }
.rgq-status { font-size: 13.5px; color: var(--ink-soft); margin: 10px 0 0; min-height: 1.2em; }
.rgq-alt { font-size: 13.5px; color: var(--ink-soft); margin: 14px 0 0; }
.rgq-alt a, .rgq-note a, .rgq-talent { color: var(--ember); text-decoration: underline; }
.rgq-talent {
  display: inline-block; margin-top: 4px; font-family: var(--mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--ember); padding-bottom: 2px;
}
/* Honeypot. Hidden by clipping rather than by a negative offset: a bot still
   sees and fills it, but the element never sits outside the viewport, which
   a left:-9999px box does — and that reads as horizontal overflow. */
.rgq-hp { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ----------------------------------------------------------------- dialog */
.rgd {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center;
  background: rgba(16, 13, 10, .52); opacity: 0; transition: opacity .2s ease;
  padding: var(--pad);
}
.rgd.on { opacity: 1; }
.rgd-panel {
  position: relative; background: var(--paper); color: var(--ink);
  border-radius: var(--radius); max-width: 520px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: clamp(22px, 3vw, 34px);
  box-shadow: 0 24px 70px rgba(16, 13, 10, .3);
  transform: translateY(8px); transition: transform .22s ease;
}
.rgd.on .rgd-panel { transform: none; }
.rgd-x {
  position: absolute; top: 8px; right: 10px; width: 40px; height: 40px;
  background: none; border: 0; font-size: 25px; line-height: 1;
  color: var(--ink-faint); cursor: pointer;
}
.rgd-copy h2 {
  font-family: var(--display); font-weight: 400; font-size: 25px;
  line-height: 1.15; margin: 0 0 8px; max-width: 20ch;
}
.rgd-copy p { font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
body.rg-noscroll { overflow: hidden; }

/* mobile: the dialog becomes a bottom sheet */
@media (max-width: 880px) {
  .rgd { align-items: flex-end; padding: 0; }
  .rgd-panel {
    max-width: none; border-radius: 12px 12px 0 0; max-height: 90vh;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  .rgd.on .rgd-panel { transform: none; }
}

/* ------------------------------------------------------------- sticky bar */
.rgbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  display: none; align-items: stretch;
  background: var(--ink); color: var(--paper);
  border-top: 1px solid rgba(250, 247, 242, .18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.rgbar.hide { display: none !important; }
.rgbar-b {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 52px; padding: 8px 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  color: var(--paper); background: none; border: 0;
  border-right: 1px solid rgba(250, 247, 242, .14); cursor: pointer;
}
.rgbar-b:last-child { border-right: 0; }
.rgbar-q { background: var(--ember); color: var(--white); }

@media (max-width: 880px) {
  .rgbar { display: flex; }
  /* The two bars that were already here keep working, lifted clear of the new
     one by exactly its height. Neither of their scripts is modified. */
  #bestick.on, .plsticky.on { bottom: var(--rgbar-h, 0px); }
  /* Clearance, not just height. Padding exactly equal to the bar left the last
     element's bottom edge flush with the bar's top edge, so anything in the
     final couple of dozen pixels still had its centre - the point a thumb
     actually lands on - underneath the bar. Measured at 390 and 430 on the
     team-building footer before this was added. */
  body.rg-hasbar { padding-bottom: calc(var(--rgbar-h, 0px) + 16px); }
}

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

/* ------------------------------------------- quick enquiry: structured date */
/* Buttons rather than a select, to match the estimator's own chips, and sized
   for a thumb. The whole block collapses to nothing until the visitor answers
   the confirmed-date question, so the form stays short for someone who just
   wants to send a name and a number. */
.rgq-when { border: 0; padding: 0; margin: 0 0 14px; }
.rgq-when > legend {
  padding: 0; margin-bottom: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.rgq-wopts { display: flex; flex-wrap: wrap; gap: 7px; }
.rgq-wopt {
  min-height: 44px; padding: 10px 13px; cursor: pointer;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
}
.rgq-wopt.on { border-color: var(--ember); color: var(--ember); }
.rgq-wopt:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.rgq-wbox { margin-top: 10px; }
.rgq-wlab {
  display: block; margin-bottom: 5px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.rgq-when .rgq-f { margin-top: 10px; }
.rgq-f input[type="date"] {
  width: 100%; min-height: 46px; padding: 11px 12px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 3px;
}