@media only screen and (max-width: 800px){

  /* =========================
     Global mobile foundation
     ========================= */

  html { -webkit-text-size-adjust: 100%; }
  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    overflow-x: hidden;
  }

  /* Media scales cleanly */
  img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Safer tap behavior */
  a, button { -webkit-tap-highlight-color: transparent; }

  /* Defensive layout safety */
  body, .row, .container, #wrapper, #content{
    max-width: 100% !important;
  }

  /* =========================
     Home page: Cycler (banner)
     ========================= */

  #cycler{
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    margin: 0 auto 6px !important;     /* tight spacing below slider */
    height: 50px !important;           /* adjust to taste */
  }

  #cycler img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;     /* no cropping */
    object-position: center !important;
  }

  /* =========================
     Shared: Logo (default mobile)
     ========================= */

  #apDiv1{
    position: static !important;
    width: 64px !important;
    height: auto !important;
    margin: 10px auto 6px !important;
    left: auto !important;
    top: auto !important;
  }

  #apDiv1 img{
    width: 64px !important;
    height: auto !important;
    display: block !important;
  }

  /* =========================
     Shared: Primary NAV (default mobile)
     ========================= */

  nav{
    position: static !important;
    top: auto !important;
    left: auto !important;

    width: auto !important;
    max-width: 560px !important;
    height: auto !important;

    margin: 4px auto 10px !important;
    padding: 8px 10px !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;

    gap: 6px !important;                /* tighter so it can fit one row */
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.06) !important;

    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    word-spacing: 0 !important;
    white-space: normal !important;
  }

  nav a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 8px 10px !important;       /* smaller pill */
    min-height: 40px !important;

    border-radius: 999px !important;
    background: #f3f3f3 !important;
    border: 1px solid #e2e2e2 !important;

    text-decoration: none !important;
    color: #111 !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
  }

  /* Hide bullets on mobile (clean wrapping) */
  nav .redBullet{ display: none !important; }

  /* =========================
     Home page: Hero + tiles
     ========================= */

  .hero{
    padding: 0 14px !important;
    margin: 0 auto 18px !important;
  }

  .hero__kicker{
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }

  .hero h1{
    font-size: 24px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.3px !important;
  }

  .hero p{
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .hero__links{ margin: 12px 0 16px !important; }

  .btn{
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .featured{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 520px !important;
  }

  .tile{ padding: 14px 12px !important; }
  .tile__title{ font-size: 15px !important; }
  .tile__meta{ font-size: 12px !important; }

  /* =========================
     Resume page (mobile)
     ========================= */

  /* Make wrapper fluid */
  body.resume-pdf #container{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 4px 12px 0 !important;
  }

  /* Stack sidebar + main */
  body.resume-pdf .resume__wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  body.resume-pdf .resume__side,
  body.resume-pdf .resume__main{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  body.resume-pdf .resume__block{ margin-bottom: 12px !important; }

  body.resume-pdf .resume__name{
    font-size: 22px !important;
    letter-spacing: 0.5px !important;
  }

  body.resume-pdf .resume__title-left{
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin-top: 6px !important;
  }

  body.resume-pdf .resume__h,
  body.resume-pdf .resume__title,
  body.resume-pdf .resume__sub{
    font-size: 14px !important;
    letter-spacing: 1px !important;
  }

  body.resume-pdf .resume__p,
  body.resume-pdf .resume__meta,
  body.resume-pdf .resume__list,
  body.resume-pdf .resume__bullets{
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  body.resume-pdf .resume__list--twoCol{
    columns: 1 !important;
    -webkit-columns: 1 !important;
    -moz-columns: 1 !important;
  }

  body.resume-pdf .resume__meta a{
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }

  body.resume-pdf .job__head{
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  body.resume-pdf .job__dates{
    font-size: 13px !important;
    opacity: 0.9 !important;
  }

  body.resume-pdf .resume__bullets ul{
    margin: 8px 0 14px !important;
    padding-left: 18px !important;
  }

  body.resume-pdf .resume__bullets li{ margin: 6px 0 !important; }

  /* Resume: logo a bit smaller */
  body.resume-pdf #apDiv1{ margin: 10px auto 6px !important; }
  body.resume-pdf #apDiv1 img{ width: 52px !important; }

  /* Resume: clickable nav pills (same as global, just keep it tight) */
  body.resume-pdf nav{ margin: 4px auto 8px !important; }

  /* Resume: print button */
  body.resume-pdf .printbar{
    max-width: 560px !important;
    margin: 4px auto 8px !important;
    padding: 0 12px !important;
    text-align: center !important;
  }

  body.resume-pdf .printbtn{
    display: inline-block !important;
    width: calc(100% - 24px) !important;
    max-width: 560px !important;

    padding: 10px 14px !important;
    border: 1px solid #ddd !important;
    border-radius: 999px !important;
    background: #fff !important;

    color: #111 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-family: inherit !important;
  }

  /* Don’t print the nav/logo/button */
  @media print{
    nav, #apDiv1, .printbar{ display:none !important; }
    #container{ width: 100% !important; margin: 0 !important; padding: 0 !important; }
  }

  /* =========================
     Portfolio pages (mobile)
     ========================= */

  /* Subnav (#nav2) */
  #nav2{
    position: static !important;
    top: auto !important;
    width: auto !important;
    max-width: 560px !important;
    height: auto !important;

    margin: 0 auto 4px !important;
    padding: 6px 10px !important;

    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;

    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 14px !important;
  }

  #nav2 a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 9px 12px !important;
    min-height: 40px !important;

    border-radius: 999px !important;
    background: #fafafa !important;
    border: 1px solid #e9e9e9 !important;

    text-decoration: none !important;
    color: #111 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  #nav2 .redBullet{ display: none !important; }

  /* Remove spacer <p>&nbsp;</p> blocks that create huge gaps */
  body > p,
  .row > p { display: none !important; }

  /* Kill inline row margin-top: 2em */
  .row{ margin-top: 0 !important; margin-bottom: 0 !important; }

  /* Pull content up under nav2 */
  #main{ margin-top: 0 !important; padding-top: 0 !important; }

  /* Thumbnails: 2-column grid */
  #thumnbnails{
    padding: 0 12px !important;
    margin: 0 auto 4px !important;
  }

  #thumnbnails p{ margin: 0 !important; }

  #thumnbnails a{
    display: inline-block !important;
    width: calc(50% - 8px) !important;
    margin: 4px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    vertical-align: top !important;
  }

  #thumnbnails img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  @media (max-width: 420px){
    #thumnbnails a{ width: calc(100% - 8px) !important; }
  }

  /* Before/After section: stack and pad */
  #b4aft{
    padding: 0 12px !important;
    margin: 0 auto 10px !important;
  }

  #b4aft .columns{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #map_canvas{
    font-size: 14px !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    background: #fff !important;
    margin: 0 0 4px !important;
  }

  .twentytwenty-container{ width: 100% !important; }
	
/* =========================
   Portfolio: TOP nav one-row (mobile)
   Paste at VERY END of mobile.css
   ========================= */

body nav{
  flex-wrap: nowrap !important;     /* force single row */
  justify-content: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  overflow: hidden !important;      /* prevent sideways scrolling */
}

body nav a{
  padding: 7px 9px !important;      /* smaller pills */
  min-height: 38px !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;

  flex: 0 0 auto !important;        /* don’t stretch */
}	

}