/* Shared course family — Hull measured hierarchy, ICE identity. */

/* The header, footer and global sticky CTA remain on the global type system. */
.page-course main,
.page-course .subnav{
  font-family:var(--hs-font-sans);
}

.page-course main{
  --course-rule:var(--hairline);
  --course-paper:var(--bg);
  --course-surface:var(--card);
  --course-tint:var(--band-bg);
  --course-ink:var(--navy);
  --course-copy:var(--slate);
  overflow:clip;
  background:var(--course-paper);
  color:var(--course-copy);
  font-size:var(--hs-body-size);
  font-weight:450;
  line-height:var(--hs-body-line);
}

.page-course main h3,
.page-course main h4,
.page-course main button,
.page-course main a{
  font-family:var(--hs-font-sans);
}

.page-course main{
  --course-display:var(--hs-font-display);
}

.page-course main h1,
.page-course main h2{
  font-family:var(--course-display);
}

.page-course main h1,
.page-course main h2,
.page-course main h3,
.page-course main h4{
  color:var(--course-ink);
}

/* .scholar is a dark navy accent card (site.css) — its heading stays white
   even under the blanket page-course heading-color rule above. */
.page-course main .scholar h3{
  color:#fff;
}

.page-course main .course-kicker,
.page-course main .course-eyebrow{
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-16);
  color:var(--terracotta);
  font-size:var(--hs-eyebrow-size);
  font-weight:600;
  letter-spacing:var(--hs-eyebrow-track);
  line-height:var(--hs-eyebrow-line);
}

/* ---------- Course hero ---------- */
.page-course main .course-hero{
  position:relative;
  padding:var(--hs-hero-pad-top-mobile) var(--hs-space-0) var(--hs-space-44);
  color:#fff;
  background:var(--navy-deep);
}

.page-course main .course-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:var(--hs-accent-rule);
  background:var(--hs-hero-accent-gradient);
}

.page-course main .course-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-36);
}

.page-course main .course-hero__copy{min-width:0}

.page-course main .course-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:var(--hs-space-7) var(--hs-space-9);
  margin-bottom:var(--hs-space-34);
  color:rgba(255,255,255,.72);
  font-size:var(--hs-breadcrumb-size);
  font-weight:500;
  line-height:var(--hs-breadcrumb-line);
}

.page-course main .course-breadcrumb a{
  color:inherit;
  text-decoration:none;
}

.page-course main .course-breadcrumb a:hover{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:var(--hs-space-4);
}

.page-course main .course-eyebrow{color:var(--terracotta-soft)}

.page-course main .course-hero h1{
  max-width:var(--hs-measure-h1);
  margin:var(--hs-space-0);
  color:#fff;
  font-family:var(--course-display);
  font-size:var(--hs-display-h1-size);
  font-weight:400;
  letter-spacing:var(--hs-display-h1-track);
  line-height:var(--hs-display-h1-line);
  text-wrap:balance;
}

.page-course main .course-hero h1 span{
  color:var(--terracotta-soft);
  white-space:nowrap;
}

.page-course main .course-hero__lede{
  max-width:var(--hs-measure-lede);
  margin:var(--hs-space-24) var(--hs-space-0) var(--hs-space-0);
  color:rgba(255,255,255,.84);
  font-size:var(--hs-lede-size);
  line-height:var(--hs-lede-line);
}

.page-course main .course-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--hs-space-16) var(--hs-space-24);
  margin:var(--hs-space-32) var(--hs-space-0) var(--hs-space-0);
}

.page-course main .course-facts div{
  min-width:0;
  padding-left:var(--hs-space-16);
  border-left:var(--hs-rule) solid rgba(255,255,255,.3);
}

.page-course main .course-facts div:nth-child(odd){padding-left:var(--hs-space-0);border-left:0}

.page-course main .course-facts dt{
  margin-bottom:var(--hs-space-5);
  color:rgba(255,255,255,.58);
  font-size:var(--hs-small-size);
  font-weight:600;
  letter-spacing:var(--hs-track-wide-75);
  text-transform:uppercase;
}

.page-course main .course-facts dd{
  color:#fff;
  font-size:var(--hs-body-size);
  font-weight:600;
  line-height:var(--hs-leading-125);
}

.page-course main .course-intake{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--hs-space-10);
  margin-top:var(--hs-space-26);
}

.page-course main .course-intake div{
  min-width:0;
  padding:var(--hs-space-13) var(--hs-space-16);
  background:rgba(255,255,255,.08);
  border:var(--hs-rule) solid rgba(255,255,255,.16);
}

.page-course main .course-intake span,
.page-course main .course-intake strong{display:block}

.page-course main .course-intake span{
  margin-bottom:var(--hs-space-3);
  color:rgba(255,255,255,.58);
  font-size:var(--hs-small-size);
  font-weight:600;
  letter-spacing:var(--hs-track-wide-4);
  text-transform:uppercase;
}

.page-course main .course-intake strong{
  color:#fff;
  font-size:var(--hs-compact-size);
  font-weight:500;
  line-height:var(--hs-leading-135);
}

.page-course main .course-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--hs-space-10);
  margin-top:var(--hs-space-30);
}

/* ---------- Post-hero quote band ---------- */
.page-course main .course-hero-quote{
  padding:var(--hs-space-fluid-28-44) var(--hs-space-0);
  background:var(--course-surface);
  border-bottom:var(--hs-rule) solid var(--course-rule);
}

.page-course main .course-hero-quote blockquote{
  max-width:var(--hs-measure-quote);
  margin:var(--hs-space-0);
  color:var(--course-ink);
  font-family:var(--course-display);
  font-size:var(--hs-section-h3-size);
  font-style:normal;
  line-height:var(--hs-leading-150);
}

.page-course main .course-hero-quote blockquote em{
  color:var(--crimson);
  font-style:italic;
}

.page-course main .course-hero__media{
  position:relative;
  min-width:0;
  margin:var(--hs-space-0);
  align-self:end;
  background:var(--navy-ink);
}

.page-course main .course-hero__media picture,
.page-course main .course-hero__media img{
  display:block;
  width:var(--hs-size-full);
}

.page-course main .course-hero__media img{
  height:var(--hs-size-auto);
  aspect-ratio:var(--hs-ratio-course-hero);
  object-fit:cover;
}

.page-course main .course-hero__media figcaption{
  display:grid;
  gap:var(--hs-space-5);
  padding:var(--hs-space-16) var(--hs-space-18) var(--hs-space-18);
  background:var(--course-surface);
  color:var(--course-copy);
}

.page-course main .course-hero__media figcaption span{
  color:var(--terracotta);
  font-size:var(--hs-small-size);
  font-weight:600;
}

.page-course main .course-hero__media figcaption strong{
  color:var(--course-ink);
  font-size:var(--hs-compact-size);
  font-weight:500;
  line-height:var(--hs-leading-145);
}

/* ---------- Immediate actions (inline in hero or any section) ---------- */
.page-course main .course-action{
  min-height:var(--hs-cta-min);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--hs-space-14);
  padding:var(--hs-space-14) var(--hs-space-22);
  overflow:hidden;
  /* Default: navy border + ink colour — visible on any light background */
  border:2px solid var(--navy);
  color:var(--navy);
  background:transparent;
  font-size:var(--hs-button-size);
  font-weight:700;
  letter-spacing:var(--hs-button-track);
  line-height:var(--hs-button-line);
  text-decoration:none;
  transition:color var(--hs-dur-action) var(--hs-ease),border-color var(--hs-dur-action) var(--hs-ease),background var(--hs-dur-action) var(--hs-ease);
}

.page-course main .course-action span{font-size:var(--hs-icon-type-size);letter-spacing:var(--hs-track-none)}

/* Light-context hover: fill navy */
.page-course main .course-action:hover{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}

.page-course main .course-action::before{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(var(--hs-sweep-offstage));
  background:var(--navy);
  transition:transform var(--hs-dur-action) var(--hs-ease);
  z-index:-1;
}

.page-course main .course-action:hover::before{transform:translateX(0)}

/* Inside the dark course-hero: flip to white border + white text */
.page-course main .course-hero .course-action{
  border-color:rgba(255,255,255,.5);
  color:#fff;
  background:transparent;
}

.page-course main .course-hero .course-action:hover{
  color:var(--navy-deep);
  background:transparent;
  border-color:rgba(255,255,255,.5);
}

.page-course main .course-hero .course-action::before{
  background:#fff;
}

.page-course main .course-action--primary{
  justify-content:space-between;
  border:2px solid var(--crimson);
  background:var(--crimson);
  color:var(--accent-ink);
}

.page-course main .course-action--primary::before{background:var(--navy-deep)}

.page-course main .course-action--primary:hover{
  border-color:var(--navy-deep);
  color:#fff;
  background:transparent;
}

/* --link variant: underline-only, no box */
.page-course main .course-action--link{
  min-height:var(--hs-control-min);
  border:0;
  padding:var(--hs-space-11) var(--hs-space-0);
  color:var(--navy);
  background:transparent;
  font-size:var(--hs-compact-size);
  font-weight:600;
  letter-spacing:var(--hs-track-none);
  text-decoration:underline;
  text-decoration-color:rgba(14,22,71,.35);
  text-underline-offset:var(--hs-space-4);
}

.page-course main .course-action--link::before{display:none}

.page-course main .course-action--link:hover{
  color:var(--navy);
  background:transparent;
  text-decoration-color:var(--navy);
}

/* --link inside dark hero: white underline */
.page-course main .course-hero .course-action--link{
  color:#fff;
  text-decoration-color:rgba(255,255,255,.4);
}

.page-course main .course-hero .course-action--link:hover{
  color:#fff;
  text-decoration-color:#fff;
}

/* ---------- Highlight strip (post-hero) ---------- */
.page-course main .course-highlights{
  padding:var(--hs-space-22) var(--hs-space-0);
  background:var(--course-surface);
  border-bottom:var(--hs-rule) solid var(--course-rule);
}

.page-course main .course-highlights__row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-18);
}

.page-course main .course-highlight{
  display:flex;
  align-items:baseline;
  gap:var(--hs-space-12);
}

.page-course main .course-highlight span{
  color:var(--terracotta);
  font-size:var(--hs-small-size);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.page-course main .course-highlight p{
  margin:var(--hs-space-0);
  color:var(--course-ink);
  font-size:var(--hs-compact-size);
  font-weight:500;
  line-height:var(--hs-leading-140);
}

/* ---------- Sticky local navigation ---------- */
.page-course .subnav{
  position:sticky;
  top:var(--nav-main-h);
  z-index:40;
  border-bottom:var(--hs-rule) solid var(--course-rule,var(--hairline));
  background:var(--card);
}

@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))) and (background:color-mix(in srgb,red 50%,blue)){
  .page-course .subnav{
    background:color-mix(in srgb,var(--card) var(--hs-glass-mix),transparent);
    -webkit-backdrop-filter:blur(var(--hs-glass-blur)) saturate(var(--hs-glass-saturation));
    backdrop-filter:blur(var(--hs-glass-blur)) saturate(var(--hs-glass-saturation));
  }
}

.page-course .subnav .wrap{
  display:flex;
  align-items:center;
  gap:var(--hs-space-0);
  overflow-x:auto;
  scrollbar-width:none;
}

.page-course .subnav .wrap::-webkit-scrollbar{display:none}

.page-course .subnav a{
  min-height:var(--hs-subnav-height);
  display:inline-flex;
  align-items:center;
  flex:none;
  padding:var(--hs-space-13) var(--hs-space-14);
  border-bottom:var(--hs-rule-active) solid transparent;
  color:var(--slate);
  font-size:var(--hs-button-size);
  font-weight:500;
  line-height:var(--hs-button-line);
  text-decoration:none;
}

.page-course .subnav a:hover,
.page-course .subnav a.on{
  border-bottom-color:var(--crimson);
  color:var(--navy);
}

.page-course .subnav .apply-mini{
  margin-left:auto;
  border:0;
  background:var(--crimson);
  color:var(--accent-ink);
  font-weight:700;
}

.page-course .subnav .apply-mini:hover{
  border:0;
  background:var(--crimson-hover);
  color:var(--accent-ink);
}

/* ---------- Shared section language ---------- */
.page-course main .course-section{
  padding:var(--hs-section-course-large) var(--hs-space-0);
  background:var(--course-paper);
}

.page-course main .course-section--tint{background:var(--course-tint)}

.page-course main .course-section__heading{max-width:var(--hs-measure-heading)}

.page-course main .course-section__heading h2,
.page-course main .career-heading h2,
.page-course main .course-apply h2{
  margin:var(--hs-space-0);
  font-size:var(--hs-feature-h2-size);
  font-weight:500;
  letter-spacing:var(--hs-feature-h2-track);
  line-height:var(--hs-feature-h2-line);
  text-wrap:balance;
}

.page-course main .course-section__heading>p:not(.course-kicker){
  max-width:var(--hs-measure-prose);
  margin:var(--hs-space-20) var(--hs-space-0) var(--hs-space-0);
  font-size:var(--hs-body-size);
  line-height:var(--hs-body-line);
}

.page-course main .course-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-36);
}

.page-course main .course-pull-quote{
  align-self:start;
  margin:var(--hs-space-0);
  padding:var(--hs-space-0);
  color:var(--crimson);
  font-family:var(--course-display);
  font-size:var(--hs-pull-quote-size);
  font-weight:400;
  font-style:normal;
  letter-spacing:var(--hs-track-tight-10);
  line-height:var(--hs-pull-quote-line);
  text-wrap:balance;
}

.page-course main .course-pull-quote em{
  color:inherit;
  font-style:italic;
}

.page-course main .course-intro-copy{max-width:var(--hs-measure-prose-wide)}

.page-course main .course-intro-copy p{
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-22);
  font-size:var(--hs-body-size);
  line-height:var(--hs-body-line);
}

.page-course main .course-intro-copy .course-lede{
  color:var(--course-ink);
  font-size:var(--hs-lede-size);
  font-weight:500;
  line-height:var(--hs-lede-line);
}

.page-course main .career-card>span{
  display:block;
  margin-bottom:var(--hs-space-26);
  color:var(--terracotta);
  font-size:var(--hs-small-size);
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.page-course main .career-card h3{
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-9);
  font-size:var(--hs-section-h3-size);
  font-weight:600;
  letter-spacing:var(--hs-track-tight-10);
  line-height:var(--hs-leading-120);
}

.page-course main .career-card p{
  max-width:var(--hs-measure-card);
  margin:var(--hs-space-0);
  font-size:var(--hs-body-size);
  line-height:var(--hs-leading-155);
}

/* ---------- Curriculum ---------- */
.page-course main .curriculum-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-40);
}

.page-course main .curriculum-years{
  border-top:var(--hs-rule-active) solid var(--course-ink);
}

.page-course main .year-block{
  border-bottom:var(--hs-rule) solid var(--course-ink);
}

.page-course main .year-block summary{
  min-height:var(--hs-space-76);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--hs-space-24);
  padding:var(--hs-space-18) var(--hs-space-52) var(--hs-space-18) var(--hs-space-0);
  cursor:pointer;
  list-style:none;
  color:var(--course-ink);
}

.page-course main .year-block summary::-webkit-details-marker{display:none}

.page-course main .year-block summary span,
.page-course main .year-block summary b,
.page-course main .year-block summary small{display:block}

.page-course main .year-block summary b{
  font-size:var(--hs-section-h3-size);
  font-weight:600;
  line-height:var(--hs-leading-120);
}

.page-course main .year-block summary small{
  margin-top:var(--hs-space-4);
  color:var(--course-copy);
  font-size:var(--hs-button-size);
  font-weight:450;
  line-height:var(--hs-leading-135);
}

.page-course main .year-block summary i,
.page-course main .course-faq summary i{
  position:absolute;
  right:var(--hs-space-6);
  top:var(--hs-position-center);
  width:var(--hs-icon-size);
  height:var(--hs-icon-size);
  transform:translateY(-50%);
}

.page-course main .year-block summary i::before,
.page-course main .year-block summary i::after,
.page-course main .course-faq summary i::before,
.page-course main .course-faq summary i::after{
  content:"";
  position:absolute;
  left:var(--hs-position-center);
  top:var(--hs-position-center);
  width:var(--hs-mark-size);
  height:var(--hs-rule);
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform var(--hs-dur-fast) var(--hs-ease);
}

.page-course main .year-block summary i::after,
.page-course main .course-faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}

.page-course main .year-block[open] summary i::after,
.page-course main .course-faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}

.page-course main .year-block__content{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-24);
  padding:var(--hs-space-8) var(--hs-space-0) var(--hs-space-32);
}

.page-course main .semester-panel{
  min-width:0;
  padding-top:var(--hs-space-18);
  border-top:var(--hs-rule) solid var(--terracotta);
}

.page-course main .semester-panel h3{
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-14);
  font-size:var(--hs-card-h4-size);
  font-weight:600;
  line-height:var(--hs-leading-125);
}

.page-course main .mod-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-10);
}

.page-course main .mod-card{
  min-width:0;
  padding:var(--hs-space-14) var(--hs-space-14) var(--hs-space-16);
  background:var(--course-surface);
  border:var(--hs-rule) solid var(--course-rule);
  color:var(--course-ink);
  font-size:var(--hs-compact-size);
  font-weight:500;
  line-height:var(--hs-leading-140);
}

.page-course main .mod-badge{
  display:inline-block;
  margin-bottom:var(--hs-space-9);
  padding:var(--hs-space-3) var(--hs-space-8);
  background:var(--band-bg);
  color:var(--course-copy);
  font-size:var(--hs-small-size);
  font-weight:700;
  letter-spacing:var(--hs-track-wide-4);
  text-transform:uppercase;
}

.page-course main .mod-badge--elective{background:var(--terracotta-soft);color:var(--navy-deep)}
.page-course main .mod-badge--field{background:var(--crimson-soft);color:var(--crimson)}

.page-course main .course-note{
  max-width:var(--hs-measure-course-copy);
  margin:var(--hs-space-0);
  color:var(--course-copy);
  font-size:var(--hs-meta-size);
  line-height:var(--hs-leading-155);
}

/* ---------- Facilities: list + single large photo ---------- */
.page-course main .facility-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-40);
}

.page-course main .facility-list{
  border-top:var(--hs-rule-active) solid var(--course-ink);
}

.page-course main .facility-list li{
  padding:var(--hs-space-20) var(--hs-space-0);
  border-bottom:var(--hs-rule) solid var(--course-rule);
}

.page-course main .facility-list h3{
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-6);
  font-size:var(--hs-section-h3-size);
  font-weight:600;
  letter-spacing:var(--hs-track-tight-8);
  line-height:var(--hs-leading-125);
}

.page-course main .facility-list p{
  max-width:var(--hs-measure-facility);
  margin:var(--hs-space-0);
  color:var(--course-copy);
  font-size:var(--hs-compact-size);
  line-height:var(--hs-leading-150);
}

.page-course main .facility-photo{
  min-width:0;
  margin:var(--hs-space-0);
  background:var(--navy-ink);
}

.page-course main .facility-photo picture,
.page-course main .facility-photo img{display:block;width:var(--hs-size-full)}

.page-course main .facility-photo img{
  height:var(--hs-size-auto);
  aspect-ratio:var(--hs-ratio-card);
  object-fit:cover;
}

.page-course main .facility-photo figcaption{
  padding:var(--hs-space-14) var(--hs-space-16);
  border:var(--hs-rule) solid var(--course-rule);
  border-top:0;
  background:var(--course-surface);
  color:var(--course-copy);
  font-size:var(--hs-meta-size);
  line-height:var(--hs-leading-145);
}

.page-course main .course-text-link{
  min-height:var(--hs-control-min);
  display:inline-flex;
  align-items:center;
  gap:var(--hs-space-22);
  margin-top:var(--hs-space-fluid-28-40);
  padding:var(--hs-space-8) var(--hs-space-0);
  border-bottom:var(--hs-rule) solid currentColor;
  color:var(--course-ink);
  font-size:var(--hs-compact-size);
  font-weight:600;
  text-decoration:none;
}

.page-course main .course-text-link:hover{color:var(--crimson)}

/* ---------- Promo band (survey video) ---------- */
.page-course main .course-promo{
  padding:var(--hs-space-fluid-56-88) var(--hs-space-0);
  background:var(--hull-blue);
}

.page-course main .course-promo__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-32);
  align-items:center;
}

.page-course main .course-promo .course-kicker{color:var(--hull-lime)}

.page-course main .course-promo h2{
  margin:var(--hs-space-0);
  max-width:var(--hs-measure-promo-heading);
  color:#fff;
  font-size:var(--hs-feature-h2-size);
  font-weight:400;
  letter-spacing:var(--hs-track-tight-20);
  line-height:var(--hs-leading-115);
  text-wrap:balance;
}

.page-course main .course-promo__copy p:not(.course-kicker){
  max-width:var(--hs-measure-promo-copy);
  margin:var(--hs-space-16) var(--hs-space-0) var(--hs-space-0);
  color:rgba(255,255,255,.88);
  font-size:var(--hs-body-size);
  line-height:var(--hs-leading-155);
}

.page-course main .course-promo__media{
  min-width:0;
  margin:var(--hs-space-0);
  box-shadow:var(--hs-promo-shadow);
}

.page-course main .course-promo__media video,
.page-course main .course-promo__media img{
  display:block;
  width:var(--hs-size-full);
  aspect-ratio:var(--hs-ratio-promo);
  object-fit:cover;
  background:var(--navy-ink);
}

/* ---------- Future prospects ---------- */
.page-course main .career-band{
  position:relative;
  color:#fff;
  background-image:url("/media/ice-intake/survey-camp-briefing-1920.webp");
  background-size:cover;
  background-position:center;
}

.page-course main .career-band::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hs-career-overlay);
}

.page-course main .career-band>.wrap{position:relative}

@supports (background-image:image-set(url(a) 1x)){
  .page-course main .career-band{
    background-image:image-set(
      url("/media/ice-intake/survey-camp-briefing-1920.avif") type("image/avif"),
      url("/media/ice-intake/survey-camp-briefing-1920.webp") type("image/webp")
    );
  }

  .page-computer main .career-band{
    background-image:image-set(
      url("/media/ice-intake/computer-lab-class-b-1920.avif") type("image/avif"),
      url("/media/ice-intake/computer-lab-class-b-1920.webp") type("image/webp")
    );
  }

  .page-electronics main .career-band{
    background-image:image-set(
      url("/media/ice-intake/electronics-bench-team-1920.avif") type("image/avif"),
      url("/media/ice-intake/electronics-bench-team-1920.webp") type("image/webp")
    );
  }
}

.page-computer main .career-band{background-image:url("/media/ice-intake/computer-lab-class-b-1920.webp")}
.page-electronics main .career-band{background-image:url("/media/ice-intake/electronics-bench-team-1920.webp")}
.page-home main .career-band{background-image:none;background-color:var(--navy-deep)}

.page-course main .career-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-24);
}

.page-course main .career-heading h2{color:#fff}

.page-course main .career-heading>p{
  max-width:var(--hs-measure-career-copy);
  margin:var(--hs-space-0);
  color:rgba(255,255,255,.74);
  font-size:var(--hs-body-size);
  line-height:var(--hs-leading-160);
}

/* Homepage-only: "Projects & Practical Learning" is a bespoke composition on
   the dark .career-band field (image + stacked heading + highlights list +
   ghost CTA) rather than the course pages' .career-grid card layout, so it
   needs its own light-on-navy treatment, vertical rhythm and image framing —
   owner-specified pass, 2026-07-13. */
.page-home main .career-band .media-row{
  /* Stretch (not start) — the text column's real height varies with content/
     viewport, so the image must fill exactly that height, not stop short of
     it and leave dead space below. */
  align-items:stretch;
}
.page-home main .career-band .media-frame{
  display:flex;
  flex-direction:column;
  gap:var(--hs-space-16);
  height:100%;
  border:0;
  box-shadow:none;
}
.page-home main .career-band .media-frame__glass{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  padding:var(--hs-space-20);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:rgba(255,255,255,.05);
  box-shadow:0 24px 60px rgba(3,9,26,.45);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.page-home main .career-band .media-frame__glass .ice-picture{
  display:block;
  flex:1 1 auto;
  min-height:0;
  aspect-ratio:auto;
  border-radius:14px;
  overflow:hidden;
}
.page-home main .career-band .media-frame__glass img{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
}
.page-home main .career-band .media-frame>figcaption{
  display:flex;
  align-items:flex-start;
  gap:var(--hs-space-8);
  padding:var(--hs-space-0);
  background:transparent;
  color:rgba(255,255,255,.68);
}
.page-home main .career-band .media-frame>figcaption::before{
  content:"";
  flex:none;
  width:8px;
  height:8px;
  margin-top:7px;
  border-radius:50%;
  background:var(--hull-blue-light);
  box-shadow:0 0 8px 2px rgba(130,218,244,.7);
}
.page-home main .career-band .career-heading{
  /* Stack headline over lede instead of the course pages' side-by-side
     6fr/5fr split — reads as one hierarchical block, not two columns. */
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-16);
  margin-bottom:var(--hs-space-32);
}
.page-home main .career-band .course-kicker{color:var(--hull-blue-light)}
.page-home main .career-band .highlights{
  margin-top:var(--hs-space-0);
  padding-block:var(--hs-space-16);
  border-top-color:rgba(255,255,255,.14);
}
.page-home main .career-band .highlights li{
  align-items:flex-start;
  padding-block:var(--hs-space-22);
  border-bottom-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.74);
}
.page-home main .career-band .highlights li b{color:#fff}
.page-home main .career-band .highlights li::before{
  content:"";
  flex:none;
  width:22px;
  height:22px;
  margin-top:2px;
  border-radius:50%;
  border:2px solid var(--hull-blue-light);
  background:rgba(130,218,244,.14);
  box-shadow:0 0 10px 2px rgba(130,218,244,.55),inset 0 0 6px rgba(130,218,244,.35);
}
.page-home main .career-band .cta-row{
  margin-top:var(--hs-space-32);
}
.page-home main .career-band .btn-ghost{
  border:none;
  color:var(--hull-blue-dark);
  background:var(--hull-blue-light);
  box-shadow:0 0 28px 4px rgba(130,218,244,.45);
}
.page-home main .career-band .btn-ghost:hover{
  background:#fff;
  color:var(--hull-blue-dark);
  box-shadow:0 0 36px 6px rgba(130,218,244,.6);
}

.page-course main .career-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  margin-top:var(--hs-space-fluid-28-44);
  border-top:var(--hs-rule) solid rgba(255,255,255,.42);
}

.page-course main .career-card{
  min-width:0;
  padding:var(--hs-space-26) var(--hs-space-0);
  border-bottom:var(--hs-rule) solid rgba(255,255,255,.2);
}

.page-course main .career-card h3{color:#fff}
.page-course main .career-card p{color:rgba(255,255,255,.7)}
.page-course main .career-card>span{color:var(--terracotta-soft)}

/* ---------- FAQ ---------- */
.page-course main .faq-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-40);
}

.page-course main .course-faq{border-top:var(--hs-rule-active) solid var(--course-ink)}

.page-course main .course-faq details{border-bottom:var(--hs-rule) solid var(--course-rule)}

.page-course main .course-faq summary{
  min-height:var(--hs-space-72);
  position:relative;
  padding:var(--hs-space-20) var(--hs-space-48) var(--hs-space-20) var(--hs-space-0);
  cursor:pointer;
  list-style:none;
  color:var(--course-ink);
  font-size:var(--hs-section-h3-size);
  font-weight:600;
  line-height:var(--hs-leading-128);
}

.page-course main .course-faq summary::-webkit-details-marker{display:none}

.page-course main .stat-card{
  margin-top:var(--hs-space-fluid-28-40);
  padding:var(--hs-space-22) var(--hs-space-24);
  max-width:var(--hs-measure-stat);
  background:var(--crimson-soft);
}

.page-course main .stat-card span{
  display:block;
  margin-bottom:var(--hs-space-6);
  color:var(--crimson);
  font-size:var(--hs-small-size);
  font-weight:700;
  letter-spacing:var(--hs-track-wide-3);
  text-transform:uppercase;
}

.page-course main .stat-card strong{
  display:block;
  color:var(--navy-deep);
  font-size:var(--hs-stat-size);
  font-weight:600;
  line-height:var(--hs-leading-110);
}

.page-course main .stat-card p{
  margin:var(--hs-space-8) var(--hs-space-0) var(--hs-space-0);
  color:var(--navy-deep);
  font-size:var(--hs-button-size);
  line-height:var(--hs-leading-140);
}

.page-course main .course-faq details>p{
  max-width:var(--hs-measure-faq);
  padding:var(--hs-space-0) var(--hs-space-48) var(--hs-space-22) var(--hs-space-0);
  color:var(--course-copy);
  font-size:var(--hs-body-size);
  line-height:var(--hs-leading-160);
}

/* ---------- Closing application band (Hull lime field, both themes) ---------- */
.page-course main .course-apply{
  padding:var(--hs-space-fluid-64-104) var(--hs-space-0);
  color:var(--hull-blue-dark);
  background:var(--hull-lime);
}

.page-course main .course-apply__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-30);
}

.page-course main .course-apply .course-kicker{color:var(--hull-blue-dark)}
.page-course main .course-apply h2{max-width:var(--hs-measure-apply-heading);color:var(--hull-blue-dark)}

.page-course main .course-apply__copy>p{
  max-width:var(--hs-measure-career-copy);
  margin:var(--hs-space-0);
  color:var(--hull-blue-dark);
  font-size:var(--hs-body-size);
  line-height:var(--hs-leading-160);
}

.page-course main .course-apply__actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--hs-space-10);
  margin-top:var(--hs-space-28);
}

.page-course main .course-apply__media{
  min-width:0;
  margin:var(--hs-space-0);
}

.page-course main .course-apply__media img{
  display:block;
  width:var(--hs-size-full);
  height:var(--hs-size-auto);
  aspect-ratio:4/3;
  object-fit:cover;
}

.page-course main .course-apply .course-action--primary{
  border-color:var(--hull-blue);
  background:var(--hull-blue);
  color:#fff;
}

.page-course main .course-apply .course-action--primary:hover{
  background:var(--hull-blue-dark);
  border-color:var(--hull-blue-dark);
  color:#fff;
}

.page-course main .course-action--light{
  border-color:rgba(14,22,71,.45);
  border-bottom-color:var(--hull-blue-dark);
  color:var(--hull-blue-dark);
}

.page-course main .course-action--light:hover{
  background:rgba(14,22,71,.08);
  color:var(--hull-blue-dark);
}

/* ---------- Program index rows (courses.astro) ---------- */
.page-course main .prog-list{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-1);
  margin-top:var(--hs-space-fluid-36-56);
  background:var(--course-rule);
  border:var(--hs-rule) solid var(--course-rule);
}

.page-course main .prog-row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-20);
  padding:var(--hs-space-22);
  background:var(--course-surface);
  text-decoration:none;
  color:var(--course-ink);
  transition:background var(--hs-dur-fast) var(--hs-ease);
}

.page-course main .prog-row:hover{background:var(--course-tint)}

.page-course main .prog-row__media{
  min-width:0;
  margin:var(--hs-space-0);
  background:var(--navy-ink);
}

.page-course main .prog-row__media img{
  display:block;
  width:var(--hs-size-full);
  height:var(--hs-size-auto);
  aspect-ratio:var(--hs-ratio-card);
  object-fit:cover;
}

.page-course main .prog-row__index{
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-10);
  color:var(--terracotta);
  font-size:var(--hs-small-size);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.page-course main .prog-row__code{
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-6);
  color:var(--terracotta);
  font-size:var(--hs-small-size);
  font-weight:600;
  letter-spacing:var(--hs-track-wide-4);
  text-transform:uppercase;
}

.page-course main .prog-row__body h3{
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-10);
  font-size:var(--hs-program-title-size);
  font-weight:500;
  letter-spacing:var(--hs-track-tight-10);
  line-height:var(--hs-leading-120);
}

.page-course main .prog-row__body>p{
  max-width:var(--hs-measure-program-copy);
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-16);
  color:var(--course-copy);
  font-size:var(--hs-compact-size);
  line-height:var(--hs-leading-155);
}

.page-course main .prog-row__meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--hs-space-20);
  margin-bottom:var(--hs-space-16);
}

.page-course main .prog-row__meta div{min-width:0}

.page-course main .prog-row__meta b{
  display:block;
  color:var(--course-ink);
  font-size:var(--hs-body-size);
  font-weight:600;
  line-height:var(--hs-leading-120);
}

.page-course main .prog-row__meta span{
  color:var(--course-copy);
  font-size:var(--hs-small-size);
}

.page-course main .prog-row__go{
  margin:var(--hs-space-0);
  color:var(--course-ink);
  font-size:var(--hs-button-size);
  font-weight:600;
}

/* ---------- Compare table ---------- */
.page-course main .course-compare{
  width:var(--hs-size-full);
  margin-top:var(--hs-space-fluid-36-56);
  border-collapse:collapse;
}

.page-course main .course-compare th,
.page-course main .course-compare td{
  padding:var(--hs-space-14) var(--hs-space-16) var(--hs-space-14) var(--hs-space-0);
  border-bottom:var(--hs-rule) solid var(--course-rule);
  text-align:left;
  vertical-align:top;
}

.page-course main .course-compare thead th{
  color:var(--course-copy);
  font-size:var(--hs-small-size);
  font-weight:700;
  letter-spacing:var(--hs-track-wide-6);
  text-transform:uppercase;
  border-bottom:var(--hs-rule-active) solid var(--course-ink);
}

.page-course main .course-compare tbody td{
  color:var(--course-copy);
  font-size:var(--hs-compact-size);
  line-height:var(--hs-leading-150);
}

.page-course main .course-compare tbody td b{
  display:block;
  color:var(--course-ink);
  font-size:var(--hs-body-size);
  font-weight:600;
}

/* ---------- Related courses ---------- */
.page-course main .related-courses{
  padding:var(--hs-space-fluid-56-88) var(--hs-space-0) var(--hs-space-fluid-72-104);
  background:var(--course-paper);
}

.page-course main .related-courses .course-kicker{margin-bottom:var(--hs-space-24)}

.page-course main .related-courses__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-1);
  background:var(--course-rule);
  border:var(--hs-rule) solid var(--course-rule);
}

.page-course main .related-course{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--hs-space-8);
  padding:var(--hs-space-26) var(--hs-space-24) var(--hs-space-28);
  background:var(--course-surface);
  color:var(--course-ink);
  text-decoration:none;
  transition:background var(--hs-dur-fast) var(--hs-ease);
}

.page-course main .related-course:hover{background:var(--course-tint)}

.page-course main .related-course__eyebrow{
  color:var(--terracotta);
  font-size:var(--hs-small-size);
  font-weight:600;
  letter-spacing:var(--hs-track-wide-3);
}

.page-course main .related-course h3{
  margin:var(--hs-space-0);
  font-size:var(--hs-related-title-size);
  font-weight:600;
  letter-spacing:var(--hs-track-tight-8);
  line-height:var(--hs-leading-125);
}

.page-course main .related-course p{
  max-width:var(--hs-measure-related-copy);
  margin:var(--hs-space-0);
  color:var(--course-copy);
  font-size:var(--hs-compact-size);
  line-height:var(--hs-leading-150);
}

.page-course main .related-course__link{
  margin-top:var(--hs-space-6);
  color:var(--course-ink);
  font-size:var(--hs-button-size);
  font-weight:600;
}

/* ---------- Responsive composition ---------- */
@media(min-width:640px){
  .page-course main .course-intake{grid-template-columns:1fr 1fr}
  .page-course main .career-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-course main .mod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-course main .course-highlights__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-course main .related-courses__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-course main .career-card:nth-child(odd){padding-right:var(--hs-space-28);border-right:var(--hs-rule) solid var(--course-rule)}
  .page-course main .career-card:nth-child(even){padding-left:var(--hs-space-28)}
  .page-course main .career-card:nth-child(odd){border-right-color:rgba(255,255,255,.2)}
  .page-course main .course-actions,
  .page-course main .course-apply__actions{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:var(--hs-space-14)}
  .page-course main .course-action{min-width:var(--hs-component-min)}
}

@media(min-width:768px){
  .page-course main .course-hero{padding-top:var(--hs-hero-pad-top-tablet);padding-bottom:var(--hs-space-64)}
  .page-course main .course-hero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"media copy";
    gap:var(--hs-gap-hero);
    align-items:end;
  }
  .page-course main .course-hero__copy{grid-area:copy}
  .page-course main .course-hero__media{grid-area:media;transform:none;z-index:2}
  .page-course main .course-intro-grid,
  .page-course main .faq-layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--hs-space-fluid-48-104);align-items:start}
  .page-course main .course-intro-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .page-course main .year-block__content{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hs-space-40)}
  .page-course main .facility-layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--hs-space-fluid-44-88);align-items:start}
  .page-course main .course-promo__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--hs-space-fluid-44-88);align-items:center}
  .page-course main .course-apply__grid{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    grid-template-areas:"head media" "copy media";
    gap:var(--hs-space-fluid-44-88);
    align-items:end;
  }
  .page-course main .course-apply__grid>div:first-child{grid-area:head;align-self:end}
  .page-course main .course-apply__copy{grid-area:copy;align-self:end}
  .page-course main .course-apply__media{grid-area:media;align-self:end}
  .page-course main .course-apply__grid:not(:has(.course-apply__media)){
    grid-template-areas:"head copy";
    grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  }
  .page-course main .course-apply__grid:not(:has(.course-apply__media))>.cta-row{grid-area:copy;align-self:end}
  .page-course main .prog-row{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--hs-space-32);align-items:center;padding:var(--hs-space-28)}
}

@media(min-width:1024px){
  .page-course main .course-hero{padding-bottom:var(--hs-space-0)}
  .page-course main .course-hero__copy{padding-bottom:var(--hs-space-72)}
  .page-course main .course-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hs-space-0)}
  .page-course main .course-facts div{padding-left:var(--hs-space-20);border-left:var(--hs-rule) solid rgba(255,255,255,.3)}
  .page-course main .course-facts div:first-child{padding-left:var(--hs-space-0);border-left:0}
  .page-course main .curriculum-shell{grid-template-columns:minmax(var(--hs-curriculum-rail-min),4fr) minmax(0,8fr);gap:var(--hs-space-fluid-56-112);align-items:start}
  .page-course main .course-note{grid-column:2}
  .page-course main .career-heading{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--hs-career-heading-gap);align-items:end}
  .page-course main .course-highlights__row{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hs-space-32)}
  .page-course main .career-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-course main .career-card,
  .page-course main .career-card:nth-child(odd),
  .page-course main .career-card:nth-child(even){padding:var(--hs-space-28);border-right:var(--hs-rule) solid var(--course-rule)}
  .page-course main .career-card:nth-child(3n+1){padding-left:var(--hs-space-0)}
  .page-course main .career-card:nth-child(3n){padding-right:var(--hs-space-0);border-right:0}
  .page-course main .career-card,
  .page-course main .career-card:nth-child(odd),
  .page-course main .career-card:nth-child(even){border-right-color:rgba(255,255,255,.2)}
}

@media(min-width:1181px){
  .page-course .subnav{top:var(--nav-main-h)}
  .page-course main .course-hero{padding-top:var(--hs-hero-pad-top-wide)}
}

@media(min-width:1280px){
  .page-course main .course-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--hs-gap-hero)}
}

@media(max-width:639px){
  .page-course main .course-apply{padding-bottom:var(--hs-space-92)}
}

@media(max-width:767px){
  .page-course main .course-hero__media picture{
    width:calc(100% - (var(--hs-hero-media-bleed) * 2));
    margin-inline:var(--hs-hero-media-bleed);
  }
}

@media(prefers-reduced-motion:reduce){
  .page-course main .course-hero__media{transform:none}
}

/* ---------- Phase 7: course-system bridge for re-sequenced routes ----------
   These selectors give the existing ICE content modules the Pure Strain's
   typography, geometry, rule-led treatment, and breakpoint behavior while
   page markup is progressively assigned the canonical course class names. */
.page-resequenced main{
  overflow:clip;
  background:var(--course-paper);
  color:var(--course-copy);
}
.page-resequenced main .section-anchor{display:block;height:0;scroll-margin-top:calc(var(--nav-main-h) + var(--hs-subnav-height))}

.page-resequenced main .page-hero{
  display:block;
  min-height:0;
  padding:var(--hs-hero-pad-top-mobile) var(--hs-space-0) var(--hs-space-44);
  overflow:clip;
  color:#fff;
  background:var(--navy-deep);
}
.page-resequenced main .page-hero::after{
  content:"";
  position:absolute;
  inset:auto var(--hs-space-0) var(--hs-space-0) var(--hs-space-0);
  height:var(--hs-accent-rule);
  background:var(--hs-hero-accent-gradient);
}
.page-resequenced main .page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-36);
  align-items:end;
}
.page-resequenced main .page-hero-grid::after{display:none}
.page-resequenced main .page-hero-grid>div:first-child{min-width:0}
.page-resequenced main .page-hero-grid:not(:has(.editorial-hero-media))>div:first-child{
  max-width:var(--hs-measure-heading);
}
.page-resequenced main .page-hero .crumb{
  display:flex;
  flex-wrap:wrap;
  gap:var(--hs-space-7) var(--hs-space-9);
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-30);
  color:rgba(255,255,255,.72);
  font-size:var(--hs-breadcrumb-size);
  font-weight:500;
  line-height:var(--hs-breadcrumb-line);
}
.page-resequenced main .page-hero .course-eyebrow{
  margin-bottom:var(--hs-space-16);
  color:var(--terracotta-soft);
}
.page-resequenced main .page-hero h1{
  max-width:var(--hs-measure-h1);
  margin:var(--hs-space-0) var(--hs-space-0) var(--hs-space-24);
  color:#fff;
  font-size:var(--hs-display-h1-size);
  font-weight:400;
  letter-spacing:var(--hs-display-h1-track);
  line-height:var(--hs-display-h1-line);
}
.page-resequenced main .page-hero p.sub{
  max-width:var(--hs-measure-lede);
  color:rgba(255,255,255,.78);
  font-size:var(--hs-lede-size);
  font-weight:500;
  line-height:var(--hs-lede-line);
}
.page-resequenced main .page-hero .facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--hs-space-16) var(--hs-space-24);
  margin-top:var(--hs-space-30);
}
.page-resequenced main .page-hero .facts>div{
  min-width:0;
  margin:0;
  padding:var(--hs-space-0) var(--hs-space-0) var(--hs-space-0) var(--hs-space-16);
  border-left:var(--hs-rule) solid rgba(255,255,255,.3);
}
.page-resequenced main .page-hero .facts>div:nth-child(odd){padding-left:0;border-left:0}
.page-resequenced main .page-hero .facts b{
  font-family:var(--hs-font-sans);
  font-size:var(--hs-body-size);
  font-weight:600;
  letter-spacing:normal;
  line-height:var(--hs-leading-125);
}
.page-resequenced main .page-hero .facts span{
  font-size:var(--hs-small-size);
  line-height:var(--hs-small-line);
}
.page-resequenced main .page-hero .cta-row{margin-top:var(--hs-space-32)}
.page-resequenced main .editorial-hero-media{
  position:relative;
  align-self:end;
  margin:0;
  overflow:visible;
  background:var(--course-surface);
  box-shadow:none;
}
.page-resequenced main .editorial-hero-media picture{
  width:calc(100% - (var(--hs-hero-media-bleed) * 2));
  margin-inline:var(--hs-hero-media-bleed);
}
.page-resequenced main .editorial-hero-media img{
  width:100%;
  height:auto;
  aspect-ratio:var(--hs-ratio-course-hero);
  object-fit:cover;
}
.page-resequenced main .editorial-hero-media figcaption{
  padding:var(--hs-space-16) var(--hs-space-18) var(--hs-space-18);
  background:var(--course-surface);
  color:var(--course-ink);
  font-size:var(--hs-compact-size);
  font-weight:500;
  line-height:var(--hs-leading-145);
}
.page-resequenced main .lineart{display:none}

.page-resequenced main .trust-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-24);
  margin:0;
  padding:var(--hs-space-fluid-28-44) var(--gutter);
  background:var(--course-surface);
}
.page-resequenced main .trust-strip>div{
  padding:var(--hs-space-0) var(--hs-space-0) var(--hs-space-0) var(--hs-space-16);
  border:0;
  border-left:var(--hs-rule-active) solid var(--terracotta);
}
.page-resequenced main .trust-strip b{
  font-family:var(--hs-font-sans);
  font-size:var(--hs-compact-size);
  font-weight:600;
  line-height:var(--hs-leading-125);
}
.page-resequenced main .trust-strip span{
  margin-top:var(--hs-space-4);
  font-size:var(--hs-small-size);
  line-height:var(--hs-small-line);
}

.page-resequenced main>section:not(.hero):not(.course-hero):not(.statement):not(.career-band):not(.course-apply){
  padding:var(--hs-space-fluid-64-104) var(--hs-space-0);
}
.page-resequenced main .band{background:var(--course-tint)}
.page-resequenced main .sec-head{
  max-width:var(--hs-measure-heading);
  margin-bottom:var(--hs-space-fluid-36-56);
}
.page-resequenced main .sec-head .label{
  margin-bottom:var(--hs-space-16);
  color:var(--terracotta);
  font-size:var(--hs-eyebrow-size);
  font-weight:600;
  letter-spacing:var(--hs-eyebrow-track);
  line-height:var(--hs-eyebrow-line);
}
.page-resequenced main .sec-head h2,
.page-resequenced main .article-body h2{
  color:var(--course-ink);
  font-family:var(--course-display);
  font-size:var(--hs-feature-h2-size);
  font-weight:500;
  letter-spacing:var(--hs-feature-h2-track);
  line-height:var(--hs-feature-h2-line);
}
.page-resequenced main .sec-head h2::after{display:none}
.page-resequenced main .sec-head>p:not(.label){
  max-width:var(--hs-measure-lede);
  color:var(--course-copy);
  font-size:var(--hs-body-size);
  line-height:var(--hs-body-line);
}
.page-resequenced main .article-body{max-width:var(--hs-measure-prose-wide)}
.page-resequenced main .article-body p,
.page-resequenced main .article-body li{
  color:var(--course-copy);
  font-size:var(--hs-body-size);
  line-height:var(--hs-body-line);
}
.page-resequenced main .editorial-story__body>p:not(.label),
.page-resequenced main .seo-card>p:not(.label),
.page-resequenced main .source-note,
.page-resequenced main .fact-panel li,
.page-resequenced main .scholar p,
.page-resequenced main .job p,
.page-resequenced main .contact-card>p:not(.label){
  color:var(--course-copy);
  font-size:var(--hs-body-size);
  line-height:var(--hs-body-line);
}
/* .scholar is a dark navy accent card (site.css) — its body copy keeps the
   light-on-navy color from the base rule instead of the course-copy dark tone above. */
.page-resequenced main .scholar p{
  color:rgba(255,255,255,.8);
}
.page-resequenced main .article-body h3{
  font-size:var(--hs-section-h3-size);
  font-weight:600;
  line-height:var(--hs-section-h3-line);
}
.page-resequenced main .article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-fluid-48-104);
}
.page-resequenced main .article-aside{position:static}

.page-resequenced main .prog-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  border-top:var(--hs-rule-active) solid var(--course-ink);
}
.page-resequenced main .prog{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-24);
  padding:var(--hs-space-28) var(--hs-space-0);
  border:0;
  border-bottom:var(--hs-rule) solid var(--course-rule);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.page-resequenced main .prog:hover{background:var(--course-tint);transform:none}
.page-resequenced main .prog-photo{
  width:100%;
  height:auto;
  aspect-ratio:var(--hs-ratio-card);
  object-fit:cover;
}
.page-resequenced main .prog-body{padding:0}
.page-resequenced main .prog .code{
  color:var(--terracotta);
  font-size:var(--hs-eyebrow-size);
  font-weight:600;
  letter-spacing:var(--hs-eyebrow-track);
}
.page-resequenced main .prog h3{
  font-size:var(--hs-program-title-size);
  line-height:var(--hs-program-title-line);
}
.page-resequenced main .prog-body>p:not(.code):not(.go){
  max-width:var(--hs-measure-program-copy);
  font-size:var(--hs-body-size);
  line-height:var(--hs-body-line);
}
.page-resequenced main .prog .meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:var(--hs-space-24);
}
.page-resequenced main .prog .meta>div{
  padding-left:var(--hs-space-16);
  border-left:var(--hs-rule) solid var(--course-rule);
}
.page-resequenced main .prog .meta>div:first-child{padding-left:0;border-left:0}
.page-resequenced main .prog .meta b{
  font-family:var(--hs-font-sans);
  font-size:var(--hs-section-h3-size);
  font-weight:600;
}

.page-resequenced main .mini-steps,
.page-resequenced main .steps,
.page-resequenced main .highlights,
.page-resequenced main .notice-list,
.page-resequenced main .job-list,
.page-resequenced main .faq{
  border-top:var(--hs-rule-active) solid var(--course-ink);
}
.page-resequenced main .mini-steps>div,
.page-resequenced main .steps>li,
.page-resequenced main .highlights>li,
.page-resequenced main .notice-list>li,
.page-resequenced main .job,
.page-resequenced main .faq>details{
  border-bottom:var(--hs-rule) solid var(--course-rule);
}
.page-resequenced main .faq summary{
  min-height:var(--hs-space-72);
  padding:var(--hs-space-20) var(--hs-space-48) var(--hs-space-20) var(--hs-space-0);
  color:var(--course-ink);
  font-size:var(--hs-section-h3-size);
  font-weight:600;
  line-height:var(--hs-leading-128);
}
.page-resequenced main .faq details>p{
  max-width:var(--hs-measure-faq);
  padding:var(--hs-space-0) var(--hs-space-48) var(--hs-space-22) var(--hs-space-0);
  color:var(--course-copy);
  font-size:var(--hs-body-size);
  line-height:var(--hs-leading-160);
}

.page-resequenced main .seo-grid,
.page-resequenced main .editorial-story-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  border-top:var(--hs-rule-active) solid var(--course-ink);
}
.page-resequenced main .seo-card,
.page-resequenced main .editorial-story{
  padding:var(--hs-space-28) var(--hs-space-0);
  border:0;
  border-bottom:var(--hs-rule) solid var(--course-rule);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.page-resequenced main .seo-card:hover{transform:none;background:var(--course-tint)}
.page-resequenced main .editorial-story img{
  width:100%;
  aspect-ratio:var(--hs-ratio-card);
  object-fit:cover;
}
.page-resequenced main .seo-card h3,
.page-resequenced main .editorial-story h3{
  font-size:var(--hs-related-title-size);
  line-height:var(--hs-related-title-line);
}

.page-resequenced main .cta-banner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--hs-space-32);
  padding:var(--hs-space-fluid-48-80);
  border:0;
  border-radius:0;
  background:var(--hull-lime);
  color:var(--hull-blue-dark);
  box-shadow:none;
}
.page-resequenced main .cta-banner h3{
  max-width:var(--hs-measure-apply-heading);
  color:var(--hull-blue-dark);
  font-family:var(--course-display);
  font-size:var(--hs-feature-h2-size);
  font-weight:500;
  letter-spacing:var(--hs-feature-h2-track);
  line-height:var(--hs-feature-h2-line);
}
.page-resequenced main .cta-banner p{
  max-width:var(--hs-measure-course-copy);
  color:var(--hull-blue-dark);
  font-size:var(--hs-body-size);
  line-height:var(--hs-body-line);
}
.page-resequenced main .cta-banner .btn-primary{
  background:var(--hull-blue);
  color:#fff;
  box-shadow:none;
}
.page-resequenced main .cta-banner .btn-primary:hover{
  background:var(--hull-blue-dark);
  color:#fff;
  box-shadow:none;
}
.page-resequenced main .cta-banner .btn-ghost{
  border-color:rgba(14,22,71,.45);
  color:var(--hull-blue-dark);
  background:transparent;
}
.page-resequenced main .cta-banner .btn-ghost:hover{
  background:var(--hull-blue-dark);
  border-color:var(--hull-blue-dark);
  color:#fff;
}

.page-resequenced main .contact-sec{
  position:relative;
  background:var(--navy-deep);
  color:#fff;
}
.page-resequenced main .contact-sec .sec-head h2{color:#fff}
.page-resequenced main .contact-sec .sec-head>p:not(.label){color:rgba(255,255,255,.76)}
.page-resequenced main .contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  border-top:var(--hs-rule-active) solid rgba(255,255,255,.7);
}
.page-resequenced main .contact-card{
  padding:var(--hs-space-24) var(--hs-space-0);
  border:0;
  border-bottom:var(--hs-rule) solid rgba(255,255,255,.24);
  background:transparent;
}
.page-resequenced main .contact-sec .contact-card>p:not(.label){color:rgba(255,255,255,.76)}

@media(min-width:640px){
  .page-resequenced main .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-resequenced main .seo-grid,
  .page-resequenced main .editorial-story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:768px){
  .page-resequenced main .page-hero{padding-top:var(--hs-hero-pad-top-tablet);padding-bottom:var(--hs-space-64)}
  .page-resequenced main .page-hero-grid:has(.editorial-hero-media){
    grid-template-areas:"media copy";
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--hs-gap-hero);
  }
  .page-resequenced main .page-hero-grid:has(.editorial-hero-media)>div:first-child{grid-area:copy}
  .page-resequenced main .page-hero-grid:has(.editorial-hero-media)>.editorial-hero-media{grid-area:media}
  .page-resequenced main .editorial-hero-media picture{width:100%;margin-inline:0}
  .page-resequenced main .trust-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-resequenced main .article-layout{grid-template-columns:minmax(0,7fr) minmax(280px,5fr)}
  .page-resequenced main .article-aside{position:sticky;top:var(--hs-sticky-media-offset);align-self:start}
  .page-resequenced main .prog{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--hs-space-fluid-48-104);align-items:center}
  .page-resequenced main .seo-grid,
  .page-resequenced main .editorial-story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-resequenced main .seo-card,
  .page-resequenced main .editorial-story{padding:var(--hs-space-32)}
  .page-resequenced main .cta-banner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .page-resequenced main .contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-resequenced main .contact-card{padding:var(--hs-space-24);border-right:var(--hs-rule) solid rgba(255,255,255,.24)}
  .page-resequenced main .contact-card:last-child{border-right:0}
}

@media(min-width:1024px){
  .page-resequenced main .page-hero .facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .page-resequenced main .page-hero .facts>div{padding-left:var(--hs-space-20);border-left:var(--hs-rule) solid rgba(255,255,255,.3)}
  .page-resequenced main .page-hero .facts>div:first-child{padding-left:0;border-left:0}
  .page-resequenced main .trust-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(min-width:1181px){
  .page-resequenced main .page-hero{padding-top:var(--hs-hero-pad-top-wide)}
}

@media(min-width:1280px){
  .page-resequenced main .page-hero-grid:has(.editorial-hero-media){grid-template-columns:minmax(0,6.3fr) minmax(0,5.7fr)}
}

/* ---------- 22 · Academic Course Hero Overrides (University of Hull Layout) ---------- */
.page-hero-panel main .course-hero {
  background: transparent !important;
  padding: 0 !important;
}

/* Hide the broken cyan line progress bar rule at bottom */
.page-hero-panel main .course-hero::after {
  display: none !important;
}

/* Full-bleed background color split zone - reserve header height top offset */
.course-hero-wrapper {
  padding-top: 156px !important; /* Reserves header height + 48px content offset in document flow */
  background: linear-gradient(to bottom, #0E1647 480px, #ffffff 480px) !important; /* Navy region ends at 480px to align heights exactly */
}

html[data-theme="dark"] .course-hero-wrapper {
  background: linear-gradient(to bottom, #0E1647 480px, #181F4D 480px) !important;
}

/* Widen container width for premium editorial split */
@media(min-width: 1024px) {
  .page-hero-panel main .wrap.course-hero-grid {
    max-width: 1240px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(480px, 1fr) minmax(540px, 1fr) !important; /* 480px left column, 540px right column */
    column-gap: 64px !important; /* Premium wide column gap (64-72px) */
    align-items: start !important;
  }
}

/* Flat Hero Media - spans both rows of the single grid (no boxed card look!) */
.page-hero-panel main .course-hero__media {
  position: relative !important;
  background: transparent !important; /* Visual flatness: no card background */
  padding: 0 !important; /* Visual flatness: no frame padding */
  border: none !important; /* Visual flatness: no border */
  border-radius: 4px !important;
  box-shadow: none !important; /* Visual flatness: no shadows */
  transform: none !important;
  max-width: 480px !important; /* Visual authority: matches left column width */
  justify-self: start !important;
  align-self: start !important; /* Aligns gallery top with breadcrumb top */
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important; /* Stable flow, no arbitrary negative margins needed */
  z-index: 10 !important;
}

@media(min-width: 1024px) {
  .page-hero-panel main .course-hero__media {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important; /* Stable grid overhang span */
  }
}

/* Specific Dark Theme Containment for Image Card - flat styling */
html[data-theme="dark"] .page-hero-panel main .course-hero__media {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.page-hero-panel main .course-hero__media picture {
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  aspect-ratio: 1/1.06 !important; /* Taller editorial aspect ratio to balance height */
  border-radius: 4px !important;
}

.page-hero-panel main .course-hero__media picture img,
.page-hero-panel main .course-hero__media img {
  aspect-ratio: 1/1.06 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 4px !important; /* Matching internal border-radius */
  width: 100% !important;
  height: auto !important;
}

/* Per-photo crop tuning for the civil materials-testing hero image only */
.page-civil main .course-hero__media picture img,
.page-civil main .course-hero__media img {
  object-position: center 36% !important; /* Move crop down to completely hide the roof clutter */
  transform: scale(1.45) !important; /* Zoom in 45% to focus tightly on students and machine */
  transform-origin: 50% 36% !important; /* Focus tightly on students and testing machine */
  filter: contrast(1.04) brightness(0.93) saturate(0.80) !important; /* Mute concrete highlights and tone down orange focal dominance */
}

/* Badge overlay top-left */
.page-hero-panel .course-hero__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #5EEAD4; /* Mint green */
  color: #0E1647; /* Dark navy */
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: none !important;
}

/* Pause button overlay top-right - Translucent and quiet */
.page-hero-panel .course-hero__pause-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50%;
  color: #fff !important;
  cursor: pointer;
  box-shadow: none !important;
  backdrop-filter: blur(4px) !important;
  transition: all var(--dur-fast) var(--ease);
}

.page-hero-panel .course-hero__pause-btn:hover {
  background: #fff !important;
  color: #0E1647 !important;
}

/* Quiet thumbnail strip below image (no border layout/extra white space) */
.page-hero-panel .course-hero__media-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 12px !important;
  padding: 0 !important; /* No extra padding whitespace */
}

.page-hero-panel .course-hero__thumbnails {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.page-hero-panel .course-hero__thumbnails::-webkit-scrollbar {
  display: none !important;
}

.page-hero-panel .course-hero__thumbnails .thumbnail {
  width: 36px !important; /* Tiny, minimal, quiet thumbnails */
  height: 36px !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  opacity: 0.6 !important;
  transition: all 0.2s ease;
}

.page-hero-panel .course-hero__thumbnails .thumbnail.is-active,
.page-hero-panel .course-hero__thumbnails .thumbnail:hover {
  border-color: #5EEAD4 !important; /* Elegant cyan active state */
  opacity: 1 !important;
}

.page-hero-panel .course-hero__thumbnails img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Expand button overlay bottom-right of image container */
.page-hero-panel .expand-btn {
  position: absolute !important;
  right: 18px !important;
  bottom: 60px !important; /* Overlays bottom-right of the picture */
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  cursor: pointer !important;
  box-shadow: none !important;
  backdrop-filter: blur(4px) !important;
  transition: all var(--dur-fast) var(--ease) !important;
}

.page-hero-panel .expand-btn:hover {
  background: #fff !important;
  color: #0E1647 !important;
  transform: scale(1.08) !important;
}

/* Right Column Spacing & Copy layout - no stretching, natural top-aligned vertical flow */
.page-hero-panel main .course-hero__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: start !important;
  align-self: start !important;
  gap: 0 !important;
  padding-bottom: 0 !important;
}

/* scroll margin top to accommodate sticky header */
.page-hero-panel main section[id] {
  scroll-margin-top: 100px !important;
}

/* detailed breadcrumb - muted, single-line navigation context */
.page-hero-panel main .course-breadcrumb {
  margin-bottom: 24px !important; /* Spacing between breadcrumb and category: 24px */
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.page-hero-panel main .course-breadcrumb a {
  color: rgba(255, 255, 255, 0.45) !important;
  text-decoration: none !important;
  transition: color var(--dur-fast) var(--ease);
}

.page-hero-panel main .course-breadcrumb a:hover {
  color: #fff !important;
}

.page-hero-panel main .course-breadcrumb span:not(.breadcrumb-sep) {
  color: rgba(255, 255, 255, 0.8) !important;
}

.page-hero-panel main .course-breadcrumb .breadcrumb-sep {
  margin: 0 6px !important;
  color: rgba(255, 255, 255, 0.2) !important;
  font-size: 13px !important;
  font-weight: normal !important;
}

/* Small caps category label - uppercase, tracked, medium weight */
.page-hero-panel .course-category {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important; /* Medium weight, not bold */
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 18px 0 !important; /* Category to title gap: 16-20px (18px) */
}

/* Dominant serif page title - large & elegant visual hierarchy */
.page-hero-panel main .course-hero h1 {
  font-family: Georgia, serif !important;
  font-size: clamp(32px, 3.8vw, 44px) !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: #fff !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0 !important;
}

@media(min-width: 1024px) {
  .page-hero-panel main .course-hero h1 {
    font-size: 52px !important; /* Scaled to 52px to prevent awkward wrapping on narrower viewports */
    line-height: 1.15 !important;
  }
}

.page-hero-panel main .course-hero h1 span {
  color: inherit !important;
}

/* Right column container - top row (navy background) */
.page-hero-panel main .course-hero__info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: start !important;
}

@media(min-width: 1024px) {
  .page-hero-panel main .course-hero__info {
    height: 320px !important; /* Navy height fits exactly into the 480px background split point */
    padding-top: 24px !important; /* Compressed padding for visual hierarchy */
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
  }
}

/* Controlled top gaps between copy segments */
body.page-course.page-hero-panel main .course-facts {
  margin-top: 28px !important; /* Title to statistics: 28px gap */
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* Collapsed on mobile */
  gap: 24px !important; /* More horizontal air between columns */
  border: none !important;
  padding: 0 !important;
}

@media(min-width: 768px) {
  body.page-course.page-hero-panel main .course-facts {
    grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr !important; /* Single horizontal sequence on desktop */
  }
}

body.page-course.page-hero-panel main .course-facts div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important; /* controlled vertical rhythm label-to-value */
  padding: 0 0 0 20px !important; /* Slightly more padding for horizontal air */
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important; /* quiet separator */
}

body.page-course.page-hero-panel main .course-facts div:nth-child(n) {
  padding-left: 20px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.page-course.page-hero-panel main .course-facts div:first-child {
  padding-left: 0 !important;
  border-left: none !important;
}

/* Small caps label for statistics - refined size & contrast */
body.page-course.page-hero-panel main .course-facts dt {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important; /* Medium weight instead of heavy bold */
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important; /* Muted contrast */
  margin-bottom: 0 !important;
}

/* Statistics values - reduced to let the page title dominate */
body.page-course.page-hero-panel main .course-facts dd {
  font-family: var(--sans) !important;
  font-size: 26px !important; /* Quieter values to keep title dominant (25-28px) */
  font-weight: 500 !important; /* medium weight instead of heavy bold */
  line-height: 1.15 !important;
  color: #fff !important;
}

.page-hero-panel .hero-action-group {
  margin-top: 36px !important; /* Statistics to form: 36px */
}

/* Dropdown styling */
.page-hero-panel .course-selectors {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important; /* Generous side gap */
  margin-top: 28px !important; /* Statistics to form gap: 28px */
  margin-bottom: 0 !important;
}

.page-hero-panel .selector-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important; /* Added more breathing room from label to field: 8px */
}

.page-hero-panel .selector-group label {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important; /* Medium weight instead of heavy bold */
  letter-spacing: 0.05em !important;
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Pale cool interactive fields in light mode, translucent in dark mode */
.page-hero-panel .select-wrapper {
  position: relative !important;
  background: #ffffff !important; /* Pure white select surface */
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(14, 22, 71, 0.08) !important; /* Quieter border contrast for flat appearance */
  transition: border-color var(--dur-fast) var(--ease) !important;
}

.page-hero-panel .select-wrapper:hover {
  border-color: rgba(14, 22, 71, 0.2) !important;
}

html[data-theme="dark"] .page-hero-panel .select-wrapper {
  background: rgba(255, 255, 255, 0.12) !important; /* Elevated surface to prevent merging with dark background */
  border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Stronger border contrast */
}

html[data-theme="dark"] .page-hero-panel .select-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.page-hero-panel .select-wrapper select {
  width: 100% !important;
  padding: 19px 24px !important; /* Increased padding to hit exactly ~56-62px height: 60px */
  font-family: var(--sans) !important;
  font-size: 15.5px !important; /* Enlarged text size for calm and deliberate read */
  font-weight: 500 !important; /* Medium weight instead of shouting bold */
  color: #0E1647 !important; /* Dark navy text in light mode */
  border: none !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  cursor: pointer !important;
  outline: none !important;
  position: relative !important;
  z-index: 1 !important;
}

html[data-theme="dark"] .page-hero-panel .select-wrapper select {
  color: #fff !important; /* White text in dark mode */
}

.page-hero-panel .select-wrapper::after {
  content: "" !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-25%) !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 5px solid #0E1647 !important; /* Navy arrow in light mode */
  pointer-events: none !important;
  display: block !important;
  z-index: 2 !important;
}

html[data-theme="dark"] .page-hero-panel .select-wrapper::after {
  border-top: 5px solid #fff !important; /* White arrow in dark mode */
}

/* Actions - Form to actions: 24px */
.page-hero-panel main .course-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 24px !important;
}


.page-hero-panel main .course-action--primary {
  padding: 12px 24px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  background: #fff !important; /* Filled white button on navy in light theme */
  border: 2px solid #fff !important;
  color: #0E1647 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all var(--dur-fast) var(--ease) !important;
}

.page-hero-panel main .course-action--primary:hover {
  background: transparent !important;
  color: #fff !important;
}

.page-hero-panel main .course-action--primary::before {
  display: none !important;
}

/* Dark mode: keep it visually dominant as filled white button */
html[data-theme="dark"] .page-hero-panel main .course-action--primary {
  background: #fff !important;
  border: 2px solid #fff !important;
  color: #0E1647 !important;
}



.course-hero__actions-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

@media(min-width: 1024px) {
  .course-hero__actions-copy {
    grid-column: 2 !important;
    grid-row: 2 !important; /* Row 2 grid alignment */
    padding-top: 24px !important; /* Dense, Hull-like spacing */
    padding-bottom: 40px !important; /* Terminates columns at identical height */
    box-sizing: border-box !important;
  }
}

/* Actions styling on Light Background in Light Mode, Dark Navy in Dark Mode */
.page-hero-panel main .course-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important; /* locked baseline horizontal alignment */
  gap: 28px !important; /* Breathing room for actions */
  margin-top: 20px !important; /* separates selectors from actions */
}

.page-hero-panel main .course-action--primary {
  min-height: 48px !important; /* premium standard height */
  padding: 0 28px !important; /* premium spacing (important, not oversized) */
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  background: #0E1647 !important; /* Solid navy on white background */
  border: 2px solid #0E1647 !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--dur-fast) var(--ease) !important;
}

.page-hero-panel main .course-action--primary:hover {
  background: transparent !important;
  color: #0E1647 !important;
}

.page-hero-panel main .course-action--primary::before {
  display: none !important;
}

/* Dark mode: solid white button on dark navy */
html[data-theme="dark"] .page-hero-panel main .course-action--primary {
  background: #fff !important;
  border: 2px solid #fff !important;
  color: #0E1647 !important;
}

html[data-theme="dark"] .page-hero-panel main .course-action--primary:hover {
  background: transparent !important;
  color: #fff !important;
}

.page-hero-panel main .course-action--link {
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important; /* Muted nav link weight */
  color: #0E1647 !important; /* Visible dark navy on white */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important; /* flat clean appearance */
  border-bottom: 1px solid currentColor !important; /* elegant underline replacement */
  padding-bottom: 3px !important; /* breathing spacing from text to line */
}

html[data-theme="dark"] .page-hero-panel main .course-action--link {
  color: rgba(255, 255, 255, 0.85) !important;
}

.page-hero-panel main .course-action--link:hover {
  color: var(--terracotta) !important;
  border-bottom-color: transparent !important;
}

/* Horizontal divider inside Section 2 - Restrained elegant style */
.course-actions-divider {
  border: none !important;
  border-top: 1px solid rgba(14, 22, 71, 0.04) !important; /* Muted elegant hairline */
  margin: 28px 0 !important; /* Spacing from CTA to divider: 28px */
}

html[data-theme="dark"] .course-actions-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Promo Text Callout in Section 2 actions copying */
.page-hero-panel .course-promo-block {
  margin-top: 0 !important;
  padding: 6px 0 6px 20px !important; /* Elegant breathing spacing for callout */
  border-left: 3px solid #5EEAD4 !important; /* Refined 3px thin mint/cyan accent rule */
  max-width: 580px !important; /* Constrained to readable content width */
}

html[data-theme="dark"] .page-hero-panel .course-promo-block {
  border-left: 3px solid #5EEAD4 !important;
}

.page-hero-panel .course-promo-block p {
  font-family: var(--sans) !important;
  font-size: 18px !important; /* Larger normal body/lead-copy size */
  font-weight: 400 !important; /* Regular weight instead of shouting bold */
  line-height: 1.80 !important; /* Comfortable line height */
  color: #4A5568 !important; /* Clean charcoal text on white background */
  margin: 0 !important;
}

html[data-theme="dark"] .page-hero-panel .course-promo-block p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Section 3: Quote Section transition, spacing and theme colors - flow seamlessly to white background */
.page-hero-panel main .course-hero-quote {
  background: #ffffff !important; /* Pure white background to flow seamlessly */
  padding: 48px 0 80px 0 !important; /* Generous breathing room gap */
  border-top: none !important; /* Removes harsh top border */
}

html[data-theme="dark"] .page-hero-panel main .course-hero-quote {
  background: #181F4D !important; /* Cohesive deep slate navy transition in dark mode */
  border-top: none !important;
}

.page-hero-panel main .course-hero-quote blockquote {
  font-size: 26px !important; /* Quieter display headline */
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: #0E1647 !important;
}

html[data-theme="dark"] .page-hero-panel main .course-hero-quote blockquote {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ==========================================================================
   GLOBAL REFINED PROGRAM PAGES STYLE TUNING (SITE-WIDE CONSISTENCY)
   distributes visual rhythm, spacing, breadcrumbs, typography, facts and
   quote styles across B.E. Computer (BCT) and B.E. Electronics (BEI) pages.
   ========================================================================== */

/* Breathing space under the fixed header nav */
@media(min-width: 1024px) {
  .page-course main .course-hero {
    padding-top: 156px !important; /* Unified breathing space below header nav */
  }
}

/* Breadcrumbs typography & spacing */
.page-course main .course-breadcrumb {
  margin-bottom: 24px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.page-course main .course-breadcrumb a {
  color: rgba(255, 255, 255, 0.45) !important;
  text-decoration: none !important;
}

.page-course main .course-breadcrumb a:hover {
  color: #fff !important;
}

.page-course main .course-breadcrumb span {
  color: rgba(255, 255, 255, 0.15) !important; /* Quiet separator */
  margin: 0 6px !important;
}

/* Eyebrow kicker text spacing */
.page-course .course-eyebrow {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 0 18px 0 !important; /* Category to title gap: 18px */
}

/* Page Title typography overrides */
.page-course main .course-hero h1 {
  font-size: 52px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  margin-bottom: 28px !important;
}

.page-course main .course-hero h1 span {
  font-weight: 300 !important;
  opacity: 0.6 !important;
}

/* Facts row layout gaps and quiet border dividers */
body.page-course main .course-facts {
  margin-top: 28px !important; /* Title to stats: 28px */
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important; /* Elegant horizontal air */
  border: none !important;
  padding: 0 !important;
}

@media(min-width: 768px) {
  body.page-course main .course-facts {
    grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr !important; /* Single row flow */
  }
}

body.page-course main .course-facts div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 0 0 20px !important; /* horizontal spacing air */
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important; /* elegant line */
}

body.page-course main .course-facts div:first-child {
  padding-left: 0 !important;
  border-left: none !important;
}

body.page-course main .course-facts dt {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin-bottom: 0 !important;
}

body.page-course main .course-facts dd {
  font-family: var(--sans) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  color: #fff !important;
}

/* Intake information block divider & spacing */
.page-course main .course-intake {
  display: flex !important;
  gap: 32px !important;
  margin-top: 28px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important; /* quiet separator */
}

.page-course main .course-intake div {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.page-course main .course-intake span {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 500 !important;
}

.page-course main .course-intake strong {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  color: #fff !important;
  font-weight: 500 !important;
}

/* Actions block spacing & alignments */
.page-course main .course-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important; /* baseline alignment */
  gap: 28px !important;
  margin-top: 32px !important; /* separated space under content */
}

.page-course main .course-action--primary {
  min-height: 48px !important;
  padding: 0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  background: #ffffff !important; /* Clean premium white button */
  border: 2px solid #ffffff !important;
  color: #0E1647 !important;
  transition: all var(--dur-fast) var(--ease) !important;
}

.page-course main .course-action--primary:hover {
  background: transparent !important;
  color: #ffffff !important;
}

.page-course main .course-action--link {
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor !important; /* clean bottom underline */
  padding-bottom: 3px !important;
}

.page-course main .course-action--link:hover {
  color: #5EEAD4 !important;
  border-bottom-color: transparent !important;
}

/* Quote Section Flow: seamless background split zone with thin turquoise rule */
.page-course main .course-hero-quote {
  background: #ffffff !important; /* Pure white background to flow seamlessly */
  padding: 48px 0 80px 0 !important; /* Generous breathing room gap */
  border-top: none !important;
}

html[data-theme="dark"] .page-course main .course-hero-quote {
  background: #181F4D !important; /* Cohesive deep slate navy in dark mode */
  border-top: none !important;
}

.page-course main .course-hero-quote blockquote {
  font-family: var(--serif) !important;
  font-size: 26px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
  color: #0E1647 !important;
  border-left: 3px solid #5EEAD4 !important; /* Elegant 3px thin mint accent rule */
  padding: 6px 0 6px 20px !important;
  margin: 0 !important;
}

html[data-theme="dark"] .page-course main .course-hero-quote blockquote {
  color: rgba(255, 255, 255, 0.9) !important;
}

.page-course main .course-hero-quote blockquote em {
  font-weight: 400 !important;
  color: #4A5568 !important;
}

html[data-theme="dark"] .page-course main .course-hero-quote blockquote em {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ==========================================================================
   MULTI-LINE TITLE COMPENSATION — reusable line-count hooks
   The navy/white hero split (480px) and the fixed info-zone height (320px) are
   tuned on the civil reference for a ONE-line H1. Longer titles wrap and push
   the facts row (and selectors, where present) past the seam — white-on-white
   facts, selectors overlapping the actions row. Add `hero-lines-2` or
   `hero-lines-3` to the body of any panel page whose H1 wraps to 2 or 3 lines
   at desktop: it shifts the seam + info height by exactly one/two H1
   line-heights (60px/120px) so every element keeps civil's offset from the
   seam. Desktop grid only — below 1024px all panel pages share identical
   (stacked, solid-navy) behavior. Civil (1 line) needs no class.
   ========================================================================== */
@media(min-width: 1024px) {
  .hero-lines-2 .course-hero-wrapper {
    background: linear-gradient(to bottom, #0E1647 540px, #ffffff 540px) !important;
  }
  html[data-theme="dark"] .hero-lines-2 .course-hero-wrapper {
    background: linear-gradient(to bottom, #0E1647 540px, #181F4D 540px) !important;
  }
  .hero-lines-2 main .course-hero__info {
    height: 380px !important;
  }
  .hero-lines-3 .course-hero-wrapper {
    background: linear-gradient(to bottom, #0E1647 600px, #ffffff 600px) !important;
  }
  html[data-theme="dark"] .hero-lines-3 .course-hero-wrapper {
    background: linear-gradient(to bottom, #0E1647 600px, #181F4D 600px) !important;
  }
  .hero-lines-3 main .course-hero__info {
    height: 440px !important;
  }
  .hero-lines-4 .course-hero-wrapper {
    background: linear-gradient(to bottom, #0E1647 660px, #ffffff 660px) !important;
  }
  html[data-theme="dark"] .hero-lines-4 .course-hero-wrapper {
    background: linear-gradient(to bottom, #0E1647 660px, #181F4D 660px) !important;
  }
  .hero-lines-4 main .course-hero__info {
    height: 500px !important;
  }
}

/* ==========================================================================
   MOBILE/TABLET HERO CONTRAST REPAIR (<1024px) — all three course pages
   Below the desktop grid the hero stacks (media → info → actions), so the
   fixed 480px gradient stop cannot track content height: the white-text
   breadcrumb/category/H1/facts were landing on the white zone (invisible)
   on every course page, civil included. Solid navy field behind the stack;
   the actions/promo zone paints its own light surface edge-to-edge via
   box-shadow spread + clip-path (paint-only — no horizontal overflow).
   ========================================================================== */
@media(max-width: 1023.98px) {
  .page-hero-panel .course-hero-wrapper {
    background: #0E1647 !important;
  }
  html[data-theme="dark"] .page-hero-panel .course-hero-wrapper {
    background: #0E1647 !important;
  }
  .page-hero-panel .course-hero__actions-copy {
    background: #ffffff !important;
    box-shadow: 0 0 0 100vmax #ffffff !important;
    clip-path: inset(0 -100vmax) !important;
    margin-top: 28px !important;
    padding-top: 24px !important;
    padding-bottom: 8px !important;
  }
  html[data-theme="dark"] .page-hero-panel .course-hero__actions-copy {
    background: #181F4D !important;
    box-shadow: 0 0 0 100vmax #181F4D !important;
  }
}

/* ==========================================================================
   HEADER-CLEARANCE FIX — course panel pages (civil / computer / electronics)
   Two defects from the wrapper redesign, both visible as header spacing bugs:
   (1) DESKTOP double header-reserve. The panel wraps the hero in
       .course-hero-wrapper (padding-top:156px) to clear the position:absolute
       header, but the global ".page-course main .course-hero{padding-top:156px}"
       rule (loaded later, same specificity, also !important) still wins the tie
       on the SECTION — a second 156px stacks, so content starts at 312px while
       the header ends at ~117px: ~195px of empty navy under the header. Zero the
       section padding so ONLY the wrapper reserves. The wrapper must keep top:0
       (its navy gradient paints behind the transparent header); zeroing the
       section — not the wrapper — is what lets it rise. Panel seam geometry is
       unaffected: hero content and the navy seam shift up 156px together.
   (2) MOBILE cramp. The fixed 156px reserve ignores the +30px TU ribbon that
       only shows below 1024px, leaving ~5px clearance vs ~31px sitewide. Reserve
       header + ~35px on the wrapper below the desktop grid.
   ========================================================================== */
@media(min-width: 1024px) {
  body.page-course.page-hero-panel main .course-hero {
    padding-top: 0 !important;
  }
}
@media(max-width: 1023.98px) {
  .page-hero-panel .course-hero-wrapper {
    padding-top: 186px !important;
  }
}