/* <!-- Home page: scoped styles + animations --> */

 /* ============ HERO — journey card (right side) ============ */
 .journey-card {
     position: relative;
     background: linear-gradient(160deg, #FFFBF7 0%, #FFF2E4 60%, #FAECD8 100%);
     border: 1px solid var(--o-100);
     border-radius: var(--radius-xl);
     padding: 1.5rem;
     box-shadow: var(--shadow-lg);
     overflow: hidden;
     isolation: isolate;
 }

 .journey-card::before {
     content: "";
     position: absolute;
     z-index: 0;
     right: -30%;
     top: -40%;
     width: 70%;
     aspect-ratio: 1;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(232, 106, 44, 0.2), transparent 70%);
     pointer-events: none;
 }

 .jc-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid rgba(207, 90, 34, 0.1);
     margin-bottom: 1rem;
     position: relative;
     z-index: 1;
 }

 .jc-user {
     display: flex;
     align-items: center;
     gap: .7rem;
 }

 .jc-ava {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--o-400), var(--o-600));
     color: #fff;
     font-weight: 700;
     font-size: .95rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 6px 16px -6px rgba(232, 106, 44, 0.5);
 }

 .jc-user .name {
     font-weight: 700;
     letter-spacing: -0.01em;
     font-size: .95rem;
     line-height: 1.1;
 }

 .jc-user .handle {
     font-size: .78rem;
     color: var(--c-muted);
     margin-top: 2px;
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }

 .jc-status {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     padding: .3rem .65rem;
     border-radius: 999px;
     background: #fff;
     border: 1px solid var(--o-100);
     color: var(--o-700);
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .06em;
     text-transform: uppercase;
     white-space: nowrap;
 }

 .jc-status .dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--o-500);
     box-shadow: 0 0 8px var(--o-500);
     animation: jcPulse 1.6s ease-in-out infinite;
 }

 @keyframes jcPulse {
     0%, 100% {
         opacity: .45;
     }

     50% {
         opacity: 1;
     }
 }

 .jc-progress {
     position: relative;
     z-index: 1;
     margin-bottom: 1.1rem;
 }

 .jc-progress-track {
     position: relative;
     height: 6px;
     border-radius: 999px;
     background: rgba(207, 90, 34, 0.12);
     overflow: hidden;
 }

 .jc-progress-fill {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     width: 0;
     background: linear-gradient(90deg, var(--o-400), var(--o-600));
     border-radius: 999px;
     transition: width 1800ms cubic-bezier(.2, .7, .2, 1) 400ms;
 }

 .journey-card.in .jc-progress-fill {
     width: 100%;
 }

 .jc-years {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     margin-top: .5rem;
     font-size: .7rem;
     color: var(--c-muted);
     font-weight: 600;
 }

 .jc-years span:last-child {
     text-align: right;
 }

 .jc-years span:nth-child(2) {
     text-align: left;
     padding-left: 24%;
 }

 .jc-years span:nth-child(3) {
     text-align: left;
     padding-left: 50%;
 }

 /* Contribution graph */
 .jc-contrib {
     position: relative;
     z-index: 1;
     padding: .9rem;
     background: #fff;
     border: 1px solid rgba(207, 90, 34, 0.1);
     border-radius: 12px;
     margin-bottom: 1rem;
 }

 .jc-contrib-h {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: .65rem;
     font-size: .72rem;
 }

 .jc-contrib-h .lbl {
     font-weight: 700;
     color: var(--c-text);
     letter-spacing: -0.005em;
 }

 .jc-contrib-h .tot {
     color: var(--c-muted);
     font-variant-numeric: tabular-nums;
 }

 .jc-contrib-h .tot strong {
     color: var(--o-700);
     font-weight: 700;
 }

 .jc-grid {
     display: grid;
     grid-template-columns: repeat(26, 1fr);
     gap: 3px;
 }

 .jc-grid span {
     aspect-ratio: 1;
     border-radius: 2px;
     background: #F3ECE1;
     opacity: 0;
     animation: jcCell 400ms var(--ease) forwards;
 }

 .journey-card.in .jc-grid span {
     animation-delay: calc(var(--d, 0) * 8ms + 300ms);
 }

 @keyframes jcCell {
     to {
         opacity: 1;
     }
 }

 .jc-grid span.l1 {
     background: #FFE8D6;
 }

 .jc-grid span.l2 {
     background: #FFB27F;
 }

 .jc-grid span.l3 {
     background: #F48A4F;
 }

 .jc-grid span.l4 {
     background: #CF5A22;
 }

 /* Stats row */
 .jc-stats {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: .7rem;
     margin-bottom: 1rem;
 }

 .jc-stat {
     padding: .75rem .9rem;
     background: #fff;
     border: 1px solid rgba(207, 90, 34, 0.08);
     border-radius: 12px;
     opacity: 0;
     transform: translateY(8px);
     transition: opacity 520ms var(--ease), transform 520ms var(--ease);
 }

 .journey-card.in .jc-stat {
     opacity: 1;
     transform: none;
 }

 .journey-card.in .jc-stat:nth-child(1) {
     transition-delay: 500ms;
 }

 .journey-card.in .jc-stat:nth-child(2) {
     transition-delay: 620ms;
 }

 .journey-card.in .jc-stat:nth-child(3) {
     transition-delay: 740ms;
 }

 .jc-stat .k {
     font-family: var(--font-display);
     font-size: 1.4rem;
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--c-text);
     line-height: 1;
     font-variant-numeric: tabular-nums;
     display: flex;
     align-items: baseline;
     gap: 2px;
 }

 .jc-stat .k .u {
     color: var(--o-500);
     font-size: .9rem;
     font-weight: 700;
 }

 .jc-stat .v {
     font-size: .7rem;
     color: var(--c-muted);
     margin-top: .3rem;
     letter-spacing: .02em;
 }

 .jc-stat .trend {
     font-size: .72rem;
     color: var(--c-success, #2F8F5F);
     font-weight: 600;
     margin-top: .3rem;
     display: inline-flex;
     align-items: center;
     gap: 2px;
 }

 .jc-badges {
     position: relative;
     z-index: 1;
     display: flex;
     flex-wrap: wrap;
     gap: .4rem;
     padding-top: 1rem;
     border-top: 1px dashed rgba(207, 90, 34, 0.16);
 }

 .jc-badge {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     padding: .3rem .6rem;
     background: rgba(255, 255, 255, 0.75);
     border: 1px solid rgba(207, 90, 34, 0.12);
     border-radius: 999px;
     font-size: .72rem;
     font-weight: 600;
     color: var(--c-text-2);
     opacity: 0;
     transform: translateY(4px);
     transition: opacity 400ms var(--ease), transform 400ms var(--ease);
 }

 .journey-card.in .jc-badge {
     opacity: 1;
     transform: none;
 }

 .journey-card.in .jc-badge:nth-child(1) {
     transition-delay: 880ms;
 }

 .journey-card.in .jc-badge:nth-child(2) {
     transition-delay: 960ms;
 }

 .journey-card.in .jc-badge:nth-child(3) {
     transition-delay: 1040ms;
 }

 .journey-card.in .jc-badge:nth-child(4) {
     transition-delay: 1120ms;
 }

 .jc-badge::before {
     content: "";
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--o-500);
 }

 /* ============ ALUMNI LOGO MARQUEE (dark) ============ */
 .alumni-band {
     position: relative;
     padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem);
     background: linear-gradient(180deg, #15130F 0%, #0F0D0A 100%);
     color: #E7DFD2;
     overflow: hidden;
     border-top: 1px solid rgba(255, 255, 255, 0.06);
     border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }

 .alumni-band::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
         radial-gradient(500px 300px at 15% 20%, rgba(244, 138, 79, 0.2), transparent 60%),
         radial-gradient(600px 350px at 85% 80%, rgba(232, 106, 44, 0.14), transparent 60%);
     pointer-events: none;
 }

 .alumni-band::after {
     content: "";
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
     -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
     pointer-events: none;
 }

 .alumni-inner {
     position: relative;
     z-index: 1;
 }

 .alumni-head {
     text-align: center;
     max-width: 720px;
     margin: 0 auto 2.25rem;
 }

 .alumni-head .eyebrow {
     background: rgba(255, 255, 255, 0.05);
     border-color: rgba(255, 255, 255, 0.12);
     color: #FFD1AD;
 }

 .alumni-head h2 {
     color: #fff;
     font-size: clamp(1.6rem, 2.6vw, 2.2rem);
     letter-spacing: -0.02em;
     line-height: 1.15;
     margin-top: .85rem;
 }

 .alumni-head h2 .hl {
     background: linear-gradient(120deg, #F5A623, #F48A4F);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .alumni-head .live {
     display: inline-flex;
     align-items: center;
     gap: .45rem;
     padding: .4rem .75rem;
     background: rgba(232, 106, 44, 0.12);
     border: 1px solid rgba(244, 138, 79, 0.25);
     color: #FFD1AD;
     border-radius: 999px;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
 }

 .alumni-head .live .ld {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #F5A623;
     box-shadow: 0 0 8px #F5A623;
     animation: jcPulse 1.6s ease-in-out infinite;
 }

 .marquee {
     position: relative;
     mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
     -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
     overflow: hidden;
 }

 .marquee+.marquee {
     margin-top: 1rem;
 }

 .marquee-track {
     display: inline-flex;
     gap: 2rem;
     padding-right: 2rem;
     white-space: nowrap;
     animation: mqScroll 42s linear infinite;
 }

 .marquee.rtl .marquee-track {
     animation-name: mqScrollRTL;
     animation-duration: 48s;
 }

 .marquee:hover .marquee-track {
     animation-play-state: paused;
 }

 @keyframes mqScroll {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 @keyframes mqScrollRTL {
     from {
         transform: translateX(-50%);
     }

     to {
         transform: translateX(0);
     }
 }

 .logo-tile {
     display: inline-flex;
     align-items: center;
     gap: .7rem;
     padding: .9rem 1.4rem;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 14px;
     color: #E7DFD2;
     font-size: 1.05rem;
     font-weight: 700;
     letter-spacing: -0.015em;
     transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
     flex-shrink: 0;
 }

 .logo-tile:hover {
     background: rgba(232, 106, 44, 0.1);
     border-color: rgba(244, 138, 79, 0.35);
     color: #fff;
     transform: translateY(-2px);
 }

 .logo-tile .mark {
     width: 32px;
     height: 32px;
     border-radius: 9px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #fff;
     color: #FFD1AD;
     flex-shrink: 0;
     overflow: hidden;
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
 }

 .logo-tile .mark svg {
     width: 18px;
     height: 18px;
 }

 .logo-tile .mark .logo-ficon {
     width: 22px;
     height: 22px;
     object-fit: contain;
     display: block;
 }

 /* ============ FOUNDERS — premium spotlight (rounded-rectangle portraits) ============ */
 .founders-hero {
     padding: clamp(4rem, 7vw, 6rem) 0;
     position: relative;
     overflow: hidden;
     isolation: isolate;
 }

 .founders-hero::before {
     content: "";
     position: absolute;
     z-index: -1;
     left: -10%;
     top: 10%;
     width: 50%;
     aspect-ratio: 1;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(244, 138, 79, 0.14), transparent 65%);
     pointer-events: none;
 }

 .founders-hero::after {
     content: "LEADERSHIP";
     position: absolute;
     top: 3%;
     right: -2%;
     font-size: clamp(5rem, 10vw, 11rem);
     font-weight: 800;
     letter-spacing: -0.06em;
     color: rgba(232, 106, 44, 0.05);
     pointer-events: none;
     line-height: 0.85;
     z-index: -1;
 }

 .founders-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.75rem;
 }

 .founder-spot {
     position: relative;
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius-xl);
     padding: 1.75rem;
     display: grid;
     grid-template-columns: 220px 1fr;
     gap: 1.85rem;
     align-items: stretch;
     overflow: hidden;
     isolation: isolate;
     opacity: 0;
     transform: translateY(24px);
     transition: opacity 800ms var(--ease), transform 800ms var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
 }

 .founders-grid.in .founder-spot {
     opacity: 1;
     transform: none;
 }

 .founders-grid.in .founder-spot:nth-child(1) {
     transition-delay: 120ms;
 }

 .founders-grid.in .founder-spot:nth-child(2) {
     transition-delay: 280ms;
 }

 .founder-spot:hover {
     box-shadow: var(--shadow-lg);
     border-color: var(--o-200);
     transform: translateY(-4px);
 }

 .founder-spot:hover .fp-frame {
     transform: translateY(-4px) rotate(-0.6deg);
     box-shadow: 0 40px 80px -30px rgba(60, 30, 10, 0.35);
 }

 /* Rounded-rectangle portrait frame */
 .fp-frame {
     position: relative;
     border-radius: 20px;
     padding: 6px;
     background:
         linear-gradient(160deg, var(--o-400), var(--o-600) 40%, #F5A623 70%, var(--o-300) 100%);
     box-shadow: 0 24px 48px -22px rgba(60, 30, 10, 0.28);
     transition: transform 600ms var(--ease), box-shadow 600ms var(--ease);
     transform-style: preserve-3d;
 }

 .fp-frame::before {
     content: "";
     position: absolute;
     inset: -1px;
     border-radius: 21px;
     background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 40%);
     pointer-events: none;
     mix-blend-mode: overlay;
     z-index: 2;
 }

 .fp-photo {
     position: relative;
     z-index: 1;
     width: 100%;
     aspect-ratio: 4 / 5;
     border-radius: 15px;
     overflow: hidden;
     background: linear-gradient(135deg, #FFF1E3 0%, #FFD1AD 50%, #F48A4F 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     isolation: isolate;
 }

 .fp-photo img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
         object-position: top; 
     display: block;
     z-index: 1;
 }

 .fp-photo .fallback {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-display);
     color: #fff;
     font-weight: 800;
     font-size: 3.6rem;
     letter-spacing: .02em;
     text-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
 }

 .fp-photo::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 2;
     background: radial-gradient(140px 70px at 30% 18%, rgba(255, 255, 255, 0.3), transparent 70%);
     pointer-events: none;
 }

 .fp-photo::after {
     content: "";
     position: absolute;
     left: -60%;
     top: -50%;
     width: 65%;
     height: 150%;
     background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.32) 50%, transparent 60%);
     transform: translateX(0) rotate(15deg);
     pointer-events: none;
     z-index: 3;
     transition: transform 1.1s var(--ease);
 }

 .founder-spot:hover .fp-photo::after {
     transform: translateX(260%) rotate(15deg);
 }

 /* Corner brackets for editorial feel */
 .fp-frame .corner {
     position: absolute;
     z-index: 3;
     width: 18px;
     height: 18px;
     border: 2px solid rgba(255, 255, 255, 0.9);
 }

 .fp-frame .corner.tl {
     top: 14px;
     left: 14px;
     border-right: none;
     border-bottom: none;
     border-top-left-radius: 4px;
 }

 .fp-frame .corner.tr {
     top: 14px;
     right: 14px;
     border-left: none;
     border-bottom: none;
     border-top-right-radius: 4px;
 }

 .fp-frame .corner.bl {
     bottom: 14px;
     left: 14px;
     border-right: none;
     border-top: none;
     border-bottom-left-radius: 4px;
 }

 .fp-frame .corner.br {
     bottom: 14px;
     right: 14px;
     border-left: none;
     border-top: none;
     border-bottom-right-radius: 4px;
 }

 /* Little name-plate overlay in bottom corner of the photo */
 .fp-frame .plate {
     position: absolute;
     left: 18px;
     bottom: 18px;
     z-index: 3;
     background: rgba(15, 13, 10, 0.62);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     color: #FFE8D6;
     padding: .35rem .6rem;
     border-radius: 8px;
     font-size: .68rem;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .fp-body {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: .25rem 0;
 }

 .fp-body .role {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--o-700);
     background: var(--o-50);
     border: 1px solid var(--o-100);
     padding: .35rem .7rem;
     border-radius: 999px;
     margin-bottom: .85rem;
     width: fit-content;
 }

 .fp-body .role::before {
     content: "";
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--o-500);
 }

 .fp-body h3 {
     font-size: 1.7rem;
     margin: 0 0 .25rem;
     letter-spacing: -0.025em;
 }

 .fp-body .title {
     font-size: .95rem;
     color: var(--o-700);
     font-weight: 600;
     margin-bottom: 1rem;
     display: inline-flex;
     align-items: center;
     gap: .4rem;
 }

 .fp-body p.quote {
     font-size: .98rem;
     color: var(--c-text-2);
     margin: 0 0 1.25rem;
     line-height: 1.6;
     position: relative;
     padding-left: 1rem;
 }

 .fp-body p.quote::before {
     content: "";
     position: absolute;
     left: 0;
     top: .15em;
     bottom: .15em;
     width: 3px;
     border-radius: 3px;
     background: linear-gradient(180deg, var(--o-500), var(--o-300));
 }

 .fp-meta {
     display: flex;
     gap: 1.4rem;
     align-items: center;
     padding-top: 1rem;
     border-top: 1px dashed var(--c-line);
     margin-top: auto;
 }

 .fp-meta .m-item {
     display: flex;
     flex-direction: column;
 }

 .fp-meta .m-item .k {
     font-size: .9rem;
     font-weight: 700;
     color: var(--c-text);
     letter-spacing: -0.01em;
 }

 .fp-meta .m-item .v {
     font-size: .72rem;
     color: var(--c-muted);
     margin-top: 2px;
 }

 .fp-meta .socials {
     margin-left: auto;
     display: inline-flex;
     gap: .4rem;
 }

 .fp-meta .socials a {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: var(--c-cream);
     color: var(--c-text-2);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
 }

 .fp-meta .socials a:hover {
     background: var(--o-500);
     color: #fff;
     transform: translateY(-2px);
 }

 .founders-note {
     margin-top: 1.75rem;
     padding: 1.35rem 1.5rem;
     background: linear-gradient(100deg, #FFFBF7, #FFF2E4);
     border: 1px solid var(--o-100);
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     gap: 1.15rem;
     flex-wrap: wrap;
 }

 .founders-note .qmark {
     width: 46px;
     height: 46px;
     border-radius: 12px;
     background: linear-gradient(135deg, var(--o-400), var(--o-600));
     color: #fff;
     flex-shrink: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-family: var(--font-display);
     font-weight: 800;
     font-size: 1.8rem;
     line-height: 1;
     box-shadow: 0 10px 24px -10px rgba(232, 106, 44, 0.5);
 }

 .founders-note p {
     margin: 0;
     flex: 1;
     min-width: 240px;
     color: var(--c-text-2);
     font-size: .95rem;
     line-height: 1.55;
 }

 .founders-note strong {
     color: var(--c-text);
     font-weight: 700;
 }

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

     .founder-spot {
         grid-template-columns: 200px 1fr;
         gap: 1.25rem;
     }
 }

 @media (max-width: 640px) {
     .founder-spot {
         grid-template-columns: 1fr;
         text-align: left;
     }

     .fp-frame {
         max-width: 280px;
         margin: 0 auto;
     }
 }

 @media (max-width: 520px) {
     .journey-card {
         padding: 1.15rem;
     }

     .jc-grid {
         grid-template-columns: repeat(20, 1fr);
     }

     .jc-years {
         font-size: .65rem;
     }

     .fp-meta {
         flex-wrap: wrap;
     }

     .fp-meta .socials {
         margin-left: 0;
     }
 }

 /* ============ CURRICULUM PREVIEW — 4-year stepped ladder ============ */
 .yr-preview {
     padding: clamp(4rem, 8vw, 7rem) 0;
     position: relative;
     overflow: hidden;
     isolation: isolate;
 }

 .yr-preview::before {
     content: "4 YEARS";
     position: absolute;
     z-index: -1;
     top: 4%;
     left: -2%;
     font-size: clamp(5rem, 11vw, 12rem);
     font-weight: 800;
     letter-spacing: -0.06em;
     color: rgba(232, 106, 44, 0.04);
     line-height: .85;
     pointer-events: none;
 }

 .yr-head {
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: end;
     gap: 2rem;
     margin-bottom: 3rem;
 }

 .yr-head .title h2 {
     font-size: clamp(2rem, 3.4vw, 2.8rem);
     line-height: 1.08;
     letter-spacing: -0.025em;
     margin: .5rem 0 0;
     max-width: 22ch;
 }

 .yr-head .title h2 .hl {
     background: linear-gradient(120deg, var(--o-700), var(--o-400));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .yr-head .sub {
     max-width: 44ch;
     color: var(--c-text-2);
     font-size: 1rem;
     margin: 0;
 }

 .yr-ladder {
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
     padding-top: 40px;
 }

 /* Connecting progress line across the top */
 .yr-ladder::before {
     content: "";
     position: absolute;
     left: 10%;
     right: 10%;
     top: 10px;
     height: 2px;
     background: var(--c-line);
     border-radius: 2px;
     z-index: 0;
 }

 .yr-ladder::after {
     content: "";
     position: absolute;
     left: 10%;
     top: 10px;
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--o-400), var(--o-600), #F5A623);
     border-radius: 2px;
     transition: width 1800ms cubic-bezier(.2, .7, .2, 1) 300ms;
     z-index: 1;
 }

 .yr-ladder.in::after {
     width: 80%;
 }

 /* Dots at each step */
 .yr-step {
     position: relative;
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     overflow: hidden;
     isolation: isolate;
     min-height: 340px;
     display: flex;
     flex-direction: column;
     opacity: 0;
     transform: translateY(22px);
     transition: opacity 700ms var(--ease), transform 700ms var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
 }

 .yr-ladder.in .yr-step {
     opacity: 1;
     transform: none;
 }

 .yr-ladder.in .yr-step:nth-child(1) {
     transition-delay: 150ms;
 }

 .yr-ladder.in .yr-step:nth-child(2) {
     transition-delay: 350ms;
 }

 .yr-ladder.in .yr-step:nth-child(3) {
     transition-delay: 550ms;
 }

 .yr-ladder.in .yr-step:nth-child(4) {
     transition-delay: 750ms;
 }

 /* Step-up ladder effect — each column nudges up */
 .yr-step:nth-child(1) {
     margin-top: 30px;
 }

 .yr-step:nth-child(2) {
     margin-top: 20px;
 }

 .yr-step:nth-child(3) {
     margin-top: 10px;
 }

 .yr-step:nth-child(4) {
     margin-top: 0;
 }

 /* Node on the progress line */
 .yr-step .node {
     position: absolute;
     top: -35px;
     left: 50%;
     transform: translateX(-50%);
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: var(--c-bg);
     border: 3px solid var(--c-line-2);
     box-shadow: 0 0 0 4px var(--c-bg);
     z-index: 2;
     transition: border-color 400ms var(--ease), transform 400ms var(--ease);
 }

 .yr-ladder.in .yr-step:nth-child(1) .node {
     border-color: var(--o-500);
     transition-delay: 400ms;
 }

 .yr-ladder.in .yr-step:nth-child(2) .node {
     border-color: var(--o-500);
     transition-delay: 800ms;
 }

 .yr-ladder.in .yr-step:nth-child(3) .node {
     border-color: var(--o-500);
     transition-delay: 1200ms;
 }

 .yr-ladder.in .yr-step:nth-child(4) .node {
     border-color: #F5A623;
     transform: translateX(-50%) scale(1.15);
     transition-delay: 1600ms;
 }

 .yr-step:hover {
     box-shadow: var(--shadow-lg);
     border-color: var(--o-200);
     transform: translateY(-4px);
 }

 .yr-step::before {
     content: "";
     position: absolute;
     z-index: -1;
     right: -40px;
     top: -40px;
     width: 140px;
     height: 140px;
     border-radius: 50%;
     background: radial-gradient(circle at 30% 30%, var(--o-50), transparent 65%);
     opacity: .6;
     transition: transform 700ms var(--ease), opacity var(--t) var(--ease);
 }

 .yr-step:hover::before {
     transform: scale(1.35);
     opacity: 1;
 }

 .yr-step .yr-head-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1.1rem;
 }

 .yr-step .yr-num {
     font-family: var(--font-display);
     font-size: 2rem;
     font-weight: 800;
     letter-spacing: -0.04em;
     line-height: 1;
     background: linear-gradient(135deg, var(--o-600), var(--o-400));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     display: inline-flex;
     align-items: baseline;
     gap: 2px;
 }

 .yr-step .yr-num .of {
     font-size: .85rem;
     color: var(--c-muted-2);
     font-weight: 500;
     -webkit-text-fill-color: var(--c-muted-2);
 }

 .yr-step .yr-ico {
     width: 40px;
     height: 40px;
     border-radius: 11px;
     background: linear-gradient(135deg, var(--o-50), #FFE8D6);
     border: 1px solid var(--o-100);
     color: var(--o-600);
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .yr-step .yr-ico svg {
     width: 20px;
     height: 20px;
 }

 .yr-step .yr-tag {
     display: inline-block;
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--o-700);
     background: var(--o-50);
     border: 1px solid var(--o-100);
     padding: .25rem .55rem;
     border-radius: 999px;
     margin-bottom: .6rem;
 }

 .yr-step h3 {
     font-size: 1.2rem;
     letter-spacing: -0.02em;
     margin: 0 0 .4rem;
 }

 .yr-step p {
     font-size: .9rem;
     color: var(--c-text-2);
     margin: 0 0 1rem;
     line-height: 1.5;
 }

 .yr-step .yr-chips {
     display: flex;
     flex-wrap: wrap;
     gap: .35rem;
 }

 .yr-step .yr-chips .chip {
     padding: .28rem .6rem;
     border-radius: 999px;
     background: var(--c-bg);
     border: 1px solid var(--c-line);
     color: var(--c-text-2);
     font-size: .76rem;
     font-weight: 500;
 }

 .yr-step .yr-foot {
     margin-top: auto;
     padding-top: 1rem;
     border-top: 1px dashed var(--c-line);
     display: flex;
     align-items: center;
     gap: .5rem;
     font-size: .78rem;
     color: var(--c-muted);
 }

 .yr-step .yr-foot svg {
     color: var(--o-500);
     flex-shrink: 0;
 }

 .yr-step .yr-foot strong {
     color: var(--c-text);
     font-weight: 700;
 }

 .yr-step.final {
     background: linear-gradient(180deg, #FFF6EF 0%, var(--c-surface) 100%);
     border-color: var(--o-200);
     box-shadow: 0 18px 44px -22px rgba(232, 106, 44, 0.28);
 }

 .yr-step.final .yr-num {
     background: linear-gradient(135deg, #F5A623, var(--o-600));
     -webkit-background-clip: text;
     background-clip: text;
 }

 .yr-step.final .milestone {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     position: absolute;
     top: 1.5rem;
     right: 1.5rem;
     padding: .28rem .55rem;
     border-radius: 999px;
     background: #1D1B18;
     color: #FFE8D6;
     font-size: .62rem;
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
 }

 .yr-step.final .milestone::before {
     content: "";
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: #F5A623;
     box-shadow: 0 0 6px #F5A623;
     animation: calPulse 1.6s ease-in-out infinite;
 }

 .yr-footer {
     margin-top: 2.5rem;
     display: flex;
     justify-content: center;
 }

 @media (max-width: 1000px) {
     .yr-head {
         grid-template-columns: 1fr;
         gap: 1rem;
     }

     .yr-ladder {
         grid-template-columns: repeat(2, 1fr);
         padding-top: 0;
     }

     .yr-ladder::before, .yr-ladder::after {
         display: none;
     }

     .yr-step, .yr-step:nth-child(n) {
         margin-top: 0;
     }

     .yr-step .node {
         display: none;
     }
 }

 @media (max-width: 600px) {
     .yr-ladder {
         grid-template-columns: 1fr;
     }
 }

 /* ============ CODE FROM DAY 1 — MacBook mockup ============ */
 .code-day1 {
     padding: clamp(4rem, 8vw, 7rem) 0;
     position: relative;
     overflow: hidden;
     isolation: isolate;
     background: linear-gradient(180deg, var(--c-bg) 0%, #FFF6EF 100%);
 }

 .code-day1::before {
     content: "DAY 1";
     position: absolute;
     z-index: -1;
     top: 4%;
     right: -2%;
     font-size: clamp(6rem, 13vw, 15rem);
     font-weight: 800;
     letter-spacing: -0.06em;
     color: rgba(232, 106, 44, 0.05);
     line-height: .85;
     pointer-events: none;
 }

 .code-wrap {
     display: grid;
     grid-template-columns: 0.85fr 1.15fr;
     gap: clamp(2rem, 4vw, 3.5rem);
     align-items: center;
 }

 .code-copy .eyebrow {
     margin-bottom: 1rem;
 }

 .code-copy h2 {
     font-size: clamp(2rem, 3.4vw, 2.8rem);
     letter-spacing: -0.025em;
     line-height: 1.08;
     margin: 0 0 1.1rem;
 }

 .code-copy h2 .hl {
     background: linear-gradient(120deg, var(--o-700), var(--o-400));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .code-copy p.lead {
     font-size: 1.05rem;
     color: var(--c-text-2);
     margin: 0 0 1.5rem;
     max-width: 44ch;
     line-height: 1.6;
 }

 .code-feats {
     display: grid;
     gap: .7rem;
     margin-bottom: 1.5rem;
 }

 .code-feat {
     display: grid;
     grid-template-columns: 22px 1fr;
     gap: .7rem;
     align-items: start;
     font-size: .94rem;
     color: var(--c-text-2);
     line-height: 1.5;
 }

 .code-feat svg {
     color: var(--o-500);
     margin-top: 3px;
 }

 .code-feat strong {
     color: var(--c-text);
     font-weight: 700;
 }

 .code-note {
     padding: .95rem 1.1rem;
     background: #fff;
     border: 1px dashed var(--o-200);
     border-radius: 12px;
     display: flex;
     align-items: center;
     gap: .8rem;
     font-size: .88rem;
     color: var(--c-text-2);
     line-height: 1.5;
 }

 .code-note .cn-i {
     width: 30px;
     height: 30px;
     border-radius: 8px;
     background: linear-gradient(135deg, var(--o-400), var(--o-600));
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .code-note .cn-i svg {
     width: 15px;
     height: 15px;
 }

 .code-note a {
     color: var(--o-700);
     font-weight: 700;
     text-decoration: underline;
     text-decoration-color: rgba(207, 90, 34, 0.35);
     text-underline-offset: 3px;
 }

 .code-note a:hover {
     text-decoration-color: var(--o-600);
 }

 /* ---- MacBook Pro mockup ---- */
 .mac-stage {
     position: relative;
     padding-bottom: 3%;
     perspective: 1600px;
 }

 .mac-stage::before {
     /* soft ambient glow under the laptop */
     content: "";
     position: absolute;
     z-index: 0;
     left: 5%;
     right: 5%;
     bottom: -8%;
     height: 80px;
     background: radial-gradient(ellipse at center, rgba(232, 106, 44, 0.28), transparent 70%);
     filter: blur(12px);
     pointer-events: none;
 }

 .macbook {
     position: relative;
     z-index: 1;
     width: 100%;
     transform: rotateX(2deg);
     transform-style: preserve-3d;
     transition: transform 800ms var(--ease);
     animation: macFloat 6s ease-in-out infinite alternate;
 }

 @keyframes macFloat {
     0% {
         transform: rotateX(2deg) translateY(0);
     }

     100% {
         transform: rotateX(1deg) translateY(-6px);
     }
 }

 .code-day1.in .macbook {
     animation: macFloat 6s ease-in-out infinite alternate, macEnter 900ms var(--ease) both;
 }

 @keyframes macEnter {
     from {
         opacity: 0;
         transform: rotateX(6deg) translateY(30px) scale(.96);
     }

     to {
         opacity: 1;
         transform: rotateX(2deg) translateY(0) scale(1);
     }
 }

 .mac-screen-wrap {
     position: relative;
     background: linear-gradient(180deg, #161412 0%, #0f0d0a 100%);
     border-radius: 18px 18px 4px 4px;
     padding: 14px 14px 18px;
     box-shadow:
         0 30px 60px -20px rgba(20, 10, 0, 0.45),
         0 0 0 1px rgba(255, 255, 255, 0.04) inset,
         0 1px 0 rgba(255, 255, 255, 0.08) inset;
 }

 .mac-notch {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 90px;
     height: 14px;
     background: #0a0907;
     border-radius: 0 0 8px 8px;
     z-index: 3;
 }

 .mac-screen {
     position: relative;
     background: #0b0a08;
     border-radius: 6px;
     overflow: hidden;
     aspect-ratio: 16 / 10;
     border: 1px solid rgba(255, 255, 255, 0.05);
 }

 /* Browser/editor window chrome */
 .ed-window {
     position: absolute;
     inset: 0;
     display: grid;
     grid-template-rows: auto 1fr;
     background: #1D1B18;
 }

 .ed-bar {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 9px 12px;
     background: linear-gradient(180deg, #2a2824 0%, #1f1d1a 100%);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .ed-bar .dots {
     display: flex;
     gap: 6px;
 }

 .ed-bar .dot {
     width: 11px;
     height: 11px;
     border-radius: 50%;
 }

 .ed-bar .dot.r {
     background: #FF5F57;
 }

 .ed-bar .dot.y {
     background: #FEBC2E;
 }

 .ed-bar .dot.g {
     background: #28C840;
 }

 .ed-bar .tabs {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-left: 8px;
     flex: 1;
     overflow: hidden;
     min-width: 0;
 }

 .ed-bar .tab {
     padding: 4px 10px;
     border-radius: 6px 6px 0 0;
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     font-size: 11px;
     color: #A69D8D;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid transparent;
     display: inline-flex;
     align-items: center;
     gap: 5px;
     white-space: nowrap;
 }

 .ed-bar .tab.active {
     color: #FFE8D6;
     background: #1D1B18;
     border-color: rgba(255, 255, 255, 0.06);
     border-bottom-color: #1D1B18;
 }

 .ed-bar .tab .tab-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #F48A4F;
 }

 .ed-bar .run {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     padding: 4px 10px;
     border-radius: 6px;
     background: linear-gradient(135deg, var(--o-500), var(--o-700));
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .04em;
     text-transform: uppercase;
     white-space: nowrap;
 }

 .ed-body {
     display: grid;
     grid-template-columns: 40px 1fr 40%;
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     font-size: 12.5px;
     line-height: 1.55;
     color: #E7DFD2;
     min-height: 0;
     overflow: hidden;
 }

 .ed-gutter {
     background: #15130F;
     padding: 10px 0;
     text-align: right;
     color: #4a453d;
     user-select: none;
 }

 .ed-gutter span {
     display: block;
     padding: 0 8px;
 }

 .ed-code {
     padding: 10px 14px;
     background: #1D1B18;
     overflow: hidden;
     white-space: pre;
 }

 .ed-code .ln {
     display: block;
     min-height: 1.55em;
 }

 .ed-code .c-kw {
     color: #F48A4F;
 }

 .ed-code .c-st {
     color: #7ED0A8;
 }

 .ed-code .c-fn {
     color: #F5C06A;
 }

 .ed-code .c-co {
     color: #6B645A;
     font-style: italic;
 }

 .ed-code .c-nu {
     color: #FFB27F;
 }

 .ed-code .c-pu {
     color: #C9BFAF;
 }

 .ed-code .c-op {
     color: #A69D8D;
 }

 .ed-code .caret {
     display: inline-block;
     width: 2px;
     height: 1.1em;
     background: var(--o-400);
     vertical-align: text-bottom;
     animation: caretBlink 1s steps(1) infinite;
     margin-left: 1px;
 }

 @keyframes caretBlink {
     50% {
         opacity: 0;
     }
 }

 .ed-side {
     background: #15130F;
     border-left: 1px solid rgba(255, 255, 255, 0.05);
     padding: 10px 12px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     overflow: hidden;
 }

 .ed-side-title {
     font-size: 10px;
     color: #6B645A;
     font-weight: 700;
     letter-spacing: .14em;
     text-transform: uppercase;
     margin-bottom: 2px;
 }

 .term-line {
     font-size: 11.5px;
     line-height: 1.5;
     color: #A69D8D;
 }

 .term-line.ok {
     color: #7ED0A8;
 }

 .term-line.arrow {
     color: var(--o-400);
 }

 .term-line .prompt {
     color: #6B645A;
     margin-right: 4px;
 }

 /* Keyboard deck */
 .mac-deck {
     position: relative;
     height: 18px;
     margin-top: -2px;
     background:
         linear-gradient(180deg, #d4cec3 0%, #aea89d 40%, #8d877b 70%, #6d6861 100%);
     border-radius: 0 0 24px 24px;
     box-shadow:
         0 10px 20px -5px rgba(20, 10, 0, 0.2),
         inset 0 1px 0 rgba(255, 255, 255, 0.6);
 }

 .mac-deck::before {
     /* hinge shadow */
     content: "";
     position: absolute;
     top: 0;
     left: 12%;
     right: 12%;
     height: 3px;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent);
 }

 .mac-deck::after {
     /* trackpad slot */
     content: "";
     position: absolute;
     bottom: 4px;
     left: 50%;
     transform: translateX(-50%);
     width: 26%;
     height: 3px;
     background: rgba(0, 0, 0, 0.18);
     border-radius: 2px;
 }

 /* Floating accent chips around the laptop */
 .mac-chip {
     position: absolute;
     background: #fff;
     border: 1px solid var(--c-line);
     border-radius: 12px;
     padding: .55rem .75rem;
     box-shadow: var(--shadow);
     font-size: .78rem;
     font-weight: 600;
     color: var(--c-text);
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     z-index: 2;
 }

 .mac-chip .cb-i {
     width: 24px;
     height: 24px;
     border-radius: 7px;
     background: var(--o-50);
     color: var(--o-600);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .mac-chip .cb-i svg {
     width: 13px;
     height: 13px;
 }

 .mac-chip.one {
     top: 4%;
     left: -3%;
     animation: macChip1 5s ease-in-out infinite alternate;
 }

 .mac-chip.two {
     top: 42%;
     right: -3%;
     animation: macChip2 5.5s ease-in-out infinite alternate;
 }

 .mac-chip.three {
     bottom: 10%;
     left: 6%;
     animation: macChip3 6s ease-in-out infinite alternate;
 }

 @keyframes macChip1 {
     0% {
         transform: translateY(0);
     }

     100% {
         transform: translateY(-6px);
     }
 }

 @keyframes macChip2 {
     0% {
         transform: translateY(0);
     }

     100% {
         transform: translateY(-8px);
     }
 }

 @keyframes macChip3 {
     0% {
         transform: translateY(0);
     }

     100% {
         transform: translateY(-5px);
     }
 }

 @media (max-width: 1000px) {
     .code-wrap {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .mac-stage {
         max-width: 620px;
         margin: 0 auto;
     }

     .mac-chip.one {
         left: -1rem;
     }

     .mac-chip.two {
         right: -1rem;
     }
 }

 @media (max-width: 600px) {
     .ed-body {
         grid-template-columns: 32px 1fr;
         font-size: 11px;
     }

     .ed-side {
         display: none;
     }

     .ed-bar .tab {
         font-size: 10px;
         padding: 3px 8px;
     }

     .mac-chip {
         font-size: .72rem;
         padding: .45rem .6rem;
     }

     .mac-chip.three {
         display: none;
     }
 }

 /* ============ HOW IT ACTUALLY WORKS — weekly playbook ============ */
 .playbook {
     padding: clamp(4rem, 8vw, 7rem) 0;
     background: var(--c-surface);
     border-top: 1px solid var(--c-line);
     border-bottom: 1px solid var(--c-line);
     position: relative;
     overflow: hidden;
     isolation: isolate;
 }

 .playbook::before {
     content: "WEEK";
     position: absolute;
     z-index: -1;
     top: 2%;
     left: -2%;
     font-size: clamp(6rem, 13vw, 15rem);
     font-weight: 800;
     letter-spacing: -0.06em;
     color: rgba(232, 106, 44, 0.04);
     line-height: .85;
     pointer-events: none;
 }

 .playbook-grid {
     display: grid;
     grid-template-columns: 0.9fr 1.1fr;
     gap: clamp(2rem, 4vw, 3.5rem);
     align-items: start;
 }

 /* Left: learning loop */
 .loop-head {
     font-size: .75rem;
     font-weight: 700;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--o-700);
     display: inline-flex;
     align-items: center;
     gap: .55rem;
     margin-bottom: .9rem;
 }

 .loop-head::before {
     content: "";
     width: 24px;
     height: 1px;
     background: var(--o-500);
 }

 .loop-title {
     font-size: clamp(1.6rem, 2.6vw, 2.1rem);
     letter-spacing: -0.025em;
     line-height: 1.1;
     margin: 0 0 1.15rem;
 }

 .loop-title .hl {
     background: linear-gradient(120deg, var(--o-700), var(--o-400));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .loop-intro {
     color: var(--c-text-2);
     font-size: 1rem;
     margin: 0 0 1.75rem;
     line-height: 1.6;
     max-width: 44ch;
 }

 .loop-steps {
     position: relative;
     display: grid;
     gap: 0;
 }

 .loop-step {
     position: relative;
     display: grid;
     grid-template-columns: 44px 1fr;
     gap: 1rem;
     align-items: flex-start;
     padding: 0 0 1.25rem;
     opacity: 0;
     transform: translateX(-16px);
     transition: opacity 600ms var(--ease), transform 600ms var(--ease);
 }

 .playbook.in .loop-step {
     opacity: 1;
     transform: none;
 }

 .playbook.in .loop-step:nth-child(1) {
     transition-delay: 120ms;
 }

 .playbook.in .loop-step:nth-child(2) {
     transition-delay: 260ms;
 }

 .playbook.in .loop-step:nth-child(3) {
     transition-delay: 400ms;
 }

 .playbook.in .loop-step:nth-child(4) {
     transition-delay: 540ms;
 }

 .playbook.in .loop-step:nth-child(5) {
     transition-delay: 680ms;
 }

 .loop-step:last-child {
     padding-bottom: 0;
 }

 .loop-step::before {
     /* connector line to next step */
     content: "";
     position: absolute;
     left: 21px;
     top: 44px;
     width: 2px;
     height: calc(100% - 40px);
     background: linear-gradient(180deg, var(--o-400) 0%, var(--o-200) 100%);
     opacity: 0;
     transition: opacity 400ms var(--ease) 200ms;
 }

 .playbook.in .loop-step:not(:last-child)::before {
     opacity: 1;
 }

 .loop-num {
     width: 44px;
     height: 44px;
     border-radius: 14px;
     background: linear-gradient(135deg, #FFE8D6, var(--o-50));
     border: 1.5px solid var(--o-200);
     color: var(--o-700);
     font-weight: 800;
     font-size: .95rem;
     letter-spacing: .02em;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-variant-numeric: tabular-nums;
     position: relative;
     z-index: 2;
     transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease);
     flex-shrink: 0;
 }

 .loop-step:hover .loop-num {
     background: linear-gradient(135deg, var(--o-500), var(--o-700));
     color: #fff;
     transform: scale(1.08);
 }

 .loop-step .lc-body {
     padding-top: .35rem;
 }

 .loop-step .lc-title {
     font-size: 1.05rem;
     font-weight: 700;
     letter-spacing: -0.01em;
     color: var(--c-text);
     margin: 0 0 .3rem;
     display: inline-flex;
     align-items: center;
     gap: .6rem;
 }

 .loop-step .lc-title .verb {
     font-size: .68rem;
     font-weight: 700;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--o-700);
     background: var(--o-50);
     border: 1px solid var(--o-100);
     padding: .15rem .5rem;
     border-radius: 999px;
 }

 .loop-step .lc-desc {
     font-size: .88rem;
     color: var(--c-text-2);
     margin: 0;
     line-height: 1.5;
 }

 /* Right: calendar */
 .calendar {
     position: relative;
     background: linear-gradient(160deg, var(--c-bg) 0%, #FFF6EF 100%);
     border: 1px solid var(--o-100);
     border-radius: var(--radius-xl);
     padding: 1.25rem;
     box-shadow: var(--shadow-lg);
     overflow: hidden;
     isolation: isolate;
 }

 .calendar::before {
     content: "";
     position: absolute;
     z-index: 0;
     right: -30%;
     top: -30%;
     width: 60%;
     aspect-ratio: 1;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(232, 106, 44, 0.14), transparent 70%);
     pointer-events: none;
 }

 .cal-head {
     position: relative;
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     padding: .35rem .75rem 1rem;
     border-bottom: 1px solid rgba(207, 90, 34, 0.1);
     margin-bottom: .75rem;
 }

 .cal-head-title {
     display: flex;
     align-items: center;
     gap: .65rem;
     font-weight: 700;
     letter-spacing: -0.01em;
     font-size: .95rem;
 }

 .cal-head-title .cal-ico {
     width: 32px;
     height: 32px;
     border-radius: 9px;
     background: linear-gradient(135deg, var(--o-400), var(--o-600));
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 6px 14px -6px rgba(232, 106, 44, 0.5);
 }

 .cal-head-title .cal-ico svg {
     width: 16px;
     height: 16px;
 }

 .cal-head-sub {
     font-size: .75rem;
     color: var(--c-muted);
     margin-top: 2px;
     font-weight: 500;
 }

 .cal-head-right {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
 }

 .cal-week-nav {
     display: inline-flex;
     align-items: center;
     gap: .25rem;
     font-size: .78rem;
     color: var(--c-muted);
     font-weight: 600;
 }

 .cal-week-nav button {
     width: 26px;
     height: 26px;
     border-radius: 7px;
     background: rgba(255, 255, 255, 0.6);
     border: 1px solid rgba(207, 90, 34, 0.1);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--c-muted);
     cursor: pointer;
     transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
 }

 .cal-week-nav button:hover {
     background: var(--o-50);
     color: var(--o-700);
 }

 .cal-days {
     position: relative;
     z-index: 1;
     display: grid;
     gap: .5rem;
 }

 .cal-day {
     position: relative;
     display: grid;
     grid-template-columns: 72px 1fr;
     gap: 1rem;
     padding: .85rem .95rem;
     background: rgba(255, 255, 255, 0.78);
     border: 1px solid rgba(207, 90, 34, 0.08);
     border-radius: 12px;
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     opacity: 0;
     transform: translateX(14px);
     transition: opacity 600ms var(--ease), transform 600ms var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
 }

 .playbook.in .cal-day {
     opacity: 1;
     transform: none;
 }

 .playbook.in .cal-day:nth-child(1) {
     transition-delay: 280ms;
 }

 .playbook.in .cal-day:nth-child(2) {
     transition-delay: 400ms;
 }

 .playbook.in .cal-day:nth-child(3) {
     transition-delay: 520ms;
 }

 .playbook.in .cal-day:nth-child(4) {
     transition-delay: 640ms;
 }

 .playbook.in .cal-day:nth-child(5) {
     transition-delay: 760ms;
 }

 .cal-day:hover {
     background: #fff;
     border-color: var(--o-200);
 }

 .cal-day::before {
     /* left gradient accent bar */
     content: "";
     position: absolute;
     left: 0;
     top: 16%;
     bottom: 16%;
     width: 3px;
     background: linear-gradient(180deg, var(--o-500), var(--o-300));
     border-radius: 0 3px 3px 0;
     opacity: .4;
 }

 .cal-day.today {
     background: linear-gradient(100deg, #FFF6EF 0%, #FFE8D6 100%);
     border-color: var(--o-300);
     box-shadow: 0 10px 30px -18px rgba(232, 106, 44, 0.35);
 }

 .cal-day.today::before {
     opacity: 1;
     width: 4px;
 }

 .cal-day-label {
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 3px;
 }

 .cal-day-name {
     font-size: .72rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--c-muted);
     font-weight: 700;
 }

 .cal-day.today .cal-day-name {
     color: var(--o-700);
 }

 .cal-day-theme {
     font-size: 1rem;
     font-weight: 800;
     letter-spacing: -0.01em;
     color: var(--c-text);
 }

 .cal-day .live-pill {
     display: inline-flex;
     align-items: center;
     gap: .3rem;
     padding: .16rem .5rem;
     background: var(--o-500);
     color: #fff;
     border-radius: 999px;
     font-size: .62rem;
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-top: 4px;
     width: fit-content;
 }

 .cal-day .live-pill .ld {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: #fff;
     animation: calPulse 1.6s ease-in-out infinite;
 }

 @keyframes calPulse {
     0%, 100% {
         opacity: .5;
     }

     50% {
         opacity: 1;
     }
 }

 .cal-sessions {
     display: flex;
     flex-wrap: wrap;
     gap: .4rem;
     align-items: center;
 }

 .cal-pill {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     padding: .35rem .65rem;
     border-radius: 999px;
     font-size: .76rem;
     font-weight: 600;
     border: 1px solid transparent;
 }

 .cal-pill .time {
     font-weight: 700;
     font-variant-numeric: tabular-nums;
 }

 .cal-pill.class {
     background: var(--o-50);
     color: var(--o-700);
     border-color: var(--o-100);
 }

 .cal-pill.lab {
     background: #EEF4EE;
     color: #2F6F4F;
     border-color: #D8EADB;
 }

 .cal-pill.proj {
     background: #F3EEFF;
     color: #4B3E8F;
     border-color: #E2D9F6;
 }

 .cal-pill.mentor {
     background: #FFF4E1;
     color: #8F6A22;
     border-color: #F7E7C1;
 }

 .cal-pill.prep {
     background: #EEF1F7;
     color: #3F4A66;
     border-color: #DDE3EE;
 }

 /* Hybrid: every session is theory + hands-on in the same block */
 .cal-pill.hybrid {
     background: linear-gradient(100deg, var(--o-50), #EEF4EE);
     color: var(--o-700);
     border: 1px solid var(--o-200);
     font-weight: 700;
 }

 .cal-pill.hybrid::before {
     content: "";
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--o-500), #2F8F5F);
     flex-shrink: 0;
 }

 /* Theory + Practical callout ribbon inside the calendar */
 .cal-note {
     margin-top: .85rem;
     padding: .75rem .9rem;
     display: flex;
     align-items: center;
     gap: .65rem;
     background: linear-gradient(100deg, #FFFBF7 0%, #FFF2E4 100%);
     border: 1px dashed var(--o-200);
     border-radius: 10px;
     position: relative;
     z-index: 1;
 }

 .cal-note .cn-ico {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     background: linear-gradient(135deg, var(--o-400), var(--o-600));
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .cal-note .cn-ico svg {
     width: 14px;
     height: 14px;
 }

 .cal-note p {
     margin: 0;
     font-size: .82rem;
     line-height: 1.4;
     color: var(--c-text-2);
 }

 .cal-note p strong {
     color: var(--c-text);
     font-weight: 700;
 }

 /* Metrics strip (bottom of section) */
 .play-metrics {
     margin-top: 2rem;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
     background: var(--c-bg);
     border: 1px solid var(--c-line);
     border-radius: var(--radius-lg);
     overflow: hidden;
 }

 .pm-cell {
     padding: 1.25rem 1.5rem;
     position: relative;
     opacity: 0;
     transform: translateY(10px);
     transition: opacity 520ms var(--ease), transform 520ms var(--ease);
 }

 .playbook.in .pm-cell {
     opacity: 1;
     transform: none;
 }

 .playbook.in .pm-cell:nth-child(1) {
     transition-delay: 900ms;
 }

 .playbook.in .pm-cell:nth-child(2) {
     transition-delay: 1000ms;
 }

 .playbook.in .pm-cell:nth-child(3) {
     transition-delay: 1100ms;
 }

 .playbook.in .pm-cell:nth-child(4) {
     transition-delay: 1200ms;
 }

 .pm-cell+.pm-cell::before {
     content: "";
     position: absolute;
     left: 0;
     top: 22%;
     bottom: 22%;
     width: 1px;
     background: var(--c-line);
 }

 .pm-k {
     font-family: var(--font-display);
     font-size: clamp(1.5rem, 2.4vw, 1.9rem);
     font-weight: 800;
     letter-spacing: -0.025em;
     color: var(--c-text);
     font-variant-numeric: tabular-nums;
     line-height: 1;
     display: flex;
     align-items: baseline;
     gap: .1rem;
 }

 .pm-k .u {
     color: var(--o-500);
     font-size: .85rem;
     font-weight: 700;
 }

 .pm-v {
     font-size: .78rem;
     color: var(--c-muted);
     margin-top: .4rem;
 }

 .playbook-foot {
     display: flex;
     justify-content: center;
     margin-top: 2rem;
 }

 @media (max-width: 1000px) {
     .playbook-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .calendar {
         max-width: 620px;
         margin-left: auto;
         margin-right: auto;
         width: 100%;
     }
 }

 @media (max-width: 700px) {
     .play-metrics {
         grid-template-columns: 1fr 1fr;
     }

     .pm-cell:nth-child(3)::before, .pm-cell:nth-child(2n+1)::before {
         display: none;
     }

     .cal-day {
         grid-template-columns: 60px 1fr;
         gap: .7rem;
         padding: .75rem .8rem;
     }

     .cal-day-name {
         font-size: .68rem;
     }

     .cal-day-theme {
         font-size: .9rem;
     }

     .cal-pill {
         font-size: .72rem;
         padding: .28rem .55rem;
     }
 }

 /* ============ WHY CB — premium numbered tiles ============ */
 .why-cb {
     padding: clamp(4rem, 8vw, 7rem) 0;
     position: relative;
     overflow: hidden;
     isolation: isolate;
 }

 .why-cb::before {
     content: "WHY";
     position: absolute;
     z-index: -1;
     top: -4%;
     right: -3%;
     font-size: clamp(6rem, 13vw, 14rem);
     font-weight: 800;
     letter-spacing: -0.06em;
     color: rgba(232, 106, 44, 0.045);
     line-height: .85;
     pointer-events: none;
 }

 .why-tiles {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.25rem;
 }

 .why-tile {
     position: relative;
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius-lg);
     padding: 2rem 1.75rem 1.75rem;
     overflow: hidden;
     isolation: isolate;
     min-height: 280px;
     display: flex;
     flex-direction: column;
     opacity: 0;
     transform: translateY(22px);
     transition: opacity 700ms var(--ease), transform 700ms var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
 }

 .why-tiles.in .why-tile {
     opacity: 1;
     transform: none;
 }

 .why-tiles.in .why-tile:nth-child(1) {
     transition-delay: 120ms;
 }

 .why-tiles.in .why-tile:nth-child(2) {
     transition-delay: 260ms;
 }

 .why-tiles.in .why-tile:nth-child(3) {
     transition-delay: 400ms;
 }

 .why-tile:hover {
     border-color: var(--o-200);
     box-shadow: var(--shadow-lg);
     transform: translateY(-4px);
 }

 .why-tile::before {
     content: "";
     position: absolute;
     z-index: -1;
     right: -50px;
     top: -50px;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: radial-gradient(circle at 30% 30%, var(--o-100), transparent 65%);
     opacity: .55;
     transition: transform 800ms var(--ease), opacity var(--t) var(--ease);
 }

 .why-tile:hover::before {
     transform: scale(1.35);
     opacity: 1;
 }

 .why-tile .idx {
     font-family: var(--font-display);
     font-size: .75rem;
     font-weight: 700;
     letter-spacing: .2em;
     text-transform: uppercase;
     color: var(--o-700);
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     margin-bottom: 1.25rem;
 }

 .why-tile .idx::before {
     content: "";
     width: 24px;
     height: 1px;
     background: var(--o-500);
 }

 .why-tile .ico {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     background: linear-gradient(135deg, var(--o-50), #FFE8D6);
     border: 1px solid var(--o-100);
     color: var(--o-600);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.15rem;
 }

 .why-tile .ico svg {
     width: 24px;
     height: 24px;
 }

 .why-tile h3 {
     font-size: 1.25rem;
     letter-spacing: -0.02em;
     margin: 0 0 .55rem;
 }

 .why-tile p {
     color: var(--c-text-2);
     font-size: .95rem;
     margin: 0 0 1.25rem;
     line-height: 1.55;
 }

 .why-tile .tile-foot {
     margin-top: auto;
     padding-top: 1rem;
     border-top: 1px dashed var(--c-line);
     font-size: .78rem;
     color: var(--c-muted);
     display: inline-flex;
     align-items: center;
     gap: .4rem;
 }

 .why-tile .tile-foot strong {
     color: var(--o-700);
     font-weight: 700;
 }

 /* ============ COMPARISON — dramatic split with VS medallion ============ */
 .compare-band {
     padding: clamp(4rem, 8vw, 7rem) 0;
     position: relative;
     overflow: hidden;
     background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-cream) 100%);
 }

 .compare-wrap {
     position: relative;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     margin-top: 2rem;
 }

 .compare-vs {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 64px;
     height: 64px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--o-500), var(--o-700));
     color: #fff;
     font-family: var(--font-display);
     font-weight: 800;
     font-size: 1.15rem;
     letter-spacing: .04em;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 14px 30px -10px rgba(207, 90, 34, 0.55), 0 0 0 8px var(--c-cream);
     z-index: 2;
 }

 .compare-col-v2 {
     border-radius: var(--radius-lg);
     padding: 1.85rem;
     border: 1px solid var(--c-line);
     background: var(--c-surface);
     opacity: 0;
     transform: translateX(-18px);
     transition: opacity 700ms var(--ease), transform 700ms var(--ease);
 }

 .compare-wrap.in .compare-col-v2:nth-child(1) {
     opacity: 1;
     transform: none;
     transition-delay: 120ms;
 }

 .compare-wrap.in .compare-col-v2:nth-child(3) {
     opacity: 1;
     transform: none;
     transition-delay: 260ms;
 }

 .compare-col-v2:nth-child(3) {
     transform: translateX(18px);
 }

 .compare-col-v2.traditional {
     background: #F7F3EC;
 }

 .compare-col-v2.traditional h3 {
     color: var(--c-muted);
 }

 .compare-col-v2.cbsot {
     background: linear-gradient(180deg, #FFF6EF 0%, var(--c-surface) 100%);
     border-color: var(--o-200);
     box-shadow: 0 20px 50px -25px rgba(232, 106, 44, 0.3);
 }

 .compare-col-v2 .label {
     font-size: .72rem;
     letter-spacing: .16em;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--c-muted);
     margin-bottom: .5rem;
     display: block;
 }

 .compare-col-v2.cbsot .label {
     color: var(--o-700);
 }

 .compare-col-v2 h3 {
     font-size: var(--step-2);
     margin-bottom: 1.2rem;
     letter-spacing: -0.02em;
 }

 .compare-col-v2 ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     gap: .7rem;
 }

 .compare-col-v2 li {
     display: flex;
     gap: .7rem;
     align-items: flex-start;
     font-size: .96rem;
     line-height: 1.45;
     padding: .7rem .75rem;
     border-radius: 10px;
     transition: background var(--t-fast) var(--ease);
 }

 .compare-col-v2.cbsot li:hover {
     background: var(--o-50);
 }

 /* Icon sits on the title baseline, not pushed down by description text */
 .compare-col-v2 li > svg { flex-shrink: 0; margin-top: 3px; }

 /* Title + description stack */
 .compare-col-v2 .cmp-body {
     display: flex;
     flex-direction: column;
     gap: 2px;
     min-width: 0;
 }
 .compare-col-v2 .cmp-t {
     font-size: .96rem;
     font-weight: 700;
     letter-spacing: -0.01em;
     color: var(--c-text);
     line-height: 1.3;
 }
 .compare-col-v2 .cmp-d {
     font-size: .84rem;
     color: var(--c-muted);
     line-height: 1.5;
 }
 /* Traditional column mutes the titles slightly */
 .compare-col-v2.traditional .cmp-t {
     color: var(--c-text-2, #4A4360);
     font-weight: 600;
 }
 /* CB column accents the titles */
 .compare-col-v2.cbsot .cmp-t {
     color: var(--c-text, #1A1230);
 }
 .compare-col-v2.cbsot .cmp-d {
     color: var(--c-text-2, #4A4360);
 }

 .compare-col-v2 li svg {
     flex: 0 0 20px;
     margin-top: 3px;
 }

 .compare-col-v2.traditional li svg {
     color: var(--c-muted-2);
 }

 .compare-col-v2.cbsot li svg {
     color: var(--o-500);
 }

 /* ============ STATS BAND — dark premium ============ */
 .stats-dark {
     padding: clamp(4rem, 7vw, 6rem) 0;
     background: linear-gradient(135deg, #1D1B18 0%, #2a1e14 50%, #1D1B18 100%);
     position: relative;
     overflow: hidden;
     color: #FFFBF7;
 }

 .stats-dark::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
         radial-gradient(500px 300px at 15% 20%, rgba(244, 138, 79, 0.22), transparent 60%),
         radial-gradient(500px 300px at 85% 80%, rgba(232, 106, 44, 0.16), transparent 60%);
     pointer-events: none;
 }

 .stats-dark::after {
     content: "";
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
     -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
     pointer-events: none;
 }

 .stats-dark-inner {
     position: relative;
     z-index: 1;
 }

 .stats-dark-head {
     text-align: center;
     max-width: 720px;
     margin: 0 auto 3rem;
 }

 .stats-dark-head .eyebrow {
     background: rgba(255, 255, 255, 0.06);
     border-color: rgba(255, 255, 255, 0.12);
     color: #FFD1AD;
 }

 .stats-dark-head h2 {
     color: #fff;
     font-size: clamp(1.8rem, 3vw, 2.4rem);
     letter-spacing: -0.02em;
     line-height: 1.15;
     margin-top: .85rem;
 }

 .stats-dark-head h2 .hl {
     background: linear-gradient(120deg, #F5A623, #F48A4F);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .stats-dark-head p {
     color: rgba(255, 255, 255, 0.7);
     max-width: 54ch;
     margin: .75rem auto 0;
 }

 .stats-dark-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
 }

 .stats-dark-cell {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: var(--radius-lg);
     padding: 1.75rem 1.5rem;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     opacity: 0;
     transform: translateY(18px);
     transition: opacity 700ms var(--ease), transform 700ms var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
 }

 .stats-dark-grid.in .stats-dark-cell {
     opacity: 1;
     transform: none;
 }

 .stats-dark-grid.in .stats-dark-cell:nth-child(1) {
     transition-delay: 100ms;
 }

 .stats-dark-grid.in .stats-dark-cell:nth-child(2) {
     transition-delay: 220ms;
 }

 .stats-dark-grid.in .stats-dark-cell:nth-child(3) {
     transition-delay: 340ms;
 }

 .stats-dark-grid.in .stats-dark-cell:nth-child(4) {
     transition-delay: 460ms;
 }

 .stats-dark-cell:hover {
     background: rgba(255, 255, 255, 0.07);
     border-color: rgba(244, 138, 79, 0.35);
 }

 .stats-dark-cell .k {
     font-family: var(--font-display);
     font-size: clamp(2rem, 3.2vw, 2.8rem);
     font-weight: 800;
     letter-spacing: -0.03em;
     line-height: 1;
     background: linear-gradient(135deg, #FFE8D6 0%, #F5A623 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     display: flex;
     align-items: baseline;
     gap: .1rem;
     font-variant-numeric: tabular-nums;
     margin-bottom: .5rem;
 }

 .stats-dark-cell .k .u {
     color: #F48A4F;
     -webkit-text-fill-color: #F48A4F;
 }

 .stats-dark-cell .lab {
     font-size: .88rem;
     color: rgba(255, 255, 255, 0.78);
     line-height: 1.4;
 }

 /* ============ CAMPUS VIDEO — premium two-campus showcase ============ */
 .campus-showcase {
     position: relative;
     padding: clamp(3.5rem, 5.5vw, 5rem) 0;
     background: linear-gradient(180deg, var(--c-bg) 0%, #FFF9F1 50%, var(--c-bg) 100%);
     overflow: hidden;
     isolation: isolate;
 }

 .campus-showcase::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background:
         radial-gradient(circle at 15% 20%, rgba(232, 106, 44, 0.07) 0%, transparent 40%),
         radial-gradient(circle at 85% 80%, rgba(122, 108, 207, 0.06) 0%, transparent 40%);
 }

 .cs-head {
     display: grid;
     grid-template-columns: 1.15fr .85fr;
     gap: 1.5rem;
     align-items: end;
     margin-bottom: 2.25rem;
 }

 .cs-head .eyebrow {
     color: var(--o-700);
 }

 .cs-head h2 {
     font-size: clamp(1.9rem, 3.2vw, 2.55rem);
     letter-spacing: -0.02em;
     line-height: 1.1;
     margin: .45rem 0 .6rem;
     max-width: 22ch;
 }

 .cs-head h2 .hl {
     background: linear-gradient(120deg, var(--o-500), var(--o-700));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .cs-head p {
     color: var(--c-text-2);
     line-height: 1.6;
     font-size: .95rem;
     max-width: 52ch;
     margin: 0;
 }

 .cs-stats {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: .85rem;
     align-self: end;
 }

 .cs-stat {
     padding: .85rem .95rem;
     background: #fff;
     border: 1px solid var(--c-line);
     border-radius: 14px;
 }

 .cs-stat .k {
     font-size: 1.15rem;
     font-weight: 800;
     letter-spacing: -0.02em;
     background: linear-gradient(120deg, var(--o-500), var(--o-700));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     line-height: 1.05;
 }

 .cs-stat .l {
     font-size: .68rem;
     color: var(--c-muted);
     margin-top: 2px;
     letter-spacing: .04em;
 }

 @media (max-width: 900px) {
     .cs-head {
         grid-template-columns: 1fr;
     }

     .cs-stats {
         grid-template-columns: repeat(3, minmax(0, 1fr));
         align-self: start;
     }
 }

 @media (max-width: 500px) {
     .cs-stats {
         grid-template-columns: 1fr;
     }
 }

 /* Two hero campus video cards (side by side) */
 .cs-heroes {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1.1rem;
     margin-bottom: 1.1rem;
 }

 .cs-hero {
     position: relative;
     aspect-ratio: 16 / 10;
     border-radius: 22px;
     overflow: hidden;
     isolation: isolate;
     cursor: pointer;
     background: #111;
     box-shadow: 0 26px 50px -26px rgba(40, 25, 10, 0.28);
     transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
 }

 .cs-hero:hover {
     transform: translateY(-4px);
     box-shadow: 0 34px 60px -24px rgba(232, 106, 44, 0.35);
 }

 .cs-hero .cs-poster {
     position: absolute;
     inset: 0;
     z-index: 0;
     background-size: cover;
     background-position: center;
     transition: transform 1.2s var(--ease);
 }

 /* GLA Noida poster (fallback gradient until real image is added) */
 .cs-hero.gla .cs-poster {
     background-image:
         linear-gradient(135deg, rgba(18, 11, 38, 0.55) 0%, rgba(232, 106, 44, 0.25) 100%),
         radial-gradient(ellipse at 30% 30%, rgba(255, 179, 102, 0.45) 0%, transparent 55%),
         linear-gradient(160deg, #2A1F4A 0%, #3B2F6A 55%, #E86A2C 125%);
 }

 /* Geeta Panipat poster (fallback gradient) */
 .cs-hero.geeta .cs-poster {
     background-image:
         linear-gradient(135deg, rgba(18, 11, 38, 0.55) 0%, rgba(178, 152, 238, 0.25) 100%),
         radial-gradient(ellipse at 70% 30%, rgba(126, 208, 168, 0.4) 0%, transparent 55%),
         linear-gradient(160deg, #13363F 0%, #1F4653 55%, #4FA87A 130%);
 }

 .cs-hero:hover .cs-poster {
     transform: scale(1.04);
 }

 .cs-hero video {
     position: absolute;
     inset: 0;
     z-index: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     background: transparent;
 }

 .cs-hero::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(180deg, rgba(12, 7, 33, 0.05) 0%, rgba(12, 7, 33, 0.15) 50%, rgba(12, 7, 33, 0.8) 100%);
     pointer-events: none;
 }

 .cs-chip {
     position: absolute;
     top: 16px;
     left: 16px;
     z-index: 2;
     display: inline-flex;
     align-items: center;
     gap: .45rem;
     padding: .4rem .75rem;
     border-radius: 999px;
     background: rgba(255, 255, 255, 0.14);
     border: 1px solid rgba(255, 255, 255, 0.24);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     color: #fff;
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
 }

 .cs-chip svg {
     width: 12px;
     height: 12px;
     color: #FFB366;
 }

 .cs-chip.live .live-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #FF5E57;
     box-shadow: 0 0 0 3px rgba(255, 94, 87, 0.3);
     animation: cs-pulse 1.8s ease-in-out infinite;
 }

 @keyframes cs-pulse {
     0%, 100% {
         box-shadow: 0 0 0 3px rgba(255, 94, 87, 0.3);
     }

     50% {
         box-shadow: 0 0 0 6px rgba(255, 94, 87, 0.12);
     }
 }

 .cs-duration {
     position: absolute;
     top: 16px;
     right: 16px;
     z-index: 2;
     padding: .3rem .6rem;
     border-radius: 6px;
     background: rgba(0, 0, 0, 0.55);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     color: #fff;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .02em;
     display: inline-flex;
     align-items: center;
     gap: .3rem;
 }

 .cs-duration svg {
     width: 11px;
     height: 11px;
     color: #FFB366;
 }

 .cs-play {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
     width: 82px;
     height: 82px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.95);
     color: #111;
     border: 0;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.55);
     transition: transform var(--t) var(--ease), background var(--t) var(--ease);
 }

 .cs-play::after {
     content: "";
     position: absolute;
     inset: -6px;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, 0.5);
     animation: cs-ring 2.4s cubic-bezier(.2, .7, .2, 1) infinite;
 }

 @keyframes cs-ring {
     0% {
         transform: scale(1);
         opacity: .9;
     }

     100% {
         transform: scale(1.4);
         opacity: 0;
     }
 }

 .cs-hero:hover .cs-play {
     transform: translate(-50%, -50%) scale(1.08);
     background: #fff;
 }

 .cs-play svg {
     width: 30px;
     height: 30px;
     margin-left: 5px;
 }

 .cs-info {
     position: absolute;
     left: 20px;
     right: 20px;
     bottom: 18px;
     z-index: 2;
     color: #fff;
 }

 .cs-info h3 {
     color: #fff;
     font-size: 1.2rem;
     letter-spacing: -0.01em;
     margin: 0 0 .2rem;
     line-height: 1.2;
 }

 .cs-info .sub {
     font-size: .82rem;
     color: rgba(255, 255, 255, 0.78);
     margin: 0;
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     flex-wrap: wrap;
 }

 .cs-info .sub .dot {
     opacity: .45;
 }

 .cs-info .explore {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     color: #FFDFCB;
     font-size: .78rem;
     font-weight: 700;
     text-decoration: none;
     margin-top: .55rem;
     opacity: 0;
     transform: translateY(6px);
     transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
 }

 .cs-info .explore svg {
     width: 12px;
     height: 12px;
 }

 .cs-hero:hover .cs-info .explore {
     opacity: 1;
     transform: translateY(0);
 }

 /* Supporting strip: 3 small videos below */
 .cs-support {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1rem;
 }

 .cs-small {
     position: relative;
     aspect-ratio: 16 / 10;
     border-radius: 16px;
     overflow: hidden;
     isolation: isolate;
     cursor: pointer;
     background: #111;
     transition: transform var(--t) var(--ease);
 }

 .cs-small:hover {
     transform: translateY(-3px);
 }

 .cs-small .cs-poster {
     position: absolute;
     inset: 0;
     z-index: 0;
     transition: transform 1s var(--ease);
 }

 .cs-small:hover .cs-poster {
     transform: scale(1.05);
 }

 .cs-small.lab .cs-poster {
     background:
         radial-gradient(ellipse at 20% 30%, rgba(232, 106, 44, 0.35) 0%, transparent 55%),
         linear-gradient(160deg, #3a2418 0%, #1D1B18 100%);
 }

 .cs-small.voices .cs-poster {
     background:
         radial-gradient(ellipse at 70% 40%, rgba(178, 152, 238, 0.3) 0%, transparent 55%),
         linear-gradient(160deg, #241d14 0%, #0f0d0a 100%);
 }

 .cs-small.hack .cs-poster {
     background:
         radial-gradient(ellipse at 50% 50%, rgba(126, 208, 168, 0.3) 0%, transparent 55%),
         linear-gradient(160deg, #0D2B24 0%, #0A1A18 100%);
 }

 .cs-small::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: 1;
     background: linear-gradient(180deg, rgba(12, 7, 33, 0.1) 0%, rgba(12, 7, 33, 0.75) 100%);
     pointer-events: none;
 }

 .cs-small .cs-small-play {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 2;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.92);
     color: #111;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.55);
     transition: transform var(--t) var(--ease), background var(--t) var(--ease);
 }

 .cs-small:hover .cs-small-play {
     transform: translate(-50%, -50%) scale(1.1);
     background: #fff;
 }

 .cs-small .cs-small-play svg {
     width: 18px;
     height: 18px;
     margin-left: 3px;
 }

 .cs-small .cs-small-info {
     position: absolute;
     left: 14px;
     right: 14px;
     bottom: 12px;
     z-index: 2;
     color: #fff;
 }

 .cs-small h4 {
     color: #fff;
     font-size: .92rem;
     letter-spacing: -0.005em;
     margin: 0 0 .15rem;
     line-height: 1.25;
 }

 .cs-small .sub {
     font-size: .72rem;
     color: rgba(255, 255, 255, 0.72);
     margin: 0;
     display: inline-flex;
     align-items: center;
     gap: .35rem;
 }

 .cs-small .sub svg {
     width: 10px;
     height: 10px;
     color: #FFB366;
 }

 @media (max-width: 900px) {
     .cs-heroes {
         grid-template-columns: 1fr;
     }

     .cs-support {
         grid-template-columns: 1fr;
     }
 }

 /* Foot: visit campuses CTA */
 .cs-foot {
     margin-top: 1.75rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     padding: 1.25rem 1.5rem;
     background: #fff;
     border: 1px solid var(--c-line);
     border-radius: 16px;
     box-shadow: 0 14px 30px -20px rgba(40, 25, 10, 0.2);
     flex-wrap: wrap;
 }

 .cs-foot-left {
     display: flex;
     align-items: center;
     gap: .9rem;
     flex: 1;
     min-width: 0;
 }

 .cs-foot-ic {
     width: 42px;
     height: 42px;
     border-radius: 12px;
     background: linear-gradient(135deg, var(--o-500), var(--o-700));
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     box-shadow: 0 10px 22px -8px rgba(232, 106, 44, 0.55);
 }

 .cs-foot-ic svg {
     width: 20px;
     height: 20px;
 }

 .cs-foot-text strong {
     font-size: .95rem;
     color: var(--c-text);
     letter-spacing: -0.01em;
     display: block;
 }

 .cs-foot-text span {
     font-size: .82rem;
     color: var(--c-muted);
     margin-top: 1px;
     display: block;
 }

 .cs-foot-cta {
     display: inline-flex;
     gap: .5rem;
     flex-wrap: wrap;
 }

 .cs-foot-cta a {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     padding: .55rem .95rem;
     border-radius: 999px;
     font-size: .82rem;
     font-weight: 700;
     text-decoration: none;
     transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
 }

 .cs-foot-cta a.primary {
     background: linear-gradient(135deg, var(--o-500), var(--o-700));
     color: #fff;
 }

 .cs-foot-cta a.primary:hover {
     transform: translateY(-1px);
     box-shadow: 0 14px 26px -10px rgba(232, 106, 44, 0.55);
 }

 .cs-foot-cta a.secondary {
     background: var(--c-cream);
     color: var(--c-text);
     border: 1px solid var(--c-line);
 }

 .cs-foot-cta a.secondary:hover {
     border-color: var(--o-300);
     color: var(--o-700);
 }

 .cs-foot-cta svg {
     width: 12px;
     height: 12px;
 }

 @media (prefers-reduced-motion: reduce) {
     .cs-hero:hover .cs-poster, .cs-small:hover .cs-poster {
         transform: none;
     }

     .cs-play::after, .cs-chip.live .live-dot {
         animation: none;
     }
 }

 /* ============ SUCCESS STORIES — upgraded ============ */
 .story-card-v2 {
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius-lg);
     padding: 1.85rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     min-height: 340px;
     position: relative;
     overflow: hidden;
     isolation: isolate;
     transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
 }

 .story-card-v2::before {
     content: "";
     position: absolute;
     z-index: -1;
     right: -40px;
     top: -40px;
     width: 140px;
     height: 140px;
     border-radius: 50%;
     background: radial-gradient(circle, var(--o-50), transparent 70%);
     opacity: .5;
     transition: transform 800ms var(--ease), opacity var(--t) var(--ease);
 }

 .story-card-v2:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
     border-color: var(--o-200);
 }

 .story-card-v2:hover::before {
     transform: scale(1.4);
     opacity: 1;
 }

 .story-card-v2 .quote-mark {
     position: absolute;
     top: 1.15rem;
     right: 1.3rem;
     font-family: var(--font-display);
     font-size: 4.2rem;
     font-weight: 800;
     color: var(--o-100);
     line-height: 1;
     letter-spacing: -0.05em;
     pointer-events: none;
 }

 .story-card-v2 .shead {
     display: flex;
     align-items: center;
     gap: .9rem;
 }

 .story-card-v2 .sav {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     background: linear-gradient(135deg, var(--o-300), var(--o-600));
     color: #fff;
     font-weight: 700;
     font-size: 1rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 20px -8px rgba(232, 106, 44, 0.5);
 }

 .story-card-v2 .sname {
     font-weight: 700;
     font-size: 1.02rem;
     letter-spacing: -0.01em;
 }

 .story-card-v2 .srole {
     font-size: .83rem;
     color: var(--c-muted);
     margin-top: 2px;
 }

 .story-card-v2 .squote {
     font-size: 1.02rem;
     color: var(--c-text-2);
     line-height: 1.55;
     flex: 1;
     position: relative;
     z-index: 1;
 }

 .story-card-v2 .sout {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 1rem;
     border-top: 1px dashed var(--c-line);
     font-size: .82rem;
     color: var(--c-muted);
 }

 .story-card-v2 .sout strong {
     color: var(--c-text);
     font-weight: 700;
 }

 .story-card-v2 .sbadge {
     background: var(--c-cream);
     border: 1px solid var(--c-line);
     padding: .3rem .6rem;
     border-radius: 999px;
     font-size: .72rem;
     font-weight: 700;
     letter-spacing: .04em;
     color: var(--o-700);
 }

 /* ============ ADMISSIONS — premium split ============ */
 .adm-wrap {
     display: grid;
     grid-template-columns: 1.05fr 0.95fr;
     gap: 1.5rem;
     align-items: stretch;
 }

 .adm-info, .adm-test {
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius-xl);
     padding: 2rem;
     position: relative;
     overflow: hidden;
     isolation: isolate;
     transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
 }

 .adm-info:hover, .adm-test:hover {
     box-shadow: var(--shadow-lg);
 }

 .adm-info {
     background: linear-gradient(160deg, #FFFBF7 0%, var(--c-surface) 100%);
 }

 .adm-test {
     background: linear-gradient(160deg, var(--c-text) 0%, #2a1e14 100%);
     color: #FFFBF7;
     border-color: rgba(255, 255, 255, 0.1);
 }

 .adm-test::before {
     content: "";
     position: absolute;
     inset: 0;
     pointer-events: none;
     background:
         radial-gradient(400px 260px at 80% 20%, rgba(244, 138, 79, 0.3), transparent 60%),
         radial-gradient(400px 260px at 20% 80%, rgba(232, 106, 44, 0.2), transparent 60%);
 }

 .adm-info .ico, .adm-test .ico {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.2rem;
 }

 .adm-info .ico {
     background: var(--o-50);
     color: var(--o-600);
     border: 1px solid var(--o-100);
 }

 .adm-test .ico {
     background: rgba(255, 255, 255, 0.08);
     color: #FFD1AD;
     border: 1px solid rgba(255, 255, 255, 0.15);
 }

 .adm-info h3, .adm-test h3 {
     font-size: 1.35rem;
     letter-spacing: -0.02em;
     margin: 0 0 .55rem;
 }

 .adm-test h3 {
     color: #fff;
 }

 .adm-info p {
     color: var(--c-text-2);
     margin: 0 0 1.25rem;
     font-size: .95rem;
     line-height: 1.55;
 }

 .adm-test p {
     color: rgba(255, 255, 255, 0.72);
     margin: 0 0 1.25rem;
     font-size: .95rem;
     line-height: 1.55;
     position: relative;
     z-index: 1;
 }

 .adm-test .countdown {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: .5rem;
     margin-bottom: 1.15rem;
 }

 .adm-test .cd-cell {
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 12px;
     padding: .85rem .5rem;
     text-align: center;
 }

 .adm-test .cd-num {
     font-family: var(--font-display);
     font-size: 1.7rem;
     font-weight: 800;
     color: #fff;
     letter-spacing: -0.02em;
     font-variant-numeric: tabular-nums;
     line-height: 1;
     background: linear-gradient(135deg, #FFE8D6, #F5A623);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .adm-test .cd-lab {
     font-size: .68rem;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.55);
     margin-top: .35rem;
     font-weight: 600;
 }

 .adm-feature-list {
     display: grid;
     gap: .5rem;
     padding: .25rem 0 1rem;
 }

 .adm-feature-list li {
     display: flex;
     align-items: center;
     gap: .6rem;
     font-size: .9rem;
     color: var(--c-text-2);
 }

 .adm-feature-list li svg {
     color: var(--o-500);
     flex-shrink: 0;
 }

 /* ============ TALK + COMMUNITY — two gradient edge cards ============ */
 .dual-action {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.25rem;
 }

 .action-card {
     position: relative;
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius-xl);
     padding: 2rem;
     overflow: hidden;
     isolation: isolate;
     transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
 }

 .action-card:hover {
     border-color: var(--o-200);
     box-shadow: var(--shadow-lg);
     transform: translateY(-3px);
 }

 .action-card::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--o-500), #F5A623);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 600ms var(--ease);
 }

 .action-card:hover::before {
     transform: scaleX(1);
 }

 .action-card .ico {
     width: 54px;
     height: 54px;
     border-radius: 14px;
     background: linear-gradient(135deg, var(--o-50), #FFE8D6);
     color: var(--o-600);
     border: 1px solid var(--o-100);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.25rem;
 }

 .action-card .ico svg {
     width: 24px;
     height: 24px;
 }

 .action-card h3 {
     font-size: 1.35rem;
     letter-spacing: -0.02em;
     margin: 0 0 .55rem;
 }

 .action-card p {
     color: var(--c-text-2);
     font-size: .95rem;
     margin: 0 0 1.25rem;
     line-height: 1.55;
 }

 .action-card .go {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     color: var(--o-700);
     font-weight: 700;
     font-size: .92rem;
     transition: gap var(--t-fast) var(--ease);
 }

 .action-card:hover .go {
     gap: .6rem;
 }

 /* ============ FAQ — centered large ============ */
 .faq-home {
     padding: clamp(4rem, 7vw, 6rem) 0;
     background: var(--c-surface);
     border-top: 1px solid var(--c-line);
     border-bottom: 1px solid var(--c-line);
 }

 .faq-home .faq-head {
     max-width: 720px;
     margin: 0 auto 2.5rem;
     text-align: center;
 }

 .faq-home .faq-head h2 {
     font-size: clamp(1.9rem, 3.2vw, 2.6rem);
     letter-spacing: -0.025em;
     line-height: 1.1;
     margin-top: .75rem;
 }

 .faq-home .faq-head h2 .hl {
     background: linear-gradient(120deg, var(--o-700), var(--o-400));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 /* ============ FINAL CTA — dark full-bleed ============ */
 .cta-final {
     padding: clamp(4rem, 8vw, 6.5rem) 0;
     position: relative;
     overflow: hidden;
     isolation: isolate;
     background: linear-gradient(135deg, #1D1B18 0%, #2a1e14 50%, #1D1B18 100%);
     color: #FFFBF7;
 }

 .cta-final::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
         radial-gradient(500px 300px at 25% 30%, rgba(244, 138, 79, 0.22), transparent 60%),
         radial-gradient(600px 350px at 75% 70%, rgba(232, 106, 44, 0.18), transparent 60%);
     pointer-events: none;
 }

 .cta-final::after {
     content: "";
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
     background-size: 44px 44px;
     mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
     -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
     pointer-events: none;
 }

 .cta-final-inner {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1.3fr 0.7fr;
     gap: 2.5rem;
     align-items: center;
 }

 .cta-final-inner .eyebrow {
     background: rgba(255, 255, 255, 0.06);
     border-color: rgba(255, 255, 255, 0.14);
     color: #FFD1AD;
 }

 .cta-final-inner h2 {
     color: #fff;
     font-size: clamp(2rem, 3.6vw, 3rem);
     letter-spacing: -0.025em;
     line-height: 1.08;
     margin: .85rem 0 .75rem;
 }

 .cta-final-inner h2 .hl {
     background: linear-gradient(120deg, #F5A623, #F48A4F);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
 }

 .cta-final-inner p {
     color: rgba(255, 255, 255, 0.75);
     font-size: 1.02rem;
     margin: 0;
     max-width: 52ch;
 }

 .cta-final-actions {
     display: flex;
     flex-wrap: wrap;
     gap: .7rem;
     justify-content: flex-end;
 }

 .cta-final-actions .btn-primary {
     background: #fff;
     color: var(--c-text);
     box-shadow: 0 20px 50px -20px rgba(255, 255, 255, 0.3);
 }

 .cta-final-actions .btn-primary:hover {
     background: var(--o-400);
     color: #fff;
 }

 .cta-final-actions .btn-secondary {
     background: transparent;
     color: #fff;
     border-color: rgba(255, 255, 255, 0.2);
 }

 .cta-final-actions .btn-secondary:hover {
     background: rgba(255, 255, 255, 0.08);
     border-color: rgba(255, 255, 255, 0.4);
 }

 @media (max-width: 900px) {
     .why-tiles {
         grid-template-columns: 1fr;
     }

     .compare-wrap {
         grid-template-columns: 1fr;
         gap: 3.5rem;
     }

     .compare-vs {
         left: 50%;
         top: auto;
         bottom: 50%;
         transform: translate(-50%, 50%);
     }

     .compare-col-v2:nth-child(3) {
         transform: translateY(18px);
     }

     .compare-wrap.in .compare-col-v2:nth-child(3) {
         transform: none;
     }

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

     .adm-wrap {
         grid-template-columns: 1fr;
     }

     .dual-action {
         grid-template-columns: 1fr;
     }

     .cta-final-inner {
         grid-template-columns: 1fr;
     }

     .cta-final-actions {
         justify-content: flex-start;
     }
 }

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

     .jc-stat, .jc-badge, .founder-spot, .why-tile, .compare-col-v2, .stats-dark-cell,
     .loop-step, .cal-day, .pm-cell, .yr-step {
         opacity: 1 !important;
         transform: none !important;
     }

     .marquee-track, .jc-status .dot, .alumni-head .live .ld, .cal-day .live-pill .ld,
     .yr-step.final .milestone::before, .macbook {
         animation: none !important;
     }

     .jc-grid span {
         opacity: 1 !important;
         animation: none !important;
     }

     .jc-progress-fill, .yr-ladder::after {
         width: 100% !important;
         transition: none !important;
     }
 }

 /* ============ BEST-IN-CLASS FACULTY SLIDER ============ */
 .faculty-section {
     position: relative;
     padding: clamp(3.5rem, 5.5vw, 5rem) 0;
     background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-cream) 100%);
     overflow: hidden;
     isolation: isolate;
 }

 .faculty-section::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background:
         radial-gradient(circle at 85% 18%, rgba(232, 106, 44, 0.09) 0%, transparent 45%),
         radial-gradient(circle at 10% 90%, rgba(122, 108, 207, 0.07) 0%, transparent 45%);
 }

 .faculty-head {
     display: grid;
     grid-template-columns: 1.2fr auto;
     gap: 1.5rem;
     align-items: end;
     margin-bottom: 2.25rem;
 }

 .faculty-head .eyebrow {
     color: var(--o-700);
 }

 .faculty-head h2 {
     font-size: clamp(1.9rem, 3vw, 2.55rem);
     letter-spacing: -0.02em;
     line-height: 1.1;
     margin: .45rem 0 .6rem;
     max-width: 26ch;
 }

 .faculty-head h2 .hl {
     background: linear-gradient(120deg, var(--o-500), var(--o-700));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .faculty-head p {
     color: var(--c-text-2);
     line-height: 1.6;
     font-size: .95rem;
     max-width: 56ch;
     margin: 0;
 }

 .faculty-nav {
     display: inline-flex;
     gap: .5rem;
     align-self: end;
 }

 .faculty-nav button {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: #fff;
     color: var(--c-text);
     border: 1px solid var(--c-line);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
         color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
         box-shadow var(--t-fast) var(--ease);
 }

 .faculty-nav button:hover {
     background: linear-gradient(135deg, var(--o-500), var(--o-700));
     color: #fff;
     border-color: transparent;
     box-shadow: 0 14px 28px -12px rgba(232, 106, 44, 0.5);
 }

 .faculty-nav button:disabled {
     opacity: .4;
     cursor: not-allowed;
     background: #fff;
     color: var(--c-muted);
     border-color: var(--c-line);
     box-shadow: none;
     transform: none;
 }

 .faculty-nav button svg {
     width: 16px;
     height: 16px;
 }

 .faculty-slider {
     position: relative;
     overflow-x: auto;
     overflow-y: visible;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     padding: .75rem .25rem 1.5rem;
     margin: 0 -.25rem;
     scrollbar-width: none;
 }

 .faculty-slider::-webkit-scrollbar {
     display: none;
 }

 .faculty-track {
     display: flex;
     gap: 1rem;
     width: max-content;
 }

 /* Fixed card widths — avoids circular sizing inside scroll container. */
 .faculty-track>.fm-card {
     flex: 0 0 290px;
     width: 290px;
     min-width: 0;
 }

 @media (max-width: 560px) {
     .faculty-track>.fm-card {
         flex: 0 0 80vw;
         width: 80vw;
         max-width: 320px;
     }
 }

 .fm-card {
     scroll-snap-align: start;
     position: relative;
     background: #fff;
     border: 1px solid rgba(26, 18, 48, 0.08);
     border-radius: 22px;
     overflow: hidden;
     box-shadow:
         0 14px 32px -18px rgba(40, 25, 10, 0.18),
         0 0 0 1px rgba(255, 255, 255, 0.5) inset;
     display: flex;
     flex-direction: column;
     transition: transform .4s cubic-bezier(.2,.8,.3,1), border-color .3s ease, box-shadow .4s ease;
 }

 .fm-card::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     height: 3px;
     background: linear-gradient(90deg, transparent, var(--fm-accent, #E86A2C), transparent);
     opacity: 0;
     transition: opacity .3s ease;
 }

 .fm-card:hover {
     transform: translateY(-6px);
     border-color: var(--fm-accent, #E86A2C);
     box-shadow:
         0 26px 50px -18px rgba(232, 106, 44, 0.32),
         0 0 0 1px rgba(232, 106, 44, 0.12) inset;
 }

 .fm-card:hover::after { opacity: 1; }

 /* Photo area — taller, cleaner, more premium */
 .fm-photo {
     position: relative;
     aspect-ratio: 4 / 3.6;
     overflow: hidden;
     background:
         radial-gradient(ellipse at 50% 20%, var(--fm-tint-soft, rgba(232, 106, 44, 0.4)) 0%, transparent 65%),
         linear-gradient(160deg, var(--fm-tint-a, #2A1F4A) 0%, var(--fm-tint-b, #120B26) 85%);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Decorative soft ring behind the portrait / initials */
 .fm-photo .fm-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 72%;
     aspect-ratio: 1 / 1;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
     pointer-events: none;
     z-index: 0;
 }

 .fm-photo .fm-initials {
     position: relative;
     z-index: 1;
     font-family: Inter, system-ui, sans-serif;
     font-size: 3rem;
     font-weight: 800;
     color: #fff;
     letter-spacing: -0.04em;
     text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
 }

 .fm-photo img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center 20%;
     z-index: 2;
     transition: transform .6s cubic-bezier(.2,.8,.3,1), filter .4s ease;
 }

 /* When a real image loads, hide the initials + ring fallback. */
 .fm-photo.has-img .fm-initials,
 .fm-photo.has-img .fm-ring { display: none; }

 .fm-card:hover .fm-photo img {
     transform: scale(1.06);
     filter: saturate(1.08);
 }

 /* Body */
 .fm-body {
     padding: 1rem 1.1rem 1.15rem;
     display: flex;
     flex-direction: column;
     gap: .35rem;
 }

 .fm-body h3 {
     font-size: 1.1rem;
     font-weight: 800;
     letter-spacing: -0.02em;
     margin: 0;
     color: var(--c-text, #1A1230);
     line-height: 1.2;
 }

 .fm-role {
     font-size: .82rem;
     color: var(--c-muted, #6B6480);
     font-weight: 600;
     line-height: 1.3;
     margin: 0 0 .35rem;
 }

 /* Company chip — logo + name pill */
 .fm-company {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     padding: .4rem .75rem .4rem .4rem;
     border-radius: 999px;
     background: var(--fm-accent-bg, rgba(232, 106, 44, 0.08));
     border: 1px solid var(--fm-accent-border, rgba(232, 106, 44, 0.2));
     align-self: flex-start;
     max-width: 100%;
     transition: background .25s ease, transform .25s ease;
 }
 .fm-card:hover .fm-company { transform: translateY(-1px); }

 .fm-company__logo {
     width: 20px;
     height: 20px;
     border-radius: 5px;
     object-fit: contain;
     background: #fff;
     padding: 2px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
     flex-shrink: 0;
 }

 .fm-company__name {
     font-size: .8rem;
     font-weight: 800;
     letter-spacing: -0.015em;
     color: var(--c-text, #1A1230);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .fm-link {
     display: inline-flex;
     align-items: center;
     gap: .3rem;
     font-size: .72rem;
     font-weight: 700;
     color: var(--o-700);
     padding-top: .6rem;
     margin-top: .7rem;
     border-top: 1px dashed var(--c-line);
     text-decoration: none;
 }

 .fm-link:hover {
     color: var(--o-800, var(--o-700));
 }

 .fm-link svg {
     width: 12px;
     height: 12px;
 }

 /* Faculty tints (applied per card) */
 .fm-card.tint-orange {
     --fm-tint-a: #3A1F14;
     --fm-tint-b: #1F0E1B;
     --fm-tint-soft: rgba(232, 106, 44, 0.42);
     --fm-accent: #E86A2C;
     --fm-accent-bg: rgba(232, 106, 44, 0.08);
     --fm-accent-border: rgba(232, 106, 44, 0.25);
 }

 .fm-card.tint-violet {
     --fm-tint-a: #2A1F4A;
     --fm-tint-b: #120B26;
     --fm-tint-soft: rgba(178, 152, 238, 0.4);
     --fm-accent: #7A6CCF;
     --fm-accent-bg: rgba(122, 108, 207, 0.1);
     --fm-accent-border: rgba(122, 108, 207, 0.3);
 }

 .fm-card.tint-teal {
     --fm-tint-a: #13363F;
     --fm-tint-b: #0A1D22;
     --fm-tint-soft: rgba(100, 200, 220, 0.32);
     --fm-accent: #0F8C9E;
     --fm-accent-bg: rgba(15, 140, 158, 0.1);
     --fm-accent-border: rgba(15, 140, 158, 0.28);
 }

 .fm-card.tint-rose {
     --fm-tint-a: #3D1A2B;
     --fm-tint-b: #1C0C18;
     --fm-tint-soft: rgba(217, 90, 117, 0.38);
     --fm-accent: #D95A75;
     --fm-accent-bg: rgba(217, 90, 117, 0.1);
     --fm-accent-border: rgba(217, 90, 117, 0.28);
 }

 .fm-card.tint-amber {
     --fm-tint-a: #3B2A0F;
     --fm-tint-b: #1F1407;
     --fm-tint-soft: rgba(245, 166, 35, 0.38);
     --fm-accent: #E09419;
     --fm-accent-bg: rgba(245, 166, 35, 0.12);
     --fm-accent-border: rgba(245, 166, 35, 0.32);
 }

 .fm-card.tint-mint {
     --fm-tint-a: #103328;
     --fm-tint-b: #0A1E18;
     --fm-tint-soft: rgba(126, 208, 168, 0.38);
     --fm-accent: #4FA87A;
     --fm-accent-bg: rgba(126, 208, 168, 0.12);
     --fm-accent-border: rgba(126, 208, 168, 0.32);
 }

 /* Progress dots */
 .faculty-dots {
     display: flex;
     justify-content: center;
     gap: .4rem;
     margin-top: .6rem;
 }

 .faculty-dots button {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--c-line-2, #D9CFBE);
     border: 0;
     padding: 0;
     cursor: pointer;
     transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
 }

 .faculty-dots button.is-active {
     background: var(--o-600);
     width: 22px;
     border-radius: 999px;
 }

 @media (max-width: 760px) {
     .faculty-head {
         grid-template-columns: 1fr;
     }

     .faculty-nav {
         align-self: start;
     }
 }

 /* ============ COMMUNITY + SOCIAL — dark premium band ============ */
 .community-band {
     position: relative;
     padding: clamp(3.5rem, 5.5vw, 5rem) 0;
     background: radial-gradient(ellipse at top, #1F1836 0%, #120B26 80%);
     color: #fff;
     overflow: hidden;
     isolation: isolate;
 }

 .community-band::before {
     content: "";
     position: absolute;
     top: -25%;
     left: -10%;
     width: 520px;
     height: 520px;
     border-radius: 50%;
     background: rgba(232, 106, 44, 0.2);
     filter: blur(100px);
     z-index: -1;
     pointer-events: none;
 }

 .community-band::after {
     content: "";
     position: absolute;
     bottom: -25%;
     right: -10%;
     width: 520px;
     height: 520px;
     border-radius: 50%;
     background: rgba(37, 211, 102, 0.18);
     filter: blur(100px);
     z-index: -1;
     pointer-events: none;
 }

 .cmy-head {
     text-align: center;
     max-width: 62ch;
     margin: 0 auto 2.75rem;
 }

 .cmy-head .eyebrow {
     color: #FFB366;
 }

 .cmy-head .eyebrow .dot {
     background: #FFB366;
 }

 .cmy-head h2 {
     color: #fff;
     font-size: clamp(1.9rem, 3vw, 2.5rem);
     letter-spacing: -0.02em;
     margin: .4rem 0 .6rem;
 }

 .cmy-head h2 .hl {
     background: linear-gradient(120deg, #FFB366, #FFDFCB);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .cmy-head p {
     color: rgba(255, 255, 255, 0.72);
     font-size: .96rem;
     line-height: 1.6;
     margin: 0;
 }

 /* Primary row — chat channels (WhatsApp, Telegram) */
 .cmy-channels {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 1rem;
     margin-bottom: 1rem;
 }

 .cmy-channel {
     position: relative;
     background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
     border: 1px solid rgba(255, 255, 255, 0.14);
     border-radius: 20px;
     padding: 1.5rem 1.5rem 1.4rem;
     text-decoration: none;
     color: inherit;
     display: flex;
     align-items: center;
     gap: 1.1rem;
     overflow: hidden;
     isolation: isolate;
     transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
 }

 .cmy-channel::before {
     content: "";
     position: absolute;
     top: -80%;
     right: -30%;
     width: 280px;
     height: 280px;
     border-radius: 50%;
     background: var(--cmy-glow, rgba(255, 179, 102, 0.25));
     filter: blur(70px);
     z-index: -1;
     opacity: .7;
     transition: opacity var(--t-fast) var(--ease);
 }

 .cmy-channel:hover {
     transform: translateY(-4px);
     border-color: var(--cmy-accent, rgba(255, 179, 102, 0.5));
     box-shadow: 0 28px 54px -24px var(--cmy-shadow, rgba(232, 106, 44, 0.45));
 }

 .cmy-channel:hover::before {
     opacity: 1;
 }

 .cmy-channel .cmy-ic {
     width: 64px;
     height: 64px;
     border-radius: 18px;
     flex-shrink: 0;
     background: linear-gradient(135deg, var(--cmy-a, #E86A2C), var(--cmy-b, #CF5A22));
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 16px 32px -10px var(--cmy-shadow, rgba(232, 106, 44, 0.5));
 }

 .cmy-channel .cmy-ic svg {
     width: 30px;
     height: 30px;
 }

 .cmy-channel .cmy-body {
     min-width: 0;
     flex: 1;
 }

 .cmy-channel .cmy-kicker {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     font-size: .65rem;
     font-weight: 800;
     letter-spacing: .12em;
     text-transform: uppercase;
     color: var(--cmy-accent-text, #FFDFCB);
     margin-bottom: .35rem;
 }

 .cmy-channel .cmy-kicker .live-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #7ED0A8;
     box-shadow: 0 0 0 3px rgba(126, 208, 168, 0.25);
     animation: cmy-pulse 2s infinite;
 }

 @keyframes cmy-pulse {
     0%, 100% {
         box-shadow: 0 0 0 3px rgba(126, 208, 168, 0.25);
     }

     50% {
         box-shadow: 0 0 0 6px rgba(126, 208, 168, 0.12);
     }
 }

 .cmy-channel h3 {
     color: #fff;
     font-size: 1.15rem;
     letter-spacing: -0.01em;
     margin: 0 0 .3rem;
     line-height: 1.2;
 }

 .cmy-channel p {
     color: rgba(255, 255, 255, 0.72);
     font-size: .85rem;
     line-height: 1.5;
     margin: 0 0 .85rem;
 }

 .cmy-channel .cmy-cta {
     display: inline-flex;
     align-items: center;
     gap: .4rem;
     font-size: .82rem;
     font-weight: 700;
     padding: .6rem .9rem;
     border-radius: 999px;
     background: linear-gradient(135deg, var(--cmy-a, #E86A2C), var(--cmy-b, #CF5A22));
     color: #fff;
     transition: transform var(--t-fast) var(--ease);
 }

 .cmy-channel:hover .cmy-cta {
     transform: translateX(3px);
 }

 .cmy-channel .cmy-cta svg {
     width: 13px;
     height: 13px;
 }

 .cmy-channel .cmy-meta {
     display: inline-flex;
     align-items: center;
     gap: .35rem;
     font-size: .72rem;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.6);
     margin-left: .8rem;
 }

 .cmy-channel .cmy-meta svg {
     width: 12px;
     height: 12px;
     color: #FFB366;
 }

 /* WhatsApp tint */
 .cmy-channel.c-whatsapp {
     --cmy-a: #25D366;
     --cmy-b: #128C7E;
     --cmy-glow: rgba(37, 211, 102, 0.3);
     --cmy-shadow: rgba(37, 211, 102, 0.4);
     --cmy-accent: rgba(37, 211, 102, 0.5);
     --cmy-accent-text: #C8F7D8;
 }

 /* Telegram tint */
 .cmy-channel.c-telegram {
     --cmy-a: #26A5E4;
     --cmy-b: #0088CC;
     --cmy-glow: rgba(38, 165, 228, 0.3);
     --cmy-shadow: rgba(38, 165, 228, 0.4);
     --cmy-accent: rgba(38, 165, 228, 0.5);
     --cmy-accent-text: #C8E9F7;
 }

 @media (max-width: 760px) {
     .cmy-channels {
         grid-template-columns: 1fr;
     }

     .cmy-channel {
         flex-direction: column;
         align-items: flex-start;
         gap: 1rem;
         text-align: left;
     }
 }

 /* Social strip */
 .cmy-social {
     margin-top: 1.5rem;
     padding: 1.5rem 1.75rem;
     background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
     border: 1px solid rgba(255, 255, 255, 0.12);
     border-radius: 20px;
 }

 .cmy-social-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     flex-wrap: wrap;
     margin-bottom: 1rem;
 }

 .cmy-social-head h3 {
     color: #fff;
     font-size: 1.05rem;
     letter-spacing: -0.01em;
     margin: 0;
     display: inline-flex;
     align-items: center;
     gap: .55rem;
 }

 .cmy-social-head h3::before {
     content: "";
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #FFB366;
 }

 .cmy-social-head .sub {
     font-size: .8rem;
     color: rgba(255, 255, 255, 0.6);
 }

 .cmy-social-grid {
     display: grid;
     grid-template-columns: repeat(6, minmax(0, 1fr));
     gap: .65rem;
 }

 .cmy-social-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: .4rem;
     padding: 1rem .65rem;
     border-radius: 14px;
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.1);
     text-decoration: none;
     color: inherit;
     transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
 }

 .cmy-social-item:hover {
     transform: translateY(-3px);
     border-color: var(--so-c, rgba(255, 179, 102, 0.4));
     background: rgba(255, 255, 255, 0.07);
 }

 .cmy-social-item .so-ic {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--so-bg, rgba(255, 255, 255, 0.08));
     color: var(--so-c, #FFDFCB);
     transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
 }

 .cmy-social-item:hover .so-ic {
     background: var(--so-c, #FFB366);
     color: #fff;
 }

 .cmy-social-item .so-ic svg {
     width: 18px;
     height: 18px;
 }

 .cmy-social-item .so-name {
     font-size: .75rem;
     font-weight: 700;
     color: #fff;
 }

 .cmy-social-item .so-handle {
     font-size: .66rem;
     color: rgba(255, 255, 255, 0.55);
     letter-spacing: -0.005em;
 }

 /* Per-platform brand colours on hover */
 .cmy-social-item.so-linkedin {
     --so-c: #4F9EDB;
 }

 .cmy-social-item.so-youtube {
     --so-c: #FF4D4D;
 }

 .cmy-social-item.so-instagram {
     --so-c: #E1306C;
 }

 .cmy-social-item.so-x {
     --so-c: #E8E8E8;
 }

 .cmy-social-item.so-github {
     --so-c: #C9C9C9;
 }

 .cmy-social-item.so-discord {
     --so-c: #7289DA;
 }

 @media (max-width: 900px) {
     .cmy-social-grid {
         grid-template-columns: repeat(3, minmax(0, 1fr));
     }
 }

 @media (max-width: 500px) {
     .cmy-social-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }


/* =========================================================================
   CINEMATIC HERO — AI-First B.Tech (full-bleed video background)
   ========================================================================= */
.hero-ai {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #FFFBF7;
  /* Fit within one viewport, accounting for sticky navbar (~64px). */
  height: calc(100vh - 64px);
  min-height: 560px;
  max-height: 820px;
  display: flex;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}

/* --- Background layer: video + overlay + noise --- */
.hero-ai .hai-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #0C0721;
}
.hai-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) brightness(.7);
  transform: scale(1.02);
}
.hai-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% 85%, rgba(232, 106, 44, 0.18), transparent 70%),
    radial-gradient(700px 500px at 10% 0%, rgba(176, 140, 240, 0.14), transparent 60%),
    linear-gradient(180deg, rgba(12, 7, 33, 0.55) 0%, rgba(12, 7, 33, 0.75) 50%, rgba(12, 7, 33, 0.92) 100%);
}
.hai-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- Wrap: centered single column --- */
.hero-ai .hai-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hai-copy {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Eyebrow pill --- */
.hai-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  color: #FFFBF7;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 209, 173, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  letter-spacing: .01em;
}
.hai-eyebrow__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFB366;
  box-shadow: 0 0 0 0 rgba(255, 179, 102, 0.7);
  animation: hai-pulse 2s ease-out infinite;
}
@keyframes hai-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 179, 102, 0.7); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 179, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 179, 102, 0); }
}

/* --- Headline --- */
.hai-h1 {
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: .9rem 0 .7rem;
  color: #FFFBF7;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.hai-grad {
  background: linear-gradient(120deg, #FFB366 0%, #F48A4F 35%, #E86A2C 55%, #B08CF0 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hai-shift 8s ease-in-out infinite alternate;
}
@keyframes hai-shift { to { background-position: 100% 50%; } }

.hai-lead {
  font-size: clamp(.98rem, 1.1vw, 1.1rem);
  color: rgba(255, 251, 247, 0.78);
  max-width: 58ch;
  line-height: 1.55;
  margin: 0 auto 1.25rem;
}

/* --- Unified apply stack: countdown + primary CTA together --- */
.hai-apply-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-bottom: 1.4rem;
  padding: .55rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 179, 102, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 24px 60px -24px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* Compact single-line countdown pill inside the stack */
.hai-count {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  font-size: .8rem;
  color: rgba(255, 251, 247, 0.85);
}
.hai-count__head {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFB366;
  white-space: nowrap;
}
.hai-count__live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FF6B6B;
  box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
  animation: hai-pulse-red 1.8s ease-out infinite;
  flex-shrink: 0;
}
@keyframes hai-pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 107, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0); }
}
.hai-count__grid {
  display: inline-flex;
  align-items: baseline;
  gap: .15rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: #FFD1AD;
}
.hai-count__cell {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.hai-count__cell .n { display: inline; font: inherit; color: inherit; }
.hai-count__cell .l {
  font-family: Inter, system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255, 251, 247, 0.5);
  margin-left: 1px;
  text-transform: lowercase;
}
.hai-count__sep {
  color: rgba(255, 179, 102, 0.45);
  font-weight: 700;
  margin: 0 .15rem;
}
.hai-count.is-closed .hai-count__head { color: #FF6B6B; }
.hai-count.is-closed .hai-count__grid { color: #FF6B6B; }

/* Apply button sits flush inside the stack */
.hai-btn-apply {
  background: linear-gradient(135deg, #F48A4F, #E86A2C) !important;
  border: 0 !important;
  color: #fff !important;
  padding: 1rem 1.6rem !important;
  font-size: .98rem !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  box-shadow:
    0 14px 32px -12px rgba(232, 106, 44, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
  justify-content: center;
}
.hai-btn-apply:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px -12px rgba(232, 106, 44, 0.75),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}
.hai-ctas { display: contents; } /* no extra wrapper spacing */

/* --- "Designed by" marquee --- */
.hai-designed {
  margin: 0 auto 1.1rem;
  width: 100%;
  max-width: 100%;
}
.hai-designed__head {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 209, 173, 0.85);
  margin-bottom: .6rem;
  max-width: 100%;
  padding: 0 .75rem;
}
.hai-designed__head .lbl-short,
.hai-count__head .lbl-short { display: none; }
.hai-designed__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8AE68A;
  box-shadow: 0 0 10px #8AE68A;
  animation: hai-blink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hai-blink { 50% { opacity: .35; } }

.hai-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: .75rem 0;
  border-top: 1px solid rgba(255, 209, 173, 0.15);
  border-bottom: 1px solid rgba(255, 209, 173, 0.15);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}
.hai-marquee__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.hai-marquee__edge--l {
  left: 0;
  background: linear-gradient(90deg, rgba(12, 7, 33, 0.95), transparent);
}
.hai-marquee__edge--r {
  right: 0;
  background: linear-gradient(-90deg, rgba(12, 7, 33, 0.95), transparent);
}
.hai-marquee__track {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  width: max-content;
  animation: hai-scroll 22s linear infinite;
  will-change: transform;
}
/* Shift by exactly half the duplicated track so set-2 lands where set-1 started
   — zero visible seam. */
@keyframes hai-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.hai-marquee:hover .hai-marquee__track {
  animation-play-state: paused;
}
/* Brand chip: colored favicon + name pill */
.hai-chip-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .85rem .4rem .45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* backdrop-filter removed — the hero already has overlay + noise layers,
     and 24 chip-level blurs compositing on every animation frame was causing
     jank while the marquee scrolled. The look is preserved by the translucent
     background alone. */
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.hai-chip-brand:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 209, 173, 0.4);
  transform: scale(1.04);
}
.hai-ficon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
.hai-chip-name {
  font-family: Inter, system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 251, 247, 0.92);
}

/* --- Trust stats --- */
.hai-trust {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .6rem 2rem;
  justify-content: center;
  padding-top: .9rem;
  border-top: 1px dashed rgba(255, 209, 173, 0.18);
}
.hai-tm {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
}
.hai-tm .k {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(120deg, #FFD1AD, #F48A4F);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.hai-tm .v {
  font-size: .72rem;
  font-weight: 500;
  color: rgba(255, 251, 247, 0.6);
  letter-spacing: .01em;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hero-ai {
    height: auto;
    min-height: calc(100vh - 64px);
    max-height: none;
    padding: 2rem 0 2.5rem;
  }
  .hai-h1 { font-size: clamp(2rem, 8vw, 2.8rem); margin: .8rem 0 .55rem; }
  .hai-lead { font-size: .94rem; margin-bottom: 1rem; }
  .hai-apply-stack { width: 100%; max-width: 380px; }
  .hai-count { padding: .5rem .65rem; font-size: .75rem; flex-wrap: wrap; justify-content: center; gap: .4rem .55rem; }
  .hai-count__grid { font-size: .92rem; }
  .hai-count__head { font-size: .62rem; letter-spacing: .12em; }
  .hai-btn-apply { padding: .9rem 1.3rem !important; font-size: .92rem !important; }
  .hai-marquee { max-width: 100%; padding: .65rem 0; }
  .hai-marquee__track { gap: 1.8rem; animation-duration: 18s; }
  .hai-marquee__edge { width: 40px; }
  .hai-chip-brand { padding: .3rem .7rem .3rem .35rem; gap: .4rem; }
  .hai-ficon { width: 18px; height: 18px; border-radius: 5px; }
  .hai-chip-name { font-size: .78rem; }
  .hai-trust { gap: .5rem 1.2rem; padding-top: .7rem; }
  .hai-tm .k { font-size: 1rem; }
  .hai-tm .v { font-size: .68rem; }
  .hide-sm { display: none; }
}
@media (max-width: 480px) {
  .hai-count__head .lbl-full,
  .hai-designed__head .lbl-full { display: none; }
  .hai-count__head .lbl-short,
  .hai-designed__head .lbl-short { display: inline; }
  .hai-count__cell .l { display: none; }
  .hai-count__grid { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hai-video { display: none; }
  .hai-grad, .hai-eyebrow__pulse, .hai-designed__pulse,
  .hai-count__live, .hai-marquee__track { animation: none !important; }
}


/* =========================================================================
   PICK YOUR CAMPUS — image-led campus selection
   ========================================================================= */
.pick-campus {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: linear-gradient(180deg, #FFFBF7 0%, #FFF4EA 45%, #FFFBF7 100%);
  overflow: hidden;
  isolation: isolate;
}
.pick-campus::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 520px; height: 520px;
  background: rgba(232, 106, 44, 0.08);
  filter: blur(100px);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
.pick-campus::after {
  content: "";
  position: absolute;
  bottom: -20%; left: -10%;
  width: 460px; height: 460px;
  background: rgba(176, 140, 240, 0.07);
  filter: blur(100px);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

/* Head */
.pc-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.pc-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: .8rem 0 .9rem;
  color: #1A1230;
  font-weight: 800;
}
.pc-head .hl {
  background: linear-gradient(120deg, #E86A2C 0%, #F48A4F 60%, #B08CF0 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pc-head p {
  color: var(--c-text-2, #4A4360);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 0 auto;
}
.pc-head p strong { color: #1A1230; font-weight: 700; }

/* Grid: two large campus cards side-by-side */
.pc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

/* Card */
.pc-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.06);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 20px 60px -30px rgba(26, 18, 48, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.pc-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 30px 80px -30px rgba(26, 18, 48, 0.35),
    0 0 0 1px rgba(232, 106, 44, 0.18) inset;
}

/* Media (top half): photo + overlay + location pin + quick facts */
.pc-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    linear-gradient(135deg, #2A1F4A 0%, #1A1230 100%);
}
.pc-card--gla .pc-media {
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(244, 138, 79, 0.38), transparent 55%),
    radial-gradient(120% 90% at 80% 90%, rgba(176, 140, 240, 0.30), transparent 55%),
    linear-gradient(135deg, #2A1F4A, #1A1230);
}
.pc-card--geeta .pc-media {
  background:
    radial-gradient(120% 90% at 80% 20%, rgba(138, 230, 138, 0.28), transparent 55%),
    radial-gradient(120% 90% at 20% 90%, rgba(244, 138, 79, 0.32), transparent 55%),
    linear-gradient(135deg, #1A3A2A, #0E2020);
}
.pc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.pc-card:hover .pc-photo { transform: scale(1.04); }

.pc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 7, 33, 0.1) 0%, rgba(12, 7, 33, 0.5) 100%);
  pointer-events: none;
}

.pc-pin {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #1A1230;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 2;
}
.pc-pin svg { width: 12px; height: 12px; color: #E86A2C; }

.pc-quick {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  gap: 0;
  padding: .35rem;
  border-radius: 14px;
  background: rgba(12, 7, 33, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
}
.pc-quick__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .35rem .7rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.pc-quick__cell:last-child { border-right: 0; }
.pc-quick__cell .k {
  font-size: .95rem;
  font-weight: 800;
  color: #FFD1AD;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pc-quick__cell .l {
  font-size: .62rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 3px;
}

/* Body */
.pc-body {
  padding: 1.5rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.pc-title h3 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #1A1230;
  margin: 0;
  line-height: 1.2;
}
.pc-tag {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pc-tag--city {
  background: linear-gradient(135deg, rgba(232, 106, 44, 0.15), rgba(244, 138, 79, 0.1));
  color: #CF5A22;
  border: 1px solid rgba(232, 106, 44, 0.3);
}
.pc-tag--green {
  background: linear-gradient(135deg, rgba(138, 230, 138, 0.15), rgba(176, 140, 240, 0.1));
  color: #3D7A3D;
  border: 1px solid rgba(138, 230, 138, 0.35);
}

.pc-tag-line {
  color: var(--c-text-2, #4A4360);
  font-size: .92rem;
  line-height: 1.55;
  margin: 0;
}

.pc-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem .75rem;
}
.pc-chips li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 600;
  color: #1A1230;
  line-height: 1.3;
}
.pc-chips li svg {
  width: 16px;
  height: 16px;
  color: #E86A2C;
  flex-shrink: 0;
}

.pc-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .5rem;
}
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .85rem 1.2rem;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
  flex: 1 1 auto;
  min-width: 0;
}
.pc-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pc-btn--primary {
  background: linear-gradient(135deg, #F48A4F, #E86A2C);
  color: #fff;
  border: 0;
  box-shadow: 0 10px 24px -10px rgba(232, 106, 44, 0.55);
}
.pc-btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(232, 106, 44, 0.7);
}
.pc-btn--ghost {
  background: #fff;
  color: #1A1230;
  border: 1px solid rgba(26, 18, 48, 0.12);
}
.pc-btn--ghost:hover {
  border-color: #E86A2C;
  color: #CF5A22;
  transform: translateY(-2px);
}

/* Compare table */
.pc-compare {
  max-width: 860px;
  margin: 0 auto clamp(2rem, 3.5vw, 3rem);
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.08);
  border-radius: 18px;
  box-shadow: 0 10px 40px -20px rgba(26, 18, 48, 0.15);
}
.pc-compare__head,
.pc-compare__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(26, 18, 48, 0.06);
}
.pc-compare__row:last-child { border-bottom: 0; }
.pc-compare__head {
  border-bottom: 1px solid rgba(26, 18, 48, 0.12);
}
.pc-compare__label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--c-muted, #6B6480);
}
.pc-compare__h {
  font-size: .85rem;
  font-weight: 800;
  color: #1A1230;
  letter-spacing: -0.01em;
}
.pc-compare__h--gla { color: #CF5A22; }
.pc-compare__h--geeta { color: #3D7A3D; }
.pc-compare__k {
  font-size: .85rem;
  font-weight: 700;
  color: var(--c-muted, #6B6480);
}
.pc-compare__row span:not(.pc-compare__k) {
  font-size: .88rem;
  color: #1A1230;
  font-weight: 500;
}

/* "Still deciding?" strip */
.pc-still {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #1A1230 0%, #2A1F4A 100%);
  color: #fff;
  flex-wrap: wrap;
}
.pc-still__left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 320px;
  min-width: 0;
}
.pc-still__ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F48A4F, #E86A2C);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 20px -8px rgba(232, 106, 44, 0.55);
}
.pc-still__ic svg { width: 22px; height: 22px; }
.pc-still__left strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}
.pc-still__left span {
  font-size: .85rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}
.pc-still__ctas {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.pc-still__ctas .pc-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.pc-still__ctas .pc-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
  .pc-grid { grid-template-columns: 1fr; }
  .pc-quick__cell { padding: .3rem .55rem; }
  .pc-quick__cell .k { font-size: .85rem; }
}
@media (max-width: 600px) {
  .pc-body { padding: 1.25rem 1.25rem 1.35rem; }
  .pc-chips { grid-template-columns: 1fr; }
  .pc-ctas .pc-btn { flex: 1 1 100%; }
  .pc-compare__head,
  .pc-compare__row { grid-template-columns: 1fr 1fr; }
  .pc-compare__label { grid-column: 1 / -1; }
  .pc-compare__k { grid-column: 1 / -1; margin-top: .2rem; }
  .pc-still { flex-direction: column; align-items: stretch; }
  .pc-still__ctas .pc-btn { flex: 1 1 100%; }
}
@media (max-width: 420px) {
  .pc-quick { padding: .25rem; }
  .pc-quick__cell { padding: .25rem .45rem; }
  .pc-quick__cell .k { font-size: .78rem; }
  .pc-quick__cell .l { font-size: .58rem; }
  .pc-pin { font-size: .72rem; padding: .35rem .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-card, .pc-photo { transition: none !important; }
  .pc-card:hover { transform: none; }
  .pc-card:hover .pc-photo { transform: none; }
}


/* =========================================================================
   STUDENT SUCCESS STORIES — horizontal carousel with big portraits
   ========================================================================= */
.stories {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(232, 106, 44, 0.08), transparent 65%),
    radial-gradient(700px 500px at -10% 90%, rgba(176, 140, 240, 0.08), transparent 65%),
    linear-gradient(180deg, #FFFBF7 0%, #FFF6EC 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Success Stories styles moved to shared.css */


/* =========================================================================
   ABOUT CBNEST — process (left) + apply form (right)
   ========================================================================= */
.cbat {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(232, 106, 44, 0.08), transparent 65%),
    radial-gradient(700px 500px at 0% 100%, rgba(176, 140, 240, 0.08), transparent 65%),
    linear-gradient(180deg, #FFF6EC 0%, #FFFBF7 55%, #FFF6EC 100%);
  overflow: hidden;
  isolation: isolate;
}

.cbat-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2rem, 3.5vw, 3rem);
}
.cbat-head h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: .7rem 0 .7rem;
  color: #1A1230;
  font-weight: 800;
}
.cbat-head .hl {
  background: linear-gradient(120deg, #E86A2C 0%, #F48A4F 60%, #B08CF0 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cbat-head p {
  color: var(--c-text-2, #4A4360);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* --- Two-column grid --- */
.cbat-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* =========================================================================
   LEFT — Process timeline
   ========================================================================= */
.cbat-process {
  position: relative;
  padding: 1.75rem 1.75rem 1.5rem;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.06);
  box-shadow: 0 20px 50px -24px rgba(26, 18, 48, 0.18);
}
.cbat-process__head {
  margin-bottom: 1.5rem;
}
.cbat-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 106, 44, 0.14), rgba(244, 138, 79, 0.06));
  border: 1px solid rgba(232, 106, 44, 0.25);
  color: #CF5A22;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .7rem;
}
.cbat-badge svg { width: 12px; height: 12px; color: #E86A2C; }
.cbat-process__head h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #1A1230;
  margin: 0;
  line-height: 1.3;
}

/* --- Steps --- */
.cbat-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Vertical connecting line behind the step numbers */
.cbat-steps::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(180deg, rgba(232, 106, 44, 0.3), rgba(176, 140, 240, 0.2));
  border-radius: 2px;
  z-index: 0;
}
.cbat-step {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0;
  padding: .35rem 0 1.1rem;
}
.cbat-step:last-child { padding-bottom: 0; }
.cbat-step__num {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
  font-weight: 800;
  color: #CF5A22;
  background: #fff;
  border: 2px solid rgba(232, 106, 44, 0.3);
  letter-spacing: -0.01em;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
}
.cbat-step:hover .cbat-step__num {
  background: linear-gradient(135deg, #F48A4F, #E86A2C);
  border-color: transparent;
  color: #fff;
  transform: scale(1.08);
}
.cbat-step__body {
  display: flex;
  gap: .85rem;
  padding-left: 1rem;
  align-items: flex-start;
}
.cbat-step__ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(232, 106, 44, 0.12), rgba(176, 140, 240, 0.1));
  color: #E86A2C;
  flex-shrink: 0;
  margin-top: 4px;
}
.cbat-step__ico svg { width: 17px; height: 17px; }
.cbat-step__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #1A1230;
  line-height: 1.25;
  margin-bottom: 4px;
}
.cbat-step__desc {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--c-text-2, #4A4360);
  margin: 0 0 .5rem;
}
.cbat-step__desc strong { color: #1A1230; font-weight: 700; }
.cbat-step__chip {
  display: inline-flex;
  align-items: center;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #CF5A22;
  background: rgba(232, 106, 44, 0.08);
  border: 1px solid rgba(232, 106, 44, 0.2);
}
.cbat-step__chip--done {
  background: linear-gradient(135deg, #F48A4F, #E86A2C);
  color: #fff;
  border: 0;
  text-transform: uppercase;
  font-size: .65rem;
  letter-spacing: .1em;
}

/* --- "Why" strip at the bottom of the process card --- */
.cbat-why {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.25rem;
  padding: .9rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(138, 230, 138, 0.08), rgba(232, 106, 44, 0.04));
  border: 1px solid rgba(138, 230, 138, 0.25);
}
.cbat-why__ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #3D7A3D;
  flex-shrink: 0;
  border: 1px solid rgba(138, 230, 138, 0.3);
}
.cbat-why__ic svg { width: 18px; height: 18px; }
.cbat-why strong {
  display: block;
  font-size: .9rem;
  font-weight: 800;
  color: #1A1230;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 2px;
}
.cbat-why span {
  font-size: .78rem;
  color: var(--c-text-2, #4A4360);
  line-height: 1.4;
}

/* =========================================================================
   RIGHT — Apply form
   ========================================================================= */
.cbat-form-wrap {
  position: relative;
  padding: 1.75rem 1.75rem;
  border-radius: 22px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF4EA 100%);
  border: 1px solid rgba(232, 106, 44, 0.2);
  box-shadow:
    0 30px 60px -28px rgba(232, 106, 44, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  position: sticky;
  top: 88px;
}

.cbat-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cbat-form__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: .9rem;
  border-bottom: 1px dashed rgba(232, 106, 44, 0.22);
}
.cbat-form__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E86A2C;
  box-shadow: 0 0 0 0 rgba(232, 106, 44, 0.7);
  animation: cbat-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes cbat-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 106, 44, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(232, 106, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 106, 44, 0); }
}
.cbat-form__head h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #1A1230;
  margin: 0;
  line-height: 1.2;
}
.cbat-form__head p {
  font-size: .78rem;
  color: var(--c-muted, #6B6480);
  margin: 3px 0 0;
  font-weight: 500;
}

/* --- Fields --- */
.cbat-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.cbat-field label,
.cbat-label {
  font-size: .78rem;
  font-weight: 700;
  color: #1A1230;
  letter-spacing: -0.005em;
}
.cbat-field input[type="text"],
.cbat-field input[type="email"],
.cbat-field input[type="tel"],
.cbat-field input[type="date"] {
  width: 100%;
  padding: .75rem .9rem;
  font: inherit;
  font-size: .9rem;
  color: #1A1230;
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.12);
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.cbat-field input[type="date"]{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 49.05px;
}
.cbat-field input::placeholder { color: rgba(107, 100, 128, 0.55); }
.cbat-field input:hover { border-color: rgba(232, 106, 44, 0.35); }
.cbat-field input:focus {
  outline: 0;
  border-color: #E86A2C;
  box-shadow: 0 0 0 4px rgba(232, 106, 44, 0.12);
  background: #fff;
}
.cbat-field input:user-invalid,
.cbat-field.is-error input,
.cbat-field.is-error .cbat-select select {
  border-color: #E35959;
  box-shadow: 0 0 0 4px rgba(227, 89, 89, 0.12);
}
.cbat-field.is-valid input,
.cbat-field.is-valid .cbat-select select {
  border-color: #2F8F5F;
  box-shadow: 0 0 0 3px rgba(47, 143, 95, 0.1);
}

/* Field validation messages */
.cbat-field-msg {
  font-size: .69rem;
  min-height: 1rem;
  display: flex;
  align-items: center;
  gap: .28rem;
  line-height: 1.3;
}
.cbat-field-msg:empty { min-height: 0; }
.cbat-field-msg.err  { color: #D93025; }
.cbat-field-msg.info { color: #C05800; }
.cbat-field-msg svg  { flex-shrink: 0; }

/* Shake animation */
@keyframes cbatShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}
.cbat-field.shake > input,
.cbat-field.shake .cbat-select select,
.cbat-verify-btn.shake {
  animation: cbatShake .32s ease;
}

/* Phone with +91 prefix pill */
.cbat-phone {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.cbat-phone__code {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .75rem;
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.12);
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 700;
  color: #1A1230;
  flex-shrink: 0;
}
.cbat-phone__code svg {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
}
.cbat-phone input { flex: 1; min-width: 0; }

/* Select */
.cbat-select {
  position: relative;
}
.cbat-select select {
  width: 100%;
  padding: .75rem 2.4rem .75rem .9rem;
  font: inherit;
  font-size: .9rem;
  color: #1A1230;
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.12);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cbat-select select:hover { border-color: rgba(232, 106, 44, 0.35); }
.cbat-select select:focus {
  outline: 0;
  border-color: #E86A2C;
  box-shadow: 0 0 0 4px rgba(232, 106, 44, 0.12);
}
.cbat-select__chev {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: #6B6480;
  pointer-events: none;
}

/* Radio pills (campus) */
.cbat-radio-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}
.cbat-radio {
  position: relative;
  cursor: pointer;
}
.cbat-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cbat-radio__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: .65rem .75rem;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid rgba(26, 18, 48, 0.12);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.cbat-radio__t {
  font-size: .85rem;
  font-weight: 800;
  color: #1A1230;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.cbat-radio__s {
  font-size: .7rem;
  color: var(--c-muted, #6B6480);
  font-weight: 600;
  margin-top: 2px;
}
.cbat-radio:hover .cbat-radio__box {
  border-color: rgba(232, 106, 44, 0.35);
}
.cbat-radio input:checked + .cbat-radio__box {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(232, 106, 44, 0.12), rgba(244, 138, 79, 0.08));
  box-shadow: 0 0 0 2px #E86A2C inset, 0 8px 18px -10px rgba(232, 106, 44, 0.5);
  transform: translateY(-1px);
}
.cbat-radio input:checked + .cbat-radio__box .cbat-radio__t { color: #CF5A22; }
.cbat-radio input:focus-visible + .cbat-radio__box {
  box-shadow: 0 0 0 4px rgba(232, 106, 44, 0.2);
}

/* Consent checkbox */
.cbat-consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .78rem;
  color: var(--c-text-2, #4A4360);
  line-height: 1.45;
  cursor: pointer;
}
.cbat-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: #E86A2C;
  flex-shrink: 0;
}

/* Submit */
.cbat-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding: .95rem 1.2rem;
  font: inherit;
  font-size: .96rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(135deg, #F48A4F, #E86A2C);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow:
    0 14px 32px -12px rgba(232, 106, 44, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.cbat-submit:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow:
    0 20px 40px -12px rgba(232, 106, 44, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}
.cbat-submit:active { transform: translateY(0); }
.cbat-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.cbat-submit svg {
  width: 14px;
  height: 14px;
  transition: transform .25s ease;
}
.cbat-submit:hover svg { transform: translateX(3px); }

/* Privacy microcopy */
.cbat-privacy {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  justify-content: center;
  font-size: .72rem;
  color: var(--c-muted, #6B6480);
  margin: 0;
  line-height: 1.3;
}
.cbat-privacy svg { color: #8AA380; flex-shrink: 0; }

/* Success state */
.cbat-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem .5rem;
  gap: .5rem;
  animation: cbat-fade-in .5s cubic-bezier(.2,.8,.3,1);
}
@keyframes cbat-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cbat-success__tick {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8AE68A, #3D7A3D);
  color: #fff;
  box-shadow: 0 14px 30px -10px rgba(61, 122, 61, 0.45);
  margin-bottom: .5rem;
  animation: cbat-tick .6s cubic-bezier(.2,.8,.3,1);
}
@keyframes cbat-tick {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.cbat-success__tick svg { width: 28px; height: 28px; }
.cbat-success h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1A1230;
  letter-spacing: -0.02em;
  margin: 0;
}
.cbat-success p {
  font-size: .9rem;
  color: var(--c-text-2, #4A4360);
  line-height: 1.5;
  margin: 0 0 .5rem;
  max-width: 42ch;
}
.cbat-success__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .88rem;
  color: #CF5A22;
  text-decoration: none;
  padding: .55rem 1rem;
  border-radius: 999px;
  background: rgba(232, 106, 44, 0.08);
  border: 1px solid rgba(232, 106, 44, 0.25);
  transition: background .25s ease, gap .25s ease;
}
.cbat-success__link svg {
  width: 14px;
  height: 14px;
  transition: transform .25s ease;
}
.cbat-success__link:hover {
  background: rgba(232, 106, 44, 0.14);
  gap: .55rem;
}
.cbat-success__link:hover svg { transform: translateX(3px); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .cbat-grid { grid-template-columns: 1fr; }
  .cbat-form-wrap { position: static; }
  .cbat-radio-group { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cbat-process,
  .cbat-form-wrap { padding: 1.25rem; }
  .cbat-step__body { gap: .6rem; padding-left: .75rem; }
  .cbat-step__num { width: 40px; height: 40px; font-size: .8rem; }
  .cbat-step { grid-template-columns: 40px 1fr; }
  .cbat-steps::before { left: 19px; }
  .cbat-head h2 { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cbat-form__pulse, .cbat-success, .cbat-success__tick { animation: none !important; }
  .cbat-step:hover .cbat-step__num { transform: none; }
  .cbat-submit:hover { transform: none; }
  .cbat-submit:hover svg { transform: none; }
}


/* =========================================================================
   CBNEST — test date banner, OTP flow, back button, hint/resend
   ========================================================================= */

/* --- Test date banner at the top of the form column --- */
.cbat-date {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #1A1230 0%, #2A1F4A 60%, #3D2B5E 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cbat-date::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -20%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(232, 106, 44, 0.38), transparent 60%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
.cbat-date__ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F48A4F, #E86A2C);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(232, 106, 44, 0.55);
}
.cbat-date__ic svg { width: 18px; height: 18px; }
.cbat-date__text { display: flex; flex-direction: column; min-width: 0; }
.cbat-date__label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFB366;
}
.cbat-date__day {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  line-height: 1.2;
  margin-top: 2px;
}
.cbat-date__time {
  font-size: .78rem;
  color: rgba(255, 209, 173, 0.85);
  font-weight: 500;
  margin-top: 2px;
}

/* --- Inline field hint --- */
.cbat-hint {
  font-size: .74rem;
  color: var(--c-muted, #6B6480);
  font-weight: 500;
  margin-top: 2px;
}

/* --- Back button on OTP step --- */
.cbat-back {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 18, 48, 0.05);
  border: 1px solid rgba(26, 18, 48, 0.1);
  color: #1A1230;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.cbat-back svg { width: 14px; height: 14px; }
.cbat-back:hover {
  background: rgba(232, 106, 44, 0.08);
  border-color: rgba(232, 106, 44, 0.3);
  color: #CF5A22;
  transform: translateX(-1px);
}

/* --- OTP step layout swap --- */
.cbat-form--otp .cbat-form__head {
  gap: .7rem;
}

/* --- OTP digit boxes --- */
.cbat-field--otp { gap: .55rem; }
.cbat-otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .45rem;
}
.cbat-otp__digit {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  color: #1A1230;
  background: #fff;
  border: 1.5px solid rgba(26, 18, 48, 0.12);
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.cbat-otp__digit:hover { border-color: rgba(232, 106, 44, 0.35); }
.cbat-otp__digit:focus {
  outline: 0;
  border-color: #E86A2C;
  box-shadow: 0 0 0 4px rgba(232, 106, 44, 0.15);
  transform: translateY(-1px);
}
.cbat-otp__digit:not(:placeholder-shown),
.cbat-otp__digit[value]:not([value=""]) {
  background: linear-gradient(135deg, rgba(232, 106, 44, 0.08), rgba(244, 138, 79, 0.04));
  border-color: rgba(232, 106, 44, 0.4);
  color: #CF5A22;
}

/* --- OTP error line --- */
.cbat-otp-error {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 600;
  color: #E35959;
  margin-top: 2px;
}
.cbat-otp-error svg { color: #E35959; flex-shrink: 0; }

/* --- Resend timer / button --- */
.cbat-resend {
  font-size: .78rem;
  color: var(--c-muted, #6B6480);
  text-align: center;
  margin-top: 4px;
}
.cbat-resend strong {
  color: #CF5A22;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cbat-resend__btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: #CF5A22;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.cbat-resend__btn:hover { color: #E86A2C; }

@media (max-width: 560px) {
  .cbat-otp { gap: .35rem; }
  .cbat-otp__digit { font-size: 1.2rem; border-radius: 10px; }
  .cbat-date__day { font-size: .98rem; }
  .cbat-date__time { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cbat-otp__digit:focus { transform: none; }
  .cbat-back:hover { transform: none; }
}


/* "Change" link inside the OTP label */
.cbat-edit-phone {
  background: none;
  border: 0;
  padding: 0;
  margin-left: .35rem;
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  color: #CF5A22;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.cbat-edit-phone:hover { color: #E86A2C; }

/* Locked (readonly) detail fields while OTP is active — subtle visual cue */
.cbat-form input[readonly],
.cbat-form input[disabled] {
  background: rgba(26, 18, 48, 0.03);
  color: #6B6480;
  cursor: not-allowed;
}
.cbat-form input[readonly]:focus { box-shadow: none; border-color: rgba(26, 18, 48, 0.12); }


/* =========================================================================
   OTP PHONE VERIFICATION — verify button, badge, modal
   ========================================================================= */

/* Inline verify button inside .cbat-phone */
.cbat-verify-btn {
  flex-shrink: 0;
  padding: 0 1rem;
  align-self: stretch;
  background: #E86A2C;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s, opacity .16s, transform .12s;
}
.cbat-verify-btn:not(:disabled):hover { background: #CF5A22; transform: translateY(-1px); }
.cbat-verify-btn:disabled { background: rgba(26,18,48,0.08); color: rgba(26,18,48,0.3); cursor: not-allowed; }
.cbat-verify-btn.is-sending { opacity: .7; cursor: wait; }

/* Verified badge (replaces verify button after success) */
.cbat-verified-badge.hidden{
  display: none;
}
.cbat-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 700;
  color: #2F8F5F;
  margin-top: .3rem;
}
.cbat-verified-badge svg { color: #2F8F5F; flex-shrink: 0; }

/* Submit note shown while phone unverified */
.cbat-submit-note {
  font-size: .78rem;
  color: #6B6480;
  text-align: center;
  margin: .4rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}

/* OTP modal CSS moved to shared.css */

/* =========================================================================
   INDUSTRY WALL — auto-scrolling faculty rows
   ========================================================================= */
.iwall {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(232, 106, 44, 0.08), transparent 65%),
    radial-gradient(700px 500px at 20% 100%, rgba(176, 140, 240, 0.08), transparent 65%),
    linear-gradient(180deg, #FFFBF7 0%, #FFF4EA 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Head */
.iwall-head {
  text-align: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.iwall-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #CF5A22;
  background: linear-gradient(135deg, rgba(232, 106, 44, 0.12), rgba(244, 138, 79, 0.04));
  border: 1px solid rgba(232, 106, 44, 0.25);
  margin-bottom: .9rem;
}
.iwall-eyebrow__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #E86A2C;
  box-shadow: 0 0 0 0 rgba(232, 106, 44, 0.7);
  animation: iwall-pulse 2s ease-out infinite;
}
@keyframes iwall-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 106, 44, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(232, 106, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 106, 44, 0); }
}

.iwall-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 auto .6rem;
  color: #1A1230;
  max-width: 22ch;
}
.iwall-hl {
  background: linear-gradient(120deg, #E86A2C 0%, #F48A4F 55%, #B08CF0 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.iwall-head p {
  color: var(--c-text-2, #4A4360);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 62ch;
}

.iwall-stats {
  display: inline-flex;
  gap: 2rem;
  margin-top: 1.25rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.08);
  box-shadow: 0 8px 24px -12px rgba(26, 18, 48, 0.15);
  flex-wrap: wrap;
  justify-content: center;
}
.iwall-stat {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}
.iwall-stat strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #CF5A22;
}
.iwall-stat span {
  font-size: .76rem;
  font-weight: 600;
  color: var(--c-muted, #6B6480);
}

/* Row: horizontal scroll container (JS drives the auto-advance + drag) */
.iwall-row {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1rem 0 1.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y; /* allow vertical page scroll, handle horizontal ourselves */
}
.iwall-row::-webkit-scrollbar { display: none; }
.iwall-row.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.iwall-row.is-dragging .ibig { pointer-events: none; } /* don't trigger hovers while dragging */

.iwall-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  will-change: scroll-position;
}

/* ============ BIG MENTOR CARD ============ */
.ibig {
  flex: 0 0 300px;
  width: 300px;
  height: 380px;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.06);
  box-shadow:
    0 18px 50px -24px rgba(26, 18, 48, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  transition: transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .5s ease, border-color .4s ease;
  isolation: isolate;
}
.ibig::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--ibig-accent, #E86A2C), transparent);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 4;
}
.ibig:hover {
  transform: translateY(-8px);
  border-color: var(--ibig-accent, #E86A2C);
  box-shadow:
    0 30px 60px -24px rgba(232, 106, 44, 0.35),
    0 0 0 1px rgba(232, 106, 44, 0.15) inset;
}
.ibig:hover::after { opacity: 1; }

/* Photo area fills the ENTIRE card (no separate body strip) */
.ibig-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 110%, var(--ibig-accent-bg, rgba(232, 106, 44, 0.18)) 0%, transparent 60%),
    linear-gradient(180deg, #FFFBF7 0%, #FFF4EA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ibig-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* never crop faces */
  z-index: 2;
  transition: transform .8s cubic-bezier(.2,.8,.3,1), filter .5s ease;
}
.ibig:hover .ibig-photo img {
  transform: scale(1.05);
  filter: saturate(1.08) contrast(1.02);
}

/* Initials fallback — soft accent glyph on cream */
.ibig-ini {
  position: relative;
  z-index: 1;
  font-family: Inter, system-ui, sans-serif;
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--ibig-accent, #E86A2C);
  letter-spacing: -0.05em;
  opacity: .35;
  text-shadow: 0 4px 20px rgba(232, 106, 44, 0.15);
}
.ibig-photo.has-img .ibig-ini { display: none; }

/* Dark-to-transparent overlay at the bottom so the name/role pops */
.ibig-photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(14, 10, 36, 0.0) 30%,
    rgba(14, 10, 36, 0.45) 65%,
    rgba(14, 10, 36, 0.85) 100%);
  z-index: 3;
  pointer-events: none;
}

/* Info overlay sitting at the bottom of the photo */
.ibig-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  padding: 1.3rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  color: #fff;
}
.ibig-body h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Meta row: role left, company logo + name right */
.ibig-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0;
  min-width: 0;
}
.ibig-role {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.005em;
  line-height: 1.25;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Company — bare logo + wordmark, NO tile, NO pill, NO box */
.ibig-co {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: transform .3s ease;
}
.ibig:hover .ibig-co { transform: translateX(-2px); }

/* Logo sits directly over the photo — transparent background, no tile */
.ibig-co__logo {
  height: 38px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

/* Quote — no longer shown */
.ibig-quote { display: none; }

/* Tints */
.ibig.tint-orange {
  --ibig-tint-a: #3A1F14;
  --ibig-tint-b: #1F0E1B;
  --ibig-tint-soft: rgba(232, 106, 44, 0.5);
  --ibig-accent: #E86A2C;
  --ibig-accent-bg: rgba(232, 106, 44, 0.1);
  --ibig-accent-border: rgba(232, 106, 44, 0.3);
}
.ibig.tint-violet {
  --ibig-tint-a: #2A1F4A;
  --ibig-tint-b: #120B26;
  --ibig-tint-soft: rgba(178, 152, 238, 0.45);
  --ibig-accent: #7A6CCF;
  --ibig-accent-bg: rgba(122, 108, 207, 0.1);
  --ibig-accent-border: rgba(122, 108, 207, 0.3);
}
.ibig.tint-teal {
  --ibig-tint-a: #13363F;
  --ibig-tint-b: #0A1D22;
  --ibig-tint-soft: rgba(100, 200, 220, 0.4);
  --ibig-accent: #0F8C9E;
  --ibig-accent-bg: rgba(15, 140, 158, 0.1);
  --ibig-accent-border: rgba(15, 140, 158, 0.3);
}
.ibig.tint-rose {
  --ibig-tint-a: #3D1A2B;
  --ibig-tint-b: #1C0C18;
  --ibig-tint-soft: rgba(217, 90, 117, 0.45);
  --ibig-accent: #D95A75;
  --ibig-accent-bg: rgba(217, 90, 117, 0.1);
  --ibig-accent-border: rgba(217, 90, 117, 0.3);
}
.ibig.tint-amber {
  --ibig-tint-a: #3B2A0F;
  --ibig-tint-b: #1F1407;
  --ibig-tint-soft: rgba(245, 166, 35, 0.45);
  --ibig-accent: #E09419;
  --ibig-accent-bg: rgba(245, 166, 35, 0.14);
  --ibig-accent-border: rgba(245, 166, 35, 0.34);
}
.ibig.tint-mint {
  --ibig-tint-a: #103328;
  --ibig-tint-b: #0A1E18;
  --ibig-tint-soft: rgba(126, 208, 168, 0.45);
  --ibig-accent: #4FA87A;
  --ibig-accent-bg: rgba(126, 208, 168, 0.14);
  --ibig-accent-border: rgba(126, 208, 168, 0.34);
}

/* Responsive */
@media (max-width: 768px) {
  .iwall-stats { gap: 1.25rem; padding: .6rem 1.1rem; }
  .iwall-stat strong { font-size: .92rem; }
  .iwall-stat span { font-size: .7rem; }
  .ibig { flex: 0 0 260px; width: 260px; height: 350px; }
  .ibig-body h3 { font-size: 1.05rem; }
  .ibig-ini { font-size: 3.8rem; }
  .iwall-track { animation-duration: 48s; }
}
@media (max-width: 420px) {
  .ibig { flex: 0 0 230px; width: 230px; height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .iwall-track,
  .iwall-eyebrow__pulse { animation: none !important; }
  .ibig:hover { transform: none; }
  .ibig:hover .ibig-photo img { transform: none; }
}


/* =========================================================================
   FLOATING BOTTOM SECTION NAV — appears after the hero scrolls past
   ========================================================================= */
.floatnav {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 20px);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  max-width: calc(100vw - 1.5rem);
  transition: opacity .35s cubic-bezier(.2,.8,.3,1),
              transform .35s cubic-bezier(.2,.8,.3,1);
}
.floatnav.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.floatnav.is-hidden { /* hide near footer */
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
}

.floatnav-inner {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem;
  border-radius: 999px;
  background: rgba(26, 18, 48, 0.92);
  border: 1px solid rgba(255, 209, 173, 0.18);
  box-shadow:
    0 24px 60px -20px rgba(26, 18, 48, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.floatnav-inner::-webkit-scrollbar { display: none; }

.floatnav__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 251, 247, 0.72);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.floatnav__link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.floatnav__link.is-active {
  background: linear-gradient(135deg, #F48A4F, #E86A2C);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(232, 106, 44, 0.55);
}
.floatnav__link--primary {
  background: rgba(232, 106, 44, 0.18);
  color: #FFD1AD;
}
.floatnav__link--primary:hover {
  background: rgba(232, 106, 44, 0.28);
  color: #fff;
}
.floatnav__link--primary.is-active {
  background: linear-gradient(135deg, #FFB366, #E86A2C);
  color: #fff;
}

.floatnav__ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Responsive — with 9 chips the pill gets tight; tighten padding first,
   then hide labels (keep icons) on smaller viewports. */
@media (max-width: 900px) {
  .floatnav__link { padding: .5rem .7rem; font-size: .78rem; }
  .floatnav__link span { letter-spacing: -0.015em; }
}
@media (max-width: 820px) {
  .floatnav { bottom: .9rem; }
  .floatnav__link { padding: .5rem .6rem; }
  .floatnav__link span { display: none; }
  /* Keep the active chip + primary "Apply" chip labelled so users always know
     where they are and what the main CTA is. */
  .floatnav__link.is-active span,
  .floatnav__link--primary span { display: inline; margin-left: .2rem; }
  .floatnav__link.is-active { padding: .5rem .8rem; }
}
@media (max-width: 420px) {
  .floatnav__link.is-active span { display: none; }
  .floatnav__link.is-active { padding: .5rem .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .floatnav { transition: opacity .2s ease; }
}


/* =========================================================================
   WHY CB — horizontal decade-timeline (replaces the 3-tile grid)
   ========================================================================= */
.wcb-timeline {
  position: relative;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

/* The horizontal rail sits behind the dots. Uses left/right insets so it
   starts and stops with the first/last dot rather than the section edges. */
.wcb-rail {
  position: absolute;
  top: 26px;                     /* vertical centre of the dots */
  left: calc(100% / 12);         /* aligns with centre of first card */
  right: calc(100% / 12);        /* mirrors for last card */
  height: 2px;
  background: rgba(26, 18, 48, 0.08);
  border-radius: 2px;
  overflow: hidden;
  z-index: 0;
}
.wcb-rail__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #E86A2C 0%, #F48A4F 60%, #B08CF0 100%);
  border-radius: 2px;
  transition: width 1.6s cubic-bezier(.2, .8, .3, 1);
  box-shadow: 0 0 12px rgba(232, 106, 44, 0.4);
}
.wcb-timeline.in .wcb-rail__fill { width: 100%; }

/* Steps — horizontal row of 6 cards */
.wcb-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.wcb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2, .8, .3, 1),
              transform .6s cubic-bezier(.2, .8, .3, 1);
}
/* Staggered reveal — each step enters after the one before it */
.wcb-timeline.in .wcb-step { opacity: 1; transform: translateY(0); }
.wcb-timeline.in .wcb-step:nth-child(1) { transition-delay: .05s; }
.wcb-timeline.in .wcb-step:nth-child(2) { transition-delay: .2s; }
.wcb-timeline.in .wcb-step:nth-child(3) { transition-delay: .35s; }
.wcb-timeline.in .wcb-step:nth-child(4) { transition-delay: .5s; }
.wcb-timeline.in .wcb-step:nth-child(5) { transition-delay: .65s; }
.wcb-timeline.in .wcb-step:nth-child(6) { transition-delay: .8s; }

/* Dot — sits on the rail. 12px solid, with a ring halo on the current step. */
.wcb-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(232, 106, 44, 0.45);
  box-shadow: 0 0 0 4px rgba(255, 251, 247, 1);   /* white halo cuts the rail behind */
  transition: border-color .3s ease, transform .3s ease;
  flex-shrink: 0;
}
.wcb-timeline.in .wcb-dot {
  background: linear-gradient(135deg, #F48A4F, #E86A2C);
  border-color: transparent;
  transform: scale(1.05);
}
/* Current milestone dot pulses */
.wcb-dot--now::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(232, 106, 44, 0.35);
  z-index: -1;
  animation: wcb-pulse 2s cubic-bezier(.2, .8, .3, 1) infinite;
}
@keyframes wcb-pulse {
  0%   { transform: scale(0.6); opacity: 0.85; }
  80%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Card body under the dot */
.wcb-card {
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.08);
  border-radius: 16px;
  padding: 1rem 1.05rem 1.1rem;
  box-shadow: 0 10px 30px -18px rgba(26, 18, 48, 0.2);
  position: relative;
  text-align: left;
  flex: 1;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.wcb-card::before {
  /* Tiny connector tick from card to the dot above */
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 10px;
  background: linear-gradient(180deg, rgba(232, 106, 44, 0.4), rgba(232, 106, 44, 0));
}
.wcb-card:hover {
  transform: translateY(-3px);
  border-color: rgba(232, 106, 44, 0.3);
  box-shadow: 0 20px 40px -18px rgba(232, 106, 44, 0.25);
}
/* Current milestone — uses the site's brand gradient as a full background */
.wcb-step--now .wcb-card {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 179, 102, 0.35) 0%, transparent 55%),
    linear-gradient(145deg, #F48A4F 0%, #E86A2C 55%, #CF5A22 100%);
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 22px 44px -16px rgba(232, 106, 44, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset;
  overflow: hidden;
  isolation: isolate;
}
.wcb-step--now .wcb-card::before {
  /* Stronger connector tick, in white */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}
.wcb-step--now .wcb-card::after {
  /* Subtle top-right highlight glow */
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
.wcb-step--now .wcb-year {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.wcb-step--now .wcb-card h3 {
  color: #fff;
}
.wcb-step--now .wcb-card p {
  color: rgba(255, 255, 255, 0.88);
}
.wcb-step--now .wcb-pill {
  border-top-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.85);
}
.wcb-step--now .wcb-pill strong,
.wcb-step--now .wcb-pill--live {
  color: #fff;
}
.wcb-step--now .wcb-pill__dot {
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
}
.wcb-step--now .wcb-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 30px 60px -18px rgba(232, 106, 44, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

/* Link behaviour — card is clickable, text colors inherit */
.wcb-card--link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.wcb-card--link:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

/* Running conic-gradient border — traces the card perimeter in an endless sweep.
   Uses a CSS @property to make the angle animatable. */
@property --wcb-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.wcb-card__border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--wcb-angle),
    rgba(255, 255, 255, 0)     0deg,
    rgba(255, 255, 255, 0.95)  45deg,
    rgba(255, 255, 255, 0)     110deg,
    rgba(255, 255, 255, 0)     360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: wcb-sweep 3.5s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes wcb-sweep {
  to { --wcb-angle: 360deg; }
}

/* Fallback for browsers that don't support @property (Firefox < 128):
   a sliding highlight along the top edge gives a similar "running" feel. */
@supports not (background: conic-gradient(from 1deg, red, blue)) {
  .wcb-card__border {
    mask: none;
    -webkit-mask: none;
    padding: 0;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0) 100%);
    background-size: 40% 2px;
    background-position: -40% 0;
    background-repeat: no-repeat;
    animation: wcb-sweep-fallback 3.5s linear infinite;
  }
  @keyframes wcb-sweep-fallback {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
  }
}

/* Subtle inner beam that sweeps across once the card is hovered */
.wcb-card__beam {
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 40%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.24) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .9s cubic-bezier(.2,.8,.3,1);
  z-index: 0;
}
.wcb-card--link:hover .wcb-card__beam { left: 130%; }

/* Arrow that slides in on hover */
.wcb-card__arrow {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
  z-index: 2;
}
.wcb-card__arrow svg { width: 14px; height: 14px; }
.wcb-card--link:hover .wcb-card__arrow {
  opacity: 1;
  transform: translateX(0);
  background: rgba(255, 255, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .wcb-card__border,
  .wcb-card__beam { animation: none !important; transition: none !important; }
}

.wcb-year {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--o-700, #CF5A22);
  padding: .22rem .55rem;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(232, 106, 44, 0.1), rgba(244, 138, 79, 0.06));
  border: 1px solid rgba(232, 106, 44, 0.22);
  margin-bottom: .55rem;
}
.wcb-card h3 {
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--c-text, #1A1230);
  margin: 0 0 .45rem;
}
.wcb-card p {
  font-size: .8rem;
  line-height: 1.5;
  color: var(--c-text-2, #4A4360);
  margin: 0 0 .7rem;
}

.wcb-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--c-muted, #6B6480);
  padding-top: .5rem;
  border-top: 1px dashed rgba(26, 18, 48, 0.1);
  width: 100%;
}
.wcb-pill strong {
  color: var(--o-700, #CF5A22);
  font-weight: 800;
}
.wcb-pill--live {
  color: var(--o-700, #CF5A22);
}
.wcb-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E86A2C;
  box-shadow: 0 0 0 0 rgba(232, 106, 44, 0.6);
  animation: wcb-ping 1.8s ease-out infinite;
}
@keyframes wcb-ping {
  0%   { box-shadow: 0 0 0 0 rgba(232, 106, 44, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(232, 106, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 106, 44, 0); }
}
.wcb-step--now .wcb-pill__dot {
  animation: wcb-ping-white 1.8s ease-out infinite;
}
@keyframes wcb-ping-white {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Responsive — below 960px, timeline becomes vertical */
@media (max-width: 960px) {
  .wcb-steps {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .wcb-step {
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    text-align: left;
  }
  .wcb-rail {
    top: 0;
    bottom: 0;
    left: 17px;           /* aligned with centre of dots */
    right: auto;
    width: 2px;
    height: auto;
  }
  .wcb-rail__fill {
    width: 2px;
    height: 0;
    transition: height 1.6s cubic-bezier(.2, .8, .3, 1);
  }
  .wcb-timeline.in .wcb-rail__fill { width: 2px; height: 100%; }
  .wcb-dot {
    margin-top: 20px;
  }
  .wcb-card {
    flex: 1;
  }
  .wcb-card::before {
    top: 26px;
    left: -10px;
    transform: none;
    width: 10px;
    height: 2px;
    background: linear-gradient(90deg, rgba(232, 106, 44, 0), rgba(232, 106, 44, 0.4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wcb-rail__fill,
  .wcb-step { transition: none !important; }
  .wcb-dot--now::after,
  .wcb-pill__dot { animation: none !important; }
}


/* =========================================================================
   SCROLL PERFORMANCE — render-skipping for long below-the-fold sections.
   `content-visibility: auto` tells the browser to skip painting these until
   they're near the viewport. `contain-intrinsic-size` reserves approximate
   height so the scroll bar stays stable. No visual change when rules apply;
   purely a rendering-cost optimisation.
   ========================================================================= */
/* Excluded: .hero-ai, .alumni-band, .why-cb, .compare-band, .pick-campus,
   .stories, .iwall, .founders-hero — these either live at the top of the page
   or contain continuously-animating marquees / reveal animations whose layout
   state depends on the element being rendered. */
.code-day1,
.yr-preview,
.stats-dark,
.cbat,
.community-band,
.faq-home {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}


/* =========================================================================
   ADVISORY BOARD — 6 industry leaders who guide the curriculum
   ========================================================================= */
.advisory {
  position: relative;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(232, 106, 44, 0.07), transparent 65%),
    radial-gradient(700px 500px at 10% 100%, rgba(176, 140, 240, 0.07), transparent 65%),
    linear-gradient(180deg, #FFFBF7 0%, #FFF4EA 50%, #FFFBF7 100%);
  overflow: hidden;
  isolation: isolate;
}

/* Head */
.adv-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2.25rem, 3.5vw, 3rem);
}
.adv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #CF5A22;
  background: linear-gradient(135deg, rgba(232, 106, 44, 0.14), rgba(244, 138, 79, 0.04));
  border: 1px solid rgba(232, 106, 44, 0.25);
  margin-bottom: .9rem;
}
.adv-eyebrow__pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #E86A2C;
  box-shadow: 0 0 0 0 rgba(232, 106, 44, 0.7);
  animation: adv-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes adv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 106, 44, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(232, 106, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 106, 44, 0); }
}
.adv-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0 0 .7rem;
  color: #1A1230;
}
.adv-hl {
  background: linear-gradient(120deg, #E86A2C 0%, #F48A4F 55%, #B08CF0 130%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.adv-head p {
  color: var(--c-text-2, #4A4360);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 auto 1.6rem;
  max-width: 62ch;
}

/* Stat strip */
.adv-stats {
  list-style: none;
  margin: 0;
  padding: .6rem 1rem;
  display: inline-flex;
  gap: 1.8rem;
  flex-wrap: wrap;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(26, 18, 48, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 24px -12px rgba(26, 18, 48, 0.15);
}
.adv-stats li {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
}
.adv-stats strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #CF5A22;
}
.adv-stats span {
  font-size: .76rem;
  font-weight: 600;
  color: var(--c-muted, #6B6480);
}

/* Portrait marquee — tall editorial-poster cards, continuous scroll */
.advp-marquee {
  position: relative;
  overflow: hidden;
  padding: 1rem 0 1.5rem;
  /* Soft fade on both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.advp-track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  will-change: transform;
  animation: advp-scroll 55s linear infinite;
}
.advp-marquee:hover .advp-track { animation-play-state: paused; }
@keyframes advp-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* The portrait card — tall, cinematic, poster-style */
.advp {
  position: relative;
  flex: 0 0 290px;
  width: 290px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #2A1F4A 0%, #0E0A24 100%);
  box-shadow:
    0 26px 50px -26px rgba(26, 18, 48, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  transition: transform .5s cubic-bezier(.2, .8, .3, 1), box-shadow .5s ease;
  isolation: isolate;
}
.advp:hover {
  transform: translateY(-6px);
  box-shadow:
    0 36px 60px -24px rgba(232, 106, 44, 0.4),
    0 0 0 1px rgba(232, 106, 44, 0.2) inset;
}

/* Photo layer fills the whole card */
.advp__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.advp__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: 2;
  transition: transform .8s cubic-bezier(.2, .8, .3, 1), filter .5s ease;
}
.advp:hover .advp__photo img {
  transform: scale(1.06);
  filter: saturate(1.08);
}
/* Initials fallback — big glyph when no image yet */
.advp__ini {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 5.5rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  color: #fff;
  opacity: .25;
  z-index: 1;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.advp__photo.has-img .advp__ini { display: none; }

/* Bottom-to-top darken gradient — keeps portrait crisp up top, legible caption below */
.advp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 35%,
    rgba(14, 10, 36, 0.2) 55%,
    rgba(14, 10, 36, 0.7) 78%,
    rgba(14, 10, 36, 0.95) 100%);
  z-index: 3;
  pointer-events: none;
  transition: opacity .4s ease;
}
.advp:hover::before { opacity: 1.05; }

/* Company badge — floating in the top-right */
.advp__company {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .65rem .32rem .3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #1A1230;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.advp__logo {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #fff;
  padding: 1px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Caption overlay — sits at the bottom, over the gradient */
.advp__caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  transform: translateY(0);
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}
.advp:hover .advp__caption { transform: translateY(-3px); }

.advp__tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FFD1AD;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(232, 106, 44, 0.25);
  border: 1px solid rgba(255, 179, 102, 0.3);
  margin-bottom: .15rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.advp__caption h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.advp__caption p {
  font-size: .78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  line-height: 1.35;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Decorative L-bracket corner marks — editorial/gallery vibe */
.advp__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease, width .4s ease, height .4s ease;
}
.advp__corner::before,
.advp__corner::after {
  content: "";
  position: absolute;
  background: #FFB366;
  border-radius: 1px;
}
.advp__corner::before { width: 100%; height: 2px; }
.advp__corner::after  { width: 2px; height: 100%; }

.advp__corner--tl { top: 10px;    left: 10px;    }
.advp__corner--tr { top: 10px;    right: 10px;   }
.advp__corner--bl { bottom: 10px; left: 10px;    }
.advp__corner--br { bottom: 10px; right: 10px;   }

.advp__corner--tl::before { top: 0; left: 0; }
.advp__corner--tl::after  { top: 0; left: 0; }

.advp__corner--tr::before { top: 0; right: 0; }
.advp__corner--tr::after  { top: 0; right: 0; }

.advp__corner--bl::before { bottom: 0; left: 0; }
.advp__corner--bl::after  { bottom: 0; left: 0; }

.advp__corner--br::before { bottom: 0; right: 0; }
.advp__corner--br::after  { bottom: 0; right: 0; }

.advp:hover .advp__corner {
  opacity: 1;
  width: 22px;
  height: 22px;
}

/* Foot — "Quarterly reviews" connector strip */
.adv-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
.adv-foot__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 106, 44, 0.3), transparent);
}
.adv-foot__text {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #CF5A22;
  white-space: nowrap;
}
.adv-foot__text svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .advp { flex: 0 0 240px; width: 240px; height: 340px; }
  .advp__caption h3 { font-size: 1.02rem; }
  .advp__caption p { font-size: .74rem; }
  .advp-track { animation-duration: 42s; }
}
@media (max-width: 560px) {
  .adv-stats { gap: 1rem; padding: .55rem .85rem; }
  .adv-stats strong { font-size: .9rem; }
  .adv-stats span { font-size: .72rem; }
  .adv-foot { flex-direction: column; gap: .6rem; }
  .adv-foot__line { width: 100%; }
  .advp { flex: 0 0 220px; width: 220px; height: 310px; }
}

@media (prefers-reduced-motion: reduce) {
  .advp-track { animation: none !important; }
  .advp:hover { transform: none; }
  .advp:hover .advp__photo img { transform: none; }
  .adv-eyebrow__pulse { animation: none !important; }
}


/* =========================================================================
   SCROLL PERFORMANCE — pause offscreen infinite animations
   A `.is-offscreen` class is toggled by a single IntersectionObserver in
   index.html. All infinite keyframe animations inside paused sections halt,
   which stops expensive repaints (box-shadow pulses, gradient sweeps, conic
   comets) on low-powered devices while the user is scrolling elsewhere.
   Content is unchanged — animations simply resume when a section scrolls
   back into view.
   ========================================================================= */
.is-offscreen,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}