/* Mobile-only responsive layer for portrait and landscape phones.
   Desktop/laptop rules remain untouched. Content, labels, images, links, and interactions are preserved. */

@media (max-width:850px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{
    min-width:0!important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
    background-attachment:scroll,scroll!important;
    background-position:center top,center top!important;
  }
  img,video,canvas,iframe,svg{max-width:100%}
  .container{width:calc(100% - 28px)!important;max-width:100%!important;min-width:0}
  main,.section,.section>.container,.container>*{min-width:0}
  .section,[id]{scroll-margin-top:72px}
  .header{margin-bottom:-60px!important;z-index:80}
  .header .nav{height:60px!important;gap:9px!important;min-width:0}
  .header .brand{min-width:0;max-width:calc(100% - 85px);flex:0 1 auto}
  .brand-signature-logo{width:96px!important;height:50px!important;max-width:100%}
  .header .brand-copy{display:none!important}
  .nav-actions{margin-left:auto;gap:6px!important;flex:0 0 auto}
  .theme-toggle{width:33px!important;height:33px!important;flex:0 0 33px;font-size:18px}
  .menu-toggle{display:flex!important;width:35px!important;height:35px!important;flex:0 0 35px;margin-left:0!important}
  .nav-cta{display:none!important}
  .header .nav-links{display:none!important}
  .header .nav-links.open{
    position:fixed!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;
    top:calc(60px + env(safe-area-inset-top))!important;left:12px!important;right:12px!important;
    width:auto!important;max-width:none!important;max-height:calc(100vh - 78px)!important;max-height:calc(100dvh - 78px)!important;
    overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;
    padding:8px!important;margin:0!important;gap:2px!important;z-index:100!important;
    border:1px solid var(--line2)!important;border-radius:15px!important;background:var(--panel)!important;
    box-shadow:0 18px 45px rgba(0,0,0,.22)!important;backdrop-filter:blur(20px);
  }
  .header .nav-links.open a{
    display:flex!important;align-items:center;min-height:42px;padding:10px 13px!important;
    font-size:12px!important;line-height:1.4;white-space:normal;overflow-wrap:anywhere;
  }
  html[data-theme="light"] .header .nav-links.open{background:rgba(255,255,255,.98)!important}
  html[data-theme="dark"] .header .nav-links.open{background:rgba(17,28,39,.98)!important}

  .hero{padding-top:82px!important;padding-bottom:28px!important;overflow:hidden}
  .hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:22px!important;align-items:stretch!important}
  .hero-copy,.hero-card,.hero-workflow-panel,.workflow-intro-copy,.ba-impact-detail>div{min-width:0;max-width:100%}
  .hero .eyebrow{max-width:100%;font-size:9px;line-height:1.6;white-space:normal;flex-wrap:wrap}
  .hero h1{max-width:100%;font-size:clamp(34px,7.6vw,48px)!important;line-height:1.08!important;letter-spacing:-.045em!important;overflow-wrap:anywhere}
  .hero-lede{max-width:100%;font-size:14px!important;line-height:1.75!important}
  .hero .pills{gap:6px}
  .hero .pills span{font-size:9px!important;max-width:100%;white-space:normal}
  .hero-buttons{display:flex;flex-wrap:wrap;gap:8px!important;margin:20px 0!important}
  .hero .button{min-width:0;min-height:43px;padding:11px 13px!important;font-size:10px!important;white-space:normal}
  .hero .social-row{display:flex;flex-wrap:wrap;gap:12px!important}
  .hero .social-row a{font-size:10px!important}
  .hero-card,.hero-workflow-panel{width:100%!important;max-width:100%!important;margin-inline:0!important;padding:15px!important;border-radius:17px!important}
  .workflow-panel-top{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-bottom:11px}
  .workflow-panel-label{font-size:8px;line-height:1.5;white-space:normal}
  .opportunity-status{font-size:7px;max-width:100%;white-space:normal}
  .workflow-intro{grid-template-columns:88px minmax(0,1fr)!important;gap:10px!important;padding:16px 0!important}
  .workflow-identity-mark{width:82px!important;height:72px!important;min-width:0}
  .workflow-identity-mark svg{width:92px!important;height:72px!important;max-width:none!important}
  .workflow-intro-copy h2{font-size:clamp(19px,4.6vw,25px)!important;line-height:1.2!important;overflow-wrap:anywhere}
  .workflow-intro-copy .card-note{font-size:10px!important;line-height:1.65}
  .ba-impact-explorer{width:100%;max-width:100%;min-width:0;padding:12px!important;margin-top:12px!important;overflow:hidden}
  .ba-impact-heading{gap:7px}
  .ba-impact-heading h3{font-size:17px!important;line-height:1.35}
  .ba-impact-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .ba-impact-option{min-width:0;min-height:96px!important;padding:9px!important;gap:5px!important}
  .ba-impact-option b{font-size:10px!important;line-height:1.35;overflow-wrap:anywhere}
  .ba-impact-option>small{font-size:9px!important;line-height:1.45;overflow-wrap:anywhere}
  .ba-impact-arrow{top:8px;right:8px}
  .ba-impact-detail{grid-template-columns:30px minmax(0,1fr)!important;gap:9px!important;padding:10px!important}
  .ba-impact-detail b{font-size:11px}
  .ba-impact-detail p{font-size:10px!important;line-height:1.6!important;overflow-wrap:anywhere}
  .ba-impact-tags{display:flex;flex-wrap:wrap;gap:5px}
  .ba-impact-tags span{font-size:8px!important;padding:5px 7px!important;white-space:normal}
  .hero .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0!important;margin-top:25px!important;width:100%}
  .hero .metrics .metric-link{min-width:0;min-height:74px!important;padding:11px 10px!important;column-gap:8px!important}
  .hero .metrics .metric-link:before{font-size:20px!important}
  .hero .metrics strong{font-size:23px!important}
  .hero .metrics small{font-size:8px!important;line-height:1.45!important;overflow-wrap:anywhere}
  .hero .metrics .metric-link:nth-child(2){border-top:0!important}
  .hero .metrics .metric-link:nth-child(3){border-left:0!important;border-top:1px solid rgba(214,231,245,.16)!important}
  .hero .metrics .metric-link:nth-child(4){border-top:1px solid rgba(214,231,245,.16)!important}

  .section{padding:54px 0!important}
  .section-header,.credentials-heading{align-items:flex-start!important;flex-direction:column!important;gap:11px!important}
  .section-header h2,.section-heading h2,.credentials-heading h2,.contact-main h2{font-size:clamp(27px,6.8vw,37px)!important;line-height:1.15!important;overflow-wrap:anywhere}
  .section-header>p{max-width:100%;font-size:12px;line-height:1.75}
  .about-grid{grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
  .expertise-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .expertise-card{min-width:0;padding:19px!important}
  .expertise-card p{min-height:0}
  .toolkit{flex-direction:column;gap:10px}
  .timeline{width:100%;max-width:100%;gap:16px}
  .timeline-item{grid-template-columns:10px minmax(0,1fr)!important;gap:10px!important}
  .timeline-box{min-width:0;padding:17px 14px!important}
  .timeline-box h3{font-size:17px!important;overflow-wrap:anywhere}
  .timeline-box li{font-size:10px;overflow-wrap:anywhere}
  .outcomes{grid-template-columns:minmax(0,1fr)!important;padding:17px!important;gap:13px!important}
  .outcome-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  .outcome-stats strong{font-size:21px!important}
  .outcome-stats span{font-size:8px!important;overflow-wrap:anywhere}
  .project-toolbar{align-items:stretch!important;flex-direction:column!important;gap:11px!important}
  .filters{gap:6px!important}
  .filter{font-size:9px!important;padding:8px 9px!important}
  .project-toolbar>span{white-space:normal;align-self:flex-start}
  .project-grid{grid-template-columns:minmax(0,1fr)!important;gap:13px!important}
  .project-card{min-width:0}
  .project-art{height:clamp(128px,38vw,175px)!important;margin-inline:11px}
  .project-content{min-width:0;padding:16px!important}
  .project-content h3{font-size:17px!important;overflow-wrap:anywhere}
  .project-content>p,.project-content li{overflow-wrap:anywhere}
  .project-links{flex-wrap:wrap;gap:12px}
  .all-projects{align-items:flex-start;flex-direction:column;gap:12px}
  .resume-grid{grid-template-columns:minmax(0,1fr)!important}
  .resume-card{min-width:0;padding:16px!important;gap:12px!important}
  .resume-copy h3{font-size:15px!important;overflow-wrap:anywhere}
  .resume-copy p{overflow-wrap:anywhere}
  .credential-dashboard{min-width:0;padding:12px!important}
  .credential-controls{grid-template-columns:minmax(0,1fr)!important}
  .credential-search,.year-select{min-width:0}
  .credential-search input{min-width:0}
  .credential-categories{gap:5px;flex-wrap:wrap}
  .credential-filter{max-width:100%;white-space:normal}
  .credential-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .credential-card{min-width:0;padding:11px!important}
  .credential-card h3,.credential-issuer{overflow-wrap:anywhere}
  .contact-panel{grid-template-columns:minmax(0,1fr)!important;gap:18px!important;padding:18px!important}
  .contact-list{grid-template-columns:minmax(0,1fr)!important}
  .contact-list>*{min-width:0;overflow-wrap:anywhere}
  .contact-buttons{flex-wrap:wrap}
  .about-visual,.ba-visual-main,.ba-info-panel,.ba-core-panel,.ba-tools-panel{min-width:0;max-width:100%}
  .ba-visual-main{grid-template-columns:minmax(0,1fr)!important}
  .ba-visual-columns{grid-template-columns:minmax(0,1fr)!important}
  .career-cards-grid{grid-template-columns:minmax(0,1fr)!important}
  .career-role-card--techm,.career-role-card--cerner,.career-next-card{grid-column:auto!important;grid-row:auto!important}
  .healthcare-blueprint{padding:15px!important}
  .blueprint-flow{grid-template-columns:minmax(0,1fr)!important}
  .blueprint-flow article{min-width:0}
  .travel-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .travel-gallery-grid>*{min-width:0}
  .trip-itinerary-grid,.movie-grid,.gallery-grid{grid-template-columns:minmax(0,1fr)!important}
  .footer-inner{flex-wrap:wrap;gap:12px!important}
  .footer-inner>p{width:100%;order:3;margin:0!important}
  .footer-links{display:flex;flex-wrap:wrap;gap:12px!important;width:100%;order:4}
  .copyright{font-size:8px}
  .mobile-dock{
    left:8px!important;right:8px!important;bottom:5px!important;
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:row!important;grid-auto-columns:auto!important;grid-template-rows:auto!important;
    gap:3px!important;padding:6px 5px calc(6px + env(safe-area-inset-bottom))!important;
    max-height:calc(100px + env(safe-area-inset-bottom));overflow-x:hidden!important;overflow-y:auto!important;
    border-radius:14px!important;
  }
  .mobile-dock a{min-width:0;min-height:38px!important;padding:3px 1px!important;gap:2px!important}
  .mobile-dock a span{font-size:16px!important}
  .mobile-dock a b{font-size:7.5px!important;line-height:1.15!important;white-space:nowrap}
  .footer{padding-bottom:calc(108px + env(safe-area-inset-bottom))!important}
}

@media(max-width:600px){
  body{padding-bottom:calc(110px + env(safe-area-inset-bottom))!important}
  .container{width:calc(100% - 24px)!important}
  .hero{padding-top:78px!important;padding-bottom:23px!important}
  .hero h1{font-size:clamp(31px,9vw,43px)!important;line-height:1.09!important}
  .hero .eyebrow{font-size:8px!important;padding:7px 9px!important;margin-bottom:15px!important}
  .hero .intro{font-size:14px!important}
  .hero-lede{font-size:13px!important;line-height:1.72!important;margin-top:15px!important}
  .hero .pills span{font-size:8px!important;padding:6px 8px!important}
  .hero-buttons{gap:7px!important}
  .hero .button{font-size:9px!important;padding:10px 11px!important;gap:7px!important}
  .workflow-intro{grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:12px 0!important}
  .workflow-identity-mark{width:110px!important;height:65px!important;justify-content:start!important}
  .workflow-identity-mark svg{width:118px!important;height:66px!important}
  .workflow-intro-copy h2{font-size:22px!important}
  .ba-impact-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ba-impact-option{min-height:94px!important}
  .hero .metrics .metric-link{grid-template-columns:25px minmax(0,1fr)!important;column-gap:7px!important;padding:10px 8px!important}
  .hero .metrics .metric-link:before{font-size:18px!important}
  .hero .metrics strong{font-size:21px!important}
  .hero .metrics small{font-size:7.5px!important}
  .section{padding:46px 0!important}
  .section-header h2,.section-heading h2,.credentials-heading h2,.contact-main h2{font-size:clamp(26px,7.4vw,33px)!important}
  .expertise-card{padding:17px!important}
  .project-art{height:clamp(120px,42vw,160px)!important}
  .credential-grid{grid-template-columns:minmax(0,1fr)!important}
  .credential-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  .credential-summary>div{min-width:0;padding:9px 7px!important}
  .credential-summary strong{font-size:19px!important}
  .credential-summary small{font-size:7px!important;line-height:1.35!important;overflow-wrap:anywhere}
  .credential-summary .summary-kicker{font-size:6px!important;letter-spacing:.035em!important;overflow-wrap:anywhere}
  .travel-gallery-grid{grid-template-columns:minmax(0,1fr)!important}
  .mobile-dock{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-height:calc(104px + env(safe-area-inset-bottom))}
  .mobile-dock a{min-height:37px!important}
  .mobile-dock a b{font-size:7.5px!important}
  .footer{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
}

@media(max-width:360px){
  .header .nav{gap:6px!important}
  .brand-signature-logo{width:85px!important;height:46px!important}
  .theme-toggle{width:30px!important;height:30px!important;flex-basis:30px}
  .menu-toggle{width:32px!important;height:32px!important;flex-basis:32px}
  .hero h1{font-size:31px!important}
  .hero .button{font-size:8px!important;padding:10px 9px!important}
  .ba-impact-option{padding:7px!important}
  .ba-impact-option b{font-size:9px!important}
  .ba-impact-option>small{font-size:8px!important}
  .mobile-dock a b{font-size:7px!important}
}

@media(orientation:landscape) and (max-width:950px) and (max-height:600px){
  body{
    padding-bottom:58px!important;
    background-attachment:scroll,scroll!important;
    background-position:center top,center top!important;
  }
  .header{margin-bottom:-54px!important}
  .header .nav{height:54px!important}
  .brand-signature-logo{width:88px!important;height:46px!important}
  .header .nav-links.open{top:calc(54px + env(safe-area-inset-top))!important}
  .hero{padding-top:70px!important;padding-bottom:18px!important}
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;gap:14px!important;align-items:start!important}
  .hero-copy{min-width:0}
  .hero .eyebrow{font-size:7px!important;padding:5px 7px!important;margin-bottom:9px!important}
  .hero .intro{font-size:11px!important;margin-bottom:4px!important}
  .hero h1{font-size:clamp(25px,3.4vw,36px)!important;line-height:1.06!important}
  .hero-lede{font-size:10px!important;line-height:1.55!important;margin:11px 0 9px!important}
  .hero .pills{gap:4px!important}
  .hero .pills span{font-size:7px!important;padding:4px 6px!important}
  .hero-buttons{margin:13px 0!important;gap:6px!important}
  .hero .button{font-size:8px!important;min-height:34px!important;padding:8px 9px!important}
  .hero .social-row{gap:8px!important}
  .hero .social-row a{font-size:8px!important}
  .hero .social-row img{width:12px;height:12px}
  .hero-workflow-panel,.hero-card{padding:10px!important;border-radius:13px!important}
  .workflow-panel-top{padding-bottom:7px;gap:5px}
  .workflow-panel-label{font-size:6px}
  .opportunity-status{font-size:6px;padding:4px 6px}
  .workflow-intro{grid-template-columns:70px minmax(0,1fr)!important;gap:7px!important;padding:9px 0!important}
  .workflow-identity-mark{width:66px!important;height:53px!important}
  .workflow-identity-mark svg{width:78px!important;height:53px!important}
  .workflow-intro-copy .mini{font-size:6px!important;margin-bottom:4px!important}
  .workflow-intro-copy h2{font-size:clamp(14px,1.9vw,18px)!important;line-height:1.15!important}
  .workflow-intro-copy .card-note{font-size:8px!important;line-height:1.45!important;margin-top:5px!important}
  .ba-impact-explorer{padding:8px!important;margin-top:7px!important}
  .ba-impact-heading .mini{font-size:6px!important;margin-bottom:3px!important}
  .ba-impact-heading h3{font-size:12px!important}
  .ba-impact-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  .ba-impact-option{min-height:67px!important;padding:6px!important;gap:3px!important}
  .ba-impact-option .ba-impact-icon{width:25px;height:25px}
  .ba-impact-option b{font-size:8px!important;line-height:1.2!important}
  .ba-impact-option>small{font-size:7px!important;line-height:1.3!important}
  .ba-impact-arrow{font-size:8px!important}
  .ba-impact-detail{grid-template-columns:24px minmax(0,1fr)!important;gap:6px!important;padding:7px!important;margin-top:6px!important}
  .ba-impact-detail-icon{width:24px;height:24px}
  .ba-impact-detail small{font-size:6px!important}
  .ba-impact-detail b{font-size:8px!important}
  .ba-impact-detail p{font-size:7px!important;line-height:1.35!important;margin:3px 0!important}
  .ba-impact-tags span{font-size:6px!important;padding:3px 5px!important}
  .hero .metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;margin-top:15px!important}
  .hero .metrics .metric-link{grid-template-columns:20px minmax(0,1fr)!important;column-gap:5px!important;min-height:52px!important;padding:6px!important}
  .hero .metrics .metric-link:before{font-size:15px!important}
  .hero .metrics strong{font-size:17px!important}
  .hero .metrics small{font-size:6.5px!important}
  .mobile-dock{
    left:8px!important;right:8px!important;bottom:3px!important;
    grid-template-columns:none!important;grid-auto-flow:column!important;
    grid-auto-columns:minmax(56px,1fr)!important;grid-template-rows:1fr!important;
    max-height:46px!important;overflow-x:auto!important;overflow-y:hidden!important;
    gap:2px!important;padding:3px 4px!important;
  }
  .mobile-dock a{min-height:36px!important;min-width:56px;padding:2px 3px!important}
  .mobile-dock a span{font-size:14px!important}
  .mobile-dock a b{font-size:6.5px!important}
  .footer{padding-bottom:62px!important}
}

@media(prefers-reduced-motion:reduce){
  .header .nav-links.open{scroll-behavior:auto}
}


/* Landscape-phone overflow correction v2: catches wide CSS viewports on short phones. */
/* This targets compact landscape devices (including high-DPI phones whose CSS width exceeds 850px).
   Full-size laptop layouts are unaffected. */
@media screen and (orientation:landscape) and (max-width:1200px) and (max-height:750px){
  html,body{
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:hidden!important;
    scroll-padding-top:60px;scroll-padding-bottom:52px;
  }
  body{
    padding-bottom:58px!important;
    background-attachment:scroll,scroll!important;
    background-position:center top,center top!important;
  }
  #main,main,.section,.section>.container,.container,
  .hero-grid,.hero-copy,.hero-card,.hero-workflow-panel,
  .about-grid,.about-visual,.ba-visual-main,.ba-info-panel,.ba-core-panel,
  .ba-tools-panel,.ba-industries-panel,.career-cards-grid,.career-role-card,
  .project-grid,.project-card,.resume-grid,.resume-card,.credential-dashboard,
  .credential-controls,.credential-grid,.contact-panel,.contact-list,
  .travel-gallery-grid,.trip-itinerary-grid,.movie-grid,.gallery-grid{
    min-width:0!important;max-width:100%!important;
  }
  .container{width:calc(100% - 28px)!important;margin-inline:auto!important}
  .header{margin-bottom:-54px!important;left:0;right:0;width:100%;max-width:100%}
  .header .nav{height:54px!important;width:calc(100% - 24px)!important;gap:7px!important}
  .brand-signature-logo{width:86px!important;height:44px!important}
  .header .brand-copy{display:none!important}
  .nav-actions{margin-left:auto;gap:5px!important}
  .theme-toggle{width:30px!important;height:30px!important;flex:0 0 30px}
  .menu-toggle{display:flex!important;width:32px!important;height:32px!important;flex:0 0 32px;margin-left:0!important}
  .nav-cta{display:none!important}
  .header .nav-links{display:none!important}
  .header .nav-links.open{
    position:fixed!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;
    top:calc(54px + env(safe-area-inset-top))!important;left:8px!important;right:8px!important;
    width:auto!important;max-width:none!important;max-height:calc(100dvh - 70px)!important;
    margin:0!important;padding:7px!important;overflow-x:hidden!important;overflow-y:auto!important;
    z-index:100!important;border:1px solid var(--line2)!important;border-radius:13px!important;
    background:var(--panel)!important;box-shadow:0 16px 40px rgba(0,0,0,.22)!important;backdrop-filter:blur(20px);
  }
  .header .nav-links.open a{display:flex!important;align-items:center;min-height:37px;padding:8px 11px!important;font-size:11px!important;white-space:normal}
  .hero{width:100%!important;max-width:100%!important;padding-top:70px!important;padding-bottom:20px!important}
  .hero:before{inset:0!important;background-position:center 42%!important}
  .hero-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px!important;align-items:stretch!important}
  .hero-copy{width:100%!important}
  .hero .eyebrow{max-width:100%;font-size:8px!important;line-height:1.5!important;white-space:normal;flex-wrap:wrap;padding:6px 8px!important;margin-bottom:10px!important}
  .hero .intro{font-size:12px!important;margin:0 0 5px!important}
  .hero h1{max-width:100%!important;font-size:clamp(27px,4.3vw,42px)!important;line-height:1.07!important;letter-spacing:-.04em!important;overflow-wrap:anywhere}
  .hero-lede{max-width:100%!important;font-size:11px!important;line-height:1.6!important;margin:10px 0!important}
  .hero .pills{gap:5px!important}
  .hero .pills span{font-size:7.5px!important;padding:5px 7px!important;white-space:normal}
  .hero-buttons{margin:12px 0!important;gap:6px!important}
  .hero .button{min-height:33px!important;padding:8px 10px!important;font-size:8px!important;gap:6px!important}
  .hero .social-row{gap:10px!important;flex-wrap:wrap}
  .hero .social-row a{font-size:8px!important}
  .hero .social-row img{width:12px;height:12px}
  .hero-card,.hero-workflow-panel{width:100%!important;max-width:100%!important;margin:0!important;padding:11px!important;border-radius:14px!important}
  .workflow-panel-top{flex-wrap:wrap;gap:6px;padding-bottom:7px}
  .workflow-panel-label{font-size:6.5px!important;white-space:normal;line-height:1.35}
  .opportunity-status{font-size:6px!important;padding:4px 6px!important;white-space:normal}
  .workflow-intro{grid-template-columns:70px minmax(0,1fr)!important;gap:7px!important;padding:9px 0!important}
  .workflow-identity-mark{width:67px!important;height:51px!important;min-width:0}
  .workflow-identity-mark svg{width:78px!important;height:51px!important;max-width:none!important}
  .workflow-intro-copy .mini{font-size:6.5px!important;margin-bottom:4px!important}
  .workflow-intro-copy h2{font-size:clamp(15px,2.1vw,20px)!important;line-height:1.15!important;overflow-wrap:anywhere}
  .workflow-intro-copy .card-note{font-size:8px!important;line-height:1.45!important;margin-top:4px!important}
  .ba-impact-explorer{width:100%!important;max-width:100%!important;min-width:0!important;margin-top:7px!important;padding:8px!important;overflow:hidden}
  .ba-impact-heading{align-items:flex-start;gap:4px}
  .ba-impact-heading .mini{font-size:6px!important;margin-bottom:2px!important}
  .ba-impact-heading h3{font-size:12px!important;line-height:1.3!important}
  .ba-impact-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  .ba-impact-option{min-width:0!important;min-height:63px!important;padding:6px!important;gap:3px!important}
  .ba-impact-option .ba-impact-icon{width:24px;height:24px}
  .ba-impact-option b{font-size:8px!important;line-height:1.2!important;overflow-wrap:anywhere}
  .ba-impact-option>small{font-size:7px!important;line-height:1.3!important;overflow-wrap:anywhere}
  .ba-impact-arrow{font-size:8px!important;top:5px;right:5px}
  .ba-impact-detail{grid-template-columns:24px minmax(0,1fr)!important;gap:6px!important;padding:7px!important;margin-top:6px}
  .ba-impact-detail-icon{width:24px;height:24px}
  .ba-impact-detail small{font-size:6px!important}
  .ba-impact-detail b{font-size:8px!important}
  .ba-impact-detail p{font-size:7px!important;line-height:1.35!important;margin:3px 0!important;overflow-wrap:anywhere}
  .ba-impact-tags{display:flex;flex-wrap:wrap;gap:4px}
  .ba-impact-tags span{font-size:6px!important;padding:3px 5px!important;white-space:normal}
  .hero .metrics{grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;margin-top:12px!important}
  .hero .metrics .metric-link{grid-template-columns:18px minmax(0,1fr)!important;column-gap:4px!important;row-gap:1px;min-height:46px!important;padding:5px!important}
  .hero .metrics .metric-link:before{font-size:13px!important}
  .hero .metrics strong{font-size:15px!important}
  .hero .metrics small{font-size:6px!important;line-height:1.25!important;overflow-wrap:anywhere}
  .section{width:100%!important;max-width:100%!important;padding:30px 0!important;overflow-x:clip}
  .section-header,.credentials-heading{align-items:flex-start!important;flex-direction:column!important;gap:7px!important}
  .section-header h2,.section-heading h2,.credentials-heading h2,.contact-main h2{font-size:clamp(22px,3.2vw,31px)!important;line-height:1.15!important}
  .about-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  .about-visual{width:100%!important;max-width:100%!important;min-height:0!important;padding:12px!important}
  .ba-visual-main,.ba-visual-columns{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;min-height:0!important;width:100%!important}
  .ba-info-panel,.ba-core-panel,.ba-tools-panel,.ba-industries-panel{width:100%!important;max-width:100%!important;padding:10px!important}
  .ba-info-list li{min-width:0;grid-template-columns:25px minmax(0,1fr)!important}
  .ba-info-list b,.ba-info-list small,.ba-stack-title,.ba-stack-detail{overflow-wrap:anywhere}
  .ba-visual-stack{grid-template-columns:minmax(0,1fr)!important}
  .expertise-grid,.career-cards-grid,.project-grid,.resume-grid,.contact-panel,.contact-list,
  .trip-itinerary-grid,.movie-grid,.gallery-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .expertise-card,.career-role-card,.career-next-card,.project-card,.resume-card,.timeline-box{min-width:0!important;max-width:100%!important;padding:12px!important}
  .career-role-card--techm,.career-role-card--cerner,.career-next-card{grid-column:auto!important;grid-row:auto!important}
  .project-art{height:clamp(100px,19vh,150px)!important;margin:9px 8px 0!important}
  .project-content{min-width:0;padding:11px!important}
  .project-content h3{font-size:14px!important}
  .project-content>p,.project-content li{font-size:9px!important;overflow-wrap:anywhere}
  .project-links{flex-wrap:wrap;gap:10px}
  .credential-dashboard{padding:10px!important}
  .credential-controls{grid-template-columns:minmax(0,1fr)!important}
  .credential-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .credential-card{min-width:0!important;padding:9px!important}
  .credential-card h3,.credential-issuer{overflow-wrap:anywhere}
  .credential-card h3{font-size:9px!important}
  .credential-issuer{font-size:8px!important}
  .contact-panel{padding:13px!important}
  .healthcare-blueprint{margin-top:14px!important;padding:12px!important}
  .blueprint-flow{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
  .blueprint-flow article{min-width:0}
  .travel-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .travel-gallery-grid>*{min-width:0!important}
  .mobile-dock{
    position:fixed!important;display:grid!important;left:5px!important;right:5px!important;bottom:3px!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-template-rows:1fr!important;
    grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;
    gap:2px!important;max-height:44px!important;overflow:hidden!important;
    padding:2px 4px!important;border-radius:12px!important;z-index:90!important;
  }
  .mobile-dock a{min-width:0!important;min-height:36px!important;padding:2px 0!important;gap:1px!important}
  .mobile-dock a span{font-size:14px!important;line-height:1.05!important}
  .mobile-dock a b{font-size:clamp(5.5px,0.75vw,7px)!important;line-height:1.1!important;white-space:nowrap!important}
  .footer{padding-bottom:60px!important}
  html[data-theme="light"] body{background-attachment:scroll,scroll!important;background-position:center top,center top!important}
}

/* On portrait phones, keep all seven quick links in one compact row instead of covering content in two rows. */
@media screen and (max-width:850px) and (orientation:portrait){
  body{padding-bottom:calc(67px + env(safe-area-inset-bottom))!important}
  .mobile-dock{
    display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;grid-auto-flow:column!important;grid-auto-columns:minmax(0,1fr)!important;
    left:4px!important;right:4px!important;bottom:3px!important;max-height:calc(53px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;padding:2px 3px calc(2px + env(safe-area-inset-bottom))!important;
  }
  .mobile-dock a{min-width:0!important;min-height:36px!important;padding:2px 0!important;gap:1px!important}
  .mobile-dock a span{font-size:14px!important;line-height:1.05!important}
  .mobile-dock a b{font-size:clamp(5.4px,1.65vw,7px)!important;line-height:1.05!important;white-space:nowrap!important}
  .footer{padding-bottom:calc(74px + env(safe-area-inset-bottom))!important}
  html[data-theme="light"] body{background-attachment:scroll,scroll!important;background-position:center top,center top!important}
}

/* Extra-narrow landscape screens still need full-width content and smaller type, never horizontal cropping. */
@media screen and (orientation:landscape) and (max-width:700px) and (max-height:500px){
  .hero h1{font-size:clamp(24px,4.2vw,34px)!important}
  .hero .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero .metrics .metric-link:nth-child(2){border-top:0!important}
  .hero .metrics .metric-link:nth-child(3){border-left:0!important;border-top:1px solid rgba(214,231,245,.16)!important}
  .hero .metrics .metric-link:nth-child(4){border-top:1px solid rgba(214,231,245,.16)!important}
  .credential-grid{grid-template-columns:minmax(0,1fr)!important}
}


/* Prevent programmatic horizontal anchor scrolling on mobile (overflow:hidden alone can still scroll). */
@media screen and (max-width:850px){
  html,body,#main,main{
    width:100%!important;max-width:100vw!important;
    overflow-x:hidden!important;overflow-x:clip!important;
  }
  img,video,canvas,iframe{max-width:100%!important;height:auto}
}

/* Also applies to wider-CSS landscape phones that are covered by the compact-landscape breakpoint. */
@media screen and (orientation:landscape) and (max-width:1200px) and (max-height:750px){
  html,body,#main,main{
    width:100%!important;max-width:100vw!important;
    overflow-x:hidden!important;overflow-x:clip!important;
  }
  .section{overflow-x:hidden!important;overflow-x:clip!important}
  img,video,canvas,iframe{max-width:100%!important;height:auto}
}


/* Phone usability pass: contained dialogs, travel journal reflow, credential cards, and two-row portrait dock. */
/* Scope: phones in portrait + compact landscape phones. Laptop/tablet layout is unchanged. */
@media screen and (max-width:850px), screen and (orientation:landscape) and (max-width:1200px) and (max-height:750px){

  /* 1) Every modal/dialog stays inside the visible viewport and scrolls internally. */
  html[data-theme] dialog.goals-dialog[open],
  html[data-theme] dialog.certificate-viewer[open],
  html[data-theme] dialog.media-viewer[open],
  html[data-theme] dialog.resume-preview-dialog[open],
  html[data-theme] dialog.award-image-viewer[open]{
    position:fixed!important;
    inset:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))!important;
    width:auto!important;max-width:none!important;min-width:0!important;
    height:auto!important;max-height:none!important;min-height:0!important;
    margin:0!important;box-sizing:border-box!important;
    overflow:hidden!important;overscroll-behavior:contain!important;
    transform:none!important;
  }
  html[data-theme] dialog.goals-dialog[open]{
    display:block!important;overflow-y:auto!important;overflow-x:hidden!important;
    border-radius:16px!important;
  }
  html[data-theme] .goals-dialog-shell{
    min-height:0!important;height:auto!important;padding:14px!important;
  }
  html[data-theme] .goals-dialog-header{
    position:relative;gap:10px!important;padding-bottom:12px!important;
  }
  html[data-theme] .goals-dialog-header>div{min-width:0;flex:1 1 auto}
  html[data-theme] .goals-dialog-header h2{font-size:clamp(21px,5.4vw,28px)!important;line-height:1.15!important;overflow-wrap:anywhere}
  html[data-theme] .goals-dialog-header p{font-size:11px!important;line-height:1.65!important}
  html[data-theme] .goals-close{flex:0 0 35px!important;width:35px!important;height:35px!important;position:sticky;top:0}
  html[data-theme] .goals-dialog-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding-top:12px!important}
  html[data-theme] .goals-category-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;padding:7px!important}
  html[data-theme] .goals-category{min-width:0!important;min-height:40px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;padding:8px!important;text-align:left!important;font-size:10px!important;overflow-wrap:anywhere}
  html[data-theme] .goals-category span{flex:0 0 auto}
  html[data-theme] .goals-main,html[data-theme] .goals-roadmap-copy,html[data-theme] .goals-focus-card{min-width:0!important;max-width:100%!important}
  html[data-theme] .goals-main h3{font-size:17px!important;line-height:1.25!important;overflow-wrap:anywhere}
  html[data-theme] .goals-main p,html[data-theme] .goals-main li{font-size:11px!important;line-height:1.65!important;overflow-wrap:anywhere}
  html[data-theme] .goals-main *{max-width:100%;overflow-wrap:anywhere}
  html[data-theme] dialog.certificate-viewer[open],
  html[data-theme] dialog.media-viewer[open],
  html[data-theme] dialog.award-image-viewer[open]{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    padding:0!important;border-radius:14px!important;overflow:hidden!important;
  }
  html[data-theme] .certificate-viewer[open] .viewer-header,
  html[data-theme] .media-viewer[open] .viewer-header,
  html[data-theme] .award-image-viewer[open] .viewer-header{
    display:flex!important;flex:0 0 auto!important;align-items:flex-start!important;gap:8px!important;
    padding:10px!important;min-width:0!important;
  }
  html[data-theme] .viewer-header>div{flex:1 1 auto!important;min-width:0!important}
  html[data-theme] .viewer-header h3{font-size:14px!important;line-height:1.3!important;overflow-wrap:anywhere}
  html[data-theme] .viewer-header p{font-size:10px!important;line-height:1.5!important;overflow-wrap:anywhere}
  html[data-theme] .viewer-close{flex:0 0 auto!important;min-height:34px!important;padding:7px 9px!important;font-size:10px!important;white-space:nowrap}
  html[data-theme] .certificate-viewer[open] .viewer-stage,
  html[data-theme] .media-viewer[open] .viewer-stage,
  html[data-theme] .award-image-viewer[open] .viewer-stage{
    position:relative!important;display:grid!important;flex:1 1 0!important;
    width:100%!important;min-width:0!important;min-height:0!important;max-height:none!important;height:auto!important;
    box-sizing:border-box!important;overflow:auto!important;overscroll-behavior:contain!important;
    padding:6px!important;
  }
  html[data-theme] .certificate-viewer[open] .viewer-stage iframe{
    display:block!important;flex:1 1 auto!important;width:100%!important;height:100%!important;
    min-height:0!important;max-height:none!important;border:0!important;
  }
  html[data-theme] .media-viewer[open] .travel-viewer-toolbar{
    display:flex!important;flex:0 0 auto!important;flex-wrap:wrap!important;align-items:center!important;
    justify-content:center!important;gap:5px!important;padding:7px!important;min-width:0!important;
  }
  html[data-theme] .travel-viewer-toolbar button{min-height:33px!important;max-width:100%;padding:6px 8px!important;font-size:9px!important}
  html[data-theme] .media-viewer[open] .travel-viewer-stage img,
  html[data-theme] .media-viewer[open] .travel-viewer-stage video{
    display:block!important;width:auto!important;height:auto!important;max-width:100%!important;
    max-height:100%!important;object-fit:contain!important;
  }
  html[data-theme] dialog.resume-preview-dialog[open]{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
    padding:0!important;border-radius:14px!important;overflow:hidden!important;
  }
  html[data-theme] .resume-preview-dialog[open] .resume-preview-header{
    position:relative!important;top:auto!important;flex:0 0 auto!important;gap:8px!important;
    padding:10px!important;min-width:0!important;
  }
  html[data-theme] .resume-preview-dialog[open] .resume-preview-heading{min-width:0!important;flex:1 1 auto!important}
  html[data-theme] .resume-preview-dialog[open] .resume-preview-heading h3{font-size:15px!important;line-height:1.3!important;overflow-wrap:anywhere}
  html[data-theme] .resume-preview-dialog[open] .resume-preview-heading p{font-size:9px!important;line-height:1.5!important}
  html[data-theme] .resume-preview-dialog[open] .resume-preview-close{flex:0 0 auto!important;max-width:42%;font-size:9px!important;padding:7px 8px!important}
  html[data-theme] .resume-preview-dialog[open] .resume-preview-stage{
    flex:1 1 0!important;width:100%!important;min-width:0!important;min-height:0!important;max-height:none!important;height:auto!important;
    padding:9px!important;overflow:auto!important;overscroll-behavior:contain!important;
  }
  html[data-theme] .resume-preview-dialog[open] .resume-preview-render-note{font-size:7px!important;line-height:1.5!important}
  html[data-theme] .resume-preview-dialog[open] .resume-preview-page{max-width:100%!important;margin-bottom:13px!important}
  html[data-theme] .resume-preview-dialog[open] .resume-preview-canvas{max-width:100%!important;height:auto!important}
  html[data-theme] .resume-preview-dialog[open] .resume-preview-contact{width:100%!important;padding:13px!important;margin-top:5px!important}
  html[data-theme] .resume-preview-dialog[open] .resume-preview-contact p{font-size:10px!important;line-height:1.6!important}
  html[data-theme] .project-modal{
    position:fixed!important;inset:0!important;display:grid!important;place-items:center!important;
    width:100%!important;height:100%!important;max-width:100vw!important;max-height:100dvh!important;
    padding:max(6px,env(safe-area-inset-top,0px)) max(6px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))!important;
    overflow:hidden!important;box-sizing:border-box!important;
  }
  html[data-theme] .project-modal-dialog{
    width:100%!important;max-width:100%!important;min-width:0!important;
    height:auto!important;max-height:100%!important;min-height:0!important;
    margin:0!important;border-radius:14px!important;overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  html[data-theme] .project-modal-close{position:sticky!important;float:right;top:8px!important;right:8px!important;margin:8px 8px -42px auto!important;width:35px!important;height:35px!important}
  html[data-theme] .project-modal-hero{min-height:0!important;padding:25px 14px 15px!important}
  html[data-theme] .project-modal-hero h2{max-width:100%!important;font-size:clamp(21px,5.7vw,29px)!important;line-height:1.15!important;overflow-wrap:anywhere}
  html[data-theme] .project-modal-hero p{max-width:100%!important;font-size:11px!important;line-height:1.65!important;overflow-wrap:anywhere}
  html[data-theme] .project-modal-stack{display:flex!important;flex-wrap:wrap!important;gap:5px!important}
  html[data-theme] .project-modal-details{min-width:0!important;padding:12px!important}
  html[data-theme] .project-modal-tabs{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important}
  html[data-theme] .project-modal-tabs>*{flex:0 0 auto!important;white-space:nowrap!important}
  html[data-theme] .project-modal-tabpanel{min-width:0!important;overflow-wrap:anywhere!important}
  html[data-theme] .project-modal-tabpanel *{max-width:100%;overflow-wrap:anywhere}
  html[data-theme] .project-modal-details .project-content>ul{grid-template-columns:minmax(0,1fr)!important}
  html[data-theme] .project-modal-details .project-content{padding:12px!important}
  html[data-theme] .project-modal-details .project-content>p{font-size:11px!important;line-height:1.7!important;overflow-wrap:anywhere}
  html[data-theme] .project-modal-details .project-content li{font-size:10px!important;line-height:1.6!important;overflow-wrap:anywhere}
  html[data-theme] .project-modal::backdrop{background:rgba(2,8,15,.74)!important}

  /* 2) Travel Journal / Route Book becomes a deliberate, full-width mobile experience. */
  html[data-theme] #trip-itineraries .trip-editorial-header{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important;
    gap:15px!important;width:100%!important;max-width:100%!important;margin:0 0 20px!important;
  }
  html[data-theme] #trip-itineraries .trip-editorial-title,
  html[data-theme] #trip-itineraries .trip-header-signature{
    display:block!important;grid-column:1/-1!important;width:100%!important;max-width:100%!important;
    min-width:0!important;margin:0!important;justify-self:stretch!important;
  }
  html[data-theme] #trip-itineraries .trip-editorial-title .overline{
    display:block!important;font-size:10px!important;line-height:1.6!important;letter-spacing:.13em!important;margin:0 0 10px!important;
  }
  html[data-theme] #trip-itineraries .trip-editorial-title h2{
    display:block!important;width:100%!important;max-width:none!important;min-width:0!important;
    margin:0 0 12px!important;font-size:clamp(30px,8vw,43px)!important;line-height:1.08!important;
    letter-spacing:-.045em!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;
  }
  html[data-theme] #trip-itineraries .trip-editorial-title h2 em{display:inline!important;white-space:normal!important}
  html[data-theme] #trip-itineraries .trip-passion-line{
    max-width:100%!important;margin:0!important;font-size:13px!important;line-height:1.7!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #trip-itineraries .trip-header-signature-copy{
    max-width:100%!important;margin:12px 0 0!important;font-size:12px!important;line-height:1.7!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #trip-itineraries .trip-bike-scene{width:100%!important;max-width:100%!important}
  html[data-theme] #trip-itineraries .trip-scenic-landscape{height:clamp(135px,38vw,190px)!important}
  html[data-theme] #tripItineraryGrid.trip-explorer{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;
    align-items:stretch!important;width:100%!important;max-width:100%!important;min-width:0!important;
    height:auto!important;max-height:none!important;overflow:hidden!important;
    border-radius:16px!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel{
    display:flex!important;flex-direction:column!important;align-self:stretch!important;
    width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
    margin:0!important;padding:0!important;border-right:0!important;border-bottom:1px solid var(--line)!important;
    overflow:hidden!important;box-sizing:border-box!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tabs-heading{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;
    width:100%!important;max-width:100%!important;padding:18px 14px 15px!important;gap:0!important;text-align:left!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tabs-heading>span{
    align-self:flex-start!important;width:max-content!important;max-width:100%!important;margin:0 0 12px!important;
    padding:7px 11px!important;font-size:8px!important;line-height:1.5!important;white-space:normal!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tabs-heading h3{
    width:100%!important;max-width:none!important;margin:0 0 6px!important;padding:0!important;
    font-size:clamp(17px,4.8vw,22px)!important;line-height:1.25!important;text-align:left!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tabs-heading p{
    width:100%!important;max-width:none!important;margin:0!important;font-size:11px!important;line-height:1.6!important;text-align:left!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel #tripItineraryTabs,
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tabs{
    display:flex!important;flex:0 0 auto!important;flex-direction:row!important;align-items:stretch!important;
    gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;
    max-height:none!important;margin:0!important;padding:12px 12px 14px!important;box-sizing:border-box!important;
    overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;
    touch-action:pan-x!important;scroll-snap-type:x proximity!important;scrollbar-width:thin!important;
    border:0!important;background:transparent!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel #tripItineraryTabs .trip-tab,
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tabs .trip-tab{
    display:grid!important;grid-template-columns:25px minmax(0,1fr) 10px!important;align-items:start!important;gap:7px!important;
    flex:0 0 clamp(142px,43vw,176px)!important;width:clamp(142px,43vw,176px)!important;min-width:clamp(142px,43vw,176px)!important;
    max-width:clamp(142px,43vw,176px)!important;min-height:95px!important;height:auto!important;box-sizing:border-box!important;
    padding:9px!important;margin:0!important;white-space:normal!important;overflow:visible!important;
    scroll-snap-align:start!important;transform:none!important;border-radius:11px!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tab-number{
    display:grid!important;place-items:center!important;width:25px!important;height:27px!important;min-width:25px!important;
    font-size:8px!important;margin:0!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tab-copy{
    display:flex!important;flex-direction:column!important;gap:6px!important;min-width:0!important;width:100%!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tab-copy>b{
    display:block!important;min-width:0!important;max-width:100%!important;font-size:10px!important;line-height:1.35!important;
    white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tab-copy>small{
    display:flex!important;flex-wrap:wrap!important;gap:3px!important;min-width:0!important;max-width:100%!important;
    font-size:8px!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tab-region,
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tab-stops{display:inline!important;white-space:normal!important;overflow-wrap:anywhere!important}
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tab-arrow{font-size:10px!important;line-height:1.3!important}
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tabs-foot{
    display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-start!important;
    gap:8px!important;width:100%!important;max-width:100%!important;min-height:42px!important;padding:10px 14px!important;
    font-size:7px!important;line-height:1.5!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #tripItineraryGrid #tripSelectedDetail{
    display:block!important;position:relative!important;width:100%!important;max-width:100%!important;min-width:0!important;
    height:auto!important;max-height:none!important;margin:0!important;padding:12px!important;overflow:visible!important;box-sizing:border-box!important;
  }
  html[data-theme] #tripSelectedDetail .trip-detail-heading{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0 0 13px!important;
  }
  html[data-theme] #tripSelectedDetail .trip-detail-heading h3{
    font-size:clamp(21px,5.7vw,29px)!important;line-height:1.18!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  html[data-theme] #tripSelectedDetail .trip-overview{
    font-size:12px!important;line-height:1.7!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #tripSelectedDetail .trip-detail-lower{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-flow:row!important;gap:12px!important;
    width:100%!important;max-width:100%!important;min-width:0!important;margin-top:14px!important;
  }
  html[data-theme] #tripSelectedDetail .trip-stops-panel,
  html[data-theme] #tripSelectedDetail .trip-story-panel{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;margin:0!important;
    padding:13px!important;border-radius:12px!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #tripSelectedDetail .trip-panel-heading{
    display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:space-between!important;
    gap:8px!important;min-width:0!important;margin:0 0 12px!important;
  }
  html[data-theme] #tripSelectedDetail .trip-panel-heading h4{
    min-width:0!important;font-size:14px!important;line-height:1.35!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #tripSelectedDetail .trip-panel-mark{flex:0 0 auto!important;font-size:7px!important;white-space:normal!important}
  html[data-theme] #tripSelectedDetail .trip-stop-list{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;width:100%!important;min-width:0!important;
  }
  html[data-theme] #tripSelectedDetail .trip-stop{
    display:grid!important;grid-template-columns:25px minmax(0,1fr)!important;gap:8px!important;
    width:100%!important;min-width:0!important;padding:9px!important;box-sizing:border-box!important;
  }
  html[data-theme] #tripSelectedDetail .trip-stop *{min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important}
  html[data-theme] #tripSelectedDetail .trip-story-panel .trip-panel-heading{margin-bottom:13px!important}
  html[data-theme] #tripSelectedDetail .trip-story-body{padding:12px!important;margin:0 0 14px!important}
  html[data-theme] #tripSelectedDetail .trip-story-body p{font-size:11px!important;line-height:1.75!important;overflow-wrap:anywhere!important}
  html[data-theme] #tripSelectedDetail .trip-story-highlights{gap:6px!important;margin-bottom:14px!important}
  html[data-theme] #tripSelectedDetail .trip-story-tag{min-height:27px!important;padding:6px 8px!important;font-size:8px!important;white-space:normal!important}
  html[data-theme] #tripSelectedDetail .trip-story-signoff{gap:8px!important;padding-top:11px!important;font-size:10px!important;line-height:1.6!important}
  html[data-theme] #tripSelectedDetail .trip-directions-panel{width:100%!important;max-width:100%!important;min-width:0!important;margin-top:12px!important}
  html[data-theme] #tripSelectedDetail .trip-directions-panel>summary{
    grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;align-items:start!important;font-size:10px!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #tripSelectedDetail .trip-directions-action{white-space:normal!important}
  html[data-theme] #tripSelectedDetail .trip-map-links{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important}
  html[data-theme] #tripSelectedDetail .trip-map-link{width:100%!important;min-width:0!important;box-sizing:border-box!important}
  html[data-theme] #tripSelectedDetail .trip-map-link small{overflow-wrap:anywhere!important;word-break:normal!important}
  html[data-theme] #tripSelectedDetail .trip-map-shell{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;border-radius:10px!important}
  html[data-theme] #tripSelectedDetail .trip-live-map{width:100%!important;max-width:100%!important;height:clamp(210px,58vw,270px)!important;min-height:200px!important}
  html[data-theme] #tripSelectedDetail .trip-live-map .leaflet-container{width:100%!important;max-width:100%!important;height:100%!important}
  html[data-theme] #tripSelectedDetail .trip-live-map .leaflet-popup-content-wrapper{max-width:calc(100vw - 86px)!important}
  html[data-theme] #tripSelectedDetail .trip-live-map .leaflet-popup-content{max-width:calc(100vw - 110px)!important;margin:9px!important;overflow-wrap:anywhere!important}
  html[data-theme] #tripSelectedDetail .trip-map-popup{max-width:100%!important;overflow-wrap:anywhere!important;word-break:normal!important}
  html[data-theme] #tripSelectedDetail .trip-map-attribution-note{font-size:8px!important;line-height:1.5!important;overflow-wrap:anywhere!important}

  /* 3) Credentials gets readable summary rows, reachable filters, and full-width records on phones. */
  html[data-theme] #certifications .credentials-heading{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;
    width:100%!important;max-width:100%!important;margin:0 0 17px!important;
  }
  html[data-theme] #certifications .credentials-heading>div,
  html[data-theme] #certifications .credentials-heading-copy{
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  html[data-theme] #certifications .credentials-heading h2{
    max-width:100%!important;font-size:clamp(27px,7.2vw,36px)!important;line-height:1.12!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #certifications .credentials-heading-copy p{font-size:12px!important;line-height:1.7!important}
  html[data-theme] #certifications .credential-dashboard{
    width:100%!important;max-width:100%!important;min-width:0!important;padding:12px!important;border-radius:14px!important;
  }
  html[data-theme] #certifications .credential-summary{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:7px!important;margin:0 0 14px!important;
  }
  html[data-theme] #certifications .credential-summary>div{
    display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
    grid-template-rows:auto auto!important;align-items:center!important;column-gap:10px!important;row-gap:2px!important;
    width:100%!important;min-width:0!important;padding:10px!important;border-radius:10px!important;
  }
  html[data-theme] #certifications .credential-summary .summary-kicker{
    grid-column:1!important;grid-row:1!important;min-width:0!important;font-size:7px!important;line-height:1.35!important;letter-spacing:.07em!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #certifications .credential-summary strong{
    grid-column:1!important;grid-row:2!important;min-width:0!important;font-size:19px!important;line-height:1.25!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  html[data-theme] #certifications .credential-summary small{
    grid-column:2!important;grid-row:1/3!important;min-width:0!important;font-size:9px!important;line-height:1.5!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #certifications .credential-controls{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;width:100%!important;margin:0 0 12px!important;
  }
  html[data-theme] #certifications .credential-search,
  html[data-theme] #certifications .year-select{
    width:100%!important;min-width:0!important;min-height:43px!important;box-sizing:border-box!important;
  }
  html[data-theme] #certifications .credential-search input{width:100%!important;min-width:0!important;font-size:12px!important}
  html[data-theme] #certifications .year-select select{min-width:0!important;max-width:100%!important;font-size:11px!important}
  html[data-theme] #certifications .credential-categories{
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:6px!important;
    width:100%!important;max-width:100%!important;min-width:0!important;padding:5px 1px 12px!important;
    overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;touch-action:pan-x!important;
    scrollbar-width:thin!important;
  }
  html[data-theme] #certifications .credential-filter{
    display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;
    min-height:34px!important;max-width:85vw!important;padding:8px 10px!important;font-size:9px!important;line-height:1.3!important;
    white-space:nowrap!important;
  }
  html[data-theme] #certifications .credential-results-bar{
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;
    gap:8px!important;width:100%!important;min-width:0!important;padding:11px 0!important;font-size:9px!important;
  }
  html[data-theme] #certifications #credentialResults{flex:1 1 150px!important;min-width:0!important;overflow-wrap:anywhere!important;line-height:1.5!important}
  html[data-theme] #certifications #clearCredentialFilters{flex:0 0 auto!important;font-size:9px!important;white-space:normal!important}
  html[data-theme] #certifications .credential-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;width:100%!important;min-width:0!important;
  }
  html[data-theme] #certifications .credential-card{
    display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important;min-width:0!important;max-width:100%!important;
    padding:13px!important;border-radius:11px!important;box-sizing:border-box!important;
  }
  html[data-theme] #certifications .credential-card-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin:0 0 10px!important}
  html[data-theme] #certifications .credential-mark{width:34px!important;height:34px!important;flex:0 0 34px!important}
  html[data-theme] #certifications .credential-year{font-size:9px!important;white-space:nowrap!important}
  html[data-theme] #certifications .credential-card h3{
    min-width:0!important;font-size:13px!important;line-height:1.5!important;letter-spacing:-.01em!important;margin:0 0 6px!important;
    overflow-wrap:anywhere!important;word-break:normal!important;
  }
  html[data-theme] #certifications .credential-issuer{min-width:0!important;font-size:10px!important;line-height:1.6!important;overflow-wrap:anywhere!important}
  html[data-theme] #certifications .credential-category-label{font-size:8px!important;line-height:1.5!important;margin-top:8px!important;overflow-wrap:anywhere!important}
  html[data-theme] #certifications .credential-card-footer{
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;gap:7px!important;
    margin-top:10px!important;padding-top:10px!important;
  }
  html[data-theme] #certifications .credential-date{font-size:9px!important;line-height:1.4!important;overflow-wrap:anywhere!important}
  html[data-theme] #certifications .credential-link,
  html[data-theme] #certifications .credential-preview-link,
  html[data-theme] #certifications .credential-unavailable{
    max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;font-size:9px!important;line-height:1.4!important;
  }
  html[data-theme] #certifications .credential-footer{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:9px!important;
    margin-top:14px!important;
  }
  html[data-theme] #certifications .credential-footer>div{width:100%!important;min-width:0!important}
  html[data-theme] #certifications .credential-footer p{font-size:9px!important;line-height:1.6!important;overflow-wrap:anywhere!important}
  html[data-theme] #certifications .credential-footer>a{max-width:100%!important;white-space:normal!important;font-size:10px!important;overflow-wrap:anywhere!important}
  html[data-theme] #certifications .credential-empty{padding:25px 10px!important}
  html[data-theme] #certifications .credential-empty p{font-size:11px!important;line-height:1.6!important}

  /* Leaflet's own popups should stay inside the map rather than spilling beyond the phone. */
  html[data-theme] .leaflet-popup{max-width:calc(100vw - 52px)!important}
  html[data-theme] .leaflet-popup-content-wrapper{max-width:calc(100vw - 52px)!important}
  html[data-theme] .leaflet-popup-content{max-width:calc(100vw - 82px)!important;overflow-wrap:anywhere!important;word-break:normal!important}

  /* Fixed navigation catalogue in compact landscape: retain its existing one-row behavior. */
  .mobile-dock{z-index:120!important}
}

/* Portrait: two accessible rows so all seven catalogue links remain visible at once. */
@media screen and (max-width:850px) and (orientation:portrait){
  body{padding-bottom:calc(108px + env(safe-area-inset-bottom))!important}
  .mobile-dock{
    position:fixed!important;left:5px!important;right:5px!important;bottom:3px!important;
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(34px,1fr))!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;
    width:auto!important;max-width:none!important;height:auto!important;
    min-height:78px!important;max-height:calc(88px + env(safe-area-inset-bottom))!important;
    gap:2px!important;padding:4px 4px calc(4px + env(safe-area-inset-bottom))!important;
    overflow:hidden!important;border-radius:13px!important;z-index:120!important;
  }
  .mobile-dock a{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    min-width:0!important;min-height:33px!important;height:100%!important;gap:1px!important;padding:2px 1px!important;
  }
  .mobile-dock a span{font-size:15px!important;line-height:1.05!important}
  .mobile-dock a b{font-size:clamp(7px,1.8vw,8.5px)!important;line-height:1.12!important;white-space:nowrap!important}
  .footer{padding-bottom:calc(118px + env(safe-area-inset-bottom))!important}
}

/* Portrait devices narrower than older phones keep readable controls and avoid fixed text collisions. */
@media screen and (max-width:390px) and (orientation:portrait){
  html[data-theme] #tripItineraryGrid .trip-tabs-panel #tripItineraryTabs .trip-tab,
  html[data-theme] #tripItineraryGrid .trip-tabs-panel .trip-tabs .trip-tab{
    flex-basis:145px!important;width:145px!important;min-width:145px!important;max-width:145px!important;
  }
  html[data-theme] #certifications .credential-summary>div{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;column-gap:7px!important}
  html[data-theme] #certifications .credential-summary .summary-kicker{font-size:6.5px!important}
  html[data-theme] #certifications .credential-summary small{font-size:8.5px!important}
}


/* Full-viewport phone layout: remove the blue side gutter and make project details cover the actual device viewport. */
@media screen and (max-width:850px), screen and (orientation:landscape) and (max-width:1200px) and (max-height:750px){
  html,body{
    width:100%!important;min-width:0!important;max-width:100%!important;
    margin:0!important;overflow-x:hidden!important;overflow-x:clip!important;
  }
  body{position:relative!important;background-color:var(--bg)!important}
  main#main{
    display:block!important;position:relative!important;
    width:100vw!important;max-width:100vw!important;min-width:0!important;
    margin:0!important;padding-left:0!important;padding-right:0!important;
    overflow-x:hidden!important;overflow-x:clip!important;box-sizing:border-box!important;
  }
  main#main>section{
    display:block;position:relative;
    width:100%!important;max-width:100vw!important;min-width:0!important;
    margin-left:0!important;margin-right:0!important;box-sizing:border-box!important;
  }
  main#main .container{
    width:calc(100% - 24px)!important;max-width:100%!important;min-width:0!important;
    margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important;
  }
  main#main .section-header,
  main#main .about-grid,
  main#main .project-grid,
  main#main .resume-grid,
  main#main .credential-dashboard,
  main#main .contact-panel{
    min-width:0!important;max-width:100%!important;
  }

  /* The project modal was nested inside the Projects section. On phones it is moved to body
     by a small mobile-only script below, so fixed positioning uses the real viewport. */
  html[data-theme] body>.project-modal{
    position:fixed!important;inset:0!important;
    width:100vw!important;max-width:100vw!important;
    height:100vh!important;height:100dvh!important;
    max-height:100vh!important;max-height:100dvh!important;
    margin:0!important;
    padding:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))!important;
    display:grid!important;place-items:center!important;align-content:center!important;
    box-sizing:border-box!important;overflow:hidden!important;
    z-index:2147483000!important;background:transparent!important;
  }
  html[data-theme] body>.project-modal[hidden]{display:none!important}
  html[data-theme] body>.project-modal .project-modal-backdrop{
    position:absolute!important;inset:0!important;
    display:block!important;width:100%!important;height:100%!important;
    margin:0!important;padding:0!important;border:0!important;
    background:rgba(4,10,20,.78)!important;
    -webkit-backdrop-filter:blur(9px)!important;backdrop-filter:blur(9px)!important;
  }
  html[data-theme="light"] body>.project-modal .project-modal-backdrop{background:rgba(25,43,64,.58)!important}
  html[data-theme] body>.project-modal .project-modal-dialog{
    position:relative!important;z-index:1!important;align-self:stretch!important;
    display:block!important;width:100%!important;max-width:none!important;min-width:0!important;
    height:100%!important;max-height:100%!important;min-height:0!important;
    margin:0!important;padding:0!important;box-sizing:border-box!important;
    border-radius:14px!important;overflow-x:hidden!important;overflow-y:auto!important;
    overscroll-behavior:contain!important;scrollbar-width:thin!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html[data-theme] body>.project-modal .project-modal-close{
    position:sticky!important;top:8px!important;float:right!important;
    z-index:20!important;display:grid!important;place-items:center!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
    margin:8px 8px -46px auto!important;padding:0!important;
    border:1px solid rgba(255,255,255,.3)!important;border-radius:11px!important;
    background:rgba(5,15,26,.9)!important;color:#fff!important;
    box-shadow:0 4px 16px rgba(0,0,0,.22)!important;
  }
  html[data-theme] body>.project-modal .project-modal-hero{
    clear:both!important;display:flex!important;flex-direction:column!important;
    width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;
    padding:62px 14px 18px!important;box-sizing:border-box!important;overflow:hidden!important;
  }
  html[data-theme] body>.project-modal .project-modal-hero>img{
    position:absolute!important;inset:0!important;display:block!important;
    width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;
  }
  html[data-theme] body>.project-modal .project-modal-hero-copy{
    position:relative!important;z-index:2!important;min-width:0!important;width:100%!important;max-width:100%!important;
  }
  html[data-theme] body>.project-modal .project-modal-mark{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    max-width:100%!important;margin:0 0 12px!important;
  }
  html[data-theme] body>.project-modal .project-modal-kicker{
    display:block!important;margin:0 0 8px!important;font-size:8px!important;line-height:1.5!important;letter-spacing:.13em!important;
  }
  html[data-theme] body>.project-modal .project-modal-hero h2{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0 0 9px!important;font-size:clamp(22px,6vw,31px)!important;line-height:1.15!important;
    overflow-wrap:anywhere!important;word-break:normal!important;
  }
  html[data-theme] body>.project-modal .project-modal-hero p{
    display:block!important;max-width:100%!important;margin:0!important;
    font-size:11px!important;line-height:1.65!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] body>.project-modal .project-modal-stack{
    display:flex!important;flex-wrap:wrap!important;gap:5px!important;max-width:100%!important;margin-top:10px!important;
  }
  html[data-theme] body>.project-modal .project-modal-stack>*{
    min-width:0!important;max-width:100%!important;font-size:8px!important;overflow-wrap:anywhere!important;white-space:normal!important;
  }
  html[data-theme] body>.project-modal .project-modal-details{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:12px!important;box-sizing:border-box!important;
  }
  html[data-theme] body>.project-modal .project-modal-tabs{
    display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;
    gap:5px!important;width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;
    overscroll-behavior-x:contain!important;touch-action:pan-x!important;padding:0 0 9px!important;
  }
  html[data-theme] body>.project-modal .project-modal-tabs>*,
  html[data-theme] body>.project-modal .project-modal-tabs .project-detail-tab{
    display:flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:center!important;
    min-width:64px!important;min-height:41px!important;padding:8px!important;gap:5px!important;
    font-size:9px!important;white-space:nowrap!important;
  }
  html[data-theme] body>.project-modal .project-modal-tabpanel{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
    padding-top:12px!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  html[data-theme] body>.project-modal .project-modal-tabpanel *{
    max-width:100%!important;min-width:0!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  html[data-theme] body>.project-modal .project-modal-details .project-content{
    width:100%!important;max-width:100%!important;min-width:0!important;padding:0!important;
  }
  html[data-theme] body>.project-modal .project-modal-details .project-content>ul,
  html[data-theme] body>.project-modal .project-modal-details .project-content>.story-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;
    width:100%!important;margin:0 0 14px!important;padding:0!important;
  }
  html[data-theme] body>.project-modal .project-modal-details .project-content>ul li,
  html[data-theme] body>.project-modal .project-modal-details .project-content>.story-grid>div{
    min-width:0!important;max-width:100%!important;padding:10px!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] body>.project-modal .project-modal-details .project-content h3{font-size:15px!important;line-height:1.3!important}
  html[data-theme] body>.project-modal .project-modal-details .project-content p,
  html[data-theme] body>.project-modal .project-modal-details .project-content li{font-size:11px!important;line-height:1.65!important;overflow-wrap:anywhere!important}
  html[data-theme] body>.project-modal .project-modal-details .project-links{
    display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important;max-width:100%!important;
  }
  html[data-theme] body>.project-modal .project-modal-details .project-links a{
    max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
}


/* Final credential visibility/cache guard and mobile-native PDF fallback. */
@media screen and (max-width:850px), screen and (orientation:landscape) and (max-width:1200px) and (max-height:750px){
  /* The credential dashboard is core content; never leave it transparent on a phone if
     an anchor jump or IntersectionObserver fails to fire. */
  html[data-theme] #certifications .credentials-heading.reveal,
  html[data-theme] #certifications .credential-dashboard.reveal,
  html[data-theme] #certifications .credential-footer.reveal{
    opacity:1!important;visibility:visible!important;transform:none!important;
  }
  html[data-theme] #certifications .credential-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
  }
  html[data-theme] #certifications .credential-grid[hidden]{display:none!important}
  html[data-theme] #certifications .credential-load-fallback{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:10px!important;
    width:100%!important;min-width:0!important;padding:18px!important;box-sizing:border-box!important;
    border:1px solid var(--line2)!important;border-radius:11px!important;
    background:var(--panel2)!important;color:var(--muted)!important;
    font-size:11px!important;line-height:1.65!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #certifications .credential-load-fallback a{
    display:inline-flex!important;align-items:center!important;max-width:100%!important;
    padding:8px 11px!important;border:1px solid var(--line2)!important;border-radius:8px!important;
    color:var(--accent)!important;font-size:10px!important;font-weight:800!important;
    line-height:1.4!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #certifications .credential-card{
    text-align:left!important;align-items:stretch!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #certifications .credential-card h3,
  html[data-theme] #certifications .credential-card p,
  html[data-theme] #certifications .credential-card .credential-category-label{
    max-width:100%!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #certifications .credential-card-footer>*{min-width:0!important;max-width:100%!important}
  html[data-theme] #certifications .credential-unavailable{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    min-height:30px!important;padding:6px 9px!important;border:1px solid var(--line2)!important;border-radius:7px!important;
    background:var(--panel2)!important;color:var(--accent)!important;text-decoration:none!important;
  }

  /* Keep an external native PDF option available in phone dialogs only. */
  html[data-theme] #certificatePreviewDialog[open] .viewer-header{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;align-items:start!important;gap:7px 10px!important;
  }
  html[data-theme] #certificatePreviewDialog[open] .viewer-header>div{
    grid-column:1!important;grid-row:1!important;min-width:0!important;width:100%!important;
  }
  html[data-theme] #certificatePreviewDialog[open] #credentialPreviewExternal:not([hidden]){
    display:inline-flex!important;grid-column:1!important;grid-row:2!important;align-items:center!important;
    justify-content:center!important;justify-self:start!important;min-width:0!important;max-width:100%!important;
    min-height:32px!important;padding:7px 10px!important;border:1px solid var(--line2)!important;border-radius:8px!important;
    background:var(--panel2)!important;color:var(--accent)!important;font-size:9px!important;font-weight:800!important;
    line-height:1.35!important;text-decoration:none!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] #certificatePreviewDialog[open] #credentialPreviewExternal[hidden]{display:none!important}
  html[data-theme] #certificatePreviewDialog[open] #certificatePreviewClose{
    grid-column:2!important;grid-row:1!important;align-self:start!important;
  }
}


/* Final certificate viewer fit: phone images use contain; PDF records open in the native browser viewer. */
@media screen and (max-width:850px), screen and (orientation:landscape) and (max-width:1200px) and (max-height:750px){
  /* Direct PDF links share the existing credential button look, but behave like a normal URL. */
  html[data-theme] #certifications .credential-open-pdf{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
    min-height:32px!important;max-width:100%!important;padding:7px 0!important;margin:0!important;
    border:0!important;border-radius:0!important;background:transparent!important;
    color:var(--accent)!important;font-family:inherit!important;font-size:9px!important;font-weight:800!important;
    line-height:1.4!important;text-align:left!important;text-decoration:none!important;white-space:normal!important;
    overflow-wrap:anywhere!important;cursor:pointer!important;
  }
  html[data-theme] #certifications .credential-open-pdf:focus-visible{
    outline:2px solid var(--accent)!important;outline-offset:3px!important;
  }

  /* Keep the dialog itself within the dynamic device viewport. The certificate image is
     a real img element here, not a full-size image trapped in an iframe/browser image viewer. */
  html[data-theme] dialog#certificatePreviewDialog[open]{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    position:fixed!important;
    inset:max(6px,env(safe-area-inset-top,0px)) max(6px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))!important;
    width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;
    margin:0!important;padding:0!important;box-sizing:border-box!important;overflow:hidden!important;border-radius:14px!important;
  }
  html[data-theme] dialog#certificatePreviewDialog[open] .viewer-header{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;
    flex:0 0 auto!important;align-items:start!important;gap:6px 10px!important;padding:10px!important;min-width:0!important;
  }
  html[data-theme] dialog#certificatePreviewDialog[open] .viewer-header>div{
    grid-column:1!important;grid-row:1!important;min-width:0!important;width:100%!important;
  }
  html[data-theme] dialog#certificatePreviewDialog[open] .viewer-header h3{
    font-size:14px!important;line-height:1.35!important;overflow-wrap:anywhere!important;word-break:normal!important;
  }
  html[data-theme] dialog#certificatePreviewDialog[open] .viewer-header p{
    font-size:10px!important;line-height:1.5!important;overflow-wrap:anywhere!important;
  }
  html[data-theme] dialog#certificatePreviewDialog[open] #credentialPreviewExternal:not([hidden]){
    display:inline-flex!important;grid-column:1!important;grid-row:2!important;justify-self:start!important;align-items:center!important;
    min-height:31px!important;max-width:100%!important;padding:6px 9px!important;border:1px solid var(--line2)!important;
    border-radius:8px!important;background:var(--panel2)!important;color:var(--accent)!important;
    font-size:9px!important;font-weight:800!important;line-height:1.4!important;text-decoration:none!important;white-space:normal!important;
  }
  html[data-theme] dialog#certificatePreviewDialog[open] #certificatePreviewClose{
    grid-column:2!important;grid-row:1!important;justify-self:end!important;align-self:start!important;
    min-height:34px!important;padding:7px 9px!important;font-size:10px!important;
  }
  html[data-theme] dialog#certificatePreviewDialog[open] .viewer-stage{
    display:flex!important;flex:1 1 0!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    width:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;height:auto!important;
    box-sizing:border-box!important;padding:8px!important;margin:0!important;gap:0!important;
    overflow:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
    background:#080e16!important;
  }
  html[data-theme="light"] dialog#certificatePreviewDialog[open] .viewer-stage{background:#eef3f8!important}
  html[data-theme] dialog#certificatePreviewDialog[open] #certificatePreviewImage[hidden],
  html[data-theme] dialog#certificatePreviewDialog[open] #certificatePreviewFrame[hidden]{display:none!important}
  html[data-theme] dialog#certificatePreviewDialog[open] #certificatePreviewImage:not([hidden]){
    display:block!important;flex:0 1 auto!important;align-self:center!important;
    width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
    max-width:100%!important;max-height:100%!important;margin:auto!important;padding:0!important;
    object-fit:contain!important;object-position:center center!important;border:0!important;
  }
  html[data-theme] dialog#certificatePreviewDialog[open] #certificatePreviewFrame:not([hidden]){
    display:block!important;flex:1 1 auto!important;align-self:stretch!important;
    width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
    max-width:100%!important;max-height:100%!important;border:0!important;background:#fff!important;
  }
}