:root {
  --deep: #060e1c;
  --navy: #0a1930;
  --navy-2: #0d1f3d;
  --navy-3: #122a52;
  --card: #0e1c36;
  --gold: #d6b25e;
  --gold-light: #f0d58a;
  --ink: #f4f0e6;
  --muted: #9aa8bf;
  --line: rgba(214, 178, 94, 0.18);
  --line-strong: rgba(214, 178, 94, 0.36);
  --success: #69d6a8;
  --danger: #ff9f9f;
  /* Dual-surface readable text — light cards must not inherit cream/gold ink.
     Gold remains a CTA/accent token (--gold); body/heading text on light
     surfaces uses --ink-on-light / --accent-on-light instead. */
  --ink-on-light: #0b1728;
  --muted-on-light: #4a5565;
  --accent-on-light: #705b2a;
  --paper: #ffffff;
  --paper-soft: #f3f5f8;
  --placeholder-on-dark: #7c8aa1;
  --placeholder-on-light: #6b778a;
  --disabled-on-light: #8a94a3;
  --shell: 1240px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow:
    0 28px 80px rgba(0, 0, 0, 0.28),
    0 10px 30px rgba(0, 0, 0, 0.18);

  /* QERIONN_TYPOGRAPHY_SCALE_V1 — restrained clamp() scale shared by
     every public page (hero H1 down to captions). Change a value here
     rather than adding a page-local font-size override. */
  --font-eyebrow: 0.76rem;
  --font-hero: clamp(2.1rem, 3.4vw, 3.35rem);
  --font-h2: clamp(1.65rem, 2.4vw, 2.35rem);
  --font-h3: clamp(1.15rem, 1.4vw, 1.35rem);
  --font-body-lead: clamp(1.02rem, 1.15vw, 1.18rem);
  --font-body: 1rem;
  --font-caption: 0.82rem;
  --hero-line-height: 1.12;
  --hero-letter-spacing: -0.025em;
  --h2-line-height: 1.18;
  --h2-letter-spacing: -0.02em;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(214, 178, 94, 0.08),
      transparent 30%
    ),
    var(--deep);
  color: var(--ink);
  font-family:
    Inter,
    Manrope,
    "Segoe UI",
    Arial,
    sans-serif;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body.guide-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--gold);
  color: var(--deep);
}

/* ============================================================
   SURFACE CONTRAST — design-system dual palette
   Dark page chrome keeps cream/gold ink. Any light/white/paper
   surface must opt into .surface-light (or .section-light), which
   remaps semantic text tokens so descendants stay WCAG-readable
   without page-local overrides.
   ============================================================ */
.surface-light,
.section-light {
  color: var(--ink-on-light);
  color-scheme: light;
  --ink: var(--ink-on-light);
  --muted: var(--muted-on-light);
  --gold-light: var(--accent-on-light);
}

.surface-light .eyebrow,
.surface-light .section-kicker,
.section-light .eyebrow,
.section-light .section-kicker {
  color: var(--accent-on-light);
}

.surface-light .text-link,
.surface-light .card-link,
.section-light .text-link,
.section-light .card-link,
.surface-light a:not(.button):not(.header-primary-cta):not(.header-secondary-cta),
.section-light a:not(.button):not(.header-primary-cta):not(.header-secondary-cta) {
  color: var(--accent-on-light);
}

.surface-light .text-link:hover,
.surface-light .text-link:focus-visible,
.surface-light .card-link:hover,
.surface-light .card-link:focus-visible,
.section-light .text-link:hover,
.section-light .text-link:focus-visible,
.section-light .card-link:hover,
.section-light .card-link:focus-visible,
.surface-light a:not(.button):hover,
.surface-light a:not(.button):focus-visible,
.section-light a:not(.button):hover,
.section-light a:not(.button):focus-visible {
  color: var(--ink-on-light);
}

.surface-light .form-field label,
.section-light .form-field label,
.surface-light legend,
.section-light legend {
  color: var(--ink-on-light);
}

.surface-light .form-field small,
.section-light .form-field small,
.surface-light .form-section-help,
.section-light .form-section-help {
  color: var(--muted-on-light);
}

.surface-light .form-field input:not([type="checkbox"]):not([type="radio"]),
.surface-light .form-field select,
.surface-light .form-field textarea,
.section-light .form-field input:not([type="checkbox"]):not([type="radio"]),
.section-light .form-field select,
.section-light .form-field textarea {
  background: #fff;
  color: var(--ink-on-light);
  border-color: rgba(11, 23, 40, 0.18);
}

.surface-light ::placeholder,
.section-light ::placeholder {
  color: var(--placeholder-on-light);
  opacity: 1;
}

.surface-light :disabled,
.surface-light [aria-disabled="true"],
.section-light :disabled,
.section-light [aria-disabled="true"] {
  color: var(--disabled-on-light);
}

.surface-light .button-outline,
.section-light .button-outline {
  color: var(--ink-on-light);
  border-color: rgba(11, 23, 40, 0.22);
  background: #fff;
}

.surface-light .button-outline:hover,
.surface-light .button-outline:focus-visible,
.section-light .button-outline:hover,
.section-light .button-outline:focus-visible {
  color: var(--ink-on-light);
  border-color: var(--accent-on-light);
}

.shell {
  width: min(calc(100% - 48px), var(--shell));
  margin-inline: auto;
}

.narrow-shell {
  width: min(100%, 930px);
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  transform: translateY(-150%);
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--gold);
  color: var(--deep);
  font-weight: 800;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(214, 178, 94, 0.12);
  background: rgba(6, 14, 28, 0.9);
  backdrop-filter: blur(18px);
  transition:
    box-shadow 180ms ease,
    background 180ms ease;
}

.site-header.is-scrolled {
  background: rgba(6, 14, 28, 0.97);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.24);
}

.header-inner {
  min-height: 88px;
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand-logo,
.footer-logo {
  width: auto;
  object-fit: contain;
}

.brand-logo {
  height: 46px;
}

.site-navigation {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 30px);
}

.site-navigation a {
  position: relative;
  flex-shrink: 0;
  color: #c8d1df;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.site-navigation > details {
  flex-shrink: 0;
}

.site-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -10px;
  height: 2px;
  background: var(--gold);
  transition: right 180ms ease;
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
  color: var(--ink);
}

.site-navigation a:hover::after,
.site-navigation a:focus-visible::after {
  right: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--navy);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background: var(--ink);
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.button-large {
  min-height: 54px;
  padding: 15px 23px;
}

.button-gold {
  background: var(--gold);
  color: #07101f;
  box-shadow: 0 16px 35px rgba(214, 178, 94, 0.14);
}

.button-gold:hover,
.button-gold:focus-visible,
.button-gold:active {
  background: var(--gold-light);
  color: #07101f;
}

.button-gold:disabled,
.button-gold[aria-disabled="true"] {
  color: #07101f;
  opacity: 0.55;
}

.button-quiet {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #d5deeb;
}

.button-outline {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink);
}

.button-dark {
  background: var(--deep);
  color: var(--ink);
}

.button-light {
  border-color: rgba(6, 14, 28, 0.35);
  background: transparent;
  color: var(--deep);
}

.flash-stack {
  position: relative;
  z-index: 900;
  padding-top: 18px;
}

.flash-message {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(214, 178, 94, 0.1);
}

.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  right: -180px;
  top: -260px;
  border: 1px solid rgba(214, 178, 94, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.hero-home {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  padding: 86px 0 76px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  align-items: center;
  gap: clamp(48px, 7vw, 100px);
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow,
.section-kicker {
  margin: 0 0 18px;
  color: var(--gold-light);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero h1,
.page-hero h1 {
  margin: 0;
  max-width: 780px;
  color: var(--ink);
  font-size: var(--font-hero);
  font-weight: 800;
  line-height: var(--hero-line-height);
  letter-spacing: var(--hero-letter-spacing);
}

.hero-home h1 {
  font-size: var(--font-hero);
}

.hero-lead,
.page-hero p {
  max-width: 780px;
  margin: 30px 0 0;
  color: #b7c3d6;
  font-size: clamp(1.08rem, 1.5vw, 1.28rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  margin-top: 42px;
  padding-top: 25px;
  border-top: 1px solid var(--line);
}

.trust-strip span {
  position: relative;
  padding-left: 20px;
  color: #c0cbdb;
  font-size: 0.88rem;
  font-weight: 700;
}

.trust-strip span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.64em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(214, 178, 94, 0.6);
}

.hero-visual {
  position: relative;
  z-index: 2;
}

.capability-orbit::before,
.capability-orbit::after {
  content: "";
  position: absolute;
  inset: -55px;
  border: 1px solid rgba(214, 178, 94, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.capability-orbit::after {
  inset: -100px;
  border-color: rgba(214, 178, 94, 0.07);
}

.requirement-guide-card {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4vw, 45px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      155deg,
      rgba(18, 42, 82, 0.72),
      rgba(8, 19, 37, 0.96)
    );
  box-shadow: var(--shadow);
}

.guide-card-head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.guide-card-head h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  line-height: 1.15;
}

.guide-card-icon,
.verify-mark {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: rgba(214, 178, 94, 0.1);
  color: var(--gold-light);
  font-family: Georgia, serif;
  font-size: 2.2rem;
}

.guide-card-lead {
  margin: 28px 0;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 800;
}

.guide-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-steps li {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.025);
}

.guide-steps li > span {
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 900;
}

.guide-steps strong {
  display: block;
  margin-bottom: 3px;
}

.guide-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.guide-card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 13px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.guide-card-footer strong {
  color: var(--ink);
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 16px rgba(105, 214, 168, 0.65);
}

.page-hero {
  padding: 112px 0 98px;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(214, 178, 94, 0.09),
      transparent 30%
    ),
    rgba(10, 25, 48, 0.25);
}

.page-hero-compact {
  padding-block: 90px 78px;
}

.page-hero h1 {
  font-size: var(--font-hero);
}

.page-hero .button {
  margin-top: 34px;
}

.hero-field-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 34px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.hero-field-summary dt {
  margin: 0 0 6px;
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-field-summary dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .hero-field-summary {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.section {
  padding: clamp(80px, 9vw, 125px) 0;
}

.section-contrast {
  border-block: 1px solid rgba(214, 178, 94, 0.1);
  background: rgba(10, 25, 48, 0.34);
}

.section-light {
  background: var(--paper-soft);
  color: var(--ink-on-light);
}

.section-heading {
  max-width: 850px;
  margin: 0 auto 52px;
  text-align: center;
}

.section-heading-left {
  margin: 0;
  text-align: left;
}

.section-heading h2,
.split-layout h2,
.trust-section h2,
.cta-band h2,
.form-intro h2 {
  margin: 0;
  font-size: var(--font-h2);
  font-weight: 800;
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

.section-heading > p:last-child,
.section-intro {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.section-heading-left > p:last-child {
  margin-left: 0;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-card,
.journey-card,
.value-grid article,
.feature-list-grid article,
.inquiry-grid article {
  position: relative;
  overflow: hidden;
  min-height: 100%;
  padding: 28px;
  border: 1px solid rgba(214, 178, 94, 0.14);
  border-radius: var(--radius-md);
  background: rgba(14, 28, 54, 0.72);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.service-card:hover,
.journey-card:hover,
.value-grid article:hover,
.feature-list-grid article:hover,
.inquiry-grid article:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  background: rgba(18, 42, 82, 0.62);
}

.card-number,
.service-detail > span,
.value-grid article > span,
.feature-list-grid article > span,
.inquiry-grid article > span {
  display: block;
  margin-bottom: 35px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.service-card h3,
.journey-card h3,
.value-grid h3,
.feature-list-grid h3,
.feature-list-grid h2,
.inquiry-grid h2 {
  margin: 0;
  font-size: 1.32rem;
  line-height: 1.24;
}

.service-card p,
.journey-card p,
.value-grid p,
.feature-list-grid p,
.inquiry-grid p {
  color: var(--muted);
}

/* Light surfaces: feature cards must stay light-on-paper, never dark-on-dark.
   .section-light remaps --ink/--muted to dark text; the default navy card
   background then becomes unreadable. Force paper cards on light sections. */
.section-light .feature-list-grid article,
.surface-light .feature-list-grid article,
.section-light .inquiry-grid article,
.surface-light .inquiry-grid article {
  background: var(--paper);
  border: 1px solid rgba(11, 23, 40, 0.1);
  color: var(--ink-on-light);
  box-shadow: 0 10px 28px rgba(11, 23, 40, 0.04);
}
.section-light .feature-list-grid article:hover,
.surface-light .feature-list-grid article:hover,
.section-light .inquiry-grid article:hover,
.surface-light .inquiry-grid article:hover {
  background: var(--paper);
  border-color: rgba(214, 178, 94, 0.45);
  box-shadow: 0 16px 36px rgba(11, 23, 40, 0.08);
}
.section-light .feature-list-grid article h3,
.section-light .feature-list-grid article h2,
.surface-light .feature-list-grid article h3,
.surface-light .feature-list-grid article h2,
.section-light .inquiry-grid article h2,
.surface-light .inquiry-grid article h2 {
  color: var(--ink-on-light);
}
.section-light .feature-list-grid article p,
.surface-light .feature-list-grid article p,
.section-light .inquiry-grid article p,
.surface-light .inquiry-grid article p {
  color: var(--muted-on-light);
}
.section-light .feature-list-grid article > span,
.surface-light .feature-list-grid article > span {
  color: var(--accent-on-light);
}
.section-light .section-actions,
.surface-light .section-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-top: 28px;
}
.section-light .section-actions .q-page-lead,
.surface-light .section-actions .q-page-lead {
  max-width: 40rem;
  margin: 0;
  color: var(--muted-on-light);
}

.service-card ul,
.service-detail ul,
.info-list {
  margin: 22px 0 25px;
  padding: 0;
  list-style: none;
}

.service-card li,
.service-detail li,
.info-list li {
  position: relative;
  margin: 9px 0;
  padding-left: 20px;
  color: #c4cede;
  font-size: 0.91rem;
}

.service-card li::before,
.service-detail li::before,
.info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 1px;
  background: var(--gold);
}

.service-card a,
.journey-card a,
.text-link {
  color: var(--gold-light);
  font-size: 0.9rem;
  font-weight: 900;
}

.service-card a::after,
.journey-card a::after,
.text-link::after {
  content: " →";
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(55px, 9vw, 125px);
  align-items: start;
}

.rich-copy {
  color: #c4cede;
  font-size: 1.08rem;
}

.rich-copy p {
  margin-top: 0;
  margin-bottom: 25px;
}

.process-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  list-style: none;
  background: var(--line);
}

.process-timeline li {
  min-height: 270px;
  padding: 28px;
  background: var(--deep);
}

.process-timeline li > span {
  display: block;
  margin-bottom: 60px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 900;
}

.process-timeline h3 {
  margin: 0 0 12px;
  font-size: 1.28rem;
}

.process-timeline p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.journey-grid,
.value-grid,
.feature-list-grid,
.inquiry-grid {
  display: grid;
  gap: 18px;
}

.journey-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.journey-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
}

.journey-label {
  position: absolute;
  top: 28px;
  left: 28px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journey-card h3 {
  font-size: 1.65rem;
}

.journey-card a {
  margin-top: auto;
  padding-top: 24px;
}

.trust-section {
  border-block: 1px solid rgba(214, 178, 94, 0.12);
  background:
    radial-gradient(
      circle at 80% 30%,
      rgba(214, 178, 94, 0.1),
      transparent 30%
    ),
    var(--navy);
}

.trust-grid,
.verify-layout,
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  gap: clamp(45px, 7vw, 90px);
  align-items: start;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 36px;
}

.check-grid span {
  position: relative;
  padding: 14px 15px 14px 42px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  color: #d4dce9;
  font-size: 0.9rem;
}

.check-grid span::before {
  content: "✓";
  position: absolute;
  left: 15px;
  color: var(--gold);
  font-weight: 900;
}

.status-panel {
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(6, 14, 28, 0.68);
  box-shadow: var(--shadow);
}

.status-panel h2 {
  margin-top: 0;
}

.status-panel > div {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.status-panel strong {
  color: var(--gold-light);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.status-panel span {
  color: var(--muted);
  font-size: 0.9rem;
}

.status-panel .button {
  width: 100%;
  margin-top: 24px;
}

.status-panel-large {
  align-self: stretch;
}

.value-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-list-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inquiry-grid {
  /* Real defect fixed (5 Aug 2026): a rigid `repeat(5, minmax(0,1fr))`
     was shared by both the 4-card "Official contact details" section
     and the 5-card "Choose an inquiry category" section -- the
     4-card section always rendered one narrower-than-intended empty
     column at desktop width, and neither section ever properly
     reflowed to a real 2x2/2-column/1-column progression at narrower
     widths (it only ever had 5 -> 3 -> 1 hardcoded steps). auto-fit
     lets the grid pick however many 200px+ columns genuinely fit --
     4 real cards on a wide row fill it edge-to-edge (empty tracks
     collapse to 0 with auto-fit, unlike auto-fill), and it naturally
     reflows to 2x2, then 2, then 1 column as the viewport shrinks,
     with no fixed per-breakpoint column count to fall out of sync
     with a section's real item count. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.inquiry-grid article {
  /* The shared .service-card/.journey-card/etc rule above sets
     overflow:hidden -- harmless for cards with short fixed labels,
     but a real defect here: combined with the old rigid 5-column
     grid, a long company email address had no room to wrap and was
     silently clipped rather than shown. Content now wraps within its
     own card instead of being hidden. */
  overflow: visible;
  overflow-wrap: anywhere;
  padding: 24px;
}

.inquiry-grid h2 {
  font-size: 1.08rem;
}

.inquiry-grid p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.cta-band {
  padding: 75px 0;
  background: var(--gold);
  color: var(--deep);
}

.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
}

.cta-band .section-kicker {
  color: rgba(6, 14, 28, 0.64);
}

.cta-band h2 {
  max-width: 800px;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.service-detail-list {
  display: grid;
  gap: 20px;
}

.service-detail {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 30px;
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid rgba(214, 178, 94, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(14, 28, 54, 0.58);
  scroll-margin-top: 120px;
}

.service-detail > span {
  margin: 7px 0 0;
}

.service-detail h2 {
  margin: 0 0 18px;
  font-size: var(--font-h2);
  font-weight: 800;
  line-height: var(--h2-line-height);
}

.service-detail p {
  max-width: 850px;
  color: #b9c4d5;
}

.safe-note,
.privacy-card,
.verification-response {
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(214, 178, 94, 0.06);
  color: #cbd4e2;
  font-size: 0.9rem;
}

.premium-form,
.verify-card {
  padding: clamp(25px, 4vw, 42px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(14, 28, 54, 0.78);
  box-shadow: var(--shadow);
}

.form-intro {
  position: sticky;
  top: 120px;
}

.form-field {
  margin-bottom: 20px;
}

.form-field label,
.verify-card label {
  display: block;
  margin-bottom: 8px;
  color: #e9e3d6;
  font-size: 0.9rem;
  font-weight: 800;
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
.verify-card input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgba(154, 168, 191, 0.28);
  border-radius: 11px;
  outline: none;
  background: rgba(6, 14, 28, 0.76);
  color: var(--ink);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.verify-card input::placeholder {
  color: var(--placeholder-on-dark);
  opacity: 1;
}

.form-field textarea {
  min-height: 145px;
  resize: vertical;
}

.form-field input[type="file"] {
  width: 100%;
  padding: 14px;
  border: 1px dashed rgba(214, 178, 94, 0.34);
  border-radius: 11px;
  background: rgba(6, 14, 28, 0.56);
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  accent-color: var(--gold);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.verify-card input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(214, 178, 94, 0.09);
}

.form-field small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.79rem;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--danger);
}

.field-error,
.form-error-summary p,
.form-inline-errors p {
  margin: 7px 0 0;
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 700;
}

.form-error-summary,
.form-inline-errors {
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid rgba(255, 159, 159, 0.34);
  border-radius: 11px;
  background: rgba(255, 159, 159, 0.07);
}

.privacy-card {
  margin-top: 28px;
}

.privacy-card strong {
  color: var(--gold-light);
}

.premium-form > .button {
  width: 100%;
  margin-top: 8px;
}

.compact-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compact-steps li {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(14, 28, 54, 0.55);
}

.compact-steps span {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 900;
}

.compact-steps p {
  margin-bottom: 0;
}

.verify-card {
  text-align: left;
}

.verify-card .verify-mark {
  margin-bottom: 22px;
}

.verify-card h2 {
  margin-top: 0;
}

.verify-card input {
  margin-top: 7px;
}

.verify-card > p:not(.section-kicker) {
  color: var(--muted);
  font-size: 0.88rem;
}

.verify-card .button {
  width: 100%;
  margin-top: 18px;
}

.verification-response {
  margin-top: 18px;
}

.legal-content {
  max-width: 900px;
}

.legal-content article {
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
}

.legal-content article:first-child {
  padding-top: 0;
}

.legal-content h2 {
  margin: 0 0 13px;
  font-size: 1.65rem;
}

.legal-content p {
  color: #bec9d8;
}

.site-footer {
  padding: 75px 0 25px;
  border-top: 1px solid var(--line);
  background: #040a14;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(5, minmax(110px, 1fr));
  gap: 50px;
}

.footer-logo {
  height: 48px;
  margin-bottom: 25px;
}

.footer-brand p {
  max-width: 440px;
  color: var(--muted);
  font-size: 0.88rem;
}

.footer-brand .footer-legal-name {
  color: var(--ink);
  font-weight: 800;
}

.footer-brand .footer-full-form {
  color: #b6c0d0;
  font-size: 0.78rem;
}

.footer-grid section:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-grid h2 {
  margin: 0 0 8px;
  color: var(--gold-light);
  font-size: 0.83rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-grid a {
  color: var(--muted);
  font-size: 0.86rem;
}

.footer-grid a:hover {
  color: var(--ink);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-top: 55px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #78869d;
  font-size: 0.78rem;
}

.guide-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 195px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 17px;
  background: rgba(10, 25, 48, 0.96);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.guide-launcher-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--gold);
  color: var(--deep);
  font-family: Georgia, serif;
  font-size: 1.65rem;
}

.guide-launcher strong,
.guide-launcher small {
  display: block;
  text-align: left;
}

.guide-launcher small {
  color: var(--muted);
  font-size: 0.7rem;
}

.guide-launcher[hidden] {
  display: none;
}

.guide-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1300;
  width: min(calc(100vw - 32px), 410px);
  max-height: min(700px, calc(100vh - 48px));
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: rgba(7, 17, 33, 0.985);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.98);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  overflow-y: auto;
}

.guide-panel[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.guide-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.guide-header h2 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.1;
}

.guide-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--navy);
  color: var(--ink);
  font-size: 1.5rem;
  cursor: pointer;
}

.guide-copy {
  color: var(--muted);
  font-size: 0.9rem;
}

.guide-options {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.guide-options a {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
}

.guide-options a:hover {
  border-color: var(--line-strong);
  background: rgba(214, 178, 94, 0.06);
}

.guide-options span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}

.guide-options strong {
  font-size: 0.9rem;
}

.guide-note {
  margin-bottom: 0;
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reveal-ready {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 500ms ease,
    transform 500ms ease;
}

.reveal-ready.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 1120px) {
  .header-inner {
    grid-template-columns: 210px auto;
  }

  .nav-toggle {
    display: block;
    justify-self: end;
  }

  .site-navigation,
  .header-actions {
    display: none;
  }

  .site-navigation.is-open {
    position: absolute;
    top: 88px;
    left: 24px;
    right: 24px;
    display: grid;
    justify-content: stretch;
    gap: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(6, 14, 28, 0.985);
    box-shadow: var(--shadow);
  }

  .site-navigation.is-open a {
    padding: 14px;
    border-radius: 9px;
  }

  .site-navigation.is-open a:hover {
    background: rgba(214, 178, 94, 0.07);
  }

  .site-navigation a::after {
    display: none;
  }

  .hero-grid,
  .trust-grid,
  .verify-layout,
  .form-layout {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    width: min(100%, 650px);
  }

  .form-intro {
    position: static;
  }

  .service-grid,
  .feature-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 2fr repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .shell {
    width: min(calc(100% - 30px), var(--shell));
  }

  .header-inner {
    min-height: 76px;
    grid-template-columns: 190px auto;
  }

  .brand-logo {
    height: 38px;
  }

  .site-navigation.is-open {
    top: 76px;
    left: 15px;
    right: 15px;
  }

  .hero-home {
    min-height: auto;
    padding: 65px 0;
  }

  .page-hero {
    padding: 75px 0 65px;
  }

  .hero-actions,
  .cta-actions {
    flex-direction: column;
  }

  .hero-actions .button,
  .cta-actions .button {
    width: 100%;
  }

  .capability-orbit::before,
  .capability-orbit::after {
    display: none;
  }

  .requirement-guide-card {
    padding: 23px;
  }

  .section {
    padding: 72px 0;
  }

  .section-heading {
    margin-bottom: 35px;
    text-align: left;
  }

  .section-heading > p:last-child {
    margin-left: 0;
  }

  .service-grid,
  .journey-grid,
  .value-grid,
  .feature-list-grid,
  .compact-steps,
  .check-grid,
  .process-timeline {
    grid-template-columns: 1fr;
  }

  .split-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .service-detail {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 25px;
  }

  .service-detail > span {
    margin-bottom: 20px;
  }

  .journey-card {
    min-height: 290px;
  }

  .cta-band {
    padding: 60px 0;
  }

  .cta-band-inner {
    align-items: stretch;
    flex-direction: column;
  }

  .status-panel > div {
    grid-template-columns: 115px 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 35px 25px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .guide-launcher {
    right: 14px;
    bottom: 14px;
    min-width: auto;
  }

  .guide-launcher > span:last-child {
    display: none;
  }

  .guide-panel {
    right: 14px;
    bottom: 14px;
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
  }
}

@media (max-width: 480px) {
  /* Real defect found live (4 Aug 2026): at this width the collapsed
     circular launcher's box (mark + padding, ~70x66px) sits fixed at
     the exact bottom-right corner where single-column stacked cards
     (e.g. /verify/'s "Seal scan" and "Status meanings" panels) also
     render as the page scrolls, visibly clipping their rounded
     corners. Shrinking the launcher's own padding/mark size reduces
     the overlap footprint without dropping below a 44px touch target. */
  .guide-launcher {
    right: 12px;
    bottom: 12px;
    padding: 8px;
    gap: 0;
  }

  .guide-launcher-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal-ready {
    opacity: 1;
    transform: none;
  }
}

/* QERIONN_PROMPT3R1_TYPE_SCALE_START */

/*
 * Balanced corporate typography:
 * - Home remains prominent without excessive wrapping.
 * - Inner-page headings remain strong but no longer resemble posters.
 */

.hero-home h1 {
  max-width: 760px;
  font-size: var(--font-hero);
  line-height: var(--hero-line-height);
  letter-spacing: var(--hero-letter-spacing);
}

.page-hero {
  padding-block: 82px 72px;
}

.page-hero .narrow-shell {
  width: min(calc(100% - 48px), 1040px);
}

.page-hero h1 {
  max-width: 780px;
  font-size: var(--font-hero);
  line-height: var(--hero-line-height);
  letter-spacing: var(--hero-letter-spacing);
}

.page-hero p {
  max-width: 700px;
  margin-top: 24px;
  font-size: var(--font-body-lead);
  line-height: 1.65;
}

.page-hero-compact {
  padding-block: 72px 64px;
}

@media (max-width: 760px) {
  .page-hero {
    padding-block: 62px 56px;
  }

  .page-hero-compact {
    padding-block: 56px 50px;
  }

  .page-hero .narrow-shell {
    width: min(calc(100% - 30px), 100%);
  }

  .page-hero p {
    margin-top: 19px;
    font-size: 1rem;
  }
}

/* QERIONN_PROMPT3R1_TYPE_SCALE_END */

/* QERIONN_INTERACTIVE_SMART_GUIDE_V1_START */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.guide-chat-panel {
  width: min(calc(100vw - 32px), 455px);
  height: min(720px, calc(100vh - 48px));
  max-height: none;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  overflow: hidden;
}

.guide-chat-panel .guide-header {
  align-items: center;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(
      135deg,
      rgba(214, 178, 94, 0.09),
      rgba(18, 42, 82, 0.18)
    );
}

.guide-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.guide-avatar {
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--gold);
  color: var(--deep);
  font-family: Georgia, serif;
  font-size: 1.7rem;
  box-shadow: 0 8px 24px rgba(214, 178, 94, 0.18);
}

.guide-identity .section-kicker {
  margin-bottom: 3px;
  font-size: 0.61rem;
}

.guide-identity h2 {
  margin: 0;
  font-size: 1.12rem;
}

.guide-online {
  margin: 3px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.67rem;
}

.guide-online > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 10px rgba(105, 214, 168, 0.55);
}

.guide-header-actions {
  display: flex;
  gap: 7px;
}

.guide-icon-button,
.guide-chat-panel .guide-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(6, 14, 28, 0.72);
  color: var(--ink);
  cursor: pointer;
}

.guide-icon-button:hover,
.guide-chat-panel .guide-close:hover {
  border-color: var(--line-strong);
  background: var(--navy-2);
}

.guide-messages {
  min-height: 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 178, 94, 0.35) transparent;
}

.guide-message-row {
  display: flex;
}

.guide-message-row.is-system {
  justify-content: flex-start;
}

.guide-message-row.is-user {
  justify-content: flex-end;
}

.guide-message {
  max-width: 84%;
  padding: 11px 13px;
  border-radius: 15px;
  font-size: 0.86rem;
  line-height: 1.48;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.guide-message-row.is-system .guide-message {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom-left-radius: 5px;
  background: rgba(18, 42, 82, 0.72);
  color: #e2e8f1;
}

.guide-message-row.is-user .guide-message {
  border: 1px solid rgba(214, 178, 94, 0.3);
  border-bottom-right-radius: 5px;
  background: rgba(214, 178, 94, 0.15);
  color: var(--ink);
}

.guide-message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.guide-message small {
  display: block;
  margin-top: 7px;
  color: var(--gold-light);
  font-size: 0.68rem;
  font-weight: 700;
}

.guide-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 54px;
}

.guide-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: qerionn-guide-typing 1.2s infinite ease-in-out;
}

.guide-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.guide-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes qerionn-guide-typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.guide-quick-actions {
  /* Never a shrink candidate: the flex panel used to squeeze this row
     to a ~18px sliver, clipping "Confirm karke submit karein" behind
     the input form (owner, 21 Aug 2026). Messages are the scroller. */
  flex: 0 0 auto;
  max-height: 150px;
  padding: 0 18px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  overflow-y: auto;
}

.guide-action-button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(214, 178, 94, 0.24);
  border-radius: 999px;
  background: rgba(214, 178, 94, 0.06);
  color: #e5dcc5;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.25;
  cursor: pointer;
}

.guide-action-button:hover,
.guide-action-button:focus-visible {
  border-color: var(--gold);
  background: rgba(214, 178, 94, 0.13);
}

.guide-action-button.is-primary {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--deep);
}

.guide-input-form {
  flex: 0 0 auto;
  margin: 0 14px 12px;
  padding: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  border: 1px solid rgba(154, 168, 191, 0.25);
  border-radius: 15px;
  background: rgba(6, 14, 28, 0.88);
}

.guide-input-form:focus-within {
  border-color: rgba(214, 178, 94, 0.55);
  box-shadow: 0 0 0 3px rgba(214, 178, 94, 0.07);
}

.guide-input-form textarea {
  width: 100%;
  min-height: 38px;
  max-height: 120px;
  padding: 8px 9px;
  border: 0;
  outline: 0;
  resize: none;
  overflow-y: auto;
  background: transparent;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.45;
}

.guide-input-form textarea::placeholder {
  color: #718097;
}

.guide-send {
  min-width: 62px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: var(--gold);
  color: var(--deep);
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.guide-send:hover {
  background: var(--gold-light);
}

.guide-send:disabled,
.guide-input-form textarea:disabled {
  cursor: wait;
  opacity: 0.62;
}

.guide-privacy {
  margin: -3px 18px 12px;
  color: #66758c;
  font-size: 0.61rem;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 760px) {
  .guide-chat-panel {
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: none;
    border-radius: 19px;
  }

  .guide-chat-panel .guide-header {
    padding: 14px;
  }

  .guide-avatar {
    width: 40px;
    height: 40px;
  }

  .guide-messages {
    padding: 14px;
  }

  .guide-message {
    max-width: 89%;
    font-size: 0.84rem;
  }

  .guide-quick-actions {
    padding-inline: 14px;
  }

  .guide-input-form {
    margin-inline: 10px;
  }

  .guide-privacy {
    margin-inline: 12px;
  }
}

/* QERIONN_INTERACTIVE_SMART_GUIDE_V1_END */

/* QERIONN_PUBLIC_SITE_V9_POLISH_START */
.site-navigation a {
  position: relative;
}
.site-navigation a.is-active,
.site-navigation a[aria-current="page"] {
  color: var(--gold-light);
}
.site-navigation a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 99px;
  background: var(--gold);
}
.about-hero,
.careers-hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(214,178,94,.14), transparent 34%),
    linear-gradient(135deg, rgba(6,14,28,.98), rgba(13,31,62,.94));
}
.careers-empty-state {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.expertise-card {
  border-top: 2px solid rgba(214,178,94,.55);
}
.guide-launcher {
  box-shadow: 0 20px 55px rgba(0,0,0,.35), 0 0 0 1px rgba(214,178,94,.18);
}
.guide-chat-panel {
  box-shadow: 0 34px 90px rgba(0,0,0,.48), 0 0 0 1px rgba(214,178,94,.16);
}
.guide-chat-panel .guide-header {
  background:
    radial-gradient(circle at 12% 0%, rgba(214,178,94,.16), transparent 42%),
    linear-gradient(135deg, rgba(7,17,35,.98), rgba(16,39,76,.98));
}
.site-footer {
  border-top: 1px solid rgba(214,178,94,.18);
  background:
    radial-gradient(circle at 15% 0%, rgba(214,178,94,.08), transparent 32%),
    #050b16;
}
@media (max-width: 1180px) {
  .header-actions .button-quiet { display: none; }
  .site-navigation { gap: 16px; }
  .site-navigation a { font-size: .82rem; }
}
@media (max-width: 920px) {
  .site-navigation a.is-active::after { display: none; }
}
/* QERIONN_PUBLIC_SITE_V9_POLISH_END */

/* QERIONN_PUBLIC_SITE_V9_6_START */
.header-inner {
  width: min(calc(100% - 32px), 1480px);
  min-height: 82px;
  /* Real bug fixed (5 Aug 2026): this referenced
     var(--header-brand-col-desktop), a custom property never defined
     ANYWHERE in this file (or any other loaded stylesheet). Per CSS,
     a var() with no fallback and no defined property makes the whole
     grid-template-columns declaration invalid, so the browser silently
     fell through to a LATER, unrelated header redesign block further
     down this file (~line 3495) instead -- that block's own middle
     column (minmax(0,1fr), meant to shrink) doesn't cooperate with the
     nav's own flex-shrink:0 items, so at real reduced-desktop widths
     (confirmed live at 1274px via getBoundingClientRect: the nav
     needed 673px but its actual grid column had only 609px) the nav
     overflowed straight into the header-actions (Upload CV / Discuss a
     requirement) column -- a real, measured 50px collision, not a
     hypothetical one. max-content sizes this column to the brand
     logo+badge's own real content width (~344-354px measured live),
     matching the intent the broken variable never got to express. */
  grid-template-columns: max-content minmax(0, 1fr) auto;
  gap: 18px;
}

.brand-logo {
  height: 40px;
}

.site-navigation {
  /* Non-collapsing gap: this later, unconditional rule is the one
     actually in effect at this breakpoint tier (it overrides the
     earlier .site-navigation{gap:...} declaration by source order —
     same specificity, later wins). Floor never shrinks further,
     combined with flex-shrink:0 on every nav item above so a tight
     viewport produces (at worst) a visible horizontal scrollbar, never
     merged/overlapping label text. Slightly reduced from the earlier
     14-18px range (5 Aug 2026) to make room for the explicit
     separator dot below -- real defect fixed: pure whitespace alone,
     even at 18px, still visually read as one continuous string of
     text at normal viewing distance; a real visual mark plus tighter
     whitespace is more legible than whitespace alone, in the same
     total width budget. */
  gap: clamp(10px, 0.85vw, 14px);
}

.site-navigation a {
  font-size: clamp(0.76rem, 0.72vw, 0.86rem);
}

/* Explicit, restrained separator between top-level nav items (real
   defect fix, 5 Aug 2026: "Home Solutions Employers ..." read as one
   continuous line) -- a small centered gold dot, not a heavy pipe.
   Empty `content: ""` generated via ::before is not exposed to the
   accessibility tree, so it is never announced by screen readers and
   never becomes part of the link's accessible name (it isn't text,
   it's a decorative shape) -- no aria-hidden needed on generated
   content. Excluded from the very first item (:not(:first-child))
   and suppressed entirely in the mobile drawer (.is-open) below,
   which uses row spacing instead. */
.site-navigation > a:not(:first-child)::before,
.site-navigation > details:not(:first-child) > summary::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline-end: 9px;
  border-radius: 50%;
  background: rgba(214, 178, 94, 0.5);
  vertical-align: middle;
  transform: translateY(-1px);
}

.site-navigation.is-open > a::before,
.site-navigation.is-open > details > summary::before {
  content: none;
}

.site-navigation.is-open > a:not(:first-child),
.site-navigation.is-open > details:not(:first-child) {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.header-actions {
  align-items: center;
  gap: 8px;
}

.header-actions .button {
  min-height: 42px;
  padding: 9px 13px;
  border-radius: 10px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.mobile-nav-actions {
  display: none;
}

.recent-role-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.recent-role-grid .service-card {
  padding: 24px 21px;
}

.recent-role-grid .service-card h3 {
  font-size: 1.13rem;
}

.recent-role-grid .service-card p {
  font-size: 0.86rem;
  line-height: 1.55;
}

.expertise-card {
  border-top: 2px solid rgba(214, 178, 94, 0.62);
  background:
    linear-gradient(180deg, rgba(214, 178, 94, 0.045), transparent 42%),
    rgba(14, 28, 54, 0.76);
}

.site-footer {
  padding-top: 66px;
}

.footer-grid {
  gap: clamp(28px, 3.2vw, 48px);
}

.guide-launcher {
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
}

/* Real defect fixed (5 Aug 2026): the shell (max-width 1240px) fills
   almost the full viewport at widths between the nav's own 1120px
   hamburger breakpoint and roughly the shell's own max-width plus
   padding -- exactly the range where a 4-column card grid's
   RIGHTMOST card sits closest to the viewport's right edge, the same
   corner this fixed-position widget occupies. Confirmed via a real
   getBoundingClientRect() check on /packages/ at 1152px: the full-size
   widget (with its "QERIONN SERVICE DESK" text) visually covered part
   of the last package card's CTA button text. The existing <=1120px
   compact-icon rule already solves this correctly below 1120px; this
   extends that same compact treatment up through the rest of the real
   collision range instead of leaving a gap where the full-size widget
   returns. */
@media (max-width: 1300px) and (min-width: 761px) {
  /* Real defect found live (5 Aug 2026) on /students/login/: at this
     tier the shell's own right-column card (e.g. the sign-in form)
     can end close enough to the viewport's right edge (measured: only
     ~101px of clear space at 1274px) to overlap the widget by a
     measured amount. Padding/border-radius on .guide-launcher and
     .guide-launcher-mark are deliberately NOT touched here -- found
     live (via getComputedStyle) that guide_restyle_v1.css (loaded
     AFTER this file) sets both with `!important`, so any non-!important
     override here is silently discarded; that real shrink lives in
     guide_restyle_v1.css itself instead (see its own comment for the
     matching part of this fix). This block only ever controls what it
     can actually control: position and the text-label hide.

     Lower bound widened 1121px -> 761px (5 Aug 2026): this tier's
     upper bound (1300px) and the mobile tier's own upper bound
     (max-width:760px, elsewhere in this file) left a genuine
     761-1120px gap where NEITHER rule applied -- the widget rendered
     at full size with its text label fully visible there. Confirmed
     live on /students/cv/ at 1100px: the full "QERIONN Service Desk"
     pill repeatedly overlapped real card paragraph text across the
     whole page on scroll. Widened so text-hide is now continuous from
     0 up to 1300px with no gap. */
  .guide-launcher {
    min-width: auto;
    gap: 0;
    right: 15px;
  }

  .guide-launcher > span:last-child {
    display: none;
  }
}

.guide-launcher strong {
  letter-spacing: -0.01em;
}

.guide-chat-panel .guide-header {
  padding: 17px;
}

@media (max-width: 1260px) {
  /* Real bug fixed (5 Aug 2026): this block's .header-inner/.site-navigation/
     .header-actions rules are dead -- a later, unconditional
     QERIONN_HEADER_FOOTER_ACTUAL_ROOT_FIX block (no media query) resets all
     three back to visible/flex regardless of width, so they were silently
     no-ops here. But .nav-toggle's display:block was NOT overridden by
     anything, so it stayed live -- producing a genuine 1181-1260px dead
     zone where the hamburger button showed AT THE SAME TIME as the full
     nav (both display != none), and the orphaned 4th grid item
     (.nav-toggle) pushed .header-actions onto a phantom wrapped second
     row of the 3-column grid. Moved .nav-toggle's display:block down to
     the max-width:1180px breakpoint below, which is the width where
     .site-navigation actually still hides -- now exactly one collapse
     mechanism is live at any given width. */
  .header-inner {
    grid-template-columns: 190px auto;
  }

  .site-navigation,
  .header-actions {
    display: none;
  }

  .site-navigation.is-open {
    position: absolute;
    top: 82px;
    left: 16px;
    right: 16px;
    display: grid;
    justify-content: stretch;
    gap: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(6, 14, 28, 0.99);
    box-shadow: var(--shadow);
  }

  .site-navigation.is-open > a {
    padding: 13px 14px;
    border-radius: 9px;
    font-size: 0.9rem;
  }

  .site-navigation.is-open > a:hover,
  .site-navigation.is-open > a:focus-visible {
    background: rgba(214, 178, 94, 0.07);
  }

  .site-navigation a::after {
    display: none;
  }

  .site-navigation.is-open .mobile-nav-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-navigation.is-open .mobile-nav-actions .button {
    min-height: 42px;
    padding: 10px 12px;
  }

  .recent-role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .header-inner {
    width: min(calc(100% - 30px), 1480px);
    min-height: 74px;
    grid-template-columns: 174px auto;
  }

  .brand-logo {
    height: 36px;
  }

  .site-navigation.is-open {
    top: 74px;
    left: 15px;
    right: 15px;
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
  }

  .site-navigation.is-open .mobile-nav-actions {
    grid-template-columns: 1fr;
  }

  .recent-role-grid {
    grid-template-columns: 1fr;
  }

  .recent-role-grid .service-card {
    padding: 24px;
  }

  .site-footer {
    padding-top: 56px;
  }

  .guide-launcher {
    right: 12px;
    bottom: 12px;
  }
}
/* QERIONN_PUBLIC_SITE_V9_6_END */


/* QERIONN_SERVICES_CONTEXTUAL_CTA_V1 */
.service-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.service-card-action {
  width: max-content;
  min-width: 190px;
  justify-content: center;
}

.selected-service-card {
  display: grid;
  gap: 6px;
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(214, 178, 94, 0.42);
  border-radius: 14px;
  background: rgba(214, 178, 94, 0.09);
}

.selected-service-card[hidden] {
  display: none;
}

.selected-service-card span {
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.selected-service-card strong {
  color: #ffffff;
  font-size: 1.08rem;
}

.selected-service-card p {
  margin: 0;
  color: #b9c4d5;
  font-size: 0.9rem;
}

@media (max-width: 680px) {
  .service-detail-actions,
  .service-card-action {
    width: 100%;
  }
}

/* QERIONN_INITIAL_LANGUAGE_GATE_V1_CSS_START */
.qerionn-language-gate {
  margin: 0 16px 14px;
  padding: 16px;
  border: 1px solid rgba(187, 147, 65, 0.42);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(6, 14, 28, 0.98), rgba(13, 29, 52, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  color: #f6f1e6;
}

.qerionn-language-gate-head h3,
.qerionn-language-confirmation p {
  margin: 5px 0 0;
}

.qerionn-language-gate-head p {
  margin: 8px 0 0;
  color: rgba(246, 241, 230, 0.76);
  font-size: 0.88rem;
  line-height: 1.5;
}

.qerionn-language-gate-kicker,
.qerionn-language-operator {
  color: #d6b46a;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qerionn-language-category-grid,
.qerionn-language-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.qerionn-language-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qerionn-language-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 250px;
  overflow-y: auto;
  padding-right: 2px;
}

.qerionn-language-category-card,
.qerionn-language-option,
.qerionn-language-primary,
.qerionn-language-secondary,
.qerionn-language-back {
  border: 1px solid rgba(214, 180, 106, 0.38);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.qerionn-language-category-card:hover,
.qerionn-language-option:hover,
.qerionn-language-primary:hover,
.qerionn-language-secondary:hover,
.qerionn-language-back:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 180, 106, 0.85);
  background: rgba(214, 180, 106, 0.12);
}

.qerionn-language-category-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 13px;
  text-align: left;
}

.qerionn-language-category-card strong,
.qerionn-language-category-card small {
  display: block;
}

.qerionn-language-category-card small {
  margin-top: 4px;
  color: rgba(246, 241, 230, 0.66);
  font-size: 0.72rem;
  line-height: 1.35;
}

.qerionn-language-card-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #d6b46a;
  color: #071225;
  font-size: 0.72rem;
  font-weight: 900;
}

.qerionn-language-card-arrow {
  color: #d6b46a;
  font-size: 1.15rem;
}

.qerionn-language-gate-head-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.qerionn-language-back {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.qerionn-language-option {
  min-height: 44px;
  padding: 9px 8px;
  font-size: 0.82rem;
}

.qerionn-language-confirmation p {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
}

.qerionn-language-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.qerionn-language-primary,
.qerionn-language-secondary {
  padding: 10px 13px;
  font-weight: 800;
}

.qerionn-language-primary {
  border-color: #d6b46a;
  background: #d6b46a;
  color: #071225;
}

.qerionn-language-secondary {
  background: transparent;
}

@media (max-width: 560px) {
  .qerionn-language-category-grid {
    grid-template-columns: 1fr;
  }

  .qerionn-language-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* QERIONN_INITIAL_LANGUAGE_GATE_V1_CSS_END */

/* QERIONN_LANGUAGE_GATE_SCROLL_V2_START */
.guide-chat-panel {
  height: min(820px, calc(100dvh - 32px));
}

.guide-profile-gate {
  min-height: 0;
  padding: 14px 16px 12px !important;
  overflow: hidden !important;
}

.guide-profile-gate h3 {
  margin-bottom: 4px !important;
}

.guide-profile-gate > p {
  margin-bottom: 10px !important;
  font-size: 0.82rem !important;
}

.guide-profile-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px !important;
  min-height: 0;
}

.guide-profile-field {
  gap: 4px !important;
  min-width: 0;
}

.guide-profile-field[for="guide-profile-name"],
.guide-profile-field[for="guide-recovery-pin"],
.guide-profile-error,
.guide-profile-submit {
  grid-column: 1 / -1;
}

.guide-profile-field input {
  min-height: 40px;
  padding: 9px 10px !important;
}

.guide-profile-submit {
  min-height: 42px;
  margin-top: 1px;
}

.guide-profile-note {
  margin: 8px 0 0 !important;
  font-size: 0.69rem !important;
  line-height: 1.32 !important;
}

.guide-messages.has-initial-language-gate {
  display: block;
  padding: 16px;
  overflow-y: auto;
}

.guide-messages.has-initial-language-gate .qerionn-language-gate {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.qerionn-language-remembered {
  display: block;
  margin-bottom: 6px;
  color: #9fe7c7;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-height: 760px) {
  .guide-chat-panel {
    height: calc(100dvh - 16px);
  }

  .guide-chat-panel .guide-header {
    padding: 10px 14px 9px;
  }

  .guide-avatar {
    width: 38px;
    height: 38px;
    font-size: 1.42rem;
  }

  .guide-identity h2 {
    font-size: 1rem;
  }

  .guide-slogan {
    margin: 2px 0 0;
    font-size: 0.76rem;
    line-height: 1.25;
  }

  .guide-online {
    display: none;
  }

  .guide-profile-gate {
    padding: 10px 14px 8px !important;
  }

  .guide-profile-gate > p {
    margin-bottom: 7px !important;
    font-size: 0.76rem !important;
  }

  .guide-profile-form {
    gap: 6px 8px !important;
  }

  .guide-profile-field span {
    font-size: 0.72rem !important;
  }

  .guide-profile-field input {
    min-height: 36px;
    padding: 7px 9px !important;
  }

  .guide-profile-submit {
    min-height: 38px;
    padding: 8px 12px !important;
  }

  .guide-profile-note {
    margin-top: 5px !important;
    font-size: 0.64rem !important;
  }
}

@media (max-height: 620px) {
  .guide-profile-gate > p,
  .guide-profile-note {
    display: none;
  }

  .guide-profile-gate {
    padding-top: 8px !important;
  }
}

@media (max-width: 380px) {
  .guide-profile-form {
    gap: 6px !important;
  }

  .guide-profile-field input {
    font-size: 0.82rem;
  }
}
/* QERIONN_LANGUAGE_GATE_SCROLL_V2_END */

/* QERIONN_JOURNEY_NAV_V1_START — breadcrumb, back link and compact journey
   stepper shared by every audience/journey page (not a Kanban board). */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.breadcrumb a {
  color: var(--muted);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--gold-light);
}

.breadcrumb [aria-current="page"] {
  color: var(--gold-light);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
  color: #c6d0df;
  font-size: 0.88rem;
  font-weight: 800;
  transition: color 160ms ease;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--gold-light);
}

.journey-stepper {
  margin: 8px 0 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.journey-stepper ol {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: max-content;
}

.journey-stepper li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px 8px 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.journey-stepper li:not(:last-child)::after {
  content: "";
  width: 26px;
  height: 1px;
  margin-left: 10px;
  background: var(--line-strong);
}

.journey-stepper a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #c6d0df;
  transition: color 160ms ease;
}

.journey-stepper a:hover,
.journey-stepper a:focus-visible {
  color: var(--gold-light);
}

.journey-stepper-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(214, 178, 94, 0.3);
  border-radius: 50%;
  color: #aab7ca;
  font-size: 0.72rem;
}

.journey-stepper li.is-current .journey-stepper-index {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--deep);
}

.journey-stepper li.is-current .journey-stepper-label {
  color: var(--ink);
}

.journey-stepper li.is-static {
  color: #6b7688;
  font-style: italic;
  font-weight: 700;
}

.journey-stepper li.is-static .journey-stepper-index {
  border-style: dashed;
}

@media (max-width: 640px) {
  .journey-stepper {
    margin-bottom: 34px;
  }

  .journey-stepper li {
    padding-right: 14px;
  }

  .journey-stepper li:not(:last-child)::after {
    width: 16px;
  }
}
/* QERIONN_JOURNEY_NAV_V1_END */

/* QERIONN_PRODUCT_SHOT_V1_START
   Reusable frame for real interface screenshots (never stock photography
   or fabricated mockups). Built for a fixed-ratio crop today; when a
   people-photography layer is added later, the same .product-shot markup
   accepts a photographic <img> without any template change. */
.product-shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 8px;
}

.product-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow);
}

.product-shot-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--navy);
}

.product-shot-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.product-shot figcaption {
  padding: 14px 18px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.product-shot figcaption strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 0.92rem;
}

@media (max-width: 640px) {
  .product-shot-grid {
    grid-template-columns: 1fr;
  }
}
/* QERIONN_PRODUCT_SHOT_V1_END */

/* QERIONN_HOW_WE_WORK_PROCESS_V1_START */
.how-we-work-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-we-work-process::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 178, 94, 0.55), transparent);
}

.how-we-work-process li {
  position: relative;
  z-index: 2;
  text-align: center;
}

.how-we-work-process li > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  font-weight: 900;
  box-shadow: var(--shadow);
}

.how-we-work-process h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 1.05rem;
}

.how-we-work-process p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.institution-onboarding-steps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .institution-onboarding-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 22px;
  }

  .institution-onboarding-steps::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .how-we-work-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 22px;
  }

  .how-we-work-process::before {
    display: none;
  }
}

@media (max-width: 540px) {
  .how-we-work-process {
    grid-template-columns: 1fr;
  }

  .how-we-work-process li {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 14px;
    text-align: left;
  }

  .how-we-work-process li > span {
    width: 44px;
    height: 44px;
    margin: 0;
  }
}
/* QERIONN_HOW_WE_WORK_PROCESS_V1_END */

/* QERIONN_PUBLIC_NAV_DROPDOWN_V2_START — shared panel chrome for every
   header dropdown (Solutions mega menu, Students & Candidates,
   Institutions, Company). Root cause of the V1 column-overlap bug:
   `.site-navigation a { white-space: nowrap }` (near the top of this
   file) leaked into every nested dropdown/mega-menu link, so labels
   could not wrap inside their grid column and painted over the next
   column. Every row selector below sets `white-space: normal` to stop
   that leak, and panel widths use `calc(100vw - 32px)` (not vw
   percentages) so a panel can never exceed the viewport at any size. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > summary {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  position: relative;
  color: #c8d1df;
  font-size: clamp(0.76rem, 0.72vw, 0.86rem);
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  opacity: 0.75;
}

.nav-dropdown[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.nav-dropdown > summary:hover,
.nav-dropdown > summary:focus-visible {
  color: var(--ink);
}

.nav-dropdown > summary.is-active {
  color: var(--gold-light);
}

.nav-dropdown-panel,
.nav-split-panel {
  display: grid;
  gap: 2px;
  padding: 10px;
}

.nav-dropdown-panel a,
.nav-split-panel-group a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--ink);
  text-decoration: none;
  white-space: normal;
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible,
.nav-split-panel-group a:hover,
.nav-split-panel-group a:focus-visible {
  background: rgba(214, 178, 94, 0.09);
  outline: none;
}

.nav-dropdown-item-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(214, 178, 94, 0.08);
  color: var(--gold-light);
}

.nav-dropdown-item-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-dropdown-item-label {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
}

.nav-dropdown-all {
  display: block;
  margin-top: 4px;
  padding-top: 12px !important;
  border-top: 1px solid var(--line);
  color: var(--gold-light) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  text-align: center;
}

@media (min-width: 1261px) {
  .nav-dropdown-panel,
  .nav-split-panel {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    min-width: 260px;
    width: max-content;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(8, 18, 36, 0.98);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity 140ms ease;
    z-index: 40;
  }

  .nav-dropdown-panel {
    width: min(320px, calc(100vw - 32px));
  }

  .nav-dropdown-panel-wide {
    width: min(520px, calc(100vw - 32px));
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 12px;
    overflow: hidden;
  }

  .nav-dropdown-panel-wide > a {
    min-width: 0;
  }

  /* Company sits closer to the right edge of the header than Solutions,
     so its panel anchors to the trigger's right edge instead of its
     left edge — a left-anchored 320px panel there would run past the
     viewport on narrower desktop widths. */
  .nav-dropdown-panel-end {
    left: auto;
    right: 0;
  }

  .nav-dropdown[open] > .nav-dropdown-panel,
  .nav-split[open] > .nav-split-panel {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 1260px) {
  .site-navigation.is-open .nav-dropdown {
    border-radius: 9px;
  }

  .site-navigation.is-open .nav-dropdown > summary {
    padding: 13px 14px;
    border-radius: 9px;
    color: #c8d1df;
    font-size: 0.9rem;
  }

  .site-navigation.is-open .nav-dropdown > summary:hover,
  .site-navigation.is-open .nav-dropdown > summary:focus-visible {
    background: rgba(214, 178, 94, 0.07);
  }

  .site-navigation.is-open .nav-dropdown-panel,
  .site-navigation.is-open .nav-split-panel {
    padding: 2px 6px 10px 22px;
  }

  .site-navigation.is-open .nav-dropdown-panel-wide {
    grid-template-columns: 1fr;
  }
}
/* QERIONN_PUBLIC_NAV_DROPDOWN_V2_END */

/* QERIONN_NAV_SPLIT_MENU_V1_START — premium compact split-panel menu
   for Solutions: a left category rail (Technology / Talent /
   Employability / Trust & Operations) and a right content panel that
   shows only the selected category's links (site.js handles the
   hover/click/keyboard category switching; this file only styles the
   two states). Deliberately much smaller than a 4-column mega menu so
   it stays compact and doesn't cover the hero. */
.nav-split-body {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.nav-split-rail {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  width: 152px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}

.nav-split-rail-item {
  padding: 10px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 8px;
  background: none;
  color: #c8d1df;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.nav-split-rail-item:hover,
.nav-split-rail-item:focus-visible {
  color: var(--ink);
  background: rgba(214, 178, 94, 0.07);
  outline: none;
}

.nav-split-rail-item.is-active {
  border-left-color: var(--gold-light);
  background: rgba(214, 178, 94, 0.1);
  color: var(--gold-light);
}

.nav-split-rail-item::after {
  float: right;
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0;
  transform: rotate(-45deg);
}

.nav-split-content {
  flex: 1 1 auto;
  min-width: 230px;
  min-height: 192px;
  padding-left: 6px;
}

.nav-split-panel-group {
  display: none;
  flex-direction: column;
  gap: 2px;
}

.nav-split-panel-group.is-active {
  display: flex;
}

.nav-split-all {
  margin-top: 10px;
}

@media (min-width: 1261px) {
  .nav-split-panel {
    width: min(420px, calc(100vw - 32px));
    padding: 18px;
  }
}

@media (max-width: 1260px) {
  /* Mobile/tablet accordion: the rail becomes a full-width stack of
     section headers (each with an expand chevron) sitting directly
     above the active section's links — an accordion, not a squeezed
     copy of the desktop two-column split panel. */
  .site-navigation.is-open .nav-split-body {
    flex-direction: column;
    gap: 0;
  }

  .site-navigation.is-open .nav-split-rail {
    flex-direction: column;
    width: auto;
    padding-right: 0;
    border-right: none;
  }

  .site-navigation.is-open .nav-split-rail-item {
    min-height: 44px;
    border-left: none;
    border-radius: 9px;
  }

  .site-navigation.is-open .nav-split-rail-item.is-active {
    border-left-color: transparent;
  }

  .site-navigation.is-open .nav-split-rail-item::after {
    opacity: 0.75;
    transition: transform 160ms ease;
  }

  .site-navigation.is-open .nav-split-rail-item.is-active::after {
    transform: rotate(135deg);
    margin-top: 0;
  }

  .site-navigation.is-open .nav-split-content {
    min-height: 0;
    padding-left: 12px;
  }

  .site-navigation.is-open .nav-split-panel-group.is-active {
    padding: 6px 0 12px;
    border-bottom: 1px solid var(--line);
  }
}



/* QERIONN_NAV_SPLIT_MENU_V1_END */

/* QERIONN_HEADER_FOOTER_ACTUAL_ROOT_FIX_START */
:root {
  --q-header-logo-width: 186px;
  --q-header-udyam-width: 124px;
  --q-footer-logo-width: 182px;
  --q-footer-udyam-width: 212px;
}

.header-inner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 28px;
  min-height: 94px;
}

.brand-cluster {
  display: grid;
  grid-template-columns:
    var(--q-header-logo-width)
    var(--q-header-udyam-width);
  align-items: center;
  gap: 18px;
  width: max-content;
  min-width: 0;
}

.brand,
.brand-qerionn {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: var(--q-header-logo-width);
  height: auto;
  max-width: none;
}

.brand-badge {
  display: block;
  width: var(--q-header-udyam-width);
  height: auto;
  max-width: none;
  margin: 0;
  object-fit: contain;
}

.site-navigation {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, .9vw, 16px);
  white-space: nowrap;
}

.site-navigation > a,
.site-navigation > details > summary {
  white-space: nowrap;
}

/* Dropdown rows must wrap — nowrap on all `.site-navigation a`
   leaked into panel links and pushed long labels
   (Create account without resume) past the panel edge. */
.site-navigation .nav-dropdown-panel a,
.site-navigation .nav-split-panel-group a {
  white-space: normal;
  min-width: 0;
  max-width: 100%;
  align-items: flex-start;
}

.site-navigation .nav-dropdown-item-label {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 0;
  flex: 1 1 auto;
}

.site-navigation .nav-dropdown-panel-wide {
  overflow: hidden;
}

.site-navigation .nav-dropdown-panel-wide > a {
  min-width: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  isolation: isolate;
}

.header-actions .button,
.header-actions a,
.header-actions button {
  flex: 0 0 auto;
}

.header-actions .header-profile-chip {
  flex: 1 1 auto;
  min-width: 0;
}

.header-signout-form {
  margin: 0;
  display: flex;
  flex: 0 0 auto;
}

.header-signed-in-as {
  color: var(--muted, #667085);
  font-size: 0.85rem;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-split-panel {
  width: min(760px, 92vw);
  max-width: 92vw;
  overflow: hidden;
}

.nav-split-body {
  grid-template-columns: minmax(160px, .8fr) minmax(280px, 1.6fr);
  min-width: 0;
}

.nav-split-rail,
.nav-split-content,
.nav-split-panel-group {
  min-width: 0;
}

.nav-split-panel-group a,
.nav-split-all {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nav-split-all {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.footer-brand-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 6px;
}

.footer-brand-identity .footer-logo {
  display: block;
  width: var(--q-footer-logo-width);
  height: auto;
  margin: 0;
}

.footer-badge {
  display: block;
  width: var(--q-footer-udyam-width);
  height: auto;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
}

.footer-brand-identity + .footer-legal-name {
  margin-top: 0;
}

.footer-brand .footer-legal-name {
  margin-bottom: 8px;
}

.footer-brand .footer-full-form {
  margin-top: 0;
}

@media (max-width: 1480px) {
  :root {
    --q-header-logo-width: 172px;
    --q-header-udyam-width: 114px;
  }

  .header-inner {
    column-gap: 20px;
  }

  .brand-cluster {
    gap: 14px;
  }

  .site-navigation {
    gap: 9px;
  }
}

@media (max-width: 1320px) {
  :root {
    --q-header-logo-width: 158px;
    --q-header-udyam-width: 102px;
  }

  .site-navigation a,
  .site-navigation summary {
    font-size: .8rem;
  }

  .header-actions {
    gap: 8px;
  }
}

@media (max-width: 1180px) {
  .header-inner {
    grid-template-columns: max-content max-content;
  }

  .site-navigation {
    display: none;
  }

  /* Real bug fixed (5 Aug 2026): .nav-toggle's display:block belongs here,
     not at the old max-width:1260px tier -- see that block's comment for
     the full root cause (a 1181-1260px dead zone where hamburger + full
     nav both showed at once). This is the width where .site-navigation
     genuinely hides, so the toggle now appears exactly when it has
     something real to toggle, never before. */
  .nav-toggle {
    display: block;
    justify-self: end;
  }
}

@media (max-width: 760px) {
  :root {
    --q-header-logo-width: 132px;
    --q-header-udyam-width: 84px;
    --q-footer-logo-width: 158px;
    --q-footer-udyam-width: 184px;
  }

  .header-inner {
    min-height: 84px;
    column-gap: 10px;
  }

  .brand-cluster {
    gap: 10px;
  }
}
/* QERIONN_HEADER_FOOTER_ACTUAL_ROOT_FIX_END */

/* QERIONN HEADER WIDTH OVERLAP FINAL START */
@media (min-width: 1181px) {
  .header-inner.shell {
    width: min(calc(100% - 24px), 1600px) !important;
    max-width: 1600px !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    column-gap: 28px !important;
    align-items: center !important;
  }

  .brand-cluster {
    width: max-content !important;
    min-width: max-content !important;
    display: grid !important;
    grid-template-columns: 186px 124px !important;
    align-items: center !important;
    gap: 22px !important;
  }

  .brand-logo {
    width: 186px !important;
    max-width: none !important;
    height: auto !important;
  }

  .brand-badge {
    width: 124px !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
  }

  .site-navigation {
    min-width: 0 !important;
    justify-content: center !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .site-navigation > a,
  .site-navigation > details,
  .site-navigation summary {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .header-actions {
    min-width: max-content !important;
    flex: 0 0 auto !important;
    gap: 10px !important;
    margin-left: 0 !important;
  }

  .header-actions .button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .header-inner.shell {
    width: min(calc(100% - 20px), 1428px) !important;
    column-gap: 18px !important;
  }

  .brand-cluster {
    grid-template-columns: 166px 108px !important;
    gap: 16px !important;
  }

  .brand-logo {
    width: 166px !important;
  }

  .brand-badge {
    width: 108px !important;
  }

  .site-navigation {
    gap: 8px !important;
  }

  .site-navigation a,
  .site-navigation summary {
    font-size: 0.8rem !important;
  }

  .header-actions {
    gap: 8px !important;
  }

  .header-actions .button {
    padding-inline: 10px !important;
  }
}
/* QERIONN HEADER WIDTH OVERLAP FINAL END */

/* QERIONN HEADER LEFT BRAND FINAL START */
@media (min-width: 1181px) {
  .header-inner.shell {
    width: min(calc(100% - 24px), 1640px) !important;
    max-width: 1640px !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    column-gap: 40px !important;
    align-items: start !important;
  }

  .brand-cluster {
    width: max-content !important;
    min-width: max-content !important;
    display: grid !important;
    grid-template-columns: 190px 138px !important;
    align-items: start !important;
    column-gap: 28px !important;
    row-gap: 0 !important;
    margin-right: 10px !important;
    padding-top: 2px !important;
  }

  .brand-block,
  .brand-badge-link {
    align-self: start !important;
  }

  .brand-logo {
    width: 190px !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
  }

  .brand-badge {
    width: 138px !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
    margin-top: 4px !important;
  }

  .brand-tagline,
  .brand-block .brand-tagline,
  .brand-copy,
  .brand-block p {
    display: block !important;
    margin-top: 4px !important;
    line-height: 1.2 !important;
  }

  .site-navigation {
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    padding-top: 10px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .site-navigation > a,
  .site-navigation > details,
  .site-navigation summary {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .header-actions {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 8px !important;
  }

  .header-actions .button {
    white-space: nowrap !important;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .header-inner.shell {
    width: min(calc(100% - 20px), 1450px) !important;
    column-gap: 28px !important;
  }

  .brand-cluster {
    grid-template-columns: 176px 126px !important;
    column-gap: 22px !important;
    margin-right: 8px !important;
  }

  .brand-logo {
    width: 176px !important;
  }

  .brand-badge {
    width: 126px !important;
  }

  .site-navigation {
    gap: 10px !important;
  }

  .site-navigation a,
  .site-navigation summary {
    font-size: 0.81rem !important;
  }

  .header-actions .button {
    padding-inline: 10px !important;
  }
}
/* QERIONN HEADER LEFT BRAND FINAL END */

/* QERIONN BRAND TAGLINE ALIGNMENT FINAL START */
@media (min-width: 1181px) {
  .brand-cluster .brand-tagline,
  .brand-cluster .brand-copy,
  .brand-cluster .brand-full-form,
  .brand-cluster .brand-legal-name,
  .brand-cluster > p {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    width: 190px !important;
    max-width: 190px !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
  }

  .brand-cluster {
    align-items: start !important;
  }

  .brand-badge {
    align-self: start !important;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .brand-cluster .brand-tagline,
  .brand-cluster .brand-copy,
  .brand-cluster .brand-full-form,
  .brand-cluster .brand-legal-name,
  .brand-cluster > p {
    width: 176px !important;
    max-width: 176px !important;
  }
}
/* QERIONN BRAND TAGLINE ALIGNMENT FINAL END */

/* QERIONN_HEADER_ALIGNMENT_ENCODING_FINAL_START */
@media (min-width: 1181px) {
  .header-inner.shell {
    width: min(calc(100% - 24px), 1640px) !important;
    max-width: 1640px !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    column-gap: 38px !important;
    align-items: center !important;
  }

  .brand-cluster {
    display: grid !important;
    grid-template-columns: 190px 136px !important;
    align-items: start !important;
    gap: 24px !important;
    width: max-content !important;
    min-width: max-content !important;
    margin-right: 18px !important;
  }

  .brand-logo {
    display: block !important;
    width: 190px !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .brand-badge {
    display: block !important;
    width: 136px !important;
    height: auto !important;
    max-width: none !important;
    margin: 4px 0 0 !important;
  }

  .site-navigation {
    justify-content: flex-start !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .header-actions {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    gap: 10px !important;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .header-inner.shell {
    column-gap: 28px !important;
  }

  .brand-cluster {
    grid-template-columns: 174px 122px !important;
    gap: 20px !important;
    margin-right: 14px !important;
  }

  .brand-logo {
    width: 174px !important;
  }

  .brand-badge {
    width: 122px !important;
  }

  .site-navigation {
    gap: 9px !important;
  }
}
/* QERIONN_HEADER_ALIGNMENT_ENCODING_FINAL_END */

/* QERIONN_HEADER_BRAND_DROPDOWN_FINAL_START */
@media (min-width: 1181px) {
  .header-inner.shell {
    width: min(calc(100% - 24px), 1640px) !important;
    max-width: 1640px !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    column-gap: 42px !important;
    align-items: center !important;
  }

  .brand-cluster {
    width: max-content !important;
    min-width: max-content !important;
    display: grid !important;
    grid-template-columns: 190px 132px !important;
    align-items: center !important;
    column-gap: 24px !important;
    margin-right: 10px !important;
  }

  .header-brand-stack {
    width: 190px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  .brand-logo {
    display: block !important;
    width: 190px !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .header-brand-legal-name,
  .header-brand-full-form {
    display: block !important;
    width: 190px !important;
    max-width: 190px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .header-brand-legal-name {
    color: var(--ink, #f5f1e7) !important;
    font-size: 0.67rem !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
  }

  .header-brand-full-form {
    color: var(--gold-light, #e6c76a) !important;
    font-size: 0.47rem !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
  }

  .brand-badge {
    width: 132px !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .site-navigation {
    justify-content: flex-start !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .nav-split-panel {
    width: 560px !important;
    max-width: min(560px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .nav-split-body {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr) !important;
    min-width: 0 !important;
  }

  .nav-split-rail,
  .nav-split-content,
  .nav-split-panel-group {
    min-width: 0 !important;
  }

  .nav-split-panel-group a {
    min-width: 0 !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
  }

  .nav-split-all {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-inline: 16px !important;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .header-inner.shell {
    column-gap: 30px !important;
  }

  .brand-cluster {
    grid-template-columns: 176px 120px !important;
    column-gap: 20px !important;
  }

  .header-brand-stack,
  .header-brand-legal-name,
  .header-brand-full-form {
    width: 176px !important;
    max-width: 176px !important;
  }

  .brand-logo {
    width: 176px !important;
  }

  .brand-badge {
    width: 120px !important;
  }

  .site-navigation {
    gap: 9px !important;
  }

  .nav-split-panel {
    width: 530px !important;
    max-width: min(530px, calc(100vw - 24px)) !important;
  }
}
/* QERIONN_HEADER_BRAND_DROPDOWN_FINAL_END */

/* QERIONN_HEADER_NAV_ACCOUNT_OVERFLOW_FIX_START (4 Aug 2026)
   Real, site-wide collision found live: above the hamburger breakpoint
   (max-width:1260px, where nav+account correctly collapse into the
   drawer) the full 8-item nav's un-shrinkable items (flex-shrink:0,
   white-space:nowrap) overflow their own grid track -- the track itself
   shrinks via minmax(0,1fr), but the items don't, and the track has
   overflow:visible, so they visually paint past the track boundary into
   the account-actions column. Confirmed via real element-position
   measurement (not just the boxes' own rects, which don't overlap --
   the actual rendered item edges do) from just above 1260px up through
   at least 1736px real width, i.e. most realistic laptop/desktop
   browser-window widths, not a narrow-viewport edge case.

   Fix follows the header's own stated responsive priority (secondary
   contact details are lower priority than primary navigation, which is
   lower priority than the account menu itself -- see the account-menu
   item staying visible here while only the marketing contact block
   drops): the public company email/phone block is real estate this
   candidate/visitor already has no active need for while nav is
   competing for the same row, so it drops first, and the account
   email display shrinks further -- freeing enough width that nav's
   own (already-shrinking-via-clamp) content fits without visually
   overflowing into the account column. Originally applied above the
   1260px hamburger threshold so nothing below it changed (that tier
   was already verified correct: nav+account correctly collapse into
   the drawer, and Sign out is genuinely reachable there). The upper
   bound (1900px) is deliberately generous rather than tightly tuned to
   an exact measured pixel, precisely so this isn't a fragile one-width
   patch -- see the file's own repeated history of narrowly-tuned
   breakpoints (1120/1180/1260/1261/1320/1450/1480) fighting each other.

   Lower bound widened 1261px -> 1181px (5 Aug 2026): fixing the
   nav-toggle/full-nav dead zone (see that fix's own comment above)
   moved the real hamburger threshold down to max-width:1180px, so nav
   is now genuinely visible (not hidden behind a hamburger) all the way
   down to 1181px -- exposing this exact same overflow-into-account-
   column bug in the 1181-1260px range too, previously masked only
   because the dead-zone bug's orphaned hamburger happened to coexist
   there. Confirmed live on /students/register/ at 1186px: "Upload CV"
   visually overlapped "Company" before this widening. */
@media (min-width: 1181px) and (max-width: 1900px) {
  /* .header-actions qualifier is deliberate, not decorative: a later,
     unconditional, unqualified ".header-public-contact { display: grid }"
     rule lives in an inline <style> block in base_public.html (placed
     after this stylesheet's <link> in the document, so it wins any
     same-specificity tie regardless of this media query's source
     order). A bare ".header-public-contact-desktop{display:none}" here
     was silently losing to it -- found live by enumerating
     document.styleSheets rather than assuming source order alone
     determines the cascade. Qualifying with the real parent raises
     this rule to two-class specificity, which always wins regardless
     of where either rule sits in the document. */
  .header-actions .header-public-contact-desktop {
    display: none;
  }

  /* Real defect found live (5 Aug 2026) on /students/login/ (an
     UNAUTHENTICATED page): this fix's own scope only ever addressed
     the authenticated header's overflow (hiding the public contact
     block, shrinking header-signed-in-as) -- the unauthenticated
     variant's two-button .header-actions (Upload CV + Discuss a
     requirement) was never covered, and the nav overflowed into it by
     a measured 50px at 1274px. Same stated priority order this fix
     already established (secondary action drops before the primary
     nav/CTA does): "Upload CV" is the lower-priority secondary action
     next to the gold "Discuss a requirement" CTA, so it drops first,
     exactly mirroring how the public contact block drops before
     header-signed-in-as does for a signed-in visitor. Scoped to
     :first-child so this can never accidentally hit the authenticated
     branch's first child (a <span>, not this <a>). */
  .header-actions > a.button-quiet:first-child {
    display: none;
  }
}

/* Real defect found live (5 Aug 2026) on /packages/ at 1920px, signed in:
   the nav's last item ("Company", right edge 1316.4px) overlapped
   .header-actions (starting 1312.2px) by a measured 4.2px. Root cause:
   the account-overflow fix above is bounded `max-width: 1900px`, so at
   1920px it stopped applying and .header-signed-in-as reverted from its
   trimmed 110px to its natural 180px (a full email address), pushing the
   whole actions cluster ~70px left, straight into the nav.

   That upper bound was chosen on the assumption that there is simply
   more room above 1900px -- true for the nav, but not for an actions
   cluster whose width is driven by however long the signed-in user's
   email happens to be. Truncating a long email is desirable at EVERY
   desktop width, not only below an arbitrary ceiling, so the cap is
   lifted out of the bounded block and applied unconditionally from
   1181px up. The public-contact-block hide deliberately stays bounded:
   that one is a real content trade-off worth reversing when there
   genuinely is room, whereas a 180px email never earns its space. */
@media (min-width: 1181px) {
  .header-signed-in-as {
    max-width: 110px;
  }
}

/* Real defect found live (5 Aug 2026) on /packages/ at 1186px while
   SIGNED IN: the nav's last item ("Company") overlapped .header-actions
   by a measured 78.2px. The earlier 1186px work fixed only the
   UNAUTHENTICATED header (dropping "Upload CV", shortening the CTA);
   the authenticated variant carries a different actions cluster
   (signed-in email + Sign out) and was never covered.

   Measured cause: at this width the nav's own box ends at 959.2px but
   its items -- deliberately flex-shrink:0 / nowrap so labels never wrap
   or merge -- paint out to 1049.3px, ~90px past their own grid track,
   while .header-actions starts at 971.2px. The email was already capped
   at 110px by the rule above, and the remaining actions total only
   187.5px, so there is nothing further to reclaim on that side: the nav
   genuinely needs more room than the track can give it here.

   Fix follows this file's own established priority order (informational
   content yields before functional controls, exactly as the public
   contact block yields before header-signed-in-as): hide the email
   entirely in this narrow band and keep "Sign out", which is the actual
   control. That frees ~120px against the 78.2px deficit. The user's
   identity remains available one click away in the portal; a truncated
   "qa.student@sandbox.qer" was never doing much work anyway.

   Bounded to 1260px because the nav collapses to the hamburger at
   1180px and below, and 1280px measured clean with the email shown. */
/* Real defect found live (5 Aug 2026) on /students/register/ at 1186px,
   even AFTER hiding "Upload CV" above: the full nav's last item
   ("Company") still visually overlapped the gold "Discuss a
   requirement" CTA by a measured 48px -- confirmed the button was
   already at its minimum practical padding/font-size (the existing
   QERIONN HEADER WIDTH OVERLAP FINAL rules below already apply
   padding-inline:10px in this range), so there was no more slack to
   reclaim from the button alone without also touching the nav. Rather
   than shrink the nav's own readability further, swap the CTA to a
   shorter label in exactly this tight sub-range -- the two <span>s are
   in the template (base_public.html), this just toggles which one
   renders. 1260px, not 1900px, because measurement at 1286px+ showed
   the same button already has enough real clearance there (52px gap)
   once nav settles at its wider natural width -- this is a narrow,
   specifically-measured squeeze, not the whole 1181-1900px tier. */
.header-discuss-requirement-cta .cta-text-short {
  display: none;
}

@media (min-width: 1181px) and (max-width: 1260px) {
  .header-discuss-requirement-cta .cta-text-full {
    display: none;
  }

  .header-discuss-requirement-cta .cta-text-short {
    display: inline;
  }

  /* Authenticated counterpart of the same squeeze, found live on
     /packages/ at 1186px while SIGNED IN: the nav's last item
     ("Company") overlapped .header-actions by a measured 78.2px. The
     work above fixed only the unauthenticated header; the
     authenticated variant carries a different actions cluster
     (signed-in email + Sign out) and was never covered.

     Measured: the nav's own box ended at 959.2px while its items
     (deliberately flex-shrink:0/nowrap so labels never wrap or merge)
     painted out to 1049.3px -- ~90px past their own grid track -- with
     .header-actions starting at 971.2px. The email was already capped
     at 110px and the whole cluster was only 187.5px, so nothing further
     could be reclaimed from that side; the nav simply needs more room
     than the track can give here.

     Same priority order this file already follows (informational
     content yields before functional controls, as the public contact
     block yields before header-signed-in-as): drop the email, keep
     "Sign out", which is the actual control. Frees ~120px against a
     78.2px deficit. Kept inside this existing band rather than adding a
     second identical media query. */
  .header-signed-in-as {
    display: none;
  }
}

/* Real defect found live (14 Aug 2026) on
   sandbox-webmail /accounts/profile/my/: the last public-nav item
   ("Verify") painted over the identity chip's truncated email. Nav
   items are flex-shrink:0 / position:relative, so they stack on top
   of in-flow header-actions. Help and Verify remain in the footer;
   when the identity chip is present they yield in the desktop strip
   (still available in the open mobile drawer). */
body:has(.header-profile-chip) .site-navigation:not(.is-open) > a.nav-utility {
  display: none;
}

/* Webmail host (owner, 14 Aug 2026): /accounts/profile/my/ uses this
   public header without communication_hub/webmail.css. Marketing nav
   including "Verify" still rendered and sat on the identity chip.
   Same slim chrome the mailbox already applies via .wm-shell. */
body.wm-shell .site-header nav,
body.wm-shell .site-header .nav-toggle,
body.wm-shell .site-header .header-public-contact {
  display: none;
}
/* QERIONN_HEADER_NAV_ACCOUNT_OVERFLOW_FIX_END */