:root{
  --ink:#102A43; --ink-50:#F3F7FB; --ink-100:#D9E5F0; --ink-400:#526777; --ink-600:#234A68; --ink-900:#071A2B;
  --paper:#F8FAFC; --paper2:#EAF0F5;
  --gold:#C99A2E; --gold-light:#E0B95B; --gold-dark:#9A721C;
  --teal:#1769AA; --teal-light:#2B82C4; --teal-dark:#0F4F85;
  --clay:#C94B45; --leaf:#2F8F5B; --line:#D7E0E8;
  box-sizing:border-box;
}
*{box-sizing:inherit; margin:0; padding:0;}
body{
  font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--paper); color:#16201C; min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit; text-decoration:none;}
.font-display{font-family:'Fraunces', Georgia, serif;}
.font-mono{font-family:'IBM Plex Mono', monospace;}
main{flex:1;}
.container{max-width:1152px; margin:0 auto; padding:0 20px;}

header.site{border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; background:rgba(255,255,255,0.96); backdrop-filter:blur(6px);}
.header-inner{max-width:1152px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; justify-content:space-between;}
.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  height:48px;
}

.logo img{
  display:block;
  width:auto;
  height:48px;
  max-width:180px;
  object-fit:contain;
}
nav.main-nav{display:flex; gap:24px; font-size:14px; font-weight:500; color:var(--ink-600);}
nav.main-nav a:hover{color:var(--ink);}
.header-actions{display:flex; align-items:center; gap:12px; font-size:14px;}

.btn{display:inline-block; border-radius:10px; font-weight:500; font-size:14px; padding:12px 24px; border:none; cursor:pointer; font-family:inherit;}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--ink-600);}
.btn-outline{border:1px solid var(--ink); color:var(--ink); background:transparent;}
.btn-outline:hover{background:#fff;}
.btn-gold{background:var(--gold); color:var(--ink-900);}
.btn-gold:hover{background:var(--gold-dark); color:var(--paper);}
.btn-sm{padding:8px 16px; font-size:13px; border-radius:8px;}
.btn:disabled{opacity:0.6; cursor:default;}
.link-teal{color:var(--teal);}
.link-teal:hover{color:var(--teal-dark); text-decoration:underline;}
.link-clay{color:var(--clay);}

.card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px;}

.hero{border-bottom:1px solid var(--line);}
.hero-inner{padding:64px 0 56px;}
.eyebrow{color:var(--teal); font-weight:500; margin-bottom:16px; font-size:15px;}
h1{font-family:'Fraunces', serif; font-weight:500; font-size:44px; line-height:1.1; color:var(--ink); max-width:640px;}
.lede{color:var(--ink-400); margin-top:20px; max-width:520px; font-size:18px; line-height:1.5;}
.cta-row{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}

.search-card{margin-top:40px; padding:20px;}
.search-grid{display:grid; grid-template-columns:2fr 1.3fr 1.3fr auto; gap:12px;}
.search-grid input, .search-grid select{border:1px solid var(--line); border-radius:10px; padding:12px 16px; font-size:14px; font-family:inherit; background:#fff; width:100%;}
.popular{margin-top:16px; font-size:14px; display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--ink-400);}
.popular a{color:var(--teal); text-decoration:underline; text-underline-offset:2px;}

section.block{padding:56px 0;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:8px;}
h2{font-family:'Fraunces',serif; font-size:26px; color:var(--ink); font-weight:500;}
h3{font-family:'Fraunces',serif; font-size:19px; color:var(--ink); font-weight:500;}

.job-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:800px){ .job-grid{grid-template-columns:1fr;} }
.job-card{border-left:2px solid var(--line); background:rgba(255,255,255,0.6); border-radius:0 10px 10px 0; padding:16px 20px; display:block; position:relative;}
.job-card:hover{border-color:var(--gold); background:#fff;}
.job-top{display:flex; justify-content:space-between; gap:12px;}
.job-title{font-family:'Fraunces',serif; font-size:18px; color:var(--ink);}
.job-sub{font-size:13px; color:var(--ink-400); margin-top:2px;}
.featured-tag{font-size:11px; font-weight:500; color:var(--gold-dark); background:rgba(184,144,47,0.1); padding:4px 8px; border-radius:6px; white-space:nowrap;}
.job-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.tag{font-size:11px; padding:4px 8px; border-radius:6px; background:var(--paper2); color:var(--ink-400);}
.pill{font-size:13px; padding:6px 14px; border-radius:999px; background:var(--paper2); color:var(--ink-600); display:inline-block;}
.job-foot{display:flex; justify-content:space-between; align-items:center; margin-top:12px;}
.salary{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-600);}
.openings{font-size:12px; color:var(--ink-400);}
.match-badge{position:absolute; top:14px; right:14px; font-family:'IBM Plex Mono',monospace; font-size:11px; background:rgba(31,111,99,0.1); color:var(--teal-dark); padding:4px 8px; border-radius:6px;}

.audience{background:var(--ink); color:var(--paper);}
.audience-inner{padding:64px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:32px;}
@media (max-width:800px){ .audience-inner{grid-template-columns:1fr 1fr;} }
.audience h3{color:#fff;}
.audience p{font-size:14px; color:var(--ink-100);}

.form-field{display:block; margin-bottom:16px;}
.form-field label{font-size:14px; font-weight:500; color:var(--ink-600); display:block; margin-bottom:4px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 16px; font-size:14px; font-family:inherit; background:#fff;
}
.form-field .helper{font-size:12px; color:var(--ink-400);}
.form-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
@media (max-width:600px){ .form-grid-2{grid-template-columns:1fr;} }
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-600); margin-bottom:8px;}

.alert{border-radius:10px; padding:12px 16px; margin-bottom:20px; font-size:14px;}
.alert-error{background:rgba(178,58,52,0.08); border:1px solid rgba(178,58,52,0.25); color:var(--clay);}
.alert-success{background:rgba(46,125,83,0.08); border:1px solid rgba(46,125,83,0.25); color:var(--leaf);}
.alert-info{background:rgba(184,144,47,0.08); border:1px solid rgba(184,144,47,0.25); color:var(--ink-600);}

.badge{font-size:11px; padding:4px 10px; border-radius:999px; display:inline-block;}
.badge-pending{background:rgba(184,144,47,0.1); color:var(--gold-dark);}
.badge-approved{background:rgba(46,125,83,0.1); color:var(--leaf);}
.badge-rejected{background:rgba(178,58,52,0.1); color:var(--clay);}
.badge-closed{background:var(--paper2); color:var(--ink-400);}
.badge-neutral{background:var(--paper2); color:var(--ink-600);}

.dashboard-layout{display:grid; grid-template-columns:220px 1fr; gap:32px; padding:40px 0;}
@media (max-width:800px){ .dashboard-layout{grid-template-columns:1fr;} }
.dash-nav a{display:block; padding:10px 12px; border-radius:10px; font-size:14px; color:var(--ink-600); margin-bottom:2px;}
.dash-nav a:hover{background:var(--paper2);}
.dash-nav a.active{background:var(--ink); color:var(--paper);}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px;}
@media (max-width:700px){ .stat-grid{grid-template-columns:1fr 1fr;} }
.stat-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px;}
.stat-label{font-size:12px; color:var(--ink-400); margin-bottom:4px;}
.stat-value{font-family:'Fraunces',serif; font-size:26px; color:var(--ink);}

.list-row{background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px;}
.list-actions{display:flex; align-items:center; gap:12px; font-size:13px;}

footer.site{border-top:1px solid var(--line); background:var(--paper2); margin-top:60px;}
.footer-inner{padding:40px 0; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; font-size:14px;}
@media (max-width:700px){ .footer-inner{grid-template-columns:1fr 1fr;} }
.footer-inner h4{font-weight:500; color:var(--ink); margin-bottom:12px; font-size:14px;}
.footer-inner ul{list-style:none;}
.footer-inner li{margin-bottom:8px; color:var(--ink-400);}
.footer-bottom{border-top:1px solid var(--line); text-align:center; padding:16px; font-size:12px; color:var(--ink-400);}

.breadcrumb{font-size:13px; color:var(--ink-400); margin-bottom:20px;}
.filter-pills{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;}
.filter-pill{padding:8px 16px; border-radius:999px; font-size:13px; border:1px solid var(--line); color:var(--ink-400);}
.filter-pill.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.pagination{display:flex; justify-content:center; gap:8px; margin-top:32px;}
.page-link{width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--line); font-size:14px; color:var(--ink-400);}
.page-link.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}


/* =========================
   Clarity Counts — Home refresh
   ========================= */
.home-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 25%, rgba(43,130,196,.13), transparent 27%),
    radial-gradient(circle at 92% 78%, rgba(201,154,46,.12), transparent 24%),
    linear-gradient(135deg,#F8FAFC 0%,#F3F7FB 52%,#EAF2F8 100%);
  border-bottom:1px solid var(--line);
}
.home-hero:before{
  content:"";
  position:absolute; width:520px; height:520px; border-radius:50%;
  right:-220px; top:-260px; background:rgba(23,105,170,.07);
}
.home-hero:after{
  content:""; position:absolute; width:330px; height:330px; border-radius:50%;
  right:9%; bottom:-245px; border:1px solid rgba(201,154,46,.30);
}
.home-hero-inner{
  position:relative; z-index:1; min-height:570px; padding:72px 0 42px;
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);
  gap:40px; align-items:center;
}
.home-eyebrow{
  display:inline-flex; align-items:center; gap:9px; color:var(--teal);
  font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:18px;
}
.home-eyebrow:before{content:""; width:34px; height:2px; background:var(--gold);}
.home-hero h1{
  max-width:700px; font-size:56px; line-height:1.03; letter-spacing:-.02em;
}
.home-hero h1 .accent{color:var(--gold);}
.home-lede{max-width:590px; font-size:18px; line-height:1.65; margin-top:22px; color:var(--ink-400);}
.home-hero .cta-row{margin-top:30px;}
.home-hero .btn{padding:13px 22px; border-radius:9px;}
.home-trust{
  display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:28px;
  color:var(--ink-400); font-size:12px; font-weight:600;
}
.home-trust span{display:flex; align-items:center; gap:7px;}
.home-trust i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block;}

.hero-visual{position:relative; min-height:390px;}
.hero-orbit{
  position:absolute; inset:25px 20px 0 20px; border:1px solid rgba(23,105,170,.13);
  border-radius:28px; transform:rotate(-4deg);
}
.hero-orbit:after{
  content:""; position:absolute; width:190px;height:190px;border-radius:50%;
  right:-70px; top:55px; border:1px solid rgba(201,154,46,.35);
}
.hero-panel{
  position:absolute; left:12%; right:7%; top:54px; bottom:12px; border-radius:24px;
  background:rgba(255,255,255,.88); border:1px solid rgba(215,224,232,.95);
  box-shadow:0 22px 60px rgba(16,42,67,.12); padding:24px;
}
.hero-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.hero-panel-title{font-family:'Fraunces',serif;color:var(--ink);font-size:23px;}
.hero-mini{font-size:11px;color:var(--teal);background:#EAF4FB;padding:6px 9px;border-radius:999px;font-weight:700;}
.hero-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.hero-stat{background:#F5F8FB;border:1px solid #E4EBF1;border-radius:12px;padding:13px;}
.hero-stat strong{display:block;font-family:'Fraunces',serif;font-size:24px;color:var(--ink);}
.hero-stat span{font-size:10px;color:var(--ink-400);}
.hero-bars{height:150px;display:flex;align-items:flex-end;gap:10px;padding:12px 8px 4px;border-bottom:1px solid var(--line);}
.hero-bars span{flex:1;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,var(--teal-light),var(--teal));}
.hero-bars span:nth-child(1){height:35%}.hero-bars span:nth-child(2){height:52%}.hero-bars span:nth-child(3){height:43%}
.hero-bars span:nth-child(4){height:69%}.hero-bars span:nth-child(5){height:61%}.hero-bars span:nth-child(6){height:86%}
.hero-floating{
  position:absolute; z-index:3; display:flex; align-items:center; gap:11px;
  padding:12px 15px; border-radius:14px; background:#fff; border:1px solid var(--line);
  box-shadow:0 14px 32px rgba(16,42,67,.12); font-size:12px; color:var(--ink);
}
.hero-floating strong{display:block;font-size:13px}.hero-floating small{color:var(--ink-400);}
.hero-floating.one{left:0;top:72px}.hero-floating.two{right:-4px;top:160px}.hero-floating.three{left:2px;bottom:18px;}
.float-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#EAF4FB;color:var(--teal);font-weight:800;}
.hero-floating.two .float-icon,.hero-floating.three .float-icon{background:#FBF4DE;color:var(--gold-dark);}

.home-search-wrap{position:relative;z-index:5;margin-top:-2px;}
.home-search{
  padding:18px; border-radius:18px; background:#fff; border:1px solid var(--line);
  box-shadow:0 18px 42px rgba(16,42,67,.10);
}
.home-search .search-grid{grid-template-columns:2fr 1.2fr 1.2fr auto;}
.home-search input,.home-search select{height:48px;}
.home-search .btn{height:48px;min-width:110px;}
.home-search .popular{margin:14px 4px 2px;}

.home-section{padding:72px 0;}
.home-section.alt{background:#F3F7FB;border-top:1px solid #E2EAF1;border-bottom:1px solid #E2EAF1;}
.home-section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;}
.home-kicker{color:var(--teal);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px;}
.home-section-head h2{font-size:34px;}
.home-section-head p{max-width:500px;color:var(--ink-400);font-size:14px;line-height:1.6;}

.home-job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.home-job-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;transition:.2s ease;display:flex;flex-direction:column;min-height:190px;}
.home-job-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(16,42,67,.09);border-color:#BCD0E0;}
.home-job-card .job-title{font-size:19px;}
.home-job-card .job-foot{margin-top:auto;padding-top:16px;}
.home-job-arrow{color:var(--teal);font-size:18px;}

.home-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.home-feature{padding:22px;border:1px solid var(--line);background:#fff;border-radius:16px;}
.home-feature-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#EAF4FB;color:var(--teal);font-weight:800;margin-bottom:16px;}
.home-feature:nth-child(2) .home-feature-icon,.home-feature:nth-child(4) .home-feature-icon{background:#FBF4DE;color:var(--gold-dark);}
.home-feature h3{font-family:'IBM Plex Sans',sans-serif;font-size:16px;font-weight:700;margin-bottom:7px;}
.home-feature p{font-size:13px;line-height:1.55;color:var(--ink-400);}

.home-audience{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.15);border-radius:18px;overflow:hidden;}
.home-audience-item{padding:27px;background:rgba(7,26,43,.22);}
.home-audience-item:first-child{background:rgba(7,26,43,.05);}
.home-audience-item h3{color:#fff;font-size:18px;margin-bottom:8px;}
.home-audience-item p{color:#D9E5F0;font-size:13px;line-height:1.55;}

.home-training{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}
.home-training h2{font-size:36px;line-height:1.1;margin-bottom:16px;}
.home-training p{color:var(--ink-400);line-height:1.7;font-size:15px;}
.training-list{margin-top:24px;display:grid;gap:10px;}
.training-list li{list-style:none;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:13px;color:var(--ink-600);}
.training-list b{color:var(--teal);margin-right:8px;}
.training-card{background:linear-gradient(145deg,#102A43,#234A68);border-radius:22px;padding:30px;color:#fff;box-shadow:0 22px 45px rgba(16,42,67,.18);}
.training-card .price{font-family:'Fraunces',serif;font-size:42px;color:#fff;margin:8px 0 4px;}
.training-card .small{color:#D9E5F0;font-size:13px;}
.training-card ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:11px;}
.training-card li{font-size:13px;color:#F3F7FB;}
.training-card li:before{content:"✓";color:var(--gold-light);font-weight:700;margin-right:8px;}

.home-bottom-cta{background:linear-gradient(135deg,#0B2338,#174D73);color:#fff;border-radius:24px;padding:42px 46px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.home-bottom-cta h2{color:#fff;font-size:32px;margin-bottom:8px;}
.home-bottom-cta p{color:#D9E5F0;max-width:650px;line-height:1.6;font-size:14px;}
.home-bottom-cta .btn-gold{white-space:nowrap;}

/* ==========================================================
   RESPONSIVE SYSTEM
   The same layout automatically adapts to desktop, tablet,
   mobile and very small phones. Desktop styles above remain
   unchanged; these rules progressively reflow the page.
   ========================================================== */

/* Prevent accidental page-level horizontal overflow */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}

.container,
.header-inner {
  width: 100%;
  max-width: 1152px;
}

/* Large tablet / small laptop */
@media (max-width: 1100px) {
  .container { padding-left: 24px; padding-right: 24px; }
  .header-inner { padding-left: 24px; padding-right: 24px; }

  nav.main-nav {
    gap: 16px;
    font-size: 13px;
  }

  .home-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
    gap: 28px;
  }

  .home-hero h1 {
    font-size: clamp(44px, 5vw, 56px);
  }

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

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

/* Tablet */
@media (max-width: 900px) {
  .header-inner {
    min-height: 64px;
    height: auto;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  nav.main-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    gap: 20px;
    padding: 5px 0 7px;
    scrollbar-width: thin;
  }

  nav.main-nav a {
    flex: 0 0 auto;
  }

  .home-hero-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 54px;
    padding-bottom: 42px;
  }

  .home-hero h1 {
    max-width: 760px;
  }

  .home-lede {
    max-width: 700px;
  }

  .hero-visual {
    width: min(100%, 620px);
    min-height: 390px;
    margin: 4px auto 0;
  }

  .home-search .search-grid {
    grid-template-columns: 1.6fr 1fr 1fr auto;
  }

  .home-training {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .home-audience {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 650px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .logo {
    height: 42px;
    max-width: 170px;
  }

  .logo img {
    height: 42px;
    max-width: 165px;
  }

  .header-actions {
    gap: 6px;
    font-size: 13px;
  }

  .header-actions .btn {
    padding: 9px 12px;
  }

  nav.main-nav {
    gap: 16px;
    font-size: 13px;
    -webkit-overflow-scrolling: touch;
  }

  .home-hero-inner {
    padding-top: 40px;
    padding-bottom: 28px;
    gap: 12px;
  }

  .home-eyebrow {
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 14px;
  }

  .home-eyebrow:before {
    width: 24px;
    flex: 0 0 24px;
  }

  .home-hero h1 {
    font-size: clamp(34px, 10vw, 42px);
    line-height: 1.06;
    letter-spacing: -.025em;
  }

  .home-lede {
    font-size: 16px;
    line-height: 1.55;
    margin-top: 17px;
  }

  .home-hero .cta-row {
    margin-top: 22px;
    gap: 9px;
  }

  .home-hero .btn {
    padding: 12px 15px;
    font-size: 13px;
  }

  .home-trust {
    gap: 9px 14px;
    margin-top: 21px;
    font-size: 11px;
  }

  /* Hero visual becomes a normal-width mobile component.
     No scaling/negative margins that can cause clipping. */
  .hero-visual {
    width: 100%;
    max-width: 520px;
    min-height: 300px;
    margin: 18px auto 0;
    transform: none;
  }

  .hero-orbit {
    inset: 18px 8px 0 8px;
    border-radius: 22px;
  }

  .hero-panel {
    left: 7%;
    right: 7%;
    top: 42px;
    bottom: 12px;
    border-radius: 18px;
    padding: 16px;
  }

  .hero-panel-head {
    margin-bottom: 15px;
  }

  .hero-panel-title {
    font-size: 18px;
  }

  .hero-mini {
    font-size: 9px;
    padding: 5px 7px;
  }

  .hero-stat-row {
    gap: 7px;
    margin-bottom: 12px;
  }

  .hero-stat {
    padding: 9px;
    border-radius: 9px;
  }

  .hero-stat strong {
    font-size: 18px;
  }

  .hero-stat span {
    font-size: 9px;
  }

  .hero-bars {
    height: 105px;
    gap: 6px;
  }

  .hero-floating {
    padding: 9px 10px;
    gap: 8px;
    border-radius: 11px;
    font-size: 10px;
  }

  .hero-floating strong {
    font-size: 11px;
  }

  .hero-floating small {
    font-size: 9px;
  }

  .hero-floating.one {
    left: 0;
    top: 58px;
  }

  .hero-floating.two {
    right: 0;
    top: 135px;
  }

  .hero-floating.three {
    left: 0;
    bottom: 5px;
  }

  .float-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .home-search-wrap {
    margin-top: 0;
  }

  .home-search {
    padding: 12px;
    border-radius: 14px;
  }

  .home-search .search-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .home-search input,
  .home-search select,
  .home-search .btn {
    width: 100%;
    min-width: 0;
    height: 46px;
  }

  .home-search .popular {
    margin: 12px 2px 2px;
    gap: 6px 12px;
    font-size: 12px;
  }

  .home-section {
    padding: 50px 0;
  }

  .home-section-head {
    display: block;
    margin-bottom: 22px;
  }

  .home-section-head h2 {
    font-size: clamp(26px, 7vw, 31px);
    line-height: 1.15;
    margin-bottom: 9px;
  }

  .home-section-head p {
    font-size: 14px;
  }

  .home-job-grid,
  .home-feature-grid,
  .home-audience {
    grid-template-columns: 1fr;
  }

  .home-job-card {
    min-height: 0;
  }

  .home-feature {
    padding: 19px;
  }

  .home-training {
    gap: 28px;
  }

  .home-training h2 {
    font-size: clamp(28px, 8vw, 35px);
  }

  .training-card {
    padding: 24px;
    border-radius: 18px;
  }

  .training-card .price {
    font-size: 36px;
  }

  .home-bottom-cta {
    display: block;
    padding: 28px 22px;
    border-radius: 18px;
  }

  .home-bottom-cta h2 {
    font-size: clamp(25px, 7vw, 30px);
    line-height: 1.15;
  }

  .home-bottom-cta .btn {
    display: inline-block;
    margin-top: 18px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Small phones: 320–400px */
@media (max-width: 400px) {
  .container,
  .header-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .logo img {
    height: 38px;
    max-width: 145px;
  }

  .header-actions {
    font-size: 12px;
  }

  .header-actions .btn {
    padding: 8px 10px;
  }

  .home-hero h1 {
    font-size: 33px;
  }

  .home-lede {
    font-size: 15px;
  }

  .home-hero .cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .home-hero .cta-row .btn {
    width: 100%;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
  }

  .hero-visual {
    min-height: 270px;
  }

  .hero-panel {
    left: 5%;
    right: 5%;
    top: 38px;
    padding: 13px;
  }

  .hero-panel-title {
    font-size: 16px;
  }

  .hero-stat {
    padding: 7px;
  }

  .hero-stat strong {
    font-size: 16px;
  }

  .hero-floating {
    max-width: 145px;
  }

  .hero-floating.two {
    top: 122px;
  }

  .hero-floating.three {
    bottom: 0;
  }
}