/* ==========================================================================
   home-test-3.css — third standalone home page design concept
   (home-test-3.php). Namespaced entirely under .ht3-* so it cannot collide
   with home.css (.th-*), home-test.css (.ht-*) or home-test-2.css (.ht2-*).

   Design language: modeled on genpact.com's visual identity (researched
   directly from the live site) — a uniformly dark, near-black page (not
   alternating light/dark sections like the first two concept pages), one
   warm off-white text color, one coral-red accent used sparingly for every
   CTA/link, large bold headlines, pill-shaped buttons, and borderless
   whitespace-separated content rather than heavy card chrome everywhere.

   Heading sizes: picked a natural scale first, then reduced every one by
   2px per explicit instruction — see the literal "-2px" comment on each
   heading rule below so the adjustment stays auditable.
   ========================================================================== */

.ht3-page {
  --ht3-bg: #161916;
  --ht3-ink: #fffaf4;
  --ht3-ink-dim: #c9c6bf;
  --ht3-ink-soft: #9a978f;
  --ht3-accent: #ff4f59;
  --ht3-accent-soft: rgba(255, 79, 89, 0.12);
  --ht3-border: rgba(255, 250, 244, 0.14);
  --ht3-card-bg: #1e221e;
  /* Per-page heading color switch: defaults to white/cream; add
     .ht3-headings-red alongside .ht3-page on a page's <main> to make
     every h1-h4 on that page use the coral accent instead. All heading
     rules below read this variable rather than a hardcoded color, so a
     page's heading color is controlled from here, not per-rule. */
  --ht3-heading-color: var(--ht3-ink);
  font-family: 'Inter', sans-serif;
  color: var(--ht3-ink);
  background: var(--ht3-bg);
  overflow-x: hidden;
}
.ht3-page.ht3-headings-red { --ht3-heading-color: var(--ht3-accent); }
.ht3-page * { box-sizing: border-box; }

/* 1320px — matches genpact's own measured content width (same source as
   the hero banner's size, see below) — widened from 1200px since the
   page read as too narrow/centered at the old width. */
.ht3-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

.ht3-section {
  padding: 76px 0;
}

/* Type scale increased throughout this page ("increase the font size of
   entire page to align with the width... content is still limited to
   center") — the container was widened earlier but text sizes weren't,
   so the page still read as small/centered relative to the new canvas.
   Roughly +12-18% across the board; see individual rules below. */
.ht3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ht3-accent);
  margin-bottom: 16px;
}

.ht3-head { max-width: 780px; margin: 0 0 44px; }
.ht3-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.ht3-head h2 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ht3-heading-color);
}
.ht3-head p {
  font-size: 18px;
  color: var(--ht3-ink-dim);
  line-height: 1.65;
  margin: 0;
}

/* ---------- Buttons — pill-shaped, two forms only, like genpact ---------- */
.ht3-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.ht3-btn-primary {
  background: var(--ht3-accent);
  color: #161916;
}
.ht3-btn-primary:hover { transform: translateY(-2px); opacity: 0.92; }
.ht3-btn-outline {
  background: transparent;
  color: var(--ht3-accent);
  border-color: var(--ht3-accent);
}
.ht3-btn-outline:hover { background: var(--ht3-accent-soft); transform: translateY(-2px); }

/* ---------- 1. Hero banner — structured like genpact.com's own hero:
   an inset rounded dark card sitting just below the nav (the page's own
   dark background shows as a margin around it), left-aligned headline +
   CTA block on the left, a large abstract visual filling the right side.
   Not a plain centered text block like the first version of this page. */
/* padding-top clears the FIXED nav (position: fixed takes it out of
   normal flow, so nothing pushes page content down from under it
   automatically). Real bug found while enhancing the nav size: with the
   old 28px top padding, the hero card's own top ~93px sat directly
   behind the (now 121px-tall) nav — invisible at a glance since both are
   similarly dark, but it silently clipped the card's rounded top
   corners. 150px = 121px measured nav height + ~29px breathing room. */
.ht3-hero-wrap {
  padding: 150px 0 40px;
}
/* The hero used to need its own wider .ht3-container override (1320px)
   here — now redundant and removed, since the shared .ht3-container
   itself was widened to 1320px (see its own rule) to fix the whole
   page reading as too centered/narrow, not just the hero. */
/* min-height: 660px — larger than genpact's own measured 574px (see
   above) at the user's explicit request to size this card up further,
   while still an inset card with visible page margin around it on all
   sides (not stretched to fill the viewport/screen). */
.ht3-hero-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--ht3-card-bg);
  border-radius: 20px;
  overflow: hidden;
  min-height: 660px;
}
.ht3-hero-banner-text {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ht3-hero-banner-text h1 {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--ht3-heading-color);
}
/* Tagline — not a semantic heading, so the -2px reduction doesn't apply;
   kept as a bold subhead at its own natural size. */
.ht3-hero-tagline {
  font-size: 20px;
  font-weight: 600;
  color: var(--ht3-ink);
  margin: 0 0 20px;
  line-height: 1.5;
}
.ht3-hero-banner-text p.ht3-hero-sub {
  font-size: 16px;
  color: var(--ht3-ink-dim);
  line-height: 1.7;
  max-width: 460px;
  margin: 0 0 32px;
}
.ht3-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.ht3-hero-banner-visual {
  position: relative;
  min-height: 320px;
}
.ht3-hero-banner-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  .ht3-hero-banner { grid-template-columns: 1fr; }
  .ht3-hero-banner-visual { order: -1; min-height: 240px; }
  .ht3-hero-banner-text { padding: 36px 28px; }
}
/* Matches navbar.css's own mobile breakpoint (max-width: 768px, where the
   nav drops to 64px) rather than this page's other, unrelated 640px
   breakpoints — padding-top has to track the nav's actual height, not an
   arbitrary content breakpoint. 84px = 64px nav + ~20px gap. */
@media (max-width: 768px) {
  .ht3-hero-wrap { padding-top: 84px; }
}
@media (max-width: 640px) {
  .ht3-hero-wrap { padding-bottom: 28px; }
  .ht3-hero-banner-text h1 { font-size: 32px; }
  .ht3-hero-tagline { font-size: 17px; }
}

/* ---------- Welcome strip — genpact's "Hi, we're..." block ----------
   Resized to match genpact's own proportions (user supplied a screenshot
   of their actual section side by side with this one) — their heading is
   large enough to read as one dominant line, not a section-heading-scale
   line that wraps to two. Widened the container and scaled the type up
   accordingly rather than shortening TechSolvera's own copy to force an
   artificial line-break match. */
.ht3-welcome { padding-top: 24px; }
.ht3-welcome-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.ht3-welcome-inner h2 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ht3-heading-color);
  margin: 0 0 48px;
  white-space: nowrap;
}
/* Greeting + mission line read as ONE statement on genpact's own page —
   same bright white, same bold weight, tight gap between them — not a
   bold intro followed by a smaller/dimmed paragraph. */
.ht3-welcome-greeting {
  font-size: 27px;
  font-weight: 700;
  color: var(--ht3-ink);
  line-height: 1.5;
  margin: 0 0 4px;
}
.ht3-welcome-sub {
  font-size: 27px;
  font-weight: 700;
  color: var(--ht3-ink);
  line-height: 1.5;
  margin: 0 0 36px;
}

/* white-space: nowrap on the heading is only safe at the width it was
   actually measured to fit (desktop, >980px container room) — reset back
   to normal wrapping below that so it can never force a horizontal
   overflow on a narrower screen. */
@media (max-width: 980px) {
  .ht3-welcome-inner h2 { white-space: normal; }
}
@media (max-width: 860px) {
  .ht3-welcome-inner { max-width: 680px; }
  .ht3-welcome-inner h2 { font-size: 38px; }
}
@media (max-width: 640px) {
  .ht3-welcome-inner h2 { font-size: 30px; margin-bottom: 32px; }
  .ht3-welcome-greeting,
  .ht3-welcome-sub { font-size: 18px; }
}

/* ---------- 2. AI & Core Services — four compact columns, plus the other
   two real services called out separately below (see .ht3-services-note)
   rather than given their own matching cards.

   Restyled to match genpact's own "Finance / Supply Chain / Banking &
   Risk / Insurance" section (user-supplied reference screenshot): no
   card chrome at all — no background, no border box, no rounded
   corners — just bold headings in borderless columns, separated by a
   single thin vertical divider line, with coral link-style text below.
   Content (titles/descriptions/links/icons) is unchanged, only the
   visual treatment around it. ---------- */
.ht3-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.ht3-service-card {
  background: transparent;
  border: none;
  border-right: 1px solid rgba(255, 250, 244, 0.14);
  padding: 0 28px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: opacity .18s ease;
}
.ht3-service-card:first-child { padding-left: 0; }
.ht3-service-card:last-child { border-right: none; padding-right: 0; }
.ht3-service-card:hover {
  opacity: 0.8;
}
.ht3-service-icon {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  margin-bottom: 20px;
}
.ht3-service-icon img { width: 32px; height: 32px; object-fit: contain; }
/* Card title — bold and large, like genpact's own column headings. */
.ht3-service-card h3 {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ht3-heading-color);
  margin: 0 0 14px;
}
.ht3-service-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ht3-ink-dim);
  margin: 0 0 16px;
  flex: 1 1 auto;
}
.ht3-service-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ht3-accent);
}
.ht3-service-card:hover .ht3-service-link i { transform: translateX(3px); }
.ht3-service-link i { transition: transform .15s ease; }

.ht3-services-note {
  margin: 28px 0 0;
  font-size: 15px;
  color: var(--ht3-ink-soft);
  text-align: center;
}
.ht3-services-note a { color: var(--ht3-accent); text-decoration: none; }
.ht3-services-note a:hover { text-decoration: underline; }

/* Divider lines only make sense in a single row of 4 — once the grid
   wraps to 2 or 1 columns, spacing alone separates the items instead. */
@media (max-width: 980px) {
  .ht3-services-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .ht3-service-card { border-right: none; padding: 0 0 0 28px; }
  .ht3-service-card:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 480px) {
  .ht3-services-grid { grid-template-columns: 1fr; }
  .ht3-service-card { padding-left: 0; }
}

/* ---------- 3. Salesforce AI spotlight ---------- */
.ht3-sf-spotlight {
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 20px;
  padding: 48px;
}
.ht3-sf-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.ht3-sf-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ht3-sf-logo img { width: 30px; height: 30px; object-fit: contain; }
.ht3-sf-spotlight p {
  font-size: 18px;
  color: var(--ht3-ink-dim);
  line-height: 1.7;
  max-width: 820px;
  margin: 0 0 28px;
}
.ht3-sf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.ht3-sf-tag {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ht3-ink);
  border: 1px solid var(--ht3-border);
  padding: 8px 16px;
  border-radius: 999px;
}
.ht3-sf-spotlight .ht3-service-link { font-size: 15px; }

@media (max-width: 640px) {
  .ht3-sf-spotlight { padding: 30px 24px; }
}

/* ---------- Data Cloud spotlight — highlighted panel, set apart from
   the plain sections around it with a border + coral top accent, same
   "highlight" language already used for the nav's own highlighted
   dropdown row. ---------- */
/* No background/border box on the outer section (removed at explicit
   request) — only the 3 small benefit cards below keep their own
   boxed treatment. */
.ht3-datacloud {
  text-align: center;
  padding: 0;
}
.ht3-datacloud-head {
  max-width: 760px;
  margin: 0 auto 40px;
}
.ht3-datacloud-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.ht3-datacloud-icon img { width: 32px; height: 32px; object-fit: contain; }
.ht3-datacloud-head h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ht3-heading-color);
  margin: 0 0 14px;
}
.ht3-datacloud-head p.ht3-datacloud-tagline {
  font-size: 20px;
  font-weight: 700;
  color: var(--ht3-accent);
  line-height: 1.4;
  margin: 0 0 16px;
}
.ht3-datacloud-head p {
  font-size: 17px;
  color: var(--ht3-ink-dim);
  line-height: 1.65;
  margin: 0;
}
.ht3-datacloud-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
  text-align: left;
}
.ht3-datacloud-card {
  background: rgba(255, 250, 244, 0.04);
  border: 1px solid var(--ht3-border);
  border-radius: 14px;
  padding: 24px 20px;
}
.ht3-datacloud-card i {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ht3-accent-soft);
  color: var(--ht3-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 14px;
}
.ht3-datacloud-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ht3-heading-color);
  margin: 0 0 6px;
}
.ht3-datacloud-card p {
  font-size: 14.5px;
  color: var(--ht3-ink-dim);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 860px) {
  .ht3-datacloud-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ht3-datacloud-head h2 { font-size: 26px; }
}

/* ---------- 4-up variant of .ht3-datacloud-grid — for exactly 4 cards,
   so they land as a clean 2x2 instead of 3-then-1-stranded-alone in the
   default 3-column grid (same compound-selector pattern already used by
   .ht3-about-milestones-grid; built as a reusable generic modifier here
   instead of another page-specific wrapper class, since this is the
   second page to need it — see agentforce-ai-solutions.php's "AI Agents
   We Configure" section). Compound selector (not a bare class) so it
   always outranks the base 3-column rule regardless of source order. ---------- */
.ht3-datacloud-grid.ht3-datacloud-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .ht3-datacloud-grid.ht3-datacloud-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ht3-datacloud-grid.ht3-datacloud-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 4. Why TechSolvera — four concise, borderless benefits ---------- */
.ht3-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.ht3-benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ht3-benefit i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--ht3-accent);
  color: var(--ht3-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 16px;
}
.ht3-benefit h4 {
  font-size: 21px;
  font-weight: 700;
  color: var(--ht3-heading-color);
  margin: 0 0 6px;
}
.ht3-benefit p {
  font-size: 15px;
  color: var(--ht3-ink-dim);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 860px) {
  .ht3-benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 460px) {
  .ht3-benefits-grid { grid-template-columns: 1fr; }
}

/* ---------- 5. Staff & Training — two panels ---------- */
.ht3-talent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ht3-talent-panel {
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 18px;
  padding: 34px;
}
.ht3-talent-panel i {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ht3-accent-soft);
  color: var(--ht3-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 18px;
}
.ht3-talent-panel h3 {
  font-size: 23px;
  font-weight: 700;
  color: var(--ht3-heading-color);
  margin: 0 0 10px;
}
.ht3-talent-panel p {
  font-size: 16px;
  color: var(--ht3-ink-dim);
  line-height: 1.65;
  margin: 0 0 20px;
}
.ht3-talent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ht3-talent-tag {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ht3-ink-dim);
  border: 1px solid var(--ht3-border);
  padding: 6px 13px;
  border-radius: 999px;
}

@media (max-width: 760px) {
  .ht3-talent-grid { grid-template-columns: 1fr; }
}

/* ---------- 6. Final CTA ---------- */
/* Widened from 720px so the heading below has room to fit on one line;
   the paragraph stays narrower (its own max-width) for readability. */
.ht3-final-cta {
  text-align: center;
  max-width: 1180px;
  margin: 0 auto;
}
/* Reduced slightly from 32px so it fits on one line at desktop width —
   same approach used for the "Welcome to..." heading earlier:
   white-space: nowrap only above 980px (reset to normal below that),
   so it can never force a horizontal overflow on a narrower screen. */
.ht3-final-cta h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ht3-heading-color);
  margin: 0 0 14px;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .ht3-final-cta h2 { white-space: normal; }
}
.ht3-final-cta p {
  max-width: 760px;
  margin: 0 auto 32px;
  font-size: 18px;
  color: var(--ht3-ink-dim);
  line-height: 1.65;
}

/* ---------- Contact form — reused real backend, restyled dark ---------- */
.ht3-contact-form-wrap {
  max-width: 760px;
  margin: 0 auto;
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 20px;
  padding: 40px;
}
.ht3-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ht3-page .contact-form input,
.ht3-page .contact-form select,
.ht3-page .contact-form textarea {
  width: 100%;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 9px;
  border: 1.5px solid var(--ht3-border);
  background: #121412;
  font-family: inherit;
  font-size: 16px;
  color: var(--ht3-ink);
  transition: border-color .15s ease;
}
.ht3-page .contact-form input::placeholder,
.ht3-page .contact-form textarea::placeholder { color: var(--ht3-ink-soft); }
.ht3-page .contact-form select { color: var(--ht3-ink-dim); }
.ht3-page .contact-form input:focus,
.ht3-page .contact-form select:focus,
.ht3-page .contact-form textarea:focus {
  outline: none;
  border-color: var(--ht3-accent);
}
.ht3-page .contact-form textarea { min-height: 110px; resize: vertical; }
.ht3-page .contact-form .submit-button {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--ht3-accent);
  color: #161916;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity .15s ease;
}
.ht3-page .contact-form .submit-button:hover { opacity: 0.9; }

@media (max-width: 640px) {
  .ht3-form-row { grid-template-columns: 1fr; }
  .ht3-contact-form-wrap { padding: 28px 22px; }
}

/* Error/valid state colors for every .ht3-page contact form — moved here
   from a repeated per-page inline <style> block so it applies globally
   instead of needing to be copy-pasted onto every page that has a form. */
.ht3-page .error-message { color: #ff8a8a; font-size: 13px; display: none; }
.ht3-page input.invalid, .ht3-page textarea.invalid, .ht3-page select.invalid { border-color: #ff4f59; }
.ht3-page input.valid, .ht3-page textarea.valid, .ht3-page select.valid { border-color: #3ecf8e; }

/* ---------- Short lead-capture form — replaces the plain "Visit Contact
   Page" button/link on every inner page's final CTA (explicit user
   request: a short form converts better than a link to another page).
   Posts to the real send_email.php backend with a reduced field set
   (full_name, company_email, message only — no phone/company/looking_for)
   so it stays genuinely short; send_email.php already treats every field
   as optional except a valid company_email, so omitting fields is safe.
   Compact variant of the existing .contact-form styling, not a full
   rewrite — just smaller spacing/sizing in a narrower column. ---------- */
.ht3-cta-form-short {
  flex: 1 1 380px;
  max-width: 420px;
  margin: 0;
  text-align: left;
}
.ht3-cta-form-short .contact-form input,
.ht3-cta-form-short .contact-form textarea {
  margin-bottom: 10px;
  padding: 11px 14px;
  font-size: 14px;
}
.ht3-cta-form-short .contact-form textarea { min-height: 64px; }
.ht3-cta-form-short .submit-button { padding: 12px; font-size: 13px; }

@media (max-width: 640px) {
  .ht3-section { padding: 52px 0; }
}

/* ==========================================================================
   Home-page nav override — genpact-style dark navbar. Started as a quick,
   reversible test scoped to home-test-3.php; now that this design has
   been promoted to the real index.php (see the top comment in that
   file), this override is the permanent nav treatment for the home page
   — but it's still scoped to just the home page, not site-wide, via the
   .tsnav-genpact-preview class (added conditionally in header.php, only
   when $currentPage === 'index.php' — see the comment there). Every
   other page keeps the normal light nav untouched until inner pages are
   redesigned to this theme too (planned next phase).

   To revert to the light nav on the home page: remove this block, and in
   header.php either delete the $tsnavExtraClass logic or just leave it
   (it's inert without this CSS). Backups: header.php.bak-before-genpact-
   nav-test (original nav-test change) and header.php.bak-before-genpact-
   promotion (pre-rename state).
   !important is used deliberately throughout this block — it's overriding
   the shared, sitewide navbar.css for one page only, and the extra
   specificity/robustness matters more here than it would in ordinary CSS.
   ========================================================================== */
.tsnav-genpact-preview {
  background: #161916 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 250, 244, 0.1);
}
.tsnav-genpact-preview .tsnav-logo {
  color: #fffaf4 !important;
}
.tsnav-genpact-preview .tsnav-list > li > a {
  color: #fffaf4 !important;
}

/* Taller bar + larger logo/link text, desktop only (guarded behind
   min-width: 769px so navbar.css's own mobile override at <=768px,
   height: 64px, still wins there — without this guard, !important would
   force the desktop height onto mobile too and break the hamburger
   layout). 120px bar height / 15px link size were measured directly from
   genpact.com's real nav via Playwright, same method used for the hero
   banner's size match. */
@media (min-width: 769px) {
  .tsnav-genpact-preview .tsnav-bar {
    height: 120px !important;
  }
  .tsnav-genpact-preview .tsnav-logo {
    font-size: 24px !important;
  }
  .tsnav-genpact-preview .tsnav-list > li > a {
    font-size: 16px !important;
    padding: 0 20px !important;
  }
  .tsnav-genpact-preview .tsnav-list > li:last-child > a {
    min-height: 44px !important;
    font-size: 13px !important;
  }
}
.tsnav-genpact-preview .tsnav-list > li > a:hover {
  background-color: rgba(255, 250, 244, 0.08) !important;
  color: #ff4f59 !important;
}
.tsnav-genpact-preview .tsnav-toggle span {
  background: #fffaf4 !important;
}

/* Last nav item (Contact) becomes a solid coral pill button, echoing
   genpact's "CONTACT US" CTA pill at the end of its own nav bar. */
.tsnav-genpact-preview .tsnav-list > li:last-child > a {
  background: #ff4f59 !important;
  color: #161916 !important;
  border-radius: 999px !important;
  padding: 0 22px !important;
  margin: auto 10px !important;
  height: auto !important;
  min-height: 38px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 12.5px !important;
  letter-spacing: 0.03em !important;
}
.tsnav-genpact-preview .tsnav-list > li:last-child > a:hover {
  background: #ff4f59 !important;
  color: #161916 !important;
  opacity: 0.9;
}

@media (max-width: 768px) {
  .tsnav-genpact-preview .tsnav-menu {
    background: #161916 !important;
    border-top-color: rgba(255, 250, 244, 0.1) !important;
  }
  .tsnav-genpact-preview .tsnav-list > li > a {
    border-bottom-color: rgba(255, 250, 244, 0.1) !important;
  }
  .tsnav-genpact-preview .tsnav-list > li:last-child > a {
    margin: 14px 20px !important;
    justify-content: center !important;
    border-bottom: none !important;
  }
}

/* Dropdown/mega-menu panels, dark-themed to match — without this they'd
   still pop open as a plain white box under the new dark bar, which reads
   as unfinished rather than "the same as genpact". */
.tsnav-genpact-preview .tsnav-panel {
  background: #1e221e !important;
  border-color: rgba(255, 250, 244, 0.12) !important;
  border-top: 3px solid #ff4f59 !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
}
.tsnav-genpact-preview .tsnav-mega-cell {
  border-color: rgba(255, 250, 244, 0.1) !important;
}
.tsnav-genpact-preview .tsnav-cat {
  color: #ff4f59 !important;
}
.tsnav-genpact-preview .tsnav-icon-badge {
  background: #ff4f59 !important;
  color: #161916 !important;
}
.tsnav-genpact-preview .tsnav-sublist a,
.tsnav-genpact-preview .tsnav-dropdown a {
  color: #c9c6bf !important;
}
.tsnav-genpact-preview .tsnav-sublist a:hover,
.tsnav-genpact-preview .tsnav-dropdown a:hover {
  background-color: rgba(255, 79, 89, 0.12) !important;
  color: #ff4f59 !important;
}
.tsnav-genpact-preview .tsnav-dropdown a.tsnav-dropdown-highlight {
  background-color: #fffaf4 !important;
  color: #ff4f59 !important;
}
.tsnav-genpact-preview .tsnav-dropdown a.tsnav-dropdown-highlight:hover {
  background-color: #ffe4e6 !important;
}

/* ==========================================================================
   about-us.php — first inner page on this theme. Reuses .ht3-benefit and
   .ht3-datacloud-card wholesale (same components, new grid wrappers only)
   rather than duplicating their styling; only genuinely new patterns
   (the origin-story hero text block, the 3-column journey columns, the
   final promise statement) get their own rules below.
   ========================================================================== */

/* ---------- Reusable inner-page components ----------
   Generalized from about-us.php's first draft (.ht3-about-origin,
   .ht3-about-promise-*) into sitewide names, since this same hero/CTA
   pattern is reused across every inner page being migrated to this
   theme (Salesforce service pages and beyond) — defining it once here
   instead of re-deriving page-specific versions each time. */

/* Text-only centered intro hero — no banner card/visual, matching the
   genpact "Hi, we're Genpact" text-only block treatment. Used for any
   inner page's top section. */
.ht3-page-hero {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.ht3-page-hero h1 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ht3-heading-color);
  margin: 18px 0 28px;
}
.ht3-highlight {
  color: var(--ht3-accent);
}
.ht3-page-hero p {
  font-size: 18px;
  color: var(--ht3-ink-dim);
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto 20px;
}

@media (max-width: 640px) {
  .ht3-page-hero h1 { font-size: 30px; }
}

/* Borderless divided columns (3-up) — same column + thin-divider
   language as the home page's Services section. Reusable for any
   "explain N related things side by side" content: journey/mission/
   vision, process stages, comparisons, etc. */
.ht3-divided-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.ht3-divided-col {
  border-right: 1px solid rgba(255, 250, 244, 0.14);
  padding: 0 32px;
}
.ht3-divided-col:first-child { padding-left: 0; }
.ht3-divided-col:last-child { border-right: none; padding-right: 0; }
.ht3-divided-col h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--ht3-heading-color);
  margin: 0 0 14px;
  line-height: 1.25;
}
.ht3-divided-col p {
  font-size: 15px;
  color: var(--ht3-ink-dim);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 980px) {
  .ht3-divided-cols { grid-template-columns: 1fr; gap: 32px; }
  .ht3-divided-col { border-right: none; padding: 0; }
}

/* ---------- Core Values — 5-up version of .ht3-benefits-grid ---------- */
.ht3-about-values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
}
@media (max-width: 980px) {
  .ht3-about-values-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .ht3-about-values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .ht3-about-values-grid { grid-template-columns: 1fr; }
}

/* ---------- Milestones — 4-up version of .ht3-datacloud-grid ---------- */
.ht3-about-milestones-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: left;
}
@media (max-width: 980px) {
  .ht3-about-milestones-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ht3-about-milestones-grid { grid-template-columns: 1fr; }
}

/* Final centered-statement CTA — same treatment as the home page's
   Welcome section. Reusable closing block for any inner page.

   The heading/paragraph stay full-width rows; the CTA button(s) and the
   short lead-capture form below them sit side by side horizontally
   instead of stacking (explicit user request/screenshot — "you have
   aligned attached portions vertically. align them horizontally").
   Achieved with one flex-wrap trick, no markup change needed on any of
   the 25+ pages that use this exact .ht3-page-cta-inner structure: h2/p
   are each forced to flex-basis:100% so they always start a fresh row,
   and the ctas/form that follow (neither forced to 100%) naturally share
   the next row together, wrapping to their own lines only if they don't
   fit — which also makes this degrade gracefully on mobile and on pages
   that have no form below the buttons at all. */
.ht3-page-cta-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: 28px;
}
.ht3-page-cta-inner > h2,
.ht3-page-cta-inner > p {
  flex: 1 1 100%;
}
.ht3-page-cta-inner h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ht3-heading-color);
  margin: 0 0 20px;
}
.ht3-page-cta-inner p {
  font-size: 18px;
  color: var(--ht3-ink-dim);
  line-height: 1.7;
  margin: 0 0 32px;
}
.ht3-page-cta-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

@media (max-width: 640px) {
  .ht3-page-cta-inner h2 { font-size: 28px; }
  .ht3-page-cta-inner { column-gap: 0; }
  .ht3-page-cta-ctas,
  .ht3-cta-form-short { flex: 1 1 100%; }
}

/* ---------- Numbered process steps — 3-up, divided-column timing but
   with a solid coral number badge instead of a plain heading. Reusable
   for any "how we work" / step-by-step explanation. ---------- */
.ht3-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.ht3-process-step { display: flex; flex-direction: column; }
.ht3-process-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ht3-accent);
  color: #161916;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.ht3-process-step h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ht3-heading-color);
  margin: 0 0 10px;
  line-height: 1.25;
}
.ht3-process-step p {
  font-size: 15px;
  color: var(--ht3-ink-dim);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 860px) {
  .ht3-process-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Related-services link row — small pill-outline links,
   reusable at the bottom of any service page for internal linking. ---------- */
.ht3-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.ht3-related-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ht3-ink);
  border: 1px solid var(--ht3-border);
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.ht3-related-links a:hover {
  border-color: var(--ht3-accent);
  color: var(--ht3-accent);
}

/* ---------- 4-up variant of .ht3-process-grid — same numbered-step
   component, just four columns instead of three, for methodologies with
   four stages. Built for salesforce_Implementation.php, reusable by any
   future page with a 4-step process. ---------- */
.ht3-process-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) {
  .ht3-process-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ht3-process-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Cloud/technology explorer — horizontally scrollable pill
   tabs over a single content panel. Built for
   salesforce_Implementation.php's "Salesforce Clouds We Implement"
   section (reuses the site's real, existing cloud-by-cloud copy instead
   of a generic capability list); reusable anywhere a page needs to
   present several technology variants under one section without a wall
   of repeated cards. All panels render in the DOM — JS only toggles
   visibility — so content stays crawlable even if the script fails. ---------- */
.ht3-cloud-explorer { margin-top: 8px; }
.ht3-cloud-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--ht3-border);
  scrollbar-width: thin;
}
.ht3-cloud-tabs::-webkit-scrollbar { height: 5px; }
.ht3-cloud-tabs::-webkit-scrollbar-thumb { background: var(--ht3-border); border-radius: 4px; }
.ht3-cloud-tab {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--ht3-border);
  color: var(--ht3-ink-dim);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ht3-cloud-tab:hover { color: var(--ht3-ink); border-color: var(--ht3-ink-soft); }
.ht3-cloud-tab.active {
  background: var(--ht3-accent);
  border-color: var(--ht3-accent);
  color: #161916;
}
.ht3-cloud-panel-wrap {
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 16px;
  padding: 36px;
  min-height: 160px;
}
.ht3-cloud-panel { display: none; }
.ht3-cloud-panel.active { display: block; }
.ht3-cloud-panel h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--ht3-heading-color);
  margin: 0 0 14px;
}
.ht3-cloud-panel p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ht3-ink-dim);
  margin: 0;
}
@media (max-width: 640px) {
  .ht3-cloud-panel-wrap { padding: 24px; }
  .ht3-cloud-panel h3 { font-size: 19px; }
  .ht3-cloud-panel p { font-size: 15px; }
}

/* ---------- Sidebar + panel explorer — a vertical list of items on the
   left, one detail panel on the right. Built for
   salesforce-development-services.php's "Our Salesforce Development
   Expertise" section — deliberately a different interaction shape from
   .ht3-cloud-explorer's horizontal pill tabs (that page already had this
   sidebar-list UI in its previous version, so this keeps the page's own
   established pattern rather than reusing the Implementation page's tab
   row verbatim). All panels render in the DOM; JS only toggles
   visibility, so content stays crawlable. ---------- */
.ht3-dev-explorer {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  align-items: start;
}
.ht3-dev-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ht3-dev-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: var(--ht3-ink-dim);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ht3-dev-item i { width: 18px; text-align: center; color: var(--ht3-ink-soft); font-size: 14px; transition: color .15s ease; }
.ht3-dev-item:hover { background: var(--ht3-card-bg); color: var(--ht3-ink); }
.ht3-dev-item.active {
  background: var(--ht3-card-bg);
  border-left-color: var(--ht3-accent);
  color: var(--ht3-ink);
}
.ht3-dev-item.active i { color: var(--ht3-accent); }
.ht3-dev-panel-wrap {
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 16px;
  padding: 36px;
  min-height: 260px;
}
.ht3-dev-panel { display: none; }
.ht3-dev-panel.active { display: block; }
.ht3-dev-panel i.ht3-dev-panel-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--ht3-accent-soft);
  color: var(--ht3-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}
.ht3-dev-panel h3 { font-size: 22px; font-weight: 800; color: var(--ht3-heading-color); margin: 0 0 14px; }
.ht3-dev-panel p { font-size: 15.5px; line-height: 1.75; color: var(--ht3-ink-dim); margin: 0 0 12px; }
.ht3-dev-panel p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .ht3-dev-explorer { grid-template-columns: 1fr; }
  .ht3-dev-list { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; }
  .ht3-dev-item { flex: 0 0 auto; border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .ht3-dev-item.active { border-left-color: transparent; border-bottom-color: var(--ht3-accent); }
  .ht3-dev-panel-wrap { padding: 24px; }
}

/* ---------- Flat icon+label chip grid — for breadth-style "we work
   across all of these" sections, as opposed to .ht3-cloud-explorer's
   per-item depth/description treatment. Built for
   salesforce-development-services.php's "Salesforce Clouds We
   Specialize In" (reuses the real local Salesforce-cloud SVG icons
   already in assets/img/ — no new assets). ---------- */
.ht3-cloud-chip-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.ht3-cloud-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 18px 10px;
  border: 1px solid var(--ht3-border);
  border-radius: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.ht3-cloud-chip:hover { border-color: var(--ht3-accent); transform: translateY(-3px); }
.ht3-cloud-chip img { width: 36px; height: 36px; }
.ht3-cloud-chip span { font-size: 13px; font-weight: 600; color: var(--ht3-ink-dim); line-height: 1.3; }
@media (max-width: 1080px) { .ht3-cloud-chip-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .ht3-cloud-chip-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 420px) { .ht3-cloud-chip-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Engagement model comparison cards — 2-up, bigger than
   .ht3-benefit, each with its own CTA. Built for
   salesforce-development-services.php's "Engagement Models" section;
   intentionally a new component rather than reusing the shared,
   site-wide .engagement-models/.model-card classes already used by
   several other pages (hire-salesforce-developer.php, copado.php,
   hire-devops-expert.php, Industries_We_Serve.php), so none of those
   pages are affected by this page's restyle. ---------- */
.ht3-engagement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.ht3-engagement-card {
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 16px;
  padding: 36px;
}
.ht3-engagement-card h3 { font-size: 22px; font-weight: 800; color: var(--ht3-heading-color); margin: 0 0 12px; }
.ht3-engagement-card p { font-size: 15.5px; line-height: 1.7; color: var(--ht3-ink-dim); margin: 0 0 24px; }
@media (max-width: 760px) { .ht3-engagement-grid { grid-template-columns: 1fr; } }

/* ---------- Two-column "before vs after" comparison panels — built for
   agentforce-ai-solutions.php's "Traditional Automation vs. Agentforce"
   section. Left panel reads as the limited/old approach (muted, X-marks),
   right panel as the capability being sold (accent border, check-marks).
   Reusable anywhere a page needs to contrast an old approach against a
   new one, rather than another plain feature list. ---------- */
.ht3-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.ht3-compare-col {
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 16px;
  padding: 32px;
}
.ht3-compare-col--accent { border-color: var(--ht3-accent); position: relative; }
.ht3-compare-col h3 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 20px;
  color: var(--ht3-ink-dim);
}
.ht3-compare-col--accent h3 { color: var(--ht3-accent); }
.ht3-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ht3-compare-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ht3-ink-dim); }
.ht3-compare-list i { margin-top: 3px; flex: 0 0 auto; font-size: 14px; }
.ht3-compare-col:not(.ht3-compare-col--accent) .ht3-compare-list i { color: var(--ht3-ink-soft); }
.ht3-compare-col--accent .ht3-compare-list i { color: var(--ht3-accent); }
.ht3-compare-col--accent .ht3-compare-list li { color: var(--ht3-ink); }
@media (max-width: 760px) { .ht3-compare-grid { grid-template-columns: 1fr; } }

/* ---------- Request-a-Quote popup modal — page-scoped (not site-wide
   like the shared .tsm-* consultation modal in booking-widget.php), built
   for salesforce-development-services.php's "Fixed-Price Projects" CTA.
   Submits to the same real send_email.php backend as every shared
   contact form on the site (same field names), so it's genuinely
   functional without a new backend endpoint. Namespaced .ht3qr-* so it
   can never collide with .tsm-* or #contactForm/#code (those have their
   own dedicated, ID-based JS elsewhere in the codebase). ---------- */
.ht3qr-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 10, 0.72);
  backdrop-filter: blur(4px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.ht3qr-overlay.active { display: flex; }
.ht3qr-modal {
  background: var(--ht3-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px;
  position: relative;
}
.ht3qr-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: var(--ht3-ink-dim);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.ht3qr-close:hover { color: var(--ht3-ink); }
.ht3qr-modal h3 { font-size: 22px; font-weight: 800; color: var(--ht3-heading-color); margin: 0 0 8px; }
.ht3qr-modal > p { font-size: 14.5px; color: var(--ht3-ink-dim); margin: 0 0 22px; }
.ht3qr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ht3qr-modal input,
.ht3qr-modal select,
.ht3qr-modal textarea {
  width: 100%;
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--ht3-ink);
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 12px;
}
.ht3qr-modal textarea { resize: vertical; min-height: 90px; }
.ht3qr-modal ::placeholder { color: var(--ht3-ink-soft); }
.ht3qr-phone-row { display: flex; gap: 10px; }
.ht3qr-phone-row > div:first-child { flex: 0 0 110px; }
.ht3qr-phone-row > div:last-child { flex: 1; }
.ht3qr-error { display: block; color: #ff8a8a; font-size: 12.5px; margin: -8px 0 10px; min-height: 14px; }
.ht3qr-modal input.invalid, .ht3qr-modal select.invalid, .ht3qr-modal textarea.invalid { border-color: #ff4f59; }
.ht3qr-modal input.valid, .ht3qr-modal select.valid, .ht3qr-modal textarea.valid { border-color: #3ecf8e; }
.ht3qr-submit-error { color: #ff8a8a; font-size: 13.5px; margin: -4px 0 12px; display: none; }
.ht3qr-success { display: none; text-align: center; padding: 20px 6px; }
.ht3qr-success i { font-size: 40px; color: #3ecf8e; margin-bottom: 14px; display: block; }
.ht3qr-success p { color: var(--ht3-ink-dim); font-size: 14.5px; margin: 0; }
@media (max-width: 560px) {
  .ht3qr-modal { padding: 26px 22px; }
  .ht3qr-row { grid-template-columns: 1fr; }
  .ht3qr-phone-row { flex-direction: column; }
  .ht3qr-phone-row > div:first-child { flex: 1; }
}

/* ==========================================================================
   Real supporting imagery — first use of actual photos/illustrations on
   this theme (every page built so far used only Font Awesome icons and
   small local SVG cloud logos). Two pieces, both reusable:

   1. .ht3-media-row — a two-column "text beside a real image" section.
      Which side the image lands on is controlled purely by DOM order
      (whichever of .ht3-media-row-text / .ht3-media-row-img comes first
      in the markup renders on the left) — no modifier class needed.
      Collapses to a single column on mobile, image first.

   2. .ht3-pulse-monitor — a small inline animated SVG (CSS @keyframes,
      not a GIF/video file) representing live, ongoing monitoring. Built
      for salesforce-managed-services.php, where "we're watching your org
      continuously" is the actual point of the section — a real video/GIF
      asset doesn't exist anywhere in this project (checked), and an
      animated SVG is the more correct engineering choice anyway: crisp
      at any size, tiny file weight, no autoplay-video policy issues, and
      it degrades gracefully to a static ring if a browser ignores the
      keyframes for any reason.
   ========================================================================== */

.ht3-media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.ht3-media-row-img img {
  width: 100%;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--ht3-border);
  background: var(--ht3-card-bg);
}
.ht3-media-row-text .ht3-eyebrow { margin-bottom: 10px; }
.ht3-media-row-text h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ht3-heading-color);
  margin: 0 0 16px;
}
.ht3-media-row-text p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ht3-ink-dim);
  margin: 0 0 14px;
}
.ht3-media-row-text p:last-child { margin-bottom: 0; }
.ht3-media-row-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ht3-media-row-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ht3-ink-dim); line-height: 1.5; }
.ht3-media-row-list i { color: var(--ht3-accent); margin-top: 3px; flex: 0 0 auto; }

@media (max-width: 860px) {
  .ht3-media-row { grid-template-columns: 1fr; gap: 24px; }
  .ht3-media-row-img { order: -1; }
}

/* ---------- Animated "live monitoring" visual ---------- */
.ht3-pulse-monitor {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ht3-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ht3-accent);
  opacity: 0;
  animation: ht3-pulse-out 2.4s ease-out infinite;
}
.ht3-pulse-ring:nth-child(2) { animation-delay: 0.8s; }
.ht3-pulse-ring:nth-child(3) { animation-delay: 1.6s; }
.ht3-pulse-core {
  position: relative;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: var(--ht3-accent);
  box-shadow: 0 0 24px var(--ht3-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #161916;
  font-size: 28px;
  animation: ht3-pulse-core 2.4s ease-in-out infinite;
}
@keyframes ht3-pulse-out {
  0% { transform: scale(0.5); opacity: 0.55; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes ht3-pulse-core {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ht3-pulse-ring { animation: none; opacity: 0; }
  .ht3-pulse-core { animation: none; }
}

/* ---------- Abstract animated visuals, v2 — crisp line-art replacing
   both the old blurred ".ht3-blob-visual" gradients and the static
   generated "*-abstract-art.png" images used in .ht3-media-row sections.

   Follow-up to the original blurred-blob version above (kept as a code
   history note, not kept in the file): explicit user feedback was that
   both the blob-visual gradients AND the generated PNGs read as mushy/
   indistinct ("blurred, as attached"), and should be redone as a
   "crisper, more graphic/illustrated look... cleaner geometric or
   line-art shapes with hard edges" while staying animated. There is
   still no 3D-render/AI-image-gen/video/GIF tool in this environment
   (confirmed repeatedly throughout this project), so "animated" still
   means real in-browser CSS/SVG animation, not a video file — but unlike
   the old blurred-raster approach, crisp vector line art actually solves
   the "blurred" complaint directly: an SVG stroke never looks soft or
   out of focus at any size, whereas a blurred gradient fundamentally
   can't look sharp. Every motif below keeps the same real engineering
   idea the old pulse-monitor/blob-visual comments already established —
   animate a defined shape, don't try to fake a photo.

   Two components:

   1. .ht3-blob-visual — now a crisp rotating double-ring "orbit" (not a
      blob at all anymore, name kept so every existing call site needs
      zero markup changes) behind the same icon badge used before.

   2. .ht3-line-art — a larger standalone visual for .ht3-media-row
      sections, one custom per-page motif each (ht3_line_art() in the new
      ht3-line-art.php include), reusing the exact distinct concepts
      already designed for the old PNGs (documented in CLAUDE.md) —
      single-loop track, radiating lines, check+ring, linked modules,
      ascending bars, code brackets, node constellation, dense burst,
      double-ribbon loop, interlocking rings, crossing ribbons — redrawn
      as crisp animated SVG strokes instead of a blurred static raster.
      The old PNG files are left on disk, unreferenced, per this
      project's standing "don't delete unused assets" convention.
   ---------- */

.ht3-blob-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.ht3-blob-visual-glow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.4;
  background: radial-gradient(circle, var(--ht3-accent), transparent 70%);
  z-index: 0;
}
.ht3-blob-visual-rings {
  position: absolute;
  inset: 10%;
  z-index: 1;
}
.ht3-orbit-ring-outer,
.ht3-orbit-ring-inner {
  fill: none;
  stroke-linecap: round;
}
.ht3-orbit-ring-outer {
  stroke: var(--ht3-accent);
  stroke-width: 2.5;
  stroke-dasharray: 14 10;
  transform-origin: 50% 50%;
  animation: ht3-orbit-rotate 16s linear infinite;
}
.ht3-orbit-ring-inner {
  stroke: #7fc8ff;
  stroke-width: 2;
  stroke-dasharray: 6 8;
  transform-origin: 50% 50%;
  animation: ht3-orbit-rotate-rev 11s linear infinite;
  opacity: 0.8;
}
.ht3-orbit-dot { fill: var(--ht3-accent); }
.ht3-blob-visual-icon {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: rgba(255, 250, 244, 0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 250, 244, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--ht3-ink);
  animation: ht3-blob-icon-pulse 4.5s ease-in-out infinite;
}
@keyframes ht3-orbit-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ht3-orbit-rotate-rev {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes ht3-blob-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .ht3-orbit-ring-outer,
  .ht3-orbit-ring-inner,
  .ht3-blob-visual-icon {
    animation: none;
  }
}

/* ---------- .ht3-line-art — standalone media-row visual ---------- */
.ht3-line-art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  border: 1px solid var(--ht3-border);
  background: var(--ht3-card-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.ht3-line-art-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.28;
  background: radial-gradient(circle, var(--ht3-accent), transparent 70%);
  z-index: 0;
}
.ht3-line-art-svg {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  overflow: visible;
}
.ht3-la-stroke-accent { fill: none; stroke: var(--ht3-accent); stroke-linecap: round; stroke-linejoin: round; }
.ht3-la-stroke-amber { fill: none; stroke: #ffb199; stroke-linecap: round; stroke-linejoin: round; }
.ht3-la-stroke-blue { fill: none; stroke: #7fc8ff; stroke-linecap: round; stroke-linejoin: round; }
.ht3-la-fill-accent { fill: var(--ht3-accent); }
.ht3-la-fill-amber { fill: #ffb199; }
.ht3-la-fill-blue { fill: #7fc8ff; }

/* Flowing-dash "energy" animation reused by every line/loop/path motif —
   stroke-dasharray is set per-path inline (always a multiple of 14 so the
   loop is seamless), this just drives the offset. */
.ht3-la-flow { animation: ht3-la-flow 3.2s linear infinite; }
@keyframes ht3-la-flow { to { stroke-dashoffset: -56; } }

.ht3-la-rotate { transform-origin: 120px 90px; animation: ht3-orbit-rotate 20s linear infinite; }
.ht3-la-rotate-rev { transform-origin: 120px 90px; animation: ht3-orbit-rotate-rev 14s linear infinite; }

.ht3-la-pulse { animation: ht3-la-pulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes ht3-la-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: 0.7; } }

.ht3-la-stagger > * { animation: ht3-la-pulse 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ht3-la-stagger > *:nth-child(1) { animation-delay: 0s; }
.ht3-la-stagger > *:nth-child(2) { animation-delay: 0.15s; }
.ht3-la-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.ht3-la-stagger > *:nth-child(4) { animation-delay: 0.45s; }
.ht3-la-stagger > *:nth-child(5) { animation-delay: 0.6s; }
.ht3-la-stagger > *:nth-child(6) { animation-delay: 0.75s; }
.ht3-la-stagger > *:nth-child(7) { animation-delay: 0.9s; }
.ht3-la-stagger > *:nth-child(8) { animation-delay: 1.05s; }
.ht3-la-stagger > *:nth-child(9) { animation-delay: 1.2s; }
.ht3-la-stagger > *:nth-child(10) { animation-delay: 1.35s; }
.ht3-la-stagger > *:nth-child(11) { animation-delay: 1.5s; }
.ht3-la-stagger > *:nth-child(12) { animation-delay: 1.65s; }

.ht3-la-bounce { animation: ht3-la-bounce 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes ht3-la-bounce { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.6); } }
.ht3-la-stagger-bounce > * { animation: ht3-la-bounce 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
.ht3-la-stagger-bounce > *:nth-child(1) { animation-delay: 0s; }
.ht3-la-stagger-bounce > *:nth-child(2) { animation-delay: 0.18s; }
.ht3-la-stagger-bounce > *:nth-child(3) { animation-delay: 0.36s; }
.ht3-la-stagger-bounce > *:nth-child(4) { animation-delay: 0.54s; }
.ht3-la-stagger-bounce > *:nth-child(5) { animation-delay: 0.72s; }

.ht3-la-draw { stroke-dasharray: 160; animation: ht3-la-draw 3s ease-in-out infinite; }
@keyframes ht3-la-draw { 0% { stroke-dashoffset: 160; } 45%, 100% { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ht3-la-flow, .ht3-la-rotate, .ht3-la-rotate-rev, .ht3-la-pulse,
  .ht3-la-stagger > *, .ht3-la-bounce, .ht3-la-stagger-bounce > *, .ht3-la-draw {
    animation: none;
  }
}

@media (max-width: 480px) {
  .ht3-line-art-svg { width: 80%; height: 80%; }
}

/* ==========================================================================
   Final-CTA layout variants — built so the closing section doesn't look
   identical on every page (explicit user request after seeing the same
   "heading, paragraph, two pill buttons" block repeated site-wide). Each
   is a modifier that still works with the same .ht3-page-cta-inner /
   .ht3-page-cta-ctas markup already used everywhere, except
   .ht3-cta-split, which needs its own two-column wrapper. Pick whichever
   fits a given page — not every page needs to use a different one, but
   no two adjacent pages in the nav should share the same look.
   ========================================================================== */

/* ---------- Variant: bordered card ---------- */
.ht3-page-cta-inner.ht3-cta-card {
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 20px;
  padding: 48px 40px;
  max-width: 860px;
}

/* ---------- Variant: gradient banner ---------- */
.ht3-page-cta-inner.ht3-cta-banner {
  background: linear-gradient(135deg, var(--ht3-bg) 0%, #2a1418 55%, #3d1a1e 100%);
  border: 1px solid var(--ht3-border);
  border-radius: 20px;
  padding: 56px 40px;
  max-width: 900px;
}

/* ---------- Variant: minimal, left-aligned, single emphasized button +
   a plain text link for the secondary action instead of two equal
   pill buttons ---------- */
.ht3-page-cta-inner.ht3-cta-minimal {
  text-align: left;
  margin: 0;
  max-width: 680px;
  justify-content: flex-start;
}
.ht3-page-cta-inner.ht3-cta-minimal .ht3-page-cta-ctas { justify-content: flex-start; align-items: center; }
.ht3-cta-minimal-link {
  color: var(--ht3-accent);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ht3-cta-minimal-link:hover { text-decoration: underline; }

/* ---------- Variant: split two-column, text beside the animated blob
   visual (only used on pages whose body doesn't already show a blob
   elsewhere, so it doesn't repeat within the same page). Reuses
   .ht3-media-row's grid/stacking behavior directly. ---------- */
.ht3-cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.ht3-cta-split .ht3-page-cta-inner { text-align: left; margin: 0; max-width: none; justify-content: flex-start; }
.ht3-cta-split .ht3-page-cta-ctas { justify-content: flex-start; }
/* The split layout's own two-column grid already halves the available
   width, so the short form needs a smaller flex-basis than the default
   here to still fit beside the button instead of wrapping under it. */
.ht3-cta-split .ht3-cta-form-short { flex: 1 1 240px; max-width: 260px; }
.ht3-cta-split-visual .ht3-blob-visual { max-width: 280px; }
@media (max-width: 860px) {
  .ht3-cta-split { grid-template-columns: 1fr; gap: 24px; }
  .ht3-cta-split-visual { order: -1; }
  .ht3-cta-split .ht3-page-cta-inner { text-align: center; justify-content: center; }
  .ht3-cta-split .ht3-page-cta-ctas { justify-content: center; }
}

@media (max-width: 640px) {
  .ht3-page-cta-inner.ht3-cta-card,
  .ht3-page-cta-inner.ht3-cta-banner { padding: 32px 24px; }
}

/* ==========================================================================
   Candidate registration page (apply-now.php) — Phase 4 of the master
   prompt. Deliberately standalone/simplified rather than the full site
   header/footer/mega-nav/floating buttons: this page is meant to be shared
   directly on LinkedIn/job portals, so a focused, fast-loading page with
   just the TechSolvera wordmark and the form is the right fit, per the
   master prompt's "may use a simplified, focused layout" allowance.
   ========================================================================== */
.ht3-apply-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.ht3-apply-topbar .ht3-apply-logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--ht3-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.ht3-apply-topbar .ht3-apply-back {
  color: var(--ht3-ink-dim);
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ht3-apply-topbar .ht3-apply-back:hover { color: var(--ht3-accent); }

.ht3-apply-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 0 12px;
}
.ht3-apply-hero h1 {
  /* natural 42px, -2px per the page-wide heading convention */
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ht3-heading-color);
  margin: 14px 0 14px;
}
.ht3-apply-hero p {
  font-size: 18px;
  color: var(--ht3-ink-dim);
  line-height: 1.6;
  margin: 0;
}

.ht3-apply-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
  padding: 48px 0 100px;
}
/* Single-column variant — used once the "Why Join TechSolvera" sidebar
   was removed from apply-now.php, so the form card centers instead of
   leaving an empty left column. */
.ht3-apply-layout--single {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}

.ht3-apply-perks h2 {
  /* natural 24px, -2px */
  font-size: 22px;
  font-weight: 700;
  color: var(--ht3-heading-color);
  margin: 0 0 18px;
}
.ht3-apply-perk-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ht3-apply-perk-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ht3-ink-dim);
  font-size: 15px;
  line-height: 1.5;
}
.ht3-apply-perk-list li i {
  color: var(--ht3-accent);
  margin-top: 3px;
  flex-shrink: 0;
}
.ht3-apply-tech-note {
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 14px;
  padding: 20px;
  font-size: 14px;
  color: var(--ht3-ink-soft);
  line-height: 1.6;
}
.ht3-apply-tech-note strong { color: var(--ht3-ink-dim); }

.ht3-apply-form-card {
  background: var(--ht3-card-bg);
  border: 1px solid var(--ht3-border);
  border-radius: 20px;
  padding: 36px;
}
.ht3-apply-form-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ht3-heading-color);
  margin: 0 0 22px;
}
.ht3-apply-form .ht3-form-row { margin-bottom: 0; }
.ht3-apply-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ht3-ink-dim);
  margin: 0 0 6px;
}
.ht3-apply-form .ht3-field { margin-bottom: 16px; }
.ht3-apply-form input[type="text"],
.ht3-apply-form input[type="email"],
.ht3-apply-form input[type="tel"],
.ht3-apply-form input[type="number"],
.ht3-apply-form input[type="url"],
.ht3-apply-form select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 9px;
  border: 1.5px solid var(--ht3-border);
  background: #121412;
  font-family: inherit;
  font-size: 15px;
  color: var(--ht3-ink);
  transition: border-color .15s ease, opacity .15s ease;
}
.ht3-apply-form select { color: var(--ht3-ink-dim); }
.ht3-apply-form input:focus,
.ht3-apply-form select:focus {
  outline: none;
  border-color: var(--ht3-accent);
}
.ht3-apply-form input:disabled,
.ht3-apply-form select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ht3-apply-phone-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }

/* Multi-field grid for the full candidate-profile form — 2 columns on
   desktop (the form card itself is already in a narrower right-hand
   column next to the perks list, so a wider 3-4 column grid here would
   feel cramped), collapsing to 1 on mobile. */
.ht3-apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.ht3-apply-grid .ht3-field { grid-column: span 1; }
.ht3-apply-field-full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .ht3-apply-grid { grid-template-columns: 1fr; }
}

.ht3-apply-fresher-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 18px;
  font-size: 14px;
  color: var(--ht3-ink-dim);
  grid-column: 1 / -1;
}
.ht3-apply-fresher-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--ht3-accent);
  flex-shrink: 0;
}

/* Custom file-upload control — native <input type=file> wrapped so its
   button matches the rest of the dark form instead of the browser default
   light-chrome widget. */
.ht3-file-field {
  position: relative;
  border: 1.5px dashed var(--ht3-border);
  border-radius: 9px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ht3-file-field:hover,
.ht3-file-field.ht3-file-field--active { border-color: var(--ht3-accent); background: var(--ht3-accent-soft); }
.ht3-file-field input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.ht3-file-field-label { font-size: 14px; color: var(--ht3-ink-dim); pointer-events: none; }
.ht3-file-field-label i { color: var(--ht3-accent); margin-right: 8px; }
.ht3-file-field-name { font-size: 13px; color: var(--ht3-ink); font-weight: 600; margin-top: 6px; pointer-events: none; }
.ht3-file-hint { font-size: 12.5px; color: var(--ht3-ink-soft); margin: 8px 0 0; }

.ht3-apply-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 20px;
  font-size: 13px;
  color: var(--ht3-ink-soft);
  line-height: 1.55;
}
.ht3-apply-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--ht3-accent);
}
.ht3-apply-consent a { color: var(--ht3-ink-dim); text-decoration: underline; }
.ht3-apply-consent a:hover { color: var(--ht3-accent); }

.ht3-apply-form .submit-button {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--ht3-accent);
  color: #161916;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: opacity .15s ease;
}
.ht3-apply-form .submit-button:hover { opacity: 0.9; }
.ht3-apply-form .submit-button:disabled { opacity: 0.55; cursor: not-allowed; }

.ht3-apply-form-alert {
  display: none;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.ht3-apply-form-alert--error { background: rgba(255, 79, 89, 0.14); color: #ff8a8a; }

.ht3-apply-success {
  display: none;
  text-align: center;
  padding: 20px 10px;
}
.ht3-apply-success i {
  font-size: 44px;
  color: #3ecf8e;
  margin-bottom: 16px;
}
.ht3-apply-success h3 { font-size: 20px; color: var(--ht3-heading-color); margin: 0 0 10px; }
.ht3-apply-success p { font-size: 14.5px; color: var(--ht3-ink-dim); line-height: 1.6; margin: 0; }

.ht3-apply-footer {
  text-align: center;
  padding: 28px 0 40px;
  border-top: 1px solid var(--ht3-border);
  font-size: 13px;
  color: var(--ht3-ink-soft);
}
.ht3-apply-footer a { color: var(--ht3-ink-dim); text-decoration: none; margin: 0 8px; }
.ht3-apply-footer a:hover { color: var(--ht3-accent); }

@media (max-width: 900px) {
  .ht3-apply-layout { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 70px; }
  .ht3-apply-hero h1 { font-size: 32px; }
  .ht3-apply-form-card { padding: 28px 22px; }
}