/* ============================================================

   Bachelor page — Clean Energy Science & Engineering
   Consolidated, responsive, academic UI layer
   HTML remains unchanged
   ============================================================ */


/* ============================================================
   Global responsiveness safeguards
   ============================================================ */

   *,
   *::before,
   *::after{
     box-sizing:border-box;
   }
   
   html,
   body,
   .page{
     max-width:100%;
     overflow-x:hidden;
   }
   
   img,
   video,
   svg{
     max-width:100%;
     height:auto;
   }
   
   .wrap{
     width:min(100% - 48px, 1180px);
     margin-inline:auto;
   }
   
   .band{
     overflow:hidden;
   }
   
   a{
     overflow-wrap:anywhere;
   }
   
   
   /* ============================================================
      Five study areas
      ============================================================ */
   
   .areas-head{
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:46px;
     align-items:end;
     margin-bottom:32px;
   }
   
   .areas-grid{
     display:grid;
     grid-template-columns:repeat(5,minmax(0,1fr));
     border-top:1px solid var(--rule);
     border-left:1px solid var(--rule);
   }
   
   .area-card{
     min-width:0;
     min-height:300px;
     padding:24px 22px;
     display:flex;
     flex-direction:column;
     border-right:1px solid var(--rule);
     border-bottom:1px solid var(--rule);
     background:var(--bone);
     transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
   }
   
   .area-card:hover{
     transform:translateY(-4px);
     box-shadow:var(--shadow);
     background:var(--card);
   }
   
   .area-num{
     margin-bottom:18px;
     color:var(--amber);
     font-family:var(--serif);
     font-size:15px;
     font-style:italic;
   }
   
   .area-title{
     margin:0 0 12px;
     color:var(--graphite);
     font-size:18px;
     font-weight:600;
     line-height:1.2;
     letter-spacing:-.2px;
   }
   
   .area-body{
     margin:0 0 16px;
     color:var(--ink2);
     font-size:13px;
     line-height:1.58;
   }
   
   .area-tags{
     margin-top:auto;
     display:flex;
     flex-wrap:wrap;
     gap:6px;
   }
   
   .area-tags span,
   .career-tags span{
     border-radius:var(--radius);
     font-family:var(--sans);
   }
   
   .area-tags span{
     padding:3px 7px;
     border:1px solid var(--rule);
     background:var(--card);
     color:var(--ink3);
     font-size:10.5px;
   }
   
   
   /* ============================================================
      Academic architecture
      ============================================================ */
   
   .arch-grid{
     display:grid;
     grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
     gap:48px;
     align-items:start;
   }
   
   .arch-map{
     min-width:0;
     overflow:hidden;
     border:1px solid var(--rule);
     border-radius:var(--radius);
     background:var(--bone);
   }
   
   .arch-row{
     display:grid;
     grid-template-columns:168px minmax(0,1fr);
     border-bottom:1px solid var(--rule);
   }
   
   .arch-row:last-child{
     border-bottom:none;
   }
   
   .arch-label{
     padding:18px;
     border-left:3px solid var(--amber);
     background:var(--card);
   }
   
   .arch-label.blue{
     border-left-color:var(--blue);
   }
   
   .arch-label.green{
     border-left-color:var(--green);
   }
   
   .arch-k{
     margin-bottom:4px;
     color:var(--ink2);
     font-size:10.5px;
   }
   
   .arch-t{
     color:var(--graphite);
     font-size:15px;
     font-weight:600;
     line-height:1.25;
   }
   
   .arch-content{
     padding:18px 20px;
     background:var(--bone);
   }
   
   .arch-content p{
     margin:0;
     color:var(--ink3);
     font-size:13.5px;
     line-height:1.6;
   }
   
   .track-grid{
     display:grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
     gap:12px;
     margin-top:20px;
   }
   
   .track,
   .project-card,
   .cred-card,
   .ach-feature,
   .sr-card,
   .innovation-card,
   .innovation-mark,
   .capability,
   .career-band,
   .pathbox,
   .subpage-card,
   .subpage-icon{
     border-radius:var(--radius);
   }
   
   .track{
     min-width:0;
     padding:16px;
     border:1px solid var(--rule);
     background:var(--card);
   }
   
   .track h4{
     margin:0 0 8px;
     color:var(--graphite);
     font-size:17px;
     font-weight:600;
     line-height:1.25;
   }
   
   .track p{
     margin:0;
     color:var(--ink2);
     font-size:12.5px;
     line-height:1.55;
   }
   
   .project-strip{
     display:grid;
     grid-template-columns:repeat(2,minmax(0,1fr));
     gap:12px;
     margin-top:18px;
     margin-bottom:14px;
   }
   
   .project-card{
     min-width:0;
     display:flex;
     align-items:baseline;
     gap:13px;
     padding:16px 18px;
     background:var(--graphite);
     color:var(--bone);
   }
   
   .project-card .pv{
     flex-shrink:0;
     font-family:var(--serif);
     font-size:28px;
     font-weight:600;
     line-height:1;
     color:var(--amber);
   }
   
   .project-card .pl{
     margin-top:0;
     font-family:var(--sans);
     font-size:12px;
     color:#C9C4B8;
     line-height:1.45;
   }
   
   .project-card .pl strong{
     display:block;
     color:#FBF8F1;
     font-weight:600;
     font-size:14px;
   }
   
   
   /* ============================================================
      Outcomes dark section
      ============================================================ */
   
   .outcomes-head{
     display:grid;
     grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
     gap:46px;
     align-items:end;
     margin-bottom:34px;
   }
   
   .capability-grid{
     display:grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
     gap:16px;
   }
   
   .capability{
     min-width:0;
     min-height:245px;
     display:flex;
     flex-direction:column;
     padding:24px;
     border:1px solid var(--rule-dk);
     background:rgba(255,255,255,.045);
   }
   
   .capability .cn{
     margin-bottom:18px;
     color:var(--amber);
     font-family:var(--serif);
     font-size:15px;
     font-style:italic;
   }
   
   .capability h3{
     margin:0 0 12px;
     color:#FBF8F1;
     font-size:21px;
     font-weight:600;
     line-height:1.22;
   }
   
   .capability p{
     margin:0 0 16px;
     color:#B7B2A6;
     font-size:13.5px;
     line-height:1.65;
   }
   
   .capability ul{
     list-style:none;
     margin:auto 0 0;
     padding:10px 0 0;
     border-top:1px solid var(--rule-dk);
   }
   
   .capability li{
     display:flex;
     gap:9px;
     padding:5px 0;
     color:#C9C4B8;
     font-size:12.5px;
     line-height:1.5;
   }
   
   .capability li::before{
     content:"";
     width:5px;
     height:5px;
     margin-top:7px;
     flex-shrink:0;
     border-radius:50%;
     background:var(--amber);
   }
   
   .career-band{
     display:grid;
     grid-template-columns:minmax(0,1fr) minmax(0,2fr);
     gap:28px;
     align-items:center;
     margin-top:32px;
     padding:24px 26px;
     border:1px solid var(--rule-dk);
     background:var(--graphite2);
   }
   
   .career-band h3{
     margin:0;
     color:#FBF8F1;
     font-size:22px;
     font-weight:600;
     line-height:1.25;
   }
   
   .career-tags{
     display:flex;
     flex-wrap:wrap;
     gap:8px;
   }
   
   .career-tags span{
     padding:6px 10px;
     border:1px solid rgba(255,255,255,.18);
     background:rgba(255,255,255,.04);
     color:#DAD5C9;
     font-size:11px;
   }
   
   
   /* ============================================================
      At a glance
      ============================================================ */
   
   .glance-grid{
     display:grid;
     grid-template-columns:repeat(4,minmax(0,1fr));
     border-top:1px solid var(--rule);
     border-left:1px solid var(--rule);
     background:var(--bone);
   }
   
   .glance-item{
     min-width:0;
     padding:24px 25px;
     border-right:1px solid var(--rule);
     border-bottom:1px solid var(--rule);
   }
   
   .glance-value{
     font-family:var(--serif);
     font-size:clamp(25px,3vw,36px);
     font-weight:500;
     line-height:1;
     letter-spacing:-0.5px;
     color:var(--graphite);
     font-variant-numeric:lining-nums;
     overflow-wrap:normal;
   }
   
   .glance-value .unit{
     font-family:var(--sans);
     font-size:14px;
     font-weight:500;
     color:var(--ink2);
     letter-spacing:0;
   }
   
   .glance-item:nth-child(1) .glance-value{
     color:var(--amber);
   }
   
   .glance-item:nth-child(8) .glance-value{
     color:var(--blue);
   }
   
   .glance-label{
     font-family:var(--sans);
     font-size:11px;
     font-weight:500;
     letter-spacing:.6px;
     text-transform:uppercase;
     color:var(--ink2);
     margin-top:12px;
     line-height:1.55;
   }
   
   
   /* ============================================================
      Programme Hero
      ============================================================ */
   
   .phero{
     position:relative;
     isolation:isolate;
     min-height:520px;
     display:flex;
     align-items:flex-end;
     background:var(--graphite);
     color:var(--bone);
     overflow:hidden;
   }
   
   .phero-media{
     position:absolute;
     inset:0;
     z-index:-2;
     background-image:url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2200&q=80");
     background-size:cover;
     background-position:center;
     filter:saturate(.72) contrast(1.04);
   }
   
   .phero-media::after{
     content:"";
     position:absolute;
     inset:0;
     background:
       linear-gradient(
         180deg,
         rgba(18,21,25,.56),
         rgba(18,21,25,.78) 58%,
         rgba(18,21,25,.96)
       ),
       linear-gradient(
         90deg,
         rgba(18,21,25,.72),
         rgba(18,21,25,.18) 76%
       );
   }
   
   .phero .wrap{
     padding-top:96px;
     padding-bottom:82px;
   }
   
   .crumb{
     display:flex;
     flex-wrap:wrap;
     gap:9px;
     align-items:center;
     margin-bottom:20px;
     font-family:var(--sans);
     font-size:11px;
     font-weight:600;
     letter-spacing:1.2px;
     text-transform:uppercase;
     color:#9DA1A6;
   }
   
   .crumb a{
     color:inherit;
     text-decoration:none;
   }
   
   .crumb a:hover{
     color:var(--amber);
   }
   
   .crumb .sep{
     color:#5C6066;
   }
   
   .crumb .cur{
     color:var(--amber);
   }
   
   .hero-eyebrow{
     margin-bottom:16px;
     font-family:var(--sans);
     font-size:11px;
     font-weight:600;
     letter-spacing:1.4px;
     text-transform:uppercase;
     color:var(--amber);
   }
   
   .phero h1{
     max-width:17ch;
     margin:0;
     color:#FBF8F1;
     font-family:var(--serif);
     font-size:clamp(38px,5.3vw,66px);
     font-weight:500;
     line-height:1.04;
     letter-spacing:-.7px;
     text-shadow:0 1px 30px rgba(0,0,0,.25);
   }
   
   .phero h1 em{
     font-style:italic;
     font-weight:400;
     color:#FBF8F1;
   }
   
   .phero .sub{
     margin-top:24px;
     max-width:60ch;
     color:#DAD5C9;
     font-family:var(--serif);
     font-size:clamp(17px,1.65vw,20px);
     font-weight:300;
     line-height:1.62;
   }
   
   .phero-cta{
     margin-top:34px;
     display:flex;
     gap:13px;
     flex-wrap:wrap;
     align-items:center;
   }
   
   .phero .btn{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     min-height:44px;
     padding:12px 22px;
     border:1px solid transparent;
     border-radius:var(--radius);
     font-family:var(--sans);
     font-size:13px;
     font-weight:600;
     line-height:1;
     cursor:pointer;
     text-decoration:none;
     transition:
       transform .18s ease,
       background .18s ease,
       color .18s ease,
       border-color .18s ease;
   }
   
   .phero .btn:hover{
     transform:translateY(-1px);
   }
   
   .phero .btn.solid{
     background:var(--amber);
     border-color:var(--amber);
     color:#fff;
   }
   
   .phero .btn.solid:hover{
     background:var(--amber-deep);
     border-color:var(--amber-deep);
     color:#fff;
   }
   
   .phero .btn.light{
     background:transparent;
     border-color:rgba(243,239,230,.58);
     color:var(--bone);
   }
   
   .phero .btn.light:hover{
     background:var(--bone);
     border-color:var(--bone);
     color:var(--graphite);
   }
   
   .hero-note{
     font-family:var(--serif);
     font-size:14px;
     font-style:italic;
     color:#C9C4B8;
   }
   
   
   /* ============================================================
      Curriculum timeline
      ============================================================ */
   
   .timeline-wrap{
     position:relative;
     margin-top:30px;
   }
   
   .timeline-track{
     position:absolute;
     left:28px;
     top:8px;
     bottom:8px;
     width:2px;
     background:var(--rule);
   }
   
   .year-block{
     position:relative;
     padding-left:72px;
   }
   
   .year-block + .year-block{
     border-top:1px solid var(--rule);
   }
   
   .year-dot{
     position:absolute;
     left:20px;
     top:30px;
     width:18px;
     height:18px;
     border-radius:50%;
     background:var(--graphite);
     border:3px solid var(--bone);
     z-index:1;
   }
   
   .year-dot.amber{
     background:var(--amber);
   }
   
   .year-header{
     display:grid;
     grid-template-columns:150px minmax(0,1fr);
     gap:24px;
     align-items:start;
     padding:28px 0 18px;
   }
   
   .year-label{
     font-family:var(--serif);
     font-size:14px;
     color:var(--graphite);
     line-height:1.5;
   }
   
   .year-label .sem{
     font-size:11px;
     color:var(--ink2);
   }
   
   .year-badge{
     display:inline-block;
     font-family:var(--sans);
     font-size:10px;
     font-weight:600;
     letter-spacing:.08em;
     text-transform:uppercase;
     padding:3px 9px;
     border-radius:var(--radius);
     margin-top:8px;
   }
   
   .year-badge.found{
     background:rgba(22,104,168,.10);
     color:var(--blue);
   }
   
   .year-badge.spec{
     background:rgba(241,92,40,.12);
     color:var(--amber-deep);
     border:1px solid rgba(241,92,40,.3);
   }
   
   .year-title{
     font-family:var(--serif);
     font-size:20px;
     font-weight:600;
     color:var(--graphite);
     margin-bottom:4px;
     line-height:1.25;
   }
   
   .year-subtitle{
     font-family:var(--sans);
     font-size:12.5px;
     color:var(--ink2);
     line-height:1.5;
   }
   
   .year-content{
     display:grid;
     grid-template-columns:150px minmax(0,1fr);
     gap:24px;
     padding-bottom:30px;
   }
   
   .year-content-body{
     min-width:0;
   }
   
   .semester-group + .semester-group{
     margin-top:18px;
   }
   
   .semester-label{
     display:flex;
     align-items:center;
     gap:12px;
     font-family:var(--sans);
     font-size:11px;
     font-weight:600;
     letter-spacing:.1em;
     text-transform:uppercase;
     color:var(--ink2);
     margin-bottom:11px;
   }
   
   .semester-label::after{
     content:"";
     flex:1;
     height:1px;
     background:var(--rule);
   }
   
   .courses-grid{
     display:grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
     gap:10px;
   }
   
   .course-pill{
     min-width:0;
     display:flex;
     flex-direction:column;
     gap:6px;
     background:var(--card);
     border:1px solid var(--rule);
     border-radius:var(--radius);
     padding:11px 13px;
   }
   
   .course-pill-top{
     min-width:0;
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:8px;
   }
   
   .course-pill-dept{
     min-width:0;
     font-family:var(--sans);
     font-size:9.5px;
     font-weight:600;
     letter-spacing:.08em;
     text-transform:uppercase;
   }
   
   .course-pill-dept.chem{
     color:var(--blue);
   }
   
   .course-pill-dept.eng{
     color:var(--amber-deep);
   }
   
   .course-pill-dept.bio{
     color:var(--green);
   }
   
   .course-pill-dept.sci{
     color:var(--ink2);
   }
   
   .course-pill-ects{
     flex-shrink:0;
     font-family:var(--sans);
     font-size:9.5px;
     font-weight:600;
     color:var(--ink2);
     background:var(--bone);
     border:1px solid var(--rule);
     border-radius:3px;
     padding:1px 6px;
     white-space:nowrap;
   }
   
   .course-pill-name{
     font-family:var(--sans);
     font-size:12.5px;
     color:var(--graphite);
     line-height:1.35;
   }
   
   .course-pill-code{
     font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
     font-size:9.5px;
     color:var(--ink2);
     letter-spacing:.04em;
   }
   
   .year4-block{
     margin-top:22px;
     background:rgba(241,92,40,.04);
     border:1px solid rgba(241,92,40,.22);
     border-radius:0 8px 8px 0;
   }
   
   .year4-block .year-dot{
     background:var(--amber);
     border-color:var(--bone);
   }
   
   .spec-pill{
     display:inline-block;
     font-family:var(--sans);
     font-size:10px;
     font-weight:600;
     letter-spacing:.08em;
     text-transform:uppercase;
     background:var(--amber);
     color:#fff;
     padding:4px 11px;
     border-radius:var(--radius);
     margin-bottom:12px;
   }
   
   .spec-intro{
     font-family:var(--sans);
     font-size:13px;
     color:var(--ink3);
     line-height:1.65;
     margin:0 0 18px;
     max-width:62ch;
   }
   
   .spec-intro strong{
     color:var(--graphite);
     font-weight:600;
   }
   
   .track-cards{
     display:grid;
     grid-template-columns:repeat(3,minmax(0,1fr));
     gap:12px;
     margin-bottom:16px;
   }
   
   .track-card{
     min-width:0;
     overflow:hidden;
     border:1px solid var(--rule);
     border-radius:var(--radius);
     background:var(--bone);
   }
   
   .track-card-head{
     padding:12px 14px;
     background:var(--card);
     border-bottom:1px solid var(--rule);
   }
   
   .track-card-num{
     font-family:var(--serif);
     font-style:italic;
     font-size:13px;
     color:var(--amber);
   }
   
   .track-card-title{
     font-family:var(--serif);
     font-size:15px;
     font-weight:600;
     color:var(--graphite);
     line-height:1.2;
     margin-top:2px;
   }
   
   .track-card-body{
     display:flex;
     flex-direction:column;
     gap:9px;
     padding:13px 14px;
   }
   
   .track-course{
     position:relative;
     padding-left:15px;
     font-family:var(--sans);
     font-size:12.5px;
     color:var(--graphite);
     line-height:1.3;
   }
   
   .track-course::before{
     content:"";
     position:absolute;
     left:0;
     top:6px;
     width:5px;
     height:5px;
     border-radius:50%;
     background:var(--amber);
   }
   
   .track-course .tc-meta{
     display:block;
     margin-top:2px;
     font-size:9.5px;
     color:var(--ink2);
     letter-spacing:.03em;
     font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
   }
   
   .year-note{
     background:rgba(241,92,40,.06);
     border:1px solid rgba(241,92,40,.22);
     border-radius:var(--radius);
     padding:13px 16px;
     font-family:var(--sans);
     font-size:12.5px;
     color:var(--ink3);
     line-height:1.6;
   }
   
   .year-note strong{
     color:var(--amber-deep);
     font-weight:600;
   }
   
   .electives-list{
     display:grid;
     grid-template-columns:repeat(2,minmax(0,1fr));
     gap:5px 18px;
     margin-top:9px;
   }
   
   .electives-list span{
     position:relative;
     min-width:0;
     padding-left:13px;
     font-size:11.5px;
     color:var(--ink2);
   }
   
   .electives-list span::before{
     content:"–";
     position:absolute;
     left:0;
     color:var(--amber);
   }
   
   
   /* ============================================================
      International pathway / explore / apply
      ============================================================ */
   
   .international-grid{
     display:grid;
     grid-template-columns:repeat(2,minmax(0,1fr));
     gap:46px;
     align-items:start;
   }
   
   .pathbox{
     min-width:0;
     padding:30px;
     border:1px solid var(--rule-dk);
     background:var(--graphite);
     color:var(--bone);
   }
   
   .pathbox .pk{
     margin-bottom:12px;
     color:var(--amber);
     font-size:11px;
   }
   
   .pathbox .pt{
     color:#FBF8F1;
     font-size:23px;
     font-weight:600;
     line-height:1.25;
   }
   
   .pathbox .pd{
     margin-top:12px;
     color:#A7A296;
     font-size:14px;
     line-height:1.65;
   }
   
   .pathbox .pmeta{
     margin-top:18px;
     padding-top:16px;
     border-top:1px solid var(--rule-dk);
     color:#C9C4B8;
     font-size:14px;
     font-style:italic;
   }
   
   .international-list{
     list-style:none;
     margin:20px 0 0;
     padding:0;
     border-top:1px solid var(--rule);
   }
   
   .international-list li{
     display:flex;
     gap:12px;
     padding:12px 0;
     border-bottom:1px solid var(--rule);
     color:var(--ink3);
     font-size:14px;
     line-height:1.58;
   }
   
   .international-list li::before{
     content:"→";
     margin-top:-1px;
     color:var(--amber);
     font-family:var(--serif);
   }
   
   .subpage-grid{
     display:grid;
     grid-template-columns:repeat(4,minmax(0,1fr));
     gap:14px;
     margin-top:30px;
   }
   
   .subpage-card{
     min-width:0;
     display:block;
     padding:24px;
     border:1px solid var(--rule);
     background:var(--bone);
     text-decoration:none;
     transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
   }
   
   .subpage-card:hover{
     transform:translateY(-3px);
     border-color:var(--graphite);
     box-shadow:var(--shadow);
   }
   
   .subpage-icon{
     width:38px;
     height:38px;
     display:flex;
     align-items:center;
     justify-content:center;
     margin-bottom:16px;
     border:1px solid var(--rule);
     background:var(--card);
   }
   
   .subpage-icon svg{
     width:18px;
     height:18px;
   }
   
   .subpage-title{
     margin-bottom:7px;
     color:var(--graphite);
     font-size:17px;
     font-weight:600;
   }
   
   .subpage-desc{
     margin-bottom:13px;
     color:var(--ink2);
     font-size:12.5px;
     line-height:1.55;
   }
   
   .subpage-link{
     color:var(--amber-deep);
     font-family:var(--sans);
     font-size:12.5px;
     font-weight:700;
   }
   
   .apply-band{
     background:var(--graphite);
     color:var(--bone);
   }
   
   .apply-band .wrap{
     display:grid;
     grid-template-columns:minmax(0,1fr) auto;
     gap:40px;
     align-items:center;
     padding-top:56px;
     padding-bottom:56px;
   }
   
   .apply-eyebrow{
     margin-bottom:10px;
     color:var(--amber);
     font-size:11px;
   }
   
   .apply-title{
     margin-bottom:8px;
     color:#FBF8F1;
     font-size:clamp(22px,2.6vw,32px);
     font-weight:500;
     line-height:1.25;
   }
   
   .apply-sub{
     max-width:52ch;
     color:#A7A296;
     font-size:14px;
     line-height:1.6;
   }
   
   .apply-actions{
     display:flex;
     flex-direction:column;
     align-items:stretch;
     gap:12px;
   }
   
   .apply-actions .btn{
     text-align:center;
     white-space:nowrap;
   }
   
   
   /* ============================================================
      Utilities
      ============================================================ */
   
   .u-mt-sm{
     margin-top:14px;
   }
   
   .u-mt-md{
     margin-top:18px;
   }
   
   .note-lead{
     margin-top:18px;
     color:var(--ink2);
     font-size:13.5px;
   }
   
   .cred-stat-word{
     font-size:30px;
   }
   
   
   /* ============================================================
      Responsive breakpoints
      ============================================================ */
   
   @media (max-width:1180px){
     .areas-grid{
       grid-template-columns:repeat(3,minmax(0,1fr));
     }
   
     .area-card{
       min-height:260px;
     }
   
     .courses-grid{
       grid-template-columns:repeat(2,minmax(0,1fr));
     }
   
     .subpage-grid{
       grid-template-columns:repeat(2,minmax(0,1fr));
     }
   }
   
   @media (max-width:980px){
     .wrap{
       width:min(100% - 40px, 1180px);
     }
   
     .areas-head,
     .arch-grid,
     .outcomes-head,
     .international-grid{
       grid-template-columns:1fr;
       gap:24px;
     }
   
     .areas-head,
     .outcomes-head{
       align-items:start;
     }
   
     .glance-grid{
       grid-template-columns:repeat(2,minmax(0,1fr));
     }
   
     .capability-grid{
       grid-template-columns:1fr;
     }
   
     .capability{
       min-height:0;
     }
   
     .career-band{
       grid-template-columns:1fr;
       align-items:start;
     }
   
     .track-grid{
       grid-template-columns:1fr;
     }
   
     .track-cards{
       grid-template-columns:1fr;
     }
   
     .apply-band .wrap{
       grid-template-columns:1fr;
       gap:24px;
     }
   
     .apply-actions{
       flex-direction:row;
       flex-wrap:wrap;
     }
   
     .apply-actions .btn{
       flex:1 1 220px;
     }
   }
   
   @media (max-width:860px){
     .phero{
       min-height:560px;
     }
   
     .phero .wrap{
       padding-top:92px;
       padding-bottom:72px;
     }
   
     .phero h1{
       max-width:15ch;
     }
   
     .year-header,
     .year-content{
       grid-template-columns:1fr;
       gap:8px;
     }
   
     .year-content > .year-content-spacer{
       display:none;
     }
   
     .project-strip{
       grid-template-columns:1fr;
     }
   
     .arch-row{
       grid-template-columns:1fr;
     }
   
     .arch-label{
       border-left:none;
       border-top:3px solid var(--amber);
     }
   
     .arch-label.blue{
       border-left:none;
       border-top-color:var(--blue);
     }
   
     .arch-label.green{
       border-left:none;
       border-top-color:var(--green);
     }
   }
   
   @media (max-width:760px){
     .wrap{
       width:min(100% - 32px, 1180px);
     }
   
     .phero{
       min-height:auto;
     }
   
     .phero-media{
       background-position:center right;
     }
   
     .phero-media::after{
       background:
         linear-gradient(
           180deg,
           rgba(18,21,25,.60),
           rgba(18,21,25,.86) 55%,
           rgba(18,21,25,.98)
         ),
         linear-gradient(
           90deg,
           rgba(18,21,25,.82),
           rgba(18,21,25,.48)
         );
     }
   
     .phero .wrap{
       padding-top:96px;
       padding-bottom:64px;
     }
   
     .phero h1{
       max-width:100%;
       font-size:clamp(34px,10vw,52px);
     }
   
     .phero .sub{
       max-width:100%;
       font-size:16px;
       line-height:1.62;
     }
   
     .phero-cta{
       align-items:stretch;
       flex-direction:column;
     }
   
     .phero .btn{
       width:100%;
     }
   
     .hero-note{
       text-align:center;
     }
   
     .areas-grid{
       grid-template-columns:repeat(2,minmax(0,1fr));
     }
   
     .area-card{
       min-height:0;
     }
   
     .subpage-card{
       padding:20px;
     }
   }
   
   @media (max-width:640px){
     .courses-grid,
     .electives-list,
     .subpage-grid,
     .areas-grid,
     .glance-grid{
       grid-template-columns:1fr;
     }
   
     .career-tags span,
     .area-tags span{
       max-width:100%;
     }
   
     .apply-actions{
       flex-direction:column;
     }
   
     .apply-actions .btn{
       width:100%;
       white-space:normal;
     }
   }
   
   @media (max-width:560px){
     .wrap{
       width:min(100% - 28px, 1180px);
     }
   
     .phero .wrap{
       padding-top:82px;
       padding-bottom:52px;
     }
   
     .phero h1{
       font-size:34px;
       line-height:1.08;
       letter-spacing:-.4px;
     }
   
     .phero .sub{
       font-size:15px;
     }
   
     .crumb,
     .hero-eyebrow{
       font-size:10px;
       line-height:1.5;
       letter-spacing:.9px;
     }
   
     .glance-item,
     .area-card,
     .capability,
     .pathbox,
     .subpage-card{
       padding:20px;
     }
   
     .career-band{
       padding:22px 20px;
     }
   
     .career-band h3{
       font-size:20px;
     }
   
     .timeline-wrap{
       margin-top:24px;
     }
   
     .timeline-track{
       left:12px;
     }
   
     .year-block{
       padding-left:34px;
     }
   
     .year-dot{
       left:4px;
       top:30px;
       width:16px;
       height:16px;
     }
   
     .year-header{
       padding:24px 0 16px;
     }
   
     .year-title{
       font-size:19px;
     }
   
     .semester-label{
       align-items:flex-start;
       gap:8px;
       letter-spacing:.06em;
       line-height:1.45;
     }
   
     .semester-label::after{
       display:none;
     }
   
     .course-pill-top{
       align-items:flex-start;
       flex-wrap:wrap;
     }
   
     .course-pill-ects{
       margin-left:0;
     }
   
     .year4-block{
       margin-left:-4px;
       padding-left:38px;
       border-radius:var(--radius);
     }
   
     .year4-block .year-dot{
       left:4px;
     }
   
     .project-card{
       align-items:flex-start;
       flex-direction:column;
       gap:8px;
     }
   
     .project-card .pv{
       font-size:30px;
     }
   }
   
   @media (max-width:420px){
     .wrap{
       width:min(100% - 24px, 1180px);
     }
   
     .phero h1{
       font-size:32px;
     }
   
     .phero .sub{
       font-size:14.5px;
     }
   
     .area-title,
     .subpage-title{
       font-size:16px;
     }
   
     .capability h3{
       font-size:19px;
     }
   
     .glance-value{
       font-size:30px;
     }
   
     .year-block{
       padding-left:28px;
     }
   
     .timeline-track{
       left:9px;
     }
   
     .year-dot{
       left:1px;
     }
   
     .year4-block{
       padding-left:32px;
     }
   
     .year4-block .year-dot{
       left:1px;
     }
   }


   /* ============================================================
   FIX: Explore the programme + Ready to take the next step
   Same responsive behaviour as the working programme CSS
   ============================================================ */


/* Base layout */

.subpage-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:30px;
}

.subpage-card{
  display:block;
  padding:24px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--bone);
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.subpage-card:hover{
  transform:translateY(-3px);
  border-color:var(--graphite);
  box-shadow:var(--shadow);
}

.subpage-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--card);
}

.subpage-icon svg{
  width:18px;
  height:18px;
}

.subpage-title{
  margin-bottom:7px;
  color:var(--graphite);
  font-family:var(--serif);
  font-size:17px;
  font-weight:600;
  line-height:1.25;
}

.subpage-desc{
  margin-bottom:13px;
  color:var(--ink2);
  font-size:12.5px;
  line-height:1.55;
}

.subpage-link{
  color:var(--amber-deep);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:700;
}


/* Apply band */

.apply-band{
  background:var(--graphite);
  color:var(--bone);
}

.apply-band .wrap{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
  padding:56px 0;
}

.apply-eyebrow{
  margin-bottom:10px;
  color:var(--amber);
  font-size:11px;
}

.apply-title{
  margin-bottom:8px;
  color:#FBF8F1;
  font-family:var(--serif);
  font-size:clamp(22px,2.6vw,32px);
  font-weight:500;
  line-height:1.25;
}

.apply-sub{
  max-width:52ch;
  color:#A7A296;
  font-size:14px;
  line-height:1.6;
}

.apply-actions{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
}

.apply-actions .btn{
  text-align:center;
}


/* ============================================================
   Responsive layer — same behaviour as the working CSS
   ============================================================ */

@media(max-width:1200px){
  .subpage-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:992px){
  .apply-band .wrap{
    grid-template-columns:1fr;
    gap:26px;
  }

  .apply-actions{
    flex-direction:row;
    flex-wrap:wrap;
  }
}

@media(max-width:768px){
  .subpage-grid{
    grid-template-columns:1fr;
  }

  .apply-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .apply-actions .btn{
    width:100%;
  }
}

@media(max-width:480px){
  .subpage-card{
    padding:22px;
  }
}

/* ============================================================
   FINAL MOBILE FIX — Ready to take the next step
   Place at the very end of the CSS file
   ============================================================ */

   @media(max-width:768px){

    .apply-band{
      width:100%;
      overflow:hidden;
    }
  
    .apply-band .wrap{
      width:min(100% - 44px, var(--maxw, 1140px)) !important;
      display:block !important;
      padding-top:48px !important;
      padding-bottom:48px !important;
    }
  
    .apply-band .wrap > div{
      width:100%;
      min-width:0;
    }
  
    .apply-actions{
      width:100% !important;
      max-width:none !important;
      display:flex !important;
      flex-direction:column !important;
      align-items:stretch !important;
      gap:12px !important;
      margin-top:24px !important;
    }
  
    .apply-actions .btn,
    .apply-actions a.btn,
    .apply-band .btn{
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      box-sizing:border-box !important;
      padding:13px 18px !important;
      white-space:normal !important;
      text-align:center !important;
      line-height:1.25 !important;
    }
  }
  
  @media(max-width:480px){
  
    .apply-band .wrap{
      width:min(100% - 36px, var(--maxw, 1140px)) !important;
      padding-top:42px !important;
      padding-bottom:42px !important;
    }
  
    .apply-title{
      font-size:22px !important;
      line-height:1.25 !important;
    }
  
    .apply-sub{
      font-size:13.5px !important;
    }
  }