/* ============================================================
   JobsByCountry hybrid hero (2026-09-13)
   Geometry is UNCHANGED from 20260910. Only colours were moved
   onto the shared theme tokens from styles-base-20260914.css.

   RULES THIS FILE ENFORCES
   1. The scene image contains ONLY airport + person + physical
      billboard. No baked H1, search bar, links, stats or ad text.
   2. .hyb-stage always keeps the exact image ratio (1672 / 941)
      and the image is never cropped, so every percentage below
      maps 1:1 onto source-image pixels at ANY viewport width.
   3. Ad slot geometry is derived from measured pixels of the
      screen bezel interior:
         x 952 -> 1308   y 330 -> 500   (of 1672 x 941)
      Safe axis-aligned rectangle measured inside the current desktop TV.
      It stays inside the white screen, clear of the bezel and pointing hand.
   ============================================================ */

/* NOTE: these live on `body`, not `:root`. The theme tokens are defined on
   body[data-theme='dark'], and a custom property declared on :root would
   resolve against the LIGHT values only, which is exactly how the hero H1
   ended up dark-on-dark. Keep them here. */
body{
  --jbc-blue:var(--accent);
  --jbc-ink:var(--heading);
}

:root{
  /* measured billboard-screen coordinates (do not eyeball-edit).
     Geometry is theme-independent, so it stays on :root. */
  --ad-left:56.9378%;
  --ad-top:35.0691%;
  --ad-width:21.2919%;
  --ad-height:18.0659%;
}

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

/* ---------- hero shell ---------- */

.hyb-hero{
  position:relative;
  width:min(1556px, calc(100% - 48px));
  margin:34px auto 54px;
  border:1px solid var(--border);
  border-radius:28px;
  overflow:hidden;
  background:var(--surface-2);
  box-shadow:var(--shadow-lg);
}

/* Fixed-ratio, never-cropped picture box. Everything that must
   line up with the artwork is positioned inside THIS element. */
.hyb-stage{
  position:relative;
  width:100%;
  aspect-ratio:1672 / 941;
}

.hyb-picture{position:absolute;inset:0;display:block;width:100%;height:100%}

.hyb-scene{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;      /* ratio is identical -> no distortion, no crop */
  display:block;
  user-select:none;
  pointer-events:none;
}

.hyb-wash{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 26%,
    rgba(255,255,255,.42) 42%,
    rgba(255,255,255,0) 55%);
}

/* ---------- left copy ---------- */

.hyb-copy{
  position:absolute;
  z-index:5;
  left:5.5%;
  top:13.2%;
  width:44%;
  max-width:730px;
}

.hyb-eyebrow{
  margin-bottom:15px;
  color:var(--accent-ink);
  font-weight:900;
  font-size:clamp(12px,.95vw,17px);
  letter-spacing:.05em;
}

.hyb-copy h1{
  margin:0;
  font-family:'Manrope','DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--jbc-ink);
  font-size:clamp(32px,3.62vw,60px);
  line-height:1.0;
  letter-spacing:-.05em;
  text-wrap:balance;
}
.hyb-copy h1 .hyb-accent{color:var(--jbc-blue)}

.hyb-lede{
  margin:20px 0 24px;
  max-width:31em;
  color:var(--muted);
  font-size:clamp(14px,1.18vw,20px);
  line-height:1.45;
}

/* ---------- search form (real, submittable) ---------- */

.hyb-search{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr) auto;
  align-items:stretch;
  width:min(107%, 800px);
  min-height:clamp(52px,4.1vw,66px);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:15px;
  box-shadow:0 12px 30px rgba(16,42,76,.16);
}

.hyb-field{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  padding-left:clamp(12px,1.15vw,18px);
}
.hyb-field + .hyb-field{border-left:1px solid var(--border)}

.hyb-icon{
  flex:0 0 auto;
  color:var(--muted);
  font-size:clamp(16px,1.4vw,23px);
  line-height:1;
}

.hyb-field input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  padding:14px 8px 14px 0;
  color:var(--text);
  font-size:clamp(13px,1.02vw,16px);
  font-family:inherit;
}
.hyb-field input::placeholder{color:var(--muted-2)}
.hyb-field input:focus-visible{outline:0}
.hyb-field:focus-within{background:var(--surface-2)}

.hyb-search-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:6px;
  padding:0 clamp(12px,1.2vw,20px);
  min-width:clamp(120px,10.6vw,168px);
  border:0;
  border-radius:11px;
  cursor:pointer;
  background:var(--btn-accent);
  color:#fff;
  font-family:inherit;
  font-weight:900;
  font-size:clamp(13px,1.02vw,16px);
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(20,104,232,.22);
  transition:background .18s ease, transform .18s ease;
}
.hyb-search-btn:hover{background:var(--accent-strong);transform:translateY(-1px)}
.hyb-search-btn:active{transform:translateY(0)}

/* ---------- popular links ---------- */

.hyb-popular{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-top:14px;
  color:var(--text);
  font-size:clamp(12px,.92vw,15px);
}
.hyb-popular strong{font-weight:900}
.hyb-popular .hyb-sep{color:var(--muted)}

.hyb-popular a{
  color:var(--accent);
  font-weight:800;
  text-decoration:none;
  border-radius:5px;
}
.hyb-popular a:hover{text-decoration:underline}
.hyb-popular a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- AdSense area inside the physical screen ---------- */

.hyb-billboard{
  position:absolute;
  z-index:4;
  left:var(--ad-left);
  top:var(--ad-top);
  width:var(--ad-width);
  height:var(--ad-height);
  overflow:hidden;             /* nothing can spill onto the bezel */
  border:0;
  background:transparent;      /* keep the physical screen visible */
}

.hyb-ad-slot{
  position:absolute;
  inset:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}
.hyb-ad-slot > ins,
.hyb-ad-slot > .adsbygoogle{display:block;width:100%;height:100%}

.hyb-ad-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35em;
  width:100%;
  height:100%;
  text-align:center;
  color:#385b7d;
  line-height:1.2;
  background:transparent;
}
.hyb-ad-placeholder strong{
  font-family:'Manrope',system-ui,sans-serif;
  color:#2e5072;
  font-size:clamp(13px,1.75vw,30px);
}
.hyb-ad-placeholder span{color:#7188a0;font-size:clamp(10px,1.15vw,19px)}
.hyb-ad-placeholder small{color:#9fb0c2;font-size:clamp(8px,.82vw,13px)}


/* ---------- stats strip ---------- */

.hyb-stats{
  position:absolute;
  z-index:7;
  left:5.3%;
  right:5.3%;
  bottom:3.3%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:19px;
  background:var(--surface);
  box-shadow:0 12px 34px rgba(16,42,76,.16);
  backdrop-filter:blur(7px);
}

.hyb-stat{
  min-width:0;
  display:flex;
  align-items:center;
  gap:clamp(8px,.9vw,14px);
  padding:clamp(10px,1.2vw,18px) clamp(10px,1.4vw,22px);
  color:var(--text);
  text-decoration:none;
  transition:background .18s ease;
}
.hyb-stat + .hyb-stat{border-left:1px solid var(--border)}
.hyb-stat:hover{background:var(--surface-2)}

.hyb-stat-icon{
  display:grid;
  place-items:center;
  width:clamp(30px,2.9vw,46px);
  height:clamp(30px,2.9vw,46px);
  flex:0 0 auto;
  border-radius:13px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:clamp(15px,1.4vw,22px);
  font-weight:900;
}

.hyb-stat-text{min-width:0;display:flex;flex-direction:column}
.hyb-stat-text strong{
  font-family:'Manrope',system-ui,sans-serif;
  color:var(--heading);
  font-size:clamp(11px,.95vw,15px);
  white-space:nowrap;
}
.hyb-stat-text small{
  margin-top:3px;color:var(--muted);
  font-size:clamp(9px,.78vw,12px);white-space:nowrap;
}


.live-jobs-section{scroll-margin-top:105px;padding-top:0}

.hyb-directory-btn{width:100%;cursor:pointer;text-align:left;font:inherit}

/* ---------- dark theme ---------- */

body[data-theme='dark'] .hyb-wash{
  background:linear-gradient(90deg,
    rgba(7,10,16,.95) 0%,
    rgba(7,10,16,.88) 26%,
    rgba(7,10,16,.42) 42%,
    rgba(7,10,16,0) 55%);
}
/* Every dark value below now comes from the shared token set, so the
   hero can no longer drift away from the header/cards/footer. */
body[data-theme='dark'] .hyb-hero{background:var(--surface)}
body[data-theme='dark'] .hyb-stats{background:rgba(14,20,29,.96)}

/* ============================================================
   RESPONSIVE
   Below 960px the hero stops being an overlay: the copy moves
   into normal flow ABOVE the scene. The scene keeps its exact
   ratio, so the ad slot stays locked inside the bezel while the
   text stays fully readable and the artwork is never distorted.
   ============================================================ */

@media (max-width:1240px){
  .hyb-copy{top:10.5%;width:45%}
  .hyb-stats{left:4%;right:4%;bottom:3%}
}

@media (max-width:960px){
  .hyb-hero{
    width:calc(100% - 28px);
    margin:20px auto 40px;
    border-radius:22px;
    background:var(--surface);
  }

  .hyb-copy{
    position:static;
    width:auto;
    max-width:none;
    padding:26px 22px 22px;
  }
  .hyb-copy h1{font-size:clamp(32px,6.2vw,50px)}
  .hyb-lede{font-size:clamp(15px,2.1vw,18px);margin:16px 0 20px}
  .hyb-eyebrow{font-size:13px}

  .hyb-search{
    grid-template-columns:1fr 1fr;
    min-height:0;
    width:100%;
  }
  .hyb-copy .hyb-search{width:100%}
  .hyb-field input{font-size:15px;padding:15px 8px 15px 0}
  .hyb-search-btn{
    grid-column:1 / -1;
    min-height:52px;
    margin:0 6px 6px;
    font-size:15px;
  }
  .hyb-popular{font-size:14px}

  .hyb-wash{
    background:linear-gradient(180deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,0) 34%);
  }
  body[data-theme='dark'] .hyb-wash{
    background:linear-gradient(180deg,
      rgba(7,10,16,.55) 0%,
      rgba(7,10,16,0) 34%);
  }

  .hyb-stats{
    position:static;
    margin:0;
    border-radius:0;
    border-left:0;border-right:0;border-bottom:0;
    grid-template-columns:1fr 1fr;
    box-shadow:none;
    background:var(--surface);
  }
  .hyb-stat{padding:14px 16px}
  .hyb-stat:nth-child(3),
  .hyb-stat:nth-child(4){border-top:1px solid var(--border)}
  .hyb-stat:nth-child(3){border-left:0}

  .hyb-ad-placeholder strong{font-size:clamp(11px,2.4vw,20px)}
  .hyb-ad-placeholder span{font-size:clamp(9px,1.7vw,14px)}
  .hyb-ad-placeholder small{display:none}
}

/* Mobile uses a dedicated portrait crop of the SAME airport scene.
   The crop makes the physical screen large enough for an in-screen responsive ad. */
@media (max-width:760px){
  .hyb-stage{aspect-ratio:1122 / 1402;}
  .hyb-billboard{
    left:29.9465%;
    top:26.4622%;
    width:46.0784%;
    height:20.5421%;
  }
  .hyb-wash{
    background:linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0) 22%);
  }
  body[data-theme='dark'] .hyb-wash{
    background:linear-gradient(180deg,
      rgba(7,10,16,.14) 0%,
      rgba(7,10,16,0) 22%);
  }
  .mock-ad{
    grid-template-columns:minmax(0,1.18fr) minmax(78px,.82fr);
    gap:8px;
    padding:10px 11px;
  }
  .mock-ad-sponsored{font-size:8px}
  .mock-ad-title{font-size:clamp(13px,4.1vw,17px);max-width:12ch}
  .mock-ad-text{display:block;font-size:clamp(7px,2.2vw,9px);max-width:22ch}
  .mock-ad-cta{font-size:8px;padding:5px 8px;border-radius:5px}
  .mock-globe{width:min(74%,92px)}
  .mock-plane{font-size:15px}
  .mock-briefcase{width:23px;height:18px;font-size:7px}
  .mock-ad-badge{font-size:6px}
}

@media (max-width:560px){
  .hyb-hero{width:calc(100% - 16px);border-radius:18px}
  .hyb-copy{padding:20px 16px 18px}
  .hyb-copy h1{font-size:clamp(28px,8.4vw,40px)}
  .hyb-lede{font-size:15px;margin:14px 0 18px}

  .hyb-search{
    display:flex;
    flex-direction:column;
    gap:9px;
    overflow:visible;
    background:transparent;
    border:0;
    box-shadow:none;
  }
  .hyb-field{
    min-height:54px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--surface);
    padding-left:14px;
    box-shadow:0 8px 18px rgba(16,42,76,.08);
  }
  .hyb-field + .hyb-field{border-left:1px solid var(--border)}
  .hyb-search-btn{width:100%;min-height:54px;margin:0}

  .hyb-popular{font-size:13px;gap:5px 8px}

  .hyb-stats{grid-template-columns:1fr 1fr}
  .hyb-stat{gap:9px;padding:12px 12px}
  .hyb-stat-icon{width:34px;height:34px;font-size:16px}
  .hyb-stat-text strong{font-size:12px;white-space:normal}
  .hyb-stat-text small{font-size:10px;white-space:normal}
}


/* ============================================================
   MOCK RESPONSIVE DISPLAY AD , TEST ONLY
   Purpose: verify that a real HTML ad-like layout fits entirely
   inside #hero-ad-slot before AdSense is installed.
   ============================================================ */

.mock-ad{
  position:relative;
  box-sizing:border-box;
  width:100%;
  height:100%;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(68px,.85fr);
  align-items:center;
  gap:clamp(6px,.7vw,12px);
  padding:clamp(9px,1vw,16px);
  /* The mock ad renders inside a lit TV screen: it stays light in both
     themes on purpose, so it needs its own opaque background colour. */
  background-color:#ffffff;
  background-image:
    radial-gradient(circle at 80% 35%, rgba(20,104,232,.11), transparent 35%),
    linear-gradient(135deg,#ffffff 0%,#f6faff 100%);
  color:#173a5d;
  font-family:'Manrope','DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

.mock-ad-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(2px,.3vw,5px);
}

.mock-ad-sponsored{
  color:#5b7086;
  font-size:clamp(7px,.58vw,10px);
  font-weight:700;
  letter-spacing:.02em;
}

.mock-ad-title{
  display:block;
  max-width:13ch;
  color:#102a4c;
  font-size:clamp(12px,1.27vw,22px);
  line-height:1.05;
  letter-spacing:-.025em;
}

.mock-ad-text{
  display:block;
  max-width:24ch;
  color:#5f7892;
  font-size:clamp(7px,.66vw,11px);
  line-height:1.2;
}

.mock-ad-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35em;
  margin-top:clamp(2px,.28vw,5px);
  padding:clamp(4px,.42vw,7px) clamp(7px,.7vw,12px);
  border-radius:clamp(4px,.45vw,7px);
  background:#1468e8;
  color:#fff;
  font-size:clamp(7px,.62vw,10px);
  font-weight:800;
  box-shadow:0 4px 10px rgba(20,104,232,.18);
  white-space:nowrap;
}

.mock-ad-art{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mock-globe{
  position:relative;
  width:min(72%,110px);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 34%,rgba(255,255,255,.92) 0 9%,transparent 10%),
    linear-gradient(145deg,#67a8ff,#1468e8);
  box-shadow:
    inset -8px -8px 18px rgba(6,68,160,.16),
    0 7px 18px rgba(20,104,232,.15);
  animation:mockFloat 4.5s ease-in-out infinite;
}

.mock-globe::before,
.mock-globe::after{
  content:"";
  position:absolute;
  inset:12% 18%;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
}

.mock-globe::after{
  inset:18% 8%;
  transform:rotate(90deg);
}

.mock-globe-line{
  position:absolute;
  left:5%;
  right:5%;
  top:49%;
  height:1px;
  background:rgba(255,255,255,.62);
  transform-origin:center;
}

.mock-globe-line-a{transform:rotate(17deg)}
.mock-globe-line-b{transform:rotate(-17deg)}

.mock-plane{
  position:absolute;
  right:2%;
  top:4%;
  color:#0b4d9f;
  font-size:clamp(12px,1.3vw,22px);
  transform:rotate(-12deg);
  animation:mockPlane 5s ease-in-out infinite;
}

.mock-briefcase{
  position:absolute;
  right:8%;
  bottom:4%;
  display:grid;
  place-items:center;
  width:clamp(18px,2.1vw,34px);
  height:clamp(15px,1.7vw,28px);
  border-radius:4px;
  background:#102a4c;
  color:#fff;
  font-size:clamp(7px,.7vw,11px);
  box-shadow:0 5px 12px rgba(16,42,76,.16);
}

.mock-ad-badge{
  position:absolute;
  right:5px;
  bottom:3px;
  color:#67788c;
  font-size:clamp(5px,.45vw,7px);
  line-height:1;
}

@keyframes mockFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

@keyframes mockPlane{
  0%,100%{transform:translate(0,0) rotate(-12deg)}
  50%{transform:translate(-7px,4px) rotate(-7deg)}
}

/* No pointer handling on the test ad: it is purely a fit preview. */
.mock-ad{pointer-events:none}

/* Keep the mock readable at tighter desktop widths. */
@media(max-width:1100px){
  .mock-ad{
    grid-template-columns:minmax(0,1.25fr) minmax(58px,.75fr);
    padding:8px;
  }
  .mock-ad-text{display:none}
}

.mock-ad-mobile-preview{
  min-height:250px;
  grid-template-columns:1fr minmax(100px,.55fr);
  padding:22px;
}
.mock-ad-mobile-preview .mock-ad-title{font-size:24px;max-width:none}
.mock-ad-mobile-preview .mock-ad-text{display:block;font-size:13px}
.mock-ad-mobile-preview .mock-ad-sponsored{font-size:11px}
.mock-ad-mobile-preview .mock-ad-cta{font-size:12px;padding:9px 14px}
.mock-ad-mobile-preview .mock-globe{width:min(78%,130px)}


/* FINAL MOBILE OVERRIDES , keep ad readable inside the physical screen. */
@media (max-width:760px){
  .mock-ad-text{display:block}
}


/* ============================================================
   MOBILE FINAL FIT , dedicated 1122x1402 artwork
   Screen safe rectangle: x336→853, y371→659.
   This leaves a small inset from the black bezel on all sides.
   The real AdSense <ins> can replace .mock-ad later.
   ============================================================ */
@media (max-width:760px){
  .hyb-stage{
    aspect-ratio:1122 / 1402;
  }

  .hyb-billboard{
    left:29.9465%;
    top:26.4622%;
    width:46.0784%;
    height:20.5421%;
    overflow:hidden;
    border:0;
    background:transparent;
  }

  .hyb-ad-slot{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:transparent;
  }

  .mock-ad{
    width:100%;
    height:100%;
    grid-template-columns:minmax(0,1.12fr) minmax(86px,.88fr);
    gap:8px;
    padding:10px 11px;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  .mock-ad-sponsored{font-size:8px}
  .mock-ad-title{font-size:clamp(13px,4vw,18px);max-width:12ch}
  .mock-ad-text{display:block;font-size:clamp(7px,2.1vw,10px);max-width:22ch}
  .mock-ad-cta{font-size:8px;padding:5px 8px;border-radius:5px}
  .mock-globe{width:min(74%,96px)}
  .mock-plane{font-size:15px}
  .mock-briefcase{width:23px;height:18px;font-size:7px}
  .mock-ad-badge{font-size:6px}
}

@media (max-width:430px){
  .mock-ad{
    grid-template-columns:minmax(0,1.16fr) minmax(72px,.84fr);
    gap:6px;
    padding:8px 9px;
  }
  .mock-ad-title{font-size:clamp(12px,4vw,16px)}
  .mock-ad-text{font-size:clamp(7px,2vw,9px)}
  .mock-globe{width:min(72%,84px)}
}

@media (max-width:390px){
  .mock-ad-text{display:none}
  .mock-ad-title{max-width:11ch}
}


/* ============================================================
   DARK THEME NOTE , the mock ad inside the billboard keeps its
   light appearance in dark mode ON PURPOSE: it renders inside a
   physically lit TV screen in the artwork. Inverting it would
   make the screen look switched off. The same will be true of a
   real AdSense unit, which we cannot restyle anyway.
   ============================================================ */

/* ============================================================
   Mobile hero (2026-10-06): the search form sits ON the image,
   like the desktop overlay. Title stays above, the form is laid
   over the lower (floor) part of the portrait scene so the
   billboard / ad slot (26%-47% of the stage) is never covered.
   .hyb-copy becomes display:contents so its children can share
   one grid cell with the stage. No HTML duplication needed.
   ============================================================ */
@media (max-width:760px){
  .hyb-hero{display:grid;grid-template-columns:minmax(0,1fr)}
  .hyb-copy{display:contents}

  .hyb-hero .hyb-eyebrow{grid-row:1;margin:0;padding:20px 16px 0}
  .hyb-hero .hyb-copy h1{grid-row:2;margin:0;padding:10px 16px 0}
  .hyb-hero .hyb-lede{grid-row:3;margin:0;padding:12px 16px 16px}

  .hyb-hero .hyb-stage{grid-row:4;grid-column:1}

  .hyb-hero .hyb-copy .hyb-search{
    grid-row:4;
    grid-column:1;
    align-self:end;
    z-index:6;
    position:relative;
    width:auto;
    margin:0 12px 12px;
    padding:12px;
    gap:9px;
    overflow:visible;
    border:1px solid rgba(255,255,255,.7);
    border-radius:18px;
    background:rgba(255,255,255,.78);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:0 16px 36px rgba(7,10,16,.30);
  }
  body[data-theme='dark'] .hyb-hero .hyb-copy .hyb-search{
    border-color:rgba(255,255,255,.14);
    background:rgba(10,14,21,.72);
  }

  .hyb-hero .hyb-popular{grid-row:5;margin:0;padding:14px 16px 16px}
  .hyb-hero .hyb-stats{grid-row:6}
}

/* ---------- SVG icons (2026-10-06): replace the unicode glyphs ---------- */
.hyb-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);font-size:clamp(19px,1.5vw,24px)}
.hyb-icon svg{display:block;width:1em;height:1em}
.hyb-btn-icon{display:inline-flex;align-items:center}
.hyb-btn-icon svg{display:block;width:19px;height:19px}
.hyb-stat-icon{display:inline-flex;align-items:center;justify-content:center}
.hyb-stat-icon svg{display:block;width:19px;height:19px}
@media (max-width:560px){
  .hyb-icon{font-size:21px}
  .hyb-stat-icon svg{width:18px;height:18px}
}

/* hero Search Jobs button: readable hover in dark mode */
body[data-theme='dark'] .hyb-search-btn:hover{background:#1a5fd0}