/* =========================================================
   AGRICULTURE SKILLS HUB — HOMEPAGE ONLY
   Uses the existing styles.css variables and visual language.
   This file is loaded AFTER styles.css and only affects
   body.skills-home, so the other pages are left alone.
========================================================= */

.skills-home{
  margin:0;
  padding:0 0 55px;
  background:#f5f4ef;
  color:#263225;
}

.skills-home a{
  text-decoration:none;
}

/* ---------- EXISTING TOP NAV, REDESIGNED ONLY FOR HOME ---------- */

.home-top-nav{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(1180px,calc(100% - 36px));
  z-index:100;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.65);
  border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.home-nav-inner{
  display:flex;
  align-items:center;
  min-height:64px;
  padding:7px 14px 7px 20px;
}

.home-brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:#17321d;
  min-width:220px;
}

.brand-mark{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#2e7d32;
  color:#fff;
  font-size:22px;
}

.home-brand strong,
.home-brand small{
  display:block;
  line-height:1.05;
}

.home-brand strong{
  font-size:1rem;
}

.home-brand small{
  font-size:.82rem;
  font-weight:700;
  color:#2e7d32;
  margin-top:3px;
}

.home-nav-links{
  flex:1;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
}

.home-nav-links a{
  color:#18231b;
  padding:7px 20px;
  border-left:1px solid rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  justify-content:center;
  font-weight:700;
  font-size:.92rem;
  line-height:1.05;
  transition:.2s ease;
}

.home-nav-links a span{
  font-size:.73rem;
  font-weight:500;
  margin-top:4px;
  color:#5c665d;
}

.home-nav-links a:hover{
  background:rgba(46,125,50,.08);
  color:#2e7d32;
}


/* ---------- HERO ---------- */

.home-hero{
  position:relative;
  min-height:590px;
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:center;
  isolation:isolate;
}

.home-hero-image{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.54) 38%,rgba(0,0,0,.18) 75%,rgba(0,0,0,.18) 100%),
    url("../images/skills-hub-hero.jpg");
  background-size:cover;
  background-position:center;
  transform:scale(1.01);
}

.home-hero-content{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:110px 0 60px;
}

.home-kicker{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.23);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.12em;
}

.home-hero h1{
  margin:20px 0 10px;
  font-size:clamp(3rem,6.4vw,5.6rem);
  line-height:.9;
  letter-spacing:-.035em;
  font-weight:900;
  text-shadow:0 3px 14px rgba(0,0,0,.28);
}

.home-hero-subtitle{
  margin:0;
  font-size:clamp(1rem,1.8vw,1.28rem);
  font-weight:700;
}

.home-hero-subtitle span{
  color:#b9df69;
  padding:0 5px;
}

.home-hero h2{
  margin:25px 0 4px;
  color:#9be33d;
  font-size:clamp(1.45rem,2.7vw,2.25rem);
  line-height:1.1;
}

.home-hero-text{
  max-width:570px;
  margin:0;
  font-size:1.08rem;
  line-height:1.55;
  color:rgba(255,255,255,.93);
}

.home-hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:24px;
}

.home-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:12px 21px;
  border-radius:10px;
  font-weight:800;
  font-size:.9rem;
  transition:.2s ease;
}

.home-btn span{
  font-size:1.2rem;
  line-height:1;
}

.home-btn-primary{
  background:#2e7d32;
  color:#fff;
  box-shadow:0 7px 18px rgba(0,0,0,.2);
}

.home-btn-primary:hover,
.home-btn-green:hover{
  background:#236127;
  transform:translateY(-2px);
}

.home-btn-outline{
  color:#fff;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(0,0,0,.14);
}

.home-btn-outline:hover{
  background:rgba(255,255,255,.15);
  transform:translateY(-2px);
}


/* ---------- GENERAL SECTIONS ---------- */

.home-section{
  width:min(1180px,calc(100% - 36px));
  margin:0 auto;
}

.home-pathways{
  padding:45px 0 20px;
}

.home-pathway-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.home-pathway{
  position:relative;
  background:#fff;
  border:1px solid #cfd8cc;
  border-radius:13px;
  padding:26px 18px 18px;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.07);
  transition:.25s ease;
}

.home-pathway:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}

.home-pathway.level2{border-top:4px solid var(--level2-primary);}
.home-pathway.level3{border-top:4px solid var(--level3-primary);}
.home-pathway.teaching{border-top:4px solid var(--core-primary);}

.pathway-icon{
  position:absolute;
  left:50%;
  top:-27px;
  transform:translateX(-50%);
  width:55px;
  height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  font-size:25px;
  box-shadow:0 5px 12px rgba(0,0,0,.18);
}

.level2 .pathway-icon{background:var(--level2-primary);}
.level3 .pathway-icon{background:var(--level3-primary);}
.teaching .pathway-icon{background:var(--core-primary);}

.pathway-label{
  margin-top:5px;
  font-size:1.35rem;
  font-weight:900;
}

.home-pathway h2{
  margin:0;
  font-size:1.15rem;
}

.home-pathway p{
  margin:5px 0 14px;
  color:#5b6472;
  font-size:.88rem;
}

.pathway-image{
  height:145px;
  border-radius:9px;
  background-size:cover;
  background-position:center;
  margin-bottom:12px;
}

.image-level2{
  background-image:
    linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)),
    url("../images/gfw.png");
}

.image-level3{
  background-image:
    linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.05)),
    url("../images/level3.png");
}

.image-teaching{
  background-image:
    linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)),
    url("../images/teachheader.png");
}

.pathway-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  border-radius:8px;
  color:#fff;
  font-size:.8rem;
  font-weight:800;
}

.level2 .pathway-button{background:var(--level2-primary);}
.level3 .pathway-button{background:var(--level3-primary);}
.teaching .pathway-button{background:var(--core-primary);}

.home-secondary-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:20px 0 4px;
  font-size:.85rem;
  font-weight:800;
}

.home-secondary-links a{
  color:#27352a;
}

.home-secondary-links a:hover{
  color:#2e7d32;
}

.home-secondary-links i{
  height:22px;
  width:1px;
  background:#b8c0b7;
}


/* ---------- SECTION HEADING ---------- */

.home-section-heading{
  display:flex;
  align-items:center;
  gap:16px;
  margin:38px 0 16px;
}

.home-section-heading span{
  height:1px;
  background:#b8c2b5;
  flex:1;
}

.home-section-heading h2{
  flex:0 0 auto;
  margin:0;
  color:#246129;
  font-size:1.15rem;
  letter-spacing:.025em;
  text-align:center;
}


/* ---------- CAREER PATHWAYS ---------- */

.home-pathways-section{
  padding-top:3px;
}

.career-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.career-card{
  min-height:205px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:48% 52%;
  background:#fff;
  border-radius:12px;
  border:1px solid #cbd6ca;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:.25s ease;
}

.career-card:hover{
  transform:translateY(-3px);
  box-shadow:0 13px 28px rgba(0,0,0,.1);
}

.career-content{
  position:relative;
  z-index:2;
  padding:16px 14px 14px 18px;
  background:rgba(255,255,255,.93);
}

.career-card h3{
  margin:0 0 6px;
  font-size:1.12rem;
}

.career-card.crop h3{color:var(--crop-dark);}
.career-card.livestock h3{color:var(--livestock-primary);}

.career-card ul{
  margin:0 0 11px;
  padding:0;
  list-style:none;
  font-size:.78rem;
  line-height:1.42;
}

.career-card li::before{
  content:"✓";
  font-weight:900;
  margin-right:7px;
}

.crop .career-card li::before,
.career-card.crop li::before{color:var(--crop-dark);}
.career-card.livestock li::before{color:var(--livestock-primary);}

.career-button{
  display:inline-flex;
  padding:7px 10px;
  border-radius:7px;
  color:#fff;
  font-size:.7rem;
  font-weight:800;
}

.crop .career-button{background:var(--crop-dark);}
.livestock .career-button{background:var(--livestock-primary);}

.career-image{
  min-height:205px;
  background-size:cover;
  background-position:center;
}

.crop-image{
  background-image:url("../images/croptech.png");
}

.livestock-image{
  background-image:url("../images/livestocktech.png");
}


/* ---------- PROJECTS ---------- */

.home-projects-section{
  padding-top:4px;
}

.project-home-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}

.project-home-card{
  position:relative;
  min-height:148px;
  overflow:hidden;
  border-radius:10px;
  background:#222;
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.11);
  transition:.22s ease;
}

.project-home-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.16);
}

.project-home-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}

.project-home-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.72));
}

.project-farmguard{background-image:url("../images/farmguardheader.png");}
.project-farmsafe{background-image:url("../images/farmsafeheader.png");}
.project-crop{background-image:url("../images/cropperformance.jpg");}
.project-livestock{background-image:url("../images/livestockperformance.png");}
.project-finance{background-image:url("../images/farmforfoodheader2.png");}

.project-home-icon{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.9);
  color:#263225;
  font-size:18px;
  font-weight:900;
  z-index:2;
}

.project-home-text{
  position:absolute;
  z-index:2;
  left:10px;
  right:10px;
  bottom:10px;
  text-align:center;
}

.project-home-text h3{
  margin:0 0 3px;
  font-size:.84rem;
  letter-spacing:.02em;
}

.project-home-text p{
  margin:0;
  font-size:.69rem;
  line-height:1.25;
  color:rgba(255,255,255,.94);
}

.home-centred-button{
  display:flex;
  justify-content:center;
  padding:17px 0 6px;
}

.home-btn-green{
  background:#2e7d32;
  color:#fff;
}


/* ---------- WORKPLACE MESSAGE ---------- */

.home-workplace{
  width:min(1180px,calc(100% - 36px));
  min-height:145px;
  margin:42px auto 0;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 35%;
  border:1px solid #d7d3c5;
  border-radius:11px;
  background:#eeeade;
  box-shadow:0 7px 18px rgba(0,0,0,.05);
}

.workplace-copy{
  padding:20px 25px;
}

.workplace-copy h2{
  margin:0;
  color:#2b682e;
  font-size:1.25rem;
}

.workplace-line{
  width:42px;
  height:3px;
  margin:7px 0 8px;
  background:#6e9d47;
}

.workplace-copy p{
  margin:0 0 13px;
  font-weight:700;
  font-size:.92rem;
}

.workplace-points{
  display:flex;
  gap:25px;
  flex-wrap:wrap;
}

.workplace-points div{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:.72rem;
  font-weight:700;
  line-height:1.15;
}

.workplace-points b{
  font-size:1.35rem;
  font-weight:400;
}

.workplace-image{
  min-height:145px;
  background:
    linear-gradient(90deg,rgba(238,234,222,0) 0%,rgba(238,234,222,.04) 20%,rgba(0,0,0,.08) 100%),
    url("../images/learningheader.png");
  background-size:cover;
  background-position:center;
}


/* ---------- FOOTER ---------- */

.home-footer{
  width:min(1180px,calc(100% - 36px));
  margin:30px auto 0;
  padding:17px 5px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:#687168;
  font-size:.8rem;
  border-top:1px solid #d3d9d0;
}

.home-footer a{
  color:#2e7d32;
  font-weight:700;
}


/* ---------- TABLET ---------- */

@media(max-width:900px){

  .home-top-nav{
    top:10px;
    width:calc(100% - 20px);
  }

  .home-nav-inner{
    min-height:55px;
    padding:6px 9px;
  }

  .home-brand{
    min-width:auto;
    flex:0 0 auto;
  }

  .home-brand strong{
    font-size:.83rem;
  }

  .home-brand small{
    font-size:.67rem;
  }

  .brand-mark{
    width:34px;
    height:34px;
    font-size:18px;
  }

  .home-nav-links{
    margin-left:4px;
  }

  .home-nav-links a{
    padding:5px 7px;
    text-align:center;
    font-size:.7rem;
  }

  .home-nav-links a span{
    font-size:.55rem;
  }

  .home-hero{
    min-height:550px;
  }

  .home-hero-content{
    width:calc(100% - 32px);
    padding-top:105px;
  }

  .home-hero h1{
    font-size:clamp(2.7rem,9vw,4.4rem);
  }

  .home-pathway-grid{
    grid-template-columns:1fr;
    gap:30px;
    padding-top:20px;
  }

  .home-pathway{
    padding-top:23px;
  }

  .pathway-image{
    height:165px;
  }

  .career-grid{
    grid-template-columns:1fr;
  }

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

  .project-home-card:last-child{
    grid-column:1 / -1;
    max-width:50%;
    justify-self:center;
    width:100%;
  }

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

  .workplace-image{
    min-height:130px;
    order:-1;
  }

  .workplace-copy{
    padding:20px;
  }
}


/* ---------- PHONE ---------- */

@media(max-width:620px){

  .skills-home{
    padding-bottom:25px;
  }

  .home-top-nav{
    position:absolute;
  }

  .home-nav-inner{
    display:block;
    padding:7px;
  }

  .home-brand{
    justify-content:center;
    margin-bottom:6px;
  }

  .home-nav-links{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    width:100%;
    margin:0;
  }

  .home-nav-links a{
    min-width:0;
    padding:6px 2px;
    border-left:1px solid rgba(0,0,0,.08);
    font-size:.63rem;
    line-height:1.05;
  }

  .home-nav-links a span{
    display:none;
  }

  .home-hero{
    min-height:630px;
    align-items:flex-end;
  }

  .home-hero-image{
    background-position:58% center;
    background:
      linear-gradient(0deg,rgba(0,0,0,.79) 0%,rgba(0,0,0,.45) 52%,rgba(0,0,0,.16) 100%),
      url("../images/skills-hub-hero.jpg");
    background-size:cover;
    background-position:center;
  }

  .home-hero-content{
    width:calc(100% - 28px);
    padding:180px 0 34px;
  }

  .home-kicker{
    font-size:.6rem;
    padding:7px 10px;
  }

  .home-hero h1{
    font-size:3.05rem;
    line-height:.92;
    margin:16px 0 10px;
  }

  .home-hero-subtitle{
    font-size:.87rem;
  }

  .home-hero h2{
    font-size:1.65rem;
    margin-top:20px;
  }

  .home-hero-text{
    font-size:.93rem;
  }

  .home-hero-actions{
    gap:9px;
    margin-top:18px;
  }

  .home-btn{
    padding:11px 13px;
    font-size:.76rem;
  }

  .home-section{
    width:calc(100% - 24px);
  }

  .home-pathways{
    padding-top:38px;
  }

  .home-secondary-links{
    gap:13px;
    font-size:.72rem;
  }

  .home-section-heading{
    gap:8px;
    margin-top:30px;
  }

  .home-section-heading h2{
    font-size:.88rem;
  }

  .career-card{
    grid-template-columns:1fr;
    min-height:0;
  }

  .career-content{
    padding:15px;
  }

  .career-image{
    min-height:145px;
    order:-1;
  }

  .project-home-grid{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .project-home-card{
    min-height:135px;
  }

  .project-home-card:last-child{
    grid-column:auto;
    max-width:none;
  }

  .project-home-text h3{
    font-size:.72rem;
  }

  .project-home-text p{
    font-size:.61rem;
  }

  .project-home-icon{
    width:33px;
    height:33px;
    font-size:15px;
  }

  .workplace-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px;
  }

  .workplace-points div{
    font-size:.67rem;
  }

  .home-footer{
    width:calc(100% - 24px);
    flex-direction:column;
    text-align:center;
  }
}


/* ---------- SAFETY FALLBACKS FOR MISSING OPTIONAL IMAGES ---------- */

.pathway-image,
.career-image,
.project-home-image,
.workplace-image{
  background-color:#8aa17f;
}


/* ---------- FONT AWESOME ICONS ---------- */
.skills-home .brand-mark i,
.skills-home .pathway-icon i,
.skills-home .project-home-icon i,
.skills-home .workplace-points b i{
  font-family:"Font Awesome 6 Free";
  font-style:normal;
  font-weight:900;
}
.skills-home .brand-mark i{font-size:20px;}
.skills-home .pathway-icon i{font-size:24px;}
.skills-home .project-home-icon i{font-size:17px;}
.skills-home .home-secondary-links a > span{
  display:inline-flex;
  width:20px;
  justify-content:center;
  margin-right:3px;
  color:#2e7d32;
}
.skills-home .workplace-points b{
  width:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#2e7d32;
}



/* =========================================================
   LEVEL 2 GENERAL FARM WORKER HUB
   Four-tile layout based on the Level 3 project hub.
   Images are supplied by the Level 2 HTML using CSS variables.
========================================================= */

.skills-l2 .home-nav-links a{
  position:relative;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-width:92px;
  padding:7px 12px;
  text-align:center;
}

.skills-l2 .home-nav-links a>i{
  font-size:1.05rem;
  line-height:1;
  margin-bottom:2px;
}

.skills-l2 .home-nav-links .nav-main{
  display:block;
  font-size:.82rem;
  font-weight:800;
  color:#18231b;
  line-height:1.05;
}

.skills-l2 .home-nav-links .nav-sub{
  display:block;
  font-size:.65rem;
  font-weight:600;
  color:#687168;
  line-height:1.05;
  margin-top:2px;
}

.skills-l2 .home-nav-links a.active{
  background:rgba(46,125,50,.10);
}

.skills-l2 .home-nav-links a.active>i,
.skills-l2 .home-nav-links a.active .nav-main{
  color:#2e7d32;
}

.skills-l2 .home-nav-links a.active::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:2px;
  height:3px;
  border-radius:999px;
  background:#2e7d32;
}

.skills-l2 .home-nav-links a:hover{
  background:rgba(46,125,50,.08);
}

/* ---------- HERO ---------- */

.l2-farm-hero{
  position:relative;
  min-height:920px;
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:flex-start;
  isolation:isolate;
}

.l2-hero-image{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.76) 0%,
      rgba(0,0,0,.58) 42%,
      rgba(0,0,0,.28) 78%,
      rgba(0,0,0,.30) 100%
    ),
    var(--l2-hero-image);
  background-size:cover;
  background-position:center;
}

.l2-hero-content{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:122px 0 36px;
  text-align:center;
}

.l2-kicker{
  display:inline-block;
  padding:8px 15px;
  border-radius:999px;
  background:#2e7d32;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.11em;
  box-shadow:0 6px 15px rgba(0,0,0,.16);
}

.l2-hero-content h1{
  margin:18px 0 5px;
  font-size:clamp(2.8rem,5.8vw,5.1rem);
  line-height:.94;
  letter-spacing:-.035em;
  font-weight:900;
  color:#12203a;
  text-shadow:0 2px 7px rgba(255,255,255,.45);
}

.l2-hero-content h1 span{
  color:#2e7d32;
}

.l2-tagline{
  margin:0;
  font-size:clamp(1rem,1.9vw,1.32rem);
  font-weight:800;
  color:#12203a;
}

.l2-title-line{
  width:50px;
  height:4px;
  margin:13px auto 11px;
  border-radius:4px;
  background:#2e7d32;
}

.l2-intro{
  max-width:650px;
  margin:0 auto 23px;
  font-size:.96rem;
  line-height:1.45;
  font-weight:700;
  color:#263225;
}

/* ---------- FOUR-TILE HUB ---------- */

.skills-l2 .l2-learning-hub{
  width:min(1080px,100%);
  margin:20px auto 22px;
  display:grid;
  grid-template-columns:minmax(290px,1fr) 250px minmax(290px,1fr);
  grid-template-rows:repeat(2,1fr);
  column-gap:58px;
  row-gap:17px;
  align-items:center;
}

.skills-l2 .l2-route.l2-duties{grid-column:1;grid-row:1;}
.skills-l2 .l2-route.l2-skills{grid-column:1;grid-row:2;}
.skills-l2 .l2-route.l2-knowledge{grid-column:3;grid-row:1;}
.skills-l2 .l2-route.l2-portfolio{grid-column:3;grid-row:2;}

.skills-l2 .l2-route{
  position:relative;
  width:100%;
  z-index:3;
}

.skills-l2 .l2-route>a{
  position:relative;
  min-height:145px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 17px;
  overflow:hidden;
  border-radius:18px;
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 10px 25px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background:
    linear-gradient(
      90deg,
      rgba(8,28,17,.30) 0%,
      rgba(8,28,17,.30) 58%,
      rgba(8,28,17,.15) 100%
    ),
    var(--route-image);
  background-size:cover;
  background-position:center;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.skills-l2 .l2-route>a:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 30px rgba(0,0,0,.28);
  background:
    linear-gradient(
      90deg,
      rgba(8,28,17,.86) 0%,
      rgba(8,28,17,.64) 58%,
      rgba(8,28,17,.36) 100%
    ),
    var(--route-image);
  background-size:cover;
  background-position:center;
}

.skills-l2 .l2-route>a>*{
  position:relative;
  z-index:2;
}

.skills-l2 .l2-duties>a{border-left:5px solid #2e7d32;}
.skills-l2 .l2-skills>a{border-left:5px solid #6e9d47;}
.skills-l2 .l2-knowledge>a{border-left:5px solid #8b5bb3;}
.skills-l2 .l2-portfolio>a{border-left:5px solid #d4a017;}


.skills-l2 .l2-route-copy{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}

.skills-l2 .l2-route-copy strong{
  font-size:1.25rem;
  line-height:1.15;
  font-weight:900;
}

.skills-l2 .l2-route-copy small{
  font-size:.88rem;
  line-height:1.35;
  color:rgba(255,255,255,.92);
  font-weight:600;
}

.skills-l2 .l2-duty-counts{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:2px;
}

.skills-l2 .l2-duty-counts b{
  padding:3px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.17);
  color:#fff;
  font-size:.58rem;
  line-height:1.1;
  font-weight:900;
}

.skills-l2 .l2-arrow-label{
  font-size:.78rem;
  line-height:1.3;
  color:rgba(255,255,255,.85);
  font-weight:800;
}

.skills-l2 .l2-route-arrow{
  flex:0 0 auto;
  opacity:.9;
  font-size:1.25rem;
}

.skills-l2 .l2-hub-center{
  grid-column:2;
  grid-row:1 / 3;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:5;
  min-height:100%;
}

.skills-l2 .l2-hub-circle{
  width:215px;
  height:215px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:rgba(46,125,50,.96);
  border:6px solid rgba(255,255,255,.88);
  box-shadow:0 12px 32px rgba(0,0,0,.30);
  color:#fff;
}

.skills-l2 .l2-hub-circle i{
  font-size:29px;
  margin-bottom:7px;
}

.skills-l2 .l2-hub-circle strong{
  font-size:.91rem;
  line-height:1.08;
  font-weight:900;
}

.skills-l2 .l2-hub-circle span{
  font-size:.66rem;
  line-height:1.25;
  opacity:.94;
}

.skills-l2 .l2-hub-center::before,
.skills-l2 .l2-hub-center::after,
.skills-l2 .l2-route::before,
.skills-l2 .l2-route::after{
  display:none !important;
  content:none !important;
}

/* ---------- VALUE STRIP ---------- */

.skills-l2 .l2-value-strip{
  width:min(1080px,100%);
  margin:7px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  overflow:hidden;
  border-radius:14px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 9px 22px rgba(0,0,0,.18);
}

.skills-l2 .l2-value-item{
  min-height:72px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:rgba(8,35,22,.78);
  color:#fff;
  text-align:left;
}

.skills-l2 .l2-value-item>i{
  color:#b9df69;
  font-size:20px;
  flex:0 0 auto;
}

.skills-l2 .l2-value-item span{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.skills-l2 .l2-value-item strong{
  font-size:.72rem;
  line-height:1.1;
}

.skills-l2 .l2-value-item small{
  font-size:.59rem;
  line-height:1.25;
  color:rgba(255,255,255,.78);
}

/* ---------- LOWER MESSAGE ---------- */

.skills-l2 .l2-main{
  width:min(1080px,calc(100% - 36px));
  margin:0 auto;
}

.skills-l2 .l2-learning-message{
  display:flex;
  align-items:center;
  gap:16px;
  margin:28px auto 12px;
  padding:19px 22px;
  background:#fff;
  color:#263225;
  border-radius:18px;
  border-left:6px solid #2e7d32;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.skills-l2 .l2-message-icon{
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#2e7d32;
  color:#fff;
  font-size:21px;
}

.skills-l2 .l2-learning-message h2{
  margin:0 0 4px;
  color:#2e7d32;
  font-size:1.12rem;
}

.skills-l2 .l2-learning-message p{
  margin:0;
  color:#5b6472;
  font-size:.84rem;
  line-height:1.45;
}

/* ---------- TABLET ---------- */

@media(max-width:900px){
  .skills-l2 .l2-hero-content{
    width:calc(100% - 28px);
    padding-top:100px;
  }

  .skills-l2 .l2-learning-hub{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    gap:12px;
  }

  .skills-l2 .l2-hub-center{
    grid-column:1 / -1;
    grid-row:2;
    min-height:190px;
  }

  .skills-l2 .l2-route.l2-duties{grid-column:1;grid-row:1;}
  .skills-l2 .l2-route.l2-knowledge{grid-column:2;grid-row:1;}
  .skills-l2 .l2-route.l2-skills{grid-column:1;grid-row:3;}
  .skills-l2 .l2-route.l2-portfolio{grid-column:2;grid-row:3;}

  .skills-l2 .l2-value-strip{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ---------- PHONE ---------- */

@media(max-width:620px){
  .skills-l2{
    padding-bottom:25px;
  }

  .skills-l2 .l2-farm-hero{
    min-height:0;
  }

  .skills-l2 .l2-hero-image{
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.86) 0%,
        rgba(0,0,0,.58) 55%,
        rgba(0,0,0,.28) 100%
      ),
      var(--l2-hero-image);
    background-size:cover;
    background-position:center;
  }

  .skills-l2 .l2-hero-content{
    width:calc(100% - 22px);
    padding:155px 0 28px;
  }

  .skills-l2 .l2-kicker{
    font-size:.58rem;
    padding:7px 10px;
  }

  .skills-l2 .l2-hero-content h1{
    font-size:3rem;
    line-height:.92;
    margin-top:14px;
  }

  .skills-l2 .l2-tagline{
    font-size:.85rem;
  }

  .skills-l2 .l2-intro{
    font-size:.82rem;
    margin-bottom:18px;
  }

  .skills-l2 .l2-learning-hub{
    grid-template-columns:1fr;
    gap:9px;
  }

  .skills-l2 .l2-hub-center{
    grid-column:1;
    grid-row:1;
    min-height:0;
    padding:4px 0 12px;
  }

  .skills-l2 .l2-route.l2-duties,
  .skills-l2 .l2-route.l2-skills,
  .skills-l2 .l2-route.l2-knowledge,
  .skills-l2 .l2-route.l2-portfolio{
    grid-column:1;
  }

  .skills-l2 .l2-route.l2-duties{grid-row:2;}
  .skills-l2 .l2-route.l2-skills{grid-row:3;}
  .skills-l2 .l2-route.l2-knowledge{grid-row:4;}
  .skills-l2 .l2-route.l2-portfolio{grid-row:5;}

  .skills-l2 .l2-hub-circle{
    width:150px;
    height:150px;
    border-width:4px;
  }

  .skills-l2 .l2-hub-circle i{
    font-size:22px;
  }

  .skills-l2 .l2-hub-circle strong{
    font-size:.72rem;
  }

  .skills-l2 .l2-hub-circle span{
    font-size:.56rem;
  }

  .skills-l2 .l2-route>a{
    min-height:96px;
    padding:11px 12px;
    gap:10px;
  }

  .skills-l2 .l2-route-icon{
    flex-basis:42px;
    width:42px;
    height:42px;
    font-size:17px;
  }

  .skills-l2 .l2-route-copy strong{
    font-size:1.05rem;
  }

  .skills-l2 .l2-route-copy small{
    font-size:.78rem;
  }

  .skills-l2 .l2-duty-counts b{
    font-size:.54rem;
  }

  .skills-l2 .l2-arrow-label{
    font-size:.70rem;
  }

  .skills-l2 .l2-route-arrow{
    font-size:.95rem;
  }

  .skills-l2 .l2-value-strip{
    grid-template-columns:1fr 1fr;
    margin-top:12px;
  }

  .skills-l2 .l2-value-item{
    min-height:64px;
    padding:9px 10px;
    gap:8px;
  }

  .skills-l2 .l2-value-item>i{
    font-size:16px;
  }

  .skills-l2 .l2-value-item strong{
    font-size:.63rem;
  }

  .skills-l2 .l2-value-item small{
    display:none;
  }

  .skills-l2 .l2-learning-message{
    align-items:flex-start;
    gap:11px;
    padding:15px;
  }

  .skills-l2 .l2-message-icon{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:18px;
  }

  .skills-l2 .l2-learning-message h2{
    font-size:.95rem;
  }

  .skills-l2 .l2-learning-message p{
    font-size:.75rem;
  }
}

/* =========================================================
   LEVEL 3 APPRENTICE PROJECTS HOMEPAGE
   Matches the existing level3/index.html
   Scoped to .skills-l3 so it does not affect other pages.
========================================================= */

.skills-l3{
  margin:0;
  padding:0 0 55px;
  background:#f5f4ef;
  color:#263225;
}

.skills-l3 a{
  text-decoration:none;
}

/* ---------- LEVEL 3 HERO ---------- */

.skills-l3 .l3-project-hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:flex-start;
  isolation:isolate;
}


.skills-l3 .l3-hero-image{
  position:absolute;
  inset:0;
  z-index:-2;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.76) 0%,
      rgba(0,0,0,.58) 42%,
      rgba(0,0,0,.28) 78%,
      rgba(0,0,0,.30) 100%
    ),
    var(--l3-hero-image);

  background-size:cover;
  background-position:center;
}

.skills-l3 .l3-hero-content{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  padding:118px 0 45px;
}

.skills-l3 .l3-kicker{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(212,160,23,.86);
  border:1px solid rgba(255,255,255,.28);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.11em;
}

.skills-l3 .l3-hero-content h1{
  margin:18px 0 4px;
  font-size:clamp(2.8rem,6vw,5.2rem);
  line-height:.94;
  letter-spacing:-.035em;
  font-weight:900;
  text-shadow:0 3px 14px rgba(0,0,0,.3);
}

.skills-l3 .l3-hero-content h1 span{
  color:#f1c84b;
}

.skills-l3 .l3-tagline{
  margin:0;
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:800;
}

.skills-l3 .l3-title-line{
  width:65px;
  height:4px;
  margin:16px 0 12px;
  background:#d4a017;
  border-radius:4px;
}

.skills-l3 .l3-intro{
  max-width:650px;
  margin:0 0 25px;
  font-size:1rem;
  line-height:1.5;
  color:rgba(255,255,255,.93);
}

/* =========================================================
   LEVEL 3 PROJECT HUB
   Three projects on each side of the central hub
========================================================= */

.skills-l3 .l3-project-hub {
  width: min(1050px, 100%);
  margin: 18px auto 24px;

  display: grid;
  grid-template-columns: 1fr 240px 1fr;
  grid-template-rows: repeat(3, 1fr);

  column-gap: 55px;
  row-gap: 16px;

  align-items: center;
}

/* ---------- PROJECT CARDS ---------- */

.skills-l3 .l3-project-card {
  position: relative;
  z-index: 3;
}

/* LEFT SIDE */

.skills-l3 .l3-project-card.farmfood {
  grid-column: 1;
  grid-row: 1;
}

.skills-l3 .l3-project-card.farmfuture {
  grid-column: 1;
  grid-row: 2;
}

.skills-l3 .l3-project-card.cropmonitor {
  grid-column: 1;
  grid-row: 3;
}

/* RIGHT SIDE */

.skills-l3 .l3-project-card.farmguard {
  grid-column: 3;
  grid-row: 1;
}

.skills-l3 .l3-project-card.farmsafe {
  grid-column: 3;
  grid-row: 2;
}

.skills-l3 .l3-project-card.livestockmonitor {
  grid-column: 3;
  grid-row: 3;
}


/* ---------- CARD APPEARANCE ---------- */

.skills-l3 .l3-project-card > a,
.skills-l3 .l3-coming-soon-card {
  min-height: 118px;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 17px 18px;

  border-radius: 18px;

  color: #fff;
  

  border: 1px solid rgba(255,255,255,.28);

  box-shadow: 0 10px 25px rgba(0,0,0,.22);

  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);

  transition:
    transform .22s ease,
    background .22s ease,
    box-shadow .22s ease;
}

.skills-l3 .l3-project-card > a:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.19);
  box-shadow: 0 15px 30px rgba(0,0,0,.28);
}


/* ---------- PROJECT COLOUR BORDERS ---------- */

.skills-l3 .farmfood > a {
  border-left: 5px solid #00cc00;
}

.skills-l3 .farmfuture .l3-coming-soon-card {
  border-left: 5px solid #5b6472;
}

.skills-l3 .cropmonitor > a {
  border-left: 5px solid #00cc00;
}

.skills-l3 .farmguard > a {
  border-left: 5px solid #2e7d32;
}

.skills-l3 .farmsafe > a {
  border-left: 5px solid #d4a017;
}

.skills-l3 .livestockmonitor > a {
  border-left: 5px solid #c3260c;
}


/* ---------- ICONS ---------- */

.skills-l3 .l3-project-icon {
  flex: 0 0 50px;

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fff;
  color: #263225;

  font-size: 20px;

  box-shadow: 0 5px 12px rgba(0,0,0,.18);
}


/* ---------- TEXT ---------- */

.skills-l3 .l3-project-copy {
  min-width: 0;
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skills-l3 .l3-project-copy strong {
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 900;
}

.skills-l3 .l3-project-copy small {
  font-size: .72rem;
  line-height: 1.3;
  color: rgba(255,255,255,.88);
}

.skills-l3 .l3-project-copy em {
  width: max-content;

  padding: 3px 7px;

  border-radius: 999px;

  background: rgba(255,255,255,.16);
  color: #f1c84b;

  font-size: .62rem;
  font-style: normal;
  font-weight: 800;
}

.skills-l3 .l3-project-arrow {
  flex: 0 0 auto;
  opacity: .8;
}


/* =========================================================
   CENTRAL LEVEL 3 HUB
========================================================= */

.skills-l3 .l3-hub-center {
  grid-column: 2;
  grid-row: 1 / 4;

  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
  z-index: 5;

  min-height: 100%;
}


/* IMPORTANT:
   No connector lines whatsoever.
*/

.skills-l3 .l3-hub-center::before,
.skills-l3 .l3-hub-center::after {
  display: none !important;
  content: none !important;
}


.skills-l3 .l3-hub-circle {
  width: 205px;
  height: 205px;

  border-radius: 50%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: rgba(212,160,23,.94);

  border: 6px solid rgba(255,255,255,.86);

  box-shadow: 0 12px 32px rgba(0,0,0,.32);

  color: #fff;
}

.skills-l3 .l3-hub-circle i {
  font-size: 28px;
  margin-bottom: 7px;
}

.skills-l3 .l3-hub-circle strong {
  font-size: .9rem;
  line-height: 1.1;
}

.skills-l3 .l3-hub-circle span {
  font-size: .67rem;
  line-height: 1.25;
  opacity: .92;
}


/* Remove any old card pseudo-elements too */

.skills-l3 .l3-project-card::before,
.skills-l3 .l3-project-card::after {
  display: none !important;
  content: none !important;
}

/* ---------- VALUE STRIP ---------- */

.skills-l3 .l3-value-strip{
  width:min(1050px,100%);
  margin:10px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  overflow:hidden;
  border-radius:14px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
}

.skills-l3 .l3-value-item{
  min-height:74px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 15px;
  background:rgba(0,0,0,.22);
}

.skills-l3 .l3-value-item>i{
  color:#f1c84b;
  font-size:20px;
  flex:0 0 auto;
}

.skills-l3 .l3-value-item span{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.skills-l3 .l3-value-item strong{
  font-size:.75rem;
}

.skills-l3 .l3-value-item small{
  font-size:.61rem;
  line-height:1.25;
  color:rgba(255,255,255,.78);
}

/* ---------- LOWER MESSAGE ---------- */

.skills-l3 .l3-main{
  width:min(1050px,calc(100% - 36px));
  margin:0 auto;
}

.skills-l3 .l3-learning-message{
  display:flex;
  align-items:center;
  gap:18px;
  margin:30px auto 0;
  padding:20px 22px;
  background:#fff;
  color:#263225;
  border-radius:18px;
  border-left:6px solid #d4a017;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.skills-l3 .l3-message-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#d4a017;
  color:#fff;
  font-size:22px;
}

.skills-l3 .l3-learning-message h2{
  margin:0 0 4px;
  color:#8a670f;
  font-size:1.15rem;
}

.skills-l3 .l3-learning-message p{
  margin:0;
  color:#5b6472;
  font-size:.85rem;
  line-height:1.45;
}

/* ---------- NAVIGATION ACTIVE STATE ---------- */

.skills-l3 .home-nav-links a.active{
  background:rgba(212,160,23,.14);
  color:#8a670f;
}

.skills-l3 .home-nav-links a.active i{
  color:#d4a017;
}

/* ---------- FOOTER ---------- */

.skills-l3 .l3-footer{
  width:min(1050px,calc(100% - 36px));
}

/* ---------- TABLET ---------- */

@media(max-width:900px){
  .skills-l3 .l3-hero-content{
    width:calc(100% - 28px);
    padding-top:100px;
  }

  .skills-l3 .l3-project-hub{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    gap:12px;
  }

  .skills-l3 .l3-hub-center{
    grid-column:1 / -1;
    grid-row:2;
    min-height:190px;
  }

  .skills-l3 .l3-project-card.farmfood{grid-column:1;grid-row:1;}
  .skills-l3 .l3-project-card.farmguard{grid-column:2;grid-row:1;}
  .skills-l3 .l3-project-card.farmsafe{grid-column:1;grid-row:3;}
  .skills-l3 .l3-project-card.cropmonitor{grid-column:2;grid-row:3;}
  .skills-l3 .l3-project-card.livestockmonitor{grid-column:1;grid-row:4;}
  .skills-l3 .l3-project-card.farmfuture{grid-column:2;grid-row:4;}

  .skills-l3 .l3-hub-center::before{
    display:none;
  }

  .skills-l3 .l3-hub-center::after{
    height:100%;
  }

  .skills-l3 .l3-value-strip{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ---------- PHONE ---------- */

@media(max-width:620px){
  .skills-l3{
    padding-bottom:25px;
  }

  .skills-l3 .l3-project-hero{
    min-height:0;
  }

  .skills-l3 .l3-hero-image{
    background:
      linear-gradient(0deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.58) 55%,rgba(0,0,0,.28) 100%), var(--l3-hero-image); 
    background-size:cover;
    background-position:center;
  }

  .skills-l3 .l3-hero-content{
    width:calc(100% - 22px);
    padding:155px 0 28px;
  }

  .skills-l3 .l3-kicker{
    font-size:.58rem;
    padding:7px 10px;
  }

  .skills-l3 .l3-hero-content h1{
    font-size:3rem;
    line-height:.92;
    margin-top:14px;
  }

  .skills-l3 .l3-tagline{
    font-size:.85rem;
  }

  .skills-l3 .l3-intro{
    font-size:.86rem;
    margin-bottom:18px;
  }

  .skills-l3 .l3-project-hub{
    grid-template-columns:1fr;
    gap:9px;
  }

  .skills-l3 .l3-hub-center{
    grid-column:1;
    grid-row:1;
    min-height:0;
    padding:5px 0 13px;
  }

  .skills-l3 .l3-project-card.farmfood{grid-column:1;grid-row:2;}
  .skills-l3 .l3-project-card.farmguard{grid-column:1;grid-row:3;}
  .skills-l3 .l3-project-card.farmsafe{grid-column:1;grid-row:4;}
  .skills-l3 .l3-project-card.cropmonitor{grid-column:1;grid-row:5;}
  .skills-l3 .l3-project-card.livestockmonitor{grid-column:1;grid-row:6;}
  .skills-l3 .l3-project-card.farmfuture{grid-column:1;grid-row:7;}

  .skills-l3 .l3-hub-center::after{
    display:none;
  }

  .skills-l3 .l3-hub-circle{
    width:145px;
    height:145px;
    border-width:4px;
  }

  .skills-l3 .l3-hub-circle i{
    font-size:21px;
  }

  .skills-l3 .l3-hub-circle strong{
    font-size:.72rem;
  }

  .skills-l3 .l3-hub-circle span{
    font-size:.57rem;
  }

  .skills-l3 .l3-project-card>a,
  .skills-l3 .l3-coming-soon-card{
    min-height:82px;
    padding:10px 11px;
    gap:10px;
  }

  .skills-l3 .l3-project-icon{
    flex-basis:40px;
    width:40px;
    height:40px;
    font-size:16px;
  }

  .skills-l3 .l3-project-copy strong{
    font-size:.8rem;
  }

  .skills-l3 .l3-project-copy small{
    font-size:.62rem;
  }

  .skills-l3 .l3-project-arrow{
    font-size:.72rem;
  }

  .skills-l3 .l3-value-strip{
    grid-template-columns:1fr 1fr;
    margin-top:12px;
  }

  .skills-l3 .l3-value-item{
    min-height:65px;
    padding:9px 10px;
    gap:8px;
  }

  .skills-l3 .l3-value-item>i{
    font-size:16px;
  }

  .skills-l3 .l3-value-item strong{
    font-size:.64rem;
  }

  .skills-l3 .l3-value-item small{
    display:none;
  }

  .skills-l3 .l3-learning-message{
    align-items:flex-start;
    gap:12px;
    padding:15px;
  }

  .skills-l3 .l3-message-icon{
    width:42px;
    height:42px;
    flex-basis:42px;
    font-size:18px;
  }

  .skills-l3 .l3-learning-message h2{
    font-size:.95rem;
  }

  .skills-l3 .l3-learning-message p{
    font-size:.75rem;
  }
}
 /* =========================================================
   LEVEL 3 PROJECT HUB – DEFINITIVE DESKTOP LAYOUT
   No connector lines
========================================================= */

@media (min-width: 901px) {

  .skills-l3 .l3-project-hub {
    display: grid !important;

    grid-template-columns: minmax(280px, 1fr) 240px minmax(280px, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;

    column-gap: 55px !important;
    row-gap: 16px !important;

    align-items: center !important;
  }

  /* -------- LEFT COLUMN -------- */

  .skills-l3 .l3-project-card.farmfood {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .skills-l3 .l3-project-card.farmfuture {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .skills-l3 .l3-project-card.cropmonitor {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }


  /* -------- CENTRE HUB -------- */

  .skills-l3 .l3-hub-center {
    grid-column: 2 !important;
    grid-row: 1 / 4 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 100% !important;
  }


  /* -------- RIGHT COLUMN -------- */

  .skills-l3 .l3-project-card.farmguard {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .skills-l3 .l3-project-card.farmsafe {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  .skills-l3 .l3-project-card.livestockmonitor {
    grid-column: 3 !important;
    grid-row: 3 !important;
  }


  /* -------- REMOVE EVERY CONNECTOR -------- */

  .skills-l3 .l3-hub-center::before,
  .skills-l3 .l3-hub-center::after,

  .skills-l3 .l3-project-card::before,
  .skills-l3 .l3-project-card::after,

  .skills-l3 .l3-project-card.farmfood::before,
  .skills-l3 .l3-project-card.farmfood::after,
  .skills-l3 .l3-project-card.farmfuture::before,
  .skills-l3 .l3-project-card.farmfuture::after,
  .skills-l3 .l3-project-card.cropmonitor::before,
  .skills-l3 .l3-project-card.cropmonitor::after,
  .skills-l3 .l3-project-card.farmguard::before,
  .skills-l3 .l3-project-card.farmguard::after,
  .skills-l3 .l3-project-card.farmsafe::before,
  .skills-l3 .l3-project-card.farmsafe::after,
  .skills-l3 .l3-project-card.livestockmonitor::before,
  .skills-l3 .l3-project-card.livestockmonitor::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    border: 0 !important;
  }

}
/* =========================================================
   LEVEL 3 PROJECT TILE IMAGES
   Images are controlled from level3/index.html
========================================================= */

.skills-l3 .l3-project-card > a,
.skills-l3 .l3-coming-soon-card {
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.35) 55%,
      rgba(0,0,0,.18) 100%
    ),
    var(--project-image);

  background-size:cover;
  background-position:center;

  border-radius:18px;
}

/* Keep the contents above the photograph */

.skills-l3 .l3-project-card > a > *,
.skills-l3 .l3-coming-soon-card > * {
  position: relative;
  z-index: 2;
}

/* Slightly darken the photograph when hovering */

.skills-l3 .l3-project-card > a:hover {
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.68) 0%,
      rgba(0,0,0,.48) 55%,
      rgba(0,0,0,.28) 100%
    ),
    var(--project-image);

  background-size: cover;
  background-position: center;
}
/* =========================================================
   LEVEL 3 — LEARNING JOURNAL HELP TILE
   Photograph controlled from level3/index.html
========================================================= */
.skills-l3 .l3-journal-tile{width:min(1050px,100%);margin:20px auto 20px;}
.skills-l3 .l3-journal-tile-link{
  position:relative;min-height:180px;display:grid;
  grid-template-columns:82px 1fr auto;align-items:center;gap:20px;
  padding:24px 28px;overflow:hidden;border-radius:20px;
  text-decoration:none;color:#fff;
  background:linear-gradient(90deg,rgba(9,25,18,.65),rgba(9,25,18,.40) 48%,rgba(9,25,18,.15)),var(--journal-image);
  background-size:cover;background-position:center;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 25px rgba(0,0,0,.20);
  transition:transform .22s ease,box-shadow .22s ease;
}
.skills-l3 .l3-journal-tile-link:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,0,0,.27);}
.skills-l3 .l3-journal-tile-icon{
  position:relative;z-index:2;width:76px;height:76px;display:flex;
  align-items:center;justify-content:center;border-radius:18px;
  background:#d4a017;color:#17202d;font-size:31px;box-shadow:0 7px 16px rgba(0,0,0,.22);
}
.skills-l3 .l3-journal-tile-content{position:relative;z-index:2;min-width:0;display:flex;flex-direction:column;gap:4px;}
.skills-l3 .l3-journal-tile-kicker{color:#f1c84b;font-size:.66rem;font-weight:900;letter-spacing:.11em;}
.skills-l3 .l3-journal-tile-content strong{font-size:1.5rem;line-height:1.05;font-weight:900;}
.skills-l3 .l3-journal-tile-title{font-size:.95rem;line-height:1.25;font-weight:800;}
.skills-l3 .l3-journal-tile-content small{max-width:690px;color:rgba(255,255,255,.88);font-size:.76rem;line-height:1.4;}
.skills-l3 .l3-journal-tile-action{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;
  padding:11px 15px;border-radius:10px;background:#d4a017;color:#17202d;
  font-size:.68rem;font-weight:900;white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.18);
}
@media(max-width:700px){
  .skills-l3 .l3-journal-tile{margin:14px auto 16px;}
  .skills-l3 .l3-journal-tile-link{
    min-height:250px;grid-template-columns:1fr;justify-items:center;text-align:center;
    gap:10px;padding:22px 16px;
    background:linear-gradient(180deg,rgba(9,25,18,.65),rgba(9,25,18,.86)),var(--journal-image);
    background-size:cover;background-position:center;
  }
  .skills-l3 .l3-journal-tile-icon{width:62px;height:62px;border-radius:15px;font-size:25px;}
  .skills-l3 .l3-journal-tile-content{align-items:center;}
  .skills-l3 .l3-journal-tile-content strong{font-size:1.2rem;}
  .skills-l3 .l3-journal-tile-title{font-size:.8rem;}
  .skills-l3 .l3-journal-tile-content small{font-size:.66rem;line-height:1.35;}
  .skills-l3 .l3-journal-tile-action{padding:10px 14px;font-size:.62rem;}
}


/* =========================================================
   GLOBAL IMAGE ENLARGEMENT / LIGHTBOX
   Used by skills.js for any image with data-enlarge-src
========================================================= */

.roadmap-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  background:rgba(0,0,0,.82);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
}

.roadmap-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.roadmap-lightbox > img{
  display:block;
  max-width:min(94vw,1500px);
  max-height:90vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 15px 45px rgba(0,0,0,.45);
}

.roadmap-lightbox-close{
  position:absolute;
  top:18px;
  right:22px;
  z-index:2;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#263225;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 15px rgba(0,0,0,.25);
}

.roadmap-lightbox-close:hover{
  background:#fff;
  transform:scale(1.04);
}

@media(max-width:620px){
  .roadmap-lightbox{
    padding:18px;
  }

  .roadmap-lightbox > img{
    max-width:96vw;
    max-height:86vh;
    border-radius:7px;
  }

  .roadmap-lightbox-close{
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    font-size:26px;
  }
}


/* =========================================================
   LEVEL 2 HERO — TEXT CONTRAST
   Keep the darker photographic overlay but make the
   principal text readable over the image.
========================================================= */

.skills-l2 .l2-hero-content h1{
  color:#fff;
  text-shadow:0 3px 10px rgba(0,0,0,.45);
}

.skills-l2 .l2-hero-content h1 span{
  color:#b9df69;
}

.skills-l2 .l2-kicker{
  background:#6e9d47;
  color:#fff;
  border-color:rgba(255,255,255,.35);
  box-shadow:0 6px 15px rgba(0,0,0,.24);
}

.skills-l2 .l2-tagline{
  color:#fff;
  text-shadow:0 2px 7px rgba(0,0,0,.42);
}

.skills-l2 .l2-intro{
  color:#fff;
  text-shadow:0 2px 7px rgba(0,0,0,.42);
}