/* ============================================================
   FINAS Manpower – INNER PAGE KIT
   ------------------------------------------------------------
   Loaded after tokens.css on every inner page and template.
   Direction C (Jobs First) is the base language: blue→navy
   gradient headers, dashed gold route arcs, 16px cards with
   navy-tinted lift, red reserved for the single page action.

   Never redefine a token here. Page-scoped one-offs live in the
   page's own <style> block under a p-* namespace.
   ============================================================ */

/* ----------------------------------------------------------------
   1. PAGE HERO  – the inner-page equivalent of the C homepage hero
   ---------------------------------------------------------------- */
.page-hero {
  background:linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 100%);
  color:#fff; position:relative; overflow:hidden;
  padding-block:clamp(2.75rem, 4.5vw, 4.5rem) clamp(3rem, 5vw, 5rem);
  padding-inline:var(--gutter);
}
/* the signature dashed route arc, echoing the logo's triple arc */
.page-hero::after {
  content:""; position:absolute; width:620px; height:620px; border-radius:50%;
  border:1.5px dashed rgba(249,222,59,.2);
  top:-340px; inset-inline-end:-200px; pointer-events:none;
}
.page-hero__inner { max-width:var(--container-width); margin-inline:auto; position:relative; z-index:1; }
.page-hero h1 {
  color:#fff; font-size:var(--text-3xl); font-weight:800;
  letter-spacing:-.02em; max-width:19ch; margin-block:var(--s-3) var(--s-3);
}
.page-hero h1 em { font-style:normal; color:var(--gold); }
.page-hero p { color:rgba(255,255,255,.85); max-width:60ch; font-size:var(--text-lg); line-height:1.55; }
.page-hero__actions { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5); }

/* Two-column hero: copy + a card, panel, or figure */
.page-hero--split .page-hero__inner {
  display:grid; grid-template-columns:1.2fr .9fr; gap:clamp(2rem,4vw,4rem); align-items:center;
}
@media (max-width:900px){ .page-hero--split .page-hero__inner { grid-template-columns:1fr; } }

/* Navy variant – for the employer track and legal pages */
.page-hero--navy { background:linear-gradient(150deg, var(--navy) 0%, var(--blue-deep) 100%); }
/* Compact variant – utility, legal, search, 404 */
.page-hero--compact { padding-block:clamp(2rem,3vw,3rem) clamp(2.5rem,3.5vw,3.5rem); }
.page-hero--compact h1 { font-size:var(--text-2xl); }
/* Photo-backed variant: set --hero-image on the element */
.page-hero--photo {
  background-image:linear-gradient(150deg, rgba(23,71,138,.93), rgba(15,50,102,.9)), var(--hero-image);
  background-size:cover; background-position:center;
}

/* ----------------------------------------------------------------
   2. BREADCRUMBS  (BreadcrumbList schema on the real build)
   ---------------------------------------------------------------- */
.breadcrumb { font-size:var(--text-xs); font-weight:600; }
.breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:.4em .55em; }
.breadcrumb li { display:inline-flex; align-items:center; gap:.55em; }
.breadcrumb li:not(:last-child)::after { content:"/"; color:rgba(255,255,255,.4); }
.breadcrumb a { color:rgba(255,255,255,.72); transition:color var(--dur-fast) ease; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb [aria-current="page"] { color:var(--gold); }
/* on light grounds */
.breadcrumb--light li:not(:last-child)::after { color:var(--ink-faint); }
.breadcrumb--light a { color:var(--ink-faint); }
.breadcrumb--light a:hover { color:var(--blue); }
.breadcrumb--light [aria-current="page"] { color:var(--blue); }

/* ----------------------------------------------------------------
   3. TRUST RIBBON  (licence + office + named team – playbook §09)
   ---------------------------------------------------------------- */
.trust-ribbon {
  background:var(--navy); color:rgba(255,255,255,.85);
  padding-block:var(--s-3); padding-inline:var(--gutter); font-size:var(--text-s);
}
.trust-ribbon__row {
  max-width:var(--container-width); margin-inline:auto;
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6);
  align-items:center; justify-content:center; text-align:center;
}
.trust-ribbon__row span { display:inline-flex; align-items:center; gap:.5em; font-weight:600; }
.trust-ribbon__row svg { width:16px; height:16px; color:var(--gold); flex:none; }

/* ----------------------------------------------------------------
   4. PROSE  – long-form column for guides, legal, blog posts
   ---------------------------------------------------------------- */
.prose { max-width:68ch; color:var(--ink-soft); }
.prose > * + * { margin-top:var(--s-3); }
.prose h2 { font-size:var(--text-xl); color:var(--navy); margin-top:var(--s-6); }
.prose h3 { font-size:var(--text-lg); color:var(--navy); margin-top:var(--s-5); }
.prose h4 { font-size:var(--text-base); color:var(--navy); margin-top:var(--s-4); }
.prose p { line-height:var(--leading-body); }
.prose strong { color:var(--ink); font-weight:600; }
.prose a:not(.btn):not(.link-cta) {
  color:var(--blue); font-weight:600;
  border-bottom:1.5px solid var(--blue-tint-20);
  transition:border-color var(--dur-fast) ease;
}
.prose a:not(.btn):not(.link-cta):hover { border-bottom-color:var(--blue); }
.prose ul, .prose ol { display:flex; flex-direction:column; gap:.6rem; }
.prose li { position:relative; padding-inline-start:1.6em; line-height:1.6; }
.prose ul > li::before {
  content:""; position:absolute; inset-inline-start:.35em; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--blue);
}
.prose ol { counter-reset:pl; }
.prose ol > li { counter-increment:pl; }
.prose ol > li::before {
  content:counter(pl) "."; position:absolute; inset-inline-start:0; top:0;
  font-family:var(--display); font-weight:700; color:var(--blue); font-size:var(--text-s);
}
.prose blockquote {
  border-inline-start:3px solid var(--gold); padding:var(--s-2) 0 var(--s-2) var(--s-4);
  font-size:var(--text-lg); color:var(--ink); font-style:italic;
}
.prose hr { border:none; height:1px; background:var(--line); margin-block:var(--s-5); }
.prose figure { margin-block:var(--s-5); }
.prose figure img { border-radius:var(--r-card); width:100%; }
.prose figcaption { font-size:var(--text-xs); color:var(--ink-faint); margin-top:var(--s-2); }
/* snippet-ready answer block (playbook §08: answer first, elaborate second) */
.prose .answer-first, .answer-first {
  background:var(--blue-tint-05); border-inline-start:3px solid var(--blue);
  border-radius:0 var(--r-m) var(--r-m) 0; padding:var(--s-3) var(--s-4);
  font-size:var(--text-base); color:var(--ink);
}

/* ----------------------------------------------------------------
   5. SECTION HEADS + LAYOUT HELPERS
   ---------------------------------------------------------------- */
.section-head--row {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s-4); max-width:var(--container-width); margin-inline:auto;
  flex-wrap:wrap; margin-bottom:var(--s-5);
}
.section-head--row .section-head { margin-bottom:0; }
.alt-band { background:var(--cloud); }
.dark-band { background:linear-gradient(150deg, var(--navy), var(--blue-deep)); color:#fff; position:relative; overflow:hidden; }
.dark-band h2, .dark-band h3 { color:#fff; }
.dark-band p { color:rgba(255,255,255,.82); }
.dark-band::after {
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(249,222,59,.12), transparent 65%);
  bottom:-240px; inset-inline-start:-160px; pointer-events:none;
}
.dark-band > * { position:relative; z-index:1; }

/* Content + sidebar (blog post, job detail, team member) */
.with-aside {
  max-width:var(--container-width); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(2rem,4vw,4rem);
  align-items:start;
}
.with-aside__side { position:sticky; top:104px; display:flex; flex-direction:column; gap:var(--s-4); }
@media (max-width:960px){
  .with-aside { grid-template-columns:1fr; }
  .with-aside__side { position:static; }
}

/* Split media + copy */
.split {
  max-width:var(--container-width); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4.5rem); align-items:center;
}
.split--reverse .split__media { order:-1; }
.split__media img { border-radius:var(--r-card); box-shadow:var(--shadow-m); width:100%; }
@media (max-width:860px){
  .split { grid-template-columns:1fr; }
  .split--reverse .split__media { order:0; }
}

/* ----------------------------------------------------------------
   6. CARDS
   ---------------------------------------------------------------- */
.grid { max-width:var(--container-width); margin-inline:auto; display:grid; gap:var(--s-4); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .grid--4 { grid-template-columns:repeat(2,1fr); } .grid--3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .grid--2, .grid--3, .grid--4 { grid-template-columns:1fr; } }

.card {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5); display:flex; flex-direction:column; gap:var(--s-2);
  transition:transform var(--dur-normal) var(--ease-out-soft),
             box-shadow var(--dur-normal) var(--ease-out-soft),
             border-color var(--dur-fast) ease;
}
.card--lift:hover { transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--blue-tint-20); }
.card h3 { font-size:var(--text-base); }
.card p { font-size:var(--text-s); color:var(--ink-soft); }
.card__icon {
  width:46px; height:46px; border-radius:var(--r-m); flex:none;
  background:var(--blue-tint-05); color:var(--blue);
  display:grid; place-items:center; margin-bottom:var(--s-1);
}
.card__icon svg { width:22px; height:22px; }
.card--gold .card__icon { background:var(--gold-tint-15); color:var(--gold-deep); }
.card__media { margin:calc(var(--s-4) * -1) calc(var(--s-5) * -1) var(--s-2); overflow:hidden; }
.card__media img {
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--r-card) var(--r-card) 0 0;
  transition:transform var(--dur-slow) var(--ease-out-expo);
}
.card--lift:hover .card__media img { transform:scale(1.04); }
.card__foot { margin-top:auto; padding-top:var(--s-2); }

/* Numbered card – counters, no manual numbering */
.numbered { counter-reset:ncard; }
.numbered .card::before {
  counter-increment:ncard; content:counter(ncard, decimal-leading-zero);
  font-family:var(--display); font-weight:800; font-size:var(--text-xl);
  color:var(--blue-tint-20); line-height:1; display:block;
}
.numbered .card:last-child::before { color:var(--gold-deep); }

/* ----------------------------------------------------------------
   7. STAT STRIP  (playbook §08 – publish the numbers, cite them)
   ---------------------------------------------------------------- */
.stat-strip { max-width:var(--container-width); margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); }
.stat { border-top:2px solid var(--blue-tint-20); padding-top:var(--s-3); }
.stat b { display:block; font-family:var(--display); font-weight:800; font-size:var(--text-2xl); color:var(--blue); line-height:1; }
.stat span { display:block; font-size:var(--text-xs); color:var(--ink-soft); margin-top:.5em; line-height:1.5; }
.stat cite { display:block; font-size:var(--text-xs); color:var(--ink-faint); font-style:normal; margin-top:.35em; }
.dark-band .stat { border-top-color:rgba(249,222,59,.45); }
.dark-band .stat b { color:var(--gold); }
.dark-band .stat span { color:rgba(255,255,255,.8); }
.dark-band .stat cite { color:rgba(255,255,255,.55); }
@media (max-width:820px){ .stat-strip { grid-template-columns:1fr 1fr; } }

/* ----------------------------------------------------------------
   8. STEP RAIL  – the applicant / employer procedures
   ---------------------------------------------------------------- */
.step-rail { max-width:var(--container-narrow); margin-inline:auto; counter-reset:srail; display:grid; gap:0; }
.step {
  counter-increment:srail; position:relative;
  padding:var(--s-4) 0 var(--s-5) clamp(3.4rem, 6vw, 4.75rem);
}
.step::before {
  content:counter(srail, decimal-leading-zero);
  position:absolute; inset-inline-start:0; top:var(--s-4);
  width:clamp(2.4rem,4vw,3rem); height:clamp(2.4rem,4vw,3rem); border-radius:50%;
  background:var(--blue); color:#fff; display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:var(--text-s); z-index:1;
}
/* dashed route line joining the steps */
.step::after {
  content:""; position:absolute; inset-inline-start:calc(clamp(2.4rem,4vw,3rem) / 2 - 1px);
  top:calc(var(--s-4) + clamp(2.4rem,4vw,3rem)); bottom:0; width:2px;
  background-image:linear-gradient(180deg, var(--blue-tint-20) 55%, transparent 45%);
  background-size:2px 10px;
}
.step:last-child::after { display:none; }
.step:last-child::before { background:var(--gold); color:var(--navy); }
.step h3 { font-size:var(--text-lg); margin-bottom:var(--s-2); }
.step p { color:var(--ink-soft); font-size:var(--text-s); }
.step__meta {
  display:inline-flex; align-items:center; gap:.45em; margin-top:var(--s-2);
  font-size:var(--text-xs); font-weight:700; color:var(--blue);
  background:var(--blue-tint-05); padding:.35em 1em; border-radius:var(--r-pill);
}

/* ----------------------------------------------------------------
   9. ACCORDION  (FAQPage schema on the real build)
   ---------------------------------------------------------------- */
.acc { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
.acc + .acc { margin-top:var(--s-2); }
.acc summary {
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;
  gap:var(--s-3); padding:var(--s-3) var(--s-4);
  font-weight:700; font-family:var(--display); color:var(--navy); font-size:var(--text-base);
}
.acc summary::-webkit-details-marker { display:none; }
.acc summary::after {
  content:"+"; font-size:1.4em; color:var(--red); line-height:1; flex:none;
  transition:transform var(--dur-normal) var(--ease-out-soft);
}
.acc[open] summary::after { transform:rotate(45deg); }
.acc[open] summary { color:var(--blue); }
.acc .body { padding:0 var(--s-4) var(--s-4); color:var(--ink-soft); font-size:var(--text-s); }
.acc .body > * + * { margin-top:var(--s-2); }

/* ----------------------------------------------------------------
   10. JOB ROWS + FILTER PILLS  (shared with the C homepage pattern)
   ---------------------------------------------------------------- */
.filters { display:flex; flex-wrap:wrap; gap:.5rem; max-width:var(--container-width); margin-inline:auto; }
.filter-pill {
  font-size:var(--text-xs); font-weight:700; padding:.5em 1.2em; border-radius:var(--r-pill);
  background:var(--paper); border:1px solid var(--line); color:var(--ink-soft);
  transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  cursor:pointer;
}
.filter-pill:hover { border-color:var(--blue); color:var(--blue); }
.filter-pill[aria-pressed="true"] { background:var(--blue); border-color:var(--blue); color:#fff; }

.job-row {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:var(--s-4) var(--s-5); display:flex; align-items:center; gap:var(--s-4);
  transition:transform var(--dur-normal) var(--ease-out-soft),
             box-shadow var(--dur-normal) var(--ease-out-soft), border-color var(--dur-fast) ease;
}
.job-row:hover { transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:var(--blue-tint-20); }
.job-row__flag {
  width:52px; height:52px; border-radius:var(--r-m); background:var(--blue-tint-05);
  display:grid; place-items:center; font-size:1.5rem; flex:none;
}
.job-row__body { flex:1; min-width:0; }
.job-row h3 { font-size:var(--text-base); }
.job-row .meta {
  font-size:var(--text-xs); color:var(--ink-soft); font-weight:600;
  margin-top:.25em; display:flex; flex-wrap:wrap; gap:.4em 1em;
}
.job-row .meta .ind { color:var(--blue); }
.job-row__apply {
  flex:none; font-weight:700; font-size:var(--text-s); color:var(--red);
  display:inline-flex; align-items:center; gap:.4rem;
  transition:gap var(--dur-fast) var(--ease-out-soft), color var(--dur-fast) ease;
}
.job-row__apply::after { content:"→"; }
[dir="rtl"] .job-row__apply::after { content:"←"; }
.job-row__apply:hover { gap:.7rem; color:var(--red-deep); }
@media (max-width:620px){
  .job-row { flex-wrap:wrap; gap:var(--s-3); }
  .job-row__body { flex-basis:calc(100% - 52px - var(--s-3)); }
  .job-row__apply { margin-inline-start:auto; }
}

/* ----------------------------------------------------------------
   11. TAGS, BADGES, PLACEHOLDER MARKER
   ---------------------------------------------------------------- */
.tag {
  display:inline-flex; align-items:center; gap:.4em;
  font-size:var(--text-xs); font-weight:700; padding:.35em 1em;
  border-radius:var(--r-pill); background:var(--blue-tint-05); color:var(--blue);
}
.tag--gold { background:var(--gold-tint-15); color:var(--gold-deep); }
.tag--red  { background:var(--red-tint-10);  color:var(--red-deep); }
.tag--ghost { background:transparent; border:1px solid var(--line); color:var(--ink-soft); }
.tag--on-dark { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22); }

/* Review-only marker: makes it obvious to the client which data is dummy */
.placeholder-note {
  display:inline-flex; align-items:center; gap:.5em;
  font-size:var(--text-xs); font-weight:700; color:var(--gold-deep);
  background:var(--gold-tint-15); border:1px dashed var(--gold-deep);
  padding:.4em 1em; border-radius:var(--r-pill);
}
.placeholder-note svg { width:14px; height:14px; }

/* ----------------------------------------------------------------
   12. FORMS  (contact, applicant, employer inquiry)
   ---------------------------------------------------------------- */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3) var(--s-4); }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field--full { grid-column:1 / -1; }
.field label { font-size:var(--text-xs); font-weight:700; color:var(--ink); letter-spacing:.02em; }
.field .req { color:var(--red); }
.field input, .field select, .field textarea {
  font:inherit; font-size:var(--text-s); color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-s);
  padding:.8rem 1rem; width:100%; min-height:48px;
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field textarea { min-height:132px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint-10);
}
.field .hint { font-size:var(--text-xs); color:var(--ink-faint); }
.field--file input[type="file"] { padding:.6rem; background:var(--cloud); }
.consent { display:flex; gap:.7rem; align-items:flex-start; font-size:var(--text-xs); color:var(--ink-soft); }
.consent input { width:18px; height:18px; min-height:0; flex:none; margin-top:.15em; accent-color:var(--blue); }
.consent a { color:var(--blue); font-weight:600; text-decoration:underline; }
@media (max-width:640px){ .form-grid { grid-template-columns:1fr; } }

/* ----------------------------------------------------------------
   13. CTA BAND  – one per page, closes the journey
   ---------------------------------------------------------------- */
.cta-band {
  background:linear-gradient(150deg, var(--navy), var(--blue-deep));
  color:#fff; position:relative; overflow:hidden;
  padding-block:var(--section-space-m); padding-inline:var(--gutter);
}
.cta-band::after {
  content:""; position:absolute; width:560px; height:560px; border-radius:50%;
  border:1.5px dashed rgba(249,222,59,.18); top:-300px; inset-inline-end:-180px; pointer-events:none;
}
.cta-band__inner {
  max-width:var(--container-width); margin-inline:auto; position:relative; z-index:1;
  display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center;
}
.cta-band h2 { color:#fff; font-size:var(--text-2xl); margin-block:var(--s-3) var(--s-3); }
.cta-band p { color:rgba(255,255,255,.85); max-width:52ch; }
.cta-band__actions { display:flex; flex-wrap:wrap; gap:var(--s-3); }
@media (max-width:860px){ .cta-band__inner { grid-template-columns:1fr; } }

/* ----------------------------------------------------------------
   14. PAGINATION
   ---------------------------------------------------------------- */
.pagination { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; justify-content:center; margin-top:var(--s-6); }
.pagination a, .pagination span {
  min-width:44px; min-height:44px; padding:0 .9rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-s); font-size:var(--text-s); font-weight:700; color:var(--ink-soft);
  border:1px solid var(--line); background:var(--paper);
  transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.pagination a:hover { border-color:var(--blue); color:var(--blue); }
.pagination [aria-current="page"] { background:var(--blue); border-color:var(--blue); color:#fff; }
.pagination .gap { border:none; background:none; min-width:24px; padding:0; }

/* ----------------------------------------------------------------
   15. TEAM CARDS + QR  (SOW signature feature)
   ---------------------------------------------------------------- */
.team-card {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--dur-normal) var(--ease-out-soft), box-shadow var(--dur-normal) var(--ease-out-soft);
}
.team-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-m); }
.team-card__photo { position:relative; background:var(--blue-tint-05); }
.team-card__photo img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.team-card__qr {
  position:absolute; inset-block-end:var(--s-3); inset-inline-end:var(--s-3);
  width:62px; height:62px; padding:5px; border-radius:var(--r-s);
  background:#fff; box-shadow:var(--shadow-m);
}
.team-card__body { padding:var(--s-4); display:flex; flex-direction:column; gap:.3rem; flex:1; }
.team-card__body h3 { font-size:var(--text-base); }
.team-card__role { font-size:var(--text-xs); font-weight:700; color:var(--blue); letter-spacing:.06em; text-transform:uppercase; }
.team-card__links { display:flex; gap:var(--s-3); margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid var(--line-soft); }
.team-card__links a { font-size:var(--text-xs); font-weight:700; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.4em; }
.team-card__links a:hover { color:var(--blue); }
.team-card__links svg { width:14px; height:14px; }

/* the QR block is drawn in CSS – no image request, no scanner promises */
.qr-mock {
  --qr-size:150px;
  width:var(--qr-size); height:var(--qr-size); flex:none;
  background:
    conic-gradient(from 90deg at 12% 12%, var(--navy) 25%, transparent 0) 0 0 / 34% 34% no-repeat,
    conic-gradient(from 180deg at 88% 12%, var(--navy) 25%, transparent 0) 100% 0 / 34% 34% no-repeat,
    conic-gradient(from 0deg at 12% 88%, var(--navy) 25%, transparent 0) 0 100% / 34% 34% no-repeat,
    repeating-conic-gradient(var(--navy) 0 25%, #fff 0 50%) 0 0 / 13% 13%;
  border:6px solid #fff; border-radius:var(--r-s); box-shadow:var(--shadow-s);
}

/* ----------------------------------------------------------------
   16. QUOTE BLOCK  (director quote – gold TAHANAN moment)
   ---------------------------------------------------------------- */
.quote-band { background:var(--gold); color:var(--navy); padding-block:var(--section-space-s); padding-inline:var(--gutter); }
.quote-band__inner { max-width:var(--container-narrow); margin-inline:auto; text-align:center; }
.quote-band p {
  font-family:var(--display); font-weight:700; font-size:var(--text-2xl);
  line-height:1.2; letter-spacing:-.015em; color:var(--navy); text-wrap:balance;
}
.quote-band cite { display:block; margin-top:var(--s-4); font-style:normal; font-size:var(--text-s); font-weight:700; }
.quote-band cite span { display:block; font-weight:400; opacity:.72; }

/* ----------------------------------------------------------------
   17. TABLES  (requirements, fees structure, comparisons)
   ---------------------------------------------------------------- */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m); background:var(--paper); }
table.data { width:100%; border-collapse:collapse; font-size:var(--text-s); min-width:560px; }
table.data th {
  background:var(--cloud); text-align:start; font-weight:700; color:var(--ink);
  padding:.9rem var(--s-3); font-size:var(--text-xs); letter-spacing:.05em; text-transform:uppercase;
  border-bottom:2px solid var(--line);
}
table.data td { padding:.85rem var(--s-3); border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top; }
table.data tr:last-child td { border-bottom:none; }
table.data td b { color:var(--ink); }

/* ----------------------------------------------------------------
   18. CALLOUTS  – compliance notes, warnings, tips
   ---------------------------------------------------------------- */
.callout { border-radius:var(--r-m); padding:var(--s-3) var(--s-4); border:1px solid var(--line); background:var(--paper); }
.callout__label { font-size:var(--text-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5em; display:block; }
.callout p { font-size:var(--text-s); }
.callout p + p { margin-top:var(--s-2); }
.callout--info { background:var(--blue-tint-05); border-color:var(--blue-tint-20); }
.callout--info .callout__label { color:var(--blue); }
.callout--warn { background:var(--red-tint-10); border-color:#F3C9C6; }
.callout--warn .callout__label { color:var(--red-deep); }
.callout--warn p { color:#7A241F; }
.callout--gold { background:var(--gold-tint-15); border-color:#E8D46A; }
.callout--gold .callout__label { color:var(--gold-deep); }

/* ----------------------------------------------------------------
   19. EMPTY STATE  (no results – search, filtered jobs)
   ---------------------------------------------------------------- */
.empty {
  max-width:var(--container-narrow); margin-inline:auto; text-align:center;
  background:var(--paper); border:1px dashed var(--line); border-radius:var(--r-card);
  padding:clamp(2.5rem,5vw,4rem) var(--s-5);
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3);
}
.empty svg { width:44px; height:44px; color:var(--blue-tint-20); }
.empty h2 { font-size:var(--text-xl); }
.empty p { color:var(--ink-soft); max-width:48ch; }

/* ----------------------------------------------------------------
   20. SEARCH FIELD  (reused in hero + search page)
   ---------------------------------------------------------------- */
.search-panel {
  background:var(--paper); border-radius:var(--r-card); padding:var(--s-3);
  box-shadow:var(--shadow-lift); display:flex; gap:var(--s-2); flex-wrap:wrap;
}
.search-panel__field {
  flex:1; min-width:180px; display:flex; align-items:center; gap:.6rem;
  background:var(--cloud); border:1.5px solid var(--line); border-radius:var(--r-pill);
  padding:.75rem 1.15rem;
}
.search-panel__field svg { width:18px; height:18px; color:var(--ink-faint); flex:none; }
.search-panel__field input, .search-panel__field select {
  border:none; background:none; font:inherit; font-size:var(--text-s);
  color:var(--ink); width:100%; outline:none; min-height:auto; padding:0;
}
.search-panel__field:focus-within { border-color:var(--blue); }

/* ----------------------------------------------------------------
   21. PRINT  – team vCards and job details get printed in the office
   ---------------------------------------------------------------- */
@media print {
  .topbar, .site-header, .site-footer, .chat-fab, .cta-band, .breadcrumb, .skip-link { display:none !important; }
  .page-hero { background:none !important; color:var(--ink) !important; padding-block:0; }
  .page-hero h1 { color:var(--navy) !important; }
  .page-hero p { color:var(--ink-soft) !important; }
  .page-hero::after { display:none; }
  body { background:#fff; }
  a { text-decoration:underline; }
}