/* Final mobile layer. Loaded after styles.css to prevent legacy responsive rules from winning. */
@media (max-width: 700px) {
  :root { --mobile-pad: 14px; }
  html, body { width: 100%; max-width: 100%; overflow-x: clip !important; }
  *, *::before, *::after { box-sizing: border-box; }
  body { font-size: 14px; -webkit-text-size-adjust: 100%; }
  img, video, svg, canvas { max-width: 100%; }
  main, section, article, aside, div { min-width: 0; }

  /* Header */
  .site-header, .detail-header {
    height: 64px !important; min-height: 64px !important; padding: 0 var(--mobile-pad) !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
  }
  .site-header .brand, .detail-header .brand { width: 126px !important; height: 42px !important; overflow: hidden; }
  .brand-logo, .brand-logo img { width: 126px !important; height: 42px !important; object-fit: contain !important; object-position: left center !important; }
  .menu-button { display: flex !important; width: 42px !important; height: 42px !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
  .menu-button span { width: 18px !important; height: 2px !important; margin: 0 !important; }
  .nav { position: fixed !important; z-index: 1100 !important; inset: 70px 10px auto !important; width: auto !important; max-height: calc(100svh - 82px); padding: 10px !important; display: none !important; overflow-y: auto; background: #071735 !important; border: 1px solid rgba(126,205,255,.26) !important; border-radius: 18px !important; box-shadow: 0 22px 55px rgba(0,16,48,.36) !important; }
  .nav.open { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 3px !important; }
  .nav > a, .nav-dropdown-toggle { width: 100% !important; min-height: 44px; padding: 10px 12px !important; display: flex !important; align-items: center; justify-content: space-between; font-size: 13px !important; }
  .nav-dropdown { width: 100% !important; }
  .nav-submenu { position: static !important; width: 100% !important; margin: 2px 0 6px !important; padding: 5px !important; transform: none !important; box-shadow: none !important; }
  .nav-submenu a { min-height: 40px; padding: 8px !important; font-size: 11px !important; }
  .detail-header .back-link { max-width: 52vw; padding: 9px 12px !important; font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Hero */
  .hero { min-height: 100svh !important; height: auto !important; padding: 92px var(--mobile-pad) 58px !important; display: grid !important; place-items: center !important; overflow: hidden !important; }
  .hero-content { width: 100% !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; }
  .hero-signals { display: none !important; }
  .hero-kicker { margin-bottom: 14px !important; font-size: 11px !important; letter-spacing: .16em !important; }
  .hero h1 { margin: 0 !important; font-size: clamp(31px, 9.5vw, 45px) !important; line-height: 1 !important; letter-spacing: -.05em !important; white-space: nowrap !important; }
  .type-line { margin: 17px 0 12px !important; font-size: 12px !important; letter-spacing: .14em !important; }
  .hero-copy { margin: 0 auto !important; font-size: 12px !important; line-height: 1.6 !important; }
  .hero-actions { width: 100% !important; margin-top: 22px !important; display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 8px !important; }
  .hero-actions .button { min-height: 48px !important; padding: 11px 14px !important; font-size: 11px !important; line-height: 1.2 !important; }
  .hero-footer { left: var(--mobile-pad) !important; right: var(--mobile-pad) !important; bottom: 14px !important; font-size: 8px !important; }

  /* Impact numbers */
  .proof-section { padding: 0 12px 44px !important; }
  .proof-shell { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; overflow: hidden !important; border-radius: 22px !important; }
  .proof-intro { grid-column: 1 / -1 !important; min-height: 108px !important; padding: 20px !important; }
  .proof-intro strong { font-size: 25px !important; line-height: 1.05 !important; }
  .proof-shell article { min-height: 124px !important; padding: 17px 13px !important; border-top: 1px solid #d8e2ef !important; }
  .proof-shell article strong { font-size: clamp(31px, 10vw, 42px) !important; line-height: 1 !important; }
  .proof-shell article span { margin-top: 7px !important; font-size: 11px !important; }
  .proof-shell article small { font-size: 8px !important; line-height: 1.3 !important; }

  /* Skills: compact two-column pinboard */
  .skills-section.toolkit-section { padding: 56px 12px !important; }
  .toolkit-heading { width: 100% !important; margin: 0 auto 28px !important; padding: 0 3px !important; text-align: center !important; }
  .toolkit-eyebrow { font-size: 12px !important; letter-spacing: .14em !important; }
  .toolkit-title { margin-top: 10px !important; display: block !important; }
  .toolkit-title > span { display: block !important; font-size: 42px !important; line-height: .82 !important; transform: none !important; }
  .toolkit-title h2 { margin: 5px 0 0 !important; font-size: clamp(27px, 8vw, 36px) !important; line-height: 1.04 !important; }
  .toolkit-heading > p { margin: 13px auto 0 !important; font-size: 11px !important; line-height: 1.55 !important; }
  .toolkit-canvas { width: 100% !important; padding: 8px 0 0 !important; }
  .toolkit-path { display: none !important; }
  .toolkit-grid { width: 100% !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px 9px !important; }
  .toolkit-note, .toolkit-note:nth-child(n) { position: relative !important; inset: auto !important; width: 100% !important; min-height: 202px !important; height: auto !important; margin: 0 !important; padding: 23px 10px 11px !important; transform: none !important; border-radius: 15px !important; }
  .toolkit-note h3 { min-height: 34px !important; margin: 8px 0 6px !important; font-size: 13px !important; line-height: 1.18 !important; }
  .toolkit-note p { font-size: 9px !important; line-height: 1.42 !important; }
  .toolkit-number { font-size: 19px !important; }
  .toolkit-icon { width: 31px !important; height: 31px !important; font-size: 12px !important; border-radius: 8px !important; }
  .toolkit-pin { width: 18px !important; height: 18px !important; top: -10px !important; }
  .toolkit-level { margin-top: 9px !important; padding-top: 8px !important; font-size: 7px !important; }

  /* Experience */
  .experience-section { height: auto !important; min-height: 0 !important; padding: 56px 12px 58px !important; overflow: hidden !important; }
  .experience-shell { display: block !important; width: 100% !important; }
  .experience-intro { position: static !important; width: 100% !important; margin: 0 0 22px !important; padding: 0 3px !important; }
  .experience-intro h2 { font-size: clamp(31px, 9vw, 42px) !important; line-height: 1.03 !important; }
  .experience-intro p { font-size: 11px !important; }
  .orbit-stage { position: static !important; width: 100% !important; height: auto !important; display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
  .orbit-card, .experience-mobile-list .orbit-card { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 19px 15px 15px !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; border-radius: 22px !important; }
  .company-row { margin-top: 13px !important; gap: 10px !important; align-items: center !important; }
  .company-logo { width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 14px !important; }
  .company-row h3 { font-size: clamp(22px, 7vw, 29px) !important; line-height: 1.05 !important; }
  .card-description { margin-top: 15px !important; gap: 7px !important; }
  .card-description li { padding-left: 14px !important; font-size: 10.5px !important; line-height: 1.45 !important; }
  .metrics { margin-top: 14px !important; padding-top: 12px !important; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .metrics > div { padding: 0 6px !important; }
  .metrics strong { font-size: 21px !important; }
  .metrics span, .metrics small { font-size: 7.5px !important; line-height: 1.3 !important; }
  .detail-cta { min-height: 47px !important; margin-top: 13px !important; padding: 10px 12px !important; font-size: 10.5px !important; border-radius: 14px !important; }
  .experience-progress, .experience-orbit { display: none !important; }

  /* Projects and Visual Me */
  .projects-section, .marquee-section { padding: 56px 12px !important; overflow: hidden !important; }
  .section-heading { width: 100% !important; margin-bottom: 26px !important; }
  .section-heading h2 { font-size: clamp(31px, 9vw, 42px) !important; line-height: 1.03 !important; }
  .project-card { display: block !important; margin-bottom: 18px !important; overflow: hidden !important; border-radius: 22px !important; }
  .project-image { width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; }
  .project-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .project-copy { padding: 19px 15px !important; }
  .project-copy h3 { font-size: 24px !important; line-height: 1.08 !important; }
  .project-copy p { font-size: 11px !important; line-height: 1.55 !important; }
  .visual-gallery, .visual-stage { width: 100% !important; max-width: 100% !important; }
  .visual-stage { height: 350px !important; min-height: 350px !important; margin-top: 20px !important; }
  .visual-slides { height: 290px !important; }
  .visual-slide { width: min(72vw,270px) !important; height: 285px !important; border-radius: 18px !important; }
  .visual-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .visual-controls { margin-top: 10px !important; }

  /* Education, CTA, contact, footer */
  .education-section, .contact-section { padding: 56px 14px !important; display: block !important; overflow: hidden !important; }
  .education-intro, .contact-section-heading { position: relative !important; width: 100% !important; margin-bottom: 24px !important; }
  .education-intro h2, .contact-section-heading h2 { font-size: clamp(31px, 9vw, 42px) !important; line-height: 1.03 !important; }
  .education-portrait { width: min(70vw,290px) !important; margin: 18px auto 0 !important; }
  .education-list, .contact-methods { width: 100% !important; }
  .education-major { padding: 17px 13px !important; border-radius: 18px !important; }
  .education-major h3 { font-size: 24px !important; }
  .certificates { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; }
  .certificates span { padding: 7px 9px !important; font-size: 8px !important; }
  .cta-section { min-height: 470px !important; padding: 62px 15px !important; }
  .cta-section h2 { font-size: clamp(31px, 9vw, 44px) !important; line-height: 1.03 !important; }
  .contact-methods { display: grid !important; gap: 9px !important; }
  .contact-methods a, .contact-methods > div { min-height: 70px !important; padding: 12px 13px !important; border-radius: 16px !important; }
  .site-footer { padding: 27px 14px 17px !important; }
  .footer-main, .footer-bottom { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
  .footer-signature { width: 128px !important; }
  .footer-availability, .footer-tags { display: none !important; }
  .footer-bottom { margin-top: 18px !important; padding-top: 13px !important; font-size: 8px !important; }

  /* Work-detail pages */
  .detail-body, #experienceDetail { width: 100% !important; overflow-x: clip !important; }
  .detail-hero { min-height: 420px !important; height: auto !important; padding: 100px 15px 50px !important; display: grid !important; grid-template-columns: minmax(0,1fr) 84px !important; gap: 16px !important; align-items: center !important; }
  .detail-hero > div:last-child { grid-column: 1 !important; grid-row: 1 !important; }
  .detail-company-logo { position: static !important; grid-column: 2 !important; grid-row: 1 !important; width: 84px !important; height: 84px !important; padding: 11px !important; object-fit: contain !important; border-radius: 19px !important; }
  .detail-hero h1 { font-size: clamp(30px, 8.7vw, 42px) !important; line-height: 1.03 !important; letter-spacing: -.045em !important; overflow-wrap: anywhere; }
  .detail-hero .eyebrow { font-size: 9px !important; line-height: 1.4 !important; }
  .detail-content { display: block !important; padding: 40px 14px !important; }
  .detail-aside { position: static !important; width: 100% !important; margin-bottom: 26px !important; }
  .detail-main { width: 100% !important; }
  .detail-main h2 { font-size: 29px !important; }
  .detail-main > p { font-size: 12px !important; line-height: 1.6 !important; }
  .detail-metrics, .rd-metrics, .ecombest-metrics, .ybox-metrics, .bellsystem-metrics, .ybox-data-highlights { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; }
  .detail-metrics > div, .rd-metrics > article, .ecombest-metrics > article, .ybox-metrics > article, .bellsystem-metrics > article, .ybox-data-highlights > article { min-height: 112px !important; padding: 14px 11px !important; border-radius: 16px !important; }
  .rd-section { width: 100% !important; max-width: none !important; padding: 46px 14px !important; }
  .rd-heading { width: 100% !important; margin-bottom: 22px !important; }
  .rd-heading h2 { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.06 !important; overflow-wrap: anywhere; }
  .rd-heading p, .rd-lead { font-size: 12px !important; line-height: 1.6 !important; }
  .rd-scope { display: block !important; }
  .rd-scope .rd-heading { position: static !important; margin-bottom: 18px !important; }
  .rd-scope-list > article { padding: 17px 0 !important; }
  .rd-scope-list h3 { font-size: 15px !important; }
  .rd-scope-list p { font-size: 10.5px !important; line-height: 1.52 !important; }
  .rd-websites, .rd-email-flow, .rd-campaigns, .rd-client-projects, .rd-blog-grid, .ecombest-duties, .ybox-scope-grid, .bellsystem-duty-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px !important; }
  .rd-websites article, .rd-email-flow article, .rd-campaigns article, .ecombest-duties article, .ybox-scope-grid article, .bellsystem-duty-grid article { min-height: 0 !important; padding: 14px 10px !important; border-radius: 16px !important; }
  .rd-websites h3, .rd-email-flow h3, .rd-campaigns h3, .ecombest-duties h3, .ybox-scope-grid h3, .bellsystem-duty-grid h3 { font-size: 13px !important; line-height: 1.2 !important; }
  .rd-websites p, .rd-email-flow p, .rd-campaigns p, .ecombest-duties p, .ybox-scope-grid p, .bellsystem-duty-grid p { font-size: 8.5px !important; line-height: 1.42 !important; }
  .rd-seo-evidence, .rd-analysis-evidence, .rd-email-evidence { width: 100% !important; margin: 18px 0 0 !important; overflow: hidden !important; border-radius: 16px !important; }
  .rd-seo-evidence img, .rd-analysis-evidence img, .rd-email-evidence img { display: block !important; width: 100% !important; height: auto !important; max-height: 300px !important; object-fit: contain !important; }
  .rd-seo-process, .rd-client-process { width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; padding: 10px !important; overflow-x: auto !important; white-space: nowrap !important; border-radius: 15px !important; }
  .rd-seo-process > *, .rd-client-process > * { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; font-size: 8px !important; }
  .rd-support-evidence-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 11px !important; }
  .rd-full-table, .plan-table, .ecombest-content-table { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .rd-full-table table, .ecombest-content-table table { min-width: 740px !important; }
  .plan-row { min-width: 660px !important; }
  .bellsystem-gallery { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .bellsystem-gallery figure { height: auto !important; aspect-ratio: 4 / 3 !important; }
  .bellsystem-gallery img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  .wanderprints-card { display: block !important; padding: 17px !important; }
  .wanderprints-avatar { width: 108px !important; height: 108px !important; margin: 0 auto 15px !important; }

  /* MOSSY */
  .mossy-body main { overflow: hidden !important; }
  .case-hero { min-height: 0 !important; padding: 96px 14px 52px !important; display: block !important; }
  .case-copy h1 { font-size: clamp(56px, 21vw, 90px) !important; line-height: .9 !important; }
  .case-copy h2 { font-size: 26px !important; }
  .case-copy > p { font-size: 11px !important; line-height: 1.55 !important; }
  .case-cover { width: 100% !important; margin-top: 26px !important; }
  .case-cover img { width: 100% !important; height: auto !important; object-fit: contain !important; border-radius: 18px !important; }
  .mossy-name-story, .case-overview { padding: 50px 14px !important; display: block !important; }
  .mossy-name-visual { width: 100% !important; min-height: 460px !important; margin-bottom: 28px !important; }
  .mossy-name-copy h2 { font-size: clamp(41px, 14vw, 62px) !important; line-height: .94 !important; }
  .mossy-story-text p { font-size: 11px !important; line-height: 1.65 !important; }
  .case-gallery { padding: 50px 12px !important; }
  .pdf-pages { grid-template-columns: 1fr !important; gap: 11px !important; }
}

/* Hero CTA typography — visually balanced with the large pill buttons. */
@media(max-width:700px){
  body .hero .hero-actions .button{
    font-size:14px!important;
    font-weight:800!important;
    letter-spacing:-.015em!important;
  }
  body .hero .hero-actions .button>span{
    font-size:20px!important;
    line-height:1!important;
  }
}
@media(max-width:390px){
  body .hero .hero-actions .button{font-size:13px!important}
}

@media (max-width: 380px) {
  :root { --mobile-pad: 12px; }
  .hero h1 { font-size: 29px !important; }
  .hero-actions { grid-template-columns: 1fr !important; }
  .hero-actions .button { width: 100% !important; }
  .toolkit-grid { gap: 10px 7px !important; }
  .toolkit-note, .toolkit-note:nth-child(n) { min-height: 194px !important; padding-inline: 8px !important; }
  .toolkit-note h3 { font-size: 12px !important; }
  .toolkit-note p { font-size: 8.4px !important; }
  .detail-hero { grid-template-columns: minmax(0,1fr) 68px !important; }
  .detail-company-logo { width: 68px !important; height: 68px !important; padding: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* Final mobile guardrails: keep every top-level composition inside the viewport. */
@media (max-width: 700px) {
  html,
  body {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .site-header,
  .detail-header {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
  }

  .site-header .brand {
    flex: 0 0 126px !important;
  }

  .detail-header .brand {
    flex: 0 0 104px !important;
    width: 104px !important;
  }

  .detail-header .brand-logo,
  .detail-header .brand img {
    width: 104px !important;
    max-width: 104px !important;
  }

  .detail-header .back-link {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(100vw - 142px) !important;
    margin-left: auto !important;
  }

  .hero,
  .hero-content,
  .detail-hero,
  .case-hero,
  .case-copy,
  .case-cover {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-content {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  .hero-content > * {
    max-width: 100% !important;
  }

  .hero h1 {
    width: 100% !important;
    font-size: clamp(25px, 7.15vw, 31px) !important;
    letter-spacing: -.035em !important;
  }

  .hero h1 span {
    display: block !important;
    max-width: 100% !important;
  }

  .hero-copy {
    width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .hero-actions {
    grid-template-columns: minmax(0, 1.42fr) minmax(96px, .58fr) !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-width: 0 !important;
    gap: 5px !important;
    padding-inline: 10px !important;
    overflow: hidden !important;
  }

  .detail-hero {
    box-sizing: border-box !important;
  }

  .detail-hero > div:not(.company-watermark) {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .detail-hero h1,
  .detail-hero p,
  .detail-hero .eyebrow {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .case-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .case-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline: 9px !important;
    text-align: center !important;
    font-size: 9px !important;
  }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 25px !important; }
  .hero-actions { grid-template-columns: 1fr !important; }
}

/* Mobile title guardrails: keep every section title sharp, readable and in-flow. */
@media (max-width: 700px) {
  .toolkit-heading {
    overflow: visible !important;
  }

  .toolkit-heading .toolkit-eyebrow {
    margin: 0 0 12px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: .12em !important;
  }

  .toolkit-title {
    display: grid !important;
    justify-items: center !important;
    gap: 3px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .toolkit-title > span {
    display: block !important;
    margin: 0 !important;
    font-size: clamp(42px, 13vw, 54px) !important;
    line-height: 1 !important;
    transform: none !important;
  }

  .toolkit-title h2 {
    display: block !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
    font-size: clamp(27px, 7.5vw, 33px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .toolkit-title h2 strong {
    display: block !important;
    margin-bottom: 3px !important;
    color: #2b67de !important;
    font-size: clamp(30px, 8.3vw, 36px) !important;
    line-height: 1.06 !important;
    white-space: normal !important;
  }

  .toolkit-heading > p:last-child {
    max-width: 340px !important;
    margin-top: 14px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  /* Copy should never remain blurred while the user is reading a mobile section. */
  .scroll-reveal.reveal-copy,
  .toolkit-heading .scroll-reveal,
  .experience-intro .scroll-reveal,
  .section-heading .scroll-reveal,
  .education-intro .scroll-reveal,
  .gallery-heading.scroll-reveal,
  .contact-section-heading .scroll-reveal {
    filter: none !important;
  }

  .toolkit-heading .scroll-reveal,
  .experience-intro .scroll-reveal,
  .section-heading .scroll-reveal,
  .education-intro .scroll-reveal,
  .gallery-heading.scroll-reveal,
  .contact-section-heading .scroll-reveal {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    clip-path: none !important;
    transition: none !important;
  }

  :is(.experience-intro, .section-heading, .education-intro, .gallery-heading, .contact-section-heading) h1,
  :is(.experience-intro, .section-heading, .education-intro, .gallery-heading, .contact-section-heading) h2 {
    max-width: 100% !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    text-wrap: balance !important;
  }
}