/* =========================================================
   SEA LICENSING — HONDURAS V2
   ========================================================= */

.hnd2{
  --ink:#082a3f;
  --navy:#052f47;
  --navy2:#086687;
  --cyan:#5fdef5;
  --blue:#139fd1;
  --line:#d7e7ed;
  --muted:#5d7581;
  overflow:hidden;
}


/* HERO */

.hnd2-hero{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  background:#052f47;
}

.hnd2-hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    url("/assets/images/flags/featured/honduras-card-bg.png")
    center center/cover no-repeat;
  transform:scale(1.035);
}

.hnd2-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      90deg,
      rgba(3,34,51,.98) 0%,
      rgba(4,48,69,.92) 35%,
      rgba(5,64,86,.62) 55%,
      rgba(4,43,62,.19) 78%,
      rgba(3,35,51,.08) 100%
    );
}

.hnd2-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(96,219,244,.025) 0,
      rgba(96,219,244,.025) 1px,
      transparent 1px,
      transparent 70px
    );
  pointer-events:none;
}

.hnd2-hero-inner{
  position:relative;
  z-index:3;
  width:calc(100% - 64px);
  max-width:1440px;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 385px;
  gap:70px;
  align-items:center;
}

.hnd2-flagline{
  display:flex;
  align-items:center;
  gap:13px;
}

.hnd2-flagline img{
  width:60px;
  height:40px;
  object-fit:cover;
  border-radius:4px;
  box-shadow:0 7px 18px rgba(0,0,0,.18);
}

.hnd2-kicker{
  display:block;
  color:#68def5;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.hnd2-hero h1{
  max-width:760px;
  margin:18px 0 0;
  color:#fff;
  font-size:clamp(54px,5vw,80px);
  line-height:.93;
  letter-spacing:-.055em;
}

.hnd2-hero h1 span{
  color:#61dcf4;
}

.hnd2-hero-copy > p{
  max-width:690px;
  margin:21px 0 0;
  color:rgba(237,248,251,.86);
  font-size:14px;
  line-height:1.7;
}

.hnd2-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.hnd2-btn{
  min-height:48px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  font-size:9px;
  font-weight:900;
  transition:.3s ease;
}

.hnd2-btn:hover{
  transform:translateY(-4px);
}

.hnd2-btn.primary{
  color:#fff;
  background:linear-gradient(135deg,#1198ce,#22b9df);
  box-shadow:0 14px 30px rgba(5,114,157,.24);
}

.hnd2-btn.ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.07);
}


/* HERO SERVICE PANEL */

.hnd2-paths{
  padding:25px;
  border:1px solid rgba(101,222,246,.24);
  border-radius:11px;
  background:
    linear-gradient(
      145deg,
      rgba(4,43,63,.95),
      rgba(7,91,119,.91)
    );
  box-shadow:0 27px 58px rgba(0,21,34,.25);
  backdrop-filter:blur(10px);
}

.hnd2-paths h2{
  margin:10px 0 18px;
  color:#fff;
  font-size:24px;
  line-height:1.05;
}

.hnd2-path{
  min-height:58px;
  padding:0 3px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:10px;
  font-weight:850;
}

.hnd2-path small{
  color:#70e1f7;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.hnd2-path.primary{
  margin:3px -9px 4px;
  padding:0 12px;
  border-top-color:rgba(105,225,247,.38);
  border-bottom:1px solid rgba(105,225,247,.22);
  background:
    linear-gradient(
      90deg,
      rgba(65,202,233,.15),
      rgba(65,202,233,.025)
    );
}


/* SERVICE NAV */

.hnd2-nav{
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid #d7e6ec;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
}

.hnd2-nav-inner{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.hnd2-nav-label{
  color:#6c838e;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.hnd2-nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.hnd2-nav-links a{
  padding:9px 11px;
  border:1px solid #d3e5ed;
  border-radius:5px;
  color:#255c73;
  background:#fff;
  font-size:8px;
  font-weight:900;
  transition:.3s ease;
}

.hnd2-nav-links a:hover{
  color:#fff;
  border-color:#149fce;
  background:#149fce;
}


/* INTRO */

.hnd2-intro{
  padding:78px 0;
  background:
    radial-gradient(circle at 87% 18%,rgba(29,173,217,.11),transparent 27%),
    repeating-linear-gradient(
      135deg,
      rgba(15,130,173,.026) 0,
      rgba(15,130,173,.026) 1px,
      transparent 1px,
      transparent 58px
    ),
    #f7fcfe;
}

.hnd2-intro-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:90px;
  align-items:end;
}

.hnd2-intro h2,
.hnd2-head h2{
  margin:12px 0 0;
  color:var(--ink);
  font-size:clamp(40px,3.9vw,58px);
  line-height:.97;
  letter-spacing:-.052em;
}

.hnd2-intro-copy{
  color:var(--muted);
  font-size:13px;
  line-height:1.72;
}

.hnd2-intro-note{
  margin-top:20px;
  padding:14px 17px;
  border-left:3px solid #24add8;
  background:rgba(255,255,255,.75);
  color:#536d79;
  font-size:9px;
  line-height:1.58;
}


/* =========================================================
   COC PRIMARY SECTION
   ========================================================= */

.hnd2-coc{
  position:relative;
  padding:90px 0 94px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 89% 14%,rgba(78,210,240,.16),transparent 27%),
    repeating-linear-gradient(
      135deg,
      rgba(77,210,239,.036) 0,
      rgba(77,210,239,.036) 1px,
      transparent 1px,
      transparent 64px
    ),
    linear-gradient(135deg,#052f47,#075c7b);
}

.hnd2-coc::before{
  content:"";
  position:absolute;
  right:-240px;
  bottom:-300px;
  width:720px;
  height:720px;
  z-index:-1;
  border:1px solid rgba(101,220,244,.11);
  border-radius:50%;
  box-shadow:
    0 0 0 80px rgba(101,220,244,.021),
    0 0 0 160px rgba(101,220,244,.012);
}

.hnd2-head{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  align-items:end;
}

.hnd2-coc .hnd2-head h2{
  color:#fff;
  font-size:clamp(48px,4.5vw,68px);
}

.hnd2-head-copy{
  color:rgba(235,248,251,.82);
  font-size:12px;
  line-height:1.72;
}

.hnd2-priority{
  display:inline-flex;
  margin-top:17px;
  padding:7px 10px;
  border:1px solid rgba(105,225,247,.29);
  border-radius:999px;
  color:#75e4f8;
  background:rgba(255,255,255,.05);
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}


/* COC PROCESS STRIP */

.hnd2-route{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid rgba(101,217,242,.18);
  border-radius:9px;
  overflow:hidden;
  background:rgba(255,255,255,.055);
}

.hnd2-route > div{
  min-height:138px;
  padding:19px;
  border-right:1px solid rgba(255,255,255,.10);
}

.hnd2-route > div:last-child{
  border-right:0;
}

.hnd2-route span{
  color:#65dff5;
  font-size:8px;
  font-weight:900;
}

.hnd2-route b{
  display:block;
  margin-top:25px;
  color:#fff;
  font-size:10px;
}

.hnd2-route small{
  display:block;
  margin-top:6px;
  color:rgba(230,247,250,.70);
  font-size:7.5px;
  line-height:1.5;
}


/* WHITE APPLICATION PANELS */

.hnd2-coc-grid{
  margin-top:15px;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:15px;
}

.hnd2-panel{
  padding:27px;
  border:1px solid rgba(107,217,240,.21);
  border-radius:9px;
  background:rgba(255,255,255,.98);
  box-shadow:0 22px 45px rgba(0,24,38,.15);
}

.hnd2-panel-label{
  color:#159fcf;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.hnd2-panel h3{
  margin:8px 0 0;
  color:#0a2e42;
  font-size:23px;
  line-height:1.05;
}

.hnd2-panel-intro{
  margin:9px 0 0;
  color:#657c87;
  font-size:9px;
  line-height:1.58;
}


/* DOCUMENT LIST */

.hnd2-doclist{
  margin-top:21px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.hnd2-docitem{
  min-height:73px;
  padding:11px;
  display:grid;
  grid-template-columns:29px 1fr;
  gap:10px;
  border:1px solid #dceaf0;
  border-radius:6px;
  background:#f8fcfe;
}

.hnd2-docitem i{
  width:27px;
  height:27px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#149dcd;
  background:#e7f7fb;
  font-style:normal;
  font-size:7px;
  font-weight:900;
}

.hnd2-docitem b{
  display:block;
  color:#173b4d;
  font-size:9px;
}

.hnd2-docitem small{
  display:block;
  margin-top:4px;
  color:#738791;
  font-size:7.5px;
  line-height:1.42;
}


/* PROCEDURE */

.hnd2-procedure{
  margin-top:18px;
}

.hnd2-step{
  min-height:76px;
  padding:12px 0;
  display:grid;
  grid-template-columns:36px 1fr;
  gap:12px;
  border-top:1px solid #dfebf0;
}

.hnd2-step i{
  width:33px;
  height:33px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#139ece;
  background:#eaf8fc;
  font-style:normal;
  font-size:8px;
  font-weight:900;
}

.hnd2-step b{
  display:block;
  color:#173b4d;
  font-size:9.5px;
}

.hnd2-step small{
  display:block;
  margin-top:4px;
  color:#718690;
  font-size:8px;
  line-height:1.48;
}


/* OFFICIAL FORMS */

.hnd2-forms{
  margin-top:15px;
  padding:27px;
  border:1px solid rgba(101,217,242,.18);
  border-radius:9px;
  background:rgba(255,255,255,.97);
}

.hnd2-forms-head{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:60px;
  align-items:end;
}

.hnd2-forms-head h3{
  margin:8px 0 0;
  color:#0b2f43;
  font-size:26px;
}

.hnd2-forms-head p{
  margin:0;
  color:#637b86;
  font-size:9px;
  line-height:1.6;
}

.hnd2-form-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}

.hnd2-form{
  position:relative;
  min-height:175px;
  padding:18px;
  border:1px solid #d5e6ed;
  border-radius:7px;
  background:#fff;
  transition:.34s ease;
}

.hnd2-form:hover{
  transform:translateY(-6px);
  border-color:#43c0e1;
  background:linear-gradient(145deg,#073b56,#086d8e);
  box-shadow:0 19px 38px rgba(5,64,90,.17);
}

.hnd2-form-code{
  width:39px;
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  color:#0d98c8;
  background:#eaf8fc;
  font-size:8px;
  font-weight:900;
}

.hnd2-form small{
  display:block;
  margin-top:19px;
  color:#159ccc;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
}

.hnd2-form b{
  display:block;
  margin-top:5px;
  color:#14384a;
  font-size:13px;
}

.hnd2-form p{
  margin:6px 0 25px;
  color:#70848e;
  font-size:7.5px;
  line-height:1.45;
}

.hnd2-form strong{
  position:absolute;
  left:18px;
  bottom:15px;
  color:#109dce;
  font-size:8px;
}

.hnd2-form:hover b{
  color:#fff;
}

.hnd2-form:hover p{
  color:rgba(233,248,251,.80);
}


/* MEDICAL */

.hnd2-medical{
  margin-top:15px;
  padding:23px 26px;
  display:grid;
  grid-template-columns:50px 1fr auto;
  gap:20px;
  align-items:center;
  border:1px solid rgba(92,218,244,.30);
  border-radius:9px;
  background:linear-gradient(110deg,#07374f,#087493);
}

.hnd2-medical-icon{
  width:47px;
  height:47px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(109,224,246,.34);
  border-radius:50%;
  color:#69def5;
  background:rgba(255,255,255,.05);
  font-size:26px;
}

.hnd2-medical span{
  color:#6ae0f6;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}

.hnd2-medical h3{
  margin:5px 0 0;
  color:#fff;
  font-size:18px;
}

.hnd2-medical p{
  max-width:720px;
  margin:7px 0 0;
  color:rgba(234,248,251,.77);
  font-size:8.5px;
  line-height:1.52;
}

.hnd2-medical a{
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:5px;
  color:#fff;
  background:rgba(255,255,255,.06);
  font-size:8px;
  font-weight:900;
}


/* RANK REQUIREMENTS */

.hnd2-rank{
  margin-top:15px;
  padding:27px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:45px;
  border:1px solid rgba(103,219,244,.18);
  border-radius:9px;
  background:rgba(3,37,55,.42);
}

.hnd2-rank h3{
  margin:8px 0 0;
  color:#fff;
  font-size:23px;
}

.hnd2-rank p{
  margin:9px 0 0;
  color:rgba(230,247,250,.73);
  font-size:9px;
  line-height:1.58;
}

.hnd2-tags{
  display:flex;
  flex-wrap:wrap;
  align-content:center;
  gap:7px;
}

.hnd2-tags span{
  padding:8px 10px;
  border:1px solid rgba(104,222,245,.24);
  border-radius:5px;
  color:#e0f7fb;
  background:rgba(255,255,255,.045);
  font-size:7.5px;
  font-weight:800;
}


/* OTHER SERVICES */

.hnd2-service{
  padding:82px 0;
}

.hnd2-service.alt{
  background:
    linear-gradient(rgba(13,128,173,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(13,128,173,.018) 1px,transparent 1px),
    linear-gradient(145deg,#edf8fb,#e7f5f9);
  background-size:70px 70px,70px 70px,auto;
}

.hnd2-service .hnd2-head{
  align-items:end;
}

.hnd2-service .hnd2-head-copy{
  color:#5d7581;
}

.hnd2-service-grid{
  margin-top:35px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:14px;
}

.hnd2-box{
  padding:25px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 29px rgba(5,69,94,.045);
}

.hnd2-box h3{
  margin:0;
  color:#0c3044;
  font-size:18px;
}

.hnd2-box p{
  color:#627985;
  font-size:9px;
  line-height:1.6;
}

.hnd2-checks{
  margin:19px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px 18px;
}

.hnd2-checks li{
  position:relative;
  padding-left:19px;
  color:#4d6875;
  font-size:9px;
  line-height:1.45;
}

.hnd2-checks li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#13a5d3;
  font-weight:900;
}


/* RESOURCES */

.hnd2-resources{
  padding:78px 0;
  background:
    radial-gradient(circle at 86% 20%,rgba(35,177,219,.12),transparent 27%),
    #f5fbfd;
}

.hnd2-resource-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.hnd2-resource{
  min-height:175px;
  padding:21px;
  border:1px solid #d6e7ed;
  border-radius:8px;
  background:#fff;
  transition:.34s ease;
}

.hnd2-resource:hover{
  transform:translateY(-6px);
  color:#fff;
  border-color:#38bce0;
  background:linear-gradient(145deg,#073b56,#096c8d);
  box-shadow:0 20px 40px rgba(5,64,90,.16);
}

.hnd2-resource span{
  color:#149ece;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}

.hnd2-resource h3{
  margin:36px 0 0;
  color:#0c3044;
  font-size:15px;
}

.hnd2-resource p{
  margin:8px 0 0;
  color:#657c87;
  font-size:8px;
  line-height:1.5;
}

.hnd2-resource:hover h3{
  color:#fff;
}

.hnd2-resource:hover p{
  color:rgba(235,248,251,.80);
}


/* CTA */

.hnd2-cta{
  padding:64px 0;
  background:
    radial-gradient(circle at 82% 50%,rgba(78,211,240,.18),transparent 27%),
    linear-gradient(110deg,#052e45,#077194);
}

.hnd2-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}

.hnd2-cta h2{
  max-width:790px;
  margin:10px 0 0;
  color:#fff;
  font-size:clamp(34px,3.4vw,49px);
  line-height:.98;
  letter-spacing:-.045em;
}


/* RESPONSIVE */

@media(max-width:1050px){

  .hnd2-hero-inner{
    grid-template-columns:1fr 330px;
    gap:38px;
  }

  .hnd2-route{
    grid-template-columns:repeat(3,1fr);
  }

  .hnd2-coc-grid{
    grid-template-columns:1fr;
  }

  .hnd2-form-grid,
  .hnd2-resource-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:820px){

  .hnd2-hero{
    padding:75px 0 65px;
  }

  .hnd2-hero-inner{
    width:calc(100% - 34px);
    grid-template-columns:1fr;
  }

  .hnd2-nav{
    position:relative;
  }

  .hnd2-nav-inner,
  .hnd2-cta-inner{
    align-items:flex-start;
    flex-direction:column;
    padding-top:14px;
    padding-bottom:14px;
  }

  .hnd2-intro-grid,
  .hnd2-head,
  .hnd2-service-grid,
  .hnd2-rank{
    grid-template-columns:1fr;
    gap:24px;
  }

  .hnd2-medical{
    grid-template-columns:1fr;
  }
}

@media(max-width:580px){

  .hnd2-route,
  .hnd2-doclist,
  .hnd2-form-grid,
  .hnd2-resource-grid,
  .hnd2-checks{
    grid-template-columns:1fr;
  }

  .hnd2-forms-head{
    grid-template-columns:1fr;
    gap:10px;
  }
}



/* =========================================================
   HONDURAS — DGMM GRADE REQUIREMENTS
   ========================================================= */

.hnd2-grade-desk{
  margin-top:15px;
  padding:30px;

  border:1px solid rgba(102,218,242,.20);
  border-radius:10px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.985),
      rgba(240,249,252,.975)
    );

  box-shadow:
    0 22px 48px rgba(0,26,40,.13);
}


/* HEADING */

.hnd2-grade-head{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:65px;
  align-items:end;
}

.hnd2-grade-head h3{
  margin:8px 0 0;

  color:#0a2e43;

  font-size:28px;
  line-height:1.05;
}

.hnd2-grade-head > p{
  max-width:580px;
  margin:0;

  color:#617986;

  font-size:9px;
  line-height:1.65;
}


/* DEPARTMENT GROUP */

.hnd2-grade-group{
  margin-top:28px;

  border:1px solid #d5e7ed;
  border-radius:9px;

  overflow:hidden;

  background:#fff;
}

.hnd2-grade-group.engine{
  margin-top:18px;
}


.hnd2-grade-group-head{
  min-height:115px;
  padding:21px 23px;

  display:grid;

  grid-template-columns:
    53px
    1fr
    auto;

  gap:17px;

  align-items:center;

  border-bottom:1px solid #dbe9ee;

  background:
    linear-gradient(
      135deg,
      #f8fcfe,
      #edf8fc
    );
}


.hnd2-grade-icon{
  width:49px;
  height:49px;

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

  border-radius:7px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #0c8fc5,
      #1ab5dc
    );

  font-size:8px;
  font-weight:900;

  box-shadow:
    0 10px 22px rgba(14,150,198,.18);
}


.hnd2-grade-group-head span{
  color:#139dcc;

  font-size:7px;
  font-weight:900;

  letter-spacing:.14em;
}


.hnd2-grade-group-head h4{
  margin:5px 0 0;

  color:#0b3044;

  font-size:19px;
}


.hnd2-grade-group-head p{
  margin:5px 0 0;

  color:#697f8a;

  font-size:8px;
  line-height:1.5;
}


.hnd2-grade-group-head > a{
  padding:10px 12px;

  border:1px solid #cee4ec;
  border-radius:5px;

  color:#118fbd;

  background:#fff;

  font-size:7.5px;
  font-weight:900;

  white-space:nowrap;

  transition:.3s ease;
}


.hnd2-grade-group-head > a:hover{
  color:#fff;

  border-color:#119dcd;

  background:#119dcd;
}


/* ENGINE NOTE */

.hnd2-engine-course-note{
  padding:15px 22px;

  display:grid;
  grid-template-columns:190px 1fr;
  gap:20px;

  border-bottom:1px solid #dce9ee;

  background:#f8fcfd;
}

.hnd2-engine-course-note b{
  color:#0d4c67;

  font-size:8px;
}

.hnd2-engine-course-note span{
  color:#647b86;

  font-size:8px;
  line-height:1.5;
}


/* DETAILS */

.hnd2-grade-list{
  display:grid;
}


.hnd2-grade{
  border-bottom:1px solid #deebf0;

  background:#fff;
}


.hnd2-grade:last-child{
  border-bottom:0;
}


.hnd2-grade summary{
  min-height:72px;

  padding:0 20px;

  display:grid;

  grid-template-columns:
    35px
    minmax(0,1fr)
    auto
    28px;

  gap:13px;

  align-items:center;

  cursor:pointer;

  list-style:none;

  transition:
    background .3s ease,
    color .3s ease;
}


.hnd2-grade summary::-webkit-details-marker{
  display:none;
}


.hnd2-grade summary:hover{
  background:#f1f9fc;
}


.hnd2-grade[open] summary{
  background:
    linear-gradient(
      90deg,
      #eef9fc,
      #f9fdfe
    );
}


.hnd2-grade-number{
  width:32px;
  height:32px;

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

  border-radius:50%;

  color:#109bc9;

  background:#e7f7fb;

  font-size:7.5px;
  font-weight:900;
}


.hnd2-grade-name b{
  display:block;

  color:#123649;

  font-size:10.5px;
}


.hnd2-grade-name small{
  display:block;

  margin-top:4px;

  color:#758993;

  font-size:7.5px;
}


.hnd2-grade-service{
  padding:6px 9px;

  border:1px solid #d2e6ed;
  border-radius:999px;

  color:#177b9e;

  background:#f7fcfe;

  font-size:7px;
  font-weight:900;

  white-space:nowrap;
}


.hnd2-grade summary > i{
  width:26px;
  height:26px;

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

  border-radius:50%;

  color:#149dcc;

  background:#e9f8fc;

  font-size:15px;
  font-style:normal;

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;
}


.hnd2-grade[open] summary > i{
  transform:rotate(45deg);

  color:#fff;

  background:#119fce;
}


/* GRADE BODY */

.hnd2-grade-body{
  padding:20px 23px 24px 68px;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:42px;

  border-top:1px solid #e3edf1;

  background:#fff;
}


.hnd2-grade-body.single{
  grid-template-columns:1fr;
}


.hnd2-grade-column h5{
  margin:0 0 12px;

  color:#0f4d67;

  font-size:9px;
}


.hnd2-grade-column ul{
  margin:0;
  padding:0;

  list-style:none;

  display:grid;
  gap:7px;
}


.hnd2-grade-column li{
  position:relative;

  padding-left:17px;

  color:#5d7480;

  font-size:8px;
  line-height:1.5;
}


.hnd2-grade-column li::before{
  content:"✓";

  position:absolute;

  left:0;
  top:0;

  color:#12a3d1;

  font-weight:900;
}


/* DGMM NOTES */

.hnd2-dgmm-notes{
  margin-top:18px;

  padding:24px;

  border:1px solid rgba(104,219,243,.20);
  border-radius:9px;

  background:
    linear-gradient(
      135deg,
      #07374f,
      #075f7c
    );
}


.hnd2-dgmm-note-grid{
  margin-top:15px;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:12px;
}


.hnd2-dgmm-note-grid p{
  margin:0;

  padding:13px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:6px;

  color:rgba(229,246,250,.75);

  background:rgba(255,255,255,.035);

  font-size:8px;
  line-height:1.55;
}


.hnd2-dgmm-note-grid b{
  color:#70e1f7;
}


/* MOBILE */

@media(max-width:850px){

  .hnd2-grade-head{
    grid-template-columns:1fr;
    gap:12px;
  }

  .hnd2-grade-group-head{
    grid-template-columns:48px 1fr;
  }

  .hnd2-grade-group-head > a{
    grid-column:1 / -1;
    justify-self:start;
  }

  .hnd2-engine-course-note{
    grid-template-columns:1fr;
    gap:6px;
  }

  .hnd2-grade-body{
    grid-template-columns:1fr;
    gap:22px;
    padding-left:23px;
  }

}


@media(max-width:560px){

  .hnd2-grade-desk{
    padding:18px;
  }

  .hnd2-grade summary{
    grid-template-columns:
      32px
      1fr
      25px;
  }

  .hnd2-grade-service{
    grid-column:2;
    justify-self:start;
  }

  .hnd2-grade summary > i{
    grid-column:3;
    grid-row:1;
  }

  .hnd2-dgmm-note-grid{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   HONDURAS — LARGER SERVICE NAVIGATION
   ========================================================= */

.hnd2 .hnd2-nav-inner{
  min-height:78px !important;
}

.hnd2 .hnd2-nav-label{
  font-size:9px !important;
  letter-spacing:.14em !important;
}

.hnd2 .hnd2-nav-links{
  gap:10px !important;
}

.hnd2 .hnd2-nav-links a{
  min-height:44px !important;

  padding:
    0 17px !important;

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

  border-radius:
    6px !important;

  font-size:
    10.5px !important;

  line-height:
    1 !important;

  font-weight:
    850 !important;

  letter-spacing:
    .005em !important;

  white-space:
    nowrap !important;
}

.hnd2 .hnd2-nav-links a:hover{
  transform:
    translateY(-2px) !important;

  box-shadow:
    0 8px 18px rgba(7,108,147,.12) !important;
}


/* TABLET */

@media(max-width:950px){

  .hnd2 .hnd2-nav-links a{
    min-height:42px !important;

    padding:
      0 14px !important;

    font-size:
      10px !important;
  }

}


/* MOBILE */

@media(max-width:700px){

  .hnd2 .hnd2-nav-links{
    width:100% !important;

    display:grid !important;

    grid-template-columns:
      1fr 1fr !important;
  }

  .hnd2 .hnd2-nav-links a{
    width:100% !important;

    min-height:44px !important;

    font-size:
      10px !important;
  }

}


/* =========================================================
   HONDURAS COC — SYMMETRICAL INTRO HEADER
   ========================================================= */

.hnd2 .hnd2-coc > .shell > .hnd2-head{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:
    90px !important;

  align-items:
    center !important;
}


/* LEFT BLOCK */

.hnd2 .hnd2-coc .hnd2-head > div:first-child{
  max-width:
    610px !important;
}


.hnd2 .hnd2-coc .hnd2-head h2{
  max-width:
    560px !important;

  margin-top:
    17px !important;

  font-size:
    clamp(50px,4.2vw,66px) !important;

  line-height:
    .96 !important;
}


/* badge stays directly below heading */

.hnd2 .hnd2-coc .hnd2-priority{
  margin-top:
    18px !important;
}


/* RIGHT COPY */

.hnd2 .hnd2-coc .hnd2-head-copy{
  position:relative !important;

  max-width:
    620px !important;

  margin:
    0 !important;

  padding:
    4px 0 4px 24px !important;

  align-self:
    center !important;

  color:
    rgba(238,249,252,.86) !important;

  font-size:
    12.5px !important;

  line-height:
    1.75 !important;
}


/* cyan vertical accent */

.hnd2 .hnd2-coc .hnd2-head-copy::before{
  content:"";

  position:absolute;

  left:0;
  top:4px;
  bottom:4px;

  width:2px;

  background:
    linear-gradient(
      180deg,
      #64dff5,
      rgba(100,223,245,.18)
    );
}


/* give both columns equal visual breathing room */

.hnd2 .hnd2-coc .hnd2-head{
  padding-bottom:
    6px !important;
}


/* TABLET */

@media(max-width:900px){

  .hnd2 .hnd2-coc > .shell > .hnd2-head{
    gap:
      45px !important;
  }

}


/* MOBILE */

@media(max-width:760px){

  .hnd2 .hnd2-coc > .shell > .hnd2-head{
    grid-template-columns:
      1fr !important;

    gap:
      25px !important;

    align-items:
      start !important;
  }

  .hnd2 .hnd2-coc .hnd2-head-copy{
    max-width:
      100% !important;
  }

}


/* =========================================================
   HONDURAS COC — READABLE DOCUMENTS + PROCEDURE
   ========================================================= */

/* MAIN WHITE PANELS */

.hnd2 .hnd2-panel{
  padding:30px 30px 32px !important;
}


/* section labels */

.hnd2 .hnd2-panel-label{
  font-size:10px !important;
  line-height:1.2 !important;
  letter-spacing:.12em !important;
}


/* main titles */

.hnd2 .hnd2-panel h3{
  margin-top:10px !important;

  font-size:26px !important;
  line-height:1.08 !important;
}


/* descriptive text under Required Documents */

.hnd2 .hnd2-panel-intro{
  margin-top:10px !important;

  font-size:11.5px !important;
  line-height:1.6 !important;
}


/* =========================================================
   REQUIRED DOCUMENT CARDS
   ========================================================= */

.hnd2 .hnd2-doclist{
  margin-top:24px !important;

  gap:11px !important;
}


.hnd2 .hnd2-docitem{
  min-height:88px !important;

  padding:15px 14px !important;

  grid-template-columns:
    34px 1fr !important;

  gap:12px !important;

  align-items:start !important;
}


.hnd2 .hnd2-docitem i{
  width:32px !important;
  height:32px !important;

  font-size:8.5px !important;
}


.hnd2 .hnd2-docitem b{
  font-size:12.5px !important;
  line-height:1.25 !important;
}


.hnd2 .hnd2-docitem small{
  margin-top:6px !important;

  font-size:10.5px !important;
  line-height:1.48 !important;

  color:#647b86 !important;
}


/* =========================================================
   APPLICATION PROCEDURE
   ========================================================= */

.hnd2 .hnd2-procedure{
  margin-top:21px !important;
}


.hnd2 .hnd2-step{
  min-height:88px !important;

  padding:15px 0 !important;

  grid-template-columns:
    42px 1fr !important;

  gap:15px !important;
}


.hnd2 .hnd2-step i{
  width:38px !important;
  height:38px !important;

  font-size:9px !important;
}


.hnd2 .hnd2-step b{
  font-size:12.5px !important;
  line-height:1.25 !important;
}


.hnd2 .hnd2-step small{
  margin-top:6px !important;

  font-size:10.5px !important;
  line-height:1.5 !important;

  color:#657c87 !important;
}


/* =========================================================
   KEEP BOTH PANELS VISUALLY BALANCED
   ========================================================= */

.hnd2 .hnd2-coc-grid{
  align-items:stretch !important;
}


.hnd2 .hnd2-coc-grid > .hnd2-panel{
  height:100% !important;
}


/* TABLET */

@media(max-width:1000px){

  .hnd2 .hnd2-docitem b,
  .hnd2 .hnd2-step b{
    font-size:12px !important;
  }

  .hnd2 .hnd2-docitem small,
  .hnd2 .hnd2-step small{
    font-size:10px !important;
  }

}


/* MOBILE */

@media(max-width:600px){

  .hnd2 .hnd2-panel{
    padding:23px !important;
  }

  .hnd2 .hnd2-panel h3{
    font-size:23px !important;
  }

  .hnd2 .hnd2-docitem b,
  .hnd2 .hnd2-step b{
    font-size:12.5px !important;
  }

  .hnd2 .hnd2-docitem small,
  .hnd2 .hnd2-step small{
    font-size:10.5px !important;
  }

}


/* =========================================================
   HONDURAS COC — INTEGRATED APPLICATION DESK
   Remove "pasted white image" appearance
   ========================================================= */


/* ---------------------------------------------------------
   MAIN TWO-COLUMN AREA
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid{
  gap:18px !important;
  align-items:stretch !important;
}


/* replace giant white rectangles with glass panels */

.hnd2 .hnd2-coc-grid > .hnd2-panel{
  padding:28px !important;

  border:
    1px solid rgba(104,219,243,.20) !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  box-shadow:
    0 18px 42px rgba(0,22,35,.10) !important;

  backdrop-filter:
    blur(7px) !important;

  -webkit-backdrop-filter:
    blur(7px) !important;
}


/* ---------------------------------------------------------
   PANEL HEADINGS — NOW PART OF DARK SECTION
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid .hnd2-panel-label{
  color:
    #69def5 !important;

  font-size:
    10px !important;
}


.hnd2 .hnd2-coc-grid .hnd2-panel h3{
  color:
    #ffffff !important;

  font-size:
    27px !important;

  margin-top:
    9px !important;
}


.hnd2 .hnd2-coc-grid .hnd2-panel-intro{
  color:
    rgba(229,246,250,.73) !important;

  font-size:
    11.5px !important;

  line-height:
    1.6 !important;
}



/* =========================================================
   REQUIRED DOCUMENT ITEMS
   ========================================================= */

.hnd2 .hnd2-doclist{
  gap:
    10px !important;

  margin-top:
    24px !important;
}


.hnd2 .hnd2-docitem{
  min-height:
    88px !important;

  padding:
    14px !important;

  border:
    1px solid rgba(120,220,241,.18) !important;

  border-radius:
    7px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.095),
      rgba(255,255,255,.045)
    ) !important;

  transition:
    transform .30s ease,
    background .30s ease,
    border-color .30s ease,
    box-shadow .30s ease !important;
}


.hnd2 .hnd2-docitem:hover{
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(101,222,246,.42) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.15),
      rgba(255,255,255,.075)
    ) !important;

  box-shadow:
    0 12px 25px rgba(0,27,42,.12) !important;
}


/* numbers */

.hnd2 .hnd2-docitem i{
  color:
    #6be0f6 !important;

  background:
    rgba(74,201,230,.13) !important;

  border:
    1px solid rgba(104,220,244,.18) !important;
}


/* titles */

.hnd2 .hnd2-docitem b{
  color:
    #ffffff !important;

  font-size:
    12.5px !important;
}


/* descriptions */

.hnd2 .hnd2-docitem small{
  color:
    rgba(221,242,247,.70) !important;

  font-size:
    10.5px !important;
}



/* =========================================================
   APPLICATION PROCEDURE
   ========================================================= */

.hnd2 .hnd2-procedure{
  margin-top:
    22px !important;
}


.hnd2 .hnd2-step{
  min-height:
    86px !important;

  padding:
    14px 13px !important;

  margin-bottom:
    8px !important;

  border:
    1px solid rgba(116,218,240,.16) !important;

  border-radius:
    7px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.085),
      rgba(255,255,255,.035)
    ) !important;

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease !important;
}


.hnd2 .hnd2-step:hover{
  transform:
    translateX(4px) !important;

  border-color:
    rgba(105,222,246,.40) !important;

  background:
    rgba(255,255,255,.12) !important;
}


/* procedure numbers */

.hnd2 .hnd2-step i{
  color:
    #6bdef5 !important;

  background:
    rgba(67,194,225,.13) !important;

  border:
    1px solid rgba(104,220,244,.18) !important;
}


/* procedure titles */

.hnd2 .hnd2-step b{
  color:
    #ffffff !important;

  font-size:
    12.5px !important;
}


/* procedure descriptions */

.hnd2 .hnd2-step small{
  color:
    rgba(222,243,248,.70) !important;

  font-size:
    10.5px !important;
}



/* =========================================================
   SUBTLE CYAN ACCENT AT TOP OF BOTH PANELS
   ========================================================= */

.hnd2 .hnd2-coc-grid > .hnd2-panel{
  position:
    relative !important;

  overflow:
    hidden !important;
}


.hnd2 .hnd2-coc-grid > .hnd2-panel::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(89,218,243,.75),
      transparent
    );
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  .hnd2 .hnd2-coc-grid > .hnd2-panel{
    padding:
      22px !important;
  }

  .hnd2 .hnd2-docitem,
  .hnd2 .hnd2-step{
    background:
      rgba(255,255,255,.075) !important;
  }

}


/* =========================================================
   HONDURAS COC — LIGHT PREMIUM APPLICATION DESK
   ========================================================= */


/* ---------------------------------------------------------
   MAIN PANELS
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid > .hnd2-panel{
  padding:30px !important;

  border:
    1px solid rgba(118,194,220,.32) !important;

  border-radius:
    11px !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(80,190,224,.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(247,252,254,.97),
      rgba(233,246,251,.94)
    ) !important;

  box-shadow:
    0 16px 34px rgba(2,37,55,.08) !important;

  backdrop-filter:
    blur(5px) !important;
}


/* subtle cyan top accent */

.hnd2 .hnd2-coc-grid > .hnd2-panel::before{
  height:2px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(48,181,219,.70),
      transparent
    ) !important;
}


/* ---------------------------------------------------------
   PANEL TITLES
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid .hnd2-panel-label{
  color:
    #129bc9 !important;
}

.hnd2 .hnd2-coc-grid .hnd2-panel h3{
  color:
    #082d42 !important;

  font-size:
    27px !important;
}

.hnd2 .hnd2-coc-grid .hnd2-panel-intro{
  color:
    #5d7581 !important;

  font-size:
    11.5px !important;
}


/* =========================================================
   REQUIRED DOCUMENT ITEMS
   ========================================================= */

.hnd2 .hnd2-docitem{
  border:
    1px solid rgba(117,190,215,.28) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.92),
      rgba(243,250,252,.88)
    ) !important;

  box-shadow:
    none !important;
}


.hnd2 .hnd2-docitem:hover{
  transform:
    translateY(-4px) !important;

  border-color:
    rgba(38,174,215,.48) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 13px 27px rgba(5,74,101,.09) !important;
}


.hnd2 .hnd2-docitem i{
  color:
    #129cc9 !important;

  background:
    #e4f6fb !important;

  border:
    1px solid rgba(45,177,216,.18) !important;
}


.hnd2 .hnd2-docitem b{
  color:
    #17394a !important;
}


.hnd2 .hnd2-docitem small{
  color:
    #647b86 !important;
}



/* =========================================================
   APPLICATION PROCEDURE
   ========================================================= */

.hnd2 .hnd2-step{
  border:
    1px solid rgba(117,190,215,.25) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.90),
      rgba(241,249,252,.86)
    ) !important;
}


.hnd2 .hnd2-step:hover{
  transform:
    translateX(5px) !important;

  border-color:
    rgba(38,174,215,.48) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 11px 24px rgba(5,74,101,.08) !important;
}


.hnd2 .hnd2-step i{
  color:
    #129cc9 !important;

  background:
    #e4f6fb !important;

  border:
    1px solid rgba(45,177,216,.18) !important;
}


.hnd2 .hnd2-step b{
  color:
    #17394a !important;
}


.hnd2 .hnd2-step small{
  color:
    #647b86 !important;
}


/* ---------------------------------------------------------
   MORE BREATHING ROOM
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid{
  gap:
    20px !important;
}


.hnd2 .hnd2-doclist{
  gap:
    11px !important;
}


.hnd2 .hnd2-step{
  margin-bottom:
    9px !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px){

  .hnd2 .hnd2-coc-grid > .hnd2-panel{
    padding:
      23px !important;
  }

}


/* =========================================================
   HONDURAS COC — FINAL 5-STEP ROUTE POLISH
   ========================================================= */

.hnd2 .hnd2-route{
  margin-top:42px !important;

  border:
    1px solid rgba(105,219,243,.23) !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  box-shadow:
    0 15px 35px rgba(0,24,38,.10) !important;
}


/* individual stages */

.hnd2 .hnd2-route > div{
  position:relative !important;

  min-height:
    145px !important;

  padding:
    22px 20px !important;

  border-right:
    1px solid rgba(125,221,241,.14) !important;

  transition:
    background .3s ease,
    transform .3s ease !important;
}


.hnd2 .hnd2-route > div:hover{
  background:
    rgba(255,255,255,.075) !important;
}


/* number */

.hnd2 .hnd2-route > div > span{
  display:inline-flex !important;

  width:30px !important;
  height:30px !important;

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

  border:
    1px solid rgba(104,222,245,.24) !important;

  border-radius:
    50% !important;

  color:
    #6fe3f7 !important;

  background:
    rgba(83,203,230,.09) !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}


/* title */

.hnd2 .hnd2-route > div > b{
  margin-top:
    18px !important;

  color:
    #ffffff !important;

  font-size:
    13px !important;

  line-height:
    1.25 !important;

  font-weight:
    850 !important;
}


/* description */

.hnd2 .hnd2-route > div > small{
  margin-top:
    7px !important;

  color:
    rgba(230,247,250,.80) !important;

  font-size:
    10.5px !important;

  line-height:
    1.5 !important;
}


/* cyan accent on hover */

.hnd2 .hnd2-route > div::after{
  content:"";

  position:absolute;

  left:20px;
  right:20px;
  bottom:0;

  height:2px;

  opacity:0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #5edcf4,
      transparent
    );

  transition:
    opacity .3s ease;
}


.hnd2 .hnd2-route > div:hover::after{
  opacity:1;
}


/* responsive */

@media(max-width:1050px){

  .hnd2 .hnd2-route{
    grid-template-columns:
      repeat(3,1fr) !important;
  }

}

@media(max-width:650px){

  .hnd2 .hnd2-route{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 .hnd2-route > div{
    min-height:auto !important;
  }

}


/* =========================================================
   HONDURAS — APPLICATION FORMS & MEDICAL FINAL POLISH
   ========================================================= */


/* OUTER SECTION */

.hnd2 .hnd2-forms{
  margin-top:18px !important;

  padding:
    30px 30px 32px !important;

  border:
    1px solid rgba(104,191,218,.30) !important;

  border-radius:
    11px !important;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(59,184,222,.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(246,252,254,.98),
      rgba(232,246,251,.95)
    ) !important;

  box-shadow:
    0 16px 34px rgba(2,39,58,.08) !important;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.hnd2 .hnd2-forms-head{
  grid-template-columns:
    minmax(0,.85fr)
    minmax(360px,1.15fr) !important;

  gap:
    70px !important;

  align-items:
    center !important;
}


.hnd2 .hnd2-forms-head .hnd2-panel-label{
  font-size:
    10px !important;
}


.hnd2 .hnd2-forms-head h3{
  margin-top:
    10px !important;

  color:
    #082d42 !important;

  font-size:
    29px !important;

  line-height:
    1.08 !important;
}


.hnd2 .hnd2-forms-head p{
  max-width:
    560px !important;

  color:
    #58717e !important;

  font-size:
    11.5px !important;

  line-height:
    1.65 !important;
}


/* =========================================================
   FORM GRID
   ========================================================= */

.hnd2 .hnd2-form-grid{
  margin-top:
    27px !important;

  gap:
    12px !important;
}


/* individual document cards */

.hnd2 .hnd2-form{
  min-height:
    205px !important;

  padding:
    21px !important;

  border:
    1px solid rgba(105,187,214,.30) !important;

  border-radius:
    8px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(243,250,253,.93)
    ) !important;

  box-shadow:
    0 7px 18px rgba(5,72,98,.035) !important;

  transition:
    transform .34s cubic-bezier(.22,1,.36,1),
    border-color .3s ease,
    box-shadow .34s ease,
    background .3s ease !important;
}


.hnd2 .hnd2-form:hover{
  transform:
    translateY(-6px) !important;

  border-color:
    rgba(38,177,217,.48) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 18px 34px rgba(5,73,100,.11) !important;
}


/* =========================================================
   ICON
   ========================================================= */

.hnd2 .hnd2-form-code{
  width:
    44px !important;

  height:
    44px !important;

  border:
    1px solid rgba(39,175,215,.16) !important;

  border-radius:
    6px !important;

  color:
    #119bc9 !important;

  background:
    #e7f7fb !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}


/* category */

.hnd2 .hnd2-form small{
  margin-top:
    20px !important;

  color:
    #1299c7 !important;

  font-size:
    8.5px !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .10em !important;
}


/* document title */

.hnd2 .hnd2-form b{
  margin-top:
    7px !important;

  color:
    #12374a !important;

  font-size:
    15px !important;

  line-height:
    1.2 !important;
}


/* document description */

.hnd2 .hnd2-form p{
  margin:
    8px 0 35px !important;

  color:
    #627985 !important;

  font-size:
    10.5px !important;

  line-height:
    1.5 !important;
}


/* bottom action */

.hnd2 .hnd2-form > strong{
  left:
    21px !important;

  bottom:
    18px !important;

  color:
    #0c96c5 !important;

  font-size:
    9.5px !important;

  font-weight:
    900 !important;
}


/* subtle action arrow movement */

.hnd2 .hnd2-form:hover > strong{
  transform:
    translateX(4px);

  transition:
    transform .28s ease;
}


/* =========================================================
   IMPORTANT MEDICAL CARD
   ========================================================= */

.hnd2 .hnd2-form:nth-child(2){
  border-color:
    rgba(32,170,212,.42) !important;

  background:
    linear-gradient(
      145deg,
      #f5fcfe,
      #eaf8fc
    ) !important;
}


.hnd2 .hnd2-form:nth-child(2)::after{
  content:"Required";

  position:absolute;

  top:18px;
  right:18px;

  padding:
    5px 8px;

  border-radius:
    999px;

  color:
    #098dbb;

  background:
    #e1f5fa;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media(max-width:1000px){

  .hnd2 .hnd2-form-grid{
    grid-template-columns:
      1fr 1fr !important;
  }

}


@media(max-width:700px){

  .hnd2 .hnd2-forms-head{
    grid-template-columns:
      1fr !important;

    gap:
      12px !important;
  }

  .hnd2 .hnd2-form-grid{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 .hnd2-form{
    min-height:
      190px !important;
  }

}


/* =========================================================
   HONDURAS — MEDICAL DOCUMENT ICON
   ========================================================= */

.hnd2 .hnd2-medical-icon{
  width:52px !important;
  height:52px !important;

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

  border:
    1px solid rgba(111,224,246,.34) !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    ) !important;

  color:
    #70e1f7 !important;

  box-shadow:
    0 8px 20px rgba(0,34,50,.10) !important;
}


.hnd2 .hnd2-medical-icon svg{
  width:29px !important;
  height:29px !important;

  overflow:visible;
}


.hnd2 .hnd2-medical-icon svg path{
  stroke:
    currentColor !important;

  stroke-width:
    1.55 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;

  vector-effect:
    non-scaling-stroke;
}


/* subtle hover response */

.hnd2 .hnd2-medical:hover .hnd2-medical-icon{
  border-color:
    rgba(112,225,247,.60) !important;

  background:
    rgba(255,255,255,.095) !important;

  transform:
    translateY(-2px);

  transition:
    transform .3s ease,
    background .3s ease,
    border-color .3s ease;
}


/* =========================================================
   HONDURAS — MEDICAL CALLOUT READABILITY
   ========================================================= */

.hnd2 .hnd2-medical{
  padding:
    26px 28px !important;

  grid-template-columns:
    56px minmax(0,1fr) auto !important;

  gap:
    24px !important;
}


/* small label */

.hnd2 .hnd2-medical span{
  font-size:
    9.5px !important;

  line-height:
    1.2 !important;

  font-weight:
    900 !important;

  letter-spacing:
    .12em !important;

  color:
    #7ae5f8 !important;
}


/* main heading */

.hnd2 .hnd2-medical h3{
  margin-top:
    7px !important;

  font-size:
    21px !important;

  line-height:
    1.15 !important;

  font-weight:
    800 !important;

  color:
    #ffffff !important;
}


/* description */

.hnd2 .hnd2-medical p{
  margin-top:
    8px !important;

  max-width:
    850px !important;

  font-size:
    11.5px !important;

  line-height:
    1.6 !important;

  color:
    rgba(238,249,252,.86) !important;
}


/* button */

.hnd2 .hnd2-medical > a{
  min-height:
    46px !important;

  padding:
    0 18px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  white-space:
    nowrap !important;
}


/* slightly larger icon */

.hnd2 .hnd2-medical-icon{
  width:
    54px !important;

  height:
    54px !important;
}


/* MOBILE */

@media(max-width:760px){

  .hnd2 .hnd2-medical{
    grid-template-columns:
      1fr !important;

    gap:
      16px !important;
  }

  .hnd2 .hnd2-medical h3{
    font-size:
      19px !important;
  }

  .hnd2 .hnd2-medical p{
    font-size:
      11px !important;
  }

  .hnd2 .hnd2-medical > a{
    justify-self:
      start !important;
  }

}


/* =========================================================
   HONDURAS — MEDICAL DOWNLOAD BUTTON ANIMATION
   ========================================================= */

.hnd2 .hnd2-medical > a{
  position:relative !important;

  overflow:hidden !important;

  gap:9px !important;

  border:
    1px solid rgba(255,255,255,.34) !important;

  background:
    rgba(255,255,255,.065) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 7px 18px rgba(0,32,49,.08) !important;

  transition:
    transform .34s cubic-bezier(.22,1,.36,1),
    background .30s ease,
    color .30s ease,
    border-color .30s ease,
    box-shadow .34s ease !important;
}


/* text stays above sweep */

.hnd2 .hnd2-medical > a span,
.hnd2 .hnd2-medical > a i{
  position:relative !important;
  z-index:2 !important;
}


/* arrow */

.hnd2 .hnd2-medical > a i{
  display:inline-block !important;

  font-style:normal !important;

  font-size:13px !important;

  transition:
    transform .34s cubic-bezier(.22,1,.36,1) !important;
}


/* light sweep */

.hnd2 .hnd2-medical > a::before{
  content:"";

  position:absolute;

  top:-25%;
  bottom:-25%;

  left:-48%;

  width:35%;

  z-index:1;

  transform:
    skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.58),
      transparent
    );

  opacity:0;

  transition:
    left .58s cubic-bezier(.22,1,.36,1),
    opacity .25s ease;
}


/* hover */

.hnd2 .hnd2-medical > a:hover{
  transform:
    translateY(-4px) !important;

  border-color:
    rgba(255,255,255,.88) !important;

  background:
    #ffffff !important;

  color:
    #076486 !important;

  box-shadow:
    0 15px 30px rgba(0,37,56,.18) !important;
}


.hnd2 .hnd2-medical > a:hover i{
  transform:
    translateX(5px) !important;
}


.hnd2 .hnd2-medical > a:hover::before{
  left:
    118% !important;

  opacity:
    1 !important;
}


/* click feedback */

.hnd2 .hnd2-medical > a:active{
  transform:
    translateY(-1px)
    scale(.985) !important;
}


/* keyboard focus */

.hnd2 .hnd2-medical > a:focus-visible{
  outline:
    2px solid #7be7fa !important;

  outline-offset:
    3px !important;
}


/* reduced motion */

@media(prefers-reduced-motion:reduce){

  .hnd2 .hnd2-medical > a,
  .hnd2 .hnd2-medical > a i,
  .hnd2 .hnd2-medical > a::before{
    transition:none !important;
  }

}


/* =========================================================
   HONDURAS — MEDICAL BUTTON FINAL
   ========================================================= */

.hnd2 .hnd2-medical > a{
  min-height:46px !important;

  padding:0 18px !important;

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

  gap:10px !important;

  border:
    1px solid rgba(132,225,244,.38) !important;

  border-radius:
    6px !important;

  background:
    rgba(255,255,255,.055) !important;

  color:
    #ffffff !important;

  box-shadow:
    none !important;

  overflow:hidden !important;

  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}


/* text */

.hnd2 .hnd2-medical > a span{
  color:#ffffff !important;

  font-size:10px !important;
  font-weight:850 !important;

  letter-spacing:.01em !important;
}


/* arrow */

.hnd2 .hnd2-medical > a i{
  color:#72e1f6 !important;

  font-size:14px !important;
  font-style:normal !important;

  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    color .28s ease !important;
}


/* remove previous sweep */

.hnd2 .hnd2-medical > a::before{
  display:none !important;
}


/* hover */

.hnd2 .hnd2-medical > a:hover{
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(107,224,247,.72) !important;

  background:
    rgba(47,181,214,.16) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 10px 24px rgba(0,41,59,.16),
    0 0 0 1px rgba(96,218,242,.06) inset !important;
}


.hnd2 .hnd2-medical > a:hover span{
  color:
    #ffffff !important;
}


.hnd2 .hnd2-medical > a:hover i{
  color:
    #8ce9fa !important;

  transform:
    translateX(5px) !important;
}


/* click */

.hnd2 .hnd2-medical > a:active{
  transform:
    translateY(-1px) !important;
}


/* keyboard */

.hnd2 .hnd2-medical > a:focus-visible{
  outline:
    2px solid #73e2f7 !important;

  outline-offset:
    3px !important;
}


/* =========================================================
   HONDURAS — APPLICATION FORMS HEADER SYMMETRY
   ========================================================= */

.hnd2 .hnd2-forms-head{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:
    90px !important;

  align-items:
    center !important;
}


/* LEFT */

.hnd2 .hnd2-forms-head > div{
  max-width:
    560px !important;
}


.hnd2 .hnd2-forms-head .hnd2-panel-label{
  display:block !important;

  font-size:
    10px !important;
}


.hnd2 .hnd2-forms-head h3{
  margin:
    11px 0 0 !important;

  max-width:
    520px !important;

  color:
    #082d42 !important;

  font-size:
    30px !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -.025em !important;
}


/* RIGHT */

.hnd2 .hnd2-forms-head > p{
  position:relative !important;

  max-width:
    560px !important;

  margin:
    0 !important;

  padding:
    4px 0 4px 24px !important;

  align-self:
    center !important;

  color:
    #58717e !important;

  font-size:
    11.5px !important;

  line-height:
    1.7 !important;
}


/* cyan vertical accent */

.hnd2 .hnd2-forms-head > p::before{
  content:"";

  position:absolute;

  left:0;
  top:3px;
  bottom:3px;

  width:2px;

  background:
    linear-gradient(
      180deg,
      #28add7,
      rgba(40,173,215,.15)
    );
}


/* more deliberate spacing before cards */

.hnd2 .hnd2-form-grid{
  margin-top:
    32px !important;
}


/* TABLET */

@media(max-width:900px){

  .hnd2 .hnd2-forms-head{
    gap:
      45px !important;
  }

}


/* MOBILE */

@media(max-width:700px){

  .hnd2 .hnd2-forms-head{
    grid-template-columns:
      1fr !important;

    gap:
      20px !important;

    align-items:
      start !important;
  }

  .hnd2 .hnd2-forms-head > p{
    max-width:
      100% !important;
  }

}


/* =========================================================
   HONDURAS COC — DIFFERENTIATE CHECKLIST / PROCEDURE
   Left = document cards
   Right = vertical timeline
   ========================================================= */


/* ---------------------------------------------------------
   PROCEDURE PANEL
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid > .hnd2-panel:nth-child(2){
  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(39,174,215,.10),
      transparent 28%
    ),
    linear-gradient(
      150deg,
      #f7fcfe 0%,
      #eaf6fa 100%
    ) !important;

  border-color:
    rgba(77,169,200,.32) !important;
}


/* different top accent */

.hnd2 .hnd2-coc-grid > .hnd2-panel:nth-child(2)::before{
  background:
    linear-gradient(
      90deg,
      transparent,
      #168fbd,
      #50cee9,
      transparent
    ) !important;
}


/* ---------------------------------------------------------
   TIMELINE CONTAINER
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid
> .hnd2-panel:nth-child(2)
.hnd2-procedure{
  position:relative !important;

  margin-top:
    26px !important;

  padding-left:
    8px !important;
}


/* vertical timeline rail */

.hnd2 .hnd2-coc-grid
> .hnd2-panel:nth-child(2)
.hnd2-procedure::before{
  content:"";

  position:absolute;

  left:
    26px;

  top:
    22px;

  bottom:
    22px;

  width:
    2px;

  background:
    linear-gradient(
      180deg,
      #35b7dc 0%,
      rgba(53,183,220,.22) 100%
    );
}


/* ---------------------------------------------------------
   EACH PROCEDURE STEP
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid
> .hnd2-panel:nth-child(2)
.hnd2-step{
  position:relative !important;

  min-height:
    94px !important;

  margin:
    0 0 10px !important;

  padding:
    18px 18px 18px 67px !important;

  display:block !important;

  border:
    0 !important;

  border-bottom:
    1px solid rgba(86,153,181,.18) !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  transition:
    background .28s ease,
    transform .28s ease,
    border-color .28s ease !important;
}


.hnd2 .hnd2-coc-grid
> .hnd2-panel:nth-child(2)
.hnd2-step:last-child{
  border-bottom:
    0 !important;
}


/* number node */

.hnd2 .hnd2-coc-grid
> .hnd2-panel:nth-child(2)
.hnd2-step i{
  position:absolute !important;

  left:
    0 !important;

  top:
    17px !important;

  width:
    38px !important;

  height:
    38px !important;

  display:flex !important;

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

  z-index:
    2 !important;

  border:
    2px solid #b9e4f1 !important;

  border-radius:
    50% !important;

  color:
    #0e92bf !important;

  background:
    #ffffff !important;

  box-shadow:
    0 5px 13px rgba(7,91,124,.08) !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}


/* title */

.hnd2 .hnd2-coc-grid
> .hnd2-panel:nth-child(2)
.hnd2-step b{
  display:block !important;

  color:
    #11394d !important;

  font-size:
    13px !important;

  line-height:
    1.3 !important;
}


/* description */

.hnd2 .hnd2-coc-grid
> .hnd2-panel:nth-child(2)
.hnd2-step small{
  display:block !important;

  max-width:
    470px !important;

  margin-top:
    7px !important;

  color:
    #607985 !important;

  font-size:
    10.5px !important;

  line-height:
    1.55 !important;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid
> .hnd2-panel:nth-child(2)
.hnd2-step:hover{
  transform:
    translateX(5px) !important;

  border-bottom-color:
    rgba(38,169,210,.34) !important;

  background:
    linear-gradient(
      90deg,
      rgba(40,175,215,.055),
      transparent
    ) !important;
}


.hnd2 .hnd2-coc-grid
> .hnd2-panel:nth-child(2)
.hnd2-step:hover i{
  border-color:
    #45c3e2 !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #159bc8,
      #28bce0
    ) !important;
}


/* ---------------------------------------------------------
   REQUIRED DOCUMENTS REMAINS CARD-BASED
   --------------------------------------------------------- */

.hnd2 .hnd2-coc-grid
> .hnd2-panel:first-child{
  background:
    linear-gradient(
      145deg,
      #f8fcfe,
      #edf7fa
    ) !important;
}


.hnd2 .hnd2-coc-grid
> .hnd2-panel:first-child
.hnd2-docitem{
  border-radius:
    7px !important;

  background:
    rgba(255,255,255,.78) !important;
}


/* MOBILE */

@media(max-width:760px){

  .hnd2 .hnd2-coc-grid
  > .hnd2-panel:nth-child(2)
  .hnd2-step{
    padding-left:
      60px !important;
  }

}


/* =========================================================
   HONDURAS — DGMM GRADE HEADER SYMMETRY
   ========================================================= */

.hnd2 .hnd2-grade-head{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:
    90px !important;

  align-items:
    center !important;
}


/* LEFT SIDE */

.hnd2 .hnd2-grade-head > div{
  max-width:
    610px !important;
}


.hnd2 .hnd2-grade-head .hnd2-panel-label{
  display:block !important;

  font-size:
    10px !important;

  line-height:
    1.2 !important;
}


.hnd2 .hnd2-grade-head h3{
  max-width:
    600px !important;

  margin:
    11px 0 0 !important;

  color:
    #082d42 !important;

  font-size:
    31px !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -.025em !important;
}


/* RIGHT SIDE */

.hnd2 .hnd2-grade-head > p{
  position:
    relative !important;

  max-width:
    590px !important;

  margin:
    0 !important;

  padding:
    5px 0 5px 24px !important;

  align-self:
    center !important;

  color:
    #58717e !important;

  font-size:
    11.5px !important;

  line-height:
    1.7 !important;
}


/* cyan divider */

.hnd2 .hnd2-grade-head > p::before{
  content:"";

  position:absolute;

  left:0;
  top:4px;
  bottom:4px;

  width:2px;

  background:
    linear-gradient(
      180deg,
      #29aed8,
      rgba(41,174,216,.14)
    );
}


/* spacing before department cards */

.hnd2 .hnd2-grade-group{
  margin-top:
    34px !important;
}


/* TABLET */

@media(max-width:900px){

  .hnd2 .hnd2-grade-head{
    gap:
      45px !important;
  }

}


/* MOBILE */

@media(max-width:700px){

  .hnd2 .hnd2-grade-head{
    grid-template-columns:
      1fr !important;

    gap:
      20px !important;

    align-items:
      start !important;
  }

  .hnd2 .hnd2-grade-head > p{
    max-width:
      100% !important;
  }

}


/* =========================================================
   HONDURAS — DGMM GRADE REQUIREMENTS READABILITY
   ========================================================= */


/* ---------------------------------------------------------
   DEPARTMENT HEADER
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-group-head{
  min-height:132px !important;

  padding:
    24px 26px !important;
}


.hnd2 .hnd2-grade-group-head span{
  font-size:
    9px !important;

  line-height:
    1.2 !important;
}


.hnd2 .hnd2-grade-group-head h4{
  margin-top:
    7px !important;

  font-size:
    22px !important;

  line-height:
    1.15 !important;
}


.hnd2 .hnd2-grade-group-head p{
  margin-top:
    7px !important;

  max-width:
    700px !important;

  font-size:
    10.5px !important;

  line-height:
    1.55 !important;
}


.hnd2 .hnd2-grade-group-head > a{
  min-height:
    42px !important;

  padding:
    0 14px !important;

  display:inline-flex !important;
  align-items:center !important;

  font-size:
    9.5px !important;
}


/* department icon */

.hnd2 .hnd2-grade-icon{
  width:
    54px !important;

  height:
    54px !important;

  font-size:
    9px !important;
}


/* ---------------------------------------------------------
   CLOSED / OPEN GRADE ROW
   --------------------------------------------------------- */

.hnd2 .hnd2-grade summary{
  min-height:
    88px !important;

  padding:
    0 23px !important;

  grid-template-columns:
    40px
    minmax(0,1fr)
    auto
    32px !important;

  gap:
    16px !important;
}


/* grade number */

.hnd2 .hnd2-grade-number{
  width:
    36px !important;

  height:
    36px !important;

  font-size:
    9px !important;
}


/* rank name */

.hnd2 .hnd2-grade-name b{
  font-size:
    14px !important;

  line-height:
    1.3 !important;

  font-weight:
    800 !important;
}


/* level / STCW reference */

.hnd2 .hnd2-grade-name small{
  margin-top:
    5px !important;

  font-size:
    10px !important;

  line-height:
    1.4 !important;

  color:
    #657c87 !important;
}


/* sea-service badge */

.hnd2 .hnd2-grade-service{
  padding:
    7px 11px !important;

  font-size:
    9px !important;

  line-height:
    1 !important;
}


/* expand icon */

.hnd2 .hnd2-grade summary > i{
  width:
    30px !important;

  height:
    30px !important;

  font-size:
    16px !important;
}


/* ---------------------------------------------------------
   EXPANDED REQUIREMENTS AREA
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-body{
  padding:
    27px 30px 31px 70px !important;

  gap:
    62px !important;
}


/* column heading */

.hnd2 .hnd2-grade-column h5{
  margin:
    0 0 16px !important;

  color:
    #0b425b !important;

  font-size:
    13px !important;

  line-height:
    1.3 !important;

  font-weight:
    850 !important;
}


/* requirements list spacing */

.hnd2 .hnd2-grade-column ul{
  gap:
    10px !important;
}


/* actual requirements */

.hnd2 .hnd2-grade-column li{
  padding-left:
    21px !important;

  color:
    #506b78 !important;

  font-size:
    11.5px !important;

  line-height:
    1.58 !important;
}


/* check mark */

.hnd2 .hnd2-grade-column li::before{
  font-size:
    11px !important;

  top:
    1px !important;
}


/* ---------------------------------------------------------
   ENGINE OFFICER INFORMATION BAR
   --------------------------------------------------------- */

.hnd2 .hnd2-engine-course-note{
  padding:
    18px 24px !important;

  grid-template-columns:
    220px 1fr !important;

  gap:
    25px !important;
}


.hnd2 .hnd2-engine-course-note b{
  font-size:
    11px !important;

  line-height:
    1.4 !important;
}


.hnd2 .hnd2-engine-course-note span{
  font-size:
    10.5px !important;

  line-height:
    1.55 !important;
}


/* ---------------------------------------------------------
   DGMM IMPORTANT CONDITIONS
   --------------------------------------------------------- */

.hnd2 .hnd2-dgmm-notes{
  padding:
    27px !important;
}


.hnd2 .hnd2-dgmm-note-grid{
  gap:
    14px !important;
}


.hnd2 .hnd2-dgmm-note-grid p{
  padding:
    16px !important;

  font-size:
    10.5px !important;

  line-height:
    1.6 !important;
}


.hnd2 .hnd2-dgmm-note-grid b{
  font-size:
    11px !important;
}


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

@media(max-width:900px){

  .hnd2 .hnd2-grade-body{
    gap:
      32px !important;

    padding-left:
      28px !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:600px){

  .hnd2 .hnd2-grade summary{
    padding:
      15px !important;
  }

  .hnd2 .hnd2-grade-name b{
    font-size:
      13px !important;
  }

  .hnd2 .hnd2-grade-name small{
    font-size:
      9.5px !important;
  }

  .hnd2 .hnd2-grade-body{
    padding:
      22px !important;
  }

  .hnd2 .hnd2-grade-column h5{
    font-size:
      12.5px !important;
  }

  .hnd2 .hnd2-grade-column li{
    font-size:
      11px !important;
  }

}


/* =========================================================
   HONDURAS — COC DEPARTMENTS + REQUIREMENT PANELS
   ========================================================= */


/* =========================================================
   DECK / ENGINE DEPARTMENT HEADERS — DARK DIVIDERS
   ========================================================= */

.hnd2 .hnd2-grade-group-head{
  position:relative !important;

  min-height:138px !important;

  padding:
    25px 27px !important;

  border-bottom:
    1px solid rgba(100,219,243,.22) !important;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(75,211,240,.15),
      transparent 29%
    ),
    linear-gradient(
      135deg,
      #07344e 0%,
      #075878 100%
    ) !important;

  overflow:hidden !important;
}


/* subtle technical lines */

.hnd2 .hnd2-grade-group-head::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.34;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(112,225,247,.055) 0,
      rgba(112,225,247,.055) 1px,
      transparent 1px,
      transparent 62px
    );
}


/* make actual content sit above background */

.hnd2 .hnd2-grade-group-head > *{
  position:relative;
  z-index:2;
}


/* department icon */

.hnd2 .hnd2-grade-icon{
  width:56px !important;
  height:56px !important;

  border:
    1px solid rgba(116,228,248,.34) !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #1297c9,
      #34bddf
    ) !important;

  box-shadow:
    0 10px 24px rgba(0,28,43,.20) !important;
}


/* small DECK / ENGINE label */

.hnd2 .hnd2-grade-group-head span{
  color:
    #70e1f7 !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .14em !important;
}


/* department title */

.hnd2 .hnd2-grade-group-head h4{
  margin-top:
    7px !important;

  color:
    #ffffff !important;

  font-size:
    23px !important;

  line-height:
    1.15 !important;

  font-weight:
    800 !important;
}


/* description */

.hnd2 .hnd2-grade-group-head p{
  margin-top:
    7px !important;

  color:
    rgba(229,247,251,.78) !important;

  font-size:
    10.5px !important;

  line-height:
    1.55 !important;
}


/* DGMM requirement button */

.hnd2 .hnd2-grade-group-head > a{
  min-height:
    44px !important;

  padding:
    0 15px !important;

  display:inline-flex !important;

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

  position:relative !important;
  overflow:hidden !important;

  border:
    1px solid rgba(123,226,247,.38) !important;

  border-radius:
    6px !important;

  color:
    #ffffff !important;

  background:
    rgba(255,255,255,.07) !important;

  font-size:
    9.5px !important;

  font-weight:
    850 !important;

  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease !important;
}


.hnd2 .hnd2-grade-group-head > a:hover{
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(120,228,248,.75) !important;

  color:
    #ffffff !important;

  background:
    rgba(42,181,216,.20) !important;

  box-shadow:
    0 12px 26px rgba(0,30,46,.18) !important;
}



/* =========================================================
   OPEN GRADE BODY
   ========================================================= */

.hnd2 .hnd2-grade-body{
  padding:
    27px 30px 30px !important;

  gap:
    18px !important;

  background:
    linear-gradient(
      145deg,
      #eef8fb,
      #f8fcfd
    ) !important;
}



/* =========================================================
   SEA SERVICE / TRAINING — DISTINCT PANELS
   ========================================================= */

.hnd2 .hnd2-grade-column{
  position:relative !important;

  min-height:
    100% !important;

  padding:
    23px 24px 25px !important;

  border:
    1px solid rgba(102,183,210,.30) !important;

  border-radius:
    8px !important;

  overflow:
    hidden !important;

  box-shadow:
    0 8px 22px rgba(5,70,95,.05) !important;
}


/* ---------------------------------------------------------
   LEFT — SEA SERVICE
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-column:first-child{
  background:
    radial-gradient(
      circle at 90% 5%,
      rgba(45,168,210,.10),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      #edf8fb
    ) !important;
}


/* left cyan accent */

.hnd2 .hnd2-grade-column:first-child::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:3px;

  background:
    linear-gradient(
      180deg,
      #159dce,
      #6cdaef
    );
}



/* ---------------------------------------------------------
   RIGHT — TRAINING REQUIREMENTS
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-column:nth-child(2){
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(52,196,216,.10),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #f8fcfd,
      #e7f6f9
    ) !important;
}


/* right cyan/teal accent */

.hnd2 .hnd2-grade-column:nth-child(2)::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:3px;

  background:
    linear-gradient(
      180deg,
      #21b0cb,
      #72e0e7
    );
}



/* =========================================================
   COLUMN HEADINGS
   ========================================================= */

.hnd2 .hnd2-grade-column h5{
  position:relative !important;

  margin:
    0 0 20px !important;

  padding-bottom:
    13px !important;

  color:
    #0b3a51 !important;

  font-size:
    14px !important;

  line-height:
    1.25 !important;

  font-weight:
    850 !important;

  border-bottom:
    1px solid rgba(88,164,191,.22) !important;
}


/* service icon before heading */

.hnd2 .hnd2-grade-column:first-child h5::before{
  content:"SEA SERVICE";

  display:inline-flex;

  margin-right:
    10px;

  padding:
    5px 7px;

  border-radius:
    4px;

  color:
    #087fac;

  background:
    #e3f5fa;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .10em;

  vertical-align:
    2px;
}


/* training badge */

.hnd2 .hnd2-grade-column:nth-child(2) h5::before{
  content:"TRAINING";

  display:inline-flex;

  margin-right:
    10px;

  padding:
    5px 7px;

  border-radius:
    4px;

  color:
    #0788a2;

  background:
    #def5f8;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .10em;

  vertical-align:
    2px;
}



/* =========================================================
   REQUIREMENT ITEMS
   ========================================================= */

.hnd2 .hnd2-grade-column ul{
  display:grid !important;

  gap:
    8px !important;
}


.hnd2 .hnd2-grade-column li{
  position:relative !important;

  margin:0 !important;

  padding:
    9px 11px 9px 30px !important;

  border:
    1px solid rgba(102,182,208,.16) !important;

  border-radius:
    5px !important;

  color:
    #4d6875 !important;

  background:
    rgba(255,255,255,.62) !important;

  font-size:
    11.5px !important;

  line-height:
    1.5 !important;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease !important;
}


/* check */

.hnd2 .hnd2-grade-column li::before{
  content:"✓" !important;

  position:absolute !important;

  left:
    11px !important;

  top:
    9px !important;

  color:
    #129fcf !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;
}


/* hover aids scanning */

.hnd2 .hnd2-grade-column li:hover{
  transform:
    translateX(3px) !important;

  border-color:
    rgba(39,169,210,.35) !important;

  background:
    #ffffff !important;
}



/* =========================================================
   ENGINE COURSE INFORMATION STRIP
   ========================================================= */

.hnd2 .hnd2-engine-course-note{
  padding:
    18px 24px !important;

  border-bottom:
    1px solid rgba(101,184,210,.25) !important;

  background:
    linear-gradient(
      90deg,
      #eaf7fa,
      #f7fcfd
    ) !important;
}


.hnd2 .hnd2-engine-course-note b{
  color:
    #0c4b66 !important;

  font-size:
    11px !important;
}


.hnd2 .hnd2-engine-course-note span{
  color:
    #566f7b !important;

  font-size:
    10.5px !important;

  line-height:
    1.55 !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:850px){

  .hnd2 .hnd2-grade-group-head{
    grid-template-columns:
      54px 1fr !important;
  }

  .hnd2 .hnd2-grade-group-head > a{
    grid-column:
      1 / -1 !important;

    justify-self:
      start !important;
  }

  .hnd2 .hnd2-grade-body{
    grid-template-columns:
      1fr !important;

    padding:
      20px !important;
  }

  .hnd2 .hnd2-grade-column{
    padding:
      20px !important;
  }

}


/* =========================================================
   HONDURAS — GRADE REQUIREMENTS FINAL SYMMETRICAL DESIGN
   Sea Service and Training become full-width requirement bands.
   ========================================================= */


/* ---------------------------------------------------------
   BODY — STACK BOTH CATEGORIES
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-body{
  display:grid !important;

  grid-template-columns:
    1fr !important;

  gap:
    14px !important;

  padding:
    22px !important;

  align-items:
    start !important;

  background:
    linear-gradient(
      145deg,
      #eef8fb,
      #f8fcfd
    ) !important;
}


/* remove old forced equal height */

.hnd2 .hnd2-grade-column{
  min-height:
    0 !important;

  height:
    auto !important;

  padding:
    0 !important;

  border:
    1px solid rgba(102,183,210,.28) !important;

  border-radius:
    9px !important;

  overflow:
    hidden !important;

  background:
    #ffffff !important;

  box-shadow:
    0 8px 22px rgba(5,70,95,.045) !important;
}


/* remove previous vertical accent */

.hnd2 .hnd2-grade-column::before{
  display:
    none !important;
}


/* =========================================================
   CATEGORY HEADER
   ========================================================= */

.hnd2 .hnd2-grade-column h5{
  min-height:
    62px !important;

  margin:
    0 !important;

  padding:
    0 20px !important;

  display:flex !important;

  align-items:center !important;

  gap:
    11px !important;

  border-bottom:
    1px solid rgba(93,169,195,.22) !important;

  color:
    #0b3850 !important;

  font-size:
    14px !important;

  line-height:
    1.2 !important;

  font-weight:
    850 !important;
}


/* Sea Service header */

.hnd2 .hnd2-grade-column:first-child h5{
  background:
    linear-gradient(
      90deg,
      #eaf7fb,
      #f7fcfe
    ) !important;
}


/* Training header */

.hnd2 .hnd2-grade-column:nth-child(2) h5{
  background:
    linear-gradient(
      90deg,
      #e5f7f9,
      #f5fcfd
    ) !important;
}


/* category badges */

.hnd2 .hnd2-grade-column:first-child h5::before,
.hnd2 .hnd2-grade-column:nth-child(2) h5::before{
  margin:
    0 !important;

  padding:
    6px 8px !important;

  border-radius:
    5px !important;

  font-size:
    7.5px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .11em !important;
}


.hnd2 .hnd2-grade-column:first-child h5::before{
  content:
    "SEA SERVICE" !important;

  color:
    #087fa9 !important;

  background:
    #dff4fa !important;
}


.hnd2 .hnd2-grade-column:nth-child(2) h5::before{
  content:
    "TRAINING" !important;

  color:
    #067f99 !important;

  background:
    #daf3f6 !important;
}


/* =========================================================
   REQUIREMENT GRID
   ========================================================= */

.hnd2 .hnd2-grade-column ul{
  margin:
    0 !important;

  padding:
    17px !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:
    9px !important;
}


/* individual requirement */

.hnd2 .hnd2-grade-column li{
  min-height:
    52px !important;

  margin:
    0 !important;

  padding:
    10px 13px 10px 34px !important;

  display:flex !important;

  align-items:center !important;

  position:relative !important;

  border:
    1px solid rgba(101,181,208,.18) !important;

  border-radius:
    6px !important;

  color:
    #4c6774 !important;

  background:
    linear-gradient(
      145deg,
      #fbfdfe,
      #f3f9fb
    ) !important;

  font-size:
    11px !important;

  line-height:
    1.45 !important;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease !important;
}


/* checkmark */

.hnd2 .hnd2-grade-column li::before{
  content:
    "✓" !important;

  position:absolute !important;

  left:
    13px !important;

  top:
    50% !important;

  transform:
    translateY(-50%) !important;

  color:
    #149dcc !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;
}


/* hover */

.hnd2 .hnd2-grade-column li:hover{
  transform:
    translateY(-2px) !important;

  border-color:
    rgba(38,169,210,.38) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 8px 18px rgba(5,72,98,.07) !important;
}


/* =========================================================
   TRAINING PANEL DIFFERENTIATION
   ========================================================= */

.hnd2 .hnd2-grade-column:nth-child(2){
  border-color:
    rgba(72,184,200,.27) !important;
}


.hnd2 .hnd2-grade-column:nth-child(2) li::before{
  color:
    #0ea7bc !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

  .hnd2 .hnd2-grade-column ul{
    grid-template-columns:
      1fr !important;
  }

}


@media(max-width:560px){

  .hnd2 .hnd2-grade-body{
    padding:
      14px !important;
  }

  .hnd2 .hnd2-grade-column h5{
    min-height:
      56px !important;

    padding:
      0 15px !important;

    font-size:
      13px !important;
  }

  .hnd2 .hnd2-grade-column ul{
    padding:
      12px !important;
  }

}


/* =========================================================
   HONDURAS — COC GRADE COLOR HIERARCHY
   Grade = Navy
   Sea Service = Blue
   Training = Teal
   ========================================================= */


/* =========================================================
   1. OPEN GRADE / RANK — DARK NAVY IDENTITY BAR
   ========================================================= */

.hnd2 .hnd2-grade[open] > summary{
  min-height:92px !important;

  border-bottom:
    1px solid rgba(101,219,243,.24) !important;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(64,200,232,.12),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #07344e 0%,
      #0a536f 100%
    ) !important;
}


/* grade number */

.hnd2 .hnd2-grade[open]
.hnd2-grade-number{
  color:
    #ffffff !important;

  border:
    1px solid rgba(112,224,246,.34) !important;

  background:
    rgba(45,183,218,.24) !important;
}


/* grade name */

.hnd2 .hnd2-grade[open]
.hnd2-grade-name b{
  color:
    #ffffff !important;

  font-size:
    14px !important;

  font-weight:
    850 !important;
}


/* level / STCW */

.hnd2 .hnd2-grade[open]
.hnd2-grade-name small{
  color:
    rgba(224,245,250,.78) !important;
}


/* months badge */

.hnd2 .hnd2-grade[open]
.hnd2-grade-service{
  color:
    #83e7f8 !important;

  border-color:
    rgba(111,224,246,.32) !important;

  background:
    rgba(255,255,255,.065) !important;
}


/* close button */

.hnd2 .hnd2-grade[open]
summary > i{
  color:
    #ffffff !important;

  border:
    1px solid rgba(108,225,246,.35) !important;

  background:
    #159dcc !important;
}


/* =========================================================
   2. SEA SERVICE — OCEAN BLUE
   ========================================================= */

.hnd2 .hnd2-grade-column:first-child{
  border:
    1px solid rgba(26,145,193,.34) !important;

  background:
    linear-gradient(
      145deg,
      #f8fcfe,
      #eaf6fb
    ) !important;
}


/* sea-service header */

.hnd2 .hnd2-grade-column:first-child h5{
  color:
    #083d5b !important;

  border-bottom:
    1px solid rgba(24,139,184,.24) !important;

  background:
    linear-gradient(
      90deg,
      #dceff7 0%,
      #eef8fc 100%
    ) !important;
}


/* SEA SERVICE badge */

.hnd2 .hnd2-grade-column:first-child h5::before{
  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #087fb1,
      #159fce
    ) !important;

  box-shadow:
    0 5px 12px rgba(7,116,160,.13) !important;
}


/* sea-service items */

.hnd2 .hnd2-grade-column:first-child li{
  border-color:
    rgba(44,147,187,.20) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f0f8fb
    ) !important;
}


/* sea-service checks */

.hnd2 .hnd2-grade-column:first-child li::before{
  color:
    #078fc2 !important;
}


/* sea-service hover */

.hnd2 .hnd2-grade-column:first-child li:hover{
  border-color:
    rgba(16,142,194,.46) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 8px 18px rgba(6,104,145,.08) !important;
}



/* =========================================================
   3. DGMM TRAINING — TEAL / CYAN
   ========================================================= */

.hnd2 .hnd2-grade-column:nth-child(2){
  border:
    1px solid rgba(28,170,176,.34) !important;

  background:
    linear-gradient(
      145deg,
      #f7fcfc,
      #e7f7f7
    ) !important;
}


/* training header */

.hnd2 .hnd2-grade-column:nth-child(2) h5{
  color:
    #07515a !important;

  border-bottom:
    1px solid rgba(28,159,168,.24) !important;

  background:
    linear-gradient(
      90deg,
      #d9f1f1 0%,
      #eef9f9 100%
    ) !important;
}


/* TRAINING badge */

.hnd2 .hnd2-grade-column:nth-child(2) h5::before{
  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #078b98,
      #18b4bc
    ) !important;

  box-shadow:
    0 5px 12px rgba(4,126,136,.13) !important;
}


/* training items */

.hnd2 .hnd2-grade-column:nth-child(2) li{
  border-color:
    rgba(41,163,170,.20) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #edf9f8
    ) !important;
}


/* training checks */

.hnd2 .hnd2-grade-column:nth-child(2) li::before{
  color:
    #079da6 !important;
}


/* training hover */

.hnd2 .hnd2-grade-column:nth-child(2) li:hover{
  border-color:
    rgba(18,157,166,.46) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 8px 18px rgba(4,113,119,.08) !important;
}



/* =========================================================
   CLOSED GRADES — KEEP LIGHT BUT DISTINCT
   ========================================================= */

.hnd2 .hnd2-grade:not([open]) > summary{
  background:
    linear-gradient(
      90deg,
      #f7fbfd,
      #eef7fa
    ) !important;
}


.hnd2 .hnd2-grade:not([open])
.hnd2-grade-name b{
  color:
    #12384b !important;
}


.hnd2 .hnd2-grade:not([open]) > summary:hover{
  background:
    linear-gradient(
      90deg,
      #ebf7fb,
      #e1f3f8
    ) !important;
}



/* =========================================================
   SUBTLE CATEGORY ACCENT BAR
   ========================================================= */

.hnd2 .hnd2-grade-column{
  position:
    relative !important;
}


.hnd2 .hnd2-grade-column:first-child::after{
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:4px;
  height:100%;

  background:
    linear-gradient(
      180deg,
      #078cc0,
      #49bfe4
    );
}


.hnd2 .hnd2-grade-column:nth-child(2)::after{
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:4px;
  height:100%;

  background:
    linear-gradient(
      180deg,
      #078e98,
      #42c9ce
    );
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

  .hnd2 .hnd2-grade[open] > summary{
    padding:
      17px !important;
  }

}


/* =========================================================
   HONDURAS — SEPARATE DEPARTMENT FROM SELECTED GRADE
   ========================================================= */

/* Department stays dark */
.hnd2 .hnd2-grade-group-head{
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(70,205,236,.14),
      transparent 29%
    ),
    linear-gradient(
      135deg,
      #07344e 0%,
      #075b7a 100%
    ) !important;
}


/* ---------------------------------------------------------
   OPEN / SELECTED GRADE — LIGHTER BAND
   --------------------------------------------------------- */

.hnd2 .hnd2-grade[open] > summary{
  min-height:94px !important;

  border-top:
    0 !important;

  border-bottom:
    1px solid rgba(74,160,191,.28) !important;

  background:
    linear-gradient(
      90deg,
      #dceef5 0%,
      #eaf6fa 55%,
      #d9edf5 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}


/* number */

.hnd2 .hnd2-grade[open]
.hnd2-grade-number{
  color:
    #087fae !important;

  border:
    1px solid rgba(30,151,195,.28) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 4px 10px rgba(5,77,105,.07) !important;
}


/* grade title */

.hnd2 .hnd2-grade[open]
.hnd2-grade-name b{
  color:
    #0a3348 !important;

  font-size:
    14.5px !important;

  font-weight:
    850 !important;
}


/* STCW / level */

.hnd2 .hnd2-grade[open]
.hnd2-grade-name small{
  color:
    #54717f !important;

  font-size:
    10px !important;
}


/* service months badge */

.hnd2 .hnd2-grade[open]
.hnd2-grade-service{
  color:
    #087ba5 !important;

  border:
    1px solid rgba(31,151,192,.28) !important;

  background:
    rgba(255,255,255,.72) !important;

  font-size:
    9px !important;

  box-shadow:
    0 4px 10px rgba(6,82,109,.05) !important;
}


/* close control */

.hnd2 .hnd2-grade[open]
summary > i{
  color:
    #ffffff !important;

  border:
    1px solid rgba(18,151,197,.30) !important;

  background:
    linear-gradient(
      135deg,
      #1597c6,
      #29b5d9
    ) !important;

  box-shadow:
    0 5px 12px rgba(7,103,141,.14) !important;
}


/* subtle selected accent */

.hnd2 .hnd2-grade[open] > summary{
  position:relative !important;
}

.hnd2 .hnd2-grade[open] > summary::before{
  content:"";

  position:absolute;

  left:0;
  top:0;
  bottom:0;

  width:4px;

  background:
    linear-gradient(
      180deg,
      #1598c8,
      #49c9e6
    );
}


/* closed grades remain very light */

.hnd2 .hnd2-grade:not([open]) > summary{
  background:
    #ffffff !important;

  border-bottom:
    1px solid #deebf0 !important;
}


/* hover closed rows */

.hnd2 .hnd2-grade:not([open]) > summary:hover{
  background:
    #eef8fb !important;
}


/* =========================================================
   HONDURAS — COMPACT SIDE-BY-SIDE SEA SERVICE / TRAINING
   ========================================================= */

.hnd2 .hnd2-compact-pair{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:22px !important;
  margin-top:18px !important;
  align-items:start !important;
}

.hnd2 .hnd2-compact-panel{
  margin:0 !important;
  border:1px solid #b8d8e5 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#f5fbfe 0%, #eaf5fa 100%) !important;
  box-shadow:0 10px 26px rgba(5,63,89,.08) !important;
}

.hnd2 .hnd2-compact-panel.hnd2-training-panel{
  background:linear-gradient(180deg,#edf9fc 0%, #e3f4f9 100%) !important;
  border-color:#a9d7e7 !important;
}

.hnd2 .hnd2-compact-panel > *{
  max-width:100% !important;
}

.hnd2 .hnd2-compact-panel > :first-child{
  padding:18px 22px 16px !important;
  border-bottom:1px solid rgba(93,160,186,.20) !important;
  background:rgba(255,255,255,.32) !important;
}

.hnd2 .hnd2-compact-panel > :first-child *{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

.hnd2 .hnd2-compact-panel > :first-child h2,
.hnd2 .hnd2-compact-panel > :first-child h3,
.hnd2 .hnd2-compact-panel > :first-child h4{
  color:#0b344a !important;
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.hnd2 .hnd2-compact-panel > :first-child .eyebrow,
.hnd2 .hnd2-compact-panel > :first-child small,
.hnd2 .hnd2-compact-panel > :first-child strong:first-child{
  color:#228fbc !important;
}

.hnd2 .hnd2-compact-body{
  padding:18px 18px 18px !important;
}

.hnd2 .hnd2-compact-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
}

.hnd2 .hnd2-compact-item{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  min-height:auto !important;
  padding:13px 14px !important;
  border:1px solid #cfe4ec !important;
  border-radius:12px !important;
  background:#ffffff !important;
  box-shadow:0 2px 8px rgba(8,72,101,.04) !important;
}

.hnd2 .hnd2-compact-item::before{
  content:"✓";
  flex:0 0 auto;
  margin-top:1px;
  color:#2d9dcb;
  font-weight:800;
  font-size:14px;
  line-height:1;
}

.hnd2 .hnd2-compact-item,
.hnd2 .hnd2-compact-item *{
  color:#24485a !important;
  font-size:14px !important;
  line-height:1.55 !important;
}

.hnd2 .hnd2-compact-item b,
.hnd2 .hnd2-compact-item strong{
  color:#0b344a !important;
}

@media (max-width: 1100px){
  .hnd2 .hnd2-compact-pair{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   HONDURAS — COC GRADE DROPDOWN
   ========================================================= */

.hnd2 .hnd2-grade-selector{
  padding:22px 24px;

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:45px;
  align-items:center;

  border-bottom:1px solid rgba(86,166,195,.22);

  background:
    linear-gradient(
      135deg,
      #eef8fb 0%,
      #f8fcfd 100%
    );
}


/* LEFT COPY */

.hnd2 .hnd2-grade-selector-label span{
  display:block;

  color:#159dcc;

  font-size:8px;
  font-weight:900;

  letter-spacing:.13em;
}


.hnd2 .hnd2-grade-selector-label strong{
  display:block;

  margin-top:6px;

  color:#0a3348;

  font-size:16px;
  line-height:1.2;

  font-weight:850;
}


.hnd2 .hnd2-grade-selector-label small{
  display:block;

  margin-top:5px;

  color:#657c87;

  font-size:9.5px;
  line-height:1.5;
}



/* =========================================================
   SELECT
   ========================================================= */

.hnd2 .hnd2-grade-select-wrap{
  position:relative;

  width:100%;
}


.hnd2 .hnd2-grade-select{
  width:100%;
  min-height:52px;

  padding:0 48px 0 17px;

  appearance:none;
  -webkit-appearance:none;

  border:1px solid rgba(57,161,199,.35);

  border-radius:7px;

  outline:none;

  color:#0a3449;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #edf8fb
    );

  font-family:inherit;

  font-size:11px;
  font-weight:800;

  cursor:pointer;

  box-shadow:
    0 7px 18px rgba(6,77,105,.06);

  transition:
    border-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}


.hnd2 .hnd2-grade-select:hover{
  border-color:
    rgba(25,157,205,.65);

  box-shadow:
    0 10px 22px rgba(6,87,119,.10);
}


.hnd2 .hnd2-grade-select:focus{
  border-color:
    #159dcc;

  box-shadow:
    0 0 0 3px rgba(21,157,204,.11);
}


/* custom arrow */

.hnd2 .hnd2-grade-select-arrow{
  position:absolute;

  right:17px;
  top:50%;

  transform:translateY(-52%);

  pointer-events:none;

  color:#159dcc;

  font-size:18px;
  font-weight:900;
}



/* =========================================================
   ONLY SELECTED GRADE APPEARS
   ========================================================= */

.hnd2 .hnd2-grade[hidden]{
  display:none !important;
}


.hnd2 .hnd2-grade-list{
  background:
    linear-gradient(
      145deg,
      #eef8fb,
      #f8fcfd
    );
}


/* selected grade animation */

@keyframes hnd2GradeEnter{

  from{
    opacity:0;
    transform:translateY(10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}


.hnd2 .hnd2-grade-enter{
  animation:
    hnd2GradeEnter .38s cubic-bezier(.22,1,.36,1);
}



/* =========================================================
   SELECTED GRADE HEADER — COMPACT
   ========================================================= */

.hnd2 .hnd2-grade[open] > summary{
  min-height:76px !important;

  padding:
    0 22px !important;
}


.hnd2 .hnd2-grade[open]
.hnd2-grade-name b{
  font-size:
    13.5px !important;
}


.hnd2 .hnd2-grade[open]
.hnd2-grade-name small{
  font-size:
    9.5px !important;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:850px){

  .hnd2 .hnd2-grade-selector{
    grid-template-columns:
      1fr !important;

    gap:
      15px !important;
  }

}


@media(max-width:600px){

  .hnd2 .hnd2-grade-selector{
    padding:
      18px !important;
  }

  .hnd2 .hnd2-grade-select{
    min-height:
      50px !important;

    font-size:
      10px !important;
  }

}


/* =========================================================
   HONDURAS — COMPACT + SYMMETRICAL REQUIREMENT PANELS
   ========================================================= */

.hnd2 .hnd2-grade-panels{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:22px;
  align-items:start !important;
  margin-top:18px;
}

.hnd2 .hnd2-grade-panel{
  border:1px solid rgba(88,171,201,.38);
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg,#eff8fb 0%, #f7fbfd 100%);
  box-shadow:0 10px 28px rgba(9,72,98,.06);
}

.hnd2 .hnd2-grade-panel-head{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:62px;
  padding:16px 20px;
  border-bottom:1px solid rgba(88,171,201,.24);
  background:linear-gradient(180deg,#eaf5f9 0%, #f3fafc 100%);
}

.hnd2 .hnd2-grade-panel-head .eyebrow,
.hnd2 .hnd2-grade-panel-head .tag,
.hnd2 .hnd2-grade-panel-head .label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:8px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#ffffff;
  background:linear-gradient(135deg,#2d93c9 0%, #58b4d8 100%);
  box-shadow:0 6px 14px rgba(39,145,196,.20);
}

.hnd2 .hnd2-grade-panel:nth-child(2) .hnd2-grade-panel-head .eyebrow,
.hnd2 .hnd2-grade-panel:nth-child(2) .hnd2-grade-panel-head .tag,
.hnd2 .hnd2-grade-panel:nth-child(2) .hnd2-grade-panel-head .label{
  background:linear-gradient(135deg,#3aa0ad 0%, #64c1c8 100%);
  box-shadow:0 6px 14px rgba(54,163,171,.20);
}

.hnd2 .hnd2-grade-panel-head h5,
.hnd2 .hnd2-grade-panel-head h4,
.hnd2 .hnd2-grade-panel-head b{
  margin:0;
  color:#0c3046;
  font-size:14px;
  line-height:1.25;
  font-weight:900;
}

.hnd2 .hnd2-grade-panel-body{
  padding:18px;
  background:transparent;
}

/* kill any random stray marker/check rendering */
.hnd2 .hnd2-grade-panel-body::before,
.hnd2 .hnd2-grade-panel-body::after,
.hnd2 .hnd2-grade-points::before,
.hnd2 .hnd2-grade-points::after{
  content:none !important;
  display:none !important;
}

.hnd2 .hnd2-grade-points,
.hnd2 .hnd2-grade-list-grid,
.hnd2 .hnd2-grade-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none !important;
}

.hnd2 .hnd2-grade-points > li,
.hnd2 .hnd2-grade-list-grid > li,
.hnd2 .hnd2-grade-list > li,
.hnd2 .hnd2-grade-point,
.hnd2 .hnd2-grade-card{
  position:relative;
  min-height:56px;
  margin:0;
  padding:14px 16px 14px 42px;
  list-style:none !important;
  border:1px solid rgba(95,177,206,.24);
  border-radius:10px;
  background:#fdfefe;
  color:#27495c;
  font-size:10.8px;
  line-height:1.45;
  box-shadow:none;
}

.hnd2 .hnd2-grade-points > li:empty,
.hnd2 .hnd2-grade-list-grid > li:empty,
.hnd2 .hnd2-grade-list > li:empty,
.hnd2 .hnd2-grade-point:empty,
.hnd2 .hnd2-grade-card:empty{
  display:none !important;
}

.hnd2 .hnd2-grade-points > li::before,
.hnd2 .hnd2-grade-list-grid > li::before,
.hnd2 .hnd2-grade-list > li::before,
.hnd2 .hnd2-grade-point::before,
.hnd2 .hnd2-grade-card::before{
  content:"✓";
  position:absolute;
  left:14px;
  top:15px;
  color:#49a5d6;
  font-size:13px;
  font-weight:900;
  line-height:1;
}

.hnd2 .hnd2-grade-points > li strong,
.hnd2 .hnd2-grade-list-grid > li strong,
.hnd2 .hnd2-grade-list > li strong,
.hnd2 .hnd2-grade-point strong,
.hnd2 .hnd2-grade-card strong{
  color:#14384d;
  font-weight:800;
}

/* make the whole section tighter */
.hnd2 .hnd2-grade-section{
  margin-top:22px;
}

.hnd2 .hnd2-grade-section .hnd2-grade-panels + *{
  margin-top:18px;
}

/* responsive */
@media (max-width: 980px){
  .hnd2 .hnd2-grade-panels{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .hnd2 .hnd2-grade-panel-head{
    padding:14px 16px;
    min-height:auto;
  }

  .hnd2 .hnd2-grade-panel-body{
    padding:14px;
  }

  .hnd2 .hnd2-grade-points,
  .hnd2 .hnd2-grade-list-grid,
  .hnd2 .hnd2-grade-list{
    grid-template-columns:1fr;
    gap:10px;
  }

  .hnd2 .hnd2-grade-points > li,
  .hnd2 .hnd2-grade-list-grid > li,
  .hnd2 .hnd2-grade-list > li,
  .hnd2 .hnd2-grade-point,
  .hnd2 .hnd2-grade-card{
    min-height:auto;
    padding:13px 14px 13px 38px;
  }
}


/* =========================================================
   HONDURAS — FINAL CLEAN GRADE REQUIREMENT LAYOUT
   Overrides previous experimental compact styles.
   ========================================================= */


/* ---------------------------------------------------------
   TWO PROPER EQUAL-WIDTH PANELS
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-body{
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:16px !important;

  align-items:start !important;

  padding:18px !important;

  box-sizing:border-box !important;

  background:
    linear-gradient(
      145deg,
      #edf7fa,
      #f8fcfd
    ) !important;
}


/* kill anything left by experimental wrappers */

.hnd2 .hnd2-grade-body > .hnd2-compact-pair{
  display:contents !important;
}


.hnd2 .hnd2-grade-column{
  width:100% !important;
  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  box-sizing:border-box !important;

  border-radius:10px !important;

  overflow:hidden !important;

  box-shadow:
    0 8px 22px rgba(7,65,88,.055) !important;
}



/* =========================================================
   SEA SERVICE — LEFT
   ========================================================= */

.hnd2 .hnd2-grade-column:first-child{
  border:
    1px solid rgba(34,146,192,.32) !important;

  background:
    linear-gradient(
      145deg,
      #f8fcfe,
      #eaf6fb
    ) !important;
}


.hnd2 .hnd2-grade-column:first-child h5{
  min-height:58px !important;

  margin:0 !important;

  padding:0 18px !important;

  display:flex !important;

  align-items:center !important;

  gap:11px !important;

  border:0 !important;
  border-bottom:
    1px solid rgba(36,145,185,.22) !important;

  color:
    #0b3951 !important;

  background:
    linear-gradient(
      90deg,
      #dceff7,
      #eff8fc
    ) !important;

  font-size:
    14px !important;

  font-weight:
    850 !important;
}


.hnd2 .hnd2-grade-column:first-child h5::before{
  content:"SEA SERVICE" !important;

  margin:0 !important;

  padding:6px 9px !important;

  border-radius:5px !important;

  color:#ffffff !important;

  background:
    linear-gradient(
      135deg,
      #087faf,
      #189fce
    ) !important;

  font-size:7px !important;

  font-weight:900 !important;

  letter-spacing:.1em !important;
}



/* =========================================================
   TRAINING — RIGHT
   ========================================================= */

.hnd2 .hnd2-grade-column:nth-child(2){
  border:
    1px solid rgba(31,161,170,.32) !important;

  background:
    linear-gradient(
      145deg,
      #f7fcfc,
      #e7f7f7
    ) !important;
}


.hnd2 .hnd2-grade-column:nth-child(2) h5{
  min-height:58px !important;

  margin:0 !important;

  padding:0 18px !important;

  display:flex !important;

  align-items:center !important;

  gap:11px !important;

  border:0 !important;
  border-bottom:
    1px solid rgba(30,158,166,.22) !important;

  color:
    #07505a !important;

  background:
    linear-gradient(
      90deg,
      #d9f1f1,
      #eef9f9
    ) !important;

  font-size:
    14px !important;

  font-weight:
    850 !important;
}


.hnd2 .hnd2-grade-column:nth-child(2) h5::before{
  content:"TRAINING" !important;

  margin:0 !important;

  padding:6px 9px !important;

  border-radius:5px !important;

  color:#ffffff !important;

  background:
    linear-gradient(
      135deg,
      #078b98,
      #18b3bc
    ) !important;

  font-size:7px !important;

  font-weight:900 !important;

  letter-spacing:.1em !important;
}



/* =========================================================
   LISTS
   Key symmetry:
   Sea Service = 1 column
   Training = 2 columns
   ========================================================= */

.hnd2 .hnd2-grade-column ul{
  margin:0 !important;

  padding:14px !important;

  list-style:none !important;
}


/* Sea Service usually has ~7 requirements.
   One column gives approximately 7 rows. */

.hnd2 .hnd2-grade-column:first-child ul{
  display:grid !important;

  grid-template-columns:
    1fr !important;

  gap:8px !important;
}


/* Training usually has ~13 requirements.
   Two columns also gives approximately 7 rows. */

.hnd2 .hnd2-grade-column:nth-child(2) ul{
  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:8px !important;
}



/* =========================================================
   REQUIREMENT ROWS
   ========================================================= */

.hnd2 .hnd2-grade-column li{
  position:relative !important;

  width:100% !important;
  min-width:0 !important;

  min-height:48px !important;

  margin:0 !important;

  padding:
    10px 12px 10px 32px !important;

  display:flex !important;

  align-items:center !important;

  box-sizing:border-box !important;

  border:
    1px solid rgba(92,173,202,.20) !important;

  border-radius:
    6px !important;

  color:
    #4b6775 !important;

  background:
    rgba(255,255,255,.78) !important;

  font-size:
    10.5px !important;

  line-height:
    1.42 !important;

  word-break:
    normal !important;

  overflow-wrap:
    break-word !important;

  transition:
    transform .24s ease,
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease !important;
}


/* clean check */

.hnd2 .hnd2-grade-column li::before{
  content:"✓" !important;

  position:absolute !important;

  left:12px !important;

  top:50% !important;

  transform:
    translateY(-50%) !important;

  color:
    #169dcc !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;
}


/* training check gets teal */

.hnd2 .hnd2-grade-column:nth-child(2) li::before{
  color:
    #079da6 !important;
}


/* remove accidental extra generated checks */

.hnd2 .hnd2-grade-column li > *::before{
  content:none !important;
}


/* hover */

.hnd2 .hnd2-grade-column li:hover{
  transform:
    translateY(-2px) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 7px 16px rgba(6,77,103,.06) !important;
}


.hnd2 .hnd2-grade-column:first-child li:hover{
  border-color:
    rgba(23,147,196,.40) !important;
}


.hnd2 .hnd2-grade-column:nth-child(2) li:hover{
  border-color:
    rgba(20,157,166,.40) !important;
}



/* =========================================================
   REMOVE EXPERIMENTAL COMPACT CLASSES IF STILL PRESENT
   ========================================================= */

.hnd2 .hnd2-compact-panel{
  width:auto !important;
  max-width:none !important;

  margin:0 !important;

  border-radius:inherit !important;
}


.hnd2 .hnd2-compact-body{
  padding:0 !important;
}


.hnd2 .hnd2-compact-list{
  display:contents !important;
}


.hnd2 .hnd2-compact-item{
  width:auto !important;
  max-width:none !important;
}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

  .hnd2 .hnd2-grade-body{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 .hnd2-grade-column:first-child ul,
  .hnd2 .hnd2-grade-column:nth-child(2) ul{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  .hnd2 .hnd2-grade-body{
    padding:
      12px !important;
  }

  .hnd2 .hnd2-grade-column:first-child ul,
  .hnd2 .hnd2-grade-column:nth-child(2) ul{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 .hnd2-grade-column li{
    min-height:
      44px !important;

    font-size:
      10.5px !important;
  }

}


/* =========================================================
   HONDURAS — AUTHORITATIVE GRADE LAYOUT FIX
   Fixes grade being squeezed into half page.
   ========================================================= */


/* =========================================================
   GRADE LIST MUST NEVER BE A TWO-COLUMN GRID
   ========================================================= */

.hnd2 .hnd2-grade-list{
  display:block !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  grid-template-columns:none !important;
}


/* each selected grade occupies the full available width */

.hnd2 .hnd2-grade-list > .hnd2-grade{
  display:block;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;

  box-sizing:border-box !important;
}


.hnd2 .hnd2-grade-list > .hnd2-grade[hidden]{
  display:none !important;
}



/* =========================================================
   SELECTED GRADE HEADER FULL WIDTH
   ========================================================= */

.hnd2 .hnd2-grade[open] > summary{
  width:100% !important;

  box-sizing:border-box !important;

  min-height:78px !important;

  padding:
    0 22px !important;
}



/* =========================================================
   REQUIREMENTS — FULL WIDTH THEN 50 / 50 INSIDE
   ========================================================= */

.hnd2 .hnd2-grade-body{
  width:100% !important;
  max-width:none !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:18px !important;

  align-items:start !important;

  padding:
    18px !important;

  box-sizing:border-box !important;

  background:
    linear-gradient(
      145deg,
      #eef8fb,
      #f8fcfd
    ) !important;
}



/* =========================================================
   BOTH PANELS SAME STRUCTURE
   ========================================================= */

.hnd2 .hnd2-grade-body > .hnd2-grade-column{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;

  box-sizing:border-box !important;

  border-radius:
    10px !important;

  overflow:
    hidden !important;
}



/* =========================================================
   SEA SERVICE — LEFT
   ========================================================= */

.hnd2 .hnd2-grade-body
> .hnd2-grade-column:first-child{
  border:
    1px solid rgba(29,145,190,.32) !important;

  background:
    #f5fbfd !important;
}


.hnd2 .hnd2-grade-body
> .hnd2-grade-column:first-child h5{
  min-height:
    58px !important;

  margin:
    0 !important;

  padding:
    0 18px !important;

  display:flex !important;

  align-items:center !important;

  gap:
    11px !important;

  color:
    #0b3951 !important;

  background:
    linear-gradient(
      90deg,
      #dceff7,
      #eff8fc
    ) !important;

  border-bottom:
    1px solid rgba(31,143,184,.22) !important;

  font-size:
    14px !important;

  font-weight:
    850 !important;
}



/* =========================================================
   TRAINING — RIGHT
   ========================================================= */

.hnd2 .hnd2-grade-body
> .hnd2-grade-column:nth-child(2){
  border:
    1px solid rgba(29,160,169,.32) !important;

  background:
    #f3fbfb !important;
}


.hnd2 .hnd2-grade-body
> .hnd2-grade-column:nth-child(2) h5{
  min-height:
    58px !important;

  margin:
    0 !important;

  padding:
    0 18px !important;

  display:flex !important;

  align-items:center !important;

  gap:
    11px !important;

  color:
    #07515a !important;

  background:
    linear-gradient(
      90deg,
      #d8f1f1,
      #eefafa
    ) !important;

  border-bottom:
    1px solid rgba(29,157,166,.22) !important;

  font-size:
    14px !important;

  font-weight:
    850 !important;
}



/* =========================================================
   SEA SERVICE LIST
   1 column because descriptions are longer.
   ========================================================= */

.hnd2 .hnd2-grade-body
> .hnd2-grade-column:first-child ul{
  margin:0 !important;

  padding:
    13px !important;

  display:grid !important;

  grid-template-columns:
    1fr !important;

  gap:
    7px !important;
}



/* =========================================================
   TRAINING LIST
   2 columns because items are shorter.
   ========================================================= */

.hnd2 .hnd2-grade-body
> .hnd2-grade-column:nth-child(2) ul{
  margin:0 !important;

  padding:
    13px !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:
    7px !important;
}



/* =========================================================
   COMPACT READABLE ROWS
   ========================================================= */

.hnd2 .hnd2-grade-body
.hnd2-grade-column li{
  width:100% !important;

  min-width:0 !important;
  min-height:46px !important;

  margin:0 !important;

  padding:
    9px 11px 9px 31px !important;

  display:flex !important;

  align-items:center !important;

  position:relative !important;

  box-sizing:border-box !important;

  border:
    1px solid rgba(91,172,201,.20) !important;

  border-radius:
    6px !important;

  color:
    #496675 !important;

  background:
    rgba(255,255,255,.82) !important;

  font-size:
    10.5px !important;

  line-height:
    1.42 !important;

  white-space:
    normal !important;

  word-break:
    normal !important;

  overflow-wrap:
    break-word !important;
}


.hnd2 .hnd2-grade-body
.hnd2-grade-column li::before{
  content:"✓" !important;

  position:absolute !important;

  left:
    11px !important;

  top:
    50% !important;

  transform:
    translateY(-50%) !important;

  color:
    #159dcc !important;

  font-size:
    11px !important;

  font-weight:
    900 !important;
}


.hnd2 .hnd2-grade-body
> .hnd2-grade-column:nth-child(2)
li::before{
  color:
    #079da6 !important;
}



/* =========================================================
   DESTROY OLD EXPERIMENTAL WIDTH RULES
   ========================================================= */

.hnd2 .hnd2-compact-pair,
.hnd2 .hnd2-compact-list{
  width:100% !important;
  max-width:none !important;
}


.hnd2 .hnd2-compact-pair{
  display:contents !important;
}


.hnd2 .hnd2-compact-list{
  display:contents !important;
}


.hnd2 .hnd2-compact-panel{
  width:100% !important;
  max-width:none !important;
}


.hnd2 .hnd2-compact-body{
  width:100% !important;
  max-width:none !important;

  padding:0 !important;
}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:950px){

  .hnd2 .hnd2-grade-body{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 .hnd2-grade-body
  > .hnd2-grade-column:first-child ul,
  .hnd2 .hnd2-grade-body
  > .hnd2-grade-column:nth-child(2) ul{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  .hnd2 .hnd2-grade-body{
    padding:
      12px !important;
  }

  .hnd2 .hnd2-grade-body
  > .hnd2-grade-column:first-child ul,
  .hnd2 .hnd2-grade-body
  > .hnd2-grade-column:nth-child(2) ul{
    grid-template-columns:
      1fr !important;
  }

}


/* =========================================================
   HONDURAS — DEPARTMENT / SELECTOR / SELECTED GRADE HIERARCHY
   ========================================================= */


/* ---------------------------------------------------------
   1. SELECTOR = COMPACT CONTROL BAR
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-selector{
  min-height:82px !important;

  padding:
    15px 22px !important;

  grid-template-columns:
    minmax(0,.75fr)
    minmax(420px,1.25fr) !important;

  gap:
    45px !important;

  align-items:
    center !important;

  border-bottom:
    1px solid rgba(75,158,190,.22) !important;

  background:
    linear-gradient(
      90deg,
      #f6fbfd 0%,
      #edf7fa 100%
    ) !important;
}


/* label becomes secondary, not another heading */

.hnd2 .hnd2-grade-selector-label span{
  display:block !important;

  color:
    #159aca !important;

  font-size:
    8.5px !important;

  line-height:
    1.2 !important;

  font-weight:
    900 !important;

  letter-spacing:
    .14em !important;

  text-transform:
    uppercase !important;
}


.hnd2 .hnd2-grade-selector-label strong{
  display:none !important;
}


.hnd2 .hnd2-grade-selector-label small{
  display:block !important;

  max-width:
    440px !important;

  margin-top:
    7px !important;

  color:
    #647b87 !important;

  font-size:
    9.5px !important;

  line-height:
    1.5 !important;
}


/* selector itself */

.hnd2 .hnd2-grade-select{
  min-height:
    48px !important;

  border:
    1px solid rgba(48,157,198,.34) !important;

  border-radius:
    7px !important;

  color:
    #0c3549 !important;

  background:
    #ffffff !important;

  font-size:
    10.5px !important;

  font-weight:
    800 !important;

  box-shadow:
    0 5px 14px rgba(6,79,108,.055) !important;
}



/* ---------------------------------------------------------
   2. SELECTED GRADE = DISTINCT WHITE RESULT CARD
   --------------------------------------------------------- */

.hnd2 .hnd2-grade[open] > summary{
  position:
    relative !important;

  min-height:
    92px !important;

  padding:
    0 24px !important;

  border-top:
    0 !important;

  border-bottom:
    1px solid rgba(49,151,190,.24) !important;

  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #f8fcfd 70%,
      #eef8fb 100%
    ) !important;

  box-shadow:
    inset 4px 0 0 #159dcc,
    0 7px 18px rgba(5,70,97,.035) !important;
}


/* remove old broad selected-grade background accent */

.hnd2 .hnd2-grade[open] > summary::before{
  display:
    none !important;
}


/* number */

.hnd2 .hnd2-grade[open]
.hnd2-grade-number{
  width:
    38px !important;

  height:
    38px !important;

  color:
    #0d91bf !important;

  border:
    1px solid rgba(36,157,201,.25) !important;

  background:
    #e9f7fb !important;

  box-shadow:
    none !important;
}


/* ---------------------------------------------------------
   SELECTED GRADE LABEL
   --------------------------------------------------------- */

.hnd2 .hnd2-grade[open]
.hnd2-grade-name{
  position:
    relative !important;

  padding-top:
    17px !important;
}


.hnd2 .hnd2-grade[open]
.hnd2-grade-name::before{
  content:
    "SELECTED GRADE";

  position:absolute;

  top:
    0;

  left:
    0;

  color:
    #149bc9;

  font-size:
    7px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


/* grade title */

.hnd2 .hnd2-grade[open]
.hnd2-grade-name b{
  color:
    #092f44 !important;

  font-size:
    15px !important;

  line-height:
    1.2 !important;

  font-weight:
    850 !important;
}


/* STCW level */

.hnd2 .hnd2-grade[open]
.hnd2-grade-name small{
  margin-top:
    5px !important;

  color:
    #607985 !important;

  font-size:
    9.5px !important;
}


/* service months */

.hnd2 .hnd2-grade[open]
.hnd2-grade-service{
  padding:
    7px 12px !important;

  color:
    #087da8 !important;

  border:
    1px solid rgba(34,151,193,.24) !important;

  background:
    #eef9fc !important;

  box-shadow:
    none !important;
}


/* close control */

.hnd2 .hnd2-grade[open]
summary > i{
  width:
    32px !important;

  height:
    32px !important;

  border:
    0 !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #1498c8,
      #35b9db
    ) !important;

  box-shadow:
    0 6px 13px rgba(9,112,152,.16) !important;
}



/* ---------------------------------------------------------
   3. REQUIREMENTS BEGIN WITH SEPARATE BACKGROUND
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-body{
  border-top:
    8px solid #edf7fa !important;
}



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

@media(max-width:900px){

  .hnd2 .hnd2-grade-selector{
    grid-template-columns:
      1fr !important;

    gap:
      12px !important;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:600px){

  .hnd2 .hnd2-grade-selector{
    padding:
      16px !important;
  }

  .hnd2 .hnd2-grade[open] > summary{
    padding:
      14px !important;
  }

}


/* =========================================================
   HONDURAS — FINAL GRADE SELECTOR HIERARCHY
   Dropdown contains selected grade.
   Separate selected-grade summary row is hidden.
   ========================================================= */


/* ---------------------------------------------------------
   SELECTOR — DEPARTMENT TITLE RESTORED
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-selector{
  min-height:96px !important;

  padding:
    17px 24px !important;

  grid-template-columns:
    minmax(0,.82fr)
    minmax(430px,1.18fr) !important;

  gap:
    55px !important;

  align-items:
    center !important;

  background:
    linear-gradient(
      90deg,
      #f5fbfd 0%,
      #edf7fa 100%
    ) !important;

  border-bottom:
    1px solid rgba(66,156,190,.22) !important;
}


.hnd2 .hnd2-grade-selector-label span{
  display:block !important;

  color:
    #159bc9 !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .14em !important;

  text-transform:
    uppercase !important;
}


/* Deck Department / Engine Department */

.hnd2 .hnd2-grade-selector-label strong{
  display:block !important;

  margin-top:
    6px !important;

  color:
    #0a3348 !important;

  font-size:
    16px !important;

  line-height:
    1.2 !important;

  font-weight:
    850 !important;
}


.hnd2 .hnd2-grade-selector-label small{
  display:block !important;

  margin-top:
    6px !important;

  max-width:
    480px !important;

  color:
    #647b87 !important;

  font-size:
    9.5px !important;

  line-height:
    1.5 !important;
}



/* ---------------------------------------------------------
   DROPDOWN
   --------------------------------------------------------- */

.hnd2 .hnd2-grade-select{
  min-height:
    52px !important;

  padding:
    0 48px 0 18px !important;

  border:
    1px solid rgba(42,155,197,.36) !important;

  border-radius:
    7px !important;

  color:
    #0b3449 !important;

  background:
    #ffffff !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;

  box-shadow:
    0 7px 18px rgba(6,78,107,.055) !important;
}



/* =========================================================
   HIDE REDUNDANT SELECTED-GRADE SUMMARY ROW
   Master / Capitán etc is already visible in dropdown.
   ========================================================= */

.hnd2 .hnd2-grade[open] > summary{
  display:
    none !important;
}


/* also ensure no space remains */

.hnd2 .hnd2-grade{
  margin:
    0 !important;

  padding:
    0 !important;
}


.hnd2 .hnd2-grade-list{
  margin:
    0 !important;

  padding:
    0 !important;
}



/* =========================================================
   REQUIREMENTS START DIRECTLY BELOW SELECTOR
   ========================================================= */

.hnd2 .hnd2-grade[open] > .hnd2-grade-body{
  margin:
    0 !important;

  border-top:
    0 !important;

  padding:
    18px !important;

  background:
    linear-gradient(
      145deg,
      #edf7fa,
      #f8fcfd
    ) !important;
}


/* subtle separation from dropdown */

.hnd2 .hnd2-grade-list{
  border-top:
    1px solid rgba(73,160,191,.16) !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px){

  .hnd2 .hnd2-grade-selector{
    grid-template-columns:
      1fr !important;

    gap:
      14px !important;
  }

}


@media(max-width:600px){

  .hnd2 .hnd2-grade-selector{
    padding:
      16px !important;
  }

  .hnd2 .hnd2-grade-select{
    min-height:
      50px !important;

    font-size:
      10px !important;
  }

}


/* =========================================================
   SEA LICENSING — HONDURAS PAGE GLOBAL TEXTURE SYSTEM
   ========================================================= */

/*
   Design principle:
   - Light sections = technical drafting texture
   - Dark sections = subtle maritime diagonal geometry
   - Cards remain readable
   - Texture never competes with content
*/


/* =========================================================
   GLOBAL PAGE
   ========================================================= */

.hnd2{
  position:relative;
  background:#f4fafc;
}



/* =========================================================
   DARK COC SECTION
   ========================================================= */

.hnd2 .hnd2-coc{
  background:
    radial-gradient(
      circle at 86% 15%,
      rgba(66,199,230,.15),
      transparent 29%
    ),
    radial-gradient(
      circle at 10% 78%,
      rgba(18,104,143,.13),
      transparent 33%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(112,225,247,.035) 0,
      rgba(112,225,247,.035) 1px,
      transparent 1px,
      transparent 72px
    ),
    linear-gradient(
      135deg,
      #052f47 0%,
      #075d7b 100%
    ) !important;
}



/* =========================================================
   LIGHT GENERAL SERVICE SECTIONS
   ========================================================= */

.hnd2 .hnd2-service{
  position:relative;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(60,182,219,.075),
      transparent 28%
    ),
    radial-gradient(
      circle at 8% 88%,
      rgba(18,111,151,.045),
      transparent 32%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(13,119,162,.022) 0,
      rgba(13,119,162,.022) 1px,
      transparent 1px,
      transparent 62px
    ),
    #fbfdfe !important;
}


/* alternate service sections */

.hnd2 .hnd2-service.alt{
  background:
    radial-gradient(
      circle at 86% 15%,
      rgba(45,174,213,.09),
      transparent 28%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(20,127,167,.027) 0,
      rgba(20,127,167,.027) 1px,
      transparent 1px,
      transparent 60px
    ),
    linear-gradient(
      145deg,
      #edf8fb,
      #e5f4f8
    ) !important;
}



/* =========================================================
   FORMS / RESOURCES AREA
   ========================================================= */

.hnd2 .hnd2-resources{
  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(33,176,217,.12),
      transparent 29%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(18,111,151,.055),
      transparent 30%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(12,121,164,.026) 0,
      rgba(12,121,164,.026) 1px,
      transparent 1px,
      transparent 65px
    ),
    #f5fbfd !important;
}



/* =========================================================
   DGMM GRADE DESK
   ========================================================= */

.hnd2 .hnd2-grade-desk{
  position:relative;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(54,182,219,.095),
      transparent 30%
    ),
    radial-gradient(
      circle at 6% 90%,
      rgba(12,95,137,.05),
      transparent 28%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(21,126,166,.025) 0,
      rgba(21,126,166,.025) 1px,
      transparent 1px,
      transparent 58px
    ),
    linear-gradient(
      145deg,
      #f8fcfe,
      #edf7fa
    ) !important;
}



/* =========================================================
   DECK / ENGINE GROUP CONTAINER
   ========================================================= */

.hnd2 .hnd2-grade-group{
  position:relative;

  background:
    rgba(249,253,254,.92) !important;

  box-shadow:
    0 18px 40px rgba(5,66,91,.055) !important;
}



/* =========================================================
   DEPARTMENT DARK HEADERS
   ========================================================= */

.hnd2 .hnd2-grade-group-head{
  background:
    radial-gradient(
      circle at 87% 15%,
      rgba(77,211,240,.15),
      transparent 28%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(112,225,247,.045) 0,
      rgba(112,225,247,.045) 1px,
      transparent 1px,
      transparent 58px
    ),
    linear-gradient(
      135deg,
      #07344e 0%,
      #075b79 100%
    ) !important;
}



/* =========================================================
   COC GRADE SELECTOR
   ========================================================= */

.hnd2 .hnd2-grade-selector{
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(50,179,216,.07),
      transparent 28%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(20,126,166,.020) 0,
      rgba(20,126,166,.020) 1px,
      transparent 1px,
      transparent 52px
    ),
    linear-gradient(
      90deg,
      #f6fbfd 0%,
      #edf7fa 100%
    ) !important;
}



/* =========================================================
   REQUIREMENT WORKSPACE
   ========================================================= */

.hnd2 .hnd2-grade-body{
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(56,179,214,.07),
      transparent 28%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(15,119,159,.018) 0,
      rgba(15,119,159,.018) 1px,
      transparent 1px,
      transparent 52px
    ),
    linear-gradient(
      145deg,
      #edf7fa,
      #f8fcfd
    ) !important;
}



/* =========================================================
   SEA SERVICE PANEL
   ========================================================= */

.hnd2 .hnd2-grade-body
> .hnd2-grade-column:first-child{
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(46,167,209,.08),
      transparent 26%
    ),
    linear-gradient(
      145deg,
      #f9fcfe,
      #eaf6fb
    ) !important;
}



/* =========================================================
   TRAINING PANEL
   ========================================================= */

.hnd2 .hnd2-grade-body
> .hnd2-grade-column:nth-child(2){
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(45,178,183,.09),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #f8fdfd,
      #e7f7f7
    ) !important;
}



/* =========================================================
   APPLICATION FORMS AREA
   ========================================================= */

.hnd2 .hnd2-forms{
  background:
    radial-gradient(
      circle at 91% 8%,
      rgba(51,180,218,.10),
      transparent 28%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(18,123,164,.020) 0,
      rgba(18,123,164,.020) 1px,
      transparent 1px,
      transparent 58px
    ),
    linear-gradient(
      145deg,
      rgba(247,252,254,.98),
      rgba(232,246,251,.96)
    ) !important;
}



/* =========================================================
   REQUIRED DOCUMENT / PROCEDURE PANELS
   ========================================================= */

.hnd2 .hnd2-coc-grid > .hnd2-panel{
  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(56,181,219,.07),
      transparent 27%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(12,121,162,.018) 0,
      rgba(12,121,162,.018) 1px,
      transparent 1px,
      transparent 54px
    ),
    linear-gradient(
      145deg,
      rgba(248,252,254,.98),
      rgba(232,246,251,.96)
    ) !important;
}



/* =========================================================
   MEDICAL CALLOUT
   ========================================================= */

.hnd2 .hnd2-medical{
  background:
    radial-gradient(
      circle at 86% 50%,
      rgba(91,220,244,.11),
      transparent 25%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(112,225,247,.035) 0,
      rgba(112,225,247,.035) 1px,
      transparent 1px,
      transparent 56px
    ),
    linear-gradient(
      110deg,
      #07374f,
      #087493
    ) !important;
}



/* =========================================================
   GENERAL WHITE / LIGHT CARDS
   Add very subtle surface variation
   ========================================================= */

.hnd2 .hnd2-docitem,
.hnd2 .hnd2-step,
.hnd2 .hnd2-form,
.hnd2 .hnd2-box,
.hnd2 .hnd2-resource,
.hnd2 .hnd2-grade-column li{
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(58,180,216,.035),
      transparent 35%
    ),
    rgba(255,255,255,.90) !important;
}



/* =========================================================
   CTA
   ========================================================= */

.hnd2 .hnd2-cta{
  background:
    radial-gradient(
      circle at 82% 50%,
      rgba(78,211,240,.20),
      transparent 27%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(112,225,247,.032) 0,
      rgba(112,225,247,.032) 1px,
      transparent 1px,
      transparent 64px
    ),
    linear-gradient(
      110deg,
      #052e45,
      #077194
    ) !important;
}



/* =========================================================
   KEEP TEXT / COMPONENTS ABOVE VISUAL TEXTURE
   ========================================================= */

.hnd2 section,
.hnd2 .hnd2-grade-desk,
.hnd2 .hnd2-grade-group,
.hnd2 .hnd2-grade-selector,
.hnd2 .hnd2-grade-body,
.hnd2 .hnd2-forms{
  isolation:isolate;
}



/* =========================================================
   MOBILE — REDUCE TEXTURE INTENSITY
   ========================================================= */

@media(max-width:700px){

  .hnd2 .hnd2-service,
  .hnd2 .hnd2-resources,
  .hnd2 .hnd2-grade-desk,
  .hnd2 .hnd2-grade-selector,
  .hnd2 .hnd2-grade-body,
  .hnd2 .hnd2-forms{
    background-size:
      auto !important;
  }

}


/* =========================================================
   HONDURAS — CREW ENDORSEMENT / COE FINAL POLISH
   ========================================================= */


/* ---------------------------------------------------------
   SECTION INTRO — BALANCED
   --------------------------------------------------------- */

.hnd2 #crew-endorsement .hnd2-head{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:
    90px !important;

  align-items:
    center !important;
}


.hnd2 #crew-endorsement .hnd2-head > div:first-child{
  max-width:
    610px !important;
}


.hnd2 #crew-endorsement .hnd2-head-copy{
  position:
    relative !important;

  max-width:
    590px !important;

  margin:
    0 !important;

  padding:
    5px 0 5px 24px !important;

  align-self:
    center !important;

  color:
    #58717e !important;

  font-size:
    11.5px !important;

  line-height:
    1.7 !important;
}


.hnd2 #crew-endorsement .hnd2-head-copy::before{
  content:"";

  position:absolute;

  left:0;
  top:4px;
  bottom:4px;

  width:2px;

  background:
    linear-gradient(
      180deg,
      #27acd6,
      rgba(39,172,214,.15)
    );
}


/* ---------------------------------------------------------
   MAIN TWO-PANEL LAYOUT
   --------------------------------------------------------- */

.hnd2 #crew-endorsement .hnd2-service-grid{
  margin-top:
    36px !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:
    18px !important;

  align-items:
    stretch !important;
}


.hnd2 #crew-endorsement .hnd2-box{
  min-height:
    390px !important;

  padding:
    24px !important;

  display:flex !important;

  flex-direction:
    column !important;

  border:
    1px solid rgba(93,175,204,.28) !important;

  border-radius:
    10px !important;

  box-shadow:
    0 12px 30px rgba(5,72,99,.055) !important;
}



/* =========================================================
   LEFT — CORE DOCUMENTS
   ========================================================= */

.hnd2 #crew-endorsement .hnd2-box:first-child{
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(52,174,214,.08),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #f8fcfe,
      #edf7fb
    ) !important;
}


.hnd2 #crew-endorsement .hnd2-box:first-child h3{
  margin:
    0 0 20px !important;

  padding-bottom:
    15px !important;

  border-bottom:
    1px solid rgba(69,155,188,.20) !important;

  color:
    #0a354b !important;

  font-size:
    20px !important;

  line-height:
    1.2 !important;
}


/* turn six documents into proper cards */

.hnd2 #crew-endorsement .hnd2-checks{
  flex:
    1 !important;

  margin:
    0 !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(3,minmax(0,1fr)) !important;

  gap:
    10px !important;
}


.hnd2 #crew-endorsement .hnd2-checks li{
  min-height:
    82px !important;

  padding:
    15px 14px 15px 42px !important;

  display:flex !important;

  align-items:center !important;

  position:relative !important;

  border:
    1px solid rgba(83,167,198,.22) !important;

  border-radius:
    7px !important;

  color:
    #496674 !important;

  background:
    rgba(255,255,255,.78) !important;

  font-size:
    11px !important;

  line-height:
    1.5 !important;

  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}


.hnd2 #crew-endorsement .hnd2-checks li::before{
  content:"✓" !important;

  position:absolute !important;

  left:
    15px !important;

  top:
    50% !important;

  transform:
    translateY(-50%) !important;

  width:
    19px !important;

  height:
    19px !important;

  display:flex !important;

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

  border-radius:
    50% !important;

  color:
    #138fbd !important;

  background:
    #e5f6fb !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}


.hnd2 #crew-endorsement .hnd2-checks li:hover{
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(29,154,201,.42) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 9px 20px rgba(5,79,108,.07) !important;
}



/* =========================================================
   RIGHT — PROCEDURE
   ========================================================= */

.hnd2 #crew-endorsement .hnd2-box:nth-child(2){
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(42,182,188,.08),
      transparent 27%
    ),
    linear-gradient(
      145deg,
      #f7fcfc,
      #eaf7f8
    ) !important;
}


.hnd2 #crew-endorsement .hnd2-box:nth-child(2) h3{
  margin:
    0 0 20px !important;

  padding-bottom:
    15px !important;

  border-bottom:
    1px solid rgba(55,161,169,.20) !important;

  color:
    #07505a !important;

  font-size:
    20px !important;

  line-height:
    1.2 !important;
}


.hnd2 #crew-endorsement .hnd2-procedure{
  flex:
    1 !important;

  margin:
    0 !important;

  display:grid !important;

  grid-template-rows:
    repeat(4,minmax(0,1fr)) !important;

  gap:
    10px !important;
}


/* remove timeline styling inherited elsewhere */

.hnd2 #crew-endorsement .hnd2-procedure::before{
  display:
    none !important;
}


.hnd2 #crew-endorsement .hnd2-step{
  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    15px !important;

  display:grid !important;

  grid-template-columns:
    40px 1fr !important;

  gap:
    13px !important;

  align-items:
    center !important;

  border:
    1px solid rgba(58,164,173,.22) !important;

  border-radius:
    7px !important;

  background:
    rgba(255,255,255,.80) !important;

  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}


.hnd2 #crew-endorsement .hnd2-step i{
  position:
    static !important;

  width:
    36px !important;

  height:
    36px !important;

  display:flex !important;

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

  border:
    1px solid rgba(30,164,174,.20) !important;

  border-radius:
    50% !important;

  color:
    #078e9b !important;

  background:
    #e2f6f7 !important;

  font-size:
    9px !important;

  font-style:
    normal !important;

  font-weight:
    900 !important;
}


.hnd2 #crew-endorsement .hnd2-step b{
  color:
    #123b49 !important;

  font-size:
    12.5px !important;

  line-height:
    1.3 !important;
}


.hnd2 #crew-endorsement .hnd2-step small{
  margin-top:
    5px !important;

  color:
    #627984 !important;

  font-size:
    10.5px !important;

  line-height:
    1.5 !important;
}


.hnd2 #crew-endorsement .hnd2-step:hover{
  transform:
    translateX(4px) !important;

  border-color:
    rgba(23,158,168,.42) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 9px 20px rgba(5,84,91,.065) !important;
}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .hnd2 #crew-endorsement .hnd2-head,
  .hnd2 #crew-endorsement .hnd2-service-grid{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 #crew-endorsement .hnd2-head{
    gap:
      22px !important;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px){

  .hnd2 #crew-endorsement .hnd2-checks{
    grid-template-columns:
      1fr !important;

    grid-template-rows:
      auto !important;
  }

  .hnd2 #crew-endorsement .hnd2-box{
    min-height:
      auto !important;
  }

  .hnd2 #crew-endorsement .hnd2-procedure{
    grid-template-rows:
      auto !important;
  }

}


/* =========================================================
   HONDURAS — COE PREMIUM TECHNICAL BACKGROUND DEPTH
   ========================================================= */

.hnd2 #crew-endorsement{
  position:relative !important;
  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 86% 21%,
      rgba(60,182,221,.115) 0%,
      rgba(60,182,221,.035) 24%,
      transparent 44%
    ),
    radial-gradient(
      circle at 9% 78%,
      rgba(23,116,158,.065) 0%,
      transparent 34%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(21,122,163,.032) 0px,
      rgba(21,122,163,.032) 1px,
      transparent 1px,
      transparent 58px
    ),
    linear-gradient(
      180deg,
      #f9fcfd 0%,
      #f0f8fb 100%
    ) !important;
}


/* large technical drafting geometry */

.hnd2 #crew-endorsement::before{
  content:"";

  position:absolute;

  width:640px;
  height:640px;

  right:-190px;
  top:80px;

  pointer-events:none;

  border:
    1px solid rgba(35,153,194,.085);

  border-radius:
    50%;

  box-shadow:
    0 0 0 95px rgba(32,155,198,.025),
    0 0 0 190px rgba(32,155,198,.018);

  opacity:.9;
}


/* route / chart style lines */

.hnd2 #crew-endorsement::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:46%;

  pointer-events:none;

  opacity:.60;

  background:
    linear-gradient(
      168deg,
      transparent 0%,
      transparent 38%,
      rgba(28,146,189,.065) 38.1%,
      rgba(28,146,189,.065) 38.25%,
      transparent 38.35%,
      transparent 100%
    ),
    linear-gradient(
      174deg,
      transparent 0%,
      transparent 59%,
      rgba(31,166,201,.052) 59.1%,
      rgba(31,166,201,.052) 59.25%,
      transparent 59.35%,
      transparent 100%
    );
}


/* content above decorative geometry */

.hnd2 #crew-endorsement > .shell{
  position:relative !important;
  z-index:2 !important;
}


/* subtle micro-grid around working area */

.hnd2 #crew-endorsement .hnd2-service-grid{
  position:relative !important;
}


.hnd2 #crew-endorsement .hnd2-service-grid::before{
  content:"";

  position:absolute;

  inset:-18px;

  z-index:-1;

  pointer-events:none;

  opacity:.30;

  background-image:
    linear-gradient(
      rgba(29,142,182,.038) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(29,142,182,.038) 1px,
      transparent 1px
    );

  background-size:
    32px 32px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000 14%,
      #000 86%,
      transparent
    );
}


/* keep the panels crisp */

.hnd2 #crew-endorsement .hnd2-box{
  backdrop-filter:
    blur(2px);

  -webkit-backdrop-filter:
    blur(2px);
}


/* mobile — reduce visual complexity */

@media(max-width:700px){

  .hnd2 #crew-endorsement::before{
    width:400px;
    height:400px;

    right:-220px;

    opacity:.55;
  }

  .hnd2 #crew-endorsement .hnd2-service-grid::before{
    opacity:.18;
  }

}


/* =========================================================
   HONDURAS — SEAMAN BOOK FINAL DESIGN
   ========================================================= */

.hnd2 .hnd2-seaman-book{
  position:relative !important;
  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(57,183,220,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 82%,
      rgba(17,107,149,.055),
      transparent 32%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(20,124,165,.031) 0,
      rgba(20,124,165,.031) 1px,
      transparent 1px,
      transparent 60px
    ),
    linear-gradient(
      180deg,
      #f8fcfd 0%,
      #edf7fa 100%
    ) !important;
}


/* large drafting circle */

.hnd2 .hnd2-seaman-book::before{
  content:"";

  position:absolute;

  width:560px;
  height:560px;

  right:-190px;
  top:-100px;

  pointer-events:none;

  border:
    1px solid rgba(40,157,198,.075);

  border-radius:
    50%;

  box-shadow:
    0 0 0 90px rgba(39,157,198,.020),
    0 0 0 180px rgba(39,157,198,.014);
}


/* subtle route line */

.hnd2 .hnd2-seaman-book::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:5%;

  height:180px;

  pointer-events:none;

  opacity:.55;

  background:
    linear-gradient(
      171deg,
      transparent 0%,
      transparent 48%,
      rgba(25,145,187,.055) 48.1%,
      rgba(25,145,187,.055) 48.3%,
      transparent 48.4%
    );
}


.hnd2 .hnd2-seaman-book > .shell{
  position:relative !important;
  z-index:2 !important;
}



/* =========================================================
   BALANCED HEADING
   ========================================================= */

.hnd2 .hnd2-seaman-book .hnd2-head{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:
    90px !important;

  align-items:
    center !important;
}


.hnd2 .hnd2-seaman-book .hnd2-head-copy{
  position:relative !important;

  max-width:590px !important;

  margin:0 !important;

  padding:
    5px 0 5px 24px !important;

  color:
    #58717e !important;

  font-size:
    11.5px !important;

  line-height:
    1.7 !important;
}


.hnd2 .hnd2-seaman-book .hnd2-head-copy::before{
  content:"";

  position:absolute;

  left:0;
  top:4px;
  bottom:4px;

  width:2px;

  background:
    linear-gradient(
      180deg,
      #28add7,
      rgba(40,173,215,.15)
    );
}



/* =========================================================
   TWO EQUAL PANELS
   ========================================================= */

.hnd2 .hnd2-seaman-book .hnd2-service-grid{
  margin-top:
    34px !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:
    18px !important;

  align-items:
    stretch !important;
}


.hnd2 .hnd2-seaman-book .hnd2-box{
  min-height:
    330px !important;

  padding:
    24px !important;

  border:
    1px solid rgba(90,173,202,.28) !important;

  border-radius:
    10px !important;

  box-shadow:
    0 13px 30px rgba(5,72,98,.055) !important;
}



/* =========================================================
   LEFT — COMMON DOCUMENTS
   ========================================================= */

.hnd2 .hnd2-seaman-book .hnd2-box:first-child{
  background:
    radial-gradient(
      circle at 94% 3%,
      rgba(47,171,211,.075),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #f9fcfe,
      #edf7fb
    ) !important;
}


.hnd2 .hnd2-seaman-book .hnd2-box:first-child h3{
  margin:
    0 0 19px !important;

  padding-bottom:
    14px !important;

  border-bottom:
    1px solid rgba(67,155,188,.20) !important;

  color:
    #0a354b !important;

  font-size:
    20px !important;
}


.hnd2 .hnd2-seaman-book .hnd2-checks{
  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(3,minmax(0,1fr)) !important;

  gap:
    10px !important;

  margin:
    0 !important;
}


.hnd2 .hnd2-seaman-book .hnd2-checks li{
  min-height:
    70px !important;

  padding:
    13px 13px 13px 40px !important;

  display:flex !important;

  align-items:center !important;

  position:relative !important;

  border:
    1px solid rgba(82,166,198,.21) !important;

  border-radius:
    7px !important;

  color:
    #4c6876 !important;

  background:
    rgba(255,255,255,.82) !important;

  font-size:
    10.8px !important;

  line-height:
    1.45 !important;

  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}


.hnd2 .hnd2-seaman-book .hnd2-checks li::before{
  content:"✓" !important;

  position:absolute !important;

  left:
    14px !important;

  top:
    50% !important;

  transform:
    translateY(-50%) !important;

  width:
    19px !important;

  height:
    19px !important;

  display:flex !important;

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

  border-radius:
    50% !important;

  color:
    #138fbd !important;

  background:
    #e5f6fb !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}


.hnd2 .hnd2-seaman-book .hnd2-checks li:hover{
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(28,153,201,.42) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 9px 20px rgba(5,78,108,.07) !important;
}



/* =========================================================
   RIGHT — OFFICIAL FORMS
   ========================================================= */

.hnd2 .hnd2-seaman-book .hnd2-box:nth-child(2){
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(42,181,188,.08),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #f7fcfc,
      #eaf7f8
    ) !important;
}


.hnd2 .hnd2-seaman-book .hnd2-box:nth-child(2) h3{
  margin:
    0 !important;

  color:
    #07515a !important;

  font-size:
    20px !important;
}


.hnd2 .hnd2-seaman-book .hnd2-box:nth-child(2) > p{
  margin:
    9px 0 20px !important;

  color:
    #607984 !important;

  font-size:
    10.5px !important;

  line-height:
    1.55 !important;
}



/* =========================================================
   FORM BUTTONS → PROPER DOWNLOAD CARDS
   ========================================================= */

.hnd2 .hnd2-seaman-book .hnd2-actions{
  flex:
    1 !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:
    12px !important;

  align-items:
    stretch !important;
}


.hnd2 .hnd2-seaman-book .hnd2-actions > a{
  position:relative !important;

  min-height:
    150px !important;

  padding:
    20px !important;

  display:flex !important;

  align-items:flex-end !important;
  justify-content:flex-start !important;

  border:
    1px solid rgba(51,165,176,.25) !important;

  border-radius:
    8px !important;

  overflow:
    hidden !important;

  color:
    #0a5661 !important;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(45,182,194,.10),
      transparent 35%
    ),
    rgba(255,255,255,.82) !important;

  font-size:
    12px !important;

  font-weight:
    850 !important;

  box-shadow:
    none !important;

  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    border-color .28s ease,
    background .28s ease,
    box-shadow .32s ease !important;
}


/* file icon */

.hnd2 .hnd2-seaman-book .hnd2-actions > a::before{
  content:"PDF";

  position:absolute;

  left:
    20px;
  top:
    20px;

  width:
    38px;
  height:
    38px;

  display:flex;

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

  border-radius:
    6px;

  color:
    #078d9c;

  background:
    #e2f6f7;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .06em;
}


/* shared global CTA-style hover */

.hnd2 .hnd2-seaman-book .hnd2-actions > a:hover{
  transform:
    translateY(-5px) !important;

  border-color:
    rgba(27,160,171,.48) !important;

  color:
    #07505a !important;

  background:
    #ffffff !important;

  box-shadow:
    0 14px 28px rgba(5,82,91,.09) !important;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

  .hnd2 .hnd2-seaman-book .hnd2-head,
  .hnd2 .hnd2-seaman-book .hnd2-service-grid{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 .hnd2-seaman-book .hnd2-head{
    gap:
      20px !important;
  }

}


@media(max-width:620px){

  .hnd2 .hnd2-seaman-book .hnd2-checks,
  .hnd2 .hnd2-seaman-book .hnd2-actions{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 .hnd2-seaman-book .hnd2-box{
    min-height:
      auto !important;
  }

}


/* =========================================================
   HONDURAS — SHIP REGISTRATION FINAL DESIGN
   ========================================================= */

.hnd2 .hnd2-ship-registration{
  position:relative !important;
  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 87% 17%,
      rgba(54,181,219,.11),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 80%,
      rgba(12,104,147,.055),
      transparent 32%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(20,124,164,.030) 0,
      rgba(20,124,164,.030) 1px,
      transparent 1px,
      transparent 61px
    ),
    linear-gradient(
      180deg,
      #f9fcfd 0%,
      #eff8fb 100%
    ) !important;
}


/* large technical / registry circle */

.hnd2 .hnd2-ship-registration::before{
  content:"";

  position:absolute;

  width:600px;
  height:600px;

  right:-210px;
  top:70px;

  pointer-events:none;

  border:
    1px solid rgba(36,153,194,.075);

  border-radius:
    50%;

  box-shadow:
    0 0 0 95px rgba(37,155,197,.020),
    0 0 0 190px rgba(37,155,197,.014);
}


/* subtle vessel-route line */

.hnd2 .hnd2-ship-registration::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:230px;

  pointer-events:none;

  opacity:.6;

  background:
    linear-gradient(
      170deg,
      transparent 0%,
      transparent 46%,
      rgba(24,144,186,.055) 46.1%,
      rgba(24,144,186,.055) 46.3%,
      transparent 46.4%
    ),
    linear-gradient(
      176deg,
      transparent 0%,
      transparent 63%,
      rgba(31,163,198,.043) 63.1%,
      rgba(31,163,198,.043) 63.3%,
      transparent 63.4%
    );
}


.hnd2 .hnd2-ship-registration > .shell{
  position:relative !important;
  z-index:2 !important;
}



/* =========================================================
   HEADING — BALANCED 50 / 50
   ========================================================= */

.hnd2 .hnd2-ship-registration .hnd2-head{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:
    90px !important;

  align-items:
    center !important;
}


.hnd2 .hnd2-ship-registration .hnd2-head-copy{
  position:relative !important;

  max-width:
    600px !important;

  margin:
    0 !important;

  padding:
    5px 0 5px 24px !important;

  color:
    #58717e !important;

  font-size:
    11.5px !important;

  line-height:
    1.7 !important;
}


.hnd2 .hnd2-ship-registration .hnd2-head-copy::before{
  content:"";

  position:absolute;

  left:0;
  top:4px;
  bottom:4px;

  width:2px;

  background:
    linear-gradient(
      180deg,
      #28add7,
      rgba(40,173,215,.15)
    );
}



/* =========================================================
   TWO BALANCED PANELS
   ========================================================= */

.hnd2 .hnd2-ship-registration .hnd2-service-grid{
  margin-top:
    34px !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:
    18px !important;

  align-items:
    stretch !important;
}


.hnd2 .hnd2-ship-registration .hnd2-box{
  min-height:
    390px !important;

  padding:
    24px !important;

  display:flex !important;

  flex-direction:
    column !important;

  border:
    1px solid rgba(90,173,202,.28) !important;

  border-radius:
    10px !important;

  box-shadow:
    0 13px 30px rgba(5,72,98,.055) !important;
}



/* =========================================================
   LEFT — INITIAL REGISTRATION FILE
   ========================================================= */

.hnd2 .hnd2-ship-registration .hnd2-box:first-child{
  background:
    radial-gradient(
      circle at 94% 3%,
      rgba(47,171,211,.075),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #f9fcfe,
      #edf7fb
    ) !important;
}


.hnd2 .hnd2-ship-registration .hnd2-box:first-child h3{
  margin:
    0 0 20px !important;

  padding-bottom:
    15px !important;

  border-bottom:
    1px solid rgba(67,155,188,.20) !important;

  color:
    #0a354b !important;

  font-size:
    20px !important;

  line-height:
    1.2 !important;
}



/* six requirements become 2 x 3 cards */

.hnd2 .hnd2-ship-registration .hnd2-checks{
  flex:
    1 !important;

  margin:
    0 !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(3,minmax(0,1fr)) !important;

  gap:
    10px !important;
}


.hnd2 .hnd2-ship-registration .hnd2-checks li{
  min-height:
    82px !important;

  padding:
    15px 14px 15px 42px !important;

  display:flex !important;

  align-items:center !important;

  position:relative !important;

  border:
    1px solid rgba(82,166,198,.21) !important;

  border-radius:
    7px !important;

  color:
    #4b6775 !important;

  background:
    rgba(255,255,255,.82) !important;

  font-size:
    11px !important;

  line-height:
    1.48 !important;

  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}


.hnd2 .hnd2-ship-registration .hnd2-checks li::before{
  content:"✓" !important;

  position:absolute !important;

  left:
    14px !important;

  top:
    50% !important;

  transform:
    translateY(-50%) !important;

  width:
    19px !important;

  height:
    19px !important;

  display:flex !important;

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

  border-radius:
    50% !important;

  color:
    #138fbd !important;

  background:
    #e5f6fb !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}


.hnd2 .hnd2-ship-registration .hnd2-checks li:hover{
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(28,153,201,.42) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 9px 20px rgba(5,78,108,.07) !important;
}



/* =========================================================
   RIGHT — REGISTRATION PROCEDURE
   ========================================================= */

.hnd2 .hnd2-ship-registration .hnd2-box:nth-child(2){
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(42,181,188,.08),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #f7fcfc,
      #eaf7f8
    ) !important;
}


.hnd2 .hnd2-ship-registration .hnd2-box:nth-child(2) h3{
  margin:
    0 0 20px !important;

  padding-bottom:
    15px !important;

  border-bottom:
    1px solid rgba(55,161,169,.20) !important;

  color:
    #07505a !important;

  font-size:
    20px !important;

  line-height:
    1.2 !important;
}


.hnd2 .hnd2-ship-registration .hnd2-procedure{
  flex:
    1 !important;

  margin:
    0 !important;

  display:grid !important;

  grid-template-rows:
    repeat(4,minmax(0,1fr)) !important;

  gap:
    10px !important;
}


/* remove inherited timeline rail */

.hnd2 .hnd2-ship-registration .hnd2-procedure::before{
  display:
    none !important;
}


.hnd2 .hnd2-ship-registration .hnd2-step{
  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    15px !important;

  display:grid !important;

  grid-template-columns:
    40px 1fr !important;

  gap:
    13px !important;

  align-items:
    center !important;

  border:
    1px solid rgba(58,164,173,.22) !important;

  border-radius:
    7px !important;

  background:
    rgba(255,255,255,.80) !important;

  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease !important;
}


.hnd2 .hnd2-ship-registration .hnd2-step i{
  position:
    static !important;

  width:
    36px !important;

  height:
    36px !important;

  display:flex !important;

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

  border:
    1px solid rgba(30,164,174,.20) !important;

  border-radius:
    50% !important;

  color:
    #078e9b !important;

  background:
    #e2f6f7 !important;

  font-size:
    9px !important;

  font-style:
    normal !important;

  font-weight:
    900 !important;
}


.hnd2 .hnd2-ship-registration .hnd2-step b{
  color:
    #123b49 !important;

  font-size:
    12.5px !important;

  line-height:
    1.3 !important;
}


.hnd2 .hnd2-ship-registration .hnd2-step small{
  margin-top:
    5px !important;

  color:
    #627984 !important;

  font-size:
    10.5px !important;

  line-height:
    1.5 !important;
}


.hnd2 .hnd2-ship-registration .hnd2-step:hover{
  transform:
    translateX(4px) !important;

  border-color:
    rgba(23,158,168,.42) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 9px 20px rgba(5,84,91,.065) !important;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:900px){

  .hnd2 .hnd2-ship-registration .hnd2-head,
  .hnd2 .hnd2-ship-registration .hnd2-service-grid{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 .hnd2-ship-registration .hnd2-head{
    gap:
      20px !important;
  }

}


@media(max-width:620px){

  .hnd2 .hnd2-ship-registration .hnd2-checks{
    grid-template-columns:
      1fr !important;

    grid-template-rows:
      auto !important;
  }

  .hnd2 .hnd2-ship-registration .hnd2-box{
    min-height:
      auto !important;
  }

  .hnd2 .hnd2-ship-registration .hnd2-procedure{
    grid-template-rows:
      auto !important;
  }

}


/* =========================================================
   HONDURAS — OFFICIAL RESOURCES FINAL DESIGN
   ========================================================= */

.hnd2 .hnd2-resources{
  position:relative !important;
  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(55,183,221,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 82%,
      rgba(14,106,148,.055),
      transparent 32%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(20,124,164,.031) 0,
      rgba(20,124,164,.031) 1px,
      transparent 1px,
      transparent 60px
    ),
    linear-gradient(
      180deg,
      #f8fcfd 0%,
      #edf7fa 100%
    ) !important;
}


/* technical drafting geometry */

.hnd2 .hnd2-resources::before{
  content:"";

  position:absolute;

  width:560px;
  height:560px;

  right:-180px;
  top:-130px;

  pointer-events:none;

  border:
    1px solid rgba(37,156,197,.075);

  border-radius:50%;

  box-shadow:
    0 0 0 95px rgba(38,156,197,.020),
    0 0 0 190px rgba(38,156,197,.014);
}


.hnd2 .hnd2-resources > .shell{
  position:relative !important;
  z-index:2 !important;
}



/* =========================================================
   HEADING — 50 / 50 BALANCE
   ========================================================= */

.hnd2 .hnd2-resources .hnd2-head{
  display:grid !important;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr) !important;

  gap:90px !important;

  align-items:center !important;
}


.hnd2 .hnd2-resources .hnd2-head-copy{
  position:relative !important;

  max-width:590px !important;

  margin:0 !important;

  padding:
    5px 0 5px 24px !important;

  color:#58717e !important;

  font-size:11.5px !important;

  line-height:1.7 !important;
}


.hnd2 .hnd2-resources .hnd2-head-copy::before{
  content:"";

  position:absolute;

  left:0;
  top:4px;
  bottom:4px;

  width:2px;

  background:
    linear-gradient(
      180deg,
      #28add7,
      rgba(40,173,215,.15)
    );
}



/* =========================================================
   FOUR RESOURCE CARDS
   ========================================================= */

.hnd2 .hnd2-resource-grid{
  margin-top:34px !important;

  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:14px !important;
}


.hnd2 .hnd2-resource{
  position:relative !important;

  min-height:220px !important;

  padding:24px 22px !important;

  display:flex !important;

  flex-direction:column !important;

  border:
    1px solid rgba(83,168,199,.28) !important;

  border-radius:9px !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(52,177,216,.075),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(243,250,253,.94)
    ) !important;

  box-shadow:
    0 10px 24px rgba(5,71,98,.045) !important;

  transition:
    transform .34s cubic-bezier(.22,1,.36,1),
    border-color .28s ease,
    box-shadow .34s ease,
    background .28s ease !important;
}


/* top accent */

.hnd2 .hnd2-resource::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:3px;

  background:
    linear-gradient(
      90deg,
      #159dcc,
      #63d7ed
    );
}


/* card sequence label */

.hnd2 .hnd2-resource small{
  color:#159aca !important;

  font-size:8px !important;

  font-weight:900 !important;

  line-height:1.2 !important;

  letter-spacing:.13em !important;

  text-transform:uppercase !important;
}


/* card title */

.hnd2 .hnd2-resource h3,
.hnd2 .hnd2-resource h4,
.hnd2 .hnd2-resource b{
  margin-top:40px !important;

  color:#0a3348 !important;

  font-size:17px !important;

  line-height:1.2 !important;

  font-weight:850 !important;
}


/* descriptions — fixes the nearly invisible Registry card */

.hnd2 .hnd2-resource p{
  margin-top:10px !important;

  color:#5c7480 !important;

  font-size:10.5px !important;

  line-height:1.55 !important;
}


/* ---------------------------------------------------------
   SIMPLE RESOURCE TYPE ICON
   --------------------------------------------------------- */

.hnd2 .hnd2-resource::after{
  position:absolute;

  left:22px;
  top:48px;

  width:31px;
  height:31px;

  display:flex;

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

  border-radius:6px;

  color:#0f91bf;

  background:#e5f6fb;

  font-size:8px;
  font-weight:900;

  letter-spacing:.04em;
}


.hnd2 .hnd2-resource:nth-child(1)::after{
  content:"CERT";
}


.hnd2 .hnd2-resource:nth-child(2)::after{
  content:"REG";
}


.hnd2 .hnd2-resource:nth-child(3)::after{
  content:"INFO";
}


.hnd2 .hnd2-resource:nth-child(4)::after{
  content:"GO";
}



/* =========================================================
   INDIVIDUAL CARD IDENTITIES
   ========================================================= */

/* Certification */

.hnd2 .hnd2-resource:nth-child(1){
  border-color:
    rgba(37,151,194,.30) !important;
}


/* Registry */

.hnd2 .hnd2-resource:nth-child(2){
  border-color:
    rgba(23,166,202,.38) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(36,177,214,.11),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #f8fdff,
      #eaf8fc
    ) !important;
}


/* Circulars */

.hnd2 .hnd2-resource:nth-child(3){
  border-color:
    rgba(35,164,174,.28) !important;
}


.hnd2 .hnd2-resource:nth-child(3)::before{
  background:
    linear-gradient(
      90deg,
      #078f9b,
      #52cbd1
    );
}


/* Start Application */

.hnd2 .hnd2-resource:nth-child(4){
  border-color:
    rgba(29,157,199,.34) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(44,184,219,.13),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #f4fbfe,
      #e5f5fa
    ) !important;
}



/* =========================================================
   HOVER
   ========================================================= */

.hnd2 .hnd2-resource:hover{
  transform:
    translateY(-6px) !important;

  border-color:
    rgba(32,163,207,.50) !important;

  background:
    #ffffff !important;

  box-shadow:
    0 18px 34px rgba(5,79,108,.10) !important;
}


.hnd2 .hnd2-resource:hover::after{
  transform:
    translateY(-2px);

  transition:
    transform .28s ease;
}



/* =========================================================
   LINK / ACTION INSIDE CARD
   ========================================================= */

.hnd2 .hnd2-resource a,
.hnd2 .hnd2-resource > strong{
  margin-top:auto !important;

  padding-top:18px !important;

  color:#0d96c5 !important;

  font-size:9.5px !important;

  font-weight:900 !important;

  text-decoration:none !important;
}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

  .hnd2 .hnd2-resource-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}


@media(max-width:700px){

  .hnd2 .hnd2-resources .hnd2-head{
    grid-template-columns:
      1fr !important;

    gap:20px !important;
  }

  .hnd2 .hnd2-resource-grid{
    grid-template-columns:
      1fr !important;
  }

  .hnd2 .hnd2-resource{
    min-height:190px !important;
  }

}


/* =========================================================
   HONDURAS — RESTORE PRIMARY COC SECTION
   Dark premium background + readable content
   ========================================================= */

.hnd2 .hnd2-coc{
  position:relative !important;
  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 84% 15%,
      rgba(61,205,235,.16),
      transparent 31%
    ),
    radial-gradient(
      circle at 8% 84%,
      rgba(13,107,148,.18),
      transparent 35%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(112,225,247,.035) 0,
      rgba(112,225,247,.035) 1px,
      transparent 1px,
      transparent 66px
    ),
    linear-gradient(
      135deg,
      #062f47 0%,
      #075a78 100%
    ) !important;
}


/* subtle technical geometry */

.hnd2 .hnd2-coc::before{
  content:"";

  position:absolute;

  width:620px;
  height:620px;

  right:-210px;
  top:-160px;

  pointer-events:none;

  border:
    1px solid rgba(105,221,244,.08);

  border-radius:50%;

  box-shadow:
    0 0 0 100px rgba(95,217,241,.020),
    0 0 0 200px rgba(95,217,241,.012);
}


.hnd2 .hnd2-coc > .shell{
  position:relative !important;
  z-index:2 !important;
}



/* =========================================================
   PRIMARY HEADING
   ========================================================= */

.hnd2 .hnd2-coc .hnd2-kicker,
.hnd2 .hnd2-coc .hnd2-eyebrow{
  color:#72e2f7 !important;
}


.hnd2 .hnd2-coc h2{
  color:#ffffff !important;
}


/* eligibility pill */

.hnd2 .hnd2-coc .hnd2-pill{
  color:#73e3f7 !important;

  border-color:
    rgba(111,224,246,.34) !important;

  background:
    rgba(255,255,255,.05) !important;
}



/* =========================================================
   RIGHT-SIDE INTRO COPY
   ========================================================= */

.hnd2 .hnd2-coc .hnd2-head-copy,
.hnd2 .hnd2-coc .hnd2-intro-copy,
.hnd2 .hnd2-coc > .shell > p{
  color:
    rgba(231,248,251,.88) !important;
}


.hnd2 .hnd2-coc .hnd2-head-copy::before{
  background:
    linear-gradient(
      180deg,
      #65dff5,
      rgba(101,223,245,.16)
    ) !important;
}



/* =========================================================
   FIVE-STEP COC ROUTE
   ========================================================= */

.hnd2 .hnd2-route{
  border:
    1px solid rgba(109,222,244,.22) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.035)
    ) !important;

  box-shadow:
    0 15px 34px rgba(0,22,35,.13) !important;
}


.hnd2 .hnd2-route > div{
  background:
    rgba(255,255,255,.018) !important;

  border-right:
    1px solid rgba(120,221,241,.15) !important;
}


.hnd2 .hnd2-route > div:last-child{
  border-right:0 !important;
}


/* number */

.hnd2 .hnd2-route > div > span{
  color:#70e2f7 !important;

  border-color:
    rgba(107,224,246,.26) !important;

  background:
    rgba(66,194,224,.11) !important;
}


/* title */

.hnd2 .hnd2-route > div > b{
  color:#ffffff !important;

  font-size:13px !important;
}


/* description */

.hnd2 .hnd2-route > div > small{
  color:
    rgba(229,247,250,.80) !important;

  font-size:
    10.5px !important;

  line-height:
    1.5 !important;
}


/* hover */

.hnd2 .hnd2-route > div:hover{
  background:
    rgba(255,255,255,.075) !important;
}



/* =========================================================
   ENSURE LIGHT PANELS BELOW STAY LIGHT
   ========================================================= */

.hnd2 .hnd2-coc-grid{
  position:relative !important;
  z-index:2 !important;
}


.hnd2 .hnd2-coc-grid > .hnd2-panel{
  color:#17394a !important;
}


/* mobile */

@media(max-width:700px){

  .hnd2 .hnd2-coc::before{
    width:400px;
    height:400px;

    right:-230px;
    top:-80px;
  }

}


/* =========================================================
   HONDURAS — PRIMARY COC AUTHORITATIVE DESIGN
   Permanent selector: .hnd2-primary-coc
   ========================================================= */

.hnd2 .hnd2-primary-coc{
  position:relative !important;
  overflow:hidden !important;

  padding-top:70px !important;

  background:
    radial-gradient(
      circle at 84% 16%,
      rgba(74,211,239,.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 84%,
      rgba(9,94,136,.22),
      transparent 34%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(109,224,246,.040) 0,
      rgba(109,224,246,.040) 1px,
      transparent 1px,
      transparent 64px
    ),
    linear-gradient(
      135deg,
      #052d45 0%,
      #064e6c 55%,
      #087391 100%
    ) !important;
}


/* large technical circle */

.hnd2 .hnd2-primary-coc::before{
  content:"";

  position:absolute;

  width:720px;
  height:720px;

  right:-240px;
  top:-220px;

  pointer-events:none;

  border:
    1px solid rgba(108,224,247,.08);

  border-radius:50%;

  box-shadow:
    0 0 0 110px rgba(105,221,244,.022),
    0 0 0 220px rgba(105,221,244,.014);
}


/* subtle lower drafting line */

.hnd2 .hnd2-primary-coc::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:260px;

  pointer-events:none;

  opacity:.50;

  background:
    linear-gradient(
      171deg,
      transparent 0%,
      transparent 52%,
      rgba(104,219,241,.06) 52.1%,
      rgba(104,219,241,.06) 52.3%,
      transparent 52.4%
    );
}


.hnd2 .hnd2-primary-coc > .shell{
  position:relative !important;
  z-index:2 !important;
}



/* =========================================================
   TOP INTRO
   ========================================================= */

.hnd2 .hnd2-primary-coc .hnd2-kicker,
.hnd2 .hnd2-primary-coc .hnd2-eyebrow{
  color:#70e1f6 !important;
}


.hnd2 .hnd2-primary-coc h2{
  color:#ffffff !important;
}


.hnd2 .hnd2-primary-coc .hnd2-pill{
  color:#74e4f8 !important;

  border:
    1px solid rgba(112,226,247,.34) !important;

  background:
    rgba(255,255,255,.055) !important;
}


/* right introductory text */

.hnd2 .hnd2-primary-coc .hnd2-head-copy,
.hnd2 .hnd2-primary-coc .hnd2-intro-copy{
  color:
    rgba(231,248,251,.87) !important;
}


.hnd2 .hnd2-primary-coc .hnd2-head-copy::before{
  background:
    linear-gradient(
      180deg,
      #68e0f5,
      rgba(104,224,245,.14)
    ) !important;
}



/* =========================================================
   FIVE STAGE ROUTE
   ========================================================= */

.hnd2 .hnd2-primary-coc .hnd2-route{
  margin-top:40px !important;

  border:
    1px solid rgba(111,224,246,.25) !important;

  border-radius:10px !important;

  overflow:hidden !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.085),
      rgba(255,255,255,.035)
    ) !important;

  box-shadow:
    0 16px 34px rgba(0,20,32,.15) !important;
}


.hnd2 .hnd2-primary-coc .hnd2-route > div{
  min-height:135px !important;

  padding:20px 18px !important;

  border-right:
    1px solid rgba(117,224,244,.14) !important;

  background:
    transparent !important;
}


.hnd2 .hnd2-primary-coc
.hnd2-route > div:last-child{
  border-right:0 !important;
}


/* number */

.hnd2 .hnd2-primary-coc
.hnd2-route > div > span{
  width:31px !important;
  height:31px !important;

  display:flex !important;

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

  border:
    1px solid rgba(107,224,246,.26) !important;

  border-radius:50% !important;

  color:#73e4f7 !important;

  background:
    rgba(66,194,224,.11) !important;

  font-size:9px !important;

  font-weight:900 !important;
}


/* title */

.hnd2 .hnd2-primary-coc
.hnd2-route > div > b{
  display:block !important;

  margin-top:17px !important;

  color:#ffffff !important;

  font-size:13px !important;

  line-height:1.25 !important;

  font-weight:850 !important;
}


/* description */

.hnd2 .hnd2-primary-coc
.hnd2-route > div > small{
  display:block !important;

  margin-top:7px !important;

  color:
    rgba(229,247,250,.78) !important;

  font-size:10.5px !important;

  line-height:1.5 !important;
}


/* hover */

.hnd2 .hnd2-primary-coc
.hnd2-route > div:hover{
  background:
    rgba(255,255,255,.07) !important;
}



/* =========================================================
   LIGHT WORKING PANELS INSIDE DARK SECTION
   ========================================================= */

.hnd2 .hnd2-primary-coc
.hnd2-coc-grid{
  margin-top:18px !important;
}


.hnd2 .hnd2-primary-coc
.hnd2-coc-grid > .hnd2-panel{
  color:#17394a !important;

  border:
    1px solid rgba(103,190,218,.30) !important;

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(54,181,218,.075),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #f8fcfe,
      #eaf6fa
    ) !important;

  box-shadow:
    0 15px 32px rgba(0,24,38,.10) !important;
}


.hnd2 .hnd2-primary-coc
.hnd2-coc-grid h3{
  color:#0b3348 !important;
}


.hnd2 .hnd2-primary-coc
.hnd2-coc-grid p,
.hnd2 .hnd2-primary-coc
.hnd2-coc-grid small{
  color:#5f7782 !important;
}



/* =========================================================
   FORMS PANEL INSIDE PRIMARY COC
   ========================================================= */

.hnd2 .hnd2-primary-coc .hnd2-forms{
  color:#17394a !important;

  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(53,181,218,.075),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #f7fcfe,
      #eaf6fa
    ) !important;
}



/* =========================================================
   GRADE DESK INSIDE PRIMARY COC
   ========================================================= */

.hnd2 .hnd2-primary-coc .hnd2-grade-desk{
  color:#17394a !important;

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(54,181,218,.08),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #f8fcfe,
      #edf7fa
    ) !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .hnd2 .hnd2-primary-coc{
    padding-top:50px !important;
  }

  .hnd2 .hnd2-primary-coc::before{
    width:420px;
    height:420px;

    right:-250px;
    top:-90px;
  }

}


/* =========================================================
   SEA LICENSING — HONDURAS PRIMARY COC FINAL FORCE
   Runtime class guarantees correct section.
   ========================================================= */

.sl-honduras-primary-coc{
  position:relative !important;
  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 84% 15%,
      rgba(74,210,239,.18),
      transparent 31%
    ),
    radial-gradient(
      circle at 8% 85%,
      rgba(9,93,135,.22),
      transparent 35%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(110,223,246,.042) 0,
      rgba(110,223,246,.042) 1px,
      transparent 1px,
      transparent 64px
    ),
    linear-gradient(
      135deg,
      #052d45 0%,
      #064c69 54%,
      #08718f 100%
    ) !important;
}


/* technical circle */

.sl-honduras-primary-coc::before{
  content:"" !important;

  position:absolute !important;

  width:720px !important;
  height:720px !important;

  right:-250px !important;
  top:-230px !important;

  pointer-events:none !important;

  border:
    1px solid rgba(109,224,246,.08) !important;

  border-radius:
    50% !important;

  box-shadow:
    0 0 0 110px rgba(105,221,244,.022),
    0 0 0 220px rgba(105,221,244,.013) !important;
}


/* content stays above texture */

.sl-honduras-primary-coc > *{
  position:relative !important;
  z-index:2 !important;
}



/* =========================================================
   MAIN HEADING / EYEBROW
   ========================================================= */

.sl-honduras-primary-coc h1,
.sl-honduras-primary-coc h2{
  color:
    #ffffff !important;
}


.sl-honduras-primary-coc .hnd2-kicker,
.sl-honduras-primary-coc .hnd2-eyebrow,
.sl-honduras-primary-coc .eyebrow{
  color:
    #73e3f7 !important;
}


/* eligible non-national pill */

.sl-honduras-primary-coc .hnd2-pill{
  color:
    #77e5f8 !important;

  border-color:
    rgba(112,225,247,.36) !important;

  background:
    rgba(255,255,255,.055) !important;
}



/* =========================================================
   INTRODUCTORY TEXT ON RIGHT
   ========================================================= */

.sl-honduras-primary-coc .hnd2-head-copy,
.sl-honduras-primary-coc .hnd2-intro-copy{
  color:
    rgba(234,249,252,.88) !important;
}


.sl-honduras-primary-coc .hnd2-head-copy::before{
  background:
    linear-gradient(
      180deg,
      #6be2f6,
      rgba(107,226,246,.13)
    ) !important;
}



/* =========================================================
   FIVE-STEP PROCESS
   ========================================================= */

.sl-honduras-primary-coc .hnd2-route{
  margin-top:
    38px !important;

  overflow:
    hidden !important;

  border:
    1px solid rgba(112,225,246,.24) !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.035)
    ) !important;

  box-shadow:
    0 16px 34px rgba(0,22,35,.15) !important;
}


.sl-honduras-primary-coc .hnd2-route > div{
  min-height:
    135px !important;

  padding:
    20px 18px !important;

  border-right:
    1px solid rgba(120,222,242,.14) !important;

  background:
    transparent !important;

  transition:
    background .28s ease !important;
}


.sl-honduras-primary-coc
.hnd2-route > div:last-child{
  border-right:
    0 !important;
}


.sl-honduras-primary-coc
.hnd2-route > div:hover{
  background:
    rgba(255,255,255,.07) !important;
}



/* number */

.sl-honduras-primary-coc
.hnd2-route > div > span{
  width:
    31px !important;

  height:
    31px !important;

  display:flex !important;

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

  border:
    1px solid rgba(109,224,246,.28) !important;

  border-radius:
    50% !important;

  color:
    #75e5f8 !important;

  background:
    rgba(62,193,223,.12) !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;
}



/* process title */

.sl-honduras-primary-coc
.hnd2-route > div > b{
  display:block !important;

  margin-top:
    17px !important;

  color:
    #ffffff !important;

  font-size:
    13px !important;

  line-height:
    1.25 !important;

  font-weight:
    850 !important;
}



/* process description */

.sl-honduras-primary-coc
.hnd2-route > div > small{
  display:block !important;

  margin-top:
    7px !important;

  color:
    rgba(229,247,250,.79) !important;

  font-size:
    10.5px !important;

  line-height:
    1.5 !important;
}



/* =========================================================
   LIGHT WORKING PANELS BELOW PROCESS
   ========================================================= */

.sl-honduras-primary-coc .hnd2-coc-grid,
.sl-honduras-primary-coc .hnd2-forms,
.sl-honduras-primary-coc .hnd2-grade-desk{
  position:
    relative !important;

  z-index:
    3 !important;
}


.sl-honduras-primary-coc
.hnd2-coc-grid > .hnd2-panel{
  color:
    #16394a !important;

  background:
    radial-gradient(
      circle at 94% 0%,
      rgba(55,180,218,.075),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #f8fcfe,
      #eaf6fa
    ) !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .sl-honduras-primary-coc::before{
    width:
      420px !important;

    height:
      420px !important;

    right:
      -250px !important;

    top:
      -80px !important;
  }

}


/* =========================================================
   HONDURAS — PRIMARY COC TOP AREA FINAL
   Fix kicker spacing + restore five premium process cards
   ========================================================= */


/* =========================================================
   01 / PRIMARY SERVICE — GIVE IT ITS OWN SPACE
   ========================================================= */

.sl-honduras-primary-coc{
  padding-top:58px !important;
}


.sl-honduras-primary-coc .hnd2-kicker,
.sl-honduras-primary-coc .hnd2-eyebrow,
.sl-honduras-primary-coc .eyebrow{
  display:block !important;

  margin:0 0 18px !important;

  padding:0 !important;

  color:#73e4f7 !important;

  font-size:9px !important;

  line-height:1.2 !important;

  font-weight:900 !important;

  letter-spacing:.14em !important;

  position:relative !important;

  z-index:4 !important;
}


/* prevent any inherited negative spacing */

.sl-honduras-primary-coc .hnd2-head{
  margin-top:0 !important;
  padding-top:0 !important;
}


/* heading */

.sl-honduras-primary-coc h2{
  margin-top:0 !important;
}


/* more space between intro and process cards */

.sl-honduras-primary-coc .hnd2-route{
  margin-top:42px !important;
}



/* =========================================================
   PROCESS AREA — REMOVE OLD SINGLE STRIP APPEARANCE
   ========================================================= */

.sl-honduras-primary-coc .hnd2-route{
  display:grid !important;

  grid-template-columns:
    repeat(5,minmax(0,1fr)) !important;

  gap:11px !important;

  padding:0 !important;

  overflow:visible !important;

  border:0 !important;

  border-radius:0 !important;

  background:transparent !important;

  box-shadow:none !important;
}



/* =========================================================
   EACH STAGE = INDIVIDUAL PREMIUM CARD
   ========================================================= */

.sl-honduras-primary-coc .hnd2-route > div{
  position:relative !important;

  min-width:0 !important;
  min-height:142px !important;

  padding:
    18px 17px 17px !important;

  border:
    1px solid rgba(112,224,246,.24) !important;

  border-radius:
    9px !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(95,219,242,.09),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.030)
    ) !important;

  box-shadow:
    0 9px 22px rgba(0,26,40,.10) !important;

  transition:
    transform .30s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .30s ease !important;
}


/* faint technical diagonal inside card */

.sl-honduras-primary-coc .hnd2-route > div::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 68%,
      rgba(111,225,246,.045) 68.2%,
      rgba(111,225,246,.045) 68.8%,
      transparent 69%
    );

  opacity:.8;
}


/* keep content above decoration */

.sl-honduras-primary-coc .hnd2-route > div > *{
  position:relative !important;
  z-index:2 !important;
}



/* =========================================================
   NUMBER BADGE
   ========================================================= */

.sl-honduras-primary-coc
.hnd2-route > div > span{
  width:34px !important;
  height:34px !important;

  margin:0 !important;

  display:flex !important;

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

  border:
    1px solid rgba(113,225,246,.35) !important;

  border-radius:
    50% !important;

  color:#79e7f8 !important;

  background:
    rgba(59,187,219,.13) !important;

  font-size:9px !important;

  font-weight:900 !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025) !important;
}



/* =========================================================
   CARD TITLE
   ========================================================= */

.sl-honduras-primary-coc
.hnd2-route > div > b{
  display:block !important;

  margin-top:17px !important;

  color:#ffffff !important;

  font-size:13px !important;

  line-height:1.28 !important;

  font-weight:850 !important;
}



/* =========================================================
   DESCRIPTION
   ========================================================= */

.sl-honduras-primary-coc
.hnd2-route > div > small{
  display:block !important;

  margin-top:7px !important;

  color:
    rgba(229,247,250,.80) !important;

  font-size:10.5px !important;

  line-height:1.48 !important;
}



/* =========================================================
   HOVER — SAME PREMIUM LANGUAGE
   ========================================================= */

.sl-honduras-primary-coc
.hnd2-route > div:hover{
  transform:
    translateY(-5px) !important;

  border-color:
    rgba(112,226,247,.52) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(100,224,244,.15),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.105),
      rgba(255,255,255,.050)
    ) !important;

  box-shadow:
    0 16px 30px rgba(0,24,38,.18) !important;
}


.sl-honduras-primary-coc
.hnd2-route > div:hover > span{
  color:#063a51 !important;

  border-color:
    #78e5f7 !important;

  background:
    #78e5f7 !important;

  transition:
    color .28s ease,
    background .28s ease,
    border-color .28s ease;
}



/* =========================================================
   REMOVE OLD VERTICAL SEPARATORS COMPLETELY
   ========================================================= */

.sl-honduras-primary-coc
.hnd2-route > div{
  border-right:
    1px solid rgba(112,224,246,.24) !important;
}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .sl-honduras-primary-coc .hnd2-route{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

}



/* =========================================================
   SMALL TABLET
   ========================================================= */

@media(max-width:760px){

  .sl-honduras-primary-coc .hnd2-route{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:520px){

  .sl-honduras-primary-coc{
    padding-top:
      42px !important;
  }

  .sl-honduras-primary-coc .hnd2-route{
    grid-template-columns:
      1fr !important;
  }

  .sl-honduras-primary-coc .hnd2-route > div{
    min-height:
      125px !important;
  }

}


/* =========================================================
   HONDURAS — HERO READABILITY FINAL
   Keep existing alignment/image composition.
   ========================================================= */

.hnd2-honduras-hero{
  position:relative !important;
  isolation:isolate !important;
}


/* =========================================================
   CLEAN LEFT-SIDE READABILITY GRADIENT
   ========================================================= */

.hnd2-honduras-hero::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.91) 20%,
      rgba(255,255,255,.72) 38%,
      rgba(255,255,255,.32) 55%,
      rgba(255,255,255,.04) 72%,
      transparent 100%
    ) !important;
}


/* all hero content above overlay */

.hnd2-honduras-hero > *,
.hnd2-honduras-hero .shell{
  position:relative !important;
  z-index:2 !important;
}



/* =========================================================
   KICKER / FLAG LABEL
   ========================================================= */

.hnd2-honduras-hero .eyebrow,
.hnd2-honduras-hero .hnd2-eyebrow,
.hnd2-honduras-hero .hnd2-kicker{
  color:#249bc5 !important;

  font-weight:900 !important;

  text-shadow:none !important;
}



/* =========================================================
   MAIN HEADING
   ========================================================= */

.hnd2-honduras-hero h1{
  color:#082d43 !important;

  text-shadow:none !important;
}



/* =========================================================
   HERO DESCRIPTION
   This is the main problem in the screenshot.
   ========================================================= */

.hnd2-honduras-hero p{
  max-width:720px !important;

  color:#405f6f !important;

  opacity:1 !important;

  font-size:13px !important;

  line-height:1.7 !important;

  font-weight:450 !important;

  text-shadow:none !important;
}



/* =========================================================
   HERO ACTIONS
   ========================================================= */

.hnd2-honduras-hero .hero-actions,
.hnd2-honduras-hero .hnd2-hero-actions{
  display:flex !important;

  align-items:center !important;

  gap:12px !important;

  margin-top:28px !important;
}



/* ---------------------------------------------------------
   PRIMARY CTA — same family as Start a Request
   --------------------------------------------------------- */

.hnd2-honduras-hero .hero-actions a:first-child,
.hnd2-honduras-hero .hnd2-hero-actions a:first-child{
  min-height:48px !important;

  padding:0 20px !important;

  display:inline-flex !important;

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

  gap:9px !important;

  border:
    1px solid #159dcc !important;

  border-radius:6px !important;

  color:#ffffff !important;

  background:
    linear-gradient(
      135deg,
      #1599ca 0%,
      #3db9dc 100%
    ) !important;

  box-shadow:
    0 10px 24px rgba(8,116,160,.18) !important;

  text-decoration:none !important;

  font-weight:850 !important;
}



/* ---------------------------------------------------------
   SECONDARY CTA
   Must NOT stay white on this bright background.
   --------------------------------------------------------- */

.hnd2-honduras-hero .hero-actions a:nth-child(2),
.hnd2-honduras-hero .hnd2-hero-actions a:nth-child(2){
  min-height:48px !important;

  padding:0 20px !important;

  display:inline-flex !important;

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

  gap:9px !important;

  border:
    1px solid rgba(8,72,101,.34) !important;

  border-radius:6px !important;

  color:#0a4965 !important;

  background:
    rgba(255,255,255,.76) !important;

  box-shadow:
    0 8px 20px rgba(7,69,96,.07) !important;

  text-decoration:none !important;

  font-weight:850 !important;

  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
}



/* =========================================================
   HOVER — GLOBAL CTA LANGUAGE
   ========================================================= */

.hnd2-honduras-hero .hero-actions a:first-child:hover,
.hnd2-honduras-hero .hnd2-hero-actions a:first-child:hover{
  transform:translateY(-3px) !important;

  border-color:#55d3ed !important;

  background:
    linear-gradient(
      135deg,
      #087fae,
      #22b5da
    ) !important;

  box-shadow:
    0 15px 28px rgba(5,111,153,.23) !important;
}


.hnd2-honduras-hero .hero-actions a:nth-child(2):hover,
.hnd2-honduras-hero .hnd2-hero-actions a:nth-child(2):hover{
  transform:translateY(-3px) !important;

  border-color:#149cca !important;

  color:#0878a3 !important;

  background:#ffffff !important;

  box-shadow:
    0 14px 28px rgba(6,81,111,.13) !important;
}



/* =========================================================
   REMOVE OLD WHITE-TEXT OVERRIDES
   ========================================================= */

.hnd2-honduras-hero .hero-actions a *,
.hnd2-honduras-hero .hnd2-hero-actions a *{
  opacity:1 !important;
}


.hnd2-honduras-hero .hero-actions a:first-child *,
.hnd2-honduras-hero .hnd2-hero-actions a:first-child *{
  color:#ffffff !important;
}


.hnd2-honduras-hero .hero-actions a:nth-child(2) *,
.hnd2-honduras-hero .hnd2-hero-actions a:nth-child(2) *{
  color:inherit !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .hnd2-honduras-hero::after{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.96),
        rgba(255,255,255,.84)
      ) !important;
  }

  .hnd2-honduras-hero .hero-actions,
  .hnd2-honduras-hero .hnd2-hero-actions{
    flex-wrap:wrap !important;
  }

  .hnd2-honduras-hero p{
    font-size:12px !important;
  }

}


/* =========================================================
   HONDURAS HERO — FINAL READABILITY / CTA / IMAGE REPAIR
   ========================================================= */

.hnd2-honduras-hero{
  position:relative !important;
  overflow:hidden !important;

  /* NEVER stretch the hero image */
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
}


/* ---------------------------------------------------------
   LEFT READABILITY FADE
   --------------------------------------------------------- */

.hnd2-honduras-hero::after{
  content:"" !important;

  position:absolute !important;
  inset:0 !important;

  z-index:1 !important;
  pointer-events:none !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.94) 17%,
      rgba(255,255,255,.80) 32%,
      rgba(255,255,255,.46) 47%,
      rgba(255,255,255,.12) 62%,
      transparent 74%
    ) !important;
}


.hnd2-honduras-hero > *,
.hnd2-honduras-hero .shell{
  position:relative !important;
  z-index:3 !important;
}



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

.hnd2-honduras-hero h1,
.hnd2-honduras-hero h2{
  color:#082d43 !important;
  text-shadow:none !important;
}


/* Honduras flag-state services */

.hnd2-honduras-hero .eyebrow,
.hnd2-honduras-hero .hnd2-eyebrow,
.hnd2-honduras-hero .hnd2-kicker{
  color:#36a8cf !important;
  opacity:1 !important;
  text-shadow:none !important;
}



/* ---------------------------------------------------------
   DESCRIPTION — FORCE READABLE DARK COPY
   --------------------------------------------------------- */

.hnd2-honduras-hero p{
  max-width:680px !important;

  margin-top:17px !important;

  color:#426270 !important;
  opacity:1 !important;

  font-size:12px !important;
  line-height:1.72 !important;
  font-weight:500 !important;

  text-shadow:none !important;

  background:none !important;
}


/* remove inherited white styling from nested text */

.hnd2-honduras-hero p *,
.hnd2-honduras-hero p span{
  color:inherit !important;
  background:none !important;
}



/* =========================================================
   HERO BUTTON ROW
   ========================================================= */

.hnd2-honduras-hero .hero-actions,
.hnd2-honduras-hero .hnd2-hero-actions{
  display:flex !important;
  align-items:center !important;

  gap:12px !important;

  margin-top:28px !important;
}



/* =========================================================
   EXPLORE COC REQUIREMENTS — PRIMARY
   ========================================================= */

.hnd2-honduras-hero a[href*="coc"],
.hnd2-honduras-hero a[href*="COC"]{
  min-height:48px !important;

  padding:0 20px !important;

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

  gap:9px !important;

  border:1px solid #159dcc !important;
  border-radius:6px !important;

  color:#ffffff !important;

  background:
    linear-gradient(
      135deg,
      #1599ca,
      #3eb9dc
    ) !important;

  box-shadow:
    0 10px 23px rgba(7,113,155,.18) !important;

  text-decoration:none !important;

  font-weight:850 !important;

  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .3s ease !important;
}



/* =========================================================
   START HONDURAS REQUEST — SECONDARY
   Direct href targeting avoids old class conflicts
   ========================================================= */

.hnd2-honduras-hero a[href="/service-request.html"]{
  min-height:48px !important;

  padding:0 20px !important;

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

  gap:9px !important;

  position:relative !important;
  overflow:hidden !important;

  border:
    1px solid rgba(9,87,118,.35) !important;

  border-radius:6px !important;

  color:#0a4c68 !important;

  background:
    rgba(255,255,255,.88) !important;

  box-shadow:
    0 9px 21px rgba(7,70,96,.08) !important;

  text-decoration:none !important;

  font-size:10px !important;
  font-weight:850 !important;

  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;

  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .3s ease !important;
}


.hnd2-honduras-hero a[href="/service-request.html"] *,
.hnd2-honduras-hero a[href="/service-request.html"] span{
  color:inherit !important;
  text-decoration:none !important;
}



/* ---------------------------------------------------------
   SECONDARY CTA SWEEP
   --------------------------------------------------------- */

.hnd2-honduras-hero a[href="/service-request.html"]::after{
  content:"";

  position:absolute;

  top:-30%;
  bottom:-30%;
  left:-42%;

  width:25%;

  pointer-events:none;

  transform:skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.78),
      transparent
    );

  transition:left .55s cubic-bezier(.22,1,.36,1);
}



/* =========================================================
   HOVERS
   ========================================================= */

.hnd2-honduras-hero a[href*="coc"]:hover,
.hnd2-honduras-hero a[href*="COC"]:hover{
  transform:translateY(-3px) !important;

  border-color:#63d9ef !important;

  background:
    linear-gradient(
      135deg,
      #087eac,
      #23b5da
    ) !important;

  box-shadow:
    0 15px 29px rgba(5,111,153,.23) !important;
}


.hnd2-honduras-hero a[href="/service-request.html"]:hover{
  transform:translateY(-3px) !important;

  border-color:#159dca !important;

  color:#087ca8 !important;

  background:#ffffff !important;

  box-shadow:
    0 14px 28px rgba(6,82,111,.14) !important;
}


.hnd2-honduras-hero a[href="/service-request.html"]:hover::after{
  left:120%;
}



/* =========================================================
   REMOVE ALL HERO LINK UNDERLINES
   ========================================================= */

.hnd2-honduras-hero a,
.hnd2-honduras-hero a:hover,
.hnd2-honduras-hero a:focus,
.hnd2-honduras-hero a:visited{
  text-decoration:none !important;
}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .hnd2-honduras-hero{
    background-position:62% center !important;
  }

  .hnd2-honduras-hero::after{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.97),
        rgba(255,255,255,.88)
      ) !important;
  }

  .hnd2-honduras-hero .hero-actions,
  .hnd2-honduras-hero .hnd2-hero-actions{
    flex-wrap:wrap !important;
  }

}


/* =========================================================
   HONDURAS — ACTUAL HERO FINAL FIX
   Permanent scope: .sl-hn-hero
   ========================================================= */

.sl-hn-hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;

  /* prevent image distortion */
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
}


/* also cover cases where image lives on a pseudo layer */

.sl-hn-hero::before{
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
}


/* any real hero image element */

.sl-hn-hero img{
  object-fit:cover !important;
}


/* =========================================================
   READABILITY GRADIENT
   ========================================================= */

.sl-hn-hero::after{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.95) 15%,
      rgba(255,255,255,.86) 28%,
      rgba(255,255,255,.58) 41%,
      rgba(255,255,255,.20) 55%,
      transparent 70%
    ) !important;
}


/* hero content above overlay */

.sl-hn-hero > *,
.sl-hn-hero .shell{
  position:relative !important;
  z-index:3 !important;
}


/* =========================================================
   TITLE + KICKER
   ========================================================= */

.sl-hn-hero h1,
.sl-hn-hero h2{
  color:#082d43 !important;
  text-shadow:none !important;
}


.sl-hn-hero .eyebrow,
.sl-hn-hero .hnd2-eyebrow,
.sl-hn-hero .hnd2-kicker{
  color:#34a7cf !important;
  opacity:1 !important;
  text-shadow:none !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.sl-hn-hero .sl-hn-hero-description{
  max-width:680px !important;

  margin-top:16px !important;

  color:#456573 !important;
  opacity:1 !important;

  font-size:12px !important;
  line-height:1.72 !important;
  font-weight:500 !important;

  text-shadow:none !important;

  background:transparent !important;
}


.sl-hn-hero .sl-hn-hero-description *,
.sl-hn-hero .sl-hn-hero-description span{
  color:inherit !important;
  background:transparent !important;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.sl-hn-hero .sl-hn-hero-primary{
  min-height:48px !important;

  padding:0 20px !important;

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

  gap:9px !important;

  border:1px solid #159dcc !important;
  border-radius:6px !important;

  color:#ffffff !important;

  background:
    linear-gradient(
      135deg,
      #1599ca,
      #3db9dc
    ) !important;

  box-shadow:
    0 10px 23px rgba(6,112,154,.19) !important;

  text-decoration:none !important;

  font-size:10px !important;
  font-weight:850 !important;

  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .3s ease !important;
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.sl-hn-hero .sl-hn-hero-secondary{
  min-height:48px !important;

  padding:0 20px !important;

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

  gap:9px !important;

  border:
    1px solid rgba(9,83,113,.35) !important;

  border-radius:6px !important;

  color:#0a4b66 !important;

  background:
    rgba(255,255,255,.88) !important;

  box-shadow:
    0 9px 21px rgba(6,68,95,.08) !important;

  text-decoration:none !important;

  font-size:10px !important;
  font-weight:850 !important;

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

  transition:
    transform .3s cubic-bezier(.22,1,.36,1),
    background .28s ease,
    border-color .28s ease,
    box-shadow .3s ease,
    color .28s ease !important;
}


/* remove inherited underlines */

.sl-hn-hero .sl-hn-hero-primary,
.sl-hn-hero .sl-hn-hero-secondary,
.sl-hn-hero .sl-hn-hero-primary *,
.sl-hn-hero .sl-hn-hero-secondary *{
  text-decoration:none !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.sl-hn-hero .sl-hn-hero-primary:hover{
  transform:translateY(-3px) !important;

  border-color:#64d9ef !important;

  background:
    linear-gradient(
      135deg,
      #087eac,
      #22b6da
    ) !important;

  box-shadow:
    0 15px 29px rgba(5,111,153,.23) !important;
}


.sl-hn-hero .sl-hn-hero-secondary:hover{
  transform:translateY(-3px) !important;

  border-color:#159dcc !important;

  color:#087ba6 !important;

  background:#ffffff !important;

  box-shadow:
    0 14px 28px rgba(6,82,111,.14) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:700px){

  .sl-hn-hero{
    background-position:62% center !important;
  }

  .sl-hn-hero::after{
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.97),
        rgba(255,255,255,.87)
      ) !important;
  }

}