/* ============================================================
   EXCEED — forms.css
   Additions for the enquiry form and the careers form.
   Loaded AFTER site.css. Nothing here overrides site.css
   beyond the small, deliberate refinements noted below.
   ============================================================ */

/* ---- Draft resume (cross-browser continue-later) ---- */
.draft-bar{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
.draft-code{display:none;font-size:13px;line-height:1.7;color:var(--ink-dim);max-width:56ch;text-align:left;text-wrap:pretty;}
.draft-code.shown{display:block;}
.draft-code strong{font-family:var(--reading);font-weight:600;letter-spacing:.16em;color:var(--gold-deep);}
.draft-link{display:inline-block;margin-top:12px;padding:0;background:none;border:none;border-bottom:1px solid var(--line-gold);cursor:pointer;font-family:var(--reading);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);transition:color .3s,border-color .3s;}
.draft-link:hover{color:var(--gold);border-color:var(--gold);}
.draft-resume{display:none;margin-top:18px;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.draft-resume.shown{display:flex;}
.draft-resume .field{flex:1 1 200px;margin-bottom:0;}
.draft-resume input{text-transform:uppercase;letter-spacing:.18em;}
.draft-restore{background:transparent;border:1px solid var(--line-gold);color:var(--gold-deep);font-family:var(--reading);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;padding:12px 24px;cursor:pointer;transition:background .3s,color .3s;}
.draft-restore:hover{background:var(--gold);color:#fdfaf2;border-color:var(--gold);}
.draft-note{margin-top:10px;font-size:12.5px;color:var(--ink-dim);}

/* ---- Reference shown back to the visitor ---- */
.form-ref{display:inline-block;margin-top:10px;font-family:var(--reading);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--line-gold);padding:7px 16px;}

/* ---- Careers page ---- */
.careers-wrap{max-width:800px;margin:0 auto;padding-bottom:clamp(90px,12vh,150px);}
.careers-wrap h2{font-family:var(--display);font-size:clamp(38px,5vw,72px);color:var(--ink);line-height:1.02;margin-bottom:10px;}
.careers-wrap h2 em{font-style:italic;color:var(--gold-deep);}
.careers-sub{font-family:var(--display);font-style:italic;font-size:clamp(24px,3vw,40px);color:var(--gold-deep);line-height:1.1;margin-bottom:34px;}
.careers-intro{max-width:62ch;text-align:left;text-wrap:pretty;}
.careers-intro p{margin-bottom:18px;color:var(--ink-dim);}
.no-cv{margin:30px 0 8px;padding:20px 24px;border-left:2px solid var(--gold);background:rgba(183,139,67,.07);font-size:15.5px;line-height:1.8;color:var(--ink);max-width:62ch;text-align:left;}

/* Each question sits in its own generous block */
.q-block{margin-bottom:34px;}
.q-block .q-num{display:block;font-family:var(--reading);font-size:11px;letter-spacing:.2em;color:var(--gold-deep);margin-bottom:6px;}
.q-block label{display:block;font-family:var(--display);font-size:clamp(20px,2.1vw,27px);letter-spacing:normal;text-transform:none;color:var(--ink);margin-bottom:12px;line-height:1.25;}
.q-block textarea{min-height:170px;}

/* Short details sit two-up on wider screens */
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,50px);}
@media (max-width:700px){
  .field-pair{grid-template-columns:1fr;}
  .draft-resume{align-items:stretch;}
  .draft-restore{width:100%;}
}

/* ============================================================
   The thank-you screen
   The page fades away; a plate of food sits watermarked behind
   the message; the site returns on its own.
   ============================================================ */
html.ty-active { overflow: hidden; }
html.ty-active body > *:not(.ty-screen) {
  filter: blur(3px);
  opacity: .12;
  transition: opacity .85s ease, filter .85s ease;
  pointer-events: none;
}

.ty-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 42%, #0d2439 0%, #071a2d 55%, #04101d 100%);
  opacity: 0; transition: opacity 1s ease;
  cursor: pointer;
}
.ty-screen.is-in { opacity: 1; }

.ty-plate {
  position: absolute; left: 50%; top: 47%;
  width: min(78vmin, 720px); height: min(78vmin, 720px);
  transform: translate(-50%, -50%) scale(.94);
  background-size: cover; background-position: center;
  border-radius: 50%;
  opacity: .13;
  filter: saturate(.7) contrast(.92);
  transition: transform 5.5s ease-out, opacity 1.6s ease;
  pointer-events: none;
}
.ty-screen.is-in .ty-plate { transform: translate(-50%, -50%) scale(1.06); opacity: .17; }

.ty-inner {
  position: relative; z-index: 2;
  width: min(760px, calc(100vw - 48px));
  text-align: center;
  transform: translateY(14px);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.ty-screen.is-in .ty-inner { transform: translateY(0); }

.ty-message {
  font-family: var(--display, Georgia, serif);
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.24;
  letter-spacing: -.012em;
  color: #fdfaf2;
  text-shadow: 0 3px 26px rgba(2,10,18,.6);
  margin: 0;
}
.ty-ref {
  margin: 26px 0 0;
  font-family: var(--reading, system-ui, sans-serif);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-bright, #d8b36b);
}
.ty-back {
  display: inline-block; margin-top: 34px;
  font-family: var(--reading, system-ui, sans-serif);
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(244,240,231,.66); text-decoration: none;
  border-bottom: 1px solid rgba(183,139,67,.4);
  padding-bottom: 5px;
  transition: color .3s ease, border-color .3s ease;
}
.ty-back:hover { color: var(--gold-bright, #d8b36b); border-color: var(--gold-bright, #d8b36b); }

.ty-bar {
  width: 128px; height: 1px; margin: 40px auto 0;
  background: rgba(255,255,255,.14); overflow: hidden;
}
.ty-bar-fill {
  display: block; width: 100%; height: 100%;
  background: var(--gold, #b78b43);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 8s linear;
}

[dir="rtl"] .ty-bar-fill { transform-origin: right center; }

@media (max-width: 640px) {
  .ty-plate { width: 86vmin; height: 86vmin; }
  .ty-message { font-size: clamp(25px, 7vw, 34px); }
  .ty-back { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ty-screen, .ty-inner, .ty-plate, .ty-bar-fill { transition: none !important; }
  .ty-screen { opacity: 1; }
  html.ty-active body > *:not(.ty-screen) { transition: none; }
}