@media (max-width: 1200px) {
  .container { width: min(100% - 32px, var(--max-width)); }
  .hero-grid, .split-grid, .program-grid, .contact-layout { grid-template-columns: 1fr; }
  .hero-content { max-width: 820px; }
  .hero-visual { min-height: 420px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .hero-grid, .split-grid, .program-grid, .contact-layout { grid-template-columns: 1fr; }
  .hero-content { max-width: 820px; }
  .hero-visual { min-height: 420px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
  body { cursor: auto; }
  button, a, .tilt-card { cursor: pointer; }
  .custom-cursor, .cursor-dot { display: none; }
  .menu-toggle { display: inline-grid; }
  .nav-links {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%) translateY(-16px);
    width: min(92vw, 480px); display: grid; gap: 6px;
    padding: 14px; border-radius: 22px; opacity: 0; pointer-events: none;
    background: rgba(255,255,255,.92); box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.7);
    backdrop-filter: blur(24px); transition: opacity .28s ease, transform .28s ease;
  }
  .dark-mode .nav-links { background: rgba(7,20,33,.94); border-color: rgba(255,255,255,.12); }
  .nav-links.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .nav-links a { padding: 11px 14px; }
  .nav-shell { height: auto; min-height: 60px; }
  .hero { padding-top: 90px; }
  .section, .section.compact { padding: 64px 0; }
}
@media (max-width: 760px) {
  .container { width: min(100% - 28px, var(--max-width)); }
  .hero-stats, .cards-grid, .cards-grid.three, .cards-grid.two, .skill-layout, .cert-grid, .footer-grid, .form-grid { grid-template-columns: 1fr; }
  /* Keep every orbiting item visible on phones.  These rules intentionally
     override the desktop orbit rather than hiding the secondary portraits. */
  .hero { overflow: visible; }
  .hero-visual { min-height: 410px; overflow: visible; isolation: isolate; }
  .photo-orbit { width: min(250px, 74vw); height: min(250px, 74vw); }
  .floating-badge { font-size: .68rem; gap: 7px; padding: 8px 10px; border-radius: 14px; }
  .orbit-item-one { animation: orbitOnePhone 10s linear infinite !important; }
  .orbit-item-two { animation: orbitTwoPhone 12s linear infinite !important; }
  .orbit-item-three { animation: orbitThreePhone 14s linear infinite !important; }
  .orbit-item-four, .orbit-item-five { display: grid !important; }
  .orbit-item-four { animation: orbitFourPhone 11s linear infinite !important; }
  .orbit-item-five { animation: orbitFivePhone 13s linear infinite !important; }
  .orbit-item-one .floating-badge { animation: counterOrbitOne 10s linear infinite !important; }
  .orbit-item-two .floating-badge { animation: counterOrbitTwo 12s linear infinite !important; }
  .orbit-item-three .floating-badge { animation: counterOrbitThree 14s linear infinite !important; }
  .orbit-item-four .mini-avatar { width: 38px; height: 38px; border-width: 3px; animation: counterOrbitFour 11s linear infinite !important; }
  .orbit-item-five .mini-avatar { width: 38px; height: 38px; border-width: 3px; animation: counterOrbitFive 13s linear infinite !important; }
  .image-collage { min-height: 390px; }
  .circle-photo.main { left: 20%; width: 230px; height: 230px; }
  .circle-photo.small-a, .circle-photo.small-b { width: 118px; height: 118px; }
  .circle-photo.small-c { width: 92px; height: 92px; }
  .program-stack { min-height: auto; display: grid; gap: 18px; }
  .program-tile { position: static; width: 100%; min-height: auto; }
  .timeline-item { padding-left: 62px; }
  .footer { padding-top: 88px; }
  .copyright { display: block; }
}

@keyframes orbitOnePhone { from { transform: rotate(0deg) translateX(92px); } to { transform: rotate(360deg) translateX(92px); } }
@keyframes orbitTwoPhone { from { transform: rotate(74deg) translateX(94px); } to { transform: rotate(434deg) translateX(94px); } }
@keyframes orbitThreePhone { from { transform: rotate(154deg) translateX(90px); } to { transform: rotate(514deg) translateX(90px); } }
@keyframes orbitFourPhone { from { transform: rotate(232deg) translateX(102px); } to { transform: rotate(592deg) translateX(102px); } }
@keyframes orbitFivePhone { from { transform: rotate(304deg) translateX(100px); } to { transform: rotate(664deg) translateX(100px); } }
@media (max-width: 520px) {
  .nav-actions .btn { display: none; }
  .hero-actions { display: grid; }
  .btn { width: 100%; }
  .page-hero { padding-top: 140px; }
  .cert-thumb { height: 185px; }
  .brand > span:last-child { font-size: .9rem; }
  .brand small { font-size: .58rem; }
  .nav-actions { gap: 6px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn, .hero-actions a { width: 100%; }
  .section-heading { margin-bottom: 32px; }
  .section-title { font-size: clamp(1.4rem, 5vw, 2rem); }
}

@media (max-width: 1180px) {
  .skills-dashboard { grid-template-columns: repeat(2, 1fr); }
  .edu-highlight-grid { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .nav-links { top: 70px; border-radius: 0 0 20px 20px; }
  .headline-ribbon::before, .headline-ribbon::after { width: 70px; }
  .learning-roadmap::before { left: 30px; }
  .edu-roadmap-item,
  .edu-roadmap-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding-left: 26px;
  }
}
@media (max-width: 760px) {
  .skills-dashboard { grid-template-columns: 1fr; }
  .skill-graphic-card { grid-template-columns: 92px 1fr; padding: 20px; border-radius: 24px; }
  .skill-orb { width: 86px; height: 86px; }
  .orbit-dot { animation-name: orbitSkillMobile; }
  .edu-highlight-grid { gap: 18px; margin-bottom: 64px; }
  .education-metrics { grid-template-columns: repeat(2, 1fr); }
  .learning-roadmap::before { display: none; }
  .headline-strip span { padding: 10px 14px; font-size: .9rem; }
}
@media (max-width: 520px) {
  .site-header .container { width: min(100% - 24px, var(--max-width)); }
  .skills-dashboard { gap: 16px; }
  .skill-graphic-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .education-metrics { grid-template-columns: 1fr; }
  .edu-focus-card { padding: 24px; border-radius: 26px; }
  .edu-roadmap-item { grid-template-columns: 1fr; }
}