/* ==========================================================================
   HireUA style kit (v0.3.36) — approved style board, Oct 9 2026.
   "Navy dot-matrix line art on a fading dot grid, one yellow map pin."
   - Dotted role icon tiles (.hu-tile, inline SVG, Option A navy tile)
   - Role cards with icon on top (.hu-card-icon inside .hu-card / .hu-pod)
   - Full-width yellow "Book a call" band (.hu-cta-band)
   - "Get the hiring guide" strip (.hu-guide-strip)
   - Stat callout cards, dark navy + yellow (.hu-stat-grid--dark)
   - Pay table Option B, vertical Junior | Mid | Senior (.hu-ptb)
   - Section-head breathing room (.hu-section-head--stack)
   Loaded with landing.css on every landing page and in the editor.
   ========================================================================== */

/* Section heads: no crammed 3-line titles, real space before the content */
.hu-section .hu-section-head { margin-bottom: 44px; }
.hu-section .hu-section-head.hu-section-head--stack { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.hu-section .hu-section-head--stack .hu-section-title { max-width: 920px; }
.hu-section .hu-section-head--stack .hu-section-dek { max-width: 720px; }
.hu-section .hu-section-head--stack .hu-section-head-main { max-width: 920px; }
.wp-block-group.hu-section.hu-section--tight { padding: 44px 0; }
.hu-section .hu-section-sub { margin: 64px 0 28px !important; color: var(--hu-navy); font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.hu-section--navy .hu-section-sub { color: var(--hu-white); }

/* Icon tiles */
.hu-tile { display: block; flex: none; width: 72px; height: 72px; overflow: visible; }
.hu-card-icon { margin: 0 0 18px !important; line-height: 0; }
.hu-card-icon .hu-tile { width: 64px; height: 64px; }
.hu-section--navy .hu-card-icon .hu-tile rect:first-of-type { stroke: rgba(var(--hu-white-rgb), .14); stroke-width: 1; }
.hu-section .hu-card:has(> .hu-card-icon), .hu-section .hu-pod:has(> .hu-card-icon) { display: flex; flex-direction: column; }
.hu-section .hu-card > .hu-card-icon + .hu-card-num { margin-top: 0 !important; }
.hu-icon-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 28px !important; }
.hu-icon-row .hu-tile { width: 56px; height: 56px; }

/* Full-width yellow CTA band */
.wp-block-group.hu-section.hu-cta-band { position: relative; overflow: hidden; isolation: isolate; padding: 88px 0; background: var(--hu-yellow); color: var(--hu-navy); border-top: 1px solid rgba(var(--hu-navy-rgb), .12); border-bottom: 1px solid rgba(var(--hu-navy-rgb), .12); }
.hu-cta-band::before { content: ""; position: absolute; inset: 0 0 0 38%; z-index: -1; background-image: radial-gradient(rgba(var(--hu-navy-rgb), .14) 1.4px, transparent 1.6px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(ellipse 65% 85% at 75% 50%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 65% 85% at 75% 50%, #000 25%, transparent 75%); pointer-events: none; }
.hu-cta-band .hu-cta-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.hu-cta-band :is(.hu-cta-band-grid, .hu-cta-band-copy, .hu-cta-band-actions) > * { margin-block: 0; }
.hu-cta-band .hu-eyebrow { color: var(--hu-blue); }
.hu-cta-band .hu-cta-band-title { margin-top: 10px !important; max-width: 820px; color: var(--hu-navy); font-size: clamp(38px, 5.2vw, 62px); font-weight: 850; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.hu-cta-band .hu-cta-band-text { margin-top: 18px !important; max-width: 620px; color: var(--hu-on-yellow); font-size: 19px; line-height: 1.55; }
.hu-cta-band .hu-cta-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hu-cta-band .hu-cta-band-note { color: var(--hu-on-yellow); font-size: 13px; font-weight: 650; }
.hu-section.hu-cta-band .hu-btn-lg > .wp-block-button__link, .hu-section .hu-btn-lg > .wp-block-button__link { min-height: 62px; padding: 0 32px; font-size: 18px; white-space: nowrap; }

/* Hiring-guide strip */
.hu-guide-strip { display: flex; align-items: center; gap: 22px; padding: 22px 26px; border: 1px solid var(--hu-line); border-radius: 12px; background: var(--hu-white); box-shadow: 0 1px 0 rgba(var(--hu-navy-rgb), .03); }
.hu-guide-strip > *, .hu-guide-strip-copy > * { margin-block: 0 !important; }
.hu-guide-strip-icon { flex: none; line-height: 0; }
.hu-guide-strip-icon .hu-tile { width: 64px; height: 64px; }
.hu-guide-strip-copy { flex: 1; min-width: 0; }
.hu-guide-strip-title { color: var(--hu-navy); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.hu-guide-strip-text { margin-top: 2px !important; color: var(--hu-text-body); font-size: 15px; line-height: 1.5; }
.hu-guide-strip .wp-block-buttons { flex: none; }

/* Stat callout cards (approved: dark navy + yellow) */
.hu-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 8px !important; }
.hu-stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hu-stat-card { position: relative; overflow: hidden; isolation: isolate; padding: 30px 28px 26px; border: 1px solid var(--hu-line); border-radius: 12px; background: var(--hu-white); }
.hu-stat-card > * { margin-block: 0 !important; }
.hu-stat-card::before { content: ""; position: absolute; right: -20px; top: -20px; width: 190px; height: 190px; z-index: -1; background-image: radial-gradient(rgba(var(--hu-blue-rgb), .2) 1.3px, transparent 1.5px); background-size: 12px 12px; -webkit-mask-image: radial-gradient(circle at 65% 35%, #000 15%, transparent 68%); mask-image: radial-gradient(circle at 65% 35%, #000 15%, transparent 68%); }
.hu-stat-card::after { content: ""; position: absolute; right: 54px; top: 44px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, var(--hu-yellow) 0 4px, var(--hu-yellow-edge) 4px 4.6px, rgba(var(--hu-yellow-rgb), .35) 4.6px 6.6px, transparent 7px); box-shadow: inset 0 0 0 1.4px rgba(var(--hu-yellow-rgb), .7); }
.hu-stat-big { color: var(--hu-navy); font-size: clamp(46px, 5vw, 64px); font-weight: 850; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.hu-stat-big em { font-style: normal; color: inherit; background: linear-gradient(transparent 62%, var(--hu-yellow) 62%, var(--hu-yellow) 92%, transparent 92%); padding: 0 2px; }
.hu-stat-label { margin-top: 14px !important; color: var(--hu-navy); font-size: 16px; font-weight: 750; line-height: 1.35; }
.hu-stat-sub { margin-top: 6px !important; color: var(--hu-muted); font-size: 14px; line-height: 1.5; }
.hu-stat-grid--dark .hu-stat-card { background: linear-gradient(150deg, var(--hu-navy) 0%, var(--hu-navy-2) 100%); border-color: var(--hu-navy); }
.hu-stat-grid--dark .hu-stat-card::before { background-image: radial-gradient(rgba(var(--hu-white-rgb), .14) 1.3px, transparent 1.5px); }
.hu-stat-grid--dark :is(.hu-stat-big, .hu-stat-label) { color: var(--hu-white); }
.hu-stat-grid--dark .hu-stat-big em { background: none; color: var(--hu-yellow); padding: 0; }
.hu-stat-grid--dark .hu-stat-sub { color: var(--hu-on-dark-muted); }
.hu-section--navy .hu-stat-grid--dark .hu-stat-card { border-color: rgba(var(--hu-white-rgb), .12); }

/* Pay table, Option B: vertical columns Junior | Mid | Senior */
.hu-ptb { margin: 0; color: var(--hu-navy); }
.hu-ptb-flag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-radius: 12px 12px 0 0; background: var(--hu-navy); color: var(--hu-white); font-size: 15px; font-weight: 750; }
.hu-ptb-flag-title { display: inline-flex; align-items: center; gap: 12px; }
.hu-ptb-flag .hu-tile { width: 36px; height: 36px; }
.hu-ptb-flag-note { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--hu-yellow); color: var(--hu-navy); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--hu-yellow-edge); }
.hu-ptb-grid { display: grid; grid-template-columns: 190px repeat(3, minmax(0, 1fr)); grid-template-rows: auto repeat(var(--hu-ptb-rows, 5), auto); column-gap: 18px; padding: 18px; background: var(--hu-surface); border: 1px solid var(--hu-line); border-top: 0; border-radius: 0 0 12px 12px; }
.hu-ptb-col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; overflow: hidden; background: var(--hu-white); border: 1px solid var(--hu-line); border-radius: 12px; }
.hu-ptb-col--labels { background: transparent; border-color: transparent; }
.hu-ptb-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--hu-line); }
.hu-ptb-col--labels .hu-ptb-head { border-color: transparent; }
.hu-ptb-head .hu-tile { width: 48px; height: 48px; }
.hu-ptb-head b { display: block; margin-bottom: 6px; color: var(--hu-navy); font-size: 23px; font-weight: 850; line-height: 1.1; letter-spacing: -.02em; }
.hu-lvl-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.hu-lvl-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--hu-line); }
.hu-lvl-dots i.on { background: var(--hu-navy); }
.hu-lvl-dots i.y { background: var(--hu-yellow); box-shadow: 0 0 0 1px var(--hu-yellow-edge); }
.hu-ptb-cell { padding: 18px 22px; border-bottom: 1px solid var(--hu-line); color: var(--hu-text-body); font-size: 17px; line-height: 1.5; }
.hu-ptb-col .hu-ptb-cell:last-child { border-bottom: 0; }
.hu-ptb-cell strong { color: var(--hu-navy); font-weight: 800; }
.hu-ptb-col--labels .hu-ptb-cell { padding-left: 4px; color: var(--hu-muted); font-size: 12.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.hu-ptb-cell--pay { color: var(--hu-navy); font-size: 27px; font-weight: 850; letter-spacing: -.02em; white-space: nowrap; }
.hu-ptb-cell--pay small { display: block; color: var(--hu-muted); font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: normal; }
.hu-ptb-col--feat { border: 2px solid var(--hu-navy); box-shadow: 0 10px 28px rgba(var(--hu-navy-rgb), .10); }
.hu-ptb-col--feat .hu-ptb-head { background: var(--hu-navy); }
.hu-ptb-col--feat .hu-ptb-head b { color: var(--hu-white); }
.hu-ptb-col--feat .hu-lvl-dots i { background: rgba(var(--hu-white-rgb), .25); }
.hu-ptb-col--feat .hu-lvl-dots i.on { background: var(--hu-white); }
.hu-ptb-col--feat .hu-ptb-cell--pay { background: #FFFDE6; }
.hu-ptb-list { margin: 0; padding: 0; list-style: none; }
.hu-ptb-list li { position: relative; margin: 0 0 8px; padding-left: 20px; line-height: 1.45; }
.hu-ptb-list li:last-child { margin-bottom: 0; }
.hu-ptb-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 99px; background: var(--hu-navy); }
.hu-ptb-note { margin: 14px 0 0 !important; color: #475569; font-size: 14px; line-height: 1.55; }
.hu-ptb-note a { color: var(--hu-blue); font-weight: 800; text-decoration: none; }

@media (max-width: 1100px) {
	.hu-ptb-grid { grid-template-columns: 150px repeat(3, minmax(0, 1fr)); column-gap: 12px; padding: 12px; }
	.hu-ptb-cell--pay { font-size: 23px; white-space: normal; }
	.hu-stat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
	.hu-cta-band .hu-cta-band-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.wp-block-group.hu-section.hu-cta-band { padding: 60px 0; }
	.hu-cta-band::before { inset: 0; }
	.hu-stat-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.hu-ptb-flag { flex-direction: column; align-items: flex-start; }
	.hu-ptb-grid { display: flex; flex-direction: column; gap: 18px; padding: 14px; }
	.hu-ptb-col { display: block; }
	.hu-ptb-col--labels { display: none; }
	.hu-ptb-cell { padding: 14px 20px; font-size: 16px; }
	.hu-ptb-cell[data-l]::before { content: attr(data-l); display: block; margin-bottom: 6px; color: var(--hu-muted); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
	.hu-ptb-cell--pay { font-size: 25px; }
	.hu-guide-strip { flex-wrap: wrap; padding: 20px; }
	.hu-guide-strip-copy { flex-basis: calc(100% - 86px); }
	.hu-guide-strip .wp-block-buttons { flex-basis: 100%; }
	.hu-stat-grid--4 { grid-template-columns: minmax(0, 1fr); }
	.hu-section .hu-section-head { margin-bottom: 32px; }
}
@media (max-width: 400px) {
	.hu-section .hu-btn-lg > .wp-block-button__link { padding: 0 22px; font-size: 16px; }
	.hu-guide-strip .wp-block-button__link { white-space: nowrap; }
}
.hu-ptb-guide { display: block; margin-top: 4px; color: var(--hu-blue); font-size: 11.5px; font-weight: 750; letter-spacing: .02em; text-transform: none; }
.hu-section .hu-case-grid + .hu-section-head, .hu-section .hu-testimonial-grid + .hu-section-head, .hu-section .hu-directory-grid + .hu-section-head { margin-top: 76px !important; }
.hu-section .hu-story-lead > .hu-section-title { margin-bottom: 36px !important; }

/* Directory-card stats: number on its own line (was inline per page; PM + GD had none, so "15–20 hrsA week" ran together) */
.hu-dir-card .hu-dir-stat { margin: 0 0 10px !important; color: #475569; font-size: 12px !important; font-weight: 700; line-height: 1.35 !important; }
.hu-dir-card .hu-dir-stat strong { display: block; margin-bottom: 4px; color: var(--hu-blue); font-size: 25px; font-weight: 850; line-height: 1.05; letter-spacing: -.035em; white-space: nowrap; }
.hu-dir-card .hu-dir-stat br { display: none; }
.hu-dir-card > .hu-card-icon { margin-bottom: 16px !important; }

/* v0.3.45 safety: classic-theme Group inner-container must not break these grids/flex rows (GD stat cards stacked into one column). */
:is(.hu-stat-grid, .hu-cta-band-grid, .hu-cta-band-copy, .hu-cta-band-actions) > .wp-block-group__inner-container { display: contents; }

/* v0.3.59 position-page QA */
span.hu-card-icon { display: block; line-height: 0; margin: 0 0 16px; }
span.hu-card-icon svg { width: 56px; height: 56px; }
.hu-stat-big { white-space: normal; overflow-wrap: anywhere; font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -.04em; }
.hu-stat-big .hu-to { font-size: .62em; font-weight: 700; letter-spacing: 0; margin: 0 .18em; }
.hu-section .hu-case-card > .hu-case-panel { align-items: center; justify-content: center; text-align: center; }
.hu-section .hu-case-panel > * { margin-left: auto; margin-right: auto; }
/* Safety net: any leftover big blue quote card renders as a white review card. */
.hu-testimonial-card--quote { background: #fff !important; color: var(--hu-navy) !important; border: 1px solid #E3E8F2 !important; box-shadow: 0 10px 30px rgba(7,21,42,.06) !important; }
.hu-testimonial-card--quote :is(p, blockquote, cite, strong, span) { color: var(--hu-navy) !important; }
.hu-testimonial-card--quote::before, .hu-testimonial-card--quote::after { display: none !important; }
.hu-testimonial-grid--1 { grid-template-columns: 1fr !important; }
.hu-testimonial-grid--1 > * { max-width: none; }

/* v0.3.60 Batch 3: light body text on dark navy sections, site-wide */
.hu-section--navy :is(.hu-section-dek, .hu-section-foot, .hu-pricing-note, .hu-cta-band-note, .hu-hub-intro-main > p:not([class*="hu-"]), .hu-section-head p:not(.hu-eyebrow):not(.hu-section-title)),
:is(.hu-section--dark, .hu-section--electric) :is(.hu-section-dek, .hu-section-foot, .hu-cta-band-note) { color: #C4D0E1 !important; }
/* v0.3.75 Dorka QA: the yellow Book-a-call band was caught by the dark rule above (#C4D0E1 on yellow, 1.3:1). Dark ink on yellow (~10:1, WCAG AA). */
.hu-cta-band:not(.hu-section--navy):not(.hu-section--dark):not(.hu-section--electric) .hu-cta-band-note { color: var(--hu-on-yellow) !important; }
.hu-section--navy .hu-section-dek a, .hu-section--navy .hu-section-foot a { color: #fff; }
/* Long case stats (e.g. "From $1M to $10M+") wrap/shrink instead of clipping */
.hu-section .hu-case-stat { white-space: normal !important; overflow-wrap: anywhere; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; }
/* v0.3.60 Batch 2: role tables (Role / Price / Guide) */
.hu-role-table { margin: 8px 0 0; overflow-x: auto; }
.hu-role-table table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #E3E8F2; border-radius: 14px; overflow: hidden; font-size: 16px; }
.hu-role-table th, .hu-role-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid #EDF1F7; vertical-align: middle; }
.hu-role-table thead th { background: #07152A; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hu-role-table tbody th { color: var(--hu-navy, #07152A); font-weight: 800; }
.hu-role-table tbody td:nth-child(2) { font-weight: 700; color: var(--hu-navy, #07152A); white-space: nowrap; }
.hu-role-table tbody tr:last-child > * { border-bottom: 0; }
.hu-role-table tbody tr:nth-child(even) > * { background: #F7F9FC; }
.hu-role-table a { color: var(--hu-blue, #155EEF); font-weight: 800; text-decoration: none; white-space: nowrap; }
.hu-role-table a:is(:hover, :focus-visible) { text-decoration: underline; }
.hu-role-table-unit { margin: 10px 2px 0 !important; font-size: 13px; color: #5B6B82; }
.hu-role-table + .wp-block-buttons, .hu-wrap > .hu-btn-row { margin-top: 26px !important; }
@media (max-width: 640px) {
	.hu-role-table table, .hu-role-table thead, .hu-role-table tbody, .hu-role-table tr, .hu-role-table th, .hu-role-table td { display: block; }
	.hu-role-table thead { display: none; }
	.hu-role-table tbody tr { padding: 14px 16px; border-bottom: 1px solid #EDF1F7; }
	.hu-role-table tbody tr > * { padding: 2px 0; border: 0 !important; background: none !important; }
	.hu-role-table tbody td:nth-child(2) { white-space: normal; }
}

/* v0.3.60 Batch 4: responsive headlines, no orphan/short lines (e.g. EA "Your" / "New") */
:is(.hu-hero-title, .hu-section-title, .hu-hub-title, .hu-cta-band-title, .hu-story-title, .hu-cat-feature-title, .hu-tpl-home .section-heading h2, .hu-tpl-home h1) { text-wrap: balance; }
:is(.hu-section-dek, .hu-hero-dek, .hu-card-text, .hu-case-story) { text-wrap: pretty; }
@media (max-width: 768px) {
	.hu-page-hero .hu-hero-title br, .hu-section-title br { display: none; }
	.hu-page-hero .hu-hero-title { font-size: clamp(32px, 9vw, 40px) !important; line-height: 1.05 !important; overflow-wrap: normal; hyphens: manual; }
	.hu-page-hero .hu-hero-title mark { display: inline; }
	.hu-section-title { font-size: clamp(28px, 7.6vw, 36px); }
}

/* v0.3.63: navy quote cards (landing.css gives .hu-testimonial-copy a navy fill) need light text; style-kit forced navy. */
.hu-section .hu-testimonial-card--quote > .hu-testimonial-copy :is(p, blockquote, cite, span) { color: #FFFFFF !important; }
.hu-section .hu-testimonial-card--quote > .hu-testimonial-copy .hu-testimonial-person { color: #C4D0E1 !important; }
.hu-section .hu-testimonial-card--quote > .hu-testimonial-copy :is(strong, .hu-case-link a) { color: var(--hu-yellow) !important; }