/* ================================================================
   bw-home.css — BCIT WORLD Home Page (styles used only on index.php)
   Loaded after bw-course/bw-about/bw-reviews/bw-contact.css
   ================================================================ */

/* ---------- HERO ---------- */
.hm-hero{
  background:
    linear-gradient(135deg,rgba(66,0,0,.90) 0%,rgba(125,15,15,.82) 45%,rgba(161,33,33,.78) 100%),
    url('../img/about/BCIT_WORLD_Second_Lab.webp') center/cover no-repeat;
  color:#fff;padding:70px 20px 60px;text-align:center;
  position:relative;overflow:hidden;
}
/* Subtle bottom vignette for depth + edge visibility */
.hm-hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:120px;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.15));
  pointer-events:none;
}
.hm-hero > *{position:relative;z-index:1}

/* Kicker chip */
.hm-hero .rv-kicker{
  background:#fdd63a;color:#4d0000;font-weight:800;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* H1 */
.hm-hero h1{
  font-size:clamp(28px,4.2vw,46px);line-height:1.15;
  margin:14px auto 12px;font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.25);color:#fff;
  max-width:900px;
}

/* Sub-text — brighter + tighter */
.hm-hero .hm-sub{
  font-size:clamp(15px,1.55vw,17.5px);opacity:1;
  max-width:720px;margin:0 auto 22px;color:#fff8ea;
  line-height:1.55;
}
.hm-hero .hm-sub b{color:#fdd63a}

/* Badges — brighter chips so they pop on dark maroon */
.hm-hero .cr-badges{justify-content:center;margin-bottom:22px;gap:10px}
.hm-hero .cr-badge{
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(253,214,58,.55);
  color:#fff8ea;font-weight:700;
  backdrop-filter:blur(2px);
}
.hm-hero .cr-badge i{color:#fdd63a}

/* Search bar */
.hm-search{
  max-width:640px;margin:28px auto 0;display:flex;
  background:#fff;border-radius:60px;padding:6px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);overflow:hidden;
}
.hm-search input{
  flex:1;min-width:0;border:none;outline:none;
  padding:13px 20px;font-size:15px;color:#333;
  border-radius:60px;background:transparent;
}
.hm-search input::placeholder{color:#8a8a8a}
.hm-search button{
  background:#fdd63a;color:#4d0000;border:none;
  padding:13px 28px;font-weight:800;border-radius:60px;
  cursor:pointer;font-size:15px;white-space:nowrap;
  transition:transform .15s,box-shadow .15s;
}
.hm-search button:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.15)}

/* Hero CTA buttons — extra breathing space */
.hm-hero .cr-heroBtns{margin-top:22px}

/* --- Responsive tightening --- */
/* Give hero right-padding on smaller screens so the fixed .bw-demo-tab
   (side "Book demo" sticker) never overlaps the sub-text. */
@media (max-width:991px){
  .hm-hero{padding:56px 18px 50px}
}
@media (max-width:767px){
  .hm-hero{padding:48px 20px 44px}
  .hm-hero h1{font-size:clamp(24px,6.5vw,32px);margin:12px auto 10px}
  .hm-hero .hm-sub{font-size:14.5px;line-height:1.55;padding:0 4px}
  .hm-hero .cr-badges{gap:8px}
  .hm-hero .cr-badge{font-size:12px;padding:6px 12px}
  .hm-search{margin-top:22px;padding:5px}
  .hm-search input{padding:11px 14px;font-size:14px}
  .hm-search button{padding:11px 18px;font-size:14px}
  .hm-hero .cr-heroBtns{margin-top:18px;flex-wrap:wrap;gap:10px;justify-content:center}
  .hm-hero .cr-heroBtns .rv-btn{padding:11px 16px;font-size:14px}
}

/* Hide the shared floating "Book demo" side sticker on mobile
   (mobile already has the bottom Call/WhatsApp dock — sticker was overlapping hero text) */
@media (max-width:767px){
  .bw-demo-tab{display:none !important}
}

/* ---------- TRUST BAR / STATS COUNTER ---------- */
.hm-trust{
  background:#fff;border-top:1px solid #f2e6d6;
  border-bottom:1px solid #f2e6d6;padding:34px 20px;
}
.hm-trust-in{
  max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
}
.hm-trust-item{padding:6px}
.hm-trust-item b{
  display:block;font-size:clamp(24px,3vw,34px);
  font-weight:800;color:#4d0000;line-height:1;
}
.hm-trust-item span{
  display:block;color:#5a5a5a;font-size:13.5px;
  margin-top:6px;font-weight:600;letter-spacing:.2px;
}
.hm-trust-item i{
  font-size:22px;color:#c9971c;margin-bottom:8px;display:block;
}
@media (max-width:640px){
  .hm-trust-in{grid-template-columns:repeat(2,1fr);gap:14px}
  .hm-trust{padding:24px 18px}
}

/* ---------- COURSE-CARD GRID ---------- */
.hm-cgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;margin-top:20px;
}
.hm-ccard{
  background:#fff;border:1px solid #eee;border-radius:14px;
  overflow:hidden;transition:transform .2s,box-shadow .2s;
  display:flex;flex-direction:column;
}
.hm-ccard:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(77,0,0,.12)}
/* Course thumbnail — contain (not crop) so full "ADCA"/"DCA" text stays visible,
   with a soft warm bg matching the theme */
.hm-ccard .hm-cimg{
  width:100%;aspect-ratio:16/10;
  background:linear-gradient(135deg,#fdf7ea 0%,#fbe6c8 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hm-ccard .hm-cimg img{
  width:100%;height:100%;object-fit:contain;
  object-position:center;display:block;padding:6px;
}
/* Blog cards (direct <img> without .hm-cimg wrapper) — use cover
   since blog thumbnails are photos, not text overlays */
.hm-ccard > a > img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  object-position:center;display:block;
}
.hm-cbody{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.hm-cbody h3{margin:0;font-size:17px;color:#4d0000;font-weight:800}
.hm-cbody p{margin:0;color:#555;font-size:13.5px;line-height:1.5;flex:1}

/* Course meta chips (duration only now — fee removed) */
.hm-cmeta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px}
.hm-cmeta span{
  background:#fff8e5;color:#8b6a00;
  padding:4px 10px;border-radius:999px;font-weight:700;
}

/* Card buttons */
.hm-cbtns{display:flex;gap:8px;margin-top:6px}
.hm-cbtns a{
  flex:1;text-align:center;padding:9px 8px;font-size:13px;
  font-weight:700;border-radius:8px;text-decoration:none;
  transition:all .15s;display:inline-flex;align-items:center;
  justify-content:center;gap:6px;
}
.hm-cbtns a.r{background:#4d0000;color:#fff;border:2px solid #4d0000}
.hm-cbtns a.r:hover{background:#7d0f0f;border-color:#7d0f0f}
/* WhatsApp button — brand green for instant recognition */
.hm-cbtns a.e{background:#25D366;color:#fff;border:2px solid #25D366}
.hm-cbtns a.e:hover{background:#128C7E;border-color:#128C7E}
.hm-cbtns a.e i{font-size:15px}

/* ---------- AREAS SERVED — Map-pin design ---------- */

/* Section container gets a subtle "map paper" backdrop */
.hm-geo{
  position:relative;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(77,0,0,.04), transparent 60%),
    linear-gradient(180deg,#fffdf7 0%,#fdf7ea 100%);
  border-radius:18px;padding:34px 26px;margin-top:24px;
  border:1px solid #f2e6d6;overflow:hidden;
}
/* Faint dotted grid to hint at a map */
.hm-geo::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(77,0,0,.05) 1px, transparent 1px),
    radial-gradient(rgba(77,0,0,.03) 1px, transparent 1px);
  background-size:22px 22px, 44px 44px;
  background-position:0 0, 11px 11px;
  opacity:.8;
}
.hm-geo > *{position:relative;z-index:1}

/* Featured BCIT WORLD hero pin */
.hm-geo-hero{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
  background:linear-gradient(135deg,#4d0000 0%,#7d0f0f 100%);
  color:#fff;padding:22px 26px;border-radius:16px;margin-top:16px;
  box-shadow:0 12px 30px rgba(77,0,0,.22);
  position:relative;overflow:hidden;
}
.hm-geo-hero::after{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(253,214,58,.18),transparent 70%);
  pointer-events:none;
}
.hm-geo-hero > *{position:relative;z-index:1}

/* The big pulsing pin */
.hm-geo-pin{
  position:relative;width:72px;height:72px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
}
.hm-geo-pin--main{
  background:#fdd63a;color:#4d0000;
  box-shadow:0 8px 22px rgba(253,214,58,.35), inset 0 0 0 4px rgba(255,255,255,.35);
}
.hm-geo-pin--main i{font-size:34px;line-height:1}
.hm-geo-pulse{
  position:absolute;inset:-6px;border-radius:50%;
  border:3px solid rgba(253,214,58,.65);
  animation:hmPulse 2.2s ease-out infinite;
}
@keyframes hmPulse{
  0%{transform:scale(.9);opacity:.9}
  100%{transform:scale(1.9);opacity:0}
}
@media (prefers-reduced-motion:reduce){.hm-geo-pulse{animation:none;opacity:0}}

/* Hero text block — higher specificity to override any global h3/p color */
.hm-geo .hm-geo-heroText h3{
  font-size:clamp(19px,2vw,24px);margin:6px 0 8px;
  color:#fff !important;font-weight:800;line-height:1.25;
}
.hm-geo .hm-geo-heroText p{
  margin:0 0 14px;color:#fff8ea !important;font-size:14px;line-height:1.55;
}
.hm-geo-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:#fdd63a;color:#4d0000;padding:5px 12px;
  border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;
}
.hm-geo-tag i{font-size:11px}
.hm-geo-heroBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* Sub-heading for locality groups (extra top margin so it breathes
   away from the BCIT WORLD hero pin card above) */
.hm-geo-subhead{
  font-size:16px;color:#4d0000;font-weight:800;
  margin:36px 0 14px;display:inline-flex;align-items:center;gap:8px;
}
.hm-geo-subhead i{color:#c9971c}
/* Ensure the pill line-height keeps them all on a single row */
.hm-geo-pill{white-space:nowrap;line-height:1.2}

/* Locality pin pills grid */
.hm-geo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
}
.hm-geo-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1.5px solid #f2e6d6;color:#4d0000;
  padding:10px 14px;border-radius:999px;
  font-size:13.5px;font-weight:700;text-decoration:none;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  box-shadow:0 2px 6px rgba(77,0,0,.04);
}
.hm-geo-pill i{color:#c9971c;font-size:13px}
.hm-geo-pill:hover{
  transform:translateY(-2px);border-color:#c9971c;
  box-shadow:0 8px 18px rgba(77,0,0,.12);color:#4d0000;
}

/* Smaller pills for the wider online-Bihar block */
.hm-geo-grid--sm{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.hm-geo-pill--sm{
  padding:7px 12px;font-size:12.5px;
  background:transparent;border-style:dashed;
  color:#666;font-weight:600;cursor:default;
}
.hm-geo-pill--sm i{color:#8b6a00;font-size:11px}
.hm-geo-pill--sm:hover{transform:none;border-color:#c9971c;box-shadow:none;color:#666}

/* Online block wrapper */
.hm-geo-online{
  margin-top:20px;padding-top:22px;
  border-top:1px dashed #e8dcc4;
}

/* --- Mobile --- */
@media (max-width:640px){
  .hm-geo{padding:24px 16px}
  .hm-geo-hero{
    grid-template-columns:1fr;gap:14px;text-align:center;
    padding:22px 18px;
  }
  .hm-geo-pin{margin:0 auto}
  .hm-geo-heroBtns{justify-content:center}
  .hm-geo-heroBtns .rv-btn{padding:10px 14px;font-size:13.5px}
  .hm-geo-heroText h3{font-size:19px}
  .hm-geo-heroText p{font-size:13px}
  .hm-geo-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .hm-geo-pill{padding:9px 12px;font-size:12.5px}
  .hm-geo-grid--sm{grid-template-columns:repeat(2,1fr)}
}

/* ---------- OUR TRAINING PROCESS — Step cards ---------- */
.hm-proc{
  background:linear-gradient(180deg,#fffdf7 0%,#fdf7ea 100%);
  border:1px solid #f2e6d6;border-radius:18px;
  padding:34px 26px;margin-top:24px;position:relative;overflow:hidden;
}
.hm-proc::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 400px at 100% 0%,rgba(253,214,58,.10),transparent 60%),
             radial-gradient(700px 500px at 0% 100%,rgba(77,0,0,.05),transparent 60%);
}
.hm-proc > *{position:relative;z-index:1}

/* Grid — 3 cols desktop, 2 cols tablet, 1 col mobile */
.hm-proc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin-top:22px;
}

/* Individual step card */
.hm-proc-card{
  background:#fff;border:1px solid #f2e6d6;border-radius:14px;
  padding:26px 22px 22px;position:relative;
  transition:transform .22s,box-shadow .22s,border-color .22s;
  box-shadow:0 4px 14px rgba(77,0,0,.05);
  overflow:hidden;
}
.hm-proc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#4d0000 0%,#c9971c 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.hm-proc-card:hover{
  transform:translateY(-6px);border-color:#c9971c;
  box-shadow:0 18px 40px rgba(77,0,0,.14);
}
.hm-proc-card:hover::before{transform:scaleX(1)}

/* Big step number — top-right corner watermark */
.hm-proc-num{
  position:absolute;top:14px;right:18px;
  font-size:44px;font-weight:900;line-height:1;
  background:linear-gradient(135deg,#fdd63a 0%,#c9971c 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:.55;letter-spacing:-1px;
  transition:opacity .22s,transform .22s;
}
.hm-proc-card:hover .hm-proc-num{opacity:.85;transform:scale(1.08)}

/* Icon circle */
.hm-proc-icon{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,#4d0000 0%,#7d0f0f 100%);
  color:#fdd63a;font-size:24px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(77,0,0,.22);
  margin-bottom:16px;
}

/* Card text */
.hm-proc-card h3{
  font-size:17px;color:#4d0000;font-weight:800;
  margin:0 0 8px;letter-spacing:.2px;line-height:1.25;
}
.hm-proc-card p{
  margin:0;color:#555;font-size:13.5px;line-height:1.6;
}
.hm-proc-card p b{color:#4d0000}

/* --- Responsive --- */
@media (max-width:991px){
  .hm-proc-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .hm-proc{padding:28px 20px}
}
@media (max-width:640px){
  .hm-proc-grid{grid-template-columns:1fr;gap:14px}
  .hm-proc{padding:22px 16px;border-radius:14px}
  .hm-proc-card{padding:22px 18px 18px}
  .hm-proc-num{font-size:36px;top:12px;right:14px}
  .hm-proc-icon{width:50px;height:50px;font-size:22px;margin-bottom:12px}
  .hm-proc-card h3{font-size:16px}
  .hm-proc-card p{font-size:13px}
}

/* ---------- RECENT PLACEMENTS — Classic square cards (no photos, no quotes) ---------- */
.hm-plc > h2,.hm-plc > p{text-align:center}
.hm-plc > p{max-width:760px;margin-left:auto;margin-right:auto}
.hm-plc-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  margin:26px auto 0;
}
.hm-plc-card{
  min-width:0;aspect-ratio:1/1;  /* square box; grows only if content needs more room */
  background:#fff;text-align:center;
  border:1px solid #f2e6d6;border-top:4px solid #4d0000;border-radius:14px;
  padding:12px 12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;line-height:1.3;
  box-shadow:0 6px 18px rgba(77,0,0,.06);
  transition:transform .2s,box-shadow .2s,border-top-color .2s;
}
.hm-plc-card:hover{
  transform:translateY(-5px);border-top-color:#c9971c;
  box-shadow:0 16px 34px rgba(77,0,0,.13);
}
.hm-plc-tag{
  display:inline-flex;align-items:center;gap:5px;margin-bottom:8px;line-height:1.3;
  background:#e6f6ec;color:#0a5c33;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
}
.hm-plc-av{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4d0000 0%,#7d0f0f 100%);
  color:#fdd63a;font-size:20px;font-weight:800;letter-spacing:1px;
  box-shadow:0 0 0 3px #fff,0 0 0 5px #e9c46a,0 8px 16px rgba(77,0,0,.18);
  margin-bottom:10px;
}
.hm-plc-card h3{margin:0 0 2px;font-size:16px;color:#4d0000;font-weight:800;line-height:1.25}
.hm-plc-card .hm-plc-role{margin:0 0 2px;font-size:13.5px;font-weight:700;color:#222;line-height:1.3}
.hm-plc-card .hm-plc-co{margin:0 0 8px;font-size:12.5px;color:#6b6b6b;line-height:1.3}
.hm-plc-card .hm-plc-co i{color:#c9971c;margin-right:5px}
.hm-plc-course{
  display:inline-block;background:#fff8e5;color:#8b6a00;
  border:1px solid #f3dfa6;border-radius:999px;
  font-size:11.5px;font-weight:700;padding:3px 11px;line-height:1.4;
}

/* Tablet: 2 x 2 squares */
@media (max-width:991px){
  .hm-plc-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
}
/* Mobile: still 2 x 2 squares, compact type */
@media (max-width:600px){
  .hm-plc-grid{gap:12px;max-width:none}
  .hm-plc-card{padding:8px 6px;border-radius:12px}
  .hm-plc-tag{font-size:9.5px;padding:2px 7px;margin-bottom:5px}
  .hm-plc-av{width:40px;height:40px;font-size:14px;margin-bottom:6px}
  .hm-plc-card h3{font-size:14px}
  .hm-plc-card .hm-plc-role{font-size:12px}
  .hm-plc-card .hm-plc-co{font-size:11px;margin-bottom:5px}
  .hm-plc-course{font-size:10px;padding:2px 8px}
}
/* ---------- STUDENT REVIEWS — classic text cards (no photos) ---------- */
.hm-rev > h2,.hm-rev > p{text-align:center}
.hm-rev > p{max-width:720px;margin-left:auto;margin-right:auto}
.hm-rev-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:26px;
}
.hm-rev-card{
  background:#fdf9f2;border:1px solid #f2e6d6;border-left:4px solid #4d0000;
  border-radius:14px;padding:22px 22px 20px;line-height:1.3;
  transition:transform .2s,box-shadow .2s,border-left-color .2s;
}
.hm-rev-card:hover{
  transform:translateY(-4px);border-left-color:#c9971c;
  box-shadow:0 14px 30px rgba(77,0,0,.10);
}
.hm-rev-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.hm-rev-av{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#4d0000 0%,#7d0f0f 100%);
  color:#fdd63a;font-size:18px;font-weight:800;
}
.hm-rev-card .hm-rev-head h3{margin:0 0 3px;font-size:16px;font-weight:800;color:#222;line-height:1.25}
.hm-rev-meta{display:block;font-size:12.5px;color:#6b6b6b;line-height:1.3}
.hm-rev-meta i{color:#c9971c;margin-right:4px}
.hm-rev-stars{color:#f5a623;font-size:15px;letter-spacing:2px;line-height:1}
.hm-rev-card .hm-rev-stars{display:block;margin-bottom:12px}
.hm-rev-card .hm-rev-text{
  margin:0;font-size:14px;line-height:1.65;color:#444;font-style:italic;
}

/* Google rating summary box */
.hm-rev-rating{
  display:flex;align-items:center;gap:16px;
  max-width:560px;margin:30px auto 0;padding:18px 22px;
  background:#fff;border:1px solid #eee;border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);line-height:1.3;
}
.hm-rev-g{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#f6f6f6;border:1px solid #eee;font-size:24px;color:#4285F4;
}
.hm-rev-score{font-size:17px;color:#222}
.hm-rev-score b{margin-left:6px}
.hm-rev-cap{font-size:13.5px;color:#666;margin-top:4px}
.hm-rev-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px}

@media (max-width:991px){.hm-rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .hm-rev-grid{grid-template-columns:1fr;gap:14px}
  .hm-rev-card{padding:18px 16px}
  .hm-rev-rating{padding:14px 16px;gap:12px}
  .hm-rev-g{width:44px;height:44px;font-size:20px}
  .hm-rev-score{font-size:15px}
  .hm-rev-cap{font-size:12.5px}
  .hm-rev-btns .rv-btn{flex:1 1 100%;justify-content:center}
}

/* ---------- COMPARISON TABLE — Classic look ---------- */
.hm-cmp-wrap{
  margin-top:18px;overflow-x:auto;
  border-radius:16px;background:#fff;
  box-shadow:0 8px 28px rgba(77,0,0,.08);
  border:1px solid #f2e6d6;
}
.hm-cmp{
  width:100%;border-collapse:collapse;margin:0;
  font-family:inherit;
}
.hm-cmp th,.hm-cmp td{
  padding:16px 20px;text-align:left;
  border-bottom:1px solid #f5ecdc;font-size:14.5px;
  vertical-align:middle;
}

/* Header row — deep maroon with gold accent under */
.hm-cmp thead th{
  background:linear-gradient(135deg,#4d0000 0%,#7d0f0f 100%);
  color:#fff;font-weight:800;font-size:14px;
  letter-spacing:.3px;padding:18px 20px;
  position:relative;
}
.hm-cmp thead th:not(:last-child){
  border-right:1px solid rgba(255,255,255,.08);
}
.hm-cmp thead th i{margin-right:6px;color:#fdd63a}
.hm-cmp-us{border-bottom:3px solid #fdd63a !important}
.hm-cmp-badge{
  display:inline-block;background:#fdd63a;color:#4d0000;
  padding:3px 10px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;margin-left:8px;vertical-align:middle;
}

/* Feature column (leftmost) — maroon text with icon */
.hm-cmp tbody td.b{
  font-weight:800;color:#4d0000;font-size:14px;
  background:#fdf7ea;width:32%;
}
.hm-cmp tbody td.b i{color:#c9971c;margin-right:8px;width:16px;text-align:center}

/* BCIT WORLD column highlighted with soft warm bg */
.hm-cmp tbody td:nth-child(2){
  background:#fffdf3;border-left:3px solid rgba(253,214,58,.35);
  font-weight:600;
}
/* Typical Coaching column — neutral */
.hm-cmp tbody td:nth-child(3){
  color:#6b6b6b;
}

/* Green ✓ chip for BCIT values */
.hm-cmp-yes{
  display:inline-flex;align-items:center;gap:8px;
  color:#0a5c33;font-weight:700;
}
.hm-cmp-yes::before{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;background:#dff5e6;color:#0a5c33;
  border-radius:50%;font-size:11px;flex-shrink:0;
}
/* Muted ✕ chip for typical values */
.hm-cmp-no{
  display:inline-flex;align-items:center;gap:8px;
  color:#8a5555;font-weight:600;
}
.hm-cmp-no::before{
  content:"\f00d";font-family:"Font Awesome 6 Free";font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;background:#f4e4e4;color:#8a2a2a;
  border-radius:50%;font-size:11px;flex-shrink:0;
}

/* Row hover + last-row border cleanup */
.hm-cmp tbody tr{transition:background .15s}
.hm-cmp tbody tr:hover td:nth-child(2){background:#fef5db}
.hm-cmp tbody tr:hover td.b{background:#fbedd0}
.hm-cmp tbody tr:last-child td{border-bottom:none}

/* --- Mobile — stack table rows into clean cards --- */
@media (max-width:640px){
  .hm-cmp-wrap{
    background:transparent;box-shadow:none;border:none;
    overflow:visible;margin-top:14px;
  }
  .hm-cmp{background:transparent;border-collapse:separate;border-spacing:0}
  /* Hide the header row on mobile — labels go inline per card */
  .hm-cmp thead{
    position:absolute;left:-9999px;top:auto;
    width:1px;height:1px;overflow:hidden;
  }
  /* Each <tr> becomes a card */
  .hm-cmp tbody tr{
    display:block;background:#fff;
    border:1px solid #f2e6d6;border-radius:14px;
    box-shadow:0 4px 14px rgba(77,0,0,.06);
    margin-bottom:14px;overflow:hidden;
  }
  .hm-cmp tbody tr:hover td:nth-child(2),
  .hm-cmp tbody tr:hover td.b{background:inherit}
  .hm-cmp tbody td{
    display:block;width:100% !important;
    padding:0;border:none;background:transparent;
    box-sizing:border-box;
  }
  /* Feature (card header) — maroon strip with icon */
  .hm-cmp tbody td.b{
    display:block;width:100%;box-sizing:border-box;
    background:linear-gradient(135deg,#4d0000 0%,#7d0f0f 100%);
    color:#fff;font-size:14px;font-weight:800;
    padding:14px 18px;letter-spacing:.2px;
    text-align:left;
  }
  .hm-cmp tbody td.b i{
    color:#fdd63a;margin-right:8px;width:auto;
  }
  /* BCIT WORLD + Typical value rows */
  .hm-cmp tbody td:nth-child(2),
  .hm-cmp tbody td:nth-child(3){
    padding:12px 16px;font-size:13.5px;
    border-left:none;position:relative;
  }
  /* Insert the column label via data-label attribute */
  .hm-cmp tbody td:nth-child(2)::before,
  .hm-cmp tbody td:nth-child(3)::before{
    content:attr(data-label);
    display:block;font-size:10.5px;font-weight:800;
    letter-spacing:.5px;text-transform:uppercase;
    margin-bottom:6px;
  }
  .hm-cmp tbody td:nth-child(2)::before{color:#4d0000}
  .hm-cmp tbody td:nth-child(3)::before{color:#8a5555}
  /* BCIT value — warm cream bg */
  .hm-cmp tbody td:nth-child(2){
    background:#fffdf3;
    border-bottom:1px dashed #f0e5d1;
  }
  /* Typical value — plain white bg */
  .hm-cmp tbody td:nth-child(3){
    background:#fff;color:#6b6b6b;
  }
  /* Chip icons slightly smaller on mobile */
  .hm-cmp-yes::before,.hm-cmp-no::before{
    width:20px;height:20px;font-size:10.5px;
  }
  .hm-cmp-yes,.hm-cmp-no{font-size:13px;gap:7px;line-height:1.4}
}