/* ============================================================
   Wuthqa — shared INNER-PAGE styles (Company, Career, future pages)
   Builds on the homepage design system: tokens from colors_and_type.css,
   chrome + contact form from home.css, components from home-*.css.
   Only genuinely-shared inner-page primitives live here.
   ============================================================ */

/* ---- Shared inner-page hero: dark, gold-accented, serif H1 ---------- */
/* Sticky utility(40px) + nav(78px) occupy normal flow, so the hero
   begins right beneath them with no manual offset. */
.wq-phero2 { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(130% 130% at 82% -12%, #2a2824 0%, #14130f 50%, #0d0d0d 100%);
  padding: 84px 0 92px; }
.wq-phero2::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 60% at 88% 14%, rgba(200, 168, 75, .15), transparent 70%); }
/* fill variant — hero covers the first screen (118px = utility bar + nav);
   pages can tune the offset in their own stylesheet (gate.css / company.css do) */
.wq-phero2.is-fill { min-height: calc(100vh - 118px); min-height: calc(100dvh - 118px);
  display: flex; align-items: center; }
.wq-phero2.is-fill .wq-phero2-inner { width: 100%; }
@media (max-height: 660px) { .wq-phero2.is-fill { min-height: 0; display: block; } }
.wq-phero2-mark { position: absolute; top: 50%; right: -120px; transform: translateY(-50%);
  width: 460px; max-width: 44%; opacity: .07; pointer-events: none; }
.wq-phero2-inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.wq-crumb2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-en);
  font-size: 12.5px; letter-spacing: .01em; color: rgba(255, 255, 255, .5); margin-bottom: 20px; }
.wq-crumb2 a { color: rgba(255, 255, 255, .62); text-decoration: none; transition: color .25s var(--ease); }
.wq-crumb2 a:hover { color: var(--gold); }
.wq-crumb2 .cur { color: var(--gold); }
.wq-phero2 h1 { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 600; font-size: clamp(33px, 4.6vw, 56px); line-height: 1.1; letter-spacing: -.01em;
  color: #fff; margin: 14px 0 0; max-width: 19ch; }
.wq-phero2 p { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, .76); margin: 18px 0 0; max-width: 60ch; }
.wq-phero2-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
/* Supporting line rendered below the CTA (e.g. PR test benefits). */
.wq-phero2 p.wq-phero2-subnote { margin-top: 22px; font-size: 15.5px; color: rgba(255, 255, 255, .72); max-width: 54ch; }

/* Simple centered hero variant (title + breadcrumb below) */
.wq-phero2.is-center { padding: 78px 0 86px; text-align: center; }
.wq-phero2-inner.is-center { display: flex; flex-direction: column; align-items: center; max-width: 820px; }
.wq-phero2-inner.is-center h1 { max-width: none; margin: 0; letter-spacing: .02em; }
.wq-crumb2.is-below { margin: 16px 0 0; justify-content: center; }

/* Optional hero background photo (behind a dark, left-weighted overlay) */
.wq-phero2.has-photo { background: #0d0d0d; }
.wq-phero2.has-photo::before { display: none; }
.wq-phero2-photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
/* Match the homepage hero: the whole left ~40% stays solid dark behind the
   copy, then fades to reveal the photo on the right, plus a bottom darken. */
.wq-phero2-photo::after { content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, #0d0d0d 0%, #0d0d0d 40%, rgba(13, 13, 13, .68) 58%, rgba(13, 13, 13, .3) 82%, rgba(13, 13, 13, .1) 100%),
    linear-gradient(0deg, rgba(13, 13, 13, .55) 0%, transparent 32%); }

/* ---- File-upload field (Career "Reach Us") ------------------------- */
.wq-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed rgba(255, 255, 255, .22); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .04); padding: 11px 14px; cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease); }
.wq-file:hover { border-color: var(--gold); background: rgba(255, 255, 255, .06); }
.wq-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.wq-file-btn { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-family: var(--font-en); font-weight: 600; font-size: 13px; color: var(--gold);
  border: 1px solid rgba(200, 168, 75, .4); border-radius: var(--r-full); padding: 6px 13px; }
.wq-file-name { font-size: 13px; color: rgba(255, 255, 255, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 720px) {
  .wq-phero2 { padding: 64px 0 70px; }
  .wq-phero2-mark { right: -160px; opacity: .05; }
  .wq-phero2-cta .wq-btn { width: 100%; justify-content: center; }
}